Frontend Focus Issue 346: June 27, 2018

#346 — June 27, 2018

Drawing Images with CSS Gradients — If you’ve seen an illustration created purely with HTML and CSS but struggled to understand how it all comes together, this is a neat step-by-step guide to creating some of your own.

Jon Kantner

Assessing Loading Performance in Real Life — Synthetic testing of Web page load performance using browser tools is a great start, but the Navigation Timing and Resource Timing APIs can be used to get a more ‘real world’ impression of what’s going on.

Google Developers

Functional Programming with JS: Tips, Code Examples and More — 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

Material Dashboard: A Bootstrap 4 Material Design Admin Dashboard — Comes in plain HTML, React, Vue, and Angular varieties. Demo.

Creative Tim

Firefox 61 Released with Parallel CSS Parsing — Firefox is faster than ever with parallel CSS parsing added to Quantum CSS, a new Accessibility Inspector, and many other developer-focused updates including devtools improvements, removal of the grid- prefix on CSS properties like grid-gap and grid-row-gap, and PerformanceServerTiming API support.

Mozilla Hacks

Feature Policy: A Way to Enable/Disable Browser Features over HTTP — Currently only experimentally supported in Chrome and Safari, Feature-Policy is an under development HTTP header for enabling and disabling browser features. For example Feature-Policy: vibrate 'none'; geolocation 'none' would turn off vibration and geolocation features.

W3C WICG

An Introduction to Firefox's Accessibility Inspector — The new inspector lets you access key information exposed to assistive technologies on the current page via the accessibility tree.

Mozilla

CSS Basic User Interface Module Level 3 (CSS3 UI) Now a W3C Recommendation

W3C

💻 Jobs

React Frontend Positions in Beautiful Norway — Want to build blazing fast and awesome frontends using React and GraphQL? We have positions open.

Snowball Digital

React Developer in London Looking for a Job? — Join our team in London to create the future of payments using the latest technology in Front End. Read more here.

Divido

Find A Job Through Vettery — Vettery matches top tech talent with fast-growing companies. Take a few minutes to join our platform.

Vettery

📘 Tutorials

5 Ways to Handle Forms on Your Static Site

DJ Walker

How to Use Emojis as Single Color Icons — A nice trick. Make them transparent and apply text-shadow.

Preethi

React: Handle Event Handlers in Class Components — Free guidance from React experts.

Big Nerd Ranch sponsor

Building a Fancy Countdown Timer with MomentumSlider.js — How to build a countdown timer using CSS, and a new library called MomentumSlider.

Luis Manuel

How and Why We Unit Test Our Sass — Yes, you can unit test your Sass-powered stylesheets.

Lindsey Wild

▶ Where is CSS4 and When Is It Coming Out? — Spoiler: It’s not.

Jen Simmons

Using Obsolete HTML to Create a 'JavaScript-Free Carousel' — Now we feel old! Did you know the old marquee tag still works in most browsers?

Michael Weaver

Optimizing CSS: ID Selectors and Other Myths

Ivan Čurić (SitePoint)

Retained Display Lists for Improved Page Performance — The performance impact of Firefox 61’s optimizations to the way it keeps track of things it has to render.

Matt Woodrow (Mozilla)

Want to Create Better Web Experiences in 10 Days? Learn for Free

Pluralsight sponsor

Animated Calligraphy with SVG

Claus Colloseus

8-Point Grid: Typography on the Web — Web typography is confusing. Do you know the best practices?

Elliot Dahl

🔧 Code and Tools