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

Ruth John wechselte vorübergehend zu Chrome OS:

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

Ganzen Beitrag lesen.

Ruth hat einen tollen Artikel darüber geschrieben, dass sie auf Chrome OS umgestiegen ist, weil ihre Hauptmaschine kaputt gegangen ist.

Ich habe vor 4 Monaten (vor Google I / O) Vollzeit zu Chrome OS gewechselt und bin nur auf den Mac gewechselt, weil ich mein PixelBook (jetzt behoben) gebrochen habe.

Für mich ist es eine der besten Webentwicklungsmaschinen, die es heute gibt. Es ist das einzige Gerät, das ich “True Mobile” testen kann - Sie können Chrome auf Mobile, Firefox Mobile, Samsung Browser, Brave usw. über die ARC-Plattform installieren. Crostini ist auch ein großer Fortschritt für Chrome OS, da es eine Menge des Linux-App-Ökosystems zu Chrome OS bringt und es wirklich eine riesige App-Lücke für mich auf Chrome OS füllt; Ich habe Firefox, vim, git, VS-Code, Node, npm, all meine Build-Tools, GIMP und Inkscape … Das heißt nicht, dass es perfekt war, Crostini könnte schneller sein, es ist noch nicht GPU-beschleunigt und es könnte mehr in den Filemanager usw. integriert sein, und schließlich benötigt das PixelBook wirklich mehr physische Ports - ich kann zwei 4k-Bildschirme daran anschließen, aber ich kann nicht gleichzeitig aufladen.

Ich denke, Ruths Abschluss ist auch ziemlich genau, das PixelBook ist eine teure Maschine, aber ich bin sehr sehr gespannt darauf, dass dies zu immer mehr Geräten kommt (besonders zu solchen mit wesentlich niedrigeren Preisen).

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.

Jep.

PWA. Progressive Web Apps. Frances Berriman und Alex Russell prägten den Begriff “progressive Web Apps” im Jahr 2015 mit einem meiner Meinung nach bahnbrechenden Beitrag “Progressive Web Apps: Entkommene Tabs ohne unsere Seele zu verlieren”. 3 Jahre später haben wir einen langen Weg zurückgelegt. Aus einer losen Sammlung von Technologien - Service Worker, Manifest, Add to Homescreen, Web Push -, die ursprünglich nur in einer Browser-Engine implementiert wurden, bis hin zu einer Marke, die branchenübergreifend mit Unternehmen und Entwicklern und allen großen Unternehmen zusammenhängt Browser-Anbieter, die den Großteil des “PWA” Stacks implementieren.

Mustafa schreibt:

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.

Ganzen Beitrag lesen.

Ich fand das ein sehr interessanter Post, der auch eine Ergänzung zu einem Post ist, den ich über die [Herausforderungen für Webentwickler] geschrieben habe (0). Es ist nicht verwunderlich, dass Browser-Kompatibilität ein Problem ist, aber was immer noch ein Problem ist, ist, dass das Bauen für IE11 immer noch etwas ist, das die Industrie zurückhält. Gleichermaßen weist Mustafa darauf hin, dass es immer noch ein Problem mit den Tools rund um Responsive Design gibt und die Betonung auf einer einzigen responsiven Lösung führt immer zu folgendem (das ist in Mustafas Post):

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

Das ist ein Problem, mit dem wir alle noch zu kämpfen haben. Auf der einen Seite möchten wir, dass jeder eine reaktionsfähige Lösung entwickelt, die jedem auf jedem Geräte-Formfaktor zur Verfügung steht, andererseits ist der Benutzerkontext wichtig und der Benutzer ist oft nur bereit bestimmte Aktionen zu bestimmten Zeiten auszuführen; Das sehen wir in der Handels- und Handelsbranche: Menschen werden auf Mobilgeräten surfen und auf dem Desktop arbeiten, und dann stellt sich die Frage, ob Sie für dieses multimodale Modell mehr sorgen oder ein konsistentes Erlebnis auf allen Geräten schaffen … I Ich vermute, die Antwort lautet: “Es kommt darauf an”, aber so oder so, es ist ein hartes Problem für alle, von den Produktteams bis zu den Entwicklungsteams.

Philip Walton hat einen tiefen Einblick in eine neue API, an der das Chrome-Team gearbeitet hat, um Ihnen (dem Entwickler) die Kontrolle darüber zu geben, wie Sie reagieren müssen, wenn der Browser Ihre Tabs auslädt.

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.

Vollständigen Beitrag lesen.

Mein erster Kommentar ist, dass Sie Philips Post lesen sollten. Es ist unglaublich.

