AdirCode

Frontend Developer 🍪 Product Designer 🍔 Posts about HTML, CSS, JS 🍩 Figma and UI/ UX 🍫 Retro Games 👾 and Random Thoughts 🧸

[AdirCode @adircode]

I made the new @Apple iMac (#imac2021) with only HTML & CSS, and it rotates in 3D while you can change colors with the buttons at the bottom.
Here’s the @CodePen:
https://t.co/CczI6gJ7OV

[AdirCode @adircode]

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…

https://t.co/sJsdUT3zsm

#tech #dev #design

[AdirCode @adircode]

@avstorm @iconists The AirPods one is crazy.
How did they do it?
Is it all Blender?

[AdirCode @adircode]

@Jane0ri I’m glad you like it.
Send feedback if you have any.
🙏

[AdirCode @adircode]

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:
https://t.co/cmD6Dictik

#markdown #html #developer

[AdirCode @adircode]

Link to SVG Studio:
https://t.co/sKhKJfzeG2

[AdirCode @adircode]

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

[AdirCode @adircode]

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:
https://t.co/sKhKJfzeG2

#tech #dev #web

[AdirCode @adircode]

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:
https://t.co/J75ikyfkZo

[AdirCode @adircode]

New @CodePen 🔥
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.

#tech #UIUX #dev #Technology

Here’s the code:
https://t.co/aRmPEvOqzy

[AdirCode @adircode]

I just created a Claude Code app using Claude Code, it took less than two hours.

#dev #Claude #VibeCoding #ClaudeCode_findy

[AdirCode @adircode]

@srotimi_ui Clarity is key.
The sidebar items could be folders with an item count of docs inside OR it could be filters when a doc can be in multiple “places” at once.
There are many solutions to this, I would add a number count for “all” either at the top or the end to make it clearer.

[AdirCode @adircode]

New @CodePen
A demo using the new “Stuck” CSS modifier for position sticky headers and such.

This used to require JavaScript.
A welcome addition to CSS.

#dev #CodingLife #css #Tech

The code:
https://t.co/ZWrU0SOdOG

[AdirCode @adircode]

I wrote my thoughts a minute before AI changes all of the development process and none of this will matter…

#dev #CodingLife #Technology #tech

https://t.co/CuhrEQvXfA

[AdirCode @adircode]

New @CodePen

I was just playing around with buttons and animations, I really liked how this one turned out, the “clicked” at the end is so satisfying.

The actual code:
https://t.co/FvC153SZUn

#tech #Technology #coding #web

[AdirCode @adircode]

A conspiracy theory I believe:
Disney made Frozen so people won’t find anything but promotional movie stuff when searching online for “Walt Disney Frozen”.

If you don’t know the original conspiracy theory was that Walt Disney was medically frozen.

#Tech #frozen #DisneyPlus

[AdirCode @adircode]

New Article 🔥
When talking about Web Design we often assume the designer is only limited by their imagination.
But that’s only somewhat true, the tools we use to design actually influence the web we design.
https://t.co/j9RDmBRQOC

#Technology #Tech #design #WebDesign #UIDesign

[AdirCode @adircode]

Never pre-ordered anything faster…

#Tech #Technology @Pebble

[AdirCode @adircode]

What a difference 15 years can make…
Top: Anbernic RG DS
Bottom: Nintendo DSi XL

Game: Animal Crossing: Wild World

#Retro #retrogames #gaming #GamingCommunity

[AdirCode @adircode]

Look what just dropped in my mailbox.
Starting the new year right…

#gaming #Nintendo #nds #RetroGaming

[AdirCode @adircode]

A quick life update…

#gaming #RetroGaming #AnimalCrossing #Nintendo