A rather geeky/technical weblog, est. 2001, by Bramus
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 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 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 …
Here’s Ahmad Shadeed‘s post on Cascade Layers In this article, we’ll explore how cascade layers work, and how they will help us write CSS with more confidence, along with use-cases and examples. Hello, CSS Cascade Layers →
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”
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”
Speaking of favicons: In the latest episode of GUI Challenges, Adam details how to create an adaptive favicon that responds to Dark Mode. SVG Favicons were introduced in Chromium 80 (2019) and Firefox 41 (2015). No support in Safari. Building an adaptive favicon → 🤔 On the WebKit Issue tracker I can find this RESOLVED …
Continue reading “Building an Adaptive SVG favicon that responds to Dark Mode”
Updated version of to the How to Favicon in 2021. <link rel="icon" href="/favicon.ico" sizes="any"><!– 32×32 –> <link rel="icon" href="/icon.svg" type="image/svg+xml"> <link rel="apple-touch-icon" href="/apple-touch-icon.png"><!– 180×180 –> <link rel="manifest" href="/manifest.webmanifest"> The markup (and manifest) are essentially the same as the 2021 version, with one exception: sizes=”any” has been added to the favicon.ico reference. This is a workaround …