Auf Mobilgeräten kann Chrome beim Hintergrund (Einfrieren oder Verwerfen) der Seite ziemlich aggressiv sein, um Ressourcen zu schonen, wenn der Benutzer sie nicht verwendet (z. B. wenn Sie Tabs austauschen oder aus der Chrome-App auf Android wechseln), wenn der Browser Hintergrund hat Seite als Entwickler Sie haben traditionell keine Kenntnis davon, wenn dies passiert, so dass Sie nicht einfach Zustand beibehalten oder sogar offene Ressourcen schließen können und genauso wichtig, wenn Sie App sind, wieder den Zustand sauber zu hydratisieren. Wenn Entwickler die Kontrolle haben, können sie fundiertere Entscheidungen treffen, was auch bedeutet, dass der Browser aggressiver Ressourcen schonen kann, ohne die Benutzer- oder Entwicklererfahrung ernsthaft zu beeinträchtigen.

Schließlich erklärt das folgende Diagramm alles sehr gut.

Pete LePage schreibt über wichtige Änderungen an Add to Homescreen in 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.

Vollständigen Beitrag lesen.

Ich hatte ursprünglich gemischte Gefühle, weil so viele Leute nicht mit dem `beofinstallprompt’-Ereignis umgehen, was bedeutete, dass plötzlich die Anzahl der Installationen von Web-APKs erheblich sinken würde, aber ich denke, es ist tatsächlich das Richtige.

Das Ziel ist es, die Anzahl der lästigen Aufforderungen im Web zu reduzieren, und das letzte, was wir in der Branche brauchen, ist eine relativ große Eingabeaufforderung, wenn wir denken, dass der Benutzer vielleicht eine PWA installieren möchte Denken Sie darüber nach, wo und wann ** Sie ** eine Installation anfordern möchten und Sie dies als Reaktion auf eine Benutzergeste tun müssen.

Das Schöne daran ist, dass wir (Chrome) mehr Ambient-Möglichkeiten einführen, um den Benutzer wissen zu lassen, dass eine Erfahrung installiert werden kann. Jetzt ist es die kleine untere Leiste, die beim ersten Laden erscheint und hoffentlich in der Zukunft erkundet werden kann subtilere Möglichkeiten, den Benutzer wissen zu lassen, dass er Maßnahmen ergreifen kann.

Ein großartiger Überblick über Pinterests PWA

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.

Vollständigen Beitrag lesen.

Dies ist ein wirklich toller Beitrag, der die Vorteile des Aufbaus qualitativ hochwertiger, schneller und ansprechender Websites zeigt. Es ist großartig zu sehen, dass der ‘App’-Teil von PWA, insbesondere die’ Zur Startseite hinzufügen ‘, von vielen Benutzern verwendet wird. Beim Lesen des breiteren Posts ist es gut zu sehen, dass sie sich auf eine großartige Website-Erfahrung konzentrierten, die sich auf schnell ladende Sites konzentriert, die wiederholbare und vorhersagbare Leistung über Code-Splitting haben, um die anfängliche Belastung und auch gute Architektur zu reduzieren Mannschaft. Sobald Sie die Basiserfahrung haben, können Sie Funktionen wie Push-Benachrichtigungen für die Benutzer, die sie haben möchten, aufschichten.

Standardmäßig liefert Hugo keine .mjs-Dateien mit dem richtigen Inhaltstyp. In der Tat war es bis vor kurzem, dass hugo mehr als eine Dateierweiterung pro Mimetyp anbieten konnte. Es sieht aus wie mit v0.43 das wurde behoben.

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

Vollständigen Beitrag lesen.

Der obige Code ermöglicht es mir, mjs-Dateien für ES-Module mit dem richtigen Mime-Typ zu liefern (Hinweismodule müssen mit ‘text / javascript’ geliefert werden). Dies ist nur für lokale Tests erforderlich, Hosting ist ein anderes Problem :)

Ich habe Gedanken über die Post, die ich gestern über ES-Module geschrieben habe

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.

Ganzen Beitrag lesen.

Eines der Dinge, die ich im Originalartikel versuchen und artikulieren wollte, aber ich entschied mich herauszuziehen, dass es im Knoten-Ökosystem eine riesige Menge an Code gibt, der nicht wirklich spezifisch für Node ist, aber eng mit ihm verbunden ist Knoten über Common JS und andere sehr spezifische Knoten-APIs (Puffer, alte URL usw.), dass es sehr mühsam sein wird, sich hochzuziehen und somit die Änderung erforderlich wird, um ES-Module allgegenwärtig zu machen, wird potentiell ziemlich schmerzhaft sein und bis Angesichts der Änderungen im Ökosystem müssen wir viele Conversion-Tools und Bundler einsetzen, um Code auf mehreren Plattformen (Web / Server) sauber zu teilen.

Wir sind dort, wo wir sind, es gab keine importierende Geschichte im Web, wir hatten keinen Haufen der Primitiven, die Node eingeführt hat, und sind jetzt, was viele jetzt für De-facto-Plattform-Anforderungen halten würden, also hoffe ich, dass dies so ist eher eine Anerkennung der Situation als eine Kritik.

Es gibt auch einen Schritt zur Verwendung von ‘.mjs’ als Dateierweiterung, die sowohl für den Knoten als auch für das Web Standard ist. Ich fühle mich jedoch vollkommen wohl dabei. MSJ ist keine Datei, die irgendeine Infrastruktur als “Text / Javascript” erkennt und ich freue mich darauf, dass sie so sortiert wird, dass sie automatisch von jedem Webserver auf dem Planeten erkannt wird Ich muss nicht noch mehr Konfigurationsänderungen an meiner Server-Infrastruktur vornehmen.

Viele lustige Zeiten voraus, ich für meinen Teil freue mich darauf, viel mehr Funktionalität ins Web bringen zu können.

Ich habe an einem Weg gearbeitet, um es einfacher zu machen, Inhalte in meine statische Seite zu pushen, und es war eine lustige kleine Übung, die ich in einem anderen Beitrag mehr teilen werde. In diesem Post möchte ich die ‘Rollup’-Konfiguration teilen, die ich verwendet habe, um fast jedes npm-Modul in ein Frontend-Projekt mit JavaScript-Modulen zu importieren. Ich brauchte einen schnellen Weg, um ein einfaches Modul get-urls in mein Projekt zu importieren.

Tracy Lee von This Dot hat einen ordentlichen Livestream organisiert, der viele der Browser-Anbieter dazu brachte, einen Überblick darüber zu geben, woran sie arbeiten:

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

Vollständigen Beitrag lesen.

Ich habe den Livestream sehr genossen und es war toll zu hören, was alle vorhaben. Ich liebe auch die Vision, die Beaker Browser für ein verteiltes Web hat, sie haben seit der letzten Begegnung viel gearbeitet.

Ich empfehle Ihnen, das verlinkte Video anzuschauen, Edge hat eine große Menge an Updates einschließlich voller Service Worker-Unterstützung, variabler Schriftarten und auch WebP eingeführt. Mozilla hat einen großen Fokus auf Web Assembly und Entwickler-Tools, Beaker macht erstaunliche Dinge mit dat: und verteiltes Rechnen und Brave hat sich sehr auf BAT bewegt.

Ich konzentrierte mich auf die Arbeit, die unser Team gerade leistet, und es geht im Wesentlichen um Discovery, Geschwindigkeit und Zuverlässigkeit, UI-Reaktionsfähigkeit, UX - Get thus done, Sicherheit und Datenschutz. Etwas konkreter:

• Discovery - Wir müssen Entwicklern die Erstellung von Sites mit JS erleichtern, die in Headless-Services wie Indexern und Embedders gerendert werden. Das bedeutet, dass wir uns darauf konzentrieren müssen, Entwickler darüber aufzuklären, wie Indexer arbeiten und wie sie gegen sie getestet werden und wie gute SSR-Erfahrungen aufgebaut werden können. * Geschwindigkeit und Zuverlässigkeit - Alle Seiten sollten ein TTI <5s im 3g Netzwerk auf dem Median Gerät haben (MotoG ⁴⁄₅) und du solltest deine FID (erste Eingangsverzögerung) optimieren. FID ist eine neue Metrik. Daher ist es wichtig zu verstehen, dass es bedeutet, wie Ihre Benutzer Ihre Website in freier Wildbahn erleben, wo TTI schwer zu messen war. FID sollte einfacher sein. Es gibt eine Polyfill hier, die Sie verwenden können, um FID zu testen * UI Responsiveness - Wir möchten das Web überall 60fps sein und es für Entwickler einfacher zu erreichen, so Wir arbeiten daran, & # x2018; FLIP & # x2019; einfacher zu verstehen, Houdini zu entwickeln, so dass wir Entwicklern mehr Kontrolle über das Rendering-Enging geben und schließlich versuchen können, so viel Arbeit wie möglich von “Off-main-thread” über Dinge wie img.decode und Tools wie comlink zur Arbeit zu bringen einfacher zu benutzen. * UX - Erledigen Sie Ihre Aufgaben - Wir möchten die Art und Weise, wie wir über neue Funktionen auf der Plattform sprechen, wirklich ändern. Insbesondere möchten wir zeigen, wo Technologie effektiv genutzt werden sollte, um die Benutzererfahrungen zu verbessern, damit sie ihre Arbeit schnell erledigen können mit so wenig Unterbrechung wie möglich. * Sicherheit und Datenschutz - Ich denke, dass die intelligente Tracking-Vorbeugung von Apple langfristige Auswirkungen auf das Web haben wird und Entwickler mehr über die Entwicklung datenschutzfreundlicher Web-Erlebnisse nachdenken sollten. Wenn überhaupt, macht die DSGVO das Internet zu einer “interessanten” Erfahrung in der EU.

Schließlich war es demütigend und herzerwärmend zu hören, dass jeder Web Intents zurückbringen möchte :)

Sam Thorogood von unserem Team schreibt:

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.

Vollständigen Beitrag lesen.

Ich war erstaunt über diese Bibliothek, und ich bin froh, dass sie ein bisschen mehr Aufmerksamkeit bekommt. Es war das erste Mal, dass ich den Splash Screen auf iOS-Geräten in den letzten 5 Jahren gesehen habe, und er erzeugt sie auf eine sehr nette Art und Weise - er generiert das Bild auf der Basis der exakten Bildschirmgröße des Geräts und base64 kodiert das Bild … füllt es auch den Rest der Lücken in der Geschichte von Safari Add To Homescreen aus.

Wenn Sie ein PWA bauen, würde ich es einschließen.

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.

Ganzen Beitrag lesen.

Dies ist eine großartige Einführung in variable Schriftarten und es ist ein großartiger Spielplatz, um schnell alles zu sehen, was Sie in Aktion ändern können. Das Hinzufügen mehrerer Textzeilen sieht so aus, als würde es bald landen.

Hinweis: Ich glaube, dass dies in Firefox noch nicht funktioniert, da sie Variablen-Fonts nicht vollständig unterstützen.

Patrick schreibt über 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.

Ganzen Beitrag lesen.

Dies ist keine Million Meilen entfernt von dem, was wir intern tun, wo wir ein Konzept von “Schnipsel” haben. Es liegt an Ihnen, wie Sie es verwalten, aber es ist eine großartige Möglichkeit, den Überblick zu behalten, was Sie getan haben. Aber auch innerhalb Ihres Teams erhalten Sie ein schönes Bild davon, was Ihre Kollegen, Manager und Berichte ebenfalls tun.

Das Modell, das ich mag, ist, jede wöchentliche Zusammenfassung in ein “Was ich getan habe” und “Was beabsichtige ich diese Woche” zu teilen. Es hilft mir, gleichzeitig zu reflektieren und zu planen.

Atishay Jain über CSS Tricks schreibt über ein Gebiet, das mir am Herzen liegt:

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.

Ganzen Beitrag lesen.

Dies war ein großartiger Artikel, der alle Arten von Hyperlinks behandelt, die für Apps und Websites verfügbar sind. Seit Web Intents habe ich viel über diesen Raum geforscht und der Zustand fortgeschrittener Verlinkungen im Web lässt viel zu wünschen übrig, imo.

Einer der Gründe, warum ich das Web liebe, ist, dass hinter einem Link der direkte Zugriff auf die Ressource steht, ich kenne keine andere Plattform, die den Link und die tatsächliche Ressource auf die gleiche Weise kombinieren kann, aber es könnte soooo viel sein Mehr. Der Standard-Link bietet im Wesentlichen eine VIEW-Absicht, die den Status (die URL) und den Kontext (Text zwischen den Ankern) enthält, und Sie können damit benutzerdefinierte Protokolle hacken, aber wir müssen noch viel weiter gehen.

• Wir müssen das Vokabular zu registerProtocolHandler erweitern, um mehr Zugriff auf mehr native Schemata zu erhalten * Alles, was mit dem Protokoll-Handler registriert wird, muss systemweit sein. * Wir müssen in der Lage sein, Websites zu haben, die in der Lage sein müssen, eine Reihe von Inhaltstypen zu öffnen und Seiten zur Verfügung zu haben, die als Systemdatei-Handler registriert werden können. * Wir müssen den Entwicklern Aktionen höherer Ordnung zur Verfügung stellen, VIEW ist großartig, wir brauchen eine abgestimmte Menge von Kernaktionen wie PICK, SAVE, EDIT, damit wir die Fähigkeiten einer Site oder App besser verstehen und erweitern können sie mit höherer Semantik. Android hat das, Siri bekommt es, beide verwenden ‘Intents’, das Web sollte es auch haben.

Dies ist einer der Gründe, warum ich so begeistert von Messaging-Abstraktionen wie Comlink bin, die die Last des PostMessage-Wahnsinns beseitigen und Sie darüber nachdenken lassen, andere zu exponieren Apps, und sobald Sie die Funktion verfügbar machen, müssen Sie die Erkennung dieser Funktion leichter aktivieren … und das ist, was Verbindungen ermöglichen.

Dan von Redfin hat einen tollen Beitrag über die Priorität der Webgeschwindigkeit:

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

Ganzen Beitrag lesen.

Das können nicht nur wir (Google). Ich sehe unser Team (Web und Chrome DevRel) in der Lage, die Tools und Anleitungen zu liefern, die Ihnen helfen, schnell zu starten und dann schnell zu bleiben, aber danach muss die Industrie erkennen, dass Leistung ein Feature ist und kein Nachdenken.

Ich schrieb in Herausforderungen für Webentwickler, dass es immer noch viele Gründe dafür gibt, dass Entwickler die Leistung nicht priorisieren (Tools, Anleitungen und klare Geschäftsanreize) ), Glaube ich nicht, dass Google behauptet, wie in Dans Beitrag geschrieben ist die Antwort für die langfristige Gesundheit des Internets, muss es von Unternehmen kommen, die Leistung besser zu konvertieren.

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.

Ganzen Beitrag lesen.

Ich habe nicht viel hinzuzufügen, es ist absolut erstaunlich. Hör zu.

Dean Hume hat kürzlich sehr gute Arbeit mit PWA geleistet, und er hat auch viele der neuen Plattform-APIs untersucht, in diesem Fall die Generic Sensor API:

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

Ganzen Beitrag lesen.

Ich habe auf dem Chrome Dev Summit 2016 von der generischen Sensor-API gesprochen, es dauert also eine Weile, bis sie in Chrome landet (ich glaube, dass sie immer noch hinter einer Flagge steht) und es sieht so aus, als wäre sie zuerst in Edge gelandet. Der Umgebungslichtsensor ist eine von vielen APIs, die auf generischen Sensoren & mdash; es gibt mehr wie Kreisel und Magnetometer & mdash; und es ermöglicht Ihnen, Informationen über die Umgebungshelligkeit um den Benutzer herum zu erhalten, die Anwendungsfälle wie die automatische Anpassung der Helligkeit oder sogar den Benutzer zu einem dunklen Modus wechseln. Es wird sicherlich interessant sein, zu sehen, was die Basis-Generic-Sensor-API für das Web-Erlebnis bringt.

Jonathan Fulton, Videoblocks:

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

Vollständigen Beitrag lesen.

Dies ist ein erstaunlicher Artikel, der einen wirklich großartigen Überblick über einen relativ standardmäßigen Stapel gibt, der für die Skalierung vieler Web-Apps entworfen wurde. Es zeigt auch, warum viele Entwickler auch Platform as a Service-Tools wie Heroku, Firebase oder AppEngine mögen, die einen Großteil der Komplexität auf Kosten der Kosten abstrahieren können.

Eric Bidelman auf Google Web des Entwicklers aktualisiert, schreibt:

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.

Vollständigen Beitrag lesen.

Ich bin interessiert zu sehen, wie das landet. Ich mache mir Sorgen, dass die Entwickler sich nicht darum kümmern oder dass sie unter Druck gesetzt werden. Wie ich schon sagte auf Twitter, mache ich mir Sorgen über die Anreize und wir müssen die Tatsache kombinieren, dass diese Funktion es Entwicklern ermöglicht, eine große Anzahl der verfügbaren Funktionen zu kontrollieren entweder Speicherplatz beanspruchen, die Seite verlangsamen oder versehentlich Benutzerdaten an Dritte einbetten, mit Dingen, die Entwickler an ihr Geschäft verkaufen können. Ein Beispiel könnte sein, dass ** wenn ** der Play Store jemals PWAs auflisten würde, dann könnten sie mit einer Reihe von Richtlinien kommen, die beim Start der App automatisch angewendet werden, und Sie als Entwickler würden dem zustimmen, um darin zu sein das Geschäft.

Ich bin gespannt, was mit dieser API passiert, und ich bin sehr daran interessiert, dass sie angenommen wird, auch wenn sie nur von Entwicklern verwendet wird, um sicherzustellen, dass ihre Teams sich nicht zurückbilden.