A rather geeky/technical weblog, est. 2001, by Bramus
Text fields are probably one of the most used interface components; contact forms, payment details, account creation, lead generation. Users definitely need to interact with text fields when using your product. The purpose of this post is to highlight some of the key guidelines which I follow when it comes to designing better text fields. …
Using CSS Counters, Josh W Comeau injects his own number in ordered lists. That way he can style the number itself separately. ol li { counter-increment: muffins; } ol li:before { content: counter(muffins) ". "; color: hotpink; } ol { list-style: none; counter-reset: muffins; } Apart from styling, I find this technique come in handy …
The Stack Overflow team walks us through their Dark Mode implementation. Building dark mode on Stack Overflow → 💡 Writing a JS app (React / Angular / Vue / …) and looking to implement Dark Mode? No worries, I’ve got you covered.
One of the additions that shipped in Chrome 80 is the ability to link to Text Fragments. To easily create such links, I stumbled upon the “Copy Text Fragment URL” Plugin which adds an extra option to the context menu. Handy! Makes me wonder why it’s not a default Google Chrome feature. Chrome Web Store: …
Continue reading “Easily link to Text Fragments in Chrome with the “Copy Text Fragment URL” Plugin”
In this post Andréas Hanss gives us a tour on Flipper. Flipper is a platform for debugging iOS, Android and React Native apps. Visualize, inspect, and control your apps from a simple desktop interface. To add flipper support to your React Native project, I recommend the “Add Flipper Support” section from the Upgrade to React …
In this series, step by step, I’ll show you how to build web applications with Laravel 6. We’ll start with the basics and incrementally dig deeper and deeper, as we review real-life examples. Once complete, you should have all the tools you need. Let’s get to work! All 68 videos in this course, totalling 8:59:43 …
Mariko Kosaka has created a small PWA that fills your screen with water over a duration of 20 seconds. After first using CSS animations to animate the water (video), she eventually turned to Houdini‘s CSS Paint API Wash your hands for 20 seconds →
<watched-box> Custom Element
Heydon Pickering has created <watched-box>: I wanted a simple, declarative container queries solution, and here it is: ❤ Custom Element + ResizeObserver 🥣 Use and mix together any CSS length units 🖼 Orientation supported 🧚♀️ ≅1.5KB minified Once imported you can use it as follows: <watched-box widthBreaks="70ch, 900px" heightBreaks="50vh, 60em"> <!– HTML and text stuff …
Continue reading “Container Queries with the <watched-box> Custom Element”
The react-intersection-observer package is an easy way to work with the Intersection Observer API in React. It comes with both a Hooks, render props and plain children implementation. import React from 'react' import { useInView } from 'react-intersection-observer' const Component = () => { const [ref, inView, entry] = useInView({ /* Optional options */ threshold: …
Continue reading “useInView – A React Hook to work with IntersectionObserver”
On his blog, Philip Potter described something he calls “the git pickaxe”, a way to finding commits that contained a specific word. It uses git log‘s -S option to search for specific string: -S<string> Look for differences that change the number of occurrences of the specified string (i.e. addition/deletion) in a file. Intended for the …
Continue reading “The git pickaxe – Find commits that added/removed a specific string”