Pinned
📣 Today I am incredibly excited to launch SENTINEL, a new service designed to help companies stay on top of site-speed with minimal friction.
Harry Roberts
48.6K posts
Harry Roberts
@csswizardry
🚀 Independent Web Performance Consultant • Speaker • Google Developer Expert, Web Performance • Accepting new clients • harry.is/for-hire
- Just went to a cafe for breakfast. Their menus are brass, laser-etched QR codes bonded to the tables. And they all point to…
- Without the comma, this sounds like a really sinister instruction to rouse some sort of bovine zombie army.
- Want to view a single image on @imgur (literally its only job)? Good luck! You gotta successfully download (354KB) and run (1.21MB) of client-side React in order to get your image requested as resource 110 of 553. What should have been an IMG element became… this.
- Developers: We don’t care about bundle size—users download it once and then it’s cached. Developers: We release 10 times a day.
- Did you know you can link your @googleanalytics data up to your @caniuse account? No more manually cross-referencing or best-guessing browser support for your site—decide based on real data.
00:00 - The simplest way I’ve found (so far) to distill/explain `srcset` and `sizes`:
- br + br { display: none; } Prevent CMS users abusing multiple line breaks for spacing.😳 You can conditionally disable <br> line breaks via CSS media queries:
00:00 - 🖼 If you’re building hero-style content with background images—maybe even through a CMS—you can hugely improve rendering times (LCP) with one additional line of HTML.
- Creates JIRA ticket: Responsive Nav Broken on Print.You’re unable to view this Post because this account owner limits who can view their Posts. Learn more
- When I was becoming a front-end developer ≈10 years ago, knowing `border-radius: 5px;` made you a rockstar. I do not envy today’s beginners.
![img {
max-width: 100%; /* [1] */
height: auto; /* [1] */
vertical-align: middle; /* [2] */
font-style: italic; /* [3] */
background-repeat: no-repeat; /* [4] */
background-size: cover; /* [4] */
shape-margin: 0.75rem; /* [5] */
}](https://pbs.twimg.com/media/F9bvvn-WwAAPwS7.jpg)
