A quick dive in to how to use Lighthouse to try and understand how users in a country might experience the web.

रुथ जॉन क्रोम ओएस (अस्थायी रूप से) में चले गए:

The first thing, and possibly the thing with the least amount of up to date information out there, was enabling Crostini. This runs Linux in a container on the Chromebook, something you pretty much want straight away after spending 15 minutes on it.

I have the most recent Pixel, the 256GB version. Here’s what you do.

• Go to settings.
• Click on the hamburger menu (top left) - right at the bottom it says ‘About Chrome OS’
• Open this and there’s an option to put your machine into dev mode
• It’ll restart and you’ll be in dev mode - this is much like running Canary over Chrome and possibly turning on a couple of flags. It may crash, but what the hell you’ll have Linux capabilities ��
• Now you can go back into Settings and in regular settings there’s a ‘Linux apps’ option. Turn this on. It’ll install Linux. Once this is complete you’ll have a terminal open for you. Perfect

पूर्ण पोस्ट पढ़ें।

रुथ के पास क्रोम ओएस में जाने का एक बड़ा लेखन है क्योंकि उसकी मुख्य मशीन टूट गई है।

मैं 4 महीने पहले क्रोम ओएस पूर्णकालिक (Google I / O से पहले) में स्थानांतरित हो गया था और केवल मैक में स्थानांतरित हो गया क्योंकि मैंने अपना पिक्सेलबुक (अब तय किया) तोड़ दिया।

मेरे लिए यह आज की सबसे अच्छी वेब विकास मशीनों में से एक है। यह एकमात्र ऐसा उपकरण है जिसे मैं ‘सच्चे मोबाइल’ पर परीक्षण कर सकता हूं - आप एआरसी मंच के माध्यम से इसे क्रोम ऑन मोबाइल, फ़ायरफ़ॉक्स मोबाइल, सैमसंग ब्राउज़र, बहादुर आदि इंस्टॉल कर सकते हैं। क्रॉस्टिनी क्रोम ओएस के लिए एक गेम परिवर्तक भी है क्योंकि यह क्रोम ओएस में बहुत सारे लिनक्स ऐप पारिस्थितिकी तंत्र लाता है और यह वास्तव में क्रोम ओएस पर मेरे लिए एक विशाल ऐप-गैप भरना शुरू कर देता है; मुझे फ़ायरफ़ॉक्स, विम, गिट, वीएस कोड, नोड, एनपीएम, मेरे सभी बिल्ड टूल्स, जीआईएमपी और इनक्सकेप मिल गए हैं … यह कहना नहीं है कि यह सही रहा है, क्रॉस्टिनी तेज हो सकती है, यह अभी तक GPU तेज नहीं है और यह Filemanager आदि के साथ अधिक एकीकृत हो, और अंत में पिक्सेलबुक को वास्तव में अधिक भौतिक बंदरगाहों की आवश्यकता है - मैं इसे दो 4k स्क्रीन संलग्न कर सकता हूं, लेकिन मैं एक ही समय में चार्ज नहीं कर सकता।

मुझे लगता है कि रूथ की रैप अप भी काफी सटीक है, पिक्सेलबुक एक महंगी मशीन है, लेकिन मैं इसे अधिक से अधिक उपकरणों (विशेष रूप से उन लोगों को बहुत कम कीमत बिंदुओं पर आने के लिए बहुत उत्साहित हूं।)

Would I pay full price for it? I’m not sure I would pay full price for anything on the market right now. Point me in the direction of a system that will run my graphics software and makes a good dev machine (with minimal setup) and lasts more than 18 months, point me in the direction of a worthy investment and I will pay the money.

हाँ।

PWA। प्रगतिशील वेब एप्स। फ्रांसिस बेरिमैन और एलेक्स रसेल ने 2015 में “प्रगतिशील वेब ऐप्स” शब्द का निर्माण किया जो मुझे लगता है कि एक मौलिक पोस्ट है “प्रगतिशील वेब ऐप्स: हमारी आत्मा खोने के बिना टैब से बचें“। 3 साल बाद, हम एक लंबा सफर तय कर चुके हैं। प्रौद्योगिकियों के ढीले संग्रह से - सेवा कर्मचारी, मैनिफेस्ट, होमस्क्रीन में जोड़ें, वेब पुश - जो मूल रूप से केवल एक ब्राउज़र इंजन में लागू किया गया था, एक ऐसे ब्रांड के लिए जो उद्योग और व्यापारियों और डेवलपर्स के साथ उद्योग में रहना शुरू कर चुका है, और सभी प्रमुख ‘पीडब्लूए’ स्टैक के बहुमत को लागू करने वाले ब्राउज़र विक्रेताओं।

मुस्तफा लिखते हैं:

Tooling is complicated, we are a tooling focused industry, and they change so much. I have used maybe rough eight different tools, from Photoshop to Sketch. That’s before we add prototyping tools to the mix. This may be something we just have to accept. After all, type standards only really started to settle in the 90s, and typography is a 500-year-old discipline.

Designers are still finding it difficult to prove the importance of the process. I think this is something that we have to take on board: to learn how to educate and not just expect everyone to trust us by default. That takes time — perhaps using scenario-based design or design workshops like a design sprint would help. Getting non-designers to observe users while using a prototype they created is one of the best experiences I have seen in this field.

