May 1, 2019 #389 — May 1, 2019Read on the Web? Frontend Focus (Image: CSS Tricks)That Time I Tried Browsing the Web Without CSS — This is very much a ‘what if’ experiment, but Jon explains how the exercise can highlight some accessibility considerations — concluding that “CSS is really a layer of progressive enhancement”.Jon KantnerRevisiting prefers-reduced-motion, The ‘Reduced Motion’ Media Query — Most major desktop browsers (except Edge) now support prefers-reduced-motion, a type of media query that lets you style things differently for users for whom things like elaborate animations, flashing images, or parallax effects may be disruptive.Eric Bailey Design for Developers ? New Course by Sarah Drasner — Become more self-sufficient for the entire process for execution, from concept to design to implementation. Understand the rules for designing and learn to create complex and beautiful front-end experiences.Frontend Masters sponsorDigging Into the display Property: Box Generation — A look at the values for CSS’s display property that control ‘box’ generation and particularly those instances where you don’t want any boxes at all.Rachel AndrewPerceived Velocity through Version Numbers — How version numbering effects technology choices, plus why the author thinks we need HTML6 and CSS4.Dave RupertGoogle Docs Showing Edge Chromium Users ‘Unsupported Browser’ Message? — Our guess is that this is accidental, but the idea of certain (modern) browsers not being supported by mainstream webapps makes many developers bristle.Tom Warren on Twitter? JobsFrontend Developer at X-Team (Remote) — Join the most energizing community for developers. Work from anywhere with the world’s leading brands.X-TeamSenior Web Engineer – Onefootball (Berlin, Germany) — Join our team of engineers and help redesign and/or improve our main website and services to enhance our user experience.OnefootballHave You Tried Vettery? — Vettery specializes in tech roles and is completely free for job seekers. Create a profile to get started.Vettery? Tutorials & Opinion Oh, The Many Ways to Make Triangular Breadcrumb Ribbons — This design element is quite common on multi-step forms and processes. This post goes into rather extreme depth on four ways to produce them.Silvestar Bistrovi?Essential Guide for Web Performance Optimization — This first in a series focuses on optimizations for the “number one cause of bloat on the web” — images.Nick BabichCreate An Animated Scroll Cue — Sites often have a subtle cue at the bottom of a page to hint at scrollable content – here’s how to animate it with CSS to draw attention.CSS AnimationHow I Failed the — Use JavaScript to make links do magical things, sure, but don’t break them altogether.Remy SharpTips for Technical Interviews — Advice on how best to prepare for and survive a technical interview.Harry RobertsHow to Create and Animate Rotated Overlays — Creating an experimental “reveal” element for interesting page transition effects.Mary Lou? Tip of the Weeksupported by Automatically applying a dark mode to your siteIt’s increasingly common for modern operating systems to offer some form of alternative theme, such as switching the appearance of apps and system elements to have a ‘dark’ look.The jury is out on whether this is any easier on the eyes, but while we wait for any conclusion, here’s something you can do to meet a user’s preference.The prefers-color-scheme media query is a new way to deliver specific styling based on a user’s preference, and you can currently use the media query against either light or dark preferences like so: @media (prefers-color-scheme: dark) { body { background: black; color: white; } }This currently only works in the Safari 12.1+ but Firefox support is imminent and a Chrome implementation is in development.Andy Clarke has an excellent practical write-up of how this media query can be put into practice in more elaborate ways.This week’s tip is sponsored by Percy, the all-in-one visual testing platform. Replace manual QA and catch visual UI bugs before your customers do.Get started for free.? Code and Tools Fontanello: See Font Info from Web Pages on the Fly — A browser extension (for Chrome and Firefox) that makes it easy to see the typographic styles of any text in the browser via the context menu. I use this a lot on pages where I like the text.Oktavillasave-page-state: A Chrome Extension to Save The State of A Page for Further Analysis — Provides an image of the viewport, any metadata, and a snapshot of the DOM. Here’s the direct Chrome Web Store link.Wing LeungGet the Fastest Website Deployments. Get Started FreeBuddy sponsorEssential Technical SEO Audit Tools — A detailed resource with info on plenty of in-depth website analysis tools (organised by their primary function).James HubbardGradPad: A CSS Gradient Generator and GalleryOur Own Thing ? Upcoming EventsCityJS 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.Pixel Pioneers, June 7 — Bristol, UK — A one-day conference of practical design and frontend talks, featuring eight speakers (preceded by a workshop day).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.?? Just for fun…Introducing CSSBattle: The First CSS ‘Code-Golfing’ Game — The aim of the game is to replicate an image with the smallest possible amount of CSS (and climb the leaderboards). You can play here.Kushagra Gour Source link