Author of @PostCSS. Russian: @andrey_sitnik 🦋 @en.sitnik.es 🐘 @sitnik_en@mastodon.social
Barcelona, Spain
- Tweets 16,322
- Following 305
- Followers 7,383
- Likes 2,769
Pinned Tweet
In this Twitter account you will find new open source tools, software development jokes, and stories around developing @Autoprefixer, @PostCSS, and @logux_io.
Subscribe to my other accounts about fun STEM facts from Wikipedia @lostinwiki and popular linguistics @linguopunk.
6
5
22
Zen is an Arc-like browser, but based on the Firefox engine.
And it’s open source, unlike Arc.
zen-browser.app
52
180
2,050
226,388
A thread about the future of color in CSS.
Why P3 colors will be the “new retina” that we will all have to support.
How we will write colors in CSS in 2022-2023.
10
234
953
I released a new @PostCSS plugin to fix the 100vh bug in mobile Safari.
github.com/postcss/postcss-1…
Pure CSS. In contrast with previous hacks, it works in Chrome. It allows you to forget about the bug: just write min-height: 100vh, the plugin will insert the hack automatically.
19
120
764
I like the new Zed code editor.
— Works much faster than VS Code
— Font rendering is more beautiful
— 90% of all features are already built-in, no need to install a bunch of plugins for basic work
— AI is built into UI
— Minimalistic design
zed.dev/
22
248
400
60,531
Now we can animate CSS Grid too
css-tricks.com/animating-css…
With it, we can finally make height 0→auto animation
stefanjudis.com/snippets/how…
2
42
344
32,026
ESM war is over.
In Node.js 22 you can just require() ESM libs.
Node.js 22 is here 😎
Featuring: require()ing ESM graphs, WebSocket client, updates of the V8 JavaScript engine, and more.
Big thank you to @_rafaelgss and @satanacchio for their work on this 🎉
13
23
330
52,301
Sucrase is an alternative to Babel which is 16 times (!) faster than Babel and 2 times faster than esbuild.
In this project, @alangpierce shows that esbuild magic is not only in Go. Good parser/AST design and memory usage are more important.
github.com/alangpierce/sucra…
8
62
324
While I am on parental leave my colleagues from @evilmartians are making amazing content.
@d_kzlv explained how to use oklch() in @tailwindcss to create dynamic theme (even dark/light variants).
evilmartians.com/chronicles/…
Code:
github.com/dkzlv/tw-dynamic-…
46
330
40,518
There is a dangerous attack by replacing URL in npm/yarn lock file.
Attacker can send a big PR with dependencies update and replace one URL in lock file from npmjs.com to their own server.
dev.to/kozlovzxc/injecting-b…
8
75
319
NtechLab, company made Russian surveillance system, keep its office in the Cyprus.
dnb.com/business-directory/c…
I am so angry! It is so dirty to help build a repression tool for Putin while you moved to Europe.
Why are they not in sanction list?
6
120
299
My Nano Stores are recommended by Astro as a framework agnostic and minimalistic state manager 😍
docs.astro.build/en/core-con…
7
30
318
46,758
Animated QR codes to transfer more data
github.com/divan/txqr
5
125
285
With new FF 128 now all browsers support Relative Colors in CSS.
For example, you can specify that hover color is always 10% lighter and then just set colors for button states and hover will recalculate itself.
So I updated my article about OKLCH:
evilmartians.com/chronicles/…
2
23
230
14,544
The Edge browser team is abandoning React (the browser UI is done on web technologies) and now their UI is getting 40% faster.
I’ve been saying for a long time that modern frameworks have advanced a lot relative to React with its slow VDom.
theverge.com/2024/5/28/24166…
12
39
216
52,926
I understand that sorting imports or keys by length is a strange approach.
But how much I like it when the code itself looks nice. As if in doomed world we have created, there is room for beauty and absolute order.
What do you think?
github.com/azat-io/eslint-pl…
29
8
213
60,314
I publish a new article: “How to Favicon in 2021:
Six files that fit most needs”.
Let’s stop to use 20+ files from outdated generators and guides.
evilmartians.com/chronicles/…
6
45
195
PostCSS downloads:
~3600M: last 12 months
~11000M: last 7 years
🤯 @nextjs downloads
~200M: last 12 months
~400M: last 7 years
Truly unbelievable even for someone who obsesses about it day and night 😁
6
9
193
67,017
My slides from #HolyJS: why front-end is dying and where we should move.
Initially, this talk should be about promoting your open source project, but in the current hype culture, there is no way to unknown developers to promote their work.
slides.com/ai/frontend-is-dy…
7
57
191
Many people use Google Lighthouse, which helps you make your website faster.
@Mozilla has a similar Observatory service about security.
observatory.mozilla.org/
Check your website and set recommended headers.
3
73
185
Browsers can switch pages instantly when you press Back.
They save a memory snapshot of the JS environment and the DOM to disk and simply launch the environment back.
web.dev/bfcache/
Check that your code is ready for this. For example, re-loads data from localStorage.
2
33
187
20,815
An unknown person joined the core team of a popular library where the author burned out and then inserted a backdoor.
And large corporations continue to ignore the problem of burnout of library maintainers, on whom their business depends.
The xz situation is absolutely insane and almost certainly state sponsored.
This is an excellent example of a widely used software being maintained by basically one person.
Read this web article and then frown and become sad.
boehs.org/node/everything-i-…
5
20
152
24,203
Thread of how a tourist can survive in China in 2023.
China doesn’t have Google Maps or Uber. China just has opened the borders, but if you go there, you need to integrate into their digital platforms.
12
19
164
73,216
New Firefox DevTools got a very important feature for unnecessary horizontal scroll debugging.
Clicking on the “scroll” badge will show the children causing an overflow.
hacks.mozilla.org/2020/11/fi…
38
159
A special plugin to clean webpack build from unnecessary Moment.js locales. Cleaning bundle from locales is must-have things for any Moment.js users since this locales are huge. You can clean them without the plugin but plugin “just works”.
github.com/iamakulov/moment-…
3
45
159
Most of static websites do not need React.
1. 300 KB of JS is too big for most of landings.
2. You can split CSS, JS, and HTML to components without React.
13
33
150
Svelte 4 was released!
No big features, since it mostly refactoring before Svelte 5.
Cool part is node_modules footprint reducing from 10 MB to 3 (and subdependencies from 61 to 16).
svelte.dev/blog/svelte-4
2
17
135
18,159
I published an article about the new oklch() color format in CSS and why it’s better than hex, rgb() or hsl().
Upcoming CSS specs will improve colors a lot (finally, native color modifications). OKLCH color space is one new feature from these specs.
evilmartians.com/chronicles/…
1
41
133
Wrote an article how I see a solution to stop this “JS vs CSS” or “JS-JS-JS vs HTML-JS-CSS” war
dev.to/evilmartians/css-and-…
9
43
123
There is amazing `pnpm deploy` command in @pnpmjs.
It copies your project (with monorepo support) to dist/ removing devDependencies to reduce security risks. Then you copy dist/ to Docker image.
pnpm.io/cli/deploy
Here is how I use it:
github.com/hplush/slowreader…
4
14
126
7,724
Very interesting idea by @keithamus of replacing CSS classes to custom tags (<my-card>), data-attributes and :state().
keithcirkel.co.uk/css-classe…
16
24
125
18,373
PGlite (WASM build of PostgreSQL by @ElectricSQL) is not just a way to get powerful database on the web client.
It also simplifies Node.js development since you do not need to run separated PostgreSQL service.
And @DrizzleORM supports it out-of-the-box.
orm.drizzle.team/docs/get-st…
1
6
123
5,868
If on your project you have pre-commit hook by lint-staged, try to replace it to nano-staged.
It has a much smaller footprint in node_modules and works faster.
github.com/usmanyunusov/nano…
5
10
119
7,842
Instead of overflow: hidden, you can use border-radius: inherit to avoid background of children’s elements bleeding out of the border radius of the parent element.
For example, since overflow will cut off popovers, etc.
css-tricks.com/preventing-ch…
2
14
118
6,517
Wrote a guide about 11 popular HTML and JS mistakes in forms.
Many big companies make them in even a simple login forms.
Use it as checklist for next PR review.
evilmartians.com/chronicles/…
23
113
20,245
I tried pnpm instead of yarn 3 in the app and I like it a lot.
It is exactly what I expect from “yarn 2” to have the same API, but faster and without bugs.
Should I start to use pnpm in my open source libraries? Do you see pnpm in other open source?
21
10
113
npm is behind all other package managers in most of the cases.
Yarn 1 is dead.
Yarn 2+ was created for PnP and requires too many configs for simple open source projects.
This is why I am switching to pnpm.
All Logux repositories was moved from Yarn 1 to @pnpmjs. We also added pnpm examples to docs on logux.io/.
5
12
111
Cute animation follow the cursor, but close eyes in password field
codepen.io/dsenneff/pen/QajV…
3
40
111
Modern CSS has media query for blocks with a scroll
developer.mozilla.org/en-US/…
developer.mozilla.org/en-US/…
1
10
108
25,259
“Open source is political” only applies to US politics.
If something happens outside of US context, tech Twitter will be silent.
Remember it next time when US developer will come to your open source project and ask to rename option because it is important for US politics.
Twitter please make this viral. There's a civil war going on in Belarus cuz of rigged elections. Their president sits in the office for 26!!! years. That's crazy. People are dying on the streets. Several journalists are missing. We supported #BLM movement now help us please 🙏🏽
4
33
110
I just released a new JS library KeyUX to create a user-friendly keyboard UX for websites.
Not just for a11y, but for any professional tool in general.
github.com/ai/keyux
3
16
106
10,700
Nano ID is an extremely small JS library (139 bytes!) to create IDs.
But @polemius found a way to reduce another 2 bytes. He wrote a script using artificial evolution to find better for gzip symbols order in the alphabet.
His article about this hack:
dev.to/polemius/how-i-reduce…
2
24
100
Do still thinking of what JS framework you should choose? Miyamoto Musashi in 17 century did the best answer for your question.
“You should not have a favorite weapon. To become over-familiar with one weapon is as much a fault as not knowing it sufficiently well”.
1
40
104
Received $2000 donation from Microsoft to @PostCSS, @Autoprefixer and other my projects. They donated many projects that day.
Thanks a lot to people who promote this project in the company and developers who highlight my projects.
github.com/sponsors/ai
4
104
4,608
Don’t use “carousels” on websites.
They look cool only in Figma. Users usually don’t like them, and developing them right is almost impossible.
A simple list will be much easier to use and develop.
shouldiuseacarousel.com
5
19
101
11,459
Node.js (20.11.0) finally got “__dirname” for ES modules: import.meta.dirname
github.com/hplush/slowreader…
1
20
98
9,810
If you are making dark theme support for your website, don’t forget to add :root { color-scheme: light dark }. It tells Safari to use dark scrollbar and buttons.
webkit.org/blog/8840/dark-mo…
19
95
Here is my open-source drama to be fully transparent about criticism addressed to me.
Summary: Colorette author dislikes that I fork his project.
Threat with how I see this problem (let’s discuss open-source ethics) ↓
nitter.app/jorgebucaran/status/14…
2
19
93
I just bought @FrameworkPuter 13 as my main laptop for web development.
There is no just alternative with the same level of Linux support.
Also:
— AMD CPU (“M1” for Linux laptops)
— Charging via USB-C from both sides of laptop
— Ability to update CPU to the new generation
11
5
96
21,911
We made a big update for our OKLCH color picker 1.1.
OKLCH is a color format wide gamut colors support and great math for design systems.
We added 3D and new color space render with Web Workers.
oklch.com
↓ A small thread with technical details
1
25
85
16,173
Introducing our new project for web developers. We (@romanshamin and I) have created the OKLCH color picker and сonverter.
oklch.evilmartians.io/
↓ Thread: here's why oklch() could replace hex, rgb(), or hsl() in CSS and why you'll need this tool.
6
18
81
I just updated my famous website favicon guide:
evilmartians.com/chronicles/…
— Webmanifest icons are now optional (for PWAs) since browsers stopped using them in normal UIs
— We added maskable icons. Android will cut them into a special shape depending on the system theme.
2
16
91
9,730
I’m turning 37 today!
If you are in Barcelona, come join the party at 19:00 in La textile collective. No gifts necessary.
maps.app.goo.gl/MnSnr1frtNwj…
Or you can always donate me on GitHub.
github.com/sponsors/ai
16
3
76
5,188
During the migration @logux_io from Jest to uvu I found that I can’t find a small spy library for methods with good TypeScript support.
In an hour, I made my library with only 5 KB in your node_modules, minimalistic API and optional mocking.
github.com/ai/nanospy
3
9
80
tinybench is a JS benchmark with zero dependencies and bench.warmup() which makes the results more reliable
github.com/tinylibs/tinybenc…
We moved Nano ID to it—works well.
github.com/ai/nanoid/commit/…
2
4
77
5,953
Node.js no longer needs libraries for colored output to the console.
They added styleText to node:util, which does the job of chalk or picocolors.
github.com/hplush/slowreader…
9
80
4,243
Got $100 donation from @vite_js on my Github!
github.com/sponsors/ai
Very happy also for getting recognition from guys like this 😻
1
3
74
12,460
Good idea from @iamakulov (he is great in website performance, highly recommend). window.addEventListener('resize', cb) can be replaced with window.matchMedia(media).addListener(cb), which will call JS only on specific width changes
github.com/ai/sitnik.ru/pull…
2
12
81
I just finished a website for @logux_io. Check it out:
logux.io
We did a few experiments about how we can improve the standard open-source tool’s website.
github.com/logux/logux.io
In the thread below, I will try to explain these UX and tech experiments.
5
23
78
“Can I Use” for accessibility properties support in screen readers (JAWS, Narrator, NVDA, Orca, TalkBack, VoiceOver) or voice control.
a11ysupport.io/
38
72
OKLCH color picker is my favorite type of app that seems very simple, but hides many tricks inside.
oklch.com
In this thread I’ll collect various hacks of the project.
github.com/evilmartians/oklc…
1
13
76
5,003
Today, I will kill Internet Explorer.
Browserslist 4.21 is ready with many new features.
But the main change is that IE 11 will be added to `dead` query and removed from the default browsers.
Just need to find a cute hedgehog GIF to fit @Browserslist feed cute style.
1
12
74
Internet Explorer support will end in 2022. IE was born in 1995.
So Internet Explorer will join the “Club 27”.
1
19
72
Next week it will be 5 years since the first @PostCSS release and 5 years since my experiment of a month without any computers and digital devices.
So we translated old article with my conclusions, how this month without computers changed me.
dev.to/iskin/how-a-month-wit…
2
15
72
This week @github just banned all users from Iran and Crimea. They can’t see or push the code.
medium.com/@hamed/github-blo…
Even GitHub Pages content is banned.
VPN will not help. GitHub banned users, who used Iranian IPs in the past.
2
62
73
I prefer LanguageTool to Grammarly, since it is open source, supports many languages and can be run locally.
But I just found that I can add it to VS Code to help me to write docs
marketplace.visualstudio.com…
I added it to repo of my configs
github.com/ai/environment/co…
2
10
73
6,213
We replaced globby and fast-glob with tinyglobby (by @superchupu) in Size Limit and postcss-mixins to reduce dependencies from 23 to 2.
github.com/SuperchupuDev/tin…
While some complain about the node_modules size, we with @e18e_dev, are making the Node.js ecosystem lighter.
2
8
71
3,494
Like having CSS of React component in the same JS files, but don’t want to compile CSS in client-side runtime like in the most CSS-in-JS?
css-literal-loader by @monasticpanic is a CSS-in-JS, which compiles styles to static CSS on Webpack build step.
github.com/4Catalyzer/css-li…
2
14
64
Found a great test runner uvu by @lukeed05.
Do not use global API (like expect() or it() in Jest), super lightweight (Jest takes 25 MB in node_modules), fast.
Concerning bad ESM support in Jest, I am thinking of migration.
github.com/lukeed/uvu
9
11
64
Moved sitnik.ru from HSL to LCH colors with postcss-lab-function polyfill.
HSL has a problem: changing the hue changes the brightness. I think new LCH and OKLCH are good candidates for universal way to write color in CSS.
github.com/ai/sitnik.ru/comm…
4
11
68
Great idea of mixing good old skeuomorphic design with modern simple design
dribbble.com/alexplyuto
2
14
70
We launched our open source OKLCH color picker at Product Hunt!
producthunt.com/posts/oklch-…
It is not about the picker itself. We want to help design community in transition to using system for choosing colors. And this system needs a good math (OKLCH).
3
21
68
22,775
“Andrey’s article is still likely the best reference for the most practical favicon markup”
Very pleasant words by @chriscoyier on @CSS Tricks.
css-tricks.com/favicons-how-…
This article about favicon best practice (with a recent fix for SVG icon for Chrome)
evilmartians.com/chronicles/…
9
61
Are you want to try @sveltejs, but you are waiting for @typescript support? This new project could be interesting for you.
github.com/halfnelson/svelte…
5
15
62
JS library returns clock emoji symbol with the current time in arrows position. Useful for making UI more cute. We use it in our chatbots.
github.com/gazay/node-emoji-…
1
20
65
It is better to use `animation-play-state: paused` in (prefers-reduced-motion: reduce) media query instead of `animation: none`.
`paused` renders the first keyframe. `none` loses properties from keyframes.
github.com/ai/sitnik.ru/blob…
2
16
54
pnpm can run scripts in parallel. Just pass RegExp to pnpm run.
If you have monorepo, use also --recursive --include-workspace-root to find scripts in subprojects too.
For instance, it speeded up Nano Stores tests by 1.6 times.
github.com/nanostores/nanost…
1
13
60
9,380
Recently found @penpotapp, open source alternative for Figma.
I used it to create an illustration for my keyboard layout and like the experience. Everything works as expected.
penpot.app
1
8
64
5,377
We continue supporting our article about minimal favicon set.
In new version we replaced sizes="any" to "32x32" for ICO file. It prevents Chrome from downloading both ICO and SVG files.
evilmartians.com/chronicles/…
2
6
61
5,429
Do you remember a neural network for smart code auto-completion? It is now available for most popular text editors (including VS @code, @AtomEditor, Sublime Text, Vim, WebStorm).
tabnine.com/
2
11
57
Visited the second @SvelteSociety meetup in New York. @Rich_Harris, the creator of @sveltejs show adaptive SVG hacks and @swyx show his static sites on Svelte experiments. The meetup was really cozy.
3
8
54
Nano ID now has cool logo by @antiflasher. He created logos for most of my open source projects (@Autoprefixer, @Browserslist, Size Limit).
github.com/ai/nanoid
13
57
Cool side menu opening animation
dribbble.com/shots/4127292-A…
1
7
56
When the scribe’s joke went too far and now we have special symbol in the Unicode
The most strange letter in the world is a “Multiocular O” from Russian. It was used very rarely and only in “many-eyed seraphims” word.
en.wikipedia.org/wiki/Multio…
2
17
49
CommonJS applications can’t use a library with only ES modules.
@sindresorhus announce the migration of his 1K+ libraries to pure ESM without CJS. It will cause a chain reaction.
blog.sindresorhus.com/get-re…
2021 will be a year of big ESM migration in Node.js community.
4
10
56
If you use Bootstrap only for grids, now you can remove it and use CSS Grid Layout, which is supported by all browsers including IE 10-11.
How to use grids in IE by Autoprefixer:
css-tricks.com/css-grid-in-i…
Why it is a good idea to remove Bootstrap:
evilmartians.com/chronicles/…
1
26
51
Types in TypeScript is a Turing completeness language.
Just for fun, people made a SQL database on top of these types (not in TS, but on types, database will disappear after compilation to JS).
github.com/codemix/ts-sql
2
7
55
8,014
I released Size Limit 1.1, the biggest release of the project. @MaksimBalabash found a way to track JS execution time.
github.com/ai/size-limit/
For example, CI can check that your app JS will be downloaded and executed in 2 seconds. It is like linter, but for performance.
23
51
Bought a new laptop, Lenovo ThinkPad X1 Gen 9.
The best update in my life.
— A really new level of keyboard comfort
— Official Linux support
— 14" 16:10 4K screen
9
2
55
More context of how NtechLab’s technology is used against people in Russia by Putin’s regime.
And this company operate in Cyprus without real problems.
We should add them to the sanctions list.
1
7
50
I finally released Size Limit 1.0. The tool to find why a small JS lib adds 100 KB to a project. It will show error in pull request if it bloated the size.
github.com/ai/size-limit/
Add to your open source JS projects. Send PR to another JS libs if you want to reduce its size.
1
20
48
