🔥 New blog post! 🔥
Eigensolutions: composability as the antidote to overfit
A diversion from my other blog posts, as it’s more abstractly about design thinking, with insights that (hopefully) apply on a wide range of creator tools, from visual editors
@javafour
@Ennaaseret7
If my rainbow hair keeps away men like you, that’s just an added bonus!
But don’t generalize your poor taste to all men, give them some more credit. My fiancé loves rainbow hair even more than I do!
Now that all modern browsers support SVG favicons, here's how to turn any emoji into a favicon.svg:
<svg xmlns="" viewBox="0 0 100 100">
<text y=".9em" font-size="90">💩</text>
</svg>
Useful for quick apps when you can't be bothered to design a favicon!
I’m gonna start blanket adding the following rule to all my stylesheets:
:focus:not(:focus-visible) { outline: none }
Gets rid of the annoying outline for mouse users but preserves it for keyboard users, and is ignored by browsers that don’t support :focus-visible.
🎙 *tap, tap* is this thing on?
My husband
@svgeesus
and I are happy to announce that we have forked our DNA — and the merge was successful! — or, in other words, we are expecting a baby girl in early July 2019! 👶🏼
Every foo and bar in technical documentation or slides is a wasted opportunity.
It fails to illustrate WHY what you're talking about is useful, what for, and to get your audience to relate. Nobody relates to foo and bar. People relate to use cases.
Chris (
@svgeesus
) and I are thrilled to introduce Zoe Lilley-Verou. She was born via water birth, 10 days past her due date, on July 12 at 7:26am. We are absolutely smitten and are falling more in love with her every day 🥰
6 years ago, I thought the shorter the code the better, no matter how cryptic it may seem to others.
Now I realize that coding is communication. Not just with the machine, but primarily with other people, including your future self.
Good code balances DRY with good communication.
A historical day for CSS 😀🎉
If you write any components used and/or styled by others, you know how huge this is!
background: if(style(--variant: success), var(--green));
Even if you don’t, this will allow things like:
padding: if(var(--2xl), 1em, var(--xl) or var(--m),
This is a big day for CSS. After 25 years of devs being told that CSS cannot have parent selectors because they’re too slow, Safari TP 137 not only implements :has(), but enables it by default.
And AFAIK
@igalia
is working on a Chrome implementation!
This is big. After 2 years of hard work,
@svgeesus
and I are finally “officially” releasing our library Color.js into the wild! 🌈🎨🎉
My blog post:
Chris’ blog post:
Color.js:
npm:
TIL you can convert letters to their non-accented version by just doing:
str.normalize("NFD").replace(/[\u0300-\u036f]/g, "");
Whoa. No more 1KB lookup tables!
Mind = blown!
From
And it’s supported everywhere!
#jstip
Get a list of all CSS classes used in a page (useful when eliminating unused CSS code) by pasting this in the console:
[...new Set($$("[class]").flatMap(e => [...e.classList]))]
One of the things that puzzle me the most about our industry is why do devs keep choosing React over
@vuejs
.
It’s bloated, produces poor user experiences, makes bigger demands on tooling, respects web standards less, and has significantly poorer DX…
I just …don’t get it.
One of my favorite things about being versed in web development is using dev tools to improve my own browsing experience.
Such as when I type $("video").playbackRate = 1.3 in the console to speed up a video that doesn't have UI for this. 🤓
6 years ago,
@svgeesus
and I met at my first W3C TPAC in Lyon, France.
We got together around 3 years later.
Today, at another W3C TPAC in Lyon, I said yes ❤️
13 years ago, when I was working as a graphic designer, I remember spending ages removing backgrounds from photos so I could use them in a composition. And now it's automatic!
We're truly living in the future. 🤯
Very humbled to be elected to the
@w3ctag
!
Huge impostor syndrome rn.
Huge thanks to every company who voted for me. Special thanks to
@bocoup
and
@openjsf
for travel funding and
@openjsf
for nominating me.
Looking forward to making the Web better alongside fellow TAG members!
Bookmark this: An index of all CSS properties linking to their specifications, autoupdated with every commit:
There is no other resource that includes even properties defined yesterday with no implementation. This is literally generated from the source!
Realization: CSS Nesting also allows you to basically do "else" clauses in selectors.
complex-selector {
if-styles;
:not(&) {
else-styles
}
}
(if you’re wondering what this code is for, it’s for a bookmarklet to show element boxes for educational reasons)
I’m old enough to remember when viewing source would actually teach us something about how the website was built… 😞
I suppose the Web is still more transparent than the completely opaque UIs of native apps, but seeing this kind of gibberish when I open devtools makes me sad. 😢
This is lovely but individual component authors should not need to figure this on their own. Menus and submenus are such a fundamental GUI component that it should be native to the web platform like it is on every other platform…
When I saw
@awesomekling
’s post about Mastodon vs Twitter in my feed I thought “Hmm, I enjoy both” and moved on.
A bit later, I read a few toots and pieced the context together.
TL;DR: People todaynoticed that in 2021
@awesomekling
closed a PR¹ with this tiny change:
The
Some folks have asked why I’m not active on Mastodon.
Simple answer: I like it here. X is full of positive energy and “let’s build!”
Meanwhile, Mastodon is full of negative energy and “stuff sucks and it’s someone else’s fault”
To protect my own mental health, I choose to hang
Can't setup washer/dryer bought in Europe because my iPhone's region is US and the
@hoover_uk
hOn app is not available in the US App Store. If that's not
@internetofshit
, not sure what is.
Hate how Chrome hides the spinner of an <input type="number"> until it's focus/hover? I always found it so annoying, given that the text underneath is clipped anyway.
Fix it with 2 lines of CSS:
input::-webkit-inner-spin-button {
opacity: 1;
}
At
#MirrorConf
,
@brunopbarbosa
just asked me how to make a horizontal progress bar with CSS that changes width AND color based on its value. This was my solution!
This
@css_battle
completely destroyed my productivity tonight. Can't. Stop. Playing. So addictive! BEWARE
Also, who on Earth is this "Romain Deltour" guy and can he teach me his secrets? 😆
Dear men in tech,
I know u think that stuff like this is a compliment, but it comes across as patronizing. We are developers, not "women developers". Introspect why you’re so astonished that someone did well in tech while sporting a vagina. It's typically not involved in coding!
I wrote a new blog post!
LCH colors in CSS: What, why, and how?
Describes what LCH colors are, why they're exciting, and releases an LCH color picker tool I made to visualize!
New blog post!
Today I tried to help a friend who's a CS scientist but not a JS person try out a JS module he found on Github and wow, the modern JS ecosystem is so unfriendly to newcomers it made me embarrassed.
Have you noticed how most people demand scientific proof of the highest caliber when it’s about something they disagree with, but they will spam all their friends with any random blog post that confirms their existing beliefs?
@WallStreetSilv
Errr I don’t think you understand what a PhD *is* or how it works.
Six figures in debt? Lolwut? Do you think you pay tuition or something? My dude, they pay YOU to do a PhD, not the other way around!
So many people don’t realize that a PhD is basically a job. The pay is not
If you're doing technical writing right, coming up with the right examples takes 90% of the time. Explaining things is the easy part.
The tension between making them simple enough to be easy to follow, but still reflect real use cases, not random foo/bar, is so tricky to satisfy
If you cook, this tweet is about to make a huge difference in your life.👇
So, if you put onions in the freezer for like half an hour, they don’t make you cry when you chop them!
I tried it yesterday and it actually works!
You’re welcome. 😁
[New blog post!]: The failed promise of Web Components
This started as a series of tweets, but I quickly realized I needed something more long form to properly unfold my thoughts.
The Web is the only modern programming platform where devs need to spend time building UI just to output a basic message or solicit any input.
alert(), confirm(), and prompt() serve an important function.
Before deprecating them, the platform must offer better alternatives!
🧨 Unpopular opinion: try {} should have been designed not to behave like a regular block wrt block scoping variables.
It’s rarely if ever useful, since its scoping is not conceptually meaningful. Effectively, it’s more of a code annotation than control flow. Unlike control flow
Every time I post that I wish tech X did Y, I get all these dudes mansplaining how I can work around it with today’s X.
I’m so fed up with this.
I wasn't asking how to work around it.
I KNOW how to work around it.
I was merely expressing my wish to NOT have to work around it.
When I shared some screenshots from the Web Dev Intro labs I was working on for the course I’m teaching at MIT, many of you asked for the slide deck.
I’m sharing it today, hope someone finds it useful!
Blog Post with link, instructions and caveats:
Making some web dev intro slides for my students, and this damn tree took me 3 hours! However, it's super flexible and now I can quickly make 5 more.
I made a codepen with it, in case anyone wants it:
Demonstrates: CSS Vars, CSS vars + JS, Flexbox
@thechangj
European here. Europe doesn’t have as much of a morning culture, which is why it has a better night culture. It’s shifted. Especially for Mediterranean countries.
It has recently been brought to my attention that the contrast ratio calculator I quickly whipped together in a flight back in 2012 has mysteriously become one of my most used tools. So I bought a domain for it! Here you go:
That is so awfully dismissive and tone deaf. No, people don’t want Safari to "just go away". People (of all genders!) want Apple to respect user choice and stop forcing everyone to use Safari on iOS whether they want to or not. It’s pretty simple, really.
Gosh. Catching up with tech Twitter this morning and there seems to be an angry pocket of men who really want Safari to just go away.
Do we really want to live in a 95% Chromium browser world? That would be a horrible future for the web. We need more voices, not fewer.
We keep hearing about CSS-in-JS and we tend to assume everyone is doing it.
According to the
@HTTPArchive
only about 2% of websites use *any* CSS-in-JS method, with Styled Components accounting for almost half of that.
It's a whole different world out there folks.
#WebAlmanac
Today’s exciting development.
After 18 years of writing JS, first as a web developer, and then as a library/framework author, I get a chance to join the WG that develops it. 🙏🏼
Thanks
@ljharb
for championing it and
@openjsf
for your support!
*Clicks on green button*
👋🏼
@tc39
!
What are your favorite resources for HTML/CSS/JS beginners?
I’m putting together some resources & lectures for my students. For background: They’re MIT students and know how to program, but may be total beginners in Web dev.
I wish web developers realized how much concern and effort goes into improving the web platform in a way that doesn’t break existing content.
Sometimes to a fault.
Real example from recent discussion:
“We can’t make this change [that would solve a big longstanding author pain
@jacmoe
@Yamazuya
@mauddromgoole
Um, no.
1. It's not just "stating the obvious", it's talking like you know more than the other person.
2. It's not just about the action in isolation, it's also about the frequency. You have no idea how often it happens to us. It's not funny after the 20th time ON THE SAME DAY.
This is the single best article on color spaces I have seen around. Well written, well informed and illustrated with interactive visualizations. Truly brilliant work
@etportis
!
Dear
@Github
,
Please get on with the times and allow SVG uploads in comments. If you’re scared about security you can just use an <img> to display them, which disables scripts and external resources.
Love xx,
Lea
We’ve always told web devs that browsers prioritize what to implement based on developer demand.
There is one exception: SVG.
SVG is used on >65% of websites. Yet, browsers have been *refusing* to work on SVG, ignoring pressure and pain points from web devs.
#StateOfHTML
Achievement unlocked: A mini documentary about my life has been published! Whoa. 😳😊
This February, I got an email that a German company,
@honeypotio
wanted to film a mini documentary about about my life & career path. I thought it sounded fun, so I said yes. Today it's out!
Check out our latest mini-doc with the Queen of
#CSS
,
@LeaVerou
👑
She chats about her love for
#coding
rooted in her childhood, how she ended up at
@MIT_CSAIL
& the power of staying true to yourself.
Check it out! 📽️
@awesomekling
Often fixing typos in docs is someone’s first contribution to a project. But even if it’s drive-by, so what? It’s not like it’s touching code in a substantial way and someone would be stuck maintaining it.
The main question here is “Does this PR leave the project better than
Do you know about the pointer media query? It lets you detect whether a screen is primarily touch-based and is supported everywhere except Firefox!
Demo (try it on a phone too!):
Docs:
It's a shame that every website needs to build its own emoji picker — a nontrivial amount of code and very easy to get wrong/inaccessible/non-inclusive, when the OS already has one.
@whatwg
folks, has any proposal gotten traction for a way to tackle this in HTML?
In my experience more often than not “full stack” means “I’m a backend programmer who thinks frontend is trivial (far left on the Dunning-Kruger curve)”
I made a quick utility to convert SVG paths to all-relative or all-absolute commands and blogged about it. Hope it's useful to someone else too!
Blog post:
Utility:
I visit an e-shop and start browsing to make a purchase. My PURCHASE is INTERRUPTED by a popup asking me to subscribe to their newsletter. What kind of moron thought interrupting customers WHILE THEY ARE BUYING STUFF would improve sales?!
To anyone saying there are libraries for this:
BASIC 👏🏼 I/O 👏🏼 SHOULD 👏🏼 NOT 👏🏼 REQUIRE 👏🏼 A 👏🏼 F*CKING 👏🏼 LIBRARY! 👏🏼
Now let’s say it again louder for the people in the back.
Having to look for a library to do basic stuff is *extremely* hostile to learners (and prototyping)
Today was one of those days where you spend hours and hours on a seemingly simple task, but somehow every step of the way spawns 5 more problems.
9 hours later, you sort of get it done but it’s all held together by duct tape and you feel dirty and defeated. ☹️
How predictable. Dare to share a GUI tool you like and here come the mansplainers thinking you can’t use a terminal or lookup a command. 🙄
Um no dears. I’m not less knowledgeable of the terminal than you. I’m just more aware of usability, having spent 6 years doing a PhD in it.
You think you can teach people who are new to CSS to start layout with the much easier Flexbox & Grid, then you realize 99% of resources they find on the Web are about floats, inline-block, absolute positioning, and table layout. :(
Translation: I only fund 20-something founders who have no responsibilities and no children to feed, and their mommy and daddy can help if the startup fails.
I still can't fund founders who are waiting to quit their jobs before they go full time. I get the financial constraint but I want to back founders who are so compelled that they cant even imagine doing anything else
📣 Announcement!
Google is funding me to design a new
#StateOfHTML
survey, to complement the well-established
#StateofJS
&
#StateofCSS
surveys.
As a believer in transparency and co-design, I’m opening up the design process to community input:
I have huge respect for Douglas and what he’s done for the Web, but this is a bit tone deaf to developer needs.
No, you should *probably* not build a medium or larger web app today by “just” using the DOM directly or with thin abstractions like the one he proposes. Either you
“The DOM is much less deficient and much more portable and reliable. That is why I now recommend abandoning the libraries, which have grown into bloated platforms, and instead using the DOM and plain old JavaScript together.”