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

Ruth John a déménagé à Chrome OS (temporairement):

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

Lire l’article complet.

Ruth a bien écrit sur le passage à Chrome OS parce que sa machine principale est tombée en panne.

J’ai déménagé à Chrome OS à plein temps il y a 4 mois (avant Google I / O) et je ne suis passé que sur Mac parce que j’ai cassé mon PixelBook (maintenant corrigé).

Pour moi, c’est l’une des meilleures machines de développement Web disponibles aujourd’hui. C’est le seul appareil sur lequel je peux tester le «vrai mobile» - vous pouvez installer Chrome sur Mobile, Firefox Mobile, Samsung Browser, Brave, etc. via la plate-forme ARC. Crostini est également un changement de jeu pour Chrome OS, car il apporte une grande partie de l’écosystème Linux App à Chrome OS et il commence vraiment à combler une énorme lacune d’application pour moi sur Chrome OS; J’ai Firefox, vim, git, VS Code, Node, npm, tous mes outils de construction, GIMP et Inkscape … Cela ne veut pas dire que ce soit parfait, Crostini pourrait être plus rapide, ce n’est pas encore accéléré par GPU et il pourrait être plus intégré au gestionnaire de fichiers etc, et enfin le PixelBook a vraiment besoin de plus de ports physiques - je peux y attacher deux écrans 4k, mais je ne peux pas charger en même temps.

Je pense que le récapitulatif de Ruth est tout à fait exact, le PixelBook est une machine coûteuse, mais je suis très enthousiaste à l’idée de voir cela devenir de plus en plus nombreux (en particulier ceux à des prix nettement inférieurs).

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.

Ouaip.

PWA. Applications Web progressives. Frances Berriman et Alex Russell ont inventé le terme “applications web progressives” en 2015 avec ce que je pense être un post séminal “Applications Web progressives: échapper des onglets sans perdre notre âme”. 3 ans plus tard, nous avons parcouru un long chemin. Depuis un ensemble de technologies - Service Worker, Manifest, Ajouter à l’écran d’accueil, Web Push - initialement implémentées dans un seul moteur de navigateur, à une marque qui a commencé à s’imposer dans le secteur avec les entreprises et les développeurs, et tous les principaux les fournisseurs de navigateurs implémentant la majorité de la pile ‘PWA’.

Mustafa écrit:

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.

Lire l’article complet.

J’ai trouvé cette publication très intéressante qui complète également un article que j’ai écrit sur les défis pour les développeurs Web. Il n’est pas surprenant que le navigateur soit un problème, mais ce qui est encore préoccupant, c’est que la construction pour IE11 est toujours quelque chose qui retient l’industrie. De même, Mustafa souligne qu’il y a toujours un problème avec l’outillage autour de Responsive Design et que l’accent mis sur une seule solution réactive conduit toujours à ce qui suit (c’est dans le post de Mustafa):

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

C’est un problème avec lequel nous sommes tous encore aux prises. D’une part, nous voulons que chacun construise une solution réactive capable de servir tout le monde sur chaque facteur de forme de l’appareil, d’autre part, le contexte utilisateur est important et, souvent, l’utilisateur n’est disposé à effectuer certaines actions qu’à certains moments; nous le voyons beaucoup dans le commerce de détail et le commerce: les gens naviguent sur mobile, et terminent sur ordinateur, et la question est alors de savoir si vous répondez davantage à ce modèle multimodal ou si vous créez une expérience cohérente sur tous les appareils. soupçonne que la réponse est «ça dépend», mais de toute façon c’est un problème difficile pour tous, des équipes de produits aux équipes d’ingénierie.

Philip Walton a une formidable plongée dans une nouvelle API sur laquelle l’équipe Chrome a travaillé pour vous donner (le développeur) le contrôle de la réponse lorsque le navigateur décharge vos onglets.

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.

Lire l’article complet.

Mon premier commentaire est que vous devriez lire l’article de Philips. C’est incroyable.

Sur mobile, Google Chrome peut être assez agressif pour la mise en arrière-plan (gel ou suppression) de la page afin d’économiser des ressources lorsque l’utilisateur ne l’utilise pas (par exemple, lorsque vous changez d’onglet ou que vous quittez l’application Chrome sur Android). page En tant que développeur, vous n’avez généralement aucune connaissance de ce qui se passe, de sorte que vous ne pouvez pas facilement conserver l’état ou même fermer des ressources ouvertes. Lorsque les développeurs ont le contrôle, ils peuvent faire des choix plus éclairés, ce qui signifie également que le navigateur peut être plus agressif en ce qui concerne la conservation des ressources à l’avenir sans avoir d’impact majeur sur l’expérience des utilisateurs ou des développeurs.

Enfin, le diagramme ci-dessous explique tout cela très bien.

Pete LePage écrit à propos des changements importants à ajouter à l’écran d’accueil dans Chrome

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.

Lire l’article complet.

J’avais des sentiments mitigés à ce sujet à l’origine parce que beaucoup de gens ne gèrent pas l’événement beforeinstallprompt, cela signifie que soudainement, le nombre d’installations d’APK Web diminuerait considérablement, mais je pense que c’est la bonne chose à faire.

L’objectif est de réduire le nombre d’invites gênantes sur le Web, et la dernière chose dont nous avons besoin dans l’industrie, c’est qu’une invite relativement importante apparaisse lorsque nous pensons que l’utilisateur peut vouloir installer une PWA. pensez à où et quand ** vous voulez demander une installation et que vous devez le faire en réponse à un geste de l’utilisateur.

La chose intéressante est que nous (Chrome) introduisons davantage de moyens ambiants de faire savoir à l’utilisateur qu’une expérience peut être installée, en ce moment, c’est la petite barre inférieure qui apparaît sur le premier chargement, et nous espérons pouvoir explorer à l’avenir des moyens plus subtils de faire savoir à l’utilisateur qu’il peut agir.

Un excellent aperçu de PWA 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.

Lire l’article complet.

C’est un très bon article qui montre les avantages de la création de sites de qualité, rapides et attrayants. Il est intéressant de voir que la partie «App» de PWA, en particulier l’installabilité «Ajouter à l’écran d’accueil», est utilisée par de nombreux utilisateurs. En lisant l’article plus général, il est bon de constater qu’ils se sont concentrés sur une expérience de site Web exceptionnelle, axée sur des sites de chargement rapide aux performances reproductibles et prévisibles via le fractionnement de code pour réduire la charge initiale et une bonne architecture partagée. équipe. Une fois que vous disposez de l’expérience de base, vous pouvez utiliser des fonctionnalités telles que les notifications push pour les utilisateurs qui le souhaitent.

Par défaut, Hugo ne fournit pas les fichiers .mjs avec le type de contenu correct. En fait, ce n’est que récemment que hugo pourrait servir plus d’une extension de fichier par type MIME. Il semble que la version 0.43 ait été corrigée.

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

Lire l’article complet.

Le code ci-dessus me permet de servir des fichiers mjs pour les modules ES avec le type MIME correct (les modules doivent être servis avec ‘text / javascript’). Ceci n’est nécessaire que pour les tests locaux, l’hébergement est un autre problème :)

J’ai des réflexions sur le post que j’ai fait hier à propos des modules 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.

Lire l’article complet.

L’une des choses que je voulais essayer et articuler dans l’article original, mais que j’ai décidé de retirer, c’est qu’il y a énormément de code dans l’écosystème Node qui n’est pas spécifique à Node en soi mais qui est étroitement lié à Node via Common JS et d’autres API de nœuds très spécifiques (Buffer, ancienne URL, etc.) qui nécessiteront beaucoup d’efforts pour se relever et, par conséquent, le changement sera nécessaire pour rendre les modules ES omniprésents, et ce jusqu’à ce que L’écosystème change, nous allons devoir utiliser beaucoup d’outils de conversion et de bundles pour pouvoir partager le code correctement sur plusieurs plates-formes (Web / serveur).