Cross-browser support is lacking crucial features. Designers need to understand developer tooling, to better scope out what is possible. I think using paired programming or the design process described above can help.

Responsive design is still challenging. I think this is in part due to the tools we use; I would love Chrome Design Tools that would help turn the browser into a creative tool. This space is where I think the next evolutionary step for site and web app creation is at. Mozilla is doing some fantastic work in this space, with their layout and shapes tooling.

All in all the challenges that we face seem to be all the age-old ones. Process, tools, and respect.

पूर्ण पोस्ट पढ़ें।

मैंने यह एक बहुत ही रोचक पोस्ट पाया जो एक पोस्ट के पूरक भी है वेब डेवलपर्स के लिए चुनौतियों के बारे में मैंने लिखा था। यह आश्चर्य की बात नहीं है कि ब्राउज़र कंपैट एक मुद्दा है, लेकिन अभी भी चिंता का विषय यह है कि आईई 11 के लिए इमारत अभी भी कुछ ऐसा है जो उद्योग को वापस पकड़ रही है। इसी तरह, मुस्तफा बताते हैं कि उत्तरदायी डिजाइन के आसपास टूलिंग के साथ अभी भी एक मुद्दा है और एक ही उत्तरदायी समाधान पर जोर हमेशा निम्नलिखित (जो मुस्तफा के पद में है) की ओर जाता है:

Designing once and using everywhere is still hard to reach ambition.

यह एक समस्या है जो मुझे लगता है कि हम सभी अभी भी कुश्ती के साथ हैं। एक तरफ हम सभी को एक उत्तरदायी समाधान बनाना चाहते हैं जो प्रत्येक डिवाइस फॉर्म-फैक्टर पर हर किसी की सेवा कर सके, दूसरी ओर उपयोगकर्ता संदर्भ महत्वपूर्ण है और अक्सर उपयोगकर्ता निश्चित समय पर कुछ कार्य करने के इच्छुक होंगे; हम इसे खुदरा और वाणिज्य उद्योग में बहुत कुछ देखते हैं: लोग मोबाइल पर ब्राउज़ करेंगे, और डेस्कटॉप पर पूरा करेंगे, और फिर सवाल यह हो जाता है कि आप इस बहु-मॉडल मॉडल को और अधिक पूरा करते हैं या सभी उपकरणों में एक सतत अनुभव बनाते हैं … I संदेह है कि जवाब ‘यह निर्भर करता है’, लेकिन किसी भी तरह से उत्पाद टीमों से लेकर इंजीनियरिंग टीमों के लिए यह एक कठिन समस्या है।

फिलिप वाल्टन के पास एक नई एपीआई में एक शानदार गहरी गोता है, जो क्रोम टीम आपको (डेवलपर) नियंत्रण देने के लिए काम कर रही है जब ब्राउज़र आपके टैब को अनलोड करता है।

Application lifecycle is a key way that modern operating systems manage resources. On Android, iOS, and recent Windows versions, apps can be started and stopped at any time by the OS. This allows these platforms to streamline and reallocate resources where they best benefit the user.

On the web, there has historically been no such lifecycle, and apps can be kept alive indefinitely. With large numbers of web pages running, critical system resources such as memory, CPU, battery, and network can be oversubscribed, leading to a bad end-user experience.

While the web platform has long had events that related to lifecycle states — like load, unload, and visibilitychange — these events only allow developers to respond to user-initiated lifecycle state changes. For the web to work reliably on low-powered devices (and be more resource conscious in general on all platforms) browsers need a way to proactively reclaim and re-allocate system resources.

In fact, browsers today already do take active measures to conserve resources for pages in background tabs, and many browsers (especially Chrome) would like to do a lot more of this — to lessen their overall resource footprint.

The problem is developers currently have no way to prepare for these types of system-initiated interventions or even know that they’re happening. This means browsers need to be conservative or risk breaking web pages.

The Page Lifecycle API attempts to solve this problem by:

• Introducing and standardizing the concept of lifecycle states on the web.
• Defining new, system-initiated states that allow browsers to limit the resources that can be consumed by hidden or inactive tabs.
• Creating new APIs and events that allow web developers to respond to transitions to and from these new system-initiated states.
• This solution provides the predictability web developers need to build applications resilient to system interventions, and it allows browsers to more aggressively optimize system resources, ultimately benefiting all web users.

The rest of this post will introduce the new Page Lifecycle features shipping in Chrome 68 and explore how they relate to all the existing web platform states and events. It will also give recommendations and best-practices for the types of work developers should (and should not) be doing in each state.

पूर्ण पोस्ट पढ़ें।

मेरी पहली टिप्पणी यह ​​है कि आपको फिलिप्स पोस्ट पढ़ना चाहिए। यह विस्मयकरी है।

