Sign in

Adirs Code

@adirs.co
493 followers 1.3K following 302 posts

Head of Development at WeAreKido 🍪 Posts about HTML, CSS, JS 🥠 Figma and UI/ UX 🍫 Retro Games 👾 and Random Thoughts 🧸

PostsRepliesMedia
Adirs Code @adirs.co · 07/09/2026
B because his original name was John, am I right?
120
Adirs Code @adirs.co · 07/09/2026
🔗 @codepen.io link: codepen.io/editor/Adir-...
codepen.io
Cactus animation (SVG Studio)
An animation of a cactus jumping up and down, done in SVG STUDIO (https://svgstudio.org)
000
Adirs Code @adirs.co · 07/09/2026
Jumping Cactus Animation, Made in SVG Studio, Original illustration by @vandubovik.bsky.social #web #animation #tech CodePen link in the comments below 👇
152
Adirs Code @adirs.co · 10/08/2026
New Wrist Watch! 🎉 Inspired by some of my favorite creators on YouTube. What do you think? #tech #watch #wristwatch #casio
000
Adirs Code @adirs.co · 21/04/2026
Are you building or designing websites? Did you know you can change the color of user selection? The scroll bars? The browser accent color? Add Dark Mode automatically? No? Well, do I have an article for you… uxdesign.cc/css-you-didn... #tech #dev #design #uidesign #uiux #uxdesign #productdesign
uxdesign.cc
CSS you didn’t know you could style
Some parts of the browser feel untouchable, like they came built-in from the browser itself. Can CSS help us with that?
050
Adirs Code @adirs.co · 31/03/2026
Thanks. And if you have any feedback, I’ll be happy to hear it.
010
Adirs Code @adirs.co · 31/03/2026
Have you ever wished you could use Markdown in the middle of an HTML document? Now you can! No React needed, no dependencies! No headache! Use it for free, and if you like it - consider to star me on GitHub: adir-sl.github.io/mark-down #markdown #html #dev #frontend #development #github
adir-sl.github.io
mark-down.js — Markdown as a native HTML element
A zero-dependency vanilla JS library. Drop in two files, write markdown directly in your HTML — no build step, no npm, no configuration.
110
Adirs Code @adirs.co · 24/03/2026
Link to SVG Studio: www.svgstudio.org
svgstudio.org
SVG Studio: Animate Everything
Turn static SVGs into buttery-smooth keyframe animations and export clean, self-contained files. Free, no sign-up.
000
Adirs Code @adirs.co · 24/03/2026
Eating my own dogfood. Earlier this week I launched SVG Studio (link the comments), and here I am animating inside my own tool. It feels surreal, everything works, it feels like eating dogfood for the first time and realizing it’s actually yummy. #tech #dev #coding #animation
100
Adirs Code @adirs.co · 20/03/2026
My start in web development was hand coding SVG animations with CSS, since I have a degree in Animation. Today I launch the product I always dreamt about, a web app to make SVG animations visually. Anyway, it’s free and here’s the link: www.svgstudio.org #tech #dev #web
svgstudio.org
SVG Studio: Animate Everything
Turn static SVGs into buttery-smooth keyframe animations and export clean, self-contained files. Free, no sign-up.
030
Adirs Code @adirs.co · 03/03/2026
A link to the article: uxdesign.cc/a-farewell-t...
uxdesign.cc
A farewell to Flash
Adobe Animate, Flash, was like an old friend. We didn’t keep in touch.
000
Adirs Code @adirs.co · 03/03/2026
New Article 🎉 I heard Adobe is killing off Flash/ Animate so I felt so sad and nostalgic that I had to write a quick article about it. In the time it took me to write it, Adobe decided to not entirely kill it (whatever). A link to the article is in the first comment 👇🏼 #tech #adobe #flash #design
100
Adirs Code @adirs.co · 20/02/2026
New CodePen 🔥 What is really Motion Blur? It is a way to duplicate and delay motion elements so they appear “smeared”. How can we have fun with it? With a new dynamic Spinner Loader animation. #tech #dev #Coding Here’s the actual code on @codepen.io: codepen.io/Adir-SL/pen/...
000
Adirs Code @adirs.co · 12/02/2026
New @codepen.io 🔥 I found another use for motion blur - Tooltips! This is a part of my long time exploration of the medium of screen based motion blur as if it was a photographed movement in interface design. #ui #uidesign #coding #dev #tech Here’s the code: codepen.io/Adir-SL/full...
020
Adirs Code @adirs.co · 05/02/2026
I created a Claude Code app using Claude Code, it took less than two hours. #code #coding #ai #aicoding #vibecoding #claude #claudecode
010
Adirs Code @adirs.co · 04/02/2026
🤣
000
Adirs Code @adirs.co · 04/02/2026
New @codepen.io A demo using the new “Stuck” CSS modifier for position sticky headers and such. This used to require JavaScript. A welcome addition to CSS. #tech #dev #css #frontend #dev The code: codepen.io/Adir-SL/pen/...
030
Adirs Code @adirs.co · 03/02/2026
I wrote my thoughts a minute before AI changes all of the development process and none of this will matter… #tech #dev #coding #devlife #frontend #react uxdesign.cc/is-separatio...
uxdesign.cc
Is separation of concerns a goal or a lie?
The one with React, Tailwind and the separation of concerns
000
Adirs Code @adirs.co · 15/12/2025
The Year I Read 52 Books. Interesting experience, can’t recommend. If you’re interested in some book recommendations, please read: adirs.co/p/the-year-i... #book #BookTwitter #bookreview #BooksWorthReading #booklog
adirs.co
The Year I Read 52 Books
How I did it and what I learned about reading and about writing...
010
Adirs Code @adirs.co · 03/12/2025
As Head of Development, I work with a lot of different designers in Figma. These are the mistakes they keep making no matter how senior they are. Do you see these mistakes in your organization too? #design #figma #dev #writing medium.com/design-bootc...
medium.com
Mistakes designers do in Figma all the time
You’d be surprised to find them in your organization too
010
Adirs Code @adirs.co · 24/11/2025
I wrote something that is kinda personal, it’s all my history with Adobe, what apps I use and what licenses I’ve had over the years. I don’t like Adobe business practices and with time I used less and less Adobe products. Can anybody relate? www.adirs.co/p/my-history... #tech #adobe #design
adirs.co
My History with Adobe
How I turned from an Adobe professional user to an alternative seeker
010
Adirs Code @adirs.co · 23/10/2025
I agree. It’s also so gratifying when you actually use them 😅
010
Adirs Code @adirs.co · 23/10/2025
Don’t mind me, just building myself a toolbar assistant to calculate Tailwind CSS x4 padding and margins. I also have Proportional Scale one of calculator, I used to open PHOTOSHOP for that 🤣 Feel fun to develop my own micro tools myself - no AI and no worries. #dev #CSS #buildinpublic
160
Adirs Code @adirs.co · 21/10/2025
Read the whole thing here: adirs.co/p/sora-app-i...
adirs.co
Sora App Icon: a Visual Breakdown
The New Sora App Icon is Giving Away More Than Meets the Eye.
010
Adirs Code @adirs.co · 21/10/2025
I wrote something! A new blog post! 🔥 It’s all about the new icon for the Sora app. Many of you know me as a Developer but I used to be a UI/ UX Designer. This icon took me places, Van-Gogh, The Golem, Pinocchio and Steve Jobs waving the Jolly Roger ☠️ Link in the comments 👇 #design #uiux #app
140
Adirs Code @adirs.co · 03/10/2025
🔥 NEW CODEPEN! 🔥 CSS Amoeba 🦠 This was done mostly with the “filter” property, and it does NOT play nice on mobile. Here’s the @codepen.io link: codepen.io/Adir-SL/pen/... #Tech #CSS #HTML #DEV #WEB
010
Adirs Code @adirs.co · 12/09/2025
Thank you 🙏
000
Adirs Code @adirs.co · 12/09/2025
It all started with our Dev team knowledge base, at first I handled it all in my IDE. But then I had an idea - if it’s mostly Markdown files anyway: Why not use Obsidian? And of course I wrote about it: adirs.co/p/using-obsi... #tech #github @github.com @codepen.io @obsidian.md
adirs.co
Using Obsidian as a GitHub Front-end
Or using GitHub as an Obsidian Back-end, it's the same thing
110
Adirs Code @adirs.co · 07/09/2025
I’m moving my everything app from Craft Docs to Obsidian so I spent more than an hour picking a custom icon. I know, it’s a me problem. #Tech #Obsidian #Markdown #Icon
010
Adirs Code @adirs.co · 01/09/2025
August roundup! 🔥 Every year August is a hard month to get any work done since my kids are at home, but this year I did manage to make 3 new CodePens. Here they are, in case you missed them: adirs.co/p/my-new-cod... #coding #blog #writing
adirs.co
My New CodePens - August 2025
A roundup of all the CodePens from this month.
000
Adirs Code @adirs.co · 27/08/2025
New @codepen.io ! Tried to replicate a game my daughter plays as she’s making up stories using 3 cards at a time. Here’s the code itself: codepen.io/Adir-SL/full... #tech #code #codepen #HTML #CSS
010
Adirs Code @adirs.co · 22/08/2025
I wrote about AI for Thinking vs AI for “problem solving”, shockingly unpopular opinion here… #Tech #AI #unpopular adirs.co/p/thinking-w...
adirs.co
Thinking with AI vs "Problem Solving"
My usage of AI at work and in my personal side projects
001
Adirs Code @adirs.co · 14/08/2025
Believe it or not, this is all one component in Figma, not development at all. When the components are functional, prototyping should be a breeze… @figma.com #figma #design #designer
000
Adirs Code @adirs.co · 12/08/2025
A new blog post 🎉 The real cost of subscription pricing, spoiler: it’s not what you think. Here’s the link: adirs.co/p/the-real-c... #tech #blog #writing
adirs.co
The Real Cost of Subscription Pricing
How come staying informed is so expensive?
001
Adirs Code @adirs.co · 11/08/2025
New @codepen.io 🔥 I’m keeping with the trends, here’s my Glass like material. All done with clean CSS, no extra elements needed! Here’s the code: codepen.io/Adir-SL/full... #CSS #dev #tech #liquidglass
001
Adirs Code @adirs.co · 06/08/2025
I wrote a thing. It’s for Developers who know HTML. #HTML #Dev #Developers #web adirsl.beehiiv.com/p/working-wi...
adirsl.beehiiv.com
Working with UI Libraries without React
Simple clean HTML Component Libraries that anyone can implement
000
Adirs Code @adirs.co · 31/07/2025
I didn’t draw at all for so long but I once drew cartoons almost daily. This isn’t finished, I’ll probably do a full colored version in the future, so stay tuned 😅 Done on my iPad Pro. #iPad #iPadArt #Artist #Sketch #Procreate
011
Adirs Code @adirs.co · 30/07/2025
So he really is the outie 😂
010
Adirs Code @adirs.co · 30/07/2025
He might be a outie but he’s dressed like a innie…
110
Adirs Code @adirs.co · 30/07/2025
Figma added Glass effect to keep with Apple’s new Liquid Glass design. If you’re making mobile apps, you have to somehow make this effect to reflect your app. Figma had to add it, even though I hate that Figma is moving away from web standards. What do you think? #Figma #Design #LiquidGlass #iOS
001
Adirs Code @adirs.co · 28/07/2025
A friendly reminder that AI is aimed to please, not to reflect reality. When asked about software - it will frequently just make up apps, versions or features that don’t exist. Always navigate to a real webpage or a tutorial written by humans, AI is a garbage yes man. #AI #Tech #Google #Gemini
021
Adirs Code @adirs.co · 27/07/2025
I use Gohu, it feels like I play the Retro Pokemon games in my IDE. Got it from NerdFonts: www.nerdfonts.com/font-downloads
nerdfonts.com
Nerd Fonts - Iconic font aggregator, glyphs/icons collection, & fonts patcher
Iconic font aggregator, collection, & patcher: 9,000+ glyph/icons, 60+ patched fonts: Hack, Source Code Pro, more. Popular glyph collections: Font Awesome, Octicons, Material Design Icons, and more
021
Adirs Code @adirs.co · 27/07/2025
One can always put his phone down and not touch it for a couple hours, can’t he? I started this comment with “YOU can always…” but then I realized maybe YOU specifically can’t?
010
Adirs Code @adirs.co · 27/07/2025
Vibe coding is the future of biological warfare, for sure.
010
Adirs Code @adirs.co · 27/07/2025
What app are you making? Do you have something in mind?
100
Adirs Code @adirs.co · 27/07/2025
I don’t know if this opinion is popular or not: I’m tired of hearing people saying about AI that some field (art, coding, music) was (or is) gated by your skill level and AI finally frees us. If you’re not interested enough in a field to learn it, faking interest with AI is nothing. #AI #AIArt
011
Adirs Code @adirs.co · 23/07/2025
Figmaing around. The button is approved 👍 #Figma #FigmaDesign #Design #Tech #UI #UIUX #UIDesign #Awsome #Product #ProductDesign
001
Adirs Code @adirs.co · 21/07/2025
New @codepen.io 🔥 Today it’s a new animation based on the letter “J” twice with a ball going through those “pipes”. Here’s the code: codepen.io/Adir-SL/pen/... #CSS #Tech #Dev
021
Adirs Code @adirs.co · 18/07/2025
New @codepen.io 🔥 This week - an animation that doesn’t close any rings, because sometimes the effort is what counts 😛 #CSS #DEV #Tech Here’s the code: codepen.io/Adir-SL/full...
021
Adirs Code @adirs.co · 17/07/2025
🔥 MY ENDLESS BUTTON COLLECTION 🔥 A new @codepen.io I made to make a little fun of buttons, the buttons are really endless - the more you scroll, the more buttons that are being generated. #dev #CSS #tech Link to the code: codepen.io/Adir-SL/pen/...
011