June 6, 2018 #343 — June 6, 2018Read on the WebFrontend 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öndorferLevel 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 sponsorCritters: 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 GeekA 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 MagazineApple 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 WilanderFresher 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 DevelopersExperience the O’Reilly Fluent Conference for Just $199 — Access to keynotes, sponsored sessions, networking, events and more. Register today.O’Reilly Media, Inc. sponsorWCAG 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? JobsRemote 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 VenturesFront-End Expert? Sign Up for Vettery — Vettery matches top tech talent with fast-growing companies. Take a few minutes to join our platform.Vettery? TutorialsHow to Make an Animated Multi-Step ‘Wizard’ Component — A UX pattern often used in signups/onboarding in webapps.Eder DiazMaking an Avengers-Style ID Card with HTML and CSS — I haven’t seen the movie – sorry – but the effect is pretty neat.Kunal SarkarSide-Channel Attacking Browsers Through CSS3 Features — How a side-channel vulnerability in browser implementations of the CSS3 feature mix-blend-mode allowed visual content to leak from cross-origin iframes.Ruslan HabalovNew Course: Master Automated Web Testing With SeleniumSelenium.Academy sponsorSpecificity in :not(), :has(), and :matches()Eric MeyerHSL() / 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 SuzanneWhy You Shouldn’t Use Bright, Saturated Colors for Backgrounds — Tone down that saturation just a smidge for better UX.UX MovementAn Overview of Visual Studio Code for Frontend DevelopersVinh Le? Code and ToolsShort and Sweet: Accessible Character Counter for Input Elements — Demo here.Rik SchenninkLottie: Render Adobe After Effects Animations on the WebAirbnbLinux Cloud Hosting Starting at 1GB of RAM for $5/moLinode Cloud Hosting sponsorEmbetty: Display 3rd Party Content Like Tweets or YouTube Videos Without Compromising Privacy — Involves using a proxy server you host yourself.heise onlineThe State of Changing Gradients with CSS Transitions and AnimationsAna Tudor Source link