मोबाइल पर, जब उपयोगकर्ता इसका उपयोग नहीं कर रहा है, तो संसाधनों को संरक्षित करने के लिए क्रोम पृष्ठभूमि (फ्रीजिंग या डिसकॉर्डिंग) पर बहुत आक्रामक हो सकता है (उदाहरण के लिए, जब आप टैब को स्वैप करते हैं या एंड्रॉइड पर क्रोम ऐप से ले जाते हैं), जब ब्राउजर पृष्ठभूमि करता है एक डेवलपर के रूप में पृष्ठ जिसे आप परंपरागत रूप से नहीं जानते हैं, जब ऐसा होता है तो आप आसानी से राज्य को जारी नहीं रख सकते हैं या खुले संसाधनों को भी बंद नहीं कर सकते हैं और उतना ही महत्वपूर्ण है जब आप ऐप वापस राज्य को फिर से हाइड्रेट कर सकते हैं। जब डेवलपर्स का नियंत्रण होता है तो वे अधिक सूचित विकल्प बना सकते हैं, जिसका अर्थ यह भी है कि ब्राउज़र भविष्य में संसाधनों को संरक्षित करने में अधिक आक्रामक हो सकता है बिना उपयोगकर्ता या डेवलपर अनुभव को गंभीर रूप से प्रभावित करता है।

अंत में, नीचे दिए गए आरेख में यह सब बहुत अच्छी तरह से अच्छी तरह से बताता है।

पीट लीपेज क्रोम में होमस्क्रीन में जोड़ने के लिए महत्वपूर्ण बदलावों के बारे में लिखता है

Add to Home Screen changes

If your site meets the add to home screen criteria, Chrome will no longer show the add to home screen banner. Instead, you’re in control over when and how to prompt the user.

To prompt the user, listen for the beforeinstallprompt event, then, save the event and add a button or other UI element to your app to indicate it can be installed.

पूर्ण पोस्ट पढ़ें।

मुझे मूल रूप से इस बारे में मिश्रित भावनाएं थीं क्योंकि बहुत से लोग ‘preinstallprompt’ ईवेंट को संभाल नहीं पाते थे, इसका मतलब यह था कि अचानक वेब एपीके के इंस्टॉल की संख्या काफी कम हो जाएगी, लेकिन मुझे लगता है कि यह वास्तव में करना सही है।

लक्ष्य वेब पर होने वाले कष्टप्रद संकेतों की संख्या को कम करना है, और आखिरी चीज जो हमें उद्योग में चाहिए, वह अपेक्षाकृत बड़ी प्राप्ति के लिए है जब हमें लगता है कि उपयोगकर्ता पीडब्ल्यूए स्थापित करना चाहता है, इसके बजाय अब आपको इस बारे में सोचें कि कहां और कब ** आप ** इंस्टॉल करने के लिए संकेत देना चाहते हैं और आपको उपयोगकर्ता-इशारा के जवाब में ऐसा करना है।

साफ बात यह है कि हम (क्रोम) उपयोगकर्ता को यह जानने के अधिक परिवेश तरीकों को पेश कर रहे हैं कि एक अनुभव स्थापित करने में सक्षम है, अभी यह छोटा लोड बार है जो पहले लोड पर दिखाई देता है, और उम्मीद है कि भविष्य में हम खोज सकते हैं उपयोगकर्ता को यह बताने के अधिक सूक्ष्म तरीके वे जानते हैं कि वे कार्रवाई कर सकते हैं।

Pinterest के पीडब्ल्यूए का एक शानदार अवलोकन

The verdict

Now for the part you’ve all been waiting for: the numbers. Weekly active users on mobile web have increased 103 percent year-over-year overall, with a 156 percent increase in Brazil and 312 percent increase in India. On the engagement side, session length increased by 296 percent, the number of Pins seen increased by 401 percent and people were 295 percent more likely to save a Pin to a board. Those are amazing in and of themselves, but the growth front is where things really shined. Logins increased by 370 percent and new signups increased by 843 percent year-over-year. Since we shipped the new experience, mobile web has become the top platform for new signups. And for fun, in less than 6 months since fully shipping, we already have 800 thousand weekly users using our PWA like a native app (from their homescreen).

Looking back over one full year since we started rebuilding our mobile web, we’re so proud of the experience we’ve created for our users. Not only is it significantly faster, it’s also our first platform to support right-to-left languages and “night mode.” Investing in a full-featured PWA has exceeded our expectations. And we’re just getting started.

पूर्ण पोस्ट पढ़ें।

यह वास्तव में एक महान पोस्ट शो है जो उच्च गुणवत्ता वाले, तेज़ और आकर्षक साइटों के निर्माण के लाभ दिखाता है। यह भी देखना बहुत अच्छा है कि पीडब्ल्यूए का ‘ऐप’ हिस्सा, विशेष रूप से ‘होमस्क्रीन में जोड़ें’ इंस्टॉलिबिलिटी का उपयोग बहुत से उपयोगकर्ताओं द्वारा किया जा रहा है। व्यापक पोस्ट को पढ़ना यह देखना अच्छा होता है कि वे एक महान वेबसाइट अनुभव पर ध्यान केंद्रित कर रहे थे, जो कि तेज़ लोडिंग साइटों पर केंद्रित है, जो प्रारंभिक लोड को कम करने के लिए कोड-स्प्लिटिंग के माध्यम से दोहराने योग्य और अनुमानित प्रदर्शन करते हैं और अच्छी वास्तुकला भी जो वे साझा कर सकते हैं टीम। फिर एक बार आपके पास मूल अनुभव हो जाने पर आप उन उपयोगकर्ताओं के लिए पुश नोटिफिकेशन जैसी सुविधाओं पर परत कर सकते हैं जो उन्हें चाहते हैं।

