Frameworks Helping Image Usage
I recently blogged about how images are hard and it ended up being a big ol’ checklist of things that you could/should think about and implement when placing images on websites. I think it’s encouraging to see frameworks — these beloved tools that we leverage to help us build websites — offering additional tools within them to help tackle this checklist and take on the hard (but perfectly suited for computers) tasks of displaying images. Some exampl..
Read more- 0 Comment
Improve Largest Contentful Paint (LCP) on Your Website With Ease
(This is a sponsored post.) Optimizing the user experience you offer on your website is essential for the success of any online business. Google does use different user experience-related metrics to rank web pages for SEO and has continued to provide multiple tools to measure and improve web performance. In its recent attempt to simplify the measurement and understanding of what qualifies as a good user experience, Google standardized the page’s user experience metrics. ..
Read more- 0 Comment
Mars Theme: A Deep Look at Frontity’s Headless WordPress Theme
This post was in progress before Automattic acquired Frontity and its entire team. According to Frontity’s founders, the framework will be transitioned into a community-led project and leave the project in “a stable, bug-free position” with documentation and features. Like other open-source community projects, Frontity will remain free as it has been, with opportunities to contribute to the project and make it an even better framework for decoupled WordPress. More deta..
Read more- 0 Comment
Don’t attach tooltips to document.body
Here’s Atif Afzal on using a <div> that is permanently on the page where tooltips are added/removed and how they perform vastly better than plopping those same tooltips right into the <body>. It’s not really discussed, but the reason you put them that high-up in the DOM is so you can absolutely position them exactly where you need to on the page without having to deal with hidden overflow or relative parents and the like. To my amazement, just having a ..
Read more- 0 Comment
The Story Behind TryShape, a Showcase for the CSS clip-path property
I love shapes, especially colorful ones! Shapes on websites are in the same category of helpfulness as background colors, images, banners, section separators, artwork, and many more: they can help us understand context and inform our actions through affordances. A few months back, I built an application to engage my 7-year old daughter with mathematics. Apart from basic addition and subtraction, my aim was to present questions using shapes. That’s when I got familiar wit..
Read more- 0 Comment
Can we have custom media queries, please?
Stefan Judis notes that there is a spec for custom media queries, but seemingly no momentum on it at the moment. That lack of movement is unfortunate, as it’s almost guaranteed front-end developers all over would start using it as soon as it’s ready. I know I would, as I liberally use custom properties now, and the DRYness of custom properties is one of the exact same benefits we’d get with custom media queries. The syntax is: @custom-media --narrow-window (m..
Read more- 0 Comment
Fire SVG animations (SMIL) when the SVG is visible
When requirements read “when visible” your brain should go straight to IntersectionObserver. That’s exactly what Zach is doing here to kick off an animation when it scrolls into view. Except this animation is an SVG SMIL animation: an <animate> situation. SMIL animations have some kinda cool things they can do, like begin when another animation ends, which is something CSS doesn’t help with that much. Turns out SMIL has a JavaScript API as well, so it’s pos..
Read more- 0 Comment
Building Your Own Subscription Newsletter
(This is a sponsored post.) I did a sponsored video the other week explaining how to build a paid subscription newsletter using WordPress (we did it on WordPress.com but it could be hosted anywhere), MailPoet (a plugin to visually author the emails, as well as send them), and WooCommerce (to manage the payments and subscriptions). I published the video here and there is a landing page for the whole concept here. I spent a lot of time on it! I feel personally compelled..
Read more- 0 Comment
Firefox’s `bolder` Default is a Problem for Variable Fonts
Variable fonts make it easy to create a large set of font styles from a single font file. Unfortunately, the default rendering of the <b> and <strong> elements in browsers today is not very compatible with the wide range of font-weight values enabled by variable fonts. Unexpected: in Firefox the HTML element `b` has a user agent style of `font-weight: bolder` and Chrome/Safari/Edge all use `font-weight: bold`.Noticed with `<div style="font-weight: 700"&..
Read more- 0 Comment
Early Days for CSS Scoping
There is a working draft spec for CSS scoping now, a newsworthy event for the W3C. Other than a weird period where <style scoped> shipped and then was subsequently removed from the spec (and browsers), this is the furthest a scoping proposal has gotten (the Level 1 spec never got anywhere). This one comes from Miriam Suzanne. The basics: <div class="media"> <img alt="Proper alt." src="..."> <div class="content"> <p>...</p>..
Read more- 0 Comment