Mixed Content and Responsive Images

Interesting issue Jonathan Snook ran into when switching a site over to HTTPS. Even though images from HTTP resources should still get loaded by the browser (as they are Passive Mixed Content, and thus tolerated), they weren’t: After some digging, I noticed that the images that weren’t loading were those defined using the <picture> element. …

A checklist for all projects that are going live

The folks over at Spatie have open sourced the checklist they run each site/project through before hitting the “Go Live” switch. This kind of stuff should be open sourced more often. The list is a good starting point to creating your own list, but of course your mileage may vary depending on the type of …

Mood boards in a content-first design process

Thomas Byttebier, who has been taking a content first approach, wondered if he could design something visual to present to their clients alongside the content prototype: Do we really need to finish all content before researching the project’s visual vocabulary? It’s a tricky question of course. At first I believed it to be impossible even. …

Does Google execute JavaScript?

Stephan Boyer created a website with some JS injected content and waited for Google to crawl it. It got indexed, but without JS execution. Only after having submitted the site manually via the Google Search Console it got indexed with JS executed. His conclusion: Google may or may not decide to run your JavaScript, and …

10 things I learned making the fastest site in the world

Great writeup by David Gilbertson on creating this super fast loading website. Try not to make a slow site Do mobile first. Like, really do it. Be a benchmark hussy Client Side Rendering is expensive Don’t server-render HTML Inline stuff, probably Preload, then load Reward good behaviour Service workers: like me in high school (cool …

Text-wrapping, hyphenation, emojis and what not

Earlier today I ran some tests to see how text-wrapping/hyphenation of long uninterrupted strings works in browsers. I tested both “normal” strings and strings of emojis. The tests (and its rendering results per browser) are stored on Codepen and embedded below: 💩 and ⚠️ behave differently (click to enlarge): These tests left me with some …

From Pages to Patterns

Video of Charlotte Jackson’s talk at Beyond Tellerrand on how to adopt pattern thinking to developing a pattern library/styleguide: This talk will look at how we can help everyone in the team adopt pattern thinking. This includes anyone with a decision to make—not just designers and developers. The whole team can start developing a shared …

Minimize FOUT with Font Style Matcher

Great tool by Monica Dinculescu (@notwaldorf): If you’re using a web font, you’re bound to see a flash of unstyled text (or FOUC), between the initial render of your websafe font and the webfont that you’ve chosen. This usually results in a jarring shift in layout, due to sizing discrepancies between the two fonts. To …

Web Components: Introducing Custom Elements

One of the new features in Safari Technology Preview 18 is Custom Elements v1 (Chrome/Opera already support for it): To define a custom element, simply invoke customElements.define with a new local name of the element and a subclass of HTMLElement. Example Code: class CustomProgressBar extends HTMLElement { constructor() { super(); const shadowRoot = this.attachShadow({mode: 'closed'}); …