Smashing Newsletter: Issue #204

Editorial

Along with much of the Smashing team, I’m just back from the SmashingConf that took place in San Francisco last week. We enjoyed two conference days packed with learning, along with several full-day workshops running either side of the conference days. There was even a conference running club, with a few of us enjoying the scenic views from Crissy Field along to the Golden Gate Bridge.

We’ll be releasing the videos soon, however, for European readers (or those of you who fancy a trip to one of the prettiest conference locations I’ve ever visited), we have announced our SmashingConf Freiburg lineup. Also, the tickets are available as of now! Just like with the magazine, the conferences aim to give you practical advice from your peers, along with a lot of fun, networking, and (as always) a few surprises!

Let’s keep learning from each other,
— Rachel (@rachelandrew)

The State Of Front-End 2018
Getting To Grips With Webpack
Meet Paul Slab, A Fresh Slab Serif
Accessibility Inspector
Front-End Design Checklist
Create And Animate Images With CSS
Mix And Match Robots In Sketch

1. The State Of Front-End 2018

Front-end is a field that’s changing and evolving constantly. While staying on top of things is a challenge even for professional front-end developers, what about people who want to get started with front-end engineering, or even managers, CTOs, and others who want to gain deeper insights into it? To give a concise overview over the current state of all things front-end, Cody Lindley wrote the Front-End Developer Handbook 2018.

Aimed at potential and practicing devs, but also everybody else who’s curious to understand front-end, this handbook discusses the practice of front-end engineering and the tools that are used today. A selection of learning resources make it a valuable read even for the experienced developer. You can read the book in the browser or download it for free in PDF, ePUB, and Kindle formats. (cm)

2. Getting To Grips With Webpack

Webpack helps you transform, bundle, or package just about any resource or asset, mainly JavaScript files for usage in the browser. If you haven’t worked with webpack yet (or feel your skills could need a bit of polishing), Sean Larkin brought the Webpack Learning Academy to life.

Currently, the academy offers two free, self-paced online courses that get you familiar with everything webpack-related. “The Web Fundamentals” course teaches you how to set up an environment correctly and how to make webpack work for your project. “The Core Concepts” dives deep into how webpack works and, well, its underlying concepts. While both courses are free, you can also choose to pay for them in order to give something back and support the webpack open source project which makes it all possible. (cm)

3. Meet Paul Slab, A Fresh Slab Serif

A slab serif that works well as a display font just like for body copy? That’s Paul Slab. The font family designed by Fargus Meiser and Lukas Bischoff includes eight weights, three of them can be downloaded and used for free in personal projects.

Paul Slab shines with its fresh and minimalist look. It comes with extended language support, fractions, arrows, super- and subscripts, and some other finesses. A real beauty, crafted with attention to detail. (cm)

4. Accessibility Inspector Is Coming To Firefox

Have you ever wondered what your site might look like to a screen reader user? Or maybe you’ve heard about barriers that make it hard or even impossible for them to use your site? To help you detect and eliminate accessibility hurdles, the Firefox Developer Tools now come with an Accessibility Inspector. It is currently available in the Nightly build, and will be implemented in the stable version starting from Firefox 61 (due for beta in May, the release is scheduled for July).

The new Accessibility Inspector is not meant to be an evaluation tool and, thus, won’t give you hints on whether your site is WCAG compliant, as Marco Zehe explains. Instead, it helps you inspect and understand the hierarchical tree of objects which assistive technologies use to translate your website for screen reader users. Marco explains in detail how you can make use of it. (cm)

5. Front-End Design Checklist

It may sometimes feel as if designers and front-end developers speak different languages, but that doesn’t mean that smooth and seamless communication isn’t possible. To help them facilitate their collaboration when working together on a project and ensure coherence in the way they interact, David Dias put together the Front-End Design Checklist.

The checklist helps designers and developers get their work in sync: Designers can make sure their creative files meet the requirements of a web project, while developers can review all elements delivered by the creative team and ensure everything’s correct before they dig into the code. A simple yet efficient step towards better communication. (cm)

6. Create And Animate Images With CSS

A good challenge not only helps you evolve and improve your skills, but also teaches you something valuable along the way that is worth sharing with others. Well, José Rosário did just that. He accepted a challenge of coming up with a technique that’s a bit different than the other ones available out there.

José loves to play with CSS and had the urge to turn an image into a piece of code which could be animated later. The undertaking was successful, and José now walks us step by step through the process — from turning a photo into CSS, optimizing the code, and, finally, animating it. Useful! (cm)

7. Mix And Match Robots In Sketch

Who doesn’t have a sweet spot for robots? Well, Pablo Stanley sure does, and his free Sketch library Bottts is now spreading some love for the little fellows.

Bottts lets you create cute and funny robot illustrations with just a few clicks. To give your robot a soul and some attitude, just mix and match different frames, antennas, sensors, accessories, and colors. How about a curious and friendly robot? Or rather a fierce fellow? Only your imagination is the limit. Have fun! (cm)

April 26, 2018 Smashing Newsletter: Issue #204

Previous Issues