Nous sommes là où nous sommes, il n’y avait pas d’histoire d’importation sur le Web, nous n’avions pas un tas de primitives introduites par Node et nous en sommes maintenant à ce que beaucoup considéreraient maintenant comme des exigences de plate-forme de facto. plus une reconnaissance de la situation qu’une critique.

Il y a également un mouvement pour utiliser «.mjs» comme extension de fichier standard à la fois sur le noeud et sur le Web. Je me sens totalement à l’aise avec cela, cependant .msj n’est pas un fichier que toute infrastructure reconnaît encore comme ‘text / javascript’ et j’ai hâte que cela soit juste trié afin qu’il soit automatiquement inféré par chaque serveur web de la planète, Je n’ai pas besoin de déployer encore plus de modifications de configuration sur mon infrastructure de desserte.

Beaucoup de bons moments à venir, je suis impatient de pouvoir apporter beaucoup plus de fonctionnalités au Web.

J’ai travaillé sur un moyen de rendre plus facile la diffusion de contenu sur mon site statique et ce fut un petit exercice amusant que je partagerai davantage dans un autre article. Dans cet article, je souhaite partager la configuration rollup que j’ai utilisée pour importer presque tous les modules npm dans un projet frontend utilisant des modules JavaScript. J’avais besoin d’un moyen rapide d’importer un simple module get-urls dans mon projet.

Tracy Lee de This Dot a organisé un live-stream plutôt soigné qui a amené de nombreux fournisseurs de navigateurs à donner un aperçu de leur travail:

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

Lire l’article complet.

J’ai vraiment apprécié le flux en direct et c’était génial d’entendre ce que tout le monde est prêt à faire. J’aime aussi la vision de Beaker Browser sur un web distribué, ils ont beaucoup travaillé depuis notre dernière rencontre.

Je vous encourage à regarder la vidéo liée, Edge a eu un grand nombre de mises à jour, y compris la prise en charge complète de Service Worker, des polices variables et également l’introduction de WebP. Mozilla se concentre énormément sur l’assemblage Web et les outils de développement, Beaker fait des choses incroyables avec dat: et l’informatique distribuée et Brave a beaucoup évolué sur BAT.

Je me suis concentré sur le travail de notre équipe en ce moment et il s’agit essentiellement de la découverte, de la rapidité et de la fiabilité, de la réactivité de l’interface utilisateur, de l’expérience utilisateur, de la sécurité et de la confidentialité. Un peu plus concrètement:

• Découverte - nous devons vraiment faciliter la tâche des développeurs pour créer des sites avec JS qui rendent des services sans tête tels que les indexeurs et les intégrateurs. Cela signifie que nous devons nous concentrer sur la formation des développeurs sur la manière dont les indexeurs fonctionnent et sur la manière de les tester, ainsi que sur la manière de créer de bonnes expériences SSR solides. * Vitesse et fiabilité - Tous les sites doivent avoir un TTI <5 ​​sur le réseau 3g sur le périphérique Median (un MotoG ⁴⁄₅) et vous devez optimiser votre FID (premier délai d’entrée). Le FID est une nouvelle mesure, il est donc important de comprendre qu’il est censé représenter la façon dont vos utilisateurs expérimentent votre site dans la nature, où le TTI a été difficile à mesurer, le FID devrait être plus facile. Il y a un polyfill ici que vous pouvez utiliser pour tester le FID nous travaillons sur la création de & # x2018; FLIP & # x2019; plus facile à comprendre, en construisant Houdini afin de donner aux développeurs beaucoup plus de contrôle sur le rendu et en essayant de déplacer autant de travail que possible via des éléments comme img.decode et des outils comme comlink plus facile à utiliser. * UX - Faites bouger les choses - Nous voulons vraiment changer la façon dont nous parlons des nouvelles fonctionnalités qui arrivent sur la plateforme, en particulier nous aimerions montrer où la technologie doit être utilisée efficacement pour améliorer les expériences des utilisateurs pour les aider à accomplir leur travail rapidement avec le moins d’interruption possible. * Sécurité et confidentialité - Je pense que la prévention Intelligent Tracking d’Apple aura un impact à long terme sur le Web et que les développeurs doivent commencer à réfléchir davantage à la création de solutions de confidentialité prenant en charge les expériences Web. Si quelque chose GDPR fait du Web une expérience «intéressante» dans l’UE.

