Frontend Focus Issue 527: February 2, 2022
source link: https://frontendfoc.us/issues/527
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 527
Frontend Focus
#527 — February 2, 2022 | Read on the web
Push Notifications, WebXR, and Better PWA Support Coming to iOS — Notable changes to the web platform on iOS are on the way, including icon support in the manifest, Web Push, AR, and VR experiments — as Max explains in excellent detail here. Tangentially, here's Apple’s release notes for the latest Safari beta.
Maximiliano Firtman
Memory Leaks: The Forgotten Side of Web Performance — An even-handed take on the importance of memory leaks, even though the “effort-to-payoff ratio” is often seen as “disappointingly high”.
Nolan Lawson
Take Part in the Biggest Research Survey for Frontend Devs — The State of Frontend 2022 survey is here for you to power through some exciting questions. Help the frontend community see the big picture - we got 4500 participants in 2020, so let’s make this bigger.
The Software House sponsor
What Web Frameworks Solve and How To Do Without Them — Dives deep into a few technical features that are common across frameworks, and explains how some of the different frameworks implement them and what they cost.
Noam Rosenthal
A Complete Beginner's Guide to npm
— A nine-part guide from CSS Tricks covering everything from the ground up. If you’re a long time JavaScript developer, npm
may be second nature, but nonetheless this guide to npm
may prove useful, if only to share with folks on your team.
Josh Collinsworth
⚡️ Quick bits:
- WordPress version 5.9 is out now — here's a look at what's new.
- Rachel Andrew looks at some of the interesting features that have landed in stable and beta web browsers during the last month.
- A state court in Germany has ruled that using Google Fonts on your site breaches GDPR.
- Talking of GDPR, a particular variant of those 'consent popups' that many web users will be familar with have been deemed illegal.
- The latest version of Bootstrap's popular icon library is out now, including over 140 new icons. This brings the collection up to nearly 1,700 icons.
- Firefox suffered an outage last month, here's a retrospective digging into the technical details of what happened.
- This Web Content Accessibility Guidelines checklist is well worth bookmarking and referencing for your WCAG compliance efforts.
- Did you know Google rewrite a surprising amount of page titles for their results pages?
📙 Tutorials, Articles & Opinion
▶ How Does !important
Actually Work? (It's Not What You Think) — CSS !important
does more than just increase the important of a style rule, it inverts the CSS cascade — as explained in this 8-minute video.
Una Kravets
The Baseline for Web Development in 2022? — Analysis of numerous stats around frontend technologies, browser share, and more to establish a feel for what the lowest common denominators are in terms of what we must support.
Alan Dávalos
Visualize Real-Time Data with InfluxDB — How to use the React-based Giraffe visualization library to gain meaningful insights from streaming data.
InfluxData sponsor
WebAssembly Feature Detection — A look at how to use the newest WebAssembly features while supporting users across all browsers. In this related piece, Harshal Sheth talks about how the tech is now at an "inflection point" — with adoption expected to balloon over the next few years.
Ingvar Stepanyan
Use Cases For CSS fit-content
— A short article on some of Ahmad’s favorite use-cases of CSS fit-content
.
Ahmad Shadeed
Background Shift Animation with CSS Blend Modes — Here’s how to achieve a neat background color shift transition effect using CSS Blend Modes and a multi-layer animation. Demo here.
Mary Lou
Fluid Type Sizes and Spacing — Developer Piper shares why they use a fluid type and spacing system and how you may want to approach a similar type set up.
Piper Haywood
How to Keep Up with Web Development Without Falling Into Despair
Baldur Bjarnason
'Most Websites Are Implicitly Designed with A Short Lifetime'
Chris Siebenmann
Six Things to Consider Before Changing Fonts on a Site
Oliver Schöndorfer
Software Engineers (Frontend, Backend, Fullstack, DevOps) — Bird Eats Bug combines screen recording with technical logs. Join us to help more engineers debug 30% faster (on average).
Bird Eats Bug
Senior JavaScript Engineer — Join our dev team and help develop, test, document and maintain our JS driven web applications.
Civey
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
🧑💻 Looking to share your job listing in Frontend Focus? There's more info here.
🔧 Code, Tools & Resources
OpenMoji: Open Source Emojis for Designers and Developers — Currently includes ~4,000 handcrafted emojis that all follow a consistent style, searchable by keyword or category.
OpenMoji
Gradient Generator: Create CSS, SVG and PNG Color Gradients — Gradient generators are a dime-a-dozen, but this one has some useful features: Includes conic gradients, gradient layering, and automatically adds colors to prevent loss of saturation.
Doodad
Doppler - All Your Environment Variables in One Place
Doppler sponsor
Open Props: Supercharged CSS Variables — These are essentially small plug-and-play components made up of predefined CSS variables that you can use to build your own design systems, components, or use alongside other frameworks.
Adam Argyle
Runno: A Browser-Based Code Runner That Can Be Embedded As An IFrame or Used as a Library — The browser-based version, which is similar to tools like JSFiddle and CodePen, includes runtimes for JS, Python, SQL, C, and C++.
Ben Taylor
Announcing PWA Studio, The VS Code Extension for Building Progressive Web Apps
Justin Willis
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK