Kilian Valkhof articles - 30 total
HTML Form Inspector: inspect and debug your forms online
HTML forms are notoriously hard to get right. They require a lot of boilerplate HTML and even small...
![[Boost]](https://media2.dev.to/dynamic/image/width=1000,height=500,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fh0q7q9frr84kflksm1p6.png)
[Boost]
Launching the first ever State of Devs survey Sacha Greif...
Black Friday 2024: Save 25% on Polypane
As developers, we're always looking for tools that can streamline our workflow and make responsive...
Polypane 20: Browser features and performance
Polypane 20 improves the features and performance of the Elements and Outline panel, as well as...
How to check your site in different languages and writing modes
Building sites that support multiple writing modes and languages is challenging. You don't always...
The gotchas of CSS Nesting
I've written before about the problems you can run into with CSS nesting (keep in mind that article...
:root isn't global
Most developers prefer to keep all their CSS custom properties in one place, and a pattern that has...
A small JavaScript pattern I enjoy using
There is a JavaScript pattern that I enjoy using that I don’t see a lot around the web, so I figured...
The breakpoints we tested in 2021, and the ones to test in 2022
Which screen sizes to design, build and test on is a perennial topic in web development. While...
The EyeDropper API: Pick colors from anywhere on your screen
With the new EyeDropper API in Chromium, websites can let visitors pick colors from anywhere on their...
Polypane 6.2: HTML validation, robots.txt support, RTL emulation and more
In Polypane 6.2 we focused on improving the app performance and consistency, particularly around...
Detecting media query support in CSS and JavaScript
Recently I needed a way to detect support for a media query in CSS and JavaScript. To detect if a...
Polypane 6.1: Readability, Content Chaos and rewritten event sync engine
Polypane 6.1 adds two new debug tools and a much more performant, completely rewritten interaction sy...
How hexadecimal notation works for CSS colors
Hexadecimal notation are colors that start with a "#". For example, #ff0000 is red and #ff00ff is pin...
Includes, contains or has. Finding things in iterables (lists) in JavaScript
When writing JavaScript, very frequently I need to check if a given thing exists in a list of things....
Debug your visual hierarchy with the squint test
"The squint test" is a method to get a feel for the visual hierarchy of your page and the name is qui...
CSS breakpoints used by popular CSS frameworks
When using a CSS framework it often doesn't matter what devices people use. These frameworks come wit...
The complete guide to CSS media queries
Did you know there is a media query for inverted colors? Or one for saving data? Media queries are w...
Creating files in JavaScript in your browser
Did you know you can create files using JavaScript right inside your browser and have users download...
Accessibility is not like drowning
Accessibility is not like drowning. I mean it obviously isn't, but let me explain why I'm comparing t...
For many, accessibility is an unknown unknown
An unknown unknown is something you don’t know you don’t know. When you’re just starting out with web...
Your dark mode toggle is broken
With more and more sites gaining support for dark mode and adding very pretty toggles to their design...
8 ways to increase your productivity as a web developer
Making websites takes time. There are a lot of parts you have to think about if you want to create a...
New online tools: CSS specificity calculator and color contrast checker
My goal with Polypane is improving the workflow for developers and designers. The main focus is of co...
I built my own browser
Building your own browser sounds like a terrible idea, especially if you’re a front-end developer by...
4 CSS layouts without using media queries
Do you always need media queries to make a website responsive? With flexbox and grid you can make res...
Using easing for more than just CSS transitions
We can define easing curves for the transitions and animations on our websites to give them a more na...
The box model is not layout
One term that keeps coming up in the design community as a stand-in for layout is "box model", for ex...
The perfect responsive menu
On a desktop, websites have the space to show the full menu, but on a mobile device that space isn't...
Writing CSS in Dutch using PostCSS
Most programming, styling and markup languages use English as their basis, but that doesn't mean othe...