#400 — July 17, 2019

Read on the Web

Frontend Focus

Everything You Need To Know About CSS Margins — At first glance, margins place space around DOM elements, pushing other elements away, but things can get complicated fast when you think about how margins can collapse together or introduce Flexbox or CSS Grid.

Rachel Andrew

Color Inputs: A Deep Dive into Cross-Browser Differences — This really is a ‘deep dive’. Certainly deeper than I needed, but I admire Ana’s ability to go so deep into analyzing the styling of a browser-supplied input component. You will absolutely learn something but, as one commenter notes, “that’s nightmare territory.”

Ana Tudor

Image & Video Management Made for Front-End Developers — Simplify and automate the process of uploading, manipulating, optimizing, and delivering images and videos across every device at any bandwidth. Try Cloudinary. See how easy media management can be. Get your own free account today.

Cloudinary sponsor

Debugging CSS Grid with Firefox Dev Tools — When you build a layout using CSS grid you end up with rows, columns, cells, etc. but they’re not really elements so visualizing and debugging them can be tough.. but Firefox’s dev tools have some nifty features to help.

Chris Nwamba

Debug the DOM in VS Code using Elements for Microsoft Edge — A look at a new Visual Studio Code extension, Elements for Microsoft Edge, that lets you inspect and debug the DOM directly from within VS Code and see the impact of changes to the page in real time.

Paul Gildea

The MDN Web Docs Have a New React-Powered Homepage — It’s in beta now but the popular frontend developer resource site is trying a React-driven front-end.

Mozilla

? Jobs

Frontend Developer – Remote — Build the web’s next-level document collaboration library with React.

PSPDFKit

Get Hired Based on Your Skills Not Your CV — Our AI makes it easier and quicker to match with top frontend jobs, with no recruiters and an average salary of £70k.

hackajob

? Tutorials & Opinion

Avoid Placeholder Text by Animating Form Labels — Placeholder text has some (minor) usability issues, but what if your label text could be the placeholder text? An interesting concept!

Christopher Schmitt

Managing Multiple Backgrounds with Custom Properties — A clever use for CSS variables here.

Chris Coyier

A Look At z-index Values Seen in The Wild — There’s not a lot to learn here, but it’s just the sort of data and analysis I enjoy seeing. Unsurprisingly, people love using z-index values like 1000 and 9999 just to make sure their element of choice is rendered on top ?

Philippe Suter

Web Unleashed – The Front-End Developer Event in Toronto, Sept 13-14 — Networking, sessions, workshops and more. Save 20% on tickets to #WEBU19 with code FRONTENDFOCUS.

FITC sponsor

Scrolling Is Easier Than Clicking — “Cognitively, it’s easier to move a little where you are than to go somewhere else.”

Joshua Porter

How To Build a ‘Sketch’ Plugin with JavaScript — Sketch is a popular (but commercial) vector graphics editor for macOS and you can dynamically extend it with JavaScript.

Smashing Magazine

Improve Your JavaScript Knowledge By Reading Source Code — ? If you get stuck with a certain API or language feature, reading other people’s source code is a great way to break out of a funk.

Carl Mungazi

Three Predictions From the State of CSS 2019 Survey

Sacha Greif

The Web Can’t Survive a Monoculture — You have the power to prevent the Web becoming a Chrome-dominated monoculture, says Mike.

Mike Pennisi

Using HTML Validator Badges Again? — Remember when sites used to declare their code was both semantic and followed W3C guidelines by displaying validator badges with pride? Should we bring them back..?

Bradley Taunt

? Code, Tools & Resources

Exthouse: Analyze The Impact of a Browser Extension on Web Performance — If you build browser extensions, you need this! It’s a tool powered by Lighthouse that provides a report about an extension’s impact on overall Web performance.

treo.sh

webhint: A Linting Tool for Web Best Practices — A customizable (and extensible) tool that checks your site for accessibility, performance, security, and other concerns.

JS Foundation

The State of JavaScript: 2019 and Beyond. Get the Whitepaper

Progress Kendo UI sponsor

Color Accessibility: Tools and Resources to Help You Design Inclusive Products — “All the resources, tips and tools I regularly use to build and check the color accessibility of my products in one place.” It’s a good selection.

Stéphanie Walter

Doggo Ipsum: The Doggo Nonsense Text Generator — Want some pointless auto generated text to pad out a mock Web page design? Skip Lorem Ipsum and enjoy this dog-themed doggerel.

Mike Lee

SurveyJS: A JavaScript Survey and Form Library — Here’s a live demo.

Devsoft Baltic OÜ