A rather geeky/technical weblog, est. 2001, by Bramus
Nice one by Trys Mudford: Hover states traditionally run on the element being hovered on (makes sense, right?). But we can also listen for the hover event on the parent element. That’s the crux of this ‘trick’, we fade out all children when the parent is hovered, and attach another hover handler the child, fading …
Fun little experiment that mirrors your webcam into your favicon. Tiny Mirror → 🔥 The aforementioned favico.js (from 2013!) also comes with a “Webcam video to icon” option. Next to mirroring the webcam into your favicon it also supports badges, videos, etc. 🍰 Looking to display (pie)charts in your favicon? Piecon can do that for …
Continue reading “Tiny Mirror – Mirror your Webcam into the Favicon”
A thing I commonly see nowadays are animated lines underneath menus and links: Show Pen One issue with that though: when hovering over an item the animation does not start from the place where you hover, but from a fixed point (here: bottom-center). Try hovering an item from one of its edges and you’ll see: …
Recently the folks from Spatie released a security update for their laravel-query-builder package. Turns out it was vulnerable to SQL Injection. At the core of the vulnerability is the fact that Laravel offers a shorthand for querying only certain fields of JSON data, but that these do not get escaped when converted to a json_extract …
Creating a slidedeck with CSS is not really that difficult. Stack all slides on top of each other, and then make good use of the :target pseudo-class selector: We adjust the z-index for the active slide to be higher than all the other inactive slides with our trusty :target selector. section { height: 100vh; width: …
If your code/project always uses Pull Requests to add/fix stuff in your code (e.g. no direct commits on master), then Changelog Generator will come in handy. It’s a CLI tool (written in PHP) that automatically fetches all closed PRs and Issues between the targetted and the previously tagged release. Installation is possible using Composer: $ …
Next to praising the AV1 Codec and providing conversion examples (using ffmpeg), Andrey Sitnik also gives a good overview on containers and codecs – concepts every web developer who embed video should know imho – in his post on the subject: File extensions for video (.mp4, .wmv, .webm or .mov) barely represent containers. When you …
Editor.js is a so called “block style editor” like the one Medium (and recently WordPress) sport. The Editor.js workspace consists of separate Blocks: paragraphs, headings, images, lists, quotes, etc. Each of them is an independent contenteditable element (or more complex structure) provided by Plugin and united by Editor’s Core. The output is not HTML but …
Continue reading “Editor.js – Next generation block styled editor”
Illustrated.dev holds a collection of awesome illustrations on Web Development by Maggie Appleton: Most of these explainers are about JavaScript fundamentals. Because those never go out of style. But I’ve also made a few on newer tools like React, Babel, and D3. I make these because the front-end world is overflowing with confounding things to …
Continue reading “Illustrated.dev explains web development through illustration”
.full-bleedAbout two years ago I wrote a post on How to Break Elements out of Their Containers in CSS so that they are “full bleed”. Whilst the method which uses CSS Grid still is accurate and works really well (I use it “in production”), the “old” method I used (in case of situations where one …
Continue reading “Breaking Elements out of Their Containers in CSS with .full-bleed“