डिफ़ॉल्ट रूप से ह्यूगो सही सामग्री प्रकार के साथ .mjs फ़ाइलों की सेवा नहीं करता है। वास्तव में यह हाल ही में तब तक नहीं था जब ह्यूगो प्रति माइम-प्रकार के एक से अधिक फ़ाइल एक्सटेंशन की सेवा कर सके। ऐसा लगता है कि v0.43 के साथ यह तय किया गया है।

[mediaTypes] [mediaTypes.“text/javascript”] suffixes = [“js”, “mjs”]

पूर्ण पोस्ट पढ़ें।

उपरोक्त कोड मुझे सही माइम-प्रकार के साथ ईएस मॉड्यूल के लिए एमजेएस फाइलों की सेवा करने देता है (नोट मॉड्यूल को ‘टेक्स्ट / जावास्क्रिप्ट’ के साथ परोसा जाना चाहिए)। यह केवल स्थानीय परीक्षण के लिए जरूरी है, होस्टिंग एक और मुद्दा है :)

मुझे कल पोस्ट पर विचार मिला है जो मैंने कल ES मॉड्यूल के बारे में किया था

I needed a quick way import a simple module get-urls into my project. The module is well tested and it does what I needed … ignore the fact that it’s pretty easy to implement in a couple of lines of JavaScript. The problem I had is that my project is built in ES6, uses modules and I didn’t want to have to bundle up using CommonJS (require).

I couldn’t find a lot of guidance on what to do here, so I went to experiement and this solution is the solution I came across:

1. Create a file that imports the npm module I needed. module.exports = require(‘get-urls’); This module will be what’s converted to ES6 style.
2. Create a rollup config that
   1. Imports the node globals, and builtins.
   2. Resolves all npm modules required for my usage of this module.
   3. Pass the results through the commonjs plugin so that it’s now in JavaScript module format.
   4. Compress the output, because it’s huge :
3. Include the bundled file in your project and rejoice.

पूर्ण पोस्ट पढ़ें।

उन चीजों में से एक जो मैं मूल लेख में कोशिश करना और स्पष्ट करना चाहता था, लेकिन मैंने यह पता लगाने का फैसला किया कि नोड पारिस्थितिकी तंत्र में बहुत अधिक मात्रा में कोड है जो वास्तव में नोड प्रति से विशिष्ट नहीं है लेकिन कसकर इसके साथ मिलकर बना हुआ है कॉमन जेएस और अन्य बहुत विशिष्ट नोड एपीआई (बफर, पुराना यूआरएल इत्यादि) के माध्यम से नोड खुद को खींचने के लिए बहुत प्रयास करने जा रहा है और इस प्रकार ईएस मॉड्यूल बनाने के लिए परिवर्तन की आवश्यकता हो सकती है सर्वव्यापी संभावित रूप से काफी दर्दनाक होगा, और जब तक पारिस्थितिकी तंत्र में परिवर्तनों को हमें कई प्लेटफ़ॉर्म (वेब ​​/ सर्वर) में कोड को साफ़ रूप से साझा करने में सक्षम होने के लिए बहुत से रूपांतरण टूल और बंडलर का उपयोग करने की आवश्यकता होगी।

हम हैं जहां हम हैं, वेब पर एक आयात करने वाली कहानी नहीं थी, हमारे पास नोड ने पेश किए गए प्राइमेटिव्स का ढेर नहीं था और अब अब कई लोग वास्तव में प्लेटफार्म आवश्यकताओं पर विचार करेंगे, इसलिए मुझे उम्मीद है कि यह है एक आलोचना की तुलना में स्थिति की एक स्वीकृति से अधिक।

फ़ाइल एक्सटेंशन के रूप में ‘.mjs’ का उपयोग करने के लिए एक कदम भी है जो नोड और वेब दोनों में मानक है। मैं इसके साथ पूरी तरह से सहज महसूस करता हूं, हालांकि .msj एक फ़ाइल नहीं है जिसे किसी भी आधारभूत संरचना को अभी तक ‘टेक्स्ट / जावास्क्रिप्ट’ के रूप में पहचाना जाता है और मैं इसके लिए बस इस तरह की तलाश कर रहा हूं ताकि यह ग्रह पर हर वेब सर्वर द्वारा स्वचालित रूप से अनुमानित हो सके, इसलिए मुझे अपने सेवारत बुनियादी ढांचे में अभी तक और अधिक विन्यास परिवर्तनों को तैनात करने की आवश्यकता नहीं है।

आगे के बहुत सारे मज़ेदार समय, मैं एक के लिए वेब पर बहुत अधिक कार्यक्षमता लाने में सक्षम होने की उम्मीद कर रहा हूं।

मैं अपनी स्थिर साइट में सामग्री को धक्का देना आसान बनाने के लिए काम कर रहा हूं और यह एक मजेदार थोड़ा अभ्यास रहा है जिसे मैं एक और पोस्ट में अधिक साझा करूंगा। इस पोस्ट में मैं ‘रोलअप’ कॉन्फ़िगरेशन साझा करना चाहता हूं जिसे मैं लगभग किसी भी एनपीएम मॉड्यूल को जावास्क्रिप्ट मॉड्यूल का उपयोग करके फ्रंटएंड प्रोजेक्ट में आयात करने के लिए उपयोग करता था। मुझे अपनी परियोजना में एक सरल मॉड्यूल ‘get-urlsआयात करने का एक त्वरित तरीका चाहिए। मॉड्यूल अच्छी तरह से परीक्षण किया जाता है और यह वही करता है जो मुझे चाहिए .

