Web Design: The new (and old) CSS units you've never heard about

Wednesday, June 13, 2018

The new (and old) CSS units you've never heard about

#344 — June 13, 2018

The New (and Old) CSS Units You've Never Heard About — Exploring the newly defined CSS units that have been recently or are going to be implemented in browsers, including lh, vi and grad.

Massimo Artizzu

Manipulating Pixels Using Canvas — If you've not worked with the canvas element in the past few years, this is a practical, easy to follow walkthrough of producing some handy pixel-based effects with it.

Welling Guzman

💻 New Course: A Practical Guide to Algorithms with JavaScript — Bored by the academic approach of most data structures and algorithms courses? This is for you. Solve algorithms and analyze space and time complexity in both an interview setting and in your day-to-day development.

Frontend Masters sponsor

Image Inconsistencies: How and When Browsers Download Images — Browsers don't download images referenced in CSS until the CSS object model is built which could lead you to use img tags to load images more quickly.. but Firefox may not behave as you'd expect here.

Harry Roberts

Creating a Bar Graph with CSS Grid — A walkthrough of a cute way to create a basic bar graph using CSS grid layout and variables.

Preethi Kasireddy

▶ Introducing MapKitJS: Bring Apple Maps To Your Sites — Although still in beta, you can now integrate Apple Maps directly on your own site. This video session from WWDC runs through how you could use it. Related documentation here.

Apple

▶ Designing Web Content for the Apple Watch — watchOS 5 brings web content to the Apple Watch by rendering rich HTML in Messages and Mail.

Apple Developer

AV1 Video Support Added to 'Can I Use' — Not a lot to see yet as it's only supported in Firefox and Chrome behind a setting, but this video format could become more significant in future.

Can I Use

💻 Jobs

Remote Front End Developer (React Native & Rails) — Join us, work remotely from North America, and help build software that matters.

Aha!

Have You Tried Vettery? — Vettery matches top tech talent with fast-growing companies. Take a few minutes to join our platform.

Vettery

📘 Tutorials

Animating Images and Videos with Curtains.js — Curtains.js uses WebGL to turn images and videos into a plane that can be animated in a 'curtain'-like way. It's a striking effect, but be careful not to overuse it.

Martin Laxenaire

CSS Media Queries: A Quick Reference and Guide

Alligator

Building a Responsive Image as an SVG — How to create a logo that responds to its own aspect ratio.

Nils Binder

Creating a Visual Studio Code Theme — Not your typical frontend work, but as VS Code is built using JavaScript and HTML, many concepts transfer across.

Sarah Drasner

Easier 'Scrollytelling' with position: sticky — A neat effect demonstrated simply and in a surprisingly little amount of code.

Elaina Natario and Russell Goldenberg

Submitting HTML Forms using Vue, React, or Hyperapp

Ogundipe Samuel

See Why Facebook, Spotify, & fastlane Trust CircleCI with Their CI/CD — The shortest distance from idea to execution. Automate your development process quickly, safely, and at scale.

CircleCI sponsor

A Comprehensive Guide to Flexbox Alignment — A good primer to help understand how items get aligned along flexbox's two axes.

Anna Monus

How to Build a Toggle Control 'Smiley Face' using HTML and CSS — A neat trick for this simple visual effect.

Eder Diaz

Deprecations and Removals in Chrome 68 — Chrome 68 will be the stable release in about a month.

Google Developers

Designing Web Content for watchOS — Some early pointers on building pages for the Apple Watch.

Erik Runyon

Keeping Up with Browser Updates

Raymond Camden

Some Time-saving Chrome DevTools Shortcuts