Frontend Focus Issue 519: December 1, 2021
source link: https://frontendfoc.us/issues/519
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Frontend Focus Issue 519
Frontend Focus
#519 — December 1, 2021 | Read on the web
Creating Generative Patterns with the CSS Paint API — A detailed look at how to use the Paint API to create three generative patterns that could be used to add a touch of character to a range of websites/apps. The results here are rather lovely.
George Francis
Videos From the 'State of the Browser 2021' Event — All of the videos from last week’s State of the Browser event are now online, including Rachel Andrew’s talk on how CSS has evolved and what’s coming next.
London Web Standards
Put the “Flow” in Your Workflows with Shortcut — Whether you're a startup that iterates quickly by giving engineers a free pallet of Red Bull, or a large org that has strict ship dates to hit, Shortcut is the ideal solution for task management, bug tracking, iteration planning, and reporting.
Shortcut sponsor
Modern CSS in a Nutshell — If you (or someone you know) are feeling a bit out of touch with modern CSS development then this is brief, high-level overview of the current state of CSS is worth checking. You may be surprised at how much you can now do with vanilla CSS.
Scott Vandehey
What's New in DevTools in Chrome 97 — This update (now in Canary) has a new Recorder panel in which you can record, replay and audit user flows, the ability to refresh the device list in Device Mode, Autocomplete during Edit as HTML, and more.
Chrome Developers
⚡️ Quick bits:
- It's December 1st - so here's a HTML themed calendar for you to open.
- Fancy flexing your CSS muscle? Advent of CSS is a series of CSS challenges for the season.
- Here are the results from the 2021 Design Tools Survey.
- This straightforward site debunks common accessibility myths.
📙 Tutorials, Articles & Opinion
A Handy Little System for Animated Entrances in CSS — Neale has created a set of CSS utilities for animating elements as they enter into view. This post explains how the animations work, and how to apply them whilst respecting user preferences.
Neale Van Fleet
▶ Bringing Bounce and Elastic Easing to CSS — Animating with CSS is neat, but achieving a bouncing or elastic easings effect isn’t easy. In this video Jake and Surma look at a new proposal that allows you to define all kinds of easings.
Google Chrome Developers
Switching from Interaction Design Tools to SwiftUI — Learn interaction prototyping and up your skills with SwiftUI, Apple’s declarative approach for building interfaces.
Stream sponsor
▶ Smashing Podcast: Is The Web Dead? — Obviously not, but have changes to best practises negatively impacted the web? Drew McLellan talks to expert Chris Ferdinandi to try and find out.
Drew McLellan podcast
'Firefox is the Only Alternative' — “As it stands today we have a browser duopoly (Chrome and Safari) and pretty much a monopoly outside of Apple’s walled garden”.
Bozhidar Batsov opinion
When Is It “Right” to Reach for contain
and will-change
in CSS?
Chris Coyier
94% of the Largest E-Commerce Sites Are Not Accessibility Compliant
Alex Krzyminski
Senior Software Engineer (Frontend, Remote) — We’re hiring a software engineer to join our team working on PSPDFKit for Web. We are building a modern PDF SDK with technologies like React, TypeScript, and WebAssembly.
PSPDFKit
Frontend Developer at X-Team (Remote) — Join the most energizing community for developers and work on long-term projects for Riot Games, FOX, Sony, Coinbase, and more.
X-Team
Find Frontend Engineering Jobs with Hired — Create a profile on Hired to connect with hiring managers at growing startups and Fortune 500 companies. It's free for job-seekers.
Hired
🔧 Code, Tools and Resources
Project Wallace: An Online CSS Analyzer — The main product isn’t free, but this CSS analyzer is free to use. Just enter a URL and this tool will show you various stats on the page’s CSS (lines, selectors, declarations, complexity, etc).
Bart Veneman
▶ Three Awesome Tools for a Better Front-End Dev Experience — Kevin takes a look at tools out there to make your developer life a little bit easier.
Kevin Powell
Want to Transfer a Domain with No Downtime? 👀 Our Handy Checklist 👉
DNSimple sponsor
30 Seconds of Knowledge: A Chrome Extension That Shows Programming Tips on Your New Tab Page
Stefan Petrovic
Tiny UI Toggle: A JS/CSS Utility to Build Toggle-able Page Components — See examples here. Lets you build a wide variety of UI components including dropdowns, dialogs, tabs, accordions, and more.
Nigel O Toole
Atmos: Create UI Color Palettes with Ease — Lets you select a palette randomly, by color family, or by “Meaning”, which allows you to select generate the palette from a few category keywords. It's free whilst in beta.
Vojtěch Vidra
Xtend UI: A Library of Tailwind Components Enhanced by Vanilla JavaScript — Sort of like Bootstrap’s interactive components, but for Tailwind. Includes lots of components and themes under various categories, along with React versions of each.
Riccardo Caroli
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK