Hello.

I am Paul Kinlan.

A Developer Advocate for Chrome and the Open Web at Google.

Getting Lighthouse scores from HTTPArchive for sites in India.

Paul Kinlan

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

Read More

Paul Kinlan

Trying to make the web and developers better.

RSS Github Medium

'Moving to a Chromebook' by Rumyra's Blog

Paul Kinlan

Ruth John đã chuyển sang Chrome OS (tạm thời):

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

Đọc toàn bộ bài đăng.

Ruth có một bản ghi tuyệt vời để chuyển sang Chrome OS vì máy chính của cô đã bị hỏng.

Tôi đã chuyển sang Chrome OS toàn thời gian cách đây 4 tháng (trước Google I / O) và chỉ chuyển sang Mac vì tôi đã phá vỡ PixelBook của mình (hiện đã được sửa).

Đối với tôi, đây là một trong những máy phát triển web tốt nhất hiện nay. Đó là thiết bị duy nhất mà tôi có thể thử nghiệm ‘thiết bị di động thực sự’ - bạn có thể cài đặt Chrome trên thiết bị di động, Firefox Mobile, Samsung Browser, Brave, v.v. qua nền tảng ARC. Crostini cũng là một thay đổi trò chơi cho Chrome OS vì nó mang lại rất nhiều hệ sinh thái ứng dụng Linux cho Chrome OS và nó thực sự bắt đầu lấp đầy một khoảng trống lớn cho tôi trên Chrome OS; Tôi đã có Firefox, vim, git, VS Code, Node, npm, tất cả các công cụ xây dựng của tôi, GIMP và Inkscape … Điều đó không có nghĩa là nó hoàn hảo, Crostini có thể nhanh hơn, không phải GPU tăng tốc và nó có thể được tích hợp nhiều hơn với Filemanager vv, và cuối cùng PixelBook thực sự cần nhiều cổng vật lý hơn - tôi có thể đính kèm hai màn hình 4k vào nó, nhưng tôi không thể sạc cùng một lúc.

Tôi nghĩ rằng sự quấn của Ruth cũng khá chính xác, PixelBook là một chiếc máy đắt tiền, nhưng tôi rất vui mừng khi thấy điều này đến với nhiều thiết bị hơn (đặc biệt là ở những điểm giá thấp hơn nhiều).

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.

Yup.

PWA: Progressive Web All-the-things

Paul Kinlan

PWA. Ứng dụng web nâng cao. Frances Berriman và Alex Russell đặt ra thuật ngữ “ứng dụng web tiến bộ” vào năm 2015 với những gì tôi nghĩ là một bài đăng chủ đề “Progressive Web Apps: Escaping Tabs mà không làm mất linh hồn của chúng tôi”. 3 năm sau, chúng tôi đã đi một chặng đường dài. Từ một bộ sưu tập công nghệ lỏng lẻo - Service Worker, Manifest, Add to Homescreen, Web Push - ban đầu chỉ được triển khai trong một trình duyệt, đến một thương hiệu đã bắt đầu gắn bó với ngành công nghiệp và các nhà phát triển, và tất cả các nhà cung cấp trình duyệt thực hiện phần lớn ngăn xếp ‘PWA’.

Read More

What are the pain points for web designers? - Mustafa Kurtuldu

Paul Kinlan

Mustafa viết:

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.

Đọc toàn bộ bài đăng.

Tôi thấy đây là một bài rất thú vị cũng là một bổ sung cho một bài viết tôi đã viết về thách thức đối với các nhà phát triển web. Không có gì đáng ngạc nhiên khi trình duyệt compat là một vấn đề, nhưng những gì vẫn còn là một mối quan tâm là xây dựng cho IE11 vẫn là một cái gì đó mà đang nắm giữ ngành công nghiệp trở lại. Tương tự như vậy, Mustafa chỉ ra rằng vẫn còn một vấn đề với các công cụ xung quanh thiết kế Responsive và nhấn mạnh vào một giải pháp đáp ứng duy nhất luôn dẫn đến những điều sau đây (đó là trong bài Mustafa):

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

Đây là một vấn đề mà tôi nghĩ rằng tất cả chúng ta vẫn vật lộn với. Một mặt, chúng tôi muốn mọi người xây dựng một giải pháp đáp ứng có thể phục vụ mọi người trên mọi yếu tố hình thức thiết bị, ngữ cảnh người dùng khác là quan trọng và thường người dùng sẽ chỉ sẵn sàng thực hiện một số hành động nhất định tại một số thời điểm nhất định; chúng ta thấy điều này rất nhiều trong ngành bán lẻ và thương mại: mọi người sẽ duyệt trên thiết bị di động và hoàn thành trên máy tính để bàn và câu hỏi sau đó trở thành bạn phục vụ cho mô hình đa phương thức này nhiều hơn hoặc xây dựng trải nghiệm nhất quán trên tất cả các thiết bị … nghi ngờ câu trả lời là ‘nó phụ thuộc’, nhưng dù bằng cách nào thì đó cũng là một vấn đề khó khăn đối với mọi người từ các nhóm sản phẩm đến các đội kỹ thuật.

Page Lifecycle API - Philip Walton

Paul Kinlan

Philip Walton có một cái nhìn sâu sắc tuyệt vời vào một API mới mà nhóm Chrome đã làm việc để cung cấp cho bạn (nhà phát triển) kiểm soát cách phản hồi khi trình duyệt tải các tab của bạn xuống.

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.

Đọc toàn bộ bài đăng.

Nhận xét đầu tiên của tôi là bạn nên đọc bài đăng của Philips. Không thể tin được.

Trên thiết bị di động, Chrome có thể khá tích cực khi chạy nền (đóng băng hoặc hủy) trang để tiết kiệm tài nguyên khi người dùng không sử dụng (ví dụ: khi bạn trao đổi tab hoặc di chuyển từ ứng dụng Chrome trên Android), khi trình duyệt khởi động trang như một nhà phát triển bạn theo truyền thống không có kiến ​​thức về thời điểm điều này xảy ra, do đó bạn không thể dễ dàng duy trì trạng thái hoặc thậm chí đóng tài nguyên mở và cũng quan trọng khi ứng dụng của bạn trở lại trạng thái sạch sẽ. Khi nhà phát triển có quyền kiểm soát họ có thể đưa ra nhiều lựa chọn sáng suốt hơn, điều này cũng có nghĩa là trình duyệt có thể tích cực hơn trong việc bảo tồn tài nguyên trong tương lai mà không ảnh hưởng nghiêm trọng đến trải nghiệm người dùng hoặc nhà phát triển.

Cuối cùng, sơ đồ dưới đây giải thích tất cả đều khá tốt.

API vòng đời trang

Add to homescreen changes in Chrome 68 - Pete LePage

Paul Kinlan

Pete LePage viết về những thay đổi quan trọng đối với Thêm vào màn hình chính trong 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.

Đọc toàn bộ bài đăng.

Tôi có cảm giác lẫn lộn về điều này ban đầu bởi vì rất nhiều người không xử lý sự kiện ‘beforeinstallprompt`, điều đó có nghĩa là số lượt cài đặt APK trên web sẽ giảm đáng kể, nhưng tôi nghĩ đó thực sự là điều đúng đắn.

Mục tiêu là giảm số lượng lời nhắc gây phiền nhiễu xảy ra trên web và điều cuối cùng chúng tôi cần trong ngành là một dấu nhắc tương đối lớn xuất hiện khi chúng tôi nghĩ rằng người dùng có thể muốn cài đặt PWA, thay vào đó bạn cần suy nghĩ về nơi và khi nào ** bạn ** muốn nhắc cài đặt và bạn phải thực hiện nó để đáp lại cử chỉ của người dùng.

Điều gọn gàng là chúng tôi (Chrome) đang giới thiệu nhiều cách khác để cho người dùng biết rằng trải nghiệm có thể được cài đặt, ngay bây giờ đó là thanh đáy nhỏ xuất hiện trong lần tải đầu tiên và hy vọng trong tương lai chúng tôi có thể khám phá những cách tinh tế hơn để cho người dùng biết rằng họ có thể hành động.

A one year PWA retrospective - Pinterest Engineering

Paul Kinlan

Tổng quan về PWA của 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.

Đọc toàn bộ bài đăng.

Đây là một bài đăng thực sự tuyệt vời cho thấy lợi ích của việc xây dựng các trang web có chất lượng cao, nhanh và hấp dẫn. Thật tuyệt khi thấy phần ‘Ứng dụng’ của PWA, cụ thể là cài đặt ‘Thêm vào Màn hình chính’ đang được nhiều người dùng sử dụng. Đọc bài đăng rộng hơn rất tốt để thấy rằng họ tập trung vào trải nghiệm trang web tuyệt vời, tập trung vào các trang web tải nhanh có hiệu suất có thể lặp lại và có thể dự đoán được thông qua tách mã để giảm tải ban đầu và kiến ​​trúc tốt mà họ có thể chia sẻ đội. Sau đó, khi bạn có trải nghiệm cơ sở, bạn có thể lớp trên các tính năng như thông báo đẩy cho người dùng muốn họ.

Configuring hugo server to serve 'mjs' ES modules

Paul Kinlan

Theo mặc định, Hugo không phân phối tệp .mjs với loại nội dung chính xác. Trong thực tế nó đã không được cho đến gần đây mà hugo có thể phục vụ nhiều hơn một phần mở rộng tập tin cho mỗi loại mime. Dường như với v0.43 điều này đã được sửa.

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

Đọc toàn bộ bài đăng.

Đoạn mã trên cho phép tôi phục vụ các tệp mjs cho các Mô-đun ES với kiểu mime chính xác (các mô-đun ghi chú cần được phân phát bằng ‘văn bản / javascript’). Điều này chỉ cần thiết cho thử nghiệm địa phương, lưu trữ là một vấn đề khác :)

Thoughts on importing npm modules to the web as JavaScript modules

Paul Kinlan

Tôi đã có những suy nghĩ về bài đăng tôi đã làm hôm qua về ES Module

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.

Đọc toàn bộ bài đăng.

Một trong những điều mà tôi muốn thử và nói rõ trong bài viết gốc nhưng tôi quyết định rút ra là có một lượng lớn mã trong hệ sinh thái Nút mà không thực sự cụ thể với Node nhưng vẫn được kết hợp chặt chẽ với Node thông qua Common JS và các API Node đặc biệt khác (Buffer, old URL, vv ..) sẽ mất rất nhiều công sức để kéo bản thân lên và do đó thay đổi được yêu cầu để tạo ES Module ở khắp mọi nơi sẽ có khả năng khá đau đớn và thay đổi hệ sinh thái, chúng ta sẽ cần phải sử dụng rất nhiều công cụ chuyển đổi và bó để có thể chia sẻ mã một cách rõ ràng trên nhiều nền tảng (web / server).

Chúng tôi là nơi chúng tôi có, không có câu chuyện nhập trên web, chúng tôi không có một đống nguyên thủy mà Node đã giới thiệu và giờ đây nhiều người sẽ xem xét các yêu cầu nền tảng thực tế, vì vậy tôi hy vọng rằng đây là nhiều sự thừa nhận về tình hình hơn là một lời chỉ trích.

Ngoài ra còn có một di chuyển để sử dụng ‘.mjs’ như là một phần mở rộng tập tin đó là tiêu chuẩn trên cả hai nút và web. Tôi cảm thấy hoàn toàn thoải mái với điều này, tuy nhiên .msj không phải là một tập tin mà bất kỳ cơ sở hạ tầng nào được công nhận là ‘text / javascript’ và tôi mong đợi điều này chỉ được sắp xếp để nó tự động suy ra bởi mọi máy chủ web trên hành tinh, vì vậy Tôi không phải triển khai thêm nhiều thay đổi cấu hình cho cơ sở hạ tầng phân phát của mình.

Rất nhiều thời gian thú vị phía trước, tôi cho một người đang mong muốn có thể mang lại nhiều chức năng hơn cho trang web.

Importing npm modules to the web as JavaScript modules

Paul Kinlan

Tôi đã làm việc trên một cách để làm cho nó dễ dàng hơn để đẩy nội dung vào trang web tĩnh của tôi và đó là một bài tập nhỏ vui nhộn mà tôi sẽ chia sẻ nhiều hơn trong một bài đăng khác. Trong bài này tôi muốn chia sẻ cấu hình rollup mà tôi đã sử dụng để nhập gần như bất kỳ mô-đun npm nào vào một dự án lối vào bằng cách sử dụng các mô-đun JavaScript.

Read More

This.Javascript: State of Browsers - YouTube

Paul Kinlan

Tracy Lee từ This Dot đã tổ chức một luồng trực tiếp khá gọn gàng đã mang lại nhiều nhà cung cấp trình duyệt để cung cấp tổng quan về những gì họ đang làm việc:

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

Đọc toàn bộ bài đăng.

Tôi hoàn toàn thích thú với luồng trực tiếp và thật tuyệt khi nghe mọi người đang làm gì. Tôi cũng thích tầm nhìn mà Beaker Browser có cho một trang web phân tán, họ đã thực hiện rất nhiều công việc kể từ lần cuối cùng chúng tôi gặp nhau.

Tôi khuyến khích bạn xem video được liên kết, Edge đã có một số lượng lớn các bản cập nhật bao gồm hỗ trợ đầy đủ Dịch vụ công nhân, các phông chữ thay đổi và cũng có thể chúng đang giới thiệu WebP. Mozilla tập trung rất lớn vào Web Assembly và công cụ phát triển, Beaker đang làm những điều tuyệt vời với dat: và tính toán phân tán và Brave đã di chuyển rất nhiều trên BAT.

Tôi tập trung vào công việc mà nhóm của chúng tôi đang thực hiện tại thời điểm này và rộng rãi xung quanh Discovery, Tốc độ và Độ tin cậy, Giao diện người dùng, UX - Hoàn thành công việc, Bảo mật và quyền riêng tư. Cụ thể hơn một chút:

  • Khám phá - chúng tôi thực sự cần phải giúp các nhà phát triển xây dựng các trang web với JS dễ dàng hơn khi hiển thị trong các dịch vụ không đầu như trình lập chỉ mục và trình nhúng. Điều đó có nghĩa là chúng ta cần tập trung vào việc giáo dục các nhà phát triển về cách các nhà lập chỉ mục hoạt động và cách kiểm thử chúng, và cũng làm thế nào để xây dựng các trải nghiệm SSR vững chắc tốt. * Tốc độ và độ tin cậy - Tất cả các trang web phải có TTI <5s trên mạng 3G trên thiết bị Median (MotoG 45) và bạn nên tối ưu hóa FID (độ trễ đầu vào đầu tiên). FID là một chỉ số mới, vì vậy điều quan trọng là phải hiểu rằng nó có nghĩa là đại diện cho cách người dùng của bạn trải nghiệm trang web của bạn một cách hoang dã, nơi mà TTI khó đo lường, FID sẽ dễ dàng hơn. Có một polyfill ở đây mà bạn có thể sử dụng để kiểm tra FID * UI Responsiveness - Chúng tôi muốn trang web ở mức 60fps ở mọi nơi và giúp các nhà phát triển dễ dàng đạt được, vì vậy chúng tôi đang nghiên cứu & # x2018; FLIP & # x2019; dễ hiểu hơn, xây dựng Houdini để chúng tôi có thể giúp các nhà phát triển kiểm soát nhiều hơn việc tạo dựng hình ảnh và cuối cùng cố gắng di chuyển càng nhiều công việc càng tốt ‘ngoài chủ đề’ thông qua những thứ như img.decode và các công cụ như liên kết để tạo công nhân dễ sử dụng hơn. * UX - Hoàn thành công việc - Chúng tôi thực sự muốn thay đổi cách chúng ta nói về các tính năng mới sắp tới, đặc biệt chúng tôi muốn giới thiệu công nghệ được sử dụng hiệu quả để cải thiện trải nghiệm người dùng nhằm giúp họ hoàn thành công việc nhanh chóng với sự gián đoạn ít nhất có thể. * Bảo mật và quyền riêng tư - Tôi nghĩ phòng chống theo dõi thông minh của Apple sẽ có ảnh hưởng lâu dài trên web và các nhà phát triển cần phải bắt đầu suy nghĩ nhiều hơn về việc xây dựng trải nghiệm web hỗ trợ riêng tư. Nếu bất cứ điều gì GDPR làm cho trang web trở thành một trải nghiệm ‘thú vị’ ở EU.

Cuối cùng, nó đã khiêm nhường và ấm lòng khi nghe rằng mọi người đều muốn mang về Web Intents :)

PWACompat: the Web App Manifest for all browsers - @ChromiumDev

Paul Kinlan

Sam Thorogood từ nhóm của chúng tôi viết:

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.

Đọc toàn bộ bài đăng.

Tôi đã rất ngạc nhiên bởi thư viện này, và tôi rất vui khi thấy nó nhận được nhiều sự chú ý hơn một chút. Đây là lần đầu tiên tôi thực sự thấy Splash Screen trên iOS hoạt động trong 5 năm qua và anh ấy tạo ra chúng một cách thực sự gọn gàng - anh ấy tạo ra hình ảnh trên bay dựa trên kích thước màn hình chính xác của thiết bị và base64 mã hóa hình ảnh … nó cũng lấp đầy rất nhiều khoảng trống còn lại trong câu chuyện Safari Add To Homescreen.

Nếu bạn đang xây dựng một PWA tôi sẽ bao gồm nó.

Font Playground - Play with variable fonts!

Paul Kinlan

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.

Đọc toàn bộ bài đăng.

Đây là một giới thiệu tuyệt vời cho các phông chữ biến và đó là một sân chơi tuyệt vời để nhanh chóng nhìn thấy mọi thứ mà bạn có thể thay đổi trong hành động. Thêm nhiều dòng văn bản có vẻ như sẽ sớm được hạ cánh.

Lưu ý: Tôi tin rằng điều này không hiệu quả trong Firefox vì chúng không hỗ trợ đầy đủ Phông chữ biến.

did.txt file - Patrick

Paul Kinlan

Patrick viết về 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.

Đọc toàn bộ bài đăng.

Đây không phải là một triệu dặm so với những gì chúng ta làm trong nội bộ, nơi chúng tôi có một khái niệm về ‘đoạn’. Tùy thuộc vào cách bạn quản lý nó, nhưng đó là một cách tuyệt vời để theo dõi những gì bạn đã làm, nhưng cũng được chia sẻ trong nhóm của bạn, bạn sẽ có được một bức ảnh đẹp về những gì bạn bè, người quản lý và báo cáo của bạn đang làm.

Mô hình tôi thích là chia từng bản tóm tắt hàng tuần thành ‘những gì tôi đã làm’ và ‘dự định làm trong tuần này’. Nó giúp tôi phản ánh và lên kế hoạch cùng một lúc.

Hyperlinking Beyond the Web - CSS-Tricks

Paul Kinlan

Atishay Jain trên CSS Tricks viết về một khu vực gần gũi với trái tim tôi, liên kết:

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.

Đọc toàn bộ bài đăng.

Đây là một bài viết tuyệt vời bao gồm tất cả các loại siêu liên kết khác nhau có sẵn cho các ứng dụng và trang web. Tôi đã thực hiện rất nhiều nghiên cứu về không gian này kể từ khi Web Intents và trạng thái liên kết nâng cao trên web để lại rất nhiều điều mong muốn, imo.

Một trong những lý do tại sao tôi yêu web, đằng sau liên kết là truy cập trực tiếp vào tài nguyên, tôi không biết bất kỳ nền tảng nào khác có thể kết hợp liên kết và tài nguyên thực tế theo cùng một cách, nhưng có thể rất nhiều hơn. Liên kết tiêu chuẩn cung cấp cơ bản một mục đích VIEW có chứa trạng thái (url) và ngữ cảnh (văn bản giữa các neo), và bạn có thể hack về với nó các giao thức tùy chỉnh nhưng chúng ta cần phải đi xa hơn rất nhiều.

  • Chúng tôi cần mở rộng vốn từ vựng thành registerProtocolHandler để truy cập nhiều hơn vào nhiều sơ đồ gốc * Bất kỳ thứ gì được đăng ký với trình xử lý giao thức đều cần phải có hệ thống rộng. * Chúng tôi cần để có thể có các trang web để có thể xử lý mở một loạt các loại nội dung và có các trang có sẵn để được đăng ký như một trình xử lý tệp hệ thống. * Chúng tôi cần có các hành động đặt hàng cao hơn dành cho nhà phát triển, VIEW rất tuyệt, chúng tôi cần một bộ hành động cốt lõi đã thỏa thuận như PICK, SAVE, EDIT để chúng tôi có thể hiểu rõ hơn khả năng của ứng dụng hoặc trang web và khả năng mở rộng chúng với ngữ nghĩa bậc cao hơn. Android có điều này, Siri là nhận được nó, cả hai đều sử dụng ‘Intents’, Web nên có nó quá.

Đây là một trong những lý do tại sao tôi rất vui mừng về việc trừu tượng hóa tin nhắn như Comlink để loại bỏ gánh nặng của sự điên cuồng postMessage và cho phép bạn suy nghĩ về việc phơi bày chức năng với ứng dụng, và sau đó một khi bạn phơi bày chức năng bạn cần để dễ dàng hơn cho phép phát hiện ra chức năng đó … và đó là những gì liên kết cho phép.

Google Doesn't Have the Guts to Make Page Speed Actually Matter

Paul Kinlan

Dan từ Redfin có một bài đăng tuyệt vời về việc ưu tiên tốc độ 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

Đọc toàn bộ bài đăng.

Nó không chỉ là chúng tôi (Google) mà có thể làm điều này. Tôi xem nhóm của chúng tôi (Web và Chrome DevRel) có thể cung cấp các công cụ và hướng dẫn để giúp bạn bắt đầu nhanh và sau đó ở lại nhanh chóng, nhưng sau đó ngành công nghiệp phải nhận ra rằng hiệu suất là một tính năng chứ không phải sau khi nghĩ.

Tôi đã viết trong thử thách cho các nhà phát triển web rằng vẫn còn nhiều lý do mà các nhà phát triển không ưu tiên hiệu suất (công cụ, hướng dẫn và ưu đãi kinh doanh rõ ràng) ), Tôi không nghĩ rằng Google khẳng định như được viết trong bài viết của Dan là câu trả lời cho sức khỏe lâu dài của trang web, nó cần phải đến từ các doanh nghiệp nhìn thấy hiệu suất chuyển đổi tốt hơn.

TRACK | A WebGL Experiment by Little Workshop

Paul Kinlan

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.

Đọc toàn bộ bài đăng.

Tôi không có nhiều để thêm, nó hoàn toàn tuyệt vời. Kiểm tra nó ra.

Getting started with the Ambient Light Sensor

Paul Kinlan

Dean Hume đã làm rất nhiều công việc tuyệt vời với PWA gần đây, và anh ấy cũng đã khám phá rất nhiều API nền tảng mới, trong trường hợp này là API cảm biến chung:

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

Đọc toàn bộ bài đăng.

Tôi đã nói về API cảm biến chung tại Chrome Dev Summit 2016, do đó, chắc chắn phải mất một lúc để nó được đưa vào Chrome (tôi nghĩ rằng nó vẫn còn phía sau cờ) và có vẻ như nó đã hạ cánh ở Edge trước tiên. Cảm biến ánh sáng môi trường xung quanh là một trong nhiều API được xây dựng trên bộ cảm biến chung & mdash; có nhiều hơn như con quay hồi chuyển và từ kế & mdash; và nó cho phép bạn nhận thông tin về các mức ánh sáng xung quanh người dùng mở các trường hợp sử dụng như điều chỉnh độ sáng tự động hoặc thậm chí cung cấp cho người dùng chuyển sang chủ đề chế độ tối. Nó chắc chắn sẽ là thú vị để xem những gì cơ bản Generic Sensor API sẽ mang lại cho những trải nghiệm web.

Web Architecture 101 - VideoBlocks

Paul Kinlan

Jonathan Fulton, Videoblocks:

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

Đọc toàn bộ bài đăng.

Đây là một bài viết tuyệt vời cung cấp một tổng quan thực sự tuyệt vời về một chồng tương đối chuẩn được thiết kế để mở rộng nhiều ứng dụng web. Nó cũng cho thấy lý do tại sao rất nhiều nhà phát triển cũng thích Platform như một công cụ Dịch vụ như Heroku, Firebase hoặc AppEngine có thể trừu tượng hóa rất nhiều sự phức tạp với chi phí.

Introduction to Feature Policy

Paul Kinlan

Eric Bidelman về cập nhật web của nhà phát triển Google, viết:

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.

Đọc toàn bộ bài đăng.

Tôi thích xem vùng đất này như thế nào. Tôi lo lắng rằng các nhà phát triển sẽ không quan tâm đến điều này, hoặc rằng họ sẽ bị áp lực. Như tôi đã nói trên Twitter, tôi lo lắng về các ưu đãi và chúng tôi cần kết hợp thực tế rằng tính năng này sẽ cho phép các nhà phát triển kiểm soát một số lượng lớn các tính năng có sẵn hoặc mất bộ nhớ, có thể làm chậm trang xuống, hoặc vô tình làm rò rỉ sự riêng tư của người dùng cho các bên thứ ba nhúng, với những thứ mà các nhà phát triển có thể bán cho doanh nghiệp của họ. Một ví dụ có thể là ** nếu ** Cửa hàng Play đã từng liệt kê PWA thì họ có thể đi kèm với bộ chính sách được tự động áp dụng khi ứng dụng được khởi chạy và bạn là nhà phát triển đồng ý với điều này vì lợi ích của việc tham gia cửa hàng.

Tôi rất vui khi thấy điều gì xảy ra với API này và tôi muốn xem nó được chấp nhận, ngay cả khi nó chỉ được các nhà phát triển sử dụng để đảm bảo rằng các nhóm của họ không thoái lui.