इस डॉट से ट्रेसी ली ने एक बेहतर साफ-सुथरा लाइव-स्ट्रीम आयोजित किया जो ब्राउज़र विक्रेताओं में लाया गया ताकि वे इस बात पर एक सिंहावलोकन दे सकें कि वे क्या काम कर रहे हैं:

Browser representatives from Brave, Beaker, Edge, Chrome, & Mozilla get together to talk about recent updates and the state of browsers.

Featured Speakers:

• Brendan Eich -  Creator of Javascript, Co-founder & CEO at Brave Software
• Paul Frazee - Works on Beaker Browser
• Matthew Claypotch - Developer Advocate at Mozilla
• Paul Kinlan - Senior Developer Advocate at Google
• Patrick Kettner - Edge at Microsoft
• Amal Hussein - Senior Open Web Engineer at Bocoup
• Tracy Lee - GDE, RxJs Core Team, This Dot Co-founder

पूर्ण पोस्ट पढ़ें।

मैंने पूरी तरह से लाइव स्ट्रीम का आनंद लिया और यह सुनकर बहुत अच्छा लगा कि हर कोई क्या कर रहा है। मुझे इस दृष्टि से भी प्यार है कि बीकर ब्राउज़र के पास एक वितरित वेब के लिए है, हमने पिछली बार मिलने के बाद से बहुत सारे काम किए हैं।

मैं आपको लिंक किए गए वीडियो को देखने के लिए प्रोत्साहित करता हूं, एज के पास पूर्ण सेवा कार्यकर्ता समर्थन, परिवर्तनीय फ़ॉन्ट्स सहित बड़ी संख्या में अपडेट हैं और वे वेबपी भी पेश कर रहे हैं। मोज़िला के पास वेब असेंबली और डेवलपर टूलिंग पर एक बड़ा ध्यान केंद्रित है, बीकर डेटा के साथ अद्भुत चीजें कर रहा है: और वितरित कंप्यूटिंग और बहादुर बीएटी पर बहुत आगे बढ़ रहा है।

मैंने इस काम पर ध्यान केंद्रित किया कि हमारी टीम इस समय कर रही है, और यह व्यापक रूप से डिस्कवरी, स्पीड और विश्वसनीयता, यूआई उत्तरदायित्व, यूएक्स - सामान, सुरक्षा और गोपनीयता प्राप्त करें। थोड़ा और ठोस रूप से:

• डिस्कवरी - हमें वास्तव में जेएस के साथ साइट बनाने के लिए डेवलपर्स के लिए आसान बनाना होगा जो इंडेक्सर्स और एम्बेडर्स जैसे हेडलेस सेवाओं में प्रस्तुत करते हैं। इसका मतलब है कि हमें डेवलपर्स को शिक्षित करने पर ध्यान केंद्रित करने की आवश्यकता है कि इंडेक्सर्स कैसे काम करते हैं और उनके खिलाफ परीक्षण कैसे करें, और अच्छे ठोस एसएसआर अनुभव कैसे बनाएं। * गति और विश्वसनीयता - सभी साइटों में मेडियन डिवाइस (एक मोटोग ⁴⁄₅) पर 3 जी नेटवर्क पर टीटीआई <5 एस होना चाहिए और आपको अपने एफआईडी (पहली इनपुट देरी) को अनुकूलित करना चाहिए। एफआईडी एक नया मीट्रिक है, इसलिए यह समझना महत्वपूर्ण है कि यह प्रतिनिधित्व करने के लिए है कि आपके उपयोगकर्ता जंगली में आपकी साइट का अनुभव कैसे करते हैं, जहां टीटीआई को मापने में कठिनाई होती है, एफआईडी आसान होना चाहिए। यहां एक पॉलीफिल है जिसका उपयोग आप एफआईडी का परीक्षण करने के लिए कर सकते हैं * यूआई उत्तरदायित्व - हम चाहते हैं कि वेब हर जगह 60fps हो और डेवलपर्स को हासिल करना आसान हो, इसलिए हम & # x2018; FLIP & # x2019 बनाने पर काम कर रहे हैं; समझने में आसान, हुडिनी का निर्माण करना ताकि हम डेवलपर्स को प्रतिपादन में बहुत अधिक नियंत्रण दे सकें और आखिरकार आईएमजी.कोडोड जैसी चीजों के माध्यम से जितना संभव हो सके ‘ऑफ-मेन-थ्रेड’ को स्थानांतरित करने की कोशिश कर रहे हों और कर्मचारियों को काम करने के लिए कॉमलिंक जैसे टूल उपयोग करने में आसान है। * यूएक्स - सामान पूरा करें - हम वास्तव में इस तरीके को बदलना चाहते हैं कि हम मंच पर आने वाली नई सुविधाओं के बारे में बात करते हैं, विशेष रूप से हम यह दिखाना चाहते हैं कि उपयोगकर्ताओं को अपने काम को जल्दी से करने में मदद करने के लिए उपयोगकर्ताओं के अनुभवों को बेहतर बनाने के लिए तकनीक का प्रभावी ढंग से उपयोग किया जाना चाहिए जितना संभव हो उतना कम बाधा के साथ। * सुरक्षा और गोपनीयता - मुझे लगता है कि ऐप्पल की इंटेलिजेंट ट्रैकिंग रोकथाम वेब पर दीर्घकालिक प्रभाव डालने जा रही है और डेवलपर्स को वेब अनुभवों का समर्थन करने वाले गोपनीयता के निर्माण के बारे में अधिक सोचने की आवश्यकता है। यदि कुछ भी जीडीपीआर वेब को यूरोपीय संघ में ‘दिलचस्प’ अनुभव बना रहा है।