Enfin, ce fut humiliant et réconfortant d’entendre que tout le monde veut ramener Web Intents :)

Sam Thorogood de notre équipe écrit:

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.

Lire l’article complet.

J’ai été émerveillé par cette bibliothèque et je suis ravi de voir que cela attire un peu plus l’attention. C’était la première fois que je voyais l’écran Splash sur iOS au cours des 5 dernières années et il les générait d’une manière vraiment soignée - il génère l’image à la volée en fonction de la taille d’écran exacte de l’appareil et base64 encode l’image … il comble également le reste des lacunes de l’histoire de Safari Add To Homescreen.

Si vous construisez une PWA, je l’inclurais.

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.

Lire l’article complet.

C’est une excellente introduction aux polices variables et c’est un excellent terrain de jeu pour voir rapidement tout ce que vous pouvez changer en action. L’ajout de plusieurs lignes de texte semble bientôt se produire.

Note: Je pense que cela ne fonctionne pas encore dans Firefox car ils ne supportent pas complètement les polices variables.

Patrick écrit à propos de 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.

Lire l’article complet.

Ce n’est pas à un million de kilomètres de ce que nous faisons en interne, où nous avons un concept de «fragments». C’est à vous de voir comment vous le gérez, mais c’est un excellent moyen de garder une trace de ce que vous avez fait, mais également partagé dans votre équipe, vous obtenez une belle image de ce que font également vos pairs

Le modèle que j’aime est de diviser chaque résumé hebdomadaire en un «ce que j’ai fait» et «ce que j’ai l’intention de faire cette semaine». Cela m’aide à réfléchir et à planifier en même temps.

Atishay Jain sur CSS Tricks écrit sur un domaine qui me tient à cœur, en reliant:

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.

Lire l’article complet.

C’était un excellent article qui couvre tous les différents types de liens hypertexte disponibles pour les applications et les sites. J’ai fait beaucoup de recherches sur cet espace depuis Web Intents et l’état des liens avancés sur le Web laisse beaucoup à désirer, imo.

L’une des raisons pour lesquelles j’aime le Web est que derrière un lien, il y a un accès direct à la ressource, je ne connais aucune autre plateforme capable de combiner le lien et la ressource réelle de la même façon, mais cela pourrait être tellement plus. Le lien standard fournit essentiellement une intention VIEW qui contient l’état (l’url) et le contexte (texte entre les ancres), et vous pouvez pirater les protocoles personnalisés, mais nous devons aller beaucoup plus loin.

• Nous avons besoin d’étendre le vocabulaire à «registerProtocolHandler» pour avoir accès à davantage de schémas natifs. * Tout ce qui est enregistré avec le gestionnaire de protocole doit être étendu au système. * Nous devons pouvoir disposer de sites Web capables de gérer l’ouverture d’une gamme de types de contenu et d’avoir des pages disponibles pour être enregistrées en tant que gestionnaire de fichiers système. * Les développeurs doivent avoir accès à des actions d’ordre supérieur, VIEW est génial, nous avons besoin d’un ensemble d’actions clés convenu, telles que PICK, SAVE, EDIT, afin de mieux comprendre les capacités d’un site ou d’une application. eux avec une sémantique d’ordre supérieur. Android a ceci, Siri l’obtient, les deux utilisant “Intents”, le Web devrait aussi l’avoir.

C’est l’une des raisons pour lesquelles je suis très enthousiasmé par les abstractions de messagerie telles que Comlink qui éliminent le fardeau de la folie postMessage et vous permettent d’exposer la fonction à d’autres éléments. applications, et puis une fois que vous exposez la fonction, vous devez plus facilement permettre la découverte de cette fonction … et c’est ce que les liens permettent.

Dan de Redfin a un excellent article sur la priorité de la vitesse du Web:

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

Lire l’article complet.

Ce n’est pas seulement nous (Google) qui peut le faire. Je regarde notre équipe (Web et Chrome DevRel) être en mesure de fournir les outils et les conseils pour vous aider à démarrer rapidement et à rester rapide, mais ensuite le secteur doit reconnaître que la performance est une fonctionnalité et non une réflexion après coup.

J’ai écrit dans défis pour les développeurs Web qu’il y a encore de nombreuses raisons pour lesquelles les développeurs ne hiérarchisent pas les performances (outils, conseils et incitations commerciales claires). ), Je ne pense pas que Google affirmant comme écrit dans l’article de Dan est la réponse à la santé à long terme du Web, il doit venir des entreprises en voyant mieux convertir les performances.

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.

Lire l’article complet.

Je n’ai pas grand chose à ajouter, c’est absolument incroyable. Vérifiez-le.

Dean Hume a fait du très bon travail avec PWA récemment, et il a également exploré beaucoup des nouvelles API de la plate-forme, en l’occurrence l’API Generic Sensor:

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.).

Lire l’article complet.

J’ai parlé de l’API Generic Sensor à Chrome Dev Summit 2016, donc il a certainement fallu un certain temps pour qu’il arrive dans Chrome (je pense qu’il est toujours derrière un drapeau) et il semble qu’il ait atterri dans Edge en premier. Le capteur de lumière ambiante est l’une des nombreuses API construites sur des capteurs génériques. il y en a d’autres comme le gyroscope et les magnétomètres & mdash; et il vous permet d’obtenir des informations sur les niveaux de lumière ambiante autour de l’utilisateur, en ouvrant des cas d’utilisation tels que le réglage automatique de la luminosité ou même en proposant à l’utilisateur de passer à un thème en mode sombre. Il sera certainement intéressant de voir ce que l’API générique du capteur générique apportera aux expériences Web.

Jonathan Fulton, Videoblocks:

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

Lire l’article complet.

Ceci est un article étonnant qui donne un très bon aperçu d’une pile relativement standard conçue pour faire évoluer de nombreuses applications Web. Cela montre également pourquoi de nombreux développeurs apprécient également les outils Platform as a Service tels que Heroku, Firebase ou AppEngine, qui peuvent réduire la complexité au détriment des coûts.

Eric Bidelman sur les mises à jour Web du développeur Google écrit:

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.

Lire l’article complet.

Je suis intéressé de voir comment cela se pose. Je crains que les développeurs ne se soucient pas de cela, ou qu’ils subissent des pressions. Comme je l’ai dit sur Twitter, je m’inquiète des incitations et nous devons combiner le fait que cette fonctionnalité permettra aux développeurs de contrôler un grand nombre des fonctionnalités disponibles soit prendre de la mémoire, ralentir la page ou laisser par inadvertance la confidentialité des utilisateurs à des tiers, avec des choses que les développeurs peuvent vendre à leur entreprise. Un exemple pourrait être que ** si ** le Play Store devait lister des PWA alors il pourrait y avoir un ensemble de politiques automatiquement appliqué au lancement de l’application, et vous, en tant que développeur, seriez d’accord pour être dans le magasin.

Je suis ravi de voir ce qui se passe avec cette API, et je souhaite le voir adopté, même si les développeurs n’en ont besoin que pour s’assurer que leurs équipes ne régressent pas.