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 …

Blueprint React UI Toolkit

Blueprint is a collection of React UI components, covering the majority of the common interface elements, patterns and interactions on the web. Using Blueprint ensures that you’ll end up with an elegant, easy-to-use UI, freeing you to focus on building your product—not the atomic pieces that comprise it. The UI components really are well written …

Rendering Markdown using Custom Elements v1

Inspired upon a v0 implementation, I’ve recreated a Markdown renderer in Custom Elements v1. The result is <custom-markdown>. The code itself is pretty straightforward: other than some (contained) styling the custom element uses showdown to convert the Markdown to HTML. This conversion is triggered in the connectedCallback(). class Markdown extends HTMLElement { constructor() { super(); …

(Laravel) Uptime Monitor

Today Freek from spatie released a new package: Laravel-uptime-monitor is a powerful, easy to configure uptime monitor. It will notify you when your site is down (and when it comes back up). You can also be notified a few days before an SSL certificate on one of your sites expires. Under the hood, the package …