Lea Verou
-
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 illustrate the age-old concept that that a good MVP is not the one developed in isolation over months or years, grounded on assumptions about user needs and goals…
Published
-
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 many of today’s big social media platforms grew up. A simpler time, when the Web was much more extroverted. It was common for websites to embed data from others…
Published
-
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 shame associated with backpedaling; things like quitting your job, getting a divorce, or simply starting over are considered shameful. But forward isn’t…
Published
-
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 queries, user actions, or even other JS. Use cases abound. Here are some of mine: Implement higher level custom properties in components, where one custom…
Published
-
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 questions, freeform textfields, numerical scales, what more could one possibly need?! And yet, every time Google sponsored me to lead one of the State Of … surveys…
Published
-
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 Carniato titled “Web Components Are Not the Future” has recently stirred a lot of controversy. A few other JS framework authors pitched in, expressing frustration…
Published
-
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 intersection of usability and programming language design, I wrapped up my PhD two weeks ago (yes, I’m a Dr now! And damn right I will — once it actually sinks…
Published
-
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 good UIs (and thus, good APIs) have a smooth UI complexity to Use case complexity curve. This means that incremental user effort results in incremental value…
Published
-
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 about the recent CSS WG resolution to add an if() function to CSS. Great as it may be, this is still a long way off, two years if everything goes super…
Published
-
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 meeting in A Coruña, Spain. There is one resolution from that meeting that I’m particularly excited about: the consensus to add an inline if() to CSS.…
Published
-
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 involved and how to best balance them? Relative Colors Out of all the CSS features I have designed, Relative Colors aka Relative Color Syntax (RCS) is definitely…
Published
-
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 that generalize so much they expose links between seemingly unrelated use cases. Designing eigensolutions takes a mindset shift from linear design to composability…
Published
-
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 interfaces as easier to use and cut them more slack when it comes to minor usability issues. Unfortunately, sometimes usability and aesthetics can be at odds…
Published
-
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 prioritize roadmaps — the reason Google is funding this. Time spent thoughtfully filling them out is an investment that can come back to you tenfold in the…
Published
-
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 UX, as well as all questions. Shaine Madala, a data scientist working on the survey design team proposed using numerical inputs instead of brackets for…
Published
-
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 source of unbiased data for the practices of front-end developers today (there is also the Web Almanac research, but because this studies what is actually used…
Published
-
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 beautiful default theme, and a revolutionary block editor that makes my inner UX geek giddy. Plus, WP made building a website and publishing content accessible…
Published
-
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 architecture of my site, especially around categorization. Categories vs Tags Just like most WP users, I was using both categories and tags, simply because…
Published
-
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, usable, hackable URLs. While a lot of that is easy and comes for free, following this principle with Eleventy proved quite hard: URLs that are “hackable…
Published
-
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, even if I ended up using a different solution for the future (or no comments at all). Looking around for an existing solution did not yield many results…
Published
-
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 and gradually refactor them out of my existing libraries. Why did I make such a drastic decision? It all started a few days ago, when I was building a…
Published
-
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, all similar tools suffered from several flaws when being used for CSS editing: No support for semi-transparent colors (Since WCAG included no guidance…
Published
-
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 justify the confidence the W3C membership has placed in me. 🥹 Context: In 2020, I ran for the TAG election for the first time and had the great honor of…
Published
-
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 overwhelming and it was glorious. We got quite a lot of proposals, feedback, votes. But that also meant we had to make some tough decisions about what gets…
Published
-
On ratings and meters
I always thought that the semantically appropriate way to represent a rating (e.g. a star rating) is a element. They essentially convey the same type of information, the star rating is just a different presentation. An example of a star rating widget, from Amazon However, trying to style a element to…
Published
-
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 ecosystem, and it’s become a valuable resource not only for CSS developers, but also for browser vendors. This summer, one of my side projects is helping out…
Published
-
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.com/LeaVerou/status/1545712667515654144 For background, I was implementing a web component for an app I’m working on at work and I was getting into some…
Published
-
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 that the video was released: https://www.youtube.com/watch?v=ZuZizqDF4q8 Here is a sample of tweets about it that made me particularly warm and fuzzy inside…
Published
-
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 ago! It was shortly after I had finished the Color lecture for the class I was teaching at MIT and I was appalled by the lack of color libraries that did…
Published
-
On Yak Shaving and , 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 on that later, but let’s call it for now. Of course that needs to be developed as a separate reusable library and released as a separate open source project…
Published
-
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. This is still underutlized, but there are libraries, e.g. Shoelace, that already list custom properties alongside other parts of each component’s API…
Published
-
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 to refer to em for the rest of this post, but anything described works for all type-relative units. As you well know, em resolves to the current font…
Published
-
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 amount of digging, does not appear to have a definite answer (though I would love to be wrong!). The problem was to determine if the current tab is active…
Published
-
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 slides for my Dynamic CSS workshop for next week, I was working on a slide explaining how the CSS wide keywords work with custom properties. inherit, initial…
Published
-
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 times throughout your theme. You may even know that you can use the same variable for multiple components, e.g. HSL hue and lightness: :root { --primary…
Published
-
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 using a modular architecture at all, this introduced some interesting challenges. Bliss is essentially a collection of helper functions. Most of these functions…
Published
-
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 a few times in my code is the following: an object has a property which defaults to an expression based on its other properties unless it’s explicitly…
Published
-
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 TAG members! Context: I’m running for one of the four open seats in this year’s W3C TAG election. The W3C Technical Architecture Group (TAG) is the Working…
Published
-
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 introduce a Parsel dependency out of the box, but only use it to parse selectors properly when it’s available, and use more crude regex when it’s not…
Published
-
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 with clever use of transforms and pseudo-elements, or with SVG stroke-dasharray. In the end, I mentioned creating pie charts with conic gradients, as a future…
Published
-
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 across multiple CSS rules? What if I told you you could turn this flat button into a glossy skeuomorphic button by just tweaking one custom property --is…
Published
-
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 programmers. Remember how exciting it was every time we got new shiny HTML elements that actually do stuff? Remember how exciting it was to be able to do sliders…
Published
-
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 panics, and it spent about 10 days in service (I was in a remote place when it broke, so it took some time to get it to service). Yesterday, I was finally…
Published
-
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 existing selector parser, but most were too big and/or had dependencies or didn’t account for all selectors we wanted to parse, and we’d need to write our…
Published
-
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 this is typically done by maintaining a data structure by hand or guessing based on property name structure. But I knew that if we were going to do it by…
Published
-
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 these things to change, so I’m embracing the good parts and have cautiously started using them in new projects. I do quite like that I can just use import…
Published
-
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 we should study to answer the question “What is the state of CSS in 2020?”. You can see last year’s chapter to get an idea of what kind of statistics could…
Published
-
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 was published in 2011. Last I heard of it was in 2016, when it was used in conjunction with blend modes to pseudo-randomize backgrounds even further. So…
Published
-
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, we do provide a transpiled version as well for older browsers, settle down). This is a moment I have been waiting for a long time, as I think optional chaining…
Published
-
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 viewport. One of my side projects these days is a color space agnostic color conversion & manipulation library, which I’m developing together with my husband…
Published
-
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. I joined and left W3C, joined the CSS WG, went to MIT for a PhD, published a book, got married, had a baby, among other things. I designed dozens of websites…
Published
-
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 my day job is doing usability research & teaching at MIT, I couldn’t help but cringe at the slog that this was. Lo and behold, a pile of unnecessary error…
Published
-
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”. Even before that, in 2009, I wrote a color picker that used a hidden Java applet to support ICC color profiles to do CMYK properly, a first on the Web at…
Published
-
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, and 0 lines of JS. Or, if you’d prefer, you can just View Source — it’s all there! The finished app we’re going to make, find it at https://projects.verou.me…
Published
-
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 bit of a meditative experience and it satisfies my obsessive-compulsive tendencies to clean up the code, it has actual practical benefits when you need…
Published
-
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 block and handle them differently. Now I know what you’re thinking. Trying to figure out exactly what kind of error you have programmatically is a well…
Published
-
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, servers to live reload that have been released over the years, I’ve always kept coming back to it. It’s incredibly elegant in its simplicity. It works…
Published
-
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 characters that need to be matched literally, like $ or +. Usually, a helper function is defined (hopefully this will soon change as RegExp.escape() is…
Published
-
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”, I had a Mavo app on a , and the app included a collection to quickly create a UI to manage pairs of values for something I wanted to calculate in one of…
Published
-
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 columns total, which fit in any screen. However, this means table headers need to now be repeated for every row. The current ways to do that are: Duplicating…
Published
-
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 export your content you need to… Log in to Storify at www.storify.com. Mouse over the story that contains content you would like to export and select…
Published
-
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 development and the course included two 2-hour labs to introduce students to these technologies. Since I’m involved this year, I decided to make new labs…
Published
-
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, relative URLs work a lot of the time, but are often not an option. Developing Mavo is yet another example of this: since Mavo is in a separate repo from mavo.io…
Published
-
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 applications without programming or a server backend. It’s named Mavo after my late mother (Maria Verou), and is Open Source of course (yes, getting paid…
Published
-
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 programming. I wrote an article over at Smashing Magazine aimed at JavaScript library developers that want their libraries to be usable via HTML (i.e. without writing…
Published
-
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 one in my localhost. Just have them side by side and see how they load relative to each other. Maybe even record the result on video and study it afterwards…
Published
-
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 resolve. However, for architectural reasons (throw safety), there is no such thing and probably never will be. Therefore, a Promise can only resolve or reject…
Published
-
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 convenience of pushing to a repo and having the changes immediately reflected on the website with no commit hooks or any additional setup, is awesome. The free…
Published
-
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. Let’s say you want to use a property that has multiple versions: an unprefixed one and one or more prefixed ones. In this example we are going to use…
Published
-
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 struggle to use their libraries. To encourage libraries with HTML APIs, i.e. libraries that can be used without writing a line of JS, I made a website to…
Published
-
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 what undiscovered gems lay there. It turns out that HTML sliders have a lot of cool features specced that aren’t very well implemented: Ticks that snap…
Published
-
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 get out, the overall picture painted is bleak, which could scare even more women away. Lucky for me, I fell in love with programming a decade before I even…
Published
-
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, and big libraries are overkill for smaller projects. On large projects, one uses frameworks like React or Angular anyway, not libraries. Anyone who writes…
Published
-
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 another at some point. It’s needed so often that it’s just silly to write the same loops over and over again. These days, most of my time is spent working…
Published
-
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’t really submit proposals myself, I have served several times on the other side of the process, doing speaker selection in conference committees, and…
Published
-
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 research project, I can say that it’s related to the Web and it will be open source, both of which are pretty awesome (getting paid to work on cool open source…
Published
-
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 point out such examples of digital douchebaggery. This annoying dark pattern is so widespread that Google even added a feature to Gmail for making those…
Published
-
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 he added them in CSS Image Values Level 4 in 2012. However, almost three years later, no progress has been made in implementing them. Sure, the spec is…
Published
-
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 decision: Back in 2006 when it was first developed, IE releases had a pretty icky memory leak bug that could be easily triggered when one added properties to…
Published
-
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 move the Web forward. It gave developers power to do things that were previously unthinkable, and pushed the browser manufacturers to implement these things…
Published
-
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 finishing, but I’m finally there! I’ve basically tried to cram all the CSS wisdom I’ve accumulated over the years in it :P (which is partly why it took…
Published
-
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 degrees of transparency, and we need your feedback about which name is easier to use. The current proposals are: 1. gray(lightness [, alpha]) In this proposal…
Published
-
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 include a “secret” about the various uses of the resize property, as it’s one of my favorite underdogs, since it rarely gets any love. However, just mentioning…
Published
-
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 well, despite my complete lack of sleep. I mean that quite literally: I hadn’t slept all night. No, it wasn’t the jetlag or the nervousness that kept me…
Published
-
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 Computer Science. It was not only crazy because I have been working for several years already, but also because I only applied to MIT, as I decided I did not…
Published
-
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 speaking at. “Why is that risky?” you might ask. Well, it might end up being really interesting, or it may end up alienating both designers because it’s…
Published
-
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 Conference Talk of the Year (for The humble border-radius) You can vote for me by clicking the above links and have my eternal gratitude :-) Furthermore…
Published
-
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, and you’re done. However, what if the animation is applied on a certain state, e.g. :hover, :active, :focus or a JS-triggered class change? A naïve approach…
Published
-
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 50+ conferences, I got seriously fed up updating the list by editing the HTML manually. Now I will only have to edit a JSON file manually! :P Admittedly…
Published
-
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 passion. I have studied it a lot over the years and I’ve worked on several design projects for clients. Heck, I even have a dribbble profile! However, if I…
Published
-
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 recreate the classic spinner with CSS. Yes, I know this has been done zillions of times, but I wanted a clean, maintainable, reusable solution, not just…
Published
-
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: Yesterday, I realised that you can get this effect by increasing border size until about the middle of the element, as long as the total width stays the same…
Published
-
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 way to create trapezoid shapes in CSS, especially with borders etc. Eventually, I realized that I could use a pseudo-element for the background and 3D…
Published
-
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. I recently got another email from the organizers with an interesting question: We want to make this event as stress-free for our speakers as possible…
Published
-
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 come true and I can’t say I was disappointed. Over the past year I’ve worked with some amazingly brilliant people, hopefully increased awareness for web…
Published
-
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 being would do instead of watching movies: I decided to code an app! And out of the infinite set of possible apps somebody can make, I decided to make an…
Published
-
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 browsers support unprefixed gradients, and what percentage of users needs them. Currently, unprefixed gradients are supported in: Chrome 26+ Firefox 16…
Published
-
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 this: http://dev.w3.org/csswg/css4-background/#border-corner-shape appears to me to be an example of a feature that’s addressing a problem that we don’t have…
Published
-
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 start (it’s currently too early for that). One of the coolest features in it is corner-shape. While in Backgrounds & Borders 3, border-radius was only…
Published
-
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-block hacks Wrapping the text in an extra element and absolutely positioning it …and probably many others I’m forgetting However, often comes a time when neither…
Published
-
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 superficially look as simple as border-radius, as well as what advances are in store for it in CSS Backgrounds & Borders 4 (of which I’m an editor). It will…
Published
-
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 what would be the best way to replicate this effect in CSS. I set on to create something that adhered to the following rules: It should be keyboard accessible…
Published
-
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 also organizing it, along with Doug Schepers and designing the website for it. Alongside with yours truly, it features an excellent lineup of amazing speakers…
Published
-
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 gather 30 people (“bakers”) every year who are influential in their field and ask them to share twelve thoughts — one per month. For 2012, that field would…
Published
-
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 (as long as it remains human readable of course). I demonstrated a very similar example in my “CSS in the 4th dimension” talk, but I recently realized…
Published
-
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: As many of you probably know, I’ve started working for W3C Developer Relations since this August. Half of my time is devoted to WebPlatform.org, a very…
Published
-
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 everything we make needs to pass WCAG 2.0 AA level. Therefore, I found myself calculating color contrast ratios very frequently. It was a very enlightening…
Published
-
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. However, this one is special: It might be my last. Don’t get me wrong: I LOVE giving workshops, teaching people new things and seeing them put them in use…
Published
-
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 tomorrow. As of tomorrow, the above will be my professional email. Yes, you guessed it right; I’m joining the W3C team! Yes, the same W3C you all know…
Published
-
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. Zachary Forrest suggested the name “Prism” and I liked it so much I decided to go with it, even though there is an abandoned Mozilla project with the same…
Published
-
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 all the messy prefixes, that would be standards-compliant in the future (which is why I’m always against adding proprietary features in it, regardless…
Published
-
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 them at international conferences around Europe and the US. Despite my speaking experience, I’m still very reluctant to call myself a “professional speaker…
Published
-
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, as my 13" 2010 MacBook Pro (Henceforth abbreviated as MBP) was becoming increasingly slow and dated. Also, I wanted to gift my MBP to my mother, who is…
Published
-
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. I was quite excited to discover this, but to my dismay, Steven Levithan assured me it’s actually well known. However, I felt it’s so useful and underdocumented…
Published
-
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’s better to first teach some easy special cases and then generalize, or first the general case and then present special cases as merely shortcuts. I’ve…
Published
-
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 repeats indefinitely. The code could be something like this: @keyframes color { from { background: #cc0 } to { background: #079 } } div { animation: color…
Published
-
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 -webkit-mask-image, presenting it as an experimental CSS property and misleading readers. There are even -moz-, -o- and -ms- prefixes for something that…
Published
-
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 kids and they are asking for guidance about how to steer them into programming. I promised them that I would write a long post about it at some point, and…
Published
-
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, you are probably familiar with the effect: In Roman’s experiment, he is using absolutely positioned pseudoelements to cover the shadows (which are basically…
Published
-
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 five minutes trying to decide on the commit message before settling to the completely uninformative “Another commit”. Embarrassed with myself, I shared…
Published
-
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. “Stand on the shoulders of giants, they know what they’re doing better than you”. Writing your own tools and libraries, even when one already exists, is…
Published
-
Flexible multiline definition lists with 2 lines of CSS 2.1
If you’ve used definition lists () you’re aware of the problem. By default, s and s have display:block. In order to turn them into what we want in most cases (each pair of term and definition on one line) we usually employ a number of different techniques: Using a different for each pair: Style dictating…
Published
-
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 twitter: https://twitter.com/kkmett/status/169424038421204994 https://twitter.com/codepo8/status/169425611801108480 https://twitter.com/lydiamann/status…
Published
-
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 seriously considering to implement -webkit- prefixes, just because authors won’t bother using anything else. This is just sad. :( Daniel Glazman, Christian…
Published
-
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 element itself. If I recall correctly, his solution was to use multiple keyframes, for various points on a circle’s circumference, approximating it. I couldn’t…
Published
-
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 simplify it a bit and make it more flexible, at the cost of browser support. The new version fully works in Firefox 1+ and IE10, since Opera and WebKit don’t…
Published
-
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 very simple/basic testsuite for CSS3 stuff so that you could hover on a e.g. CSS3 property and you got a nice browser support popup. While I didn’t achieve…
Published
-
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 gone into the details of my opinion on stage, and twitter isn’t really the right medium for advocacy. I always wanted to write a blog post about my take…
Published
-
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 new year’s resolutions. Posts stay there for years, to remind you what you’ve been thinking long ago. A list on a piece of paper or a file in your computer…
Published
-
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 even if we currently can’t due to browser support issues, we will once the specs are implemented. Unfortunately, that’s not true. There are still things…
Published
-
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 who may not care. So, if you are interested on Dabblet’s progress, follow that blog or @dabblet on twitter. That was also an excuse to finally try tumblr…
Published
-
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 application shortcuts to navigate and perform actions in it. Some of these naturally collided with the native browser shortcuts and I got a few bug reports…
Published
-
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 possibilities for me. I use it daily for experiments, browser bug testcases, code snippet storage, code sharing and many other things. However, there were always a…
Published
-
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 as other people might be interested too. It wasn’t. Most people commenting didn’t really get the point of the article and thought I’m suggesting we should…
Published
-
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 of basic transitions. It aims to show how different animatable properties look when they transition and to broaden our horizons about which properties…
Published
-
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 I usually do after conferences, this post sums up my experiences and feedback I got from these conferences, in chronological order. FromTheFront This was…
Published
-
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 string in the most space-efficient way. Hope you enjoy it :)
Published
-
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 keep the gh-pages branch up to date. Until I discovered the awesome git rebase. Usually my github workflow is like this: git add . git status // to see…
Published
-
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 a pleasure. Read my announcement about it on Smashing Magazine. Hope you like it!
Published
-
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’t a good experience only because of them! First of all, it gave me the opportunity to visit Zurich for free, and meet an old friend for the first time…
Published
-
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 painful. However, unlike similar attempts to make the Canvas API chainable, most of my code was written in a very generic manner, and was actually able to make…
Published
-
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 know about CSS3”. The first of those things was how you can do bouncing transitions with cubic-bezier() instead of an easing keyword. As usual, my slides…
Published
-
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 my attempt has merit, because it’s not really focused in chaining canvas methods, but just about every API you use it on and because it’s super small, only…
Published
-
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 browser bugs, as well as how to make a good bug report. Get comfortable and make a big cup of coffee before you dive in, as it’s quite long (4000 words).
Published
-
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 “frames” precisely. So I used it to create headers that have the well-known animated “typing effect”: As you can see, the number of characters is hardcoded…
Published
-
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. Every time it felt even more tedious. I didn’t want to search in long tables, I wanted to type the color somewhere and get the values back, in an easy to…
Published
-
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 (let’s call it foo.com). They were like: http://foo.com/futurama/season/6/episode/9 I thought to myself “hey, this looks very clean and readable”. And then…
Published
-
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 one of those rare cases where you can fully imagine how the solution should work, enough to tell it to another person, but you can’t put your thoughts to…
Published
-
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. Nowadays, not only it’s fixed, but the fix has already propagated to Chrome and Safari 5.1. So, we can at least use the sibling combinator to make coloring…
Published
-
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 world where throwing shit at others is an acceptable way of climbing to the top, our industry is a breeze of fresh air. Here are a few reasons why I find our…
Published
-
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 suggesting some questionable practices, the worst of which was using 3 HTML elements for every tag, including nonsense markup like . So, I thought I’d take a chance…
Published
-
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 to overcome it previously as well. The most common ways these days seems to be either cutting down the long tweet into multiple pieces (yuck) or using…
Published
-
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. However, the browser needs to generate a DOM for every SVG graphic, which results in sluggishness. Here’s my test case Mouse over the 2 divs. They both use…
Published
-
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 title of that workshop is “CSS3 for developers” and I wanted to explain a bit what it’s going to be about and why I chose to target web developers only. Why…
Published
-
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 more daunting, I was much more nervous about this one, since it was my first talk at an online conference. I wouldn’t be able to see the faces of the audience…
Published
-
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 shortlisted in the “Brilliant newcomer” category of The .net awards!!! Thank you so much @ everyone that nominated me and/or plans to vote for me. I really…
Published
-
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 been getting some attention and I’ve been starting to become somewhat well-known in the CSS industry. A little known fact about me is that JavaScript has…
Published
-
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 see that there are none for the element. It seemed really simple: Easy to fake with CSS and only 4 IDL attributes (value, max, position and labels). “Hey…
Published
-
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, by utilizing -moz-element(), some CSS3 and Firefox’s capability to apply SVG effects to HTML elements. And all these are actually standards, so eventually…
Published
-
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 (indeterminate means empty, checked means X, not checked means O) and labels for the visible part When it starts, a little script (the only js in the demo) sets the…
Published
-
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 project if done properly, so it’s scary to do it on my own without any help. jQuery has a huge amount of code that deals with browser bugs and lack of implementations…
Published
-
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 CSS properties: Web directions @media. The second one was 2 days later in a smaller event called Standards.next. Web Directions @media I managed to get my…
Published
-
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 fragile snippet of code for this, I decided a blog post was in order. The problem You want to remove the pound sign (#) from location.hash. For example,…
Published
-
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 talk got etc. And I’m starting with Geek Meet May 2011. The event Geek Meet is a meetup organized in Stockholm by Robert Nyman. It has hosted talks by many…
Published
-
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 prevent the default event, you will save yourself from the page jump, but the hash won’t change either. You can accept the regular behavior and change…
Published
-
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 an unnecessary hassle. On the contrary, my boyfriend even though very proficient with HTML, CSS and SVG, comes from a strong Java background and hates…
Published
-
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 thought, so it might be a good idea to document it in a blog post. If you follow the discussions on www-style, you might have noticed the proposal for a…
Published
-
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 gradients. Here it is: CSS3 Pattern Gallery Also, it includes a brand new pattern, which is the hardest one I have ever made so far: Japanese cubes. Thanks…
Published
-
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 color keyword that’s allowed on outlines (and sadly only supported by Opera and IE9+). So I wondered how it could be exploited to achieve the same effect…
Published
-
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 to validate and parse the input. Such a regex would be incredibly hard to read and fix potential issues, so I tried to find a way to cut the process down…
Published
-
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 s in color stop positions, no implied color stop positions, no elliptical gradients… So, I was really happy, when Webkit implemented the standard syntax this January. However, we’re still…
Published
-
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 many CSS problems can be solved with gradients alone. Read the text in the dabblet below to find out how (or just check the code): It also falls back to…
Published
-
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. I’ve frequently argued with fellow front-end web developers about whether they should be used or not and I decided to finally put my thoughts in writing…
Published
-
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 general I will only focus on one CSS3 feature (more hyped than the ones I was planning to show, but all the hype is only about very basic use cases): CSS3…
Published
-
Custom 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 of user pointing device (pointer, e.g. mouse) events. This property is used to specify under which circumstance (if any) a pointer event should go “through…
Published
-
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-rotated checkerboard. However, I noticed today that by giving a different background-position to every triangle in the pattern tile, a checkerboard can be easily…
Published
-
Incrementable length values in text fields
I always loved that Firebug and Dragonfly feature that allows you to increment or decrement a value by pressing the up and down keyboard arrows when the caret is over it. I wished my Front Trends slides supported it in the editable examples, it would make presenting so much easier. So, I decided to implement…
Published
-
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 PHP serialized data: As PHP stores the length of the data (in bytes) inside the serialized string, the stored serialized strings could not be unserialized…
Published
-
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:nth-child(1):nth-last-child(1) { width: 100%; } /* two items */ li:nth-child(1):nth-last-child(2), li:nth-child(2):nth-last-child(1) { width: 50%; } /* three…
Published
-
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 minimalistic one. Best viewed in browsers that support CSS gradients, like Firefox, Safari and Chrome. I also finally got around to making a logo for myself…
Published
-
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. I’m very excited about this, since I always considered @media one of the top front-end conferences in the industry :) The title and abstract of my talk…
Published
-
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 know how to add multiple color stops, make your gradients angled or create radial gradients. What you might not be aware of, is that CSS3 gradients can…
Published
-
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 started using it. With their valuable input, I made many changes and released v.1.1 (1.1.1 shortly after I posted the article due to another little fix…
Published
-
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 applications nowadays. It seems there are a few patterns that are used over and over, and I’m unsure which one is the most preferable by users, they all have…
Published
-
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 border-radius in pixels or --rarely-- ems. And since it’s not used very frequently, it’s still quite buggy. A bit of a chicken and egg case actually:…
Published
-
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 nervous and worried that everything would go bad. That my talk would be boring or too basic or that I would just freeze at stage, unable to say a word.…
Published
-
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(). In this post I’ll describe in greater detail why I believe this is necessary, since not everyone follows www-style. If anyone has something to add in…
Published
-
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 that Goodreads, i.e. a last.fm for books, is an awesome idea but poorly implemented).When I did, I was quite annoyed to find out that I wasn’t already logged…
Published
-
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. Front-Trends is a new conference (starting this year) but the organizers have managed to put together an impressive line-up (Crockford, PPK, Paul Bakaus…
Published
-
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 preparing for their Computer Science department, which would introduce 4th year undergrads to various web development aspects. Since I was always complaining…
Published
-
"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 when David Desandro used CSS3 to draw the Opera logo. This seemed to inspire lots of other folks who created similar demos: Pure CSS icons Create Social…
Published
-
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-reset: foocount; } Ε { counter-increment: foocount; } Ε::before { content: counter(foocount) ". "; } commonly used to add numbering to section headings…
Published
-
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 what I had to do), so I decided to post it, in case it helps someone else too. A few moments ago I found out that whereas a query along the lines of… SELECT…
Published
-
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-tricks.com/examples/nth-child-tester/ I thought the idea is awesome, but lacks a few features: It doesn’t use the native browser algorithm for selecting…
Published
-
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 thing that bugged me about it was something he pointed himself out as well: This technique has only 1 drawback I can think of, IE support is not a drawback…
Published
-
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 proof of the fact that when I have too many things to do, I tend to procrastinate more. :P Here it is (resize the window to get the narrow version ;)): http…
Published
-
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 it when I had absolutely no content, and few changes were made to it afterwards. So, today that I was too sad and furious to do anything productive, I…
Published
-
Quickly find the Gravatar that corresponds 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 wandering around in Gravatar’s official site and others, I firgured out it’s probably much quicker to write a short PHP script for that myself, than keep…
Published
-
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 unhealthy dosage of steroids. Cookies are always a pain to work with. First of all you have the problem of setting, changing and deleting them. Typically…
Published
-
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 @ sign (0xFF20 or ＠) and various characters that resembled a period (I think 0x2024 or ․ is closer, but feel free to argue). I’m wondering, if one could…
Published
-
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 characters (some lyrics from Pink Floyd’s “Hey You” that expressed a particular thought I had at the moment – it would be barbaric to alter Roger Waters’ lyrics…
Published
-
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 they are more comfortable for the end user. It’s one of the rare occasions when you can have your UI cake and eat it too! However, I never liked the implementation…
Published
-
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 support it, a PHP-generated image for those that don’t). For features, advantages, disadvantages etc, go see the original post. In this one I’ll only discuss…
Published
-
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 easy to extend. I guess I should also add CSS3 values (RGBA/HSL(A) colors, CSS gradients etc) but oh well, I’m currently in a hurry. I will, if anyone actually…
Published
-
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 be used for creating drop shadows for text, and it carries out that task very well, but it’s inherent flexibility allows it to be also used for glow effects…
Published
-
(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. Since, I had found myself wondering about the exact same thing multiple times in the past, I decided to make a simple standalone HTML page that would…
Published
-
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 pages of it. It should make you to want to register, not repulse you. We don’t want the user to give up in the middle of filling it because they are fed…
Published
-
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 when it’s suitable to use a certain effect and incapable ones will abuse whatever is given to them, so after a lot of thought, I decided to blog about…
Published
-
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 found it an interesting read. Hey, at last, someone dared to talk about the elephant in the room! In most cases password masking is indeed useless, but…
Published
-
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 soon. However, I will still blog when I get too fed up with work or studying (this is one of these moments…). Now, let’s get to the meat. The situation…
Published
-
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 any thought. It was what most developers used, it was what vBulletin used (one of the main projects of my company is based on vBulletin), it was what most…
Published
-
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 picker I have to create. And even though 2-color gradients are sufficient for most components, in most color spaces, I had forgotten an important one: Hue…
Published
-
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 pickers is a slider control. I won’t go through much techincal details or JavaScript code in this article (after all the usability guidelines presented…
Published
-
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 much time as I previously did. For reasons that are irrelevant to this post, I have to write lots of Java code. So, sorry if I disappoint my fellow readers…
Published
-
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 are the icing on the cake anyway, nobody would mind without them. 1. Make buttons and button-like links appear pressed This is a personal favorite. When…
Published
-
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 a future project of our company more usable (some of its features at least) and it only takes a few minutes (it contains 10-19 questions, depending on…
Published
-
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 their own superiority. I’m sure that if you spent an important percentage of your career working with JavaScript and are even barely social, you definitely…
Published
-
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 logarithms of any base: Math.log = (function() { var log = Math.log; return function(n, a) { return log(n)/(a? log(a) : 1); } })(); We can now specify the base…
Published
-
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 to use. I need it to natively support RGB, HSL, Lab and CMYK. And the latter part is causing unexpected trouble. It seems that there is the notion out there…
Published
-
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 slider change will have on the selected color. Consequently, I needed to create imageless gradients, in order to easily change them. My very first thought…
Published
-
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 seemed great in the neutral and minimalistic environment of a picture viewer, ended up looking way too fancy when viewed in a browser, something that I realized…
Published
-
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”, my presentation was mostly a sum-up of these. It was my first presentation ever, actually, the first time I talked to an audience for more than 1 minute…
Published
-
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’s very similar to what we used as children, when mixing watercolors for our drawings. It makes perfect sense, more than HSL and definately more than RGB…
Published
-
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 select multiple files via a single input control, if you specify a value for the attribute multiple: or, in XHTML: You might not know that Opera supported…
Published
-
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. When writing JavaScript however, it’s a waste of resources to do that (and requires more verbose code), since we can easily check whether the browser is…
Published
-
"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 whether obj is a String obj + '' === obj I always thought that apart from being short and elegant, they should be faster. However, some quick tests gave me…
Published
-
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 probably know about Firebug Lite, but this either requires you to already have the bookmarklet, or include the script in the page. Although Firebug Lite…
Published
-
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 library. In both cases, I understand, and after all, who am I to judge you? I don’t use a library myself either (at least not one that you could’ve heard…
Published
-
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 updates as violently as Google Chrome does. There should be no option to disable them. For anybody. But what about the user’s freedom of choice? This might…
Published
-
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 discusses current RGBA browser support and ways to use RGBA backgrounds in non-supporting browsers. Bonus gift: A PHP script of mine that creates fallback 1…
Published
-
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 1) it doesn’t collide with other properties and 2) you can choose whether to use it or not in that particular browser, since it’s support might be wrong…
Published
-
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 while using them, including various browser quirks and bugs I know of or have personally filed regarding them. In this part I’ll discuss ways to create…
Published
-
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 level. You don’t always want to round to an integer, you often just want to strip away some of the decimals. We probably all know that if we have a function…
Published
-
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 myself wondering every time, so after a bit of research, I wrapped up a little bookmarklet that instantly told me the answer every time. The logic behind…
Published
-
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 setting opacity for an element, you need to find out whether the property that the browser supports is opacity, -moz-opacity (MozOpacity), -khtml-opacity…
Published