#351 — August 1, 2018

Read on the Web

Frontend Focus

Priority Nav Scroller: Priority+ Navigation in a Horizontal Scrollable Container — A practical navigational element if you have a large number of category links to show. Comes as an ES6 module but a compiled version is also included.

Nigel O Toole

Implementing a ‘Double Click’ Link with Pure CSS — A pretty neat trick using hidden link elements/CSS transitions to create links and other elements that only operate when double clicked. It even worked on mobile (for me).

Martijn Cuppens

New Course: ? Complete Intro to Web Development, v2 — More than an introductory course, this is a totally revamped, modern intro course where you’ll go from building your first website to having the foundations for becoming a professional web developer.

Frontend Masters sponsor

Logical Styling Based on the Number of Given Elements — Ready to learn some true CSS trickery? Here’s a practical look at a few ways to use CSS’s support for logic and condition-based styling (e.g. take one approach if there are fewer or more than x elements).

Una Kravets

The Trick to Viewport Units on Mobile — Notches, scrollbars, navigational elements.. they can all interfere with your use of the vw and vh viewport units. CSS custom properties to the rescue!

Louis Hoebregts

Building A Progressive Web App: No React, No Angular, No Vue — Just direct DOM manipulation with some more recent APIs and JS specs.

Florian Rappl

Logging Activity with the Web Beacon API — The Beacon API is a Web API (supported by all major browsers) that provides an efficient way for data to be asynchronously sent from a page back to a server for logging purposes.

Drew McLellan

On CSS Standards and CSS Exclusions — Front-end developers share some responsibility in getting new Web features implemented, if only by using and trying newer (and potentially buggy) features as they appear in clients. CSS Exclusions, as covered here, is one such example.

Chen Hui Jing

? Jobs

Frontend Developer at X-Team (Remote) — We help our developers keep learning and growing every day. Unleash your potential. Work from anywhere. Join X-Team.


Find A FrontEnd Job Through Vettery — Create a profile to connect with 4,000+ companies seeking top tech talent.


? Tutorials

Creating Animated Radial Progress Bars with SVG, CSS & Vue.js

Nathan Cockerill

Making Legacy Sites More Performant with Modern Frontend Techniques — How to use developer tools to identify and fix frontend performance bottlenecks on your legacy sites.

Mike Herchel

Five Steps to Speed Up Your Image Heavy Website

Brandon Morelli

?  Learn How to Use CodePen with One Of Its Co-Founders — A 20 minute guide to productively using CodePen, the online HTML/JS/CSS code editor and playground.

Chris Coyier

Speed Up Alignment in CSS with Flexbox Utility Classes

Sebastiano Guerriero

Online & Evening M.S. in Software Engineering. 3 Specializations Available — Advanced understanding of Java™, C# and Swift, JavaScript, HTML, and CSS. Web, Java or mobile software specializations.

Regis University sponsor

?  Two User Experience Psychology and Performance Videos — Smashing Magazine have shared two videos from their recent conference, one with Ilya Grigorik talking about UX on the Web, and the other about the role of psychology in UX.

Smashing Magazine

Sometimes the ‘sizes’ Attribute is Quite Important — Some tips on being more efficient with your responsive images.

Chris Coyier

What You Need To Know When Converting a Flash Game to HTML5 — If you’re still needing to covert an old Flash game over to work in the new frontend environment (anyone?), here are some tips.

Tomasz Grajewski

Using SSE Instead Of WebSockets For Unidirectional Data Flow Over HTTP/2

Martin Chaov

? Code and Tools

CSS Duotone Generator — Bring in an image, apply effects, and then generate the HTML and CSS you need to reproduce it on a page.

Rick Metzger

Developer Tools for Every Customer Session – New in FullStory

Fullstory sponsor

Between.js: Lightweight JavaScript Tweening LibraryDemos here.

Alexander Buzin

FormStorage: Keep Form Data Stored Locally After Submission


Epic Spinners — A collection of customizable, easy to use animated spinners, available as Vue components.


Source link