#343 — June 6, 2018 |
Frontend Focus |
|
|
How to Start with Variable Fonts on the Web — A detailed primer on using variable fonts, single font files that can behave like multiple fonts via OpenType settings. They’re supported by the latest version of all major browsers except Firefox (which has support behind a flag). Oliver Schöndorfer |
|
Level Up Your CSS Selector Skills — An in-depth review of interesting CSS selectors, complete with live, editable examples, plus a few that will be available in the future. David Gwyer |
Cheat Sheet: Functional Programming with JavaScript — JavaScript developers, here’s a handy resource for your reference stack. This cheat sheet structures some of the language features most commonly used by JavaScript developers interested in writing functional style code. Check it out. Progress Kendo UI sponsor |
|
Critters: Webpack Plugin to Inline Critical CSS — An interesting project from Google that quickly inlines critical CSS into your pages and then lazy-loads the rest. It’s fast as it doesn’t need a headless browser to work. Google Chrome Labs |
|
▶ Designing Sites for the New Apple watchOS Breakpoint? — Web browsing, of a sort, is coming to watchOS. The breakpoint is.. 312 pixels(!) — here’s an example site. *squints* Pixel Geek |
|
A Reference Guide For Typography in Mobile Web Design — What’s good for the desktop doesn’t always look great when scaled down for mobile browsers so here’s what you need to pay attention to with your mobile Web typography. Smashing Magazine |
|
Apple Just Made Safari the Good Privacy Browser — The next version of Safari will take on ad-trackers more aggressively than ever. Here’s Craig Federighi making the announcment. Lily Hay Newman (Wired) |
|
WebKit's Intelligent Tracking Prevention 2.0 — Continuing from the Safari news, above, ITP 1.0 (introduced last year) ushered in changes to how Safari handled cookies and cross-site tracking. 2.0 builds on this in several key ways to further benefit end users. John Wilander |
|
Fresher Service Workers, by Default, in Chrome — Starting in Chrome 68, HTTP requests that check for updates to the service worker script will no longer be fulfilled by the HTTP cache by default. Google Developers |
|
Experience the O'Reilly Fluent Conference for Just $199 — Access to keynotes, sponsored sessions, networking, events and more. Register today. O'Reilly Media, Inc. sponsor |
|
WCAG 2.1 is a W3C Recommendation — An evolution of W3C’s accessibility guidance, including expansion of mobile, low vision, and cognitive and learning provisions. Andrew Kirkpatrick and Michael Cooper |
💻 Jobs |
|
Remote Front End Developer (React Native & Rails) — Join us, work remotely from North America, and help build software that matters. Aha! |
|
Senior Front End Developer (Charlotte, NC) — Bring your skills to create, code and optimize websites & user experiences for some of the biggest brands in the US. Join us at RV. Red Ventures |
|
Front-End Expert? Sign Up for Vettery — Vettery matches top tech talent with fast-growing companies. Take a few minutes to join our platform. Vettery |
📘 Tutorials |
|
How to Make an Animated Multi-Step 'Wizard' Component — A UX pattern often used in signups/onboarding in webapps. Eder Diaz |
|
Making an Avengers-Style ID Card with HTML and CSS — I haven’t seen the movie - sorry - but the effect is pretty neat. Kunal Sarkar |
|
Side-Channel Attacking Browsers Through CSS3 Features — How a side-channel vulnerability in browser implementations of the CSS3 feature Ruslan Habalov |
|
New Course: Master Automated Web Testing With Selenium Selenium.Academy sponsor |
|
Specificity in :not(), :has(), and :matches() Eric Meyer |
|
HSL() / HSLa() Is Great for Programmatic Color Control — “If you ever need to hand-manipulate a color in native CSS, HSL is pretty much the only way.” Chris Coyier |
|
▶ Don't Use My Grid System (Or Any Others) — A review of layout and grid techniques — when to use them, what to consider, and how to roll your own layouts with minimum code. Miriam Suzanne |
|
Why You Shouldn't Use Bright, Saturated Colors for Backgrounds — Tone down that saturation just a smidge for better UX. UX Movement |
|
An Overview of Visual Studio Code for Frontend Developers Vinh Le |
🔧 Code and Tools |
|
Short and Sweet: Accessible Character Counter for Input Elements — Demo here. Rik Schennink |
|
Lottie: Render Adobe After Effects Animations on the Web Airbnb |
|
Linux Cloud Hosting Starting at 1GB of RAM for $5/mo Linode Cloud Hosting sponsor |
|
Embetty: Display 3rd Party Content Like Tweets or YouTube Videos Without Compromising Privacy — Involves using a proxy server you host yourself. heise online |
|
The State of Changing Gradients with CSS Transitions and Animations Ana Tudor |