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. …
Tag Archives: webdev
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 …
Continue reading “A checklist for all projects that are going live”
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. …
Continue reading “Mood boards in a content-first design process”
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 …
Continue reading “10 things I learned making the fastest site in the world”
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 …
Continue reading “Text-wrapping, hyphenation, emojis and what not”
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 …
SVG Line Animation for the Uninitiated
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'}); …
Continue reading “Web Components: Introducing Custom Elements”