Influence the State of HTML 2025 Survey! ๐
Mamma mia, here we go again! Two years ago, I was funded by Google to design the inaugural State of HTML survey. While I had led State of โฆ surveys [...]
Lea Verouโs blog
Posts
The Hovercar Framework for Deliberate Product Design ๐
You may be familiar with this wonderful illustration and accompanying blog post by Henrik Kniberg about good MVPs: Itโs a very visual way to illustrat [...]
Bluesky Likes Web Components ๐
Just want the components? Here you go: Demo Repo NPM A love letter to the Bluesky API Iโm old enough to remember the golden Web 2.0 era, when ma [...]
Construction Lines ๐
I recently stumbled across The Oatmealโs series on Creativity. While all of it is spot on, the part on erasers hit especially hard. โThere is a lot of [...]
Style-observer: JS to observe CSS property changes, for reals ๐
I cannot count the number of times in my career I wished I could run JS in response to CSS property changes, regardless of what triggered them: media [...]
Context Chips in Survey Design: โOkay, but how does it _feel_?โ ๐
One would think that weโve more or less figured survey UI out by now. Multiple choice questions, checkbox questions, matrix questions, dropdown questi [...]
Web Components are not Framework Components โ and Thatโs Okay ๐
Disclaimer: This post expresses my opinions, which do not necessarily reflect consensus by the whole Web Components community. A blog post by Ryan Car [...]
Making the Web more Awesome โ for everyone ๐
Folks, I have some exciting news to share. ๐คฉ Today I start a new chapter in my career. After a decade at MIT, teaching and doing research at the inte [...]
Forget โshow, donโt tellโ. Engage, donโt show! ๐
A few days ago, I gave a very well received talk about API design at dotJS titled โAPI Design is UI Designโ [1]. One of the points I made was that goo [...]
Inline conditionals in CSS, now? ๐
The CSS WG resolved to add if() to CSS, but that wonโt be in browsers for a while. What are our options in the meantime? A couple days ago, I posted a [...]
Inline conditionals in CSS? ๐
Last week, the CSS WG resolved to add an inline if() to CSS. But what does that mean, and why is it exciting? Last week, we had a CSS WG face-to-face [...]
On compliance vs readability: Generating text colors with CSS ๐
Can we emulate the upcoming CSS contrast-color() function via CSS features that have already widely shipped? And if so, what are the tradeoffs involve [...]
Eigensolutions: composability as the antidote to overfit ๐
tl;dr: Overfitting happens when solutions donโt generalize sufficiently and is a hallmark of poor design. Eigensolutions are the opposite: solutions t [...]
Minimalist Affordances: Making the right tradeoffs ๐
Usability and aesthetics usually go hand in hand. In fact, there is even what we call the โAesthetic Usability Effectโ: users perceive beautiful inter [...]
State of HTML 2023 now open! ๐
tl;dr the brand new State of HTML survey is finally open! Take State of HTML 2023 Survey Benefits to you: Survey results are used by browsers to prior [...]
Numbers or Brackets for numeric questions? ๐
As you may know, this summer I am leading the design of the inaugural State of HTML survey. Naturally, I am also exploring ways to improve both survey [...]
Help Design the Inaugural State of HTML Survey! ๐
You have likely participated in several Devographics surveys before, such as State of CSS, or State of JS. These surveys have become the primary sourc [...]
Going Lean ๐
WordPress has been with me since my very first post in 2009. There is a lot to love about it: Itโs open source, it has a thriving ecosystem, a beautif [...]
Rethinking Categorization ๐
This is the third spinoff post in the migration saga of this blog from WordPress to 11ty. Migrating was a good opportunity to rethink the information [...]
11ty: Index ALL the things! ๐
This is a second spinoff post in the migration saga of this blog from WordPress to 11ty. On good URLs It was important to me to have good, RESTful, us [...]
Migrating Disqus from WP to 11ty ๐
So I recently ported my 14 year old blog from WordPress to Eleventy. I had been using Disqus for comments for years, so I didnโt want to lose them, ev [...]
JS private class fields considered harmful ๐
Today I mourn. What am I mourning? Encapsulation. At least in my projects. As a library author, Iโve decided to avoid private class fields from now on [...]
Contrast Ratio has a new home โ and this is great news! ๐
It has been over a decade when I launched contrast-ratio.com, an app to calculate the WCAG 2.1 contrast ratio between any two CSS colors. At the time, [...]
Position Statement for the 2022 W3C TAG Election ๐
Update: I got re-elected!! Thank you for trusting me once more with this huge responsibility towards the Open Web. I will continue to do my best to ju [...]
State of CSS 2022 now open! ๐
Take State of CSS 2022 survey A while ago I posted a call for feedback to inform the design of the State of CSS 2022 survey. The response has been ove [...]
On ratings and meters ๐
I always thought that the semantically appropriate way to represent a rating (e.g. a star rating) is a <meter> element. They essentially convey the sa [...]
Help design the State of CSS Survey 2022! ๐
Since 2019, the annual State of CSS survey has collected feedback from web developers from across the world to try and take the pulse of the CSS ecosy [...]
What is the best way to mark up an exclusive button group? ๐
A few days ago I asked Twitter a seemingly simple question (I meant aria-pressed, not aria-selected but Twitter doesnโt allow editsโฆ): https://twitter [...]
Introducing Rety: live coding, without the stress ๐
I recently spoke at CSS Day in Amsterdam. It was only my second f2f talk after the pandemic. It went down really well, both in person, and recently th [...]
Releasing Color.js: A library that takes color seriously ๐
Related: Chrisโ blog post for the release of Color.js This post has been long overdue: Chris and I started working on Color.js in 2020, over 2 years a [...]
On Yak Shaving and <md-block>, a new HTML element for Markdown ๐
This week has been Yak Shaving Galore. It went a bit like this: Iโve been working on a web component that I need for the project Iโm working on. More [...]
Custom properties with defaults: 3+1 strategies ๐
When developing customizable components, one often wants to expose various parameters of the styling as custom properties, and form a sort of CSS API. [...]
Inherit ancestor font-size, for fun and profit ๐
If youโve been writing CSS for any length of time, youโre probably familiar with the em unit, and possibly the other type-relative units. We are going [...]
Is the current tab active? ๐
Today I ran into an interesting problem. Interesting because itโs one of those very straightforward, deceptively simple questions, that after a fair a [...]
82% of developers get this 3 line CSS quiz wrong ๐
(I always wanted to do a clickbait title like this and when this chance came along I could not pass it up. ๐ Sorry!) While putting my ideas into slid [...]
Dark mode in 5 minutes, with inverted lightness variables ๐
By now, you probably know that you can use custom properties for individual color components, to avoid repeating the same color coordinates multiple t [...]
Mass function overloading: why and how? ๐
One of the things Iโve been doing for the past few months (on and offโmore off than on TBH) is rewriting Bliss to use ESM 1. Since Bliss v1 was not us [...]
Writable getters ๐
Setters removing themselves are reminiscent of Ouroboros, the serpent eating its own tail, an ancient symbol. Media credit A pattern that has come up [...]
Position Statement for the 2020 W3C TAG Election ๐
Update: I got elected!! Thank you so much to every W3C member organization who voted for me. ๐๐ผ Now on to making the Web better, alongside fellow TA [...]
The case for Weak Dependencies in JS ๐
Earlier today, I was briefly entertaining the idea of writing a library to wrap and enhance querySelectorAll in certain ways. I thought Iโd rather not [...]
Simple pie charts with fallback, today ๐
Five years ago, I had written this extensive Smashing Magazine article detailing multiple different methods for creating simple pie charts, either wit [...]
The -โ-var: ; hack to toggle multiple values with one custom property ๐
What if I told you you could use a single property value to turn multiple different values on and off across multiple different properties and even ac [...]
The failed promise of Web Components ๐
Web Components had so much potential to empower HTML to do more, and make web development more accessible to non-programmers and easier for programmer [...]
Developer priorities throughout their career ๐
I made this chart in the amazing Excalidraw about two weeks ago: It only took me 10 minutes! Shortly after, my laptop broke down into repeated kernel [...]
Parsel: A tiny, permissive CSS selector parser ๐
Iโve posted before about my work for the Web Almanac this year. To make it easier to calculate the stats about CSS selectors, we looked to use an exis [...]
Introspecting CSS via the CSS OM: Get supported properties, shorthands, longhands ๐
For some of the statistics we are going to study for this yearโs Web Almanac we may end up needing a list of CSS shorthands and their longhands. Now t [...]
Import non-ESM libraries in ES Modules, with client-side vanilla JS ๐
In case you havenโt heard, ECMAScript modules (ESM) are now supported everywhere! While I do have some gripes with them, itโs too late for any of thes [...]
Releasing MaVoice: A free app to vote on repo issues ๐
First off, some news: I agreed to be this yearโs CSS content lead for the Web Almanac! One of the first things to do is to flesh out what statistics w [...]
The Cicada Principle, revisited with CSS variables ๐
Many of todayโs web crafters were not writing CSS at the time Alex Walkerโs landmark article The Cicada Principle and Why it Matters to Web Designers [...]
Refactoring optional chaining into a large codebase: lessons learned ๐
Chinese translation by Coink Wang Now that optional chaining is supported across the board, I decided to finally refactor Mavo to use it (yes, yes, w [...]
Hybrid positioning with CSS variables and max() ๐
Notice how the navigation on the left behaves wrt scrolling: Itโs like absolute at first that becomes fixed once the header scrolls out of the viewpor [...]
New decade, new theme ๐
It has been almost a decade since this blog last saw a redesign. This blogโs theme 2011 - 2020. RIP! In these 9 years, my life changed dramatically. [...]
Today's Javascript, from an outsider's perspective ๐
Today I tried to help a friend who is a great computer scientist, but not a JS person use a JS module he found on Github. Since for the past 6 years m [...]
LCH colors in CSS: what, why, and how? ๐
I was always interested in color science. In 2014, I gave a talk about CSS Color 4 at various conferences around the world called โThe Chroma Zoneโ. E [...]
Issue closing stats for any repo ๐
tl;dr: If you just want to quickly get stats for a repo, you can find the app here. The rest of this post explains how itโs built with Mavo HTML, CSS, [...]
Utility: Convert SVG path to all-relative or all-absolute commands ๐
I like hand-editing my SVGs. Often I will create an initial version in Illustrator, and then export and continue with hand editing. Not only is it a b [...]
ReferenceError: x is not defined? ๐
Today for a bit of code I was writing, I needed to be able to distinguish โx is not definedโ ReferenceErrors from any other error within a try...catch [...]
Refresh CSS Bookmarklet v2 ๐
Almost 11 years ago, Paul Irish posted this brilliant bookmarklet to refresh all stylesheets on the current page. Despite the amount of tools, plugins [...]
Easy Dynamic Regular Expressions with Tagged Template Literals and Proxies ๐
If you use regular expressions a lot, you probably also create them from existing strings that you first need to escape in case they contain special c [...]
Never forget type="button" on generated buttons! ๐
I just dealt with one of the weirdest bugs and thought you may find it amusing too. In one of my slides for my upcoming talk โEven More CSS Secretsโ, [...]
Responsive tables, revisited ๐
Many people have explored responsive tables. The usual idea is turning the table into key-value pairs so that cells become rows and there are only 2 c [...]
Quicker Storify export ๐
If youโve used Storify, you probably know by now itโs closing down soon. They have an FAQ up to help people with the transition which explains that to [...]
Free Intro to Web Development slides (with demos) ๐
This semester Iโm teaching 6.813 User Interface Design and Implementation at MIT, as an instructor. Many of the assignments of this course include Web [...]
Different remote and local resource URLs, with Service Workers! ๐
I often run into this issue where I want a different URL remotely and a different one locally so I can test my local changes to a library. Sure, relat [...]
Introducing Mavo: Create web apps entirely by writing HTML! ๐
Today I finally released the project Iโve been working on for the last two years at MIT CSAIL: An HTML-based language for creating (many kinds of) web [...]
HTML APIs: What they are and how to design a good one ๐
Iโm a strong believer in lowering the barrier of what it takes to create rich, interactive experiences and improving the user experience of programmin [...]
Duoload: Simplest website load comparison tool, ever ๐
Today I needed a quick tool to compare the loading progression (not just loading time, but also incremental rendering) of two websites, one remote and [...]
Resolve Promises externally with this one weird trick ๐
Those of us who use promises heavily, have often wished there was a Promise.prototype.resolve() method, that would force an existing Promise to resolv [...]
URL rewriting with Github Pages ๐
I adore Github Pages. I use them for everything I can, and try to avoid server-side code like the plague, exactly so that I can use them. The convenie [...]
Autoprefixing, with CSS variables! ๐
Recently, when I was making the minisite for markapp.io, I realized a neat trick one can do with CSS variables, precisely due to their dynamic nature. [...]
Markapp: A list of HTML libraries ๐
I have often lamented how many JavaScript developers donโt realize that a large percentage of HTML & CSS authors are not comfortable writing JS, and s [...]
Introducing Multirange: A tiny polyfill for HTML5.1 two-handle sliders ๐
As part of my preparation for my talk at CSSDay HTML Special, I was perusing the most recent HTML specs (WHATWG Living Standard, W3C HTML 5.1) to see [...]
My positive experience as a woman in tech ๐
Women speaking up about the sexism they have experienced in tech is great for raising awareness about the issues. However, when no positive stories ge [...]
Introducing Bliss: A 3KB library for happier Vanilla JS ๐
Anyone who follows this blog, my twitter, or my work probably is aware that Iโm not a huge fan of big libraries. I think wrapper objects are messy, an [...]
Copying object properties, the robust way ๐
If, like me, you try to avoid using heavy libraries when not needed, you must have definitely written a helper to copy properties from one object to a [...]
On the blindness of blind reviews ๐
Over the last couple of years, blind reviews have been popularized as the ultimate method for fair talk selection in industry conferences. While I don [...]
Stretchy: Form element autosizing, the way it should be ๐
As you might be aware, these days a good chunk of my time is spent working on research, at MIT. Although itโs still too early to talk about my researc [...]
Spot the unsubscribe (link)! ๐
After getting fed up with too many โpromotionalโ emails and newsletters with incredibly obscure unsubscribe links, I decided to make this tumblr to po [...]
Conical gradients, today! ๐
Itโs no secret that I like conical gradients. In as early as 2011, I wrote a draft for conical-gradient() in CSS, that Tab later said helped him when [...]
Idea: Extending native DOM prototypes without collisions ๐
As I pointed out in yesterdayโs blog post, one of the reasons why I donโt like using jQuery is its wrapper objects. For jQuery, this was a wise decisi [...]
jQuery considered harmful ๐
Heh, I always wanted to do one of those โX considered harmfulโ posts*. :D Before I start, let me say that I think jQuery has helped tremendously to mo [...]
Awesomplete: 2KB autocomplete with zero dependencies ๐
Sorry for the lack of posts for the past 7 (!) months, Iโve been super busy working on my book, which up to a certain point, I couldnโt even imagine f [...]
An easy notation for grayscale colors ๐
These days, there is a lengthy discussion in the CSS WG about how to name a function that produces shades of gray (from white to black) with varying d [...]
Image comparison slider with pure CSS ๐
As a few of you know, I have been spending a good part of this year writing a book for OโReilly called โCSS Secretsโ (preorder here!). I wanted to inc [...]
Dynamically generated SVG through SASS + A 3D animated RGB cube! ๐
Today, I was giving the opening keynote at Codemania in Auckland, New Zealand. It was a talk about color from a math/dev perspective. It went quite we [...]
Iโm going to MIT!! ๐
Last year, I did something crazy, that Iโve been wanting to do since I was little: I applied to MITโs PhD program in Electrical Engineering and Comput [...]
Introducing Whathecolor: A color game for web developers! ๐
Iโve been interested in digital color for a long time, and this year I decided to risk giving a technical talk about color some of the conferences Iโm [...]
Vote for me in the net awards 2014! ๐
I was excited and surprised to find out Iโve been in the 10 finalists for two (2!) categories in the net awards this year: Outstanding contribution Co [...]
Smooth state animations with animation-play-state ๐
When a CSS animation is applied from the beginning of the page load, things are easy. You just use the animation property with appropriate parameters, [...]
Simple script: Automatic talks list ๐
I guess this will not be useful to many, but thought Iโd open source it anyway, in case someone else finds it useful. I mostly wrote it because after [...]
CSS is for developers ๐
Quite often people assume that because the language I focus on is CSS, I must be a web designer. Donโt get me wrong, I love visual design with a passi [...]
Cleanest CSS spinner, ever ๐
For some reason, I seem to have a fascination with CSS loaders these days. After recreating the Google loader with clean CSS recently, I set off to re [...]
Flexible Google-style loader with CSS ๐
So, for a while I had noticed the nice sutble loader Google apps use and I was wondering if it would be easy to make with CSS and CSS animations: Yes [...]
Slanted tabs with CSS 3D transforms ๐
Not sure if Iโm the first to come up with this idea, but I searched and didnโt find anything. So, for a long time, I was wondering if thereโs an easy [...]
What makes speakers happy ๐
I wish I could speak at CSSConf.eu, but unfortunately I had to decline the invitation, as it collided with a prior speaking engagement I had agreed on [...]
Leaving W3C ๐
About a year ago, I announced I was joining W3C as a full-time staff member, to work on Developer Relations and education. Working at W3C was a dream [...]
Meet dpi.lv: More than you probably wanted to know about screen DPI ๐
Yesterday (Sunday) I was on a 9.5 hour flight from Canada with no inflight entertainment (well, thanks Air Canada), so I did what every bored human be [...]
Can we get rid of gradient prefixes? ๐
I recently realized that unprefixed gradients finally propagated to stable Chrome, and after tweeting about it, I decided to do some research on which [...]
border-corner-shape is in danger, and you can help! ๐
Remember my previous post about an app I made to preview border-corner-shape? It stirred a lot of discussion in the CSS WG, and David Baron posted thi [...]
Preview corner-shape, before implementations! ๐
As an editor of the Backgrounds & Borders Level 4 spec, I am naturally a bit more interested in the cool features it will bring, once implementations [...]
Easily center text vertically, with SVG! ๐
These days, we have a number of different ways to vertically align text in a container of variable dimensions: Table display modes Flexbox inline-bloc [...]
Use MathML today, with CSS fallback! ๐
These days, Iโm working on the slides for my next talk, โThe humble border-radiusโ. It will be about how much work is put into CSS features that super [...]
iOS 6 switch style checkboxes with pure CSS ๐
I recently found myself looking at the Tools switch in Espresso: Not because I was going to use it (I rarely do), but because I started wondering wha [...]
W3Conf in San Francisco, February 21-22 ๐
You might have heard about W3Conf, W3Cโs conference for web designers and developers. This year, I have the pleasure of not only speaking there but al [...]
One year of pastries ๐
Last September, I was approached by Alex Duloz, who invited me to take part in his ambitious new venture, The Pastry Box Project. Its goal was to gath [...]
CSS Animations with only one keyframe ๐
This is a very quick tip, about a pet peeve of mine in almost every CSS animation I see. As you may know, Iโm a sucker for reducing the amount of code [...]
Lots of improvements coming to dabblet ๐
I posted about this in both the WebPlatform.org blog and Dabbletโs blog, but I thought it might be interesting to many readers of this blog as well: A [...]
Easy color contrast ratios ๐
I was always interested in accessibility, but I never had to comply with any guidelines before. At W3C, accessibility is considered very important, so [...]
Dive deep into CSS3 (and Bolognese!) in Bologna, Italy ๐
I donโt usually like to advertise my talks or workshops through blog posts, and even though Iโve given a lot, Iโve only posted about less a handful. H [...]
lea๏ผ w3โคorg ๐
In my recent post describing how I got into web development I wrote that Iโm in the verge of some big changes in my life. The main one of them starts [...]
Introducing Prism: An awesome new syntax highlighter ๐
For the past three weeks, on and off, Iโve been working on releasing Dabbletโs syntax highlighter as standalone, since many people had requested it. Z [...]
Important -prefix-free update ๐
Those of you that have been following and/or using my work, are surely familiar with -prefix-free. Its promise was to let you write DRY code, without [...]
So, youโve been invited to speak ๐
Iโve been lucky enough to be invited to do about 25 talks over the course of the past few years and I have quite a few upcoming gigs as well, most of [...]
Why I bought a high-end MacBook Air instead of the Retina MBP ๐
After the WWDC keynote, I was convinced I would buy a new MacBook Air. I was looking forward to any announcements about new hardware during the event, [...]
Hacking lookahead to mimic intersection, subtraction and negation ๐
Note: To understand the following, I expect you to know how regex lookahead works. If you donโt, read about it first and return here after youโre done [...]
Teaching: General case first or special cases first? ๐
A common dilemma while teaching (Iโm not only talking about teaching in a school or university; talks and workshops are also teaching), is whether itโ [...]
Poll: ยฟIs animation-direction a good idea? ๐
ยฟanimation-direction? Lets assume you have a CSS animation for background-color that goes from a shade of yellow (#cc0) to a shade of blue (#079) and [...]
Text masking โ The standards way ๐
As much as I like .net magazine, I was recently outraged by their โTexturizing Web Typeโ article. It features a way to apply a texture to text with -w [...]
How I got into web development โ the long version ๐
Iโm often asked how I got into web development, especially from people that havenโt met many women in the field. Other times itโs people with little k [...]
Pure CSS scrolling shadows with background-attachment: local ๐
A few days ago, the incredibly talented Roman Komarov posted an experiment of his with pure CSS โscrolling shadowsโ. If youโre using Google Reader, yo [...]
git commit -m "EVERYTHING" ๐
I was working on a project today, when I realized that I had forgotten to commit for days (local only repo). I switched to my terminal, spent at least [...]
In defense of reinventing wheels ๐
One of the first things a software engineer learns is โdonโt reinvent the wheelโ. If something is already made, use that instead of writing your own. [...]
Flexible multiline definition lists with 2 lines of CSS 2.1 ๐
If youโve used definition lists (<dl>) youโre aware of the problem. By default, <dt>s and <dd>s have display:block. In order to turn them into what we [...]
A List Apart article: Every time you call a proprietary feature "CSS3", a kitten dies ๐
My first article in ALA was published today, read it here: Every time you call a proprietary feature โCSS3โ, a kitten dies Some comments about it on t [...]
Vendor prefixes, the CSS WG and me ๐
The CSS Working Group is recently discussing the very serious problem that vendor prefixes have become. We have reached a point where browsers are ser [...]
Moving an element along a circle ๐
It all started a few months ago, when Chris Coyier casually asked me how would I move an element along a circle, without of course rotating the elemen [...]
Simpler CSS typing animation, with the ch unit ๐
A while ago, I posted about how to use steps() as an easing function to create a typing animation that degrades gracefully. Today I decided to simplif [...]
Exactly how much CSS3 does your browser support? ๐
This project started as an attempt to improve dabblet and to generate data for the book chapter Iโm writing for Smashing Book #3. I wanted to create a [...]
Why tabs are clearly superior ๐
If you follow me on twitter or have heard one of my talks youโll probably know I despise spaces for indentation with a passion. However, Iโve never go [...]
My new yearโs resolution ๐
Warning: Personal post ahead. If youโre here to read some code trickery, move along and wait for the next post, kthxbai Blogs are excellent places for [...]
What we still canโt do client-side ๐
With the rise of all these APIs and the browser race to implement them, youโd think that currently we can do pretty much everything in JavaScript and [...]
Dabblet blog ๐
Not sure if you noticed, but Dabblet now has a blog: blog.dabblet.com Iโll post there about Dabblet updates and not flood my regular subscribers here [...]
On web apps and their keyboard shortcuts ๐
Yesterday, I released dabblet. One of its aspects that I took extra care of, is itโs keyboard navigation. I used many of the commonly established appl [...]
Introducing dabblet: An interactive CSS playground ๐
I loved JSFiddle ever since I first used it. Being able to test something almost instantly and without littering my hard drive opened new possibilitie [...]
Vendor prefixes have failed, whatโs next? ๐
Edit: This was originally written to be posted in www-style, the mailing list for CSS development. I thought it might be a good idea to post it here a [...]
Animatable: A CSS transitions gallery ๐
What kind of transitions can you create with only one property? This is what my new experiment, animatable aims to explore. Itโs essentially a gallery [...]
My experience from Fronteers, JSConf EU, Frontend and FromTheFront ๐
This month has been very busy conference-wise. I had 4 conferences in a row, so I was flying from country to country and giving talks for 2 weeks. As [...]
Optimizing long lists of yes/no values with JavaScript ๐
My newest article on Smashing Magazineโs coding section is for the geekiest among you. Itโs about how you can pack long lists of boolean values into a [...]
Easily keep gh-pages in sync with master ๐
I always loved Githubโs ability to publish pages for a project and get the strain out of your server. However, every time I tried it, I struggled to k [...]
PrefixFree: Break free from CSS prefix hell! ๐
I wrote this script while at the airport travelling to Oslo and during the Frontend 2011 conference. I think itโs amazing, and it makes authoring CSS3 [...]
My experience from Frontendconf Zurich ๐
Iโm writing this blog post while eating some of the amazing Lindt chocolates I got for free 10 days ago at Frontend conference in Zurich. But it wasnโ [...]
Major update to Chainvas: modularity, a client side build script & more ๐
A week ago, I released Chainvas. It was a spin-off script I wrote while developing my cubic-bezier tool, to make using the Canvas API a bit less painf [...]
A better tool for cubic-bezier() easing ๐
A few days ago, I had a talk at a conference in Zurich (Iโm going to write more about it in another post). The talk was about โ10 things you might not [...]
Chainvas: Make APIs chainable, enhance the canvas API ๐
Itโs definitely not the first time someone writes a script to make the canvas API chainable, as a quick Google search will confirm. However, I think m [...]
Help the community: report browser bugs ๐
Thought Iโd let you know that my Smashing Magazine article with that title was published today. It discusses why, how, when and where to report browse [...]
Pure CSS3 typing animation with steps() ๐
steps() is a relatively new addition to the CSS3 animations module. Instead of interpolating the values smoothly, it allows us to define the number of [...]
CSS.coloratum: Convert and share CSS colors ๐
Whenever I wanted to convert a CSS named color to RGB, I used to open the CSS3 colors spec in a new tab, search in the page and copied the values. Eve [...]
On URL readability ๐
Yesterday, I was watching some season 6 episodes of Futurama (btw, this is their best season ever!) and I noticed the URLs in the website I was in (le [...]
To write good code, you sometimes have to write bad code ๐
And Iโm not referring to learning. For example, yesterday I was trying to write code for something and it ended up beng harder than I expected. Itโs o [...]
Accessible star rating widget with pure CSS ๐
For ages, we couldnโt utilize the sibling combinators (~ and +) to ease the pain of creating star rating widgets, because of this stupid Webkit bug. N [...]
Why I love our industry ๐
I was thinking today how blessed I feel for being a part of the worldwide web development community (and the broader programming community). In a worl [...]
Better โCSS3 ticket-like tagsโ ๐
Today I stumbled upon this tutorial, which from the screenshot, looked very interesting. So, I read on, and to my horror I noticed the author suggesti [...]
twee+: Longer tweets, no strings attached ๐
As some people that have been following me for a while know, the 140 character limit on twitter bugs me a lot sometimes, and Iโve tried to find a way [...]
CSS gradients are faster than SVG backgrounds ๐
Which is really sad, because SVG is awesome. It lets you do what CSS gradients do and much more, in quite a small filesize, as itโs just text too. How [...]
CSS3 for developers: My Fronteers 2011 workshop ๐
In case you havenโt noticed, in addition to my talk at Fronteers 2011, Iโll also be holding a full day workshop the day before the conference. The tit [...]
My experience from the CSS Summit 2011 ๐
Itโs been a few days since this yearโs CSS Summit and my talk there. Where most people would assume that public speaking in a โrealโ conference is mor [...]
Vote for me in The .net awards 2011! ๐
I donโt usually post shameless plugs like that, but Iโm so excited about this I decided to make an exception. A few minutes ago I found out that Iโm s [...]
Detecting CSS selectors support + my JSConf EU talk ๐
Iโll start with a little backstory, if you want to jump straight to the meat, skip the next 4 paragraphs. In the past few months, my CSS research has [...]
A polyfill for HTML5 progress element, the obsessive perfectionist way ๐
Yesterday, for some reason I donโt remember, I was looking once more at Paul Irishโs excellent list of polyfills on Github. I was really surprised to [...]
CSS reflections for Firefox, with -moz-element() and SVG masks ๐
We all know about the proprietary (and imho, horrible) -webkit-box-reflect. However, you can create just as flexible reflections in Firefox as well, b [...]
Pure CSS Tic Tac Toe ๐
Itโs supposed to be used by 2 people taking turns (click twice for the other sign). Basic idea: It uses hidden checkboxes for the states (indeterminat [...]
jQuery Pure: Call for contributors ๐
This post is about an idea Iโve had for ages, but never found the time to actually start working on it. Maybe because it looks like a quite big projec [...]
My experience from Web Directions @media & Standards.next ๐
Last week, I was in London to give 2 talks. The first one was last Thursday, in one of the conferences I wanted to go ever since I learned my first CS [...]
Get your hash โ the bulletproof way ๐
This is probably one of the things that everyone thinks they know how to do but many end up doing it wrong. After coming accross yet one more super fr [...]
My experience from Geek Meet ๐
I decided to start writing a blog post after every talk I give, to be able to go back and remember what I thought about each event, what feedback my t [...]
Change URL hash without page jump ๐
In modern complex layouts, sometimes the point where a hash will transport you to will be entirely different than the one you actually wanted. If you [...]
StronglyTyped: A library for strongly typed properties & constants in JavaScript ๐
Iโll start by saying I love the loosely typed nature of JavaScript. When I had to work with strongly typed languages like Java, it always seemed like [...]
Rule filtering based on specific selector(s) support ๐
Iโve been using this trick for quite a while, but I never thought to blog about it. However, I recently realized that it might not be as common as I t [...]
CSS3 patterns gallery and a new pattern ๐
I finally got around to doing what I wanted to do for quite a few months: Create a gallery with all the basic patterns I was able to create with CSS3 [...]
Invert a whole webpage with CSS only ๐
I recently saw Paul Irishโs jQuery invert page plugin. It inverts every color on a webpage including images or CSS. This reminded me of the invert col [...]
Create complex RegExps more easily ๐
When I was writing my linear-gradient() to -webkit-gradient() converter, I knew in advance that I would have to use a quite large regular expression t [...]
Convert standard gradient syntax to -webkit-gradient and others ๐
I hate -webkit-gradient() with a passion. Its syntax is cumbersome and itโs really limited: No angle support, no <length>s in color stop positions, no [...]
Beveled corners & negative border-radius with CSS3 gradients ๐
Just found out how to do beveled corners and simulate negative border radius without images, by utilizing CSS gradients once again. Itโs amazing how m [...]
On CSS preprocessors ๐
Lately there has been a rise in the usage of CSS preprocessors such as LESS and SASS, which makes sense given the simultaneous increase of CSS3 usage. [...]
WD @media talk subject change ๐
I recently changed my Web Directions @media talk title & abstract to something more specialized. Instead of discussing under-hyped CSS3 features in ge [...]
Custom <select> drop downs with CSS3 ๐
The CSS3 Basic UI module defines pointer-events as: The pointer-events property allows authors to control whether or when an element may be the target [...]
Checkerboard pattern with CSS3 ๐
A while ago, I wrote a post on creating simple patterns with CSS3 gradients. A common pattern I was unable to create was that of a regular, non-rotate [...]
Incrementable length values in text fields ๐
I always loved that Firebug and Dragonfly feature that allows you to increment or decrement a <length> value by pressing the up and down keyboard arro [...]
Convert PHP serialized data to Unicode ๐
I recently had to convert a database of a large Greek website from single-byte Greek to Unicode (UTF-8). One of the problems I faced was the stored PH [...]
Styling elements based on sibling count ๐
The original idea belongs to Andrรฉ Luรญs, but I think it could be improved to be much less verbose. Andrรฉโs solution is like this: /* one item */ li:nt [...]
Yet another redesign ๐
I had grown sick of my previous blog style and its various bugs (since it was put together in just a few hours), so I decided to make a new, more mini [...]
I'm speaking at @media Web Directions โ11! ๐
Just a quick note to let you know Iโm speaking at this yearโs @media Web Directions conference, which will take place during May 26โ27 in London, UK. [...]
Checkerboard, striped & other background patterns with CSS3 gradients ๐
Youโre probably familiar with CSS3 gradients by now, including the closer to the standard Mozilla syntax and the ugly verbose Webkit one. I assume you [...]
rgba.php v1.2: Improved URL syntax, now at Github ๐
I wrote the first version of rgba.php as a complement to an article on RGBA that I posted on Februrary 2009. Many people seemed to like the idea and s [...]
Tag editing UIs ๐
I had to build the edit tags interface for an application Iโm working on, so I took a good look at how these are implemented across many popular appli [...]
The curious case of border-radius:50% ๐
Admittedly, percentages in border-radius are not one of the most common use cases. Some even consider them an edge case, since most people seem to set [...]
My FT2010 slides and CSSS: My presentation framework ๐
About a week ago, I was in Warsaw, Poland to give my first talk at a big conference, Front Trends 2010. As every first-time speaker, I was extremely n [...]
On attr() and calc() ๐
I recently posted my first suggestion to www-style, the official W3 mailing list for CSS development. It was about allowing attr() values inside calc( [...]
Automatic login via notification emails? ๐
A couple hours ago, I received a notification email from Goodreads and unlike usually, I decided to actually visit the site (by the way, I believe tha [...]
Lea Verou @ Front-Trends 2010 ๐
Just a quick note to let you know that Iโm speaking in this yearโs Front-Trends conference, which will take place in Warsaw, Poland on October 21-22. [...]
Organizing a university course on modern Web development ๐
About a year ago, prof. Vasilis Vassalos of Athens University of Economics and Business approached me and asked for my help in a new course they were [...]
"Wow, Mona Lisa with pure CSS!" ๐
There has been a recent flood of CSS experiments that utilize CSS3 features to convert some meaningless markup to spectacular pictures. It all started [...]
On CSS counters plus a CSS3 Reversi UI ๐
CSS Counters have a lot more potential than most web developers seem to think. The common use case consists of something like: somecontainer { counter [...]
MySQL: Are you actually utilizing your indexes? ๐
This might seem elementary to those of you that are DBAs or something similar, but it was fascinating to find out (not to mention it greatly helped wh [...]
CSS3 structural pseudo-class selector tester ๐
I was doing some research today about how people explain the CSS3 structural* pseudo classes and I stumbled upon this demo by CSS tricks: http://css-t [...]
CSSNinja's custom forms revisited to work with CSS sprites ๐
I read today CSS Ninjaโs (Ryan Sheddonโs) brilliant new technique about the creation of custom checkboxes and radio buttons with CSS alone. The only t [...]
iPhone keyboard with CSS3 -- no images ๐
Yeap, this is yet another of those things that make no practical sense but are fun to make just to see whether it can actually be done. Itโs also a pr [...]
Redesign ๐
Was about time, wasnโt it? I wanted a simpler, more minimalistic (and wider!) theme for a while now. The other one was too restrictive. I had designed [...]
Quickly find the Gravatar that corยญresยญponds to a given email ๐
Today I needed to quickly find the Gravatars that corresponded to a bunch of email addresses for some reason (donโt ask). After a bit of googling and [...]
Reading cookies the regular expression way ๐
While taking a look on the 2nd 24ways article for 2009, I was really surprised to read that โThe Web Storage API is basically cookies on steroids, a u [...]
Yet another email hiding technique? ๐
While exploring browser-supported Unicode characters, I noticed that apart from the usual @ and . (dot), there was another character that resembled an [...]
Exploring browser-supported Unicode characters and a tweet shortening experiment ๐
I recently wanted to post something on twitter that was just slightly over the 140 chars limit and I didnโt want to shorten it by cutting off characte [...]
A different approach to elastic textareas ๐
I loved elastic textareas since the very first moment I used one (at facebook obviously). They let you save screen real estate while at the same time [...]
New version of rgba.php is out! ๐
Itโs been a while since I posted my little server-side solution for cross-browser RGBA colors (in a nutshell: native rgba for the cool browsers that s [...]
A CSS3 learning(?) tool ๐
In case anyone is interested, this is my take on the โchallengeโ that Brad Neuberg posted today on Ajaxian. It needs more properties, but itโs very ea [...]
Exploring CSS3 text-shadow ๐
I consider CSS3โs text-shadow one of the most exciting CSS3* properties, which offers us a lot more effects than itโs name suggests. Of course, it can [...]
(byte)size matters ๐
Yesterday, I was editing a CSS file and I was wondering how many bytes/KB would a particular addition add to it, in order to decide if it was worth it [...]
Idea: The simplest registration form ever ๐
If a web application has some sort of registration system (and most do), the registration page should be one of the most attractive, inviting, usable [...]
Bevels in CSS3 ๐
Yeah, yeah I know, bevels are soooo 1996. And I agree. However, itโs always good to know the capabilities of your tools. Talented designers will know [...]
On password masking and usability ๐
I just read Jakob Nielsenโs recent post in which he urged web designers/developers to stop password masking due to itโs inherent usability issues. I f [...]
Tip: Multi-step form handling ๐
First of all, sorry for my long absence! I havenโt abandoned this blog, I was just really, really busy. Iโm still busy, and this probably wonโt change [...]
9 reasons why I prefer MySQL to MS SQL Server ๐
In the past, I used MySQL for any of my DBMS needs. It wasnโt really an informed decision based on solid facts, actually I had never really given it a [...]
Cross-browser imageless linear gradients v2 ๐
A while ago, I posted a script of mine for creating 2-color cross-browser imageless linear gradients. As I stated there, I needed them for a color pic [...]
Creating the perfect slider ๐
Iโve previously discussed many times the color picker I have to create, and blogged about my findings on the way. An essential component of most color [...]
Java pretty dates ๐
First of all, sorry for not posting as frequently as before. Iโm feverishly working on a new project with a really tight deadline and I donโt have as [...]
Better usability in 5 minutes ๐
In this post Iโm going to share some tips to increase a siteโs usability that are very quick to implement. Not all of them are cross-browser, but they [...]
Help me: take the color survey ๐
If you are a creative professional, or just passionate about colors, please take my survey: http://bit.ly/colorsurvey It will greatly help me to make [...]
Advocacy of JavaScript ๐
I frequently meet these โhardcoreโ developers that deep (or not so deep) inside them, tend to underestimate JavaScript developers and boast about thei [...]
Extend Math.log to allow for bases != e ๐
As Math.log currently stands, itโs a bit useless. It only calculates natural logarithms (base e). We can easily modify it however, to calculate logar [...]
100% Cyan in CMYK is NOT rgb(0,255,255)!! ๐
As I mentioned in an earlier post of mine, I have to create a color picker, so Iโve already started to write the code for the Color class itโs going t [...]
Cross browser, imageless linear gradients ๐
I have to write a color picker in the near future and I wanted it to have those little gradients on top of the sliders that show you the effect that a [...]
Mockup viewer bookmarklet ๐
I usually view mockups in a browser, so that the impression I get is as close as possible to reality (I learned this the hard way: A mockup that seeme [...]
CSS3 colors, today (MediaCampAthens session) ๐
Yesterday, I had a session at MediaCampAthens (a BarCamp-style event), regarding CSS3 colors. If youโve followed my earlier posts tagged with โcolorsโ [...]
CMYK colors in CSS: Useful or useless? ๐
As someone who dealed a bit with print design in the past, I consider CMYK colors the easiest color system for humen to understand and manipulate. Itโ [...]
On native, single-input, multiple file uploads ๐
If you are following the current news on web development, you probably heard that the new Safari 4 has a great feature: It natively allows the user to [...]
Check whether the browser supports RGBA (and other CSS3 values) ๐
When using CSS, we can just include both declarations, one using rgba, and one without it, as mentioned in my post on cross-browser RGBA backgrounds. [...]
"Appearances can be deceiving Mr. Anderson" - a.k.a. short code is not always fast code ๐
I used to take pride in my short, bulletproof and elegant String and Number type checks: // Check whether obj is a Number obj + 0 === obj // Check wh [...]
Quick & dirty way to run snippets of JavaScript anywhere ๐
Ever wanted to run a snippet of JavaScript on a browser that doesnโt support a console in order to debug something? (for instance, IE6, Opera etc) You [...]
20 things you should know when not using a JS library ๐
You might just dislike JavaScript libraries and the trend around them, or the project youโre currently working on might be too small for a JavaScript [...]
Silent, automatic updates are the way to go ๐
Recently, PPK stated that he hates Google Chromeโs automatic updates. I disagree. In fact, I think that all browser vendors should enforce automatic u [...]
Bulletproof, cross-browser RGBA backgrounds, today ๐
UPDATE: New version First of all, happy Valentineโs day for yersterday. :) This is the second part of my โUsing CSS3 todayโ series. This article discu [...]
Find the vendor prefix of the current browser ๐
As you probably know already, when browsers implement an experimental or proprietary CSS property, they prefix it with their โvendor prefixโ, so that [...]
CSS3 border-radius, today ๐
This is the first one from a series of articles Iโm going to write about using CSS3 properties or values today. Iโll cover everything I have found out [...]
Extend Math.round, Math.ceil and Math.floor to allow for precision ๐
Math.round, Math.ceil and Math.floor are very useful functions. However, when using them, I find myself many times needing to specify a precision leve [...]
JS library detector ๐
Ever wondered which JavaScript library (if any) is hidden beneath the bells & whistles of each site you gazed at? Since I am a curious person, I find [...]
Check whether a CSS property is supported ๐
Sometimes when using JavaScript, you need to determine whether a certain CSS property is supported by the current browser or not. For instance when se [...]