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 …
Tag Archives: link
Static Site Deployment to S3 using AWS Lambda, SNS and Node
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 …
Human Landscapes of the American Southwest
(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 …
Working with Print Stylesheets
Often forgotten, but no less important: print styles. This post provides a nice summary of some simple things you can do to give your print layout some love. A small collection of useful CSS techniques and a quick reminder that print style sheets are still a thing. I totally forgot about print style sheets →
Google PhotoScan
Don’t just take a picture of a picture. Create enhanced digital scans, with automatic edge detection, perspective correction, and smart rotation. PhotoScan stitches multiple images together to remove glare and improve the quality of your scans. PhotoScan by Google (iOS) →PhotoScan by Google (Android) →
SVG Line Animation for the Uninitiated
CSS pseudo-classes
Great and visual explanation of CSS pseudo-classes such as :only-of-type, :first-of-type, :last-of-type, :nth-of-type(number/an + b/even/odd), … Embedded above is the visual for the selector: a:nth-last-of-type(1) { border: 2px solid black; } How CSS pseudo-classes work, explained with code and lots of diagrams →
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”