आखिरकार, यह सुनने के लिए नम्र और दिल से वार्मिंग था कि हर कोई [वेब इराद] वापस लेना चाहता है (https://en.wikipedia.org/wiki/Web_Intents) :)

सैम थोरोगूड हमारी टीम से लिखते हैं:

You’ve designed a webapp, built its code and service worker, and finally added the Web App Manifest to describe how it should behave when ‘installed’ on a user’s device. This includes things like high-resolution icons to use for e.g. a mobile phone’s launcher or app switcher, or how your webapp should start when opened from the user’s home screen.

And while many browsers will respect the Web App Manifest, not every browser will load or respect every value you specify. Enter PWACompat, a library that takes your Web App Manifest and automatically inserts relevant meta or link tags for icons of different sizes, the favicon, startup mode, colors etc.

पूर्ण पोस्ट पढ़ें।

मैं इस पुस्तकालय से चकित था, और मुझे यह देखने में खुशी हुई कि यह थोड़ा अधिक ध्यान दे रहा है। यह पहली बार था जब मैंने वास्तव में पिछले 5 वर्षों में आईओएस काम पर स्पलैश स्क्रीन देखी और वह उन्हें वास्तव में साफ तरीके से उत्पन्न करता है - वह डिवाइस के सटीक स्क्रीन आकार के आधार पर फ्लाई पर छवि उत्पन्न करता है और बेस 64 छवि को एन्कोड करता है … यह सफारी ऐड टू होमस्क्रीन कहानी में शेष अंतराल में भी भर जाता है।

यदि आप पीडब्ल्यूए बना रहे हैं तो मैं इसे शामिल करूंगा।

Font Playground is built for three groups of audiences.

The first group of audience is typographers and designers, who would like to play with fonts that are built with the latest font technologies, such as variable font. It is a playground to fully explore what these new font technologies can offer and how they can be beneficial to your creative workflow.

The second group of audience is me, as a Type Tool’s UI/UX designer. This is a playground for me to test UI experiments for variable fonts and other new upcoming font technologies. One of the key points to the success of new font technology is adoption by design tools, and furthermore, designers. How can design tool present variable fonts in a way that is useful but not too complicated to handle? I hope to find the answers with this playground.

The third group of audience is the type designers and foundries. This is a place to showcase the work-in-progress, cutting-edge font creations. It is a playground to see how fonts are being presented and used in future design tools. How fonts are used can also inform how fonts are made, and what standard should be defined.

पूर्ण पोस्ट पढ़ें।

यह परिवर्तनीय फोंट के लिए एक महान परिचय है और यह कार्रवाई में भिन्नता से सब कुछ देखने के लिए यह एक महान खेल का मैदान है। कई टेक्स्ट लाइनों को जोड़ना ऐसा लगता है कि यह जल्द ही लैंडिंग होगा।

नोट: मेरा मानना ​​है कि यह अभी तक फ़ायरफ़ॉक्स में काम नहीं करता है क्योंकि वे वैरिएबल फ़ॉन्ट्स का पूर्ण समर्थन नहीं करते हैं।

पैट्रिक Did.txt के बारे में लिखता है

Time flies by when you’re learning how to code. Its super important to take a second every once in a while to simple write down what you did during the past mental sprint. Writing down what you learned solidifies the knowledge.

पूर्ण पोस्ट पढ़ें।

यह आंतरिक रूप से हम जो करते हैं उससे दस लाख मील दूर नहीं है, जहां हमारे पास ‘स्निपेट’ की अवधारणा है। यह आप पर निर्भर करता है कि आप इसे कैसे प्रबंधित करते हैं, लेकिन यह आपके द्वारा किए गए कार्यों का ट्रैक रखने का एक शानदार तरीका है, लेकिन आपकी टीम में भी साझा किया गया है, आपको अपने साथियों, प्रबंधकों और रिपोर्टों के बारे में अच्छी तस्वीर मिल रही है।

मुझे पसंद है कि प्रत्येक साप्ताहिक सारांश को ‘मैंने क्या किया’ और ‘इस सप्ताह क्या करना है’ में विभाजित करना है। यह मुझे एक ही समय में प्रतिबिंबित करने और योजना बनाने में मदद करता है।

सीएसएस ट्रिक्स पर अतीश जैन मेरे दिल के करीब एक क्षेत्र के बारे में लिखते हैं, लिंकिंग:

Hyperlinks are the oldest and the most popular feature of the web. The word hypertext (which is the ht in http/s) means text having hyperlinks. The ability to link to other people’s hypertext made the web, a web — a set of connected pages. This fundamental feature has made the web a very powerful platform and it is obvious that the world of apps needs this feature. All modern platforms support a way for apps to register a URI (custom protocol) and also have universal links (handling web links in an app).

Let’s see why we’d want to take advantage of this feature and how to do it.

पूर्ण पोस्ट पढ़ें।

यह एक अच्छा लेख था जिसमें ऐप्स और साइटों के लिए उपलब्ध विभिन्न प्रकार के हाइपरलिंकिंग शामिल थे। मैं इस जगह में बहुत से शोध कर रहा हूं क्योंकि वेब इरादों और वेब पर उन्नत लिंकिंग की स्थिति वांछित होने के लिए बहुत कुछ छोड़ देती है, इमो।

वेब से मुझे क्यों प्यार है, इसका एक कारण यह है कि एक लिंक के पीछे संसाधन तक सीधी पहुंच है, मुझे कोई अन्य प्लेटफ़ॉर्म नहीं पता है जो लिंक और वास्तविक संसाधन को उसी तरह जोड़ सकता है, लेकिन यह बहुत अधिक हो सकता है अधिक। मानक लिंक अनिवार्य रूप से एक दृश्य उद्देश्य प्रदान करता है जिसमें राज्य (यूआरएल) और संदर्भ (एंकरों के बीच पाठ) शामिल है, और आप इसके साथ कस्टम प्रोटोकॉल के बारे में हैक कर सकते हैं लेकिन हमें बहुत आगे जाना होगा।

• हमें शब्दावली को ‘रजिस्टरप्रोटोकॉल हैंडलर’ में और अधिक देशी योजनाओं तक पहुंचने की आवश्यकता है * प्रोटोकॉल हैंडलर के साथ पंजीकृत कुछ भी सिस्टम चौड़ा होना चाहिए। * हमें वेब साइट्स को सामग्री प्रकारों की एक श्रृंखला खोलने में सक्षम होने और सिस्टम फ़ाइल हैंडलर के रूप में पंजीकृत होने के लिए उपलब्ध पृष्ठों को रखने में सक्षम होना चाहिए। * हमें डेवलपर्स के लिए उच्च ऑर्डर क्रियाएं उपलब्ध कराने की आवश्यकता है, दृश्य बहुत बढ़िया है, हमें पिक, सेव, संपादित करने जैसे मूल कार्यों के सेट पर सहमत होना चाहिए ताकि हम साइट या ऐप की क्षमताओं को और अधिक प्रभावी ढंग से समझ सकें, और विस्तार करने की क्षमता उन्हें उच्च-आदेश अर्थशास्त्र के साथ। एंड्रॉइड में यह है, सिरी इसे ‘इरादों’ का उपयोग करके प्राप्त कर रहा है, वेब को भी यह होना चाहिए।

यह कारणों में से एक है कि मैं मैसेजिंग अबास्ट्रक्शंस जैसे कि कॉमलिंक के बारे में बहुत उत्साहित हूं जो पोस्ट मैसेज पागलपन के बोझ को हटा देता है और आपको दूसरे को फ़ंक्शन उजागर करने के बारे में सोचने देता है ऐप्स, और फिर एक बार जब आप फ़ंक्शन का पर्दाफाश करते हैं तो आपको उस फ़ंक्शन की खोज को अधिक आसानी से सक्षम करने की आवश्यकता होती है … और यही लिंक सक्षम हैं।

रेडफिन से दान वेब गति को प्राथमिकता देने के बारे में एक महान पोस्ट है:

JavaScript Is the Web’s CO2

As a web developer, I find that most problems can be solved with just a little more JavaScript. Without someone or something to force the industry to cut back, web developers will continue to make web sites that only load “fast enough” via wifi on a fast laptop.

The browser vendors can’t save us. Every time they make the web faster, web developers “take advantage” of the change by using more JavaScript.

Our industry needs Google to take a principled stand, to significantly prioritize fast-loading sites over slow-loading sites

पूर्ण पोस्ट पढ़ें।

यह सिर्फ हमें नहीं है (Google) जो यह कर सकता है। मैं हमारी टीम (वेब ​​और क्रोम देवरेल) को तेज़ी से शुरू करने में मदद करने के लिए टूल और मार्गदर्शन प्रदान करने में सक्षम हूं और फिर तेज़ी से रहना चाहता हूं, लेकिन इसके बाद उद्योग को यह समझना है कि प्रदर्शन एक विशेषता है और बाद में विचार नहीं है।

मैंने [वेब डेवलपर्स के लिए चुनौतियों] में लिखा [https://paul.kinlan.me/challenges-for-web-developers/) कि अभी भी कई कारण हैं कि डेवलपर्स प्रदर्शन (उपकरण, मार्गदर्शन और स्पष्ट व्यापार प्रोत्साहनों को प्राथमिकता नहीं देते हैं) ), मुझे नहीं लगता कि डैन के लेख पोस्ट में लिखे गए Google ने वेब के दीर्घकालिक स्वास्थ्य का उत्तर दिया है, इसे प्रदर्शन से बेहतर प्रदर्शन को देखने वाले व्यवसायों से आने की आवश्यकता है।

This project is a musical experience built with WebGL and WebVR.

Inspired by the music track, we created an ever-changing environment composed of various geometrical shapes. These were generated procedurally in Houdini and exported to Three.js.

All visual elements are randomized differently on each viewing.

पूर्ण पोस्ट पढ़ें।

मेरे पास जोड़ने के लिए बहुत कुछ नहीं है, यह बिल्कुल अद्भुत है। इसकी जांच - पड़ताल करें।

डीन ह्यूम हाल ही में पीडब्ल्यूए के साथ बहुत अच्छा काम कर रहा है, और वह जेनरिक सेंसर एपीआई में इस मामले में कई नए प्लेटफॉर्म एपीआई की खोज भी कर रहा है:

The Ambient Light Sensor API provides developers with the means to determine ambient light levels as detected by the device’s main light detector. This information is available to developers in terms of lux units. If you are building a Progressive Web App and you want to style it differently depending on the light levels in the room, then this could be the feature for you. There are a number of use cases for this feature, such as a web application that provides input for a smart home system to control lighting, a “Kindle” style reading app, or even a web app that calculates settings for a camera with manual controls (aperture, shutter speed, ISO, etc.).

पूर्ण पोस्ट पढ़ें।

मैंने क्रोम देव समिट 2016 में जेनेरिक सेंसर एपीआई के बारे में बात की, इसलिए क्रोम में उतरने के लिए निश्चित रूप से कुछ समय लगा है (मुझे लगता है कि यह अभी भी झंडे के पीछे है) और ऐसा लगता है कि यह पहले एज में उतरा है। परिवेश प्रकाश संवेदक कई एपीआई में से एक है जो जेनेरिक सेंसर के शीर्ष पर बनाया गया है & mdash; जीरो और मैग्नेटोमीटर और एमडीएएस जैसे अधिक हैं; और यह आपको उपयोगकर्ता के आसपास परिवेश प्रकाश के स्तर के बारे में जानकारी प्राप्त करने की अनुमति देता है, उपयोग के मामलों को खोलने जैसे कि चमक के स्वचालित समायोजन या यहां तक ​​कि उपयोगकर्ता को अंधेरे-मोड थीम पर स्विच करने की पेशकश भी करता है। यह निश्चित रूप से दिलचस्प होगा कि बेस जेनेरिक सेंसर एपीआई वेब अनुभवों को लाएगा।

जोनाथन फुल्टन, वीडियोबॉक्स:

The basic architecture concepts I wish I knew when I was getting started as a web developer

पूर्ण पोस्ट पढ़ें।

यह एक अद्भुत लेख है जो अपेक्षाकृत मानक स्टैक का वास्तव में एक शानदार अवलोकन देता है जिसे कई वेब ऐप्स स्केल करने के लिए डिज़ाइन किया गया है। यह भी दिखाता है कि क्यों कई डेवलपर्स प्लेटफॉर्म को हेरोकू, फायरबेस या ऐपइंजिन जैसे सेवा उपकरण के रूप में पसंद करते हैं जो लागत की कीमत पर बहुत जटिलता को सार कर सकते हैं।

Google डेवलपर के वेब अपडेट पर एरिक बिडलमैन लिखते हैं:

Building for the web is a rocky adventure. It’s hard enough to build a top-notch web app that nails performance and uses all the latest best practices. It’s even harder to keep that experience great over time. As your project evolves, developers come on board, new features land, and the codebase grows. That Great Experience ™ you once achieved may begin to deteriorate and UX starts to suffer! Feature Policy is designed to keep you on track.

With Feature Policy, you opt-in to a set of “policies” for the browser to enforce on specific features used throughout your site. These policies restrict what APIs the site can access or modify the browser’s default behavior for certain features.

Here are examples of things you can do with Feature Policy:

• Change the default behavior of autoplay on mobile and third party videos.
• Restrict a site from using sensitive APIs like camera or microphone.
• Allow iframes to use the fullscreen API.
• Block the use of outdated APIs like synchronous XHR and document.write().
• Ensure images are sized properly (e.g. prevent layout thrashing) and are not too big for the viewport (e.g. waste user’s bandwidth).

Policies are a contract between developer and browser. They inform the browser about what the developer’s intent is and thus, help keep us honest when our app tries to go off the rails and do something bad. If the site or embedded third-party content attempts to violate any of the developer’s preselected rules, the browser overrides the behavior with better UX or blocks the API altogether.

पूर्ण पोस्ट पढ़ें।

मुझे यह देखने में दिलचस्पी है कि यह भूमि कैसे है। मुझे चिंता है कि डेवलपर्स इस पर ध्यान नहीं देंगे, या वे दबाव डाले जाएंगे। जैसा कि मैंने कहा ट्विटर पर, मुझे प्रोत्साहनों की चिंता है और हमें इस तथ्य को गठबंधन करने की आवश्यकता है कि यह सुविधा डेवलपर्स को उपलब्ध सुविधाओं की एक बड़ी संख्या को नियंत्रित करने देगी या तो मेमोरी ले लो, पेज को धीमा कर सकते हैं, या अनजाने में तीसरे पक्ष के लिए उपयोगकर्ता-गोपनीयता को लीक कर सकते हैं, जो डेवलपर्स अपने व्यवसाय में बेच सकते हैं। एक उदाहरण यह हो सकता है कि ** यदि ** Play Store हमेशा पीडब्लूए की सूची में था तो वे ऐप लॉन्च होने पर स्वचालित रूप से लागू नीतियों के एक सेट के साथ आ सकते थे, और आप डेवलपर के रूप में इसमें शामिल होने के लाभ के लिए सहमत होंगे दुकान।

मैं यह देखने के लिए उत्साहित हूं कि इस एपीआई के साथ क्या होता है, और मैं इसे अपनाया जाने के लिए उत्सुक हूं, भले ही इसका उपयोग केवल डेवलपर्स द्वारा किया जाता है ताकि यह सुनिश्चित किया जा सके कि उनकी टीम वापस नहीं आती है।