April 3, 2020 #432 — March 18, 2020Read on the WebFrontend Focus ‘CSS X’ — The CSS Versioning Debate — Remember the recent debate around CSS versioning and whether we should have a ‘CSS 4’ for marketing reasons? Here’s a good account from the W3C of just how CSS feature releases have worked up until this point. This piece also asks about the motives behind defining CSS versions for developers: How would it be defined in a useful way? How often should a new version be defined? And who could even define it?Bert Bos (W3C)16 Things to Improve Your Website Accessibility — Ensuring your sites are equally available to all is irrefutably the moral and right-minded approach to development (and it’s increasingly also a legal requirement too). Here, Bruce runs through over a dozen accessibility matters that you can address including technical, design and copywriting issues.Bruce Lawson Check-Off Implementing Checkout with Square — Easily start taking payments from your site with Square’s secure & customizable payments form. Get started today.Square sponsorA Complete Guide to calc() in CSS — CSS has a special calc() function for doing basic math — here, Chris Coyier runs through “just about everything there is to know” about it. A detailed guide with plenty of code snippet examples.CSS Tricks? The CSS Podcast — 001: The Box Model — A new podcast from the Chrome Developers team all about CSS. In the first episode Una Kravets and Adam Argyle discuss the CSS box model.Google podcastHappy 31st Birthday, World Wide Web — The web turned 31 last week, a good reason to revisit Tim Berners-Lee’s original proposal for the Web.Coralie Mercier“The goal of the Web is to serve humanity. We build it now so that those who come to it later will be able to create things that we cannot ourselves imagine.” Sir Tim Berners Lee, computer scientist and inventor of the World Wide Web.? JobsFind a Dev Job Through Vettery — Vettery is completely free for job seekers. Make a profile, name your salary, and connect with hiring managers from top employers.VetteryUX/Frontend Engineer @ Siteline — Join the founding engineering team at Siteline and help us revolutionize the payments process for construction.Siteline?? Interested in running a job listing in Frontend Focus? There’s more info here.? News, Tutorials & OpinionCSS :nth-of-class Selector — This isn’t a real selector, but Bram Van Damme looks at some possible shortcomings with nth-child, leading to the conclusion that maybe we do need something like :nth-of-class.Bram Van DammeNew Media Queries You Need to Know — A look through some of the most interesting new media queries in the Media Query Level 5 spec, and how to use them.Kristofer SelbekkLearning CSS Box Alignment — A comprehensive look at concepts in box alignment in CSS, which are useful for learning both Flexbox and Grid.Ahmad ShadeedThe Problem with ‘Snackbars’ and What to Use Instead — Snackbars (those little ‘toast’ notification messages) are a popular way to inform users about something they just did, but Adam thinks they can cause lots of problems for users. Here he explains why that is and what to use instead.Adam SilverAnimate CSS and SVGs with AnimeJS — AnimeJS is a JavaScript animation library with various features like SVG morphing animations and CSS animations. Here’s a look at how to use it.Developer BaconHow to Use CSS Scroll Snap — A straightforward tutorial showing how to add a scroll to your page without having to rely on JavaScript libraries.Nada RifkiRegister for the Free ForwardJS May 2020 LivestreamForwardJS sponsorBuilding a Node.js Tool to Compare Google Lighthouse ReportsLuke HarrisonHere’s How HTML Microdata Helps With AccessibilityScott Vinkle ? Upcoming EventsDemystifying PWAs, March 25 — Webinar — In this free online session Lee Warrick will offer an introduction to PWAs and show you what you need to know to start building one.PerfMatters, March 31 – April 1 — Online — A web performance conference, which has now moved to be a virtual event, with a focus on frontend web performance with talks by internationally renowned performance developers.FrontCon, April 1-3 — Riga, Latvia — This event has been postponed until further notice due to the Coronavirus outbreak.Frontend United, April 30 – May 2 — Minsk, Belarus — This event has been cancelled due to the Coronavirus outbreak.You Gotta Love Frontend Conference, May 14-15 August 27-28 — Vilnius, Lithuania — Described as having “big names with irresistible talks and a whole lot of fun”. This event has been postponed, and will now take place in late August.? Code, Tools and Resources Pure CSS Landscape — ‘An Evening in Southwold’ — This is quite the achievement in realistic CSS art — and you can tweak it. Open up the editor view and alter the color of the sun for your very own personalised sunset.Ben EvansImagine Enjoying PM Software — Clubhouse is fast, delightful, intuitive, and other good adjectives. We’re biased, but we think you should try it.Clubhouse.io sponsorA List of Web Performance Testing Tools — If you need to identify performance issues with your site this list of tools is a good place to start.Shawn WangIconset: A Fast SVG Icon Organizer — This is a smart looking native Mac/Windows app to collect, customize, and manage all your icons.Iconset Creativebroider: Draw Your Own Repeating Border — A browser-based tool for making “9-patch” border patterns. Chris Coyier has done an accompanying write up on this.Max BittkerWeb Font of the WeekIBM PlexThis typeface from IBM presents a neutral and friendly style across the entire family (made up of a Sans, Sans Condensed, Mono, and Serif variants). The Mono is well suited to displaying code snippets. Source link