1. screenshot of Creating distraction-free reading experiences

    Adrian Zumbrunnen avatar Adrian Zumbrunnen

    Creating distraction-free reading experiences

    Distractions have always been a natural constituent of our lives. But with the rise of mobile technology, a circus of notifications, and all the noise going on around us, it’s become harder and harder to focus on a task at hand.

  2. screenshot of The practical value of semantic HTML

    Bruce Lawson avatar Bruce Lawson

    The practical value of semantic HTML

    We’re seeing more and more types of devices connecting to the web, and semantic HTML can help these devices display your content in a more usable way to their owners. And if your site is more usable than your competitors’, you win, and your boss will erect a massive gold statue of you in the office car park.

  3. screenshot of Jank-Free Image Loads

    Eric Portis avatar Eric Portis

    Jank-Free Image Loads

    great news: there are two on-the-horizion web platform features that are trying to make no-jank, fixed-aspect-ratio, fluid-width images a natural part of the web platform.

  4. screenshot of Font style matcher

    Monica Dinculescu avatar Monica Dinculescu

    Font style matcher

    If you're using a web font, you're bound to see a flash of unstyled text (or FOUC), between the initial render of your websafe font and the webfont that you've chosen. This usually results in a jarring shift in layout, due to sizing discrepancies between the two fonts. To minimize this discrepancy, you can try to match the fallback font and the intended webfont’s x-heights and widths. This tool helps you do exactly that.

  5. screenshot of Your Site—Any Site—Should be a PWA

    Aaron Gustafson avatar Aaron Gustafson

    Your Site—Any Site—Should be a PWA

    PWAs don’t require you use a particular JavaScript framework or any JavaScript framework at all. You don’t need to be building a Single Page App either. In fact, it will probably be easier if you’re not. If you work on a website, there’s a really good chance your site could benefit from the technologies and approaches aggregated under the PWA umbrella.

  6. Cover slide from the talk “Les Progressive Web Apps (PWA)”

    Les Progressive Web Apps (PWA)

    Dans Les Papis du Web Épisode #2, retrouvez notre web série sur l’actualité du web à 360° analysée par nos Papis du Web. Actualité et veille techno sur les sujets digitaux qui vous concernent, vues par nos experts… Le tout, en toute indépendance.

  7. screenshot of CSS Indexes: A listing of every term defined by CSS specs

    CSS Indexes: A listing of every term defined by CSS specs

    This is a non-normative document. It lists every term defined in CSS, as long as it’s marked up correctly for the spec generator. It is intended as a reference document for authors, implementors, and spec authors, to aid in finding the definition for a term hidden somewhere in the haystack of CSS specs.

  8. screenshot of Making password managers play ball with your login form

    Hidde de Vries avatar Hidde de Vries

    Making password managers play ball with your login form

    Password managers are essential to secure internet usage, so making our login fields work with them is extremely important. This will mostly happen automatically if you follow best practices. The autocomplete attribute can make it easier for password managers to recognise your fields. Using hidden attributes can make password managers fail altogether. This can be hacked around, but I do not recommend doing so, unless absolutely necessary.

  9. screenshot of Language Icon

    Language Icon

    the language icon is an initiative started in 2008 to standardise the language selection icon, the idea and initial icon was designed by Onur Mustak Cobanli and this new icon has been designed in 2011 by Designer Farhat Datta

  10. screenshot of Metrics from 1M Sites

    Steve Souders avatar Steve Souders

    Metrics from 1M Sites

    What catches my eye are the gaps between TTFB and the paint metrics, and between the paint metrics and First CPU Idle. These gaps are caused by JavaScript dominating the browser main thread. This happens after TTFB when all the blocking scripts are executed – these have to finish before any rendering can happen.

  11. screenshot of Should I Use JavaScript to Load My Web Fonts?

    Zach Leatherman avatar Zach Leatherman

    Should I Use JavaScript to Load My Web Fonts?

    the advanced web font loading control offered by JavaScript still provides more than sufficient value to keep it around. You can adapt your page’s performance profile to suit a user’s network conditions, user preferences, improving the general loading behavior of self hosted fonts and third party hosting providers.