May 9, 2018 #339 — May 9, 2018Read on the WebFrontend FocusNew 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 LiewContainer-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 sponsorlayerJS: 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 AshtonCreating Responsive Layouts & Components with CSS Grid — “Let’s make a photo gallery responsive quickly …using very few lines of CSS.”Rafaela FerroInspecting 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 RendleWelcome 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? JobsFront-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 LevitySoftware 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.OnfidoFront-End Expert? Sign Up for Vettery — Top companies use Vettery to find the best tech talent. Create your profile to get started.Vettery? TutorialsA Deep Dive into the Bootstrap Form ComponentIlya Bodrov-KrukowskiDecorating 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 SamExtracting 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 sponsorA 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.AlligatorHTML5’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 LazarisThe Relative Units of CSS: em, rem, vw, vh, ex, and chAdam LakiAn Intro to CSS 3D TransformsDavid DeSandroCheat Sheet: Functional Programming with JavaScriptProgress Kendo UI sponsor5 Basic Console Tips to Debug Webapps with Chrome DevToolsMailen Mancuso? Code and ToolsIntroducing Elmstatic: An Elm-to-HTML Static Site GeneratorAlex S. Korban tutorialSelection: 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 ReinischAnnouncing 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 SzablewskiThemify: CSS Theming Made Easy — A PostCSS plugin for generating site themes during build.datoramaLinux Cloud Hosting Starting at 1GB of RAM for $5/moLinode Cloud Hosting sponsorResponsive Type: A One-Size-Fits-All SCSS Type SolutionKyle VilleneuveParticle Effects for Buttons — Disintegrate elements into particles to make them disappear (or vice versa).Luis ManuelIdeas for Proximity Feedback with Progressive Hover Effects — Experimenting with hover effects that trigger when an element is approached.Team Codrops Source link