#339 — May 9, 2018

Read on the Web

Frontend Focus

New CSS Features That Are Changing Web Design — Widely available, but relatively new, Web technologies like CSS Grid, CSS custom properties, CSS shapes and CSS writing-mode are allowing designers to exercise creativity in all new ways. Zell Liew explains how.

Zell Liew

Container-Adapting Tabs, with a “More” Button — You could call this a ‘progressively collapsing’ navigation menu. It’s a neat way to handle a wide variation of horizontal viewport widths if you have a lot of items you need to present in your navigation.

Osvaldas Valutis

The New Generation of Project Management Tools Is Here and It’s Visual — monday.com is a visual tool your team will actually enjoy using. It makes it fun and easy for everyone to collaborate, focus on what’s important, and get more done. A project management tool that’ll help you and your team collaborate and achieve more together.

monday.com sponsor

layerJS: UI Composition and Animation in Pure HTML — Work with UX patterns and controls like menus, sliders, parallax effects, and zoom effects by declaring them as visual effects in HTML attributes.

Handorf, Tordeur, and Onutchin

‘I Used The Web For A Day With JavaScript Turned Off’ — Is it possible to do anything on the web without JavaScript nowadays? This is not only a neat journey to answer that question but there are plenty of insights on how to improve your own sites and apps.

Chris Ashton

Creating Responsive Layouts & Components with CSS Grid — “Let’s make a photo gallery responsive quickly …using very few lines of CSS.”

Rafaela Ferro

Inspecting Animations in Chrome DevTools — A quick demo of what Chrome’s Animation panel has to offer if you want to spy on how CSS animations/transitions work.

Robin Rendle

Welcome to the Immersive Web — A look at how the browser is becoming a platform for virtual world experiences thanks to WebXR (and, once, WebVR).

Joseph Medley

? Jobs

Front-end Developer With Strong UI/UX Focus — Help our growing team build amazing tools, games and websites used by thousands of people every day. Near Oxford and/or UK remote.

Helical Levity

Software Engineer – London, UK — Frontend engineer wanted to help build the future of online trust. Join our group of engineers who take pride in the software we ship.

Onfido

Front-End Expert? Sign Up for Vettery — Top companies use Vettery to find the best tech talent. Create your profile to get started.

Vettery

? Tutorials

A Deep Dive into the Bootstrap Form Component

Ilya Bodrov-Krukowski

Decorating Lines of Text with ‘box-decoration-break’ — Styling inline boxes split over multiple lines can be tricky, but box-decoration-break can give you more options.

Preethi Sam

Extracting a React Component: On Demand Tutorial — Attendees couldn’t believe we offered this at no cost – catch up here with Josh Skeen’s tutorial replay.

Big Nerd Ranch sponsor

A Look at the Resize Observer JavaScript API — Rather than relying on window.resize to check if certain elements have changed size, the Resize Observer API makes it possible to be notified directly. Chrome only for now, but there’s a polyfill.

Alligator

HTML5’s Global ‘hidden’ Attribute — hidden is an attribute you can use on any HTML element to, well, hide it, and a worthwhile alternative to display: none in many situations.

Louis Lazaris

The Relative Units of CSS: em, rem, vw, vh, ex, and ch

Adam Laki

An Intro to CSS 3D Transforms

David DeSandro

Cheat Sheet: Functional Programming with JavaScript

Progress Kendo UI sponsor

5 Basic Console Tips to Debug Webapps with Chrome DevTools

Mailen Mancuso

? Code and Tools

Introducing Elmstatic: An Elm-to-HTML Static Site Generator

Alex S. Korban tutorial

Selection: A Library to Enable Visual DOM Selection — For example, if you want users to be able to drag a box around various elements they want to select. Touch device friendly.

Simon Reinisch

Announcing Babylon.js v3.2 — An open source framework for creating powerful 3D experiences in the browser.

David Catuhe (Microsoft)

Impact, the HTML5 Game Engine, Open Sourced — Anyone building HTML5 games a few years ago will have heard of this popular game engine. It was a paid-for product but has just been MIT licensed.

Dominic Szablewski

Themify: CSS Theming Made Easy — A PostCSS plugin for generating site themes during build.

datorama

Linux Cloud Hosting Starting at 1GB of RAM for $5/mo

Linode Cloud Hosting sponsor

Responsive Type: A One-Size-Fits-All SCSS Type Solution

Kyle Villeneuve

Particle Effects for Buttons — Disintegrate elements into particles to make them disappear (or vice versa).

Luis Manuel

Ideas for Proximity Feedback with Progressive Hover Effects — Experimenting with hover effects that trigger when an element is approached.

Team Codrops