A rather geeky/technical weblog, est. 2001, by Bramus
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(); …
Continue reading “Rendering Markdown using Custom Elements v1”
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 …
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 →
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) →
The future is happening: The island of Ta’u in American Samoa, located more than 4,000 miles from the West Coast of the United States, now hosts a solar power and battery storage-enabled microgrid that can supply nearly 100 percent of the island’s power needs from renewable energy. This provides a cost-saving alternative to diesel, removing …
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 →
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”