How bloated is your site?
source link: https://frontendfoc.us/issues/533
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 533
Frontend Focus
🇺🇦 #533 — March 16, 2022 | Read on the web
New WebKit Features in Safari 15.4 — This is a big release from the Safari team, with support for several new web technologies, along with plenty of updates, and fixes. Expect details on lazy-loading, <dialog>
, :has()
, Cascade Layers, viewport units, focus-visible
, accent-color
, and much more.
Jen Simmons & Jon Davis (WebKit)
Ten Years of Page Bloat: What Have We Learned? — Just how big are pages today versus a decade ago? How does page bloat hurt your business? How does it affect Google’s Core Web Vitals? What can you do to fight it? This well-rounded post digs into all this (with plenty of visuals to help things along).
Tammy Everts
Streamline and Evolve Your Workflows With Shortcut — All of your development work easily flows through Shortcut, from coding to review to release, and then to the bugs and the fixes that inevitably follow. Try project management for today's (and tomorrow's) software team.
Shortcut (formerly Clubhouse.io) sponsor
'When' or 'If': A CSS Naming Debate — The CSS Working Group is currently considering a generic conditional/fallback structure (for things such @supports
and @media
) and is currently at something of a loggerheads over what, specifically, to name it. Eric outlines here how it’s a thornier issue than you might expect.
Eric Meyer
WebGPU — All of the Cores, None of the Canvas — The WebGPU is an upcoming Web API that exposes a lot of capabilities of the client's GPU hardware. This post digs into how things work in excellent detail — now, there’s a bit of learning curve to all this, but Surma sets out to make it accessible, explaining how the API will prove beneficial to us.. one day!
Surma
⚡️ Quick bits:
- Here's a look at what's new in DevTools for Chrome 100, including the ability to view/edit
@supports
rules. -
Firefox 98 is out, and here are the developer specific release notes. Say hello to
<dialog>
! - CSS Tricks, a site we've linked to perhaps 2 squillion times so far (and yes, that is a real unit), has been accquired by DigitalOcean. Our congraulations to Chris Coyier and the team.
- Version 8.1 of developer browser Polypane is now available adding a new 'disable JS' debugging tool, a dimmed screen simulator, and perf fixes.
- The U.S. has announced plans to make Daylight Savings Time permanent. This Twitter thread digs into some of the possible considerations for developers and programmers.
- The American Council of the Blind, along with 180 other disability organizations, have signed a joint letter to the U.S. Department of Justice seeking enforceable online accessibility standards and digital regulations.
📙 Tutorials, Articles & Opinion
Aligning Content In Different Wrappers — A look at how to align content with another section, across all viewport sizes, given that they are placed in different wrappers.
Ahmad Shadeed
▶ Building VR and AR Experiences using HTML — Ada Rose Cannon from Samsung Internet chats with Jake Archibald of the Chrome team about VR & AR web standards, and how you can build immersive experiences using markup.
Google Chrome Developers
Making the 'World’s Fastest Website', and Other Mistakes — An insightful look into some real-world performance considerations for a popular ecommerce site.
Taylor Hunt
How to Use Rustlang’s Async Tokio for CPU-Heavy Jobs — Yes, you can use Tokio for heavy data processing tasks — see how.
InfluxData sponsor
▶ Create a Stunning 'Glassmorphism' Effect in CSS — A 15-minute step-by-step guide to creating immersive background effects using the backdrop-filter
and background-clip
CSS properties.
Zoran Jambor
Don’t Alienate Your User: A Primer for Internationalization & Localization — A look at how i18n and l10n can help you serve a wider audience: “The web should be an inclusive place for anyone.”
Sophie Clifton-Tucker
▶ Who Says HTML and CSS Aren't Real Programming? — Among other topics (including security, skills training), this half-hour episode touches upon how sites like MySpace, Tumblr, and the GeoCities of the world introduced an entire generation to coding. There's a transcript here if you'd prefer.
The Stack Overflow Podcast podcast
Animation Performance Fundamentals: How to Make Your Pages Look Smooth
Reza Lavarian
How Much CO2 Does Creating a 1,000-Word Piece of Content Cause? — Also how much wood would a woodchuck chuck if a woodchuck could chuck wood?
Gerry McGovern
How Many Hyperlinks Are Too Many for Accessibility?
Bureau of Internet Accessibility
Fullstack Engineer (Remote, EU Timezones) — We’ve built a product thousands of people love (See Trustpilot if you don’t believe us). We need your help with Node & TypeScript.
Feather
Senior Front-End Developer (Remote) — Get featured directly to tech companies hiring Frontend developers right now. Land an interview in as little as 24 hrs.
Arc
Join the Remote Work Revolution — We offer the freedom of freelance with the security of full-time. Start working remotely with the world’s top clients today.
Toptal
🔧 Code, Tools & Resources
Fluent Icons: 4000+ Modern Open-Source Icons from Microsoft — This project is not affiliated with Microsoft, but it’s a searchable website where you can find and download Microsoft’s icons in various formats (PNG, SVG, etc).
Fayaz Ahmed
SingleFile: Browser Extension and CLI Tool to Save a Complete Page as a Single HTML File — Uses the WebExtensions API, so this is compatible with all the major modern browsers.
gildas lormeau
Buildkite sponsor
HTMLShell: A Visual HTML Template Editor — We’ve seen lots of tools like this before, but this one has quite a few options to include various meta tags, stylesheets, analytics, and more — all easily toggled on or off.
toptal
Nextacular: Open-Source Starter Kit to Quickly Launch Multi-Tenant SaaS Apps
Arjay Osma
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK