#SFHTML5

[t-baba]

What happens when a browser is launched for the first time? A lot.

#406 — August 28, 2019

Read on the Web

Frontend Focus

What Happens When You Launch A Browser for The First Time? — A collection of interesting and quite revealing Twitter threads digging into what browsers (Chrome, Firefox, Opera, etc) do upon install/first launch (including phoning home and downloading default extensions).

Jonathan Sampson on Twitter

Faster Image Loading With Embedded Image Previews — The Embedded Image Preview (EIP) technique introduced in this article allows us to load preview images during lazy loading using progressive JPEGs, Ajax and HTTP range requests without having to transfer additional data.

Christoph Erdmann

Continuous Integration for Django Projects — Learn to set up a continuous integration pipeline for a Django project.

CircleCI sponsor

▶  Jeremy Keith: Building The Web — An interview with Jeremy Keith, a frontend dev from the UK on the state of the web, how it’s evolved over all these years, and the tooling and the skills necessary to know today.

Smashing Magazine

Everything I Know About Style Guides, Design Systems, and Component Libraries — A deep-dive covering these popular frontend development and design themes.

Lee Robinson

Monolith: Save Web Pages into a Single, Bundled HTML File — Unlike a browser’s “Save as” feature, Monolith embeds a page’s HTML, CSS, image and JavaScript assets into a single HTML file for easy storage.

Y2Z tools

💻 Jobs

Web Designer - Komoot (Remote) — We're looking for a Web Designer who enjoys clean code & great design to help us change the way people explore.

komoot

Frontend developers are in demand on Vettery — Make a free profile, name your salary, and connect with hiring managers from top employers.

Vettery

📙 Articles, Tutorials & Opinion

How To Build A Web-Based Real-Time Multiplayer Virtual Reality Game — Leverages familiarity with web development to get started with VR development. In this first part of the series, you will learn how to create a virtual reality scene with interactive game elements.

Alvin Wan

The Browser Monopoly — Touches upon how, with Chrome, Google “enjoys substantial control over the vast majority of the world’s portal to the internet”.

Blair Reeves

Accessibility Strategies for Your Content Team — Some tips and tools to help empower content creators to take ownership of accessibility.

Caitlin Cashin

CSS Styling for Video Captions Is Now in Development in Chrome — You use either an external CSS file or a style block in a WebVTT file (it’s already shipped in Safari).

Sam Dutton on Twitter

▶  New & Experimental CSS Tools in Firefox — UX Designer Victoria Wang runs through seven new CSS tools in Firefox, plus a peek at some future ideas.

SFHTML5

Type Terms — Covers the basics of typographic terminology. Sharing this one mainly as it’s nicely animated/put together.

Supremo beginner

Get a User’s Eye View of Your Front-End Services with Datadog Synthetics

Datadog Synthetics sponsor

Creating A Shopping Cart with HTML5 Web Storage

Matt Zand

Chrome DevTools: Inspecting Audio with the Web Audio Inspector

Umar Hansa

💡 Tip of the Week

supported by

Using 'tabular figures' for more elegant dynamic number rendering

If your interface has elements with changing digits, such as a video timestamp or a user controlled numeric slider, then it may be worth considering using a font that supports monospaced numbers (a.k.a. tabular figures) to improve the user experience.

The animation below perfectly demonstrates the difference, with the proportionally spaced digits jumping around erratically as the values change:

This indicative image comes from Lior Azi's superb related article, which does a great job of highlighting plenty of real world examples of dynamic vs static numeric labels (both good and bad).

The easiest way to make this change? Use the following declaration in your CSS:

font-variant-numeric: tabular-nums;

Now, the above (which has around 90% global broswer support) will only work if your font has an appropriate alternative fixed-width glyph available to use — but there is a growing selection of monospaced fonts available, such as these options at Google Fonts.

Finally, if you want to know more about the font-variant-numeric property, then Geoff Graham has this handy write-up over at CSS Tricks.

This weeks Tip of the Week is sponsored by Progress. Progress Named a Leader in First Ever 2019 Gartner Magic Quadrant for Multiexperience Development Platforms.

🔧 Code, Tools & Resources

radialMenu: A Highly Customizable JavaScript Radial Menu — This works on both desktop and mobile. You can see a demo here (right click on desktop, touch and hold on mobile).

Victor Ribeiro

FilePond: A Flexible File Uploader with a Smooth UI — It’s vanilla JavaScript but has adapters to make it easier to use with React, Vue, Angular, or even jQuery. v4.5 has just dropped. GitHub repo.

Rik Schennink

Want a Better Way to Store and Serve Images and Videos? — Join a community of over 450K web and mobile developers dynamically managing rich media with Cloudinary. Try it free.

Cloudinary sponsor

Chart.xkcd: xkcd, Hand-Drawn-Style Charts — If you like your lines wiggly and rough, this might be for you. It tries to mimic the style of the fantastic xkcd comic.

Tim Qian

Moving: A Clean and Minimalist Theme for Jekyll — Here's a really clean theme for the popular Jekyll Ruby-based static site generator is (which recently got a major new version).

Yizheng Huang

A Collection of Color Tools For Designers

Muzli

Get Waves: An SVG Wave Generator

z creative labs

   🗓 Upcoming Events

Web Unleashed 2019, September 13-14 — Toronto, Canada — Covers a variety of front-end topics leaving you 'informed, challenged and inspired'.

State of the Browser, September 14 — London, UK — A one-day, single-track conference with widely varying talks about the modern web.

CSSConf, September 25 — Budapest, Hungary — A community conference dedicated to the designers and developers who love CSS.

Accessibility Scotland, October 25 — Edinburgh, UK — One day of talks. Friendly, open discussion about accessibility.

by via Frontend Focus https://ift.tt/2PjrpQj

[omgillustrations]

SFHTML5 TSHIRT CONTEST

[scriptsht]

The best short introduction to Web-Components i could find is by Rob Dodson. Very straight forward without going into too much detail.

[jasonmayes]

Really interesting talk from #SFHTML5 on #ServiceWorkers - and how you can use them to get an experience as good as native on #mobile. Need to digest all the information, but looks promising. Now to wait for all the other key players to support this too. The ServiceWorker is coming, look busy! with Jake Archibald http://click-to-read-mo.re/p/9A2c/53ed375c

[systemsthinking]

All About Polymer at SFHTML5

Web components are the new building blocks for web apps. Polymer imports capabilities into the web browser ahead of the web components native in the browser. Polymer degrades gracefully in slower evolving browsers, or older browsers. The Polymer Team addressed my AMD moderator question.

Move JavaScript from html into website/javascript such as for d3.js. Now step into browser dev tools, and notice "ReferenceError: d3 is not defined…" welcome to Asynchronous Module Definition (AMD)

btw ...long video AMD at 3:32:30 

[jasonmayes]

Really awesome presentation on #WebGL  at the #SFHTML5  conference earlier this year. Well worth a watch even though it is quite long. Skip the music at the beginning. http://click-to-read-mo.re/p/9nBt/53ed375c