Nice one by Ahmad Shadeed: a line-separator between two flex items that plays nice with either flex-directions. The line itself is dynamically injected using generated content. As it becomes part of the flexbox layout it’s contained in — something I didn’t know — you can control its flex properties. The trick is to: Stretch the …
Category Archives: Elsewhere
MonitorControl
Now this is a handy app when working on a Mac with a multi-screen setup. Control your display’s brightness & volume on your Mac as if it was a native Apple Display. Use Apple Keyboard keys or custom shortcuts. Shows the native macOS OSDs. Depending on which display your cursor is over at, the keystrokes …
Worldle — Name the Country based on its Shape
Fun little wordle-inspired guess game where you get presented a country shape and you need to guess its name. Per guess you get to see how far off you are and which direction to look into. Worldle → Related: Globle also lets you search for a country, without an initial shape hint. If you want …
Continue reading “Worldle — Name the Country based on its Shape”
Log images to the DevTools Console with console.image()
One of the things you can do on the DevTools’s Console is style the output for console.log() and the like: console.log(“%cMy stylish message”, “color: yellow; font-style: italic; background-color: blue;padding: 2px”); Leveraging this technique, it’s possible to log images to the console: Load the image via JS and extract its dimensions Expand the box of the …
Continue reading “Log images to the DevTools Console with console.image()
“
DevToys — A Swiss Army Knife for Developers
DevToys helps in daily tasks like formatting JSON, comparing text, testing RegExp. No need to use many untruthful websites to do simple tasks with your data. Contains some handy tools like a Json to Yaml and Yaml to Json converter, JWT Decoder, base64 encoder/decoder, etc. Windows only, but a fork for Mac is also available. …
Continue reading “DevToys — A Swiss Army Knife for Developers”
alrra/browser-logos
— A repository collecting high resolution web browser logos
If you’re looking for high resolution web browser logos to include in your presentations or imagery, alrra/browser-logos has them all. You may want these for a presentation, a blog post or for the site featuring your brand new awesome lightbox script (please no!). All logos are high resolution with transparent backgrounds. alrra/browser-logos Repo →alrra/browser-logos Logos …
Continue reading “alrra/browser-logos
— A repository collecting high resolution web browser logos”
Interop 2022
Interop 2022 is the successor to Compat 2021, an joint effort by browser vendors to work on browser compatibility. Interop 2022 is a public effort and benchmark around which browser vendors can collaborate to improve interoperability in areas believed to be important to web developers. It is composed of two parts: 15 focus areas on …
Hello, CSS Cascade Layers
VisBug — Open source browser design tools
Speaking of alternative in-browser DevTools in the previous post: be sure to also check out VisBug, created by Adam Give power to designers & content creators power within the web project they have today, by bringing design tool interactions to the browser. Here’s Adam presenting it at Chrome Dev Summit 2018: You can try it …
Continue reading “VisBug — Open source browser design tools”
CSS Scan Pro — A re-imagined DevTools for web design
Guilherme Rizzo has been busy creating CSS Scan Pro, a re-imagined DevTools CSS Scan Pro makes it radically easy to get the looks of your favorite websites. Hover over any element, and get everything you need (styles, animations, assets, etc…), instantly. Copy elements with a single click, or edit them with our intuitive CSS editor, …
Continue reading “CSS Scan Pro — A re-imagined DevTools for web design”