#339 — May 9, 2018 |
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 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 Alligator |
HTML5's Global 'hidden' Attribute — Louis Lazaris |
The Relative Units of CSS: em, rem, vw, vh, ex, and ch Adam Laki |
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 |