A rather geeky/technical weblog, est. 2001, by Bramus
Keeping a feature of the Chrome Devtools – such as the FPS Meter – running with the DevTools closed unfortunately is not possible (yet?). Kayce Basques provides us with a little workaround though: You can hack together a Puppeteer script that launches Chromium, opens a remote debugging client, then turns on the DevTools feature that …
Continue reading “Using DevTools Features Without Opening DevTools using Puppeteer”
Recently, I decided to try to recreate the GitHub Contribution graph using CSS Grid Layout, and found it was an interesting challenge. As I always find while working with CSS Grid Layout, I end up with far less CSS than I would have using almost any other method. In this case, the layout-related part of …
Continue reading “Recreating the GitHub Contribution Graph with CSS Grid Layout”
ResizeObserver now available in ChromeChrome 64 includes ResizeObserver: ResizeObserver notifies you whenever an element’s size changes, and provides the new height and width of the element, reducing the risk of layout thrashing. To use it create a new instance of it, and then make it observe one or more elements: var ro = new ResizeObserver(entries => { for (let …
Mike Cohn: The professional programmer brings his or her full brain, experience and creativity to the job. When asked to develop a feature, the professional thinks about it: Are there gaps in what was asked for? Are there alternative and better solutions? Will it lead to later problems? And then the professional has conversations with …
Continue reading “The Difference Between a Professional and an Amateur Programmer”
In On “Secure Contexts” in Firefox, HTTPS for local development, and a potential nice gesture by Chrome I said: One of the things that’s still not really frictionless for your local development domains is the use of certificates. To circumvent the use of self-signed certificates I explained in said article how I have a dedicated …
Continue reading “Get HTTPS working on localhost, with green padlock”
Oh yeah, the CSS Paint API will be enabled by default in Chrome 65: CSS Paint API allows you to programmatically generate an image whenever a CSS property expects an image. Properties like background-image or border-image are usually used with url() to load an image file or with CSS built-in functions like linear-gradient(). Instead of …
Continue reading “CSS Paint API (Houdini’s Paint Worklet) available in Chrome 65!”
Great new video series by Wes Bos, this time on learning CSS Grid. CSS Grid may seem a bit daunting with new syntax and layout ideas, but it’s fairly simple and can be broken down into a handful of powerful concepts that when used together will blow your mind and change the way you create …
Continue reading “CSSGrid.io – Free Video Series to learning CSS Grid”
(a ==1 && a== 2 && a==3) ever evaluate to true?Is it ever possible that (a ==1 && a== 2 && a==3) could evaluate to true, in JavaScript? This is interview question asked by a major tech company. My answer was that it’s impossible. They said nothing is impossible. It happened 2 weeks back, but I’m still trying to find the answer. I know we …
Continue reading “Can (a ==1 && a== 2 && a==3) ever evaluate to true?”
The Population Estimation Service is a Web-based service for estimating population totals and related statistics within a user-defined region. It enables users of a wide variety of map clients and tools to quickly obtain estimates of the number of people residing in specific areas without having to download and analyze large amounts of spatial data. …
<dialog> Element
HTML 5.2 has introduced a new <dialog> element to show modal dialog boxes. Here’s a small demo by @bdc (forked version by me, including polyfill): Already available in Chrome; a polyfill is available for other/older browsers. Meet the New Dialog Element →Polyfill for the HTML <dialog> element → Siderant: I cannot help it, but my …