Adirs Code
@adirs.co
Head of Development at WeAreKido 🍪
Posts about HTML, CSS, JS 🥠
Figma and UI/ UX 🍫
Retro Games 👾
and Random Thoughts 🧸
Posts about HTML, CSS, JS 🥠
Figma and UI/ UX 🍫
Retro Games 👾
and Random Thoughts 🧸
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
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
October 23, 2025 at 1:44 PM
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
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
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
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
October 21, 2025 at 9:54 AM
🔥 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
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
October 3, 2025 at 2:19 PM
🔥 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
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
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
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
August 27, 2025 at 11:33 AM
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
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
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
When the components are functional, prototyping should be a breeze…
@figma.com
#figma #design #designer
August 14, 2025 at 11:56 AM
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
When the components are functional, prototyping should be a breeze…
@figma.com
#figma #design #designer
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
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
August 11, 2025 at 1:20 PM
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
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
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
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
July 31, 2025 at 2:42 PM
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
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
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
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
July 30, 2025 at 1:13 PM
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
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
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
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
July 28, 2025 at 5:42 PM
Figmaing around.
The button is approved 👍
#Figma #FigmaDesign #Design #Tech #UI #UIUX #UIDesign #Awsome #Product #ProductDesign
The button is approved 👍
#Figma #FigmaDesign #Design #Tech #UI #UIUX #UIDesign #Awsome #Product #ProductDesign
July 23, 2025 at 1:40 PM
Figmaing around.
The button is approved 👍
#Figma #FigmaDesign #Design #Tech #UI #UIUX #UIDesign #Awsome #Product #ProductDesign
The button is approved 👍
#Figma #FigmaDesign #Design #Tech #UI #UIUX #UIDesign #Awsome #Product #ProductDesign
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
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
July 21, 2025 at 11:37 AM
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
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
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...
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...
July 18, 2025 at 8:41 AM
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...
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...
🔥 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/...
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/...
July 17, 2025 at 10:54 AM
🔥 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/...
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/...
Apparently this button design is impossible to achieve with Tailwind CSS because ring-offset is not compiled into outline-offset but into box-shadow.
You can fake it with a custom color between the button and outline but you’ll never be able to show the background below.
#CSS #tailwind #TailwindCSS
You can fake it with a custom color between the button and outline but you’ll never be able to show the background below.
#CSS #tailwind #TailwindCSS
May 26, 2025 at 6:28 PM
Apparently this button design is impossible to achieve with Tailwind CSS because ring-offset is not compiled into outline-offset but into box-shadow.
You can fake it with a custom color between the button and outline but you’ll never be able to show the background below.
#CSS #tailwind #TailwindCSS
You can fake it with a custom color between the button and outline but you’ll never be able to show the background below.
#CSS #tailwind #TailwindCSS
Me thinking about the OpenAI possible AI pin, If they’re smart they won’t fall into the rabbit hole (pun intended) of AI pins.
I really think they should instead do something closer to an AI in headphones or in smart glasses or something.
#AI #AIpin #JonyIve #OpenAI #Tech #Apple #Meta #Wearables
I really think they should instead do something closer to an AI in headphones or in smart glasses or something.
#AI #AIpin #JonyIve #OpenAI #Tech #Apple #Meta #Wearables
May 22, 2025 at 11:14 AM
I just got the Aya Neo Limited Edition Messenger Bag, it’s made for the Pocket DMG but I’ll use it for my Analouge Pocket.
I can confirm it’s the perfect size for: Analogue Pocket, Anbernic rg40xxv, GameBoy DMG, GameBoy Color and even the DSi XL.
Totally worth the 35$.
#gaming #retro #ayaneo
I can confirm it’s the perfect size for: Analogue Pocket, Anbernic rg40xxv, GameBoy DMG, GameBoy Color and even the DSi XL.
Totally worth the 35$.
#gaming #retro #ayaneo
May 21, 2025 at 10:26 AM
I spent way too much time looking for a new productivity app, and even though they’re all functional, only these are actually well designed apps:
1. Craft Docs (Twos is my second choice)
2. My Mind
3. Todoist (Superlist is my second choice)
So what are YOU using?
#Tech #Design #AppDesign
1. Craft Docs (Twos is my second choice)
2. My Mind
3. Todoist (Superlist is my second choice)
So what are YOU using?
#Tech #Design #AppDesign
April 27, 2025 at 2:27 PM
I spent way too much time looking for a new productivity app, and even though they’re all functional, only these are actually well designed apps:
1. Craft Docs (Twos is my second choice)
2. My Mind
3. Todoist (Superlist is my second choice)
So what are YOU using?
#Tech #Design #AppDesign
1. Craft Docs (Twos is my second choice)
2. My Mind
3. Todoist (Superlist is my second choice)
So what are YOU using?
#Tech #Design #AppDesign
TIL
In React, some components can be TypeScript (tsx files) and some can be JavaScript (jsx files), you don't HAVE TO choose, each one can be different. It still works.
#Development #TIL #React #ReactJS
In React, some components can be TypeScript (tsx files) and some can be JavaScript (jsx files), you don't HAVE TO choose, each one can be different. It still works.
#Development #TIL #React #ReactJS
April 22, 2025 at 2:37 PM
TIL
In React, some components can be TypeScript (tsx files) and some can be JavaScript (jsx files), you don't HAVE TO choose, each one can be different. It still works.
#Development #TIL #React #ReactJS
In React, some components can be TypeScript (tsx files) and some can be JavaScript (jsx files), you don't HAVE TO choose, each one can be different. It still works.
#Development #TIL #React #ReactJS
🔥 𝗟𝗢𝗧𝗧𝗜𝗘 𝗣𝗟𝗔𝗬𝗘𝗥 🔥
Doing some architectural change this week, the older version (background window) is running an electron app and the new version (foreground window) isnow a fully functional @tauri.app app.
It will make a smaller and more efficient package.
#BuiltInPublic #development
Doing some architectural change this week, the older version (background window) is running an electron app and the new version (foreground window) isnow a fully functional @tauri.app app.
It will make a smaller and more efficient package.
#BuiltInPublic #development
April 21, 2025 at 9:31 AM
🔥 𝗟𝗢𝗧𝗧𝗜𝗘 𝗣𝗟𝗔𝗬𝗘𝗥 🔥
Doing some architectural change this week, the older version (background window) is running an electron app and the new version (foreground window) isnow a fully functional @tauri.app app.
It will make a smaller and more efficient package.
#BuiltInPublic #development
Doing some architectural change this week, the older version (background window) is running an electron app and the new version (foreground window) isnow a fully functional @tauri.app app.
It will make a smaller and more efficient package.
#BuiltInPublic #development
Everyone is complaining about the Nintendo Switch 2, it’s too expensive, it’s not OLED, it’s too heavy, battery life is worse etc.
My prediction: 2 Million units sold in the first month. Yes, TWO MILLION.
#Switch2 #Nintendo #NintendoSwitch
My prediction: 2 Million units sold in the first month. Yes, TWO MILLION.
#Switch2 #Nintendo #NintendoSwitch
April 4, 2025 at 6:05 PM
Everyone is complaining about the Nintendo Switch 2, it’s too expensive, it’s not OLED, it’s too heavy, battery life is worse etc.
My prediction: 2 Million units sold in the first month. Yes, TWO MILLION.
#Switch2 #Nintendo #NintendoSwitch
My prediction: 2 Million units sold in the first month. Yes, TWO MILLION.
#Switch2 #Nintendo #NintendoSwitch
LOTTIE PLAYER 🎉
Now that we released a Windows version, I can finally run my own software on my own gaming PC, and yes it’s a handheld.
Feeling surreal
👏
#BuildInPublic #Development
Now that we released a Windows version, I can finally run my own software on my own gaming PC, and yes it’s a handheld.
Feeling surreal
👏
#BuildInPublic #Development
April 3, 2025 at 10:19 AM
LOTTIE PLAYER 🎉
Now that we released a Windows version, I can finally run my own software on my own gaming PC, and yes it’s a handheld.
Feeling surreal
👏
#BuildInPublic #Development
Now that we released a Windows version, I can finally run my own software on my own gaming PC, and yes it’s a handheld.
Feeling surreal
👏
#BuildInPublic #Development
𝗟𝗢𝗧𝗧𝗜𝗘 𝗣𝗟𝗔𝗬𝗘𝗥 𝗨𝗣𝗗𝗔𝗧𝗘 🔥
Now you can officially download both Mac AND Windows versions from our official website.
Everything is so official now
🤣
#BuildInPublic #Lottie #Development
Now you can officially download both Mac AND Windows versions from our official website.
Everything is so official now
🤣
#BuildInPublic #Lottie #Development
April 2, 2025 at 12:11 PM
𝗟𝗢𝗧𝗧𝗜𝗘 𝗣𝗟𝗔𝗬𝗘𝗥 𝗨𝗣𝗗𝗔𝗧𝗘 🔥
Now you can officially download both Mac AND Windows versions from our official website.
Everything is so official now
🤣
#BuildInPublic #Lottie #Development
Now you can officially download both Mac AND Windows versions from our official website.
Everything is so official now
🤣
#BuildInPublic #Lottie #Development