April 24, 2019 #388 — April 24, 2019Read on the Web? Frontend Focus Optimizing Frontend Performance with Resource Hints — Resource Hints are a simple and effective way for devs to help the browser stay one step ahead of the user and keep pages fast. Here’s a look at how to optimize your site with such techniques. (Harry Roberts recently shared this related slidedeck.)Drew MCreating an Aspect Ratio CSS Utility — As the native aspect-ratio unit isn’t quite ready yet, here’s a ‘handy little CSS algorithm’ to use for figuring out a controlled height based on a container’s width.Andy Bell Get the Fastest Website Deployments. Get Started Free — Unlike most Continuous Integration (CI) solutions, Buddy only re-builds the parts of your application that have changed and deploys your updates in seconds to any cloud. Start building better React apps faster with Buddy.Buddy sponsorInclusively Hidden — A detailed look at the various ways in which you can hide content, with a particular focus on keeping things accessible.Scott O’HaraHertz Suing for $32M over a Site ‘Redesign From Hell’ — “Among the most mind-boggling allegations in Hertz’s filed complaint is that Accenture didn’t incorporate a responsive design..” What sort of Web design could you put together for $32M? 🙂The Register? NEWS SNIPPETSThe first public draft of the CSS Spatial Navigation Level 1 spec has been published. It defines a model for navigating focus using arrow keys.Google’s encrypted version of Chrome has caused concern with internet safety watchdogs and intelligence agencies.Iconic typeface Helvetica has gotten a makeover after 36 years. It’s called Helvetica Now.Here’s what changes you can expect to see to DevTools in Chrome 75.? JobsFrontend Developer at X-Team (Remote) — Join the most energizing community for developers. Work from anywhere with the world’s leading brands.X-TeamHave You Tried Vettery? — Vettery specializes in tech roles and is completely free for job seekers. Create a profile to get started.Vettery? Tutorials & OpinionWhy We Focus On Frontend Performance — Performance is “an integral part of the service” offered by the UK government website. Here’s a look at both the why and how behind their optimisation process.Matt HobbsControlling Leftover Grid Items with pseudo-selectors — How you may want to deal with leftover grid ‘widow’ items that don’t fill an entire row.Michelle BarkerA Much Faster Way to Debug Code Than with Breakpoints or console.log — Wallaby catches errors in your tests and code and displays them right in your editor as you type, making your development feedback loop more productive.Wallaby.js sponsorUnderstanding WebViews — A good overview of what a WebView is (essentially a native component that lets you render Web-based content within another app), what they’re used for and some of their limitations.Kirupa ChinnathambiAnimation Performance 101: Measuring with Dev Tools — How to analyze animation performance in the browser with Chrome Dev Tools.Chloe HwangDiagonal Containers in CSS — How to create full-width, diagonal sections in CSS using the clip-path property.Sebastiano GuerrieroFading Out Siblings On Hover in CSS — A tiny trick for making your hover states stand out.Trys MudfordStudio 3T Makes SQL Migration to MongoDB, Powerfully SimpleStudio 3T sponsorHow to Inline An SVG File in HTML, Declaratively & AsynchronouslyScott JehlImplementing A Pin-to-Bottom Scrolling Element with Only CSSRyan Hunt? Code and Tools React95: Windows 95-Style UI Components for React — The Windows 95 era UI continues to be held up as one of Windows’ finest moments, so… why not 😉Artur Bie?Color Accessibility: Tools and Resources to Help You Design Inclusive ProductsStéphanie WalterDesign, Build, Debug and Test Your Web Apps Faster with Ext JSSENCHA, INC sponsorA Simple Popover Card View — ..with media content. Created using CSS and JavaScript.Mert CukurenOverlayScrollbars: A JavaScript Scrollbar Plugin That Replaces Native Scrollbars — Gives you the opportunity to provides custom styleable overlay scrollbars while keeping a native functionality and feel.Rene HaasCan I Stop? A Tool to Help You Decide If You Can Drop IE 11 Support In Different RegionsMehdi M ? Upcoming Events Munich Frontend Conference FrontConf, April 27 – Munich, Germany — International conference focused on frontend concepts and technologies.IMAGECON, May 1–2 – San Francisco — A two-day conference with a dozen workshops and seven speakers focused on all things images on the web.CityJS Conference, May 3 — London, UK — Meet local and international speakers and share your experiences with modern JavaScript development.Frontend United, May 16-18 — Utrecht, Netherlands — A yearly, non-profit, developer-first, community-focused conference.Front Utah 2019, June 6-7 — Salt Lake City — Two days of learning better ways to work together with your team and be inspired to grow your career in UX or Product Management.DEVit, June 9-10 — Thessaloniki, GreeceCSS Day, June 13-14 — Amsterdam, Netherlands — Features eight world-class sessions by eight world-class speakers about curious, ‘badly-known’, or otherwise interesting CSS features.CSSCamp 2019, July 17 — Barcelona, Spain — A one-day, one-track conference for web designers and developers. Source link