The Trick to Viewport Units on Mobile

#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. x-team Find A FrontEnd Job Through Vettery — Create a profile to connect with 4,000+ companies seeking top tech talent. Vettery 📘 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 Library — Demos here. Alexander Buzin FormStorage: Keep Form Data Stored Locally After Submission steelydylan Epic Spinners — A collection of customizable, easy to use animated spinners, available as Vue components. Epicmax

by via Frontend Focus