A Farewell to Flash.

Introduction

Macromedia Flash, now Adobe Animate was my first introduction to both design for the web and web development, It was the first program I learned inside and out - after Adobe photoshop.

Knowing Flash (as I prefer to call it) was my entry point into the job market, my first few serious opportunities that I got - I only got because I knew Flash very well, as a designer, as a developer and even as an animator.

After I saw that it got me a good job, I repeated this formula with After Effects and then again with Figma, all of them got me better jobs by mastering those new tools.

But Flash wasn’t just a tool like After Effects is, it was really a platform and since Adobe might be killing it off I thought it will be fun to remember what Flash really was and what it could have been.

Adobe was killing Flash, and then it decided to keep it in “maintenance mode”.

What Flash really is

Flash, at its heart is a desktop program developed by Adobe (formerly by Macromedia) to make rich and interactive experiences for the web and more.

To this day Flash is the only application that was able to perfectly marry these 3 products into one:

1. A vector design tool

2. A professional animation software

3. An integrated development environment (IDE)

No matter the aspect that made one use Flash, as an animation tool, vector design or as an IDE it was still a marvelous tool, of course all three are not award winning experiences (I can hear the developers yelling about lousy debugging options) but they were all more than good enough.

Because of that Flash got to be so popular that at some point in late 2007 it was estimated that 50% of the internet was Flash based, which meant that going online without a Flash Player (a small browser plugin that plays Flash frames inside HTML) was almost impossible.

Flash was so much everywhere that you could not browse the web without it, so much so that Steve Jobs had to release an open letter in 2010 defending Apple’s decision to not include Flash player on the iPhone, even though he insisted that the iPhone runs the ”real” web and not a baby version of it.

Big sites like YouTube, Newgrounds, Cartoon Network, Disney and many more relied on Flash as their primary technology for their online identity.

Even today, as technology got so advanced, it’s almost impossible to make an animated and scripted beautifully designed online interactive experience as we could make with Flash in 2005.

Newgrounds homepage, circa 2008.

Today, the most talented human being who knows everything about design and development - would still need to know: HTML, CSS, JavaScript, React, GSAP, Figma and have a great sense of design and UX, to even remotely mimic the Flash capabilities from 20 years ago.

Not to mention Flash games, which were all the rage in the early 2000s but completely disappeared from the internet, right now it’s really hard to make an online game that run in your browser, much harder than it should be, as a result most gaming is now done in mobile apps and dedicated consoles.

What Flash could have been

If Adobe didn’t kill it, Flash could have been (and it was) a great tool for animation, many animation productions were using Flash as their main program, including My Little Pony, Teen Titans Go!, Foster’s Home for Imaginary Friends and The Powerpuff Girls.

Flash could also make mobile apps for both iOS and Android and, if Adobe had pushed it, it could have been a standard for cross platform app development, much like React Native or Flutter ended up being.

Adobe could also take Flash into the gaming industry, giving it more advanced 3D capabilities and rival Unity and Unreal Engine, coupling it with the cross-platform app building capabilities it already had could have been a dream.

Finally, I think Flash didn’t get to live to see the era of AI in its full glory, but Flash could have been rebranded and become a platform for tool building, as it is already a visual builder and a code editor, making it something new for the AI era.

Foster’s Home for Imaginary Friends, Cartoon Network, 2004.

Conclusion

When I think about more complex software like Unity, Xcode, Touch Designer and Blender, I can’t help myself from wondering how Flash could have fit in.

I understand Adobe’s decision to stop supporting it, even though I wish there was anything else that could replace it, I understand Flash had run its course and Adobe doesn’t need to spend more time and money maintaining it.

But it sucks, it feels like losing a friend, even though we weren’t keeping touch for the last few years, it still hurts to know it’s gone.

Still it’s amazing to see how many capabilities Flash had, not all of them included in today’s modern tooling, making a Figma prototype is in some ways more constrained and less fun that Flash ever was.

Building in AI tools like Lovable just hits different, somehow all these tools are quicker and work great for companies and corporations but for building alone in your bedroom - they feel less personal, less human than Flash was, too perfect, too polished.

Flash was a flawed program with many issues and security holes but it did democratized building for the web and online games in a way no other tool did.

And for that - I will miss it.
Thank you for reading.

Sources:

Thoughts on Flash / Wikipedia
Thoughts on Flash / Steve Jobs, 2010 (PDF)
Adobe Animate is shutting down next month / The Verge
Adobe Flash / Wikipedia
Adobe Animate / Wikipedia
Top 10 Best FLASH Cartoons / YouTube

When I started learning about web development I learned clean HTML, vanilla JavaScript and pure CSS, which are three different ways of saying: “No Frameworks”.

That’s the way most developers learned to code, at least in my age group, since we didn’t have any framework other than jQuery back then, and AI coding assistants weren’t a thing yet.

Years later I did learn React (a JavaScript framework) and I did had to get to know Tailwind (a CSS framework) for work projects so everyone in the development team would be on the same page.

For years I didn’t understand why React or Tailwind worked in the way they did, I felt frustrated because every little thing seemed to require more work then in plain JavaScript or CSS.

I didn’t think those frameworks save me much time or work in the long run and I was annoyed that I had to use them every day.

When I asked other developers about that, they often cited the concept of “separation of concerns” as a reason that makes React simpler to use or more suitable for team projects.

At the time I didn’t get it. But now — after years of working with React and Tailwind I think I’m finally getting it. If you’re anything like I was, confused or frustrated about it, please keep reading.

What is separation of concerns

Separation of concerns is a programming term that means that any “problem” can be separated into smaller and easier to deal with “concerns”.

In our example the “concerns” are just long code that is hard to grasp all at once. HTML has a few ways of dealing with code that is too complex already built-in to the technology.

One way we can handle code that’s too long is to separate it into different files — HTML for the content, CSS for the styles and JavaScript (js files) for functions.

This way you can more easily separate the different areas you’re dealing with: HTML for the structure, CSS when you handle the design and JavaScript when you handle the hardcore programming stuff.

The big 3 file types: HTML, CSS and JS.

Of course in real projects every file will be in multiples, multiple HTML files for different pages (or parts of pages), multiple CSS files for different aspects of the design and multiple JavaScript files for different kinds of functions.

As the project goes up in complexity the pile of files gets bigger and it is murky at best where is the line to split the files.

If we’ll take for example CSS files, as it is closest to the design aspect and so easier to explain, we have multiple options how to slice it:

1. Maybe just to work with one huge file

2. Slicing it to smaller files by platform: Desktop.css, Mobile.css etc.

3. Slicing it by components: Header.css, Footer.css, Button.css etc.

4. Slicing it by pages: Index.css, About.css, Contact.css … General.css

5. Slicing it by function: Common.css, Breakpoints.css, Vars.css etc.

It isn’t clear at all where to draw the line of separation and I’ve seen many teams do it in very different ways, sometimes even combining more than one option unintentionally.

So how can React and Tailwind help us to decide?

The component based approach

Let me preface what I’m about to say with that, like HTML, there’s lots of ways of making a React app.

The most common way is to separate each component into its own file, so we’ll end up with files named Button.jsx, Checkbox.jsx, Avatar.jsx, Card.jsx etc.

These components get imported into different screens with different configurations (via props) so the code inside the components will potentially get replicated an infinite amount of times.

Unlike HTML, we don’t need to manually copy the code to different places and different files, we just import the component and React will swap its code into every place we’ve called it from.

If we’re thinking about the separation of concerns, what React does is very different from HTML, CSS and pure JavaScript .

React common files structure, notice how every component has a complimentary CSS file

HTML, CSS and JavaScript separate our concerns into multiple areas of responsibility, while React takes a different approach.

React separates our concerns based on component structure, so different developers can work on different components without bumping into one another.

But they’re all React developers, no longer a CSS specialist or an HTML architect, everyone is doing the same kind of work but on different building blocks.

The distinction here is major since it slices the work for optimization rather than for specialization, which is almost the opposite approach.

Entering Tailwind CSS

Tailwind is a very popular CSS framework that works as a utility framework meaning all styles are done with inline classes instead of a big giant stylesheet.

This way you can copy and paste components from different layouts and ensure they will look exactly the same, of course when working with React components, the component gets imported into many layouts, pages or screens so consistency is key — and Tailwind enables just that.

The same button 3 times (left to right): Pure HTML/CSS, Tailwind, rendered result.

If this is your first time seeing Tailwind code, I implore you to go and try it out, it’s not as strange to work with as it might seem at first glance and it is much better than making inline styles.

Now that every codebase is in some degree written with AI I can’t stress this enough — Tailwind is much better than regular inline styles, if you’re a CSS purist working with a stylesheet file or files that’s great, even a simple inline style here and there is mostly fine.

But never let the AI just make lots and lots of inline styles for everything, always ask to convert them to another file or just to work with Tailwind, inline styles are unmaintainable in the long run.

I know what you must be thinking when encountering Tailwind, and it’s the title of the next section.

When working with Tailwind we don’t need any CSS files, every component is just one file.

What happened to separation of concerns?

I know that at first it looks like our separation of concerns is gone, React already implements all the HTML (via JSX) and the JavaScript in the same files.

Tailwind CSS takes it even further and it pulls the CSS utility classes into the JSX as well, instead of leaving them on separate files.

That way we don’t get any separation by areas anymore, the functions, design and structure all live together.

What we DO get, however, is separation by component, which can be more useful for big teams who work on the same system or same project together.

Separation by component means that even though a developer might be working on all the different areas of an Avatar component, the same developer doesn’t need to be concerned about the Button component while doing it.

Tailwind CSS ensures that all components will be designed as planned, even if they were designed in isolation, outside the system itself, since its utility classes are all deterministic by design and no style should ever leak outside its intended scope.

Conclusion

Separation of concerns is subjective and it is done differently in different systems, React and Tailwind do it component-based while pure HTML and CSS are more area-based.

There is no right answer to how you should do it, but consistency is key, especially when working in a team.

Guidelines and best practices are great, but a separation that is inherit to the technology itself will always be better since everyone in the team can agree on it.

When we consider a separation of concerns based on areas of expertise we can also consider to hire a CSS specialist, for example, but a Button specialist is not currently a job title, and maybe it should be as React and Tailwind becomes more popular.

I didn’t touch on all the ways to separate CSS into multiple files and achieve something similar to component-based separation of concerns in pure HTML and CSS because I don’t believe it’s the right way to go when working in large teams.

There are a million technologies out there and a million ways to solve this issue, but I picked React and Tailwind as an example since it’s a very popular solution.

This article only scratched the surface.

I hope you enjoyed it, thanks for reading.

Sources

Separation of Concerns Wikipedia Page

Tailwind CSS: Styling with utility classes

Separation of Concerns in React

Thinking in React

Separation of Concerns — The Programmer’s Guide

Background art by Pierre-Auguste Renoir, 1876.

Every era of product design on the web brings with it new design tools, these tools change how we design websites and also influences the next generation of design tools to come.

I know it seems like a novel idea for some of you reading this, you might think you design the websites you want to design and you’re only limited by your imagination, but you’re only half-right.

That’s somewhat true but also you’re human and all humans are lazy sometimes and we like to design websites that are easily designed and easily developed, we don’t like friction, as any designer who studied UX already knows.

So as Marshall McLuhan once said “The medium is the message”, meaning that our ever-changing medium does box us into certain realities as we approach the tools for web design.

In this article I’ll try to go over the different tools for designing the web as they were used in chronological order, of course some of these tools got used simultaneously so there is no clean cut.

But I’ll do my best to paint the history of web design tools in stages as I lived through them, so let’s begin.

First, we had plain HTML.

HTML

Before any design tool ever existed, there was HTML, it was (and still is) the most fundamental building material of the web.

When HTML was the only way to design websites we had WYSIWYG interfaces to better move around what was essentially just HTML tags like paragraphs, headings, tables and images.

CSS didn’t exist yet so all the styling was done inside of the actual HTML itself (remember bgcolor?) and the only way to center anything was to use tables and make their borders invisible.

In some ways simple HTML styling lives on today in email newsletters and passion projects but the web itself has moved on to better things.

Websites of this area were made to emphasis the tags and their aesthetics were unique with lots of GIFs, lots or background images that repeated themselves endlessly, and of course some background music to set the mood.

The most well known offender in this category of early 90s websites was GeoCities, which did offer a WYSIWYG editor for everybody to use for free.

GeoCities web editor was one of the first publicly available WYSIWYG editors.

Netscape Composer live edits, image from Pier-Luc Brault’s Blog (Link)

Websites of that era were built for Netscape or later for Internet Explorer, nobody ever tried to make their websites cross compatible and they all just worked sometimes.

These compatibility issues often occurred while using specific tags (that aren’t in use anymore) like lots of marquee tags, framesets, blink tags and more.

Those were visually unique but ultimately were deprecated for accessibility and/ or security reasons, so we could only find them in early web design relics.

Speaking of security concerns, then came Flash

Flash

When Macromedia Flash (later — Adobe Flash) became the standard tool everyone was both a designer and a developer, Flash had its own scripting language called ActionScript and it’s own animation-driven interface.

As a result people started replacing their entire websites with Flash sites, these sites were very animated and very tailored to their needs, no more templates and no more copying HTML tags from one another (Flash sites were nutritiously closed off — unlike HTML “view source” feature)

Flash transformed the web more than any other tool, it made the entire web dependent on its proprietary technology, it made us all developers and animators, and sometimes even game designers.

As a result those sites were often bloated, since optimization was optional, and they were very unfriendly to SEO, since it was all closed off.

Newgrounds — If you know, you know.

But the Flash era was the most creative the web had even been, Flash websites could do pretty much anything we could imagine, Flash games were also a big thing in the mid-2000s, see Newgrounds website above.

Flash is still alive in the form of Adobe Animate, but today it’s less geared towards websites, since the web had moved on — partly since the web moved to a mobile first web.

Flash websites were bloated and had security issues but above all else: they weren’t responsive enough to survive in the mobile internet era, when screen real estate and battery life were much more scarce.

I encourage everyone to read “Thoughts on Flash” by Steve Jobs, it sums the problems with Flash on mobile devices nicely.

Photoshop / Illustrator

Photoshop and Illustrator are both Adobe products, they weren’t new at this point but the industry defaulted to them when Flash was on its deathbed.

When Flash was no longer the dominant design tool for the web, nothing could really fill its place, so the industry moved on to the tools that were already proven to stick around.

This era of web design felt especially static, as designers only designed Desktop and Mobile websites, with often nothing in between, keep in mind that iPads weren’t a thing yet and/ or just came out.

An Illustrator-designed website, it was never great.

Everything was done manually using hard labor, no automation, no tools to make the process any easier, certainly no specialized tools yet.

Photoshop and Illustrator are general purpose software — Photoshop is for editing images and Illustrator is for editing vector shapes, none of them were made for web design specifically.

As a result they had many tools that were irrelevant to Product Design and many relevant tools were missing.

These relevant/ irrelevant tools were the blueprint for the next generation of tools, that built upon the workflow of Photoshop/ Illustrator and decided what tools to include and what tools to exclude.

Photoshop and Illustrator as web design tools were never great tools for the job, but they were great at being placeholders until some more specialized tools arrived.

Sketch

Sketch, for many designers, was just that — a new tool built from the ground up for Product Design (or UI Design, as it was called then). Sketch didn’t have the bloat Photoshop and Illustrator had since it was purpose built.

Sketch circa 2017, image from Newbird (Link)

The application itself and the tools in it were lean and were exactly what users wanted. I didn’t get into Sketch although a lot of my friends and colleagues did. Sketch was (and still is) a Mac only application so I knew it can’t be the tool of the future.

There were entire industries built on Windows PCs and the Mac-only Sketch were making a lot of problems in their pipelines, for example: the gaming industry, the data security industry, AR & VR (at the time), the banking industry etc.

Sketch did a lot of things right but eventually the one thing it did was making the entire design industry reconsider the tools they use.

Sketch walked so Figma could run.

Figma

Figma wasn’t just a cross-platform version of Sketch, Figma took the formula that Sketch made of lean and precise design tool specifically made for UI design and expanded upon it.

Figma in 2019, image from OneSignal (Link)

It was a new kind of tool — it was an online first tool, Figma was available from your browser, without any installation (when it did that, it was all new and exciting, I know today it’s more common).

Since it was all online, Figma files could also be shared and worked on together, Figma had the most advanced “multiplayer” tools I’ve ever seen, which meant designers can work together on the same design file and in the same time, since it was all online.

Think of Google Docs, you can also edit the same file in Google Docs, or the same code in a Git repository, for example, but Figma brought the same philosophy into a design tool and since then many tools tried to do the same.

Since Figma tried to be lean (much like Sketch before it), many tools were dropped in the process, no more photo editing tools, limited filters, limited Motion Design tools, no 3D tools etc.

On the other side many new tools were introduced, responsive design controls for every frame, a prototyping tool and auto-layout controls — just to name a few.

An example of responsive design in Figma.

Still, Figma was very “flat” looking by design and more detailed work was harder to achieve, many still used Adobe Illustrator or Photoshop for detail design and many just gave up and embraced the flatness.

Since advanced Motion, Animations or working with 3D elements is virtually impossible in Figma and as a result, those elements are very rare to see in the web today.

I would argue that to this day, features like Motion Design and 3D work are still missing since they weren’t present in the original catch-all tools Photoshop/ Illustrator and as a result they are still missing from Figma today.

Just to be clear — I am not against any of it, I like flat design and I think intelligent design can be done in any style and in any medium, regardless of the rendered output, when I say “flat” I don’t mean it as a criticism — just as a visual observation.

Closing words

From no tools for design, through WYSIWYG and Flash, Photoshop/ Illustrator, Sketch and of course Figma it was quite a ride.

The tools change not only how we design interactive websites but what we design as well, including how they look, how they work and how the users experience them. No website is made in a vacuum.

We can clearly see how the tools of each era influenced the design of the websites below, they are all promotional websites that were designed when the movie released.

Space Jam official movie website, 1996.

What is The Matrix — official movie website, 1999.

John Wick official movie website, 2014.

The first example (Space Jam) used HTML and WYSIWYG tools and the result is a more fined version of GeoCities websites, with the repeated background image and the secluded elements.

The Matrix example was done in the era of Flash and it has many TVs showing small clips from the movie, notice how they don’t really design a UI but they design a “world” you can go visit.

The Last example — John Wick is modern design that was probably done with Figma, it is highly reusable, probably using the same template as any other movie and it is a UI with text, titles, menu and even a video in a rectangular shape, how long have we come indeed.

It can be said that any creative industry is bound to change, the history of painting and art in general is full of these examples — how the invention of oil colors gave a way to the renaissance masters to shine, how watercolors freed the impressionists from their studio to go paint outside and so on.

Finally out of the studio and into the bar. Édouard Manet, 1882.

As Marshall McLuhan proclaimed more than 60 years ago: “The medium is the message” and it is much more pronounced in any technological field since technological tools change all the time.

No one can predict the future. However I’m pretty sure that the tools will keep evolving and Figma won’t be the end-all for Product Design.

Thank you for Reading 🙏

Resources

Web Design History Timeline / Web Design Museum

A Brief History of Web Design Tools and the Original Sin / Eden Vidal

A History of Web Design: From Notepad to AI (1998–2025) / Digital Impact

The History and Evolution of Web Design (Timeline) / WebDesign Inspiration

Links in this article

I Used Netscape Composer in 2024 / Pier-Luc Brault

Sketch App Review / Newbird

How to Design with Figma / OneSignal

2025 - The Year I Read 52 Books

How I did It

Let me start with the statistics - I read 22 books in 2024, 27 books in 2023 and 22 books in 2022, so this year I read much more than these years - which was intentional, I wanted this year to be the year of reading.

I don't think 52 books in a year is crazy or even that impressive, I could have read 60 this year with no issues, I had 2 weeks I hardly read anything this year since my mom had passed away this year, otherwise I could have read even more.

I read on all platforms - I read physical books, I read e-books on my e-reader devices (I bought this year a Boox Palma and 2 Kindles). I also listened to books via Audible. I had an Audible subscription for 1 book a month but if I would do it again - I would take the 2 books a month option, since no audiobook took me more than 2 weeks to finish.

I don't feel I have any trouble paying attention while reading or while listening to a book, if something happens that needs my attention - I will pause the audio book at once and listen to a podcast instead, I'm very mindful when I listen and I’m not into it and I don't like to not remember the details afterwards and having to go back.

I read a lot during my commute, I took a Kindle with me everyday to work, I also took my Palma in my pocket to read when I have a minute during work hours or when I'm out with my kids, I didn't read a lot that way but at the end of the year I read 52 books so it was worth it.

While I was reading a lot this year, I watched less movies and TV shows and I played less games than the previous year, spare time is scarce and it's up to us to decide what we do with it. This year it was mostly reading.

My reading devices, left to right: Boox Palma, Kindle 11th gen, iPad Pro 2018, Kindle PaperWhite 12th gen - Signature Edition

What I Learned About Reading

All I learned is about myself and how I read books, your brain might be wired differently from mine so everything in this article is just a reflection on myself and myself alone.

I did learn that reading for me has two modes, the first, which always comes first, is when I'm reading the words in the book and go over it line by line laboriously until the page is done and I flip to the next page.

Mode two is when I really get into it and it only happens after I read in the first mode for more than 10-15 minutes or so, and in this mode I almost think the words instead of reading them, the story unfolds in my imagination and the actual words and the lines disappear.

This mode is much more fun to read in but harder to get into at will, I also read much faster in the second mode compared to the first one, since I don't need to push myself to do it, it just comes naturally.

I guess this is what some people refer to as "flow state" and it is addictive when it does happen to me.

Also, reading is reading is reading - no matter if it's a physical book, an e-book, an audiobook, a graphic novel, manga or whatever, reading is reading and everyone has his or her own preference, the only books I didn't include in my 52 books are children books since I read about 2-6 of those everyday, I have 2 kids and they also enjoy reading books very much.

I will say that the majority of what I read this year were audiobooks and e-books, since I had many devices that can sync them, it was always just easier to whip out my iPhone, iPad, Kindle or Palma than to remember in advance to bring a book with me everywhere I went.

Having said that, I did become very dependent on Amazon through both the Kindle app (and actual Kindle devices) and the Audible platform (for audiobooks), it's not inherently bad, I just don't like Amazon as a company personally so that's another thing I had to get passed.

What I Learned About Writing

This year I did learn the importance of writing myself, I did start journaling privately around my mother's passing (using Everlog on my iPhone), and I also returned to writing publicly by starting this blog.

Writing for me is like the famous Steve Jobs quote about computers being "a bicycle for the mind", when I write through my experience I feel like I better understand it and am better equipped to handle similar situations in the future.

Having said that I did also learn some things about book writing.

1. The book has to be interesting from the start, even before the thing that should happen actually happens. For example in Notes on Your Sudden Disappearance (by Alison Espach), the plot is very compelling even before the "Sudden disappearance" that you know is going to come eventually.

2. Characters should be relatable - and especially the main character. For example in Turtles All the Way Down (by John Green) the main character has some strange thoughts that I would never have myself, I’m not a doctor, but they probably point to some kind of a mental disorder. Still, she’s portrayed in such a believable and loving way that I find myself completely identifying with her.

3. Books should be well written. I don't mean they should have flowery language but they should be precise in their wording and interesting to read through. For example in Yellowface (by R. F. Kuang) I know that every word was chosen carefully, that some things are written while others are implied on purpose.

All 52 books, image made with Listy app

Book Recommendations

Every book on the list below was an excellent read, I'm also adding some "honorable mentions" in there for people who did read those books and crave something similar, if you really like my list and you want to add a recommendation of your own, please add them in the comments below.

Nexus: A Brief History of Information Networks from the Stone Age to AI / Yuval Noah Harari

I read this one at the start of the year and it was a real eye-opener, it talks about the rise of AI in historical terms, about thinking machines of the past and about other types of emerging networks, biological or not.

If you loved this, also see:

• Homo Deus / Yuval Noah Harari

• Atomic Habits / James Clear

• Indistractable / Nir Eyal

The Wedding People / Alison Espach

This might be the book I connected with the most, this one is a lighthearted tale about a woman trying to commit suicide in a hotel full of people coming for a weekend wedding. I think it was a very fun read, obviously if weddings or suicides are triggering to you - skip this one.

If you loved this, also see:

• Notes on Your Sudden Disappearance / Alison Espach

• People We Meet on Vacation / Emily Henry

Many Lives, Many Masters

As I said earlier, this was the year that my mother passed away. As a result I read a few books about death, about the afterlife and about preparing for death of a loved one. This book is mostly about the afterlife and it was a real eye opener for me, if you are more interested in life and death (and not life AFTER death) then see the 2 other recommendations below.

If you loved this, also see:

• Death is of Vital Importance / Elisabeth Kubler-Ross

• The Gift: 12 Lessons to Save Your Life / Dr. Edith Eger

After the Quake / Haruki Murakami

A book of short stories by Murakami, you really can't go wrong here and unlike his other books there's no violence or anything to watch out for, just a very casual reading experience.

If you loved this, also see:

• Novelist as a Vocation / Haruki Murakami

• Kitchen / Banana Yoshimoto

But How Are You, Really / Ella Dawson

A great book about a woman getting back to her collage for a reunion, a collage where she didn't exactly enjoy herself. Little by little we get her collage experience and how it messed her up to present day.

If you loved this, also see:

• The Midnight Library / Matt Haig

• Normal People / Sally Rooney

Careless People / Sarah Wynn-Williams

This is hands-down the best book I ever read about a technology company, this book is about how careless Facebook (Meta) is as a company and how every executive there (including Mark and Sheryl) put the employees’ lives on the line to succeed, above all this book is just very well written.

If you loved this, also see:

• Character Limit: How Elon Musk Destroyed Twitter / Kate Conger

• Apple in China: The Capture of the World's Greatest Company / Patrick McGee

Yellowface / R. F. Kuang

A satirical book about a white American author who steals a book from her friend - a Chinese American woman. She publishes the book under her own name even though the book is about ancient Chinese culture.

If you loved this, also see:

• The Accidental Tourist / Anne Tyler

• Wildflower / Drew Barrymore

Creative Selection: Inside Apple's Design Process During the Golden Age of Steve Jobs / Ken Kocienda

A book about Apple's creative process, at first it's about making the Safari Browser for the Mac and than about making keyboards for the touchscreen iPhone and iPad, the developer who wrote this book is very good at explaining what he did in non-technical terms and it was a fun read.

If you loved this, also see:

• Creativity, Inc: Overcoming the Unseen Forces That Stand in the Way of True Inspiration / Ed Catmull

• After Steve: How Apple Became a Trillion-Dollar Company and Lost Its Soul / Tripp Mickle

An Absolutely Remarkable Thing / Hank Green

This is the first book of a 2-part series (part 3 might come in the future) and it's a very good book about status quo and how people get mad when it's broken without warning. The book is about aliens so it might be triggering to some people.

If you loved this, also see:

• A Beautifully Foolish Endeavor / Hank Green

• As You Wish / Cary Elwes and Joe Layden

Turtles All The Way Down / John Green

It's just a great book, everything I'll say will spoil it, just go read it and than read the other books in this section's recommendations, John Green is the only author I recommend twice in this list (other than Murakami)

If you loved this, also see:

• Looking for Alaska / John Green

• Tomorrow, and Tomorrow, and Tomorrow / Gabrielle Zevin

Closing Thoughts

Reading a lot isn’t easy at first but it does pay off as you feel good about yourself and your mind is filled with knowledge and adventures from the comfort of your own home.

Once you make it a habit and you read in every spare moment you have, it becomes hard to stop doing that, reading becomes the thing you do - it even becomes your identity.

As a result you will watch less movies, play less games or go out to eat less - whatever you usually do with your free time - you’ll do less of it, so don't get into it thinking you can cram it all in, you can't.

Next year I hope to read a bit less but to write a bit more, that’s why I started this blog after all.

Let’s see if I could make writing into a habit in 2026.

If you read any of these books or if you liked my recommendations please let me know either in the comments or on Threads - a link to my Threads account.

Introduction

As Head of Development at WeAreKido, I work with product designers a lot. Our design tool of choice is mostly Figma and I’ve seen the mistakes designers still do, no matter how senior they are.

When I say “mistakes”, I mean pain points that slow down either the development process or the handoff process, which is the process of transferring the project from the design phase into the development phase.

No matter how good or precise your handoff process is, some pain points will only reveal themselves when the development phase begins, as such it can not only slow down the process but make the development process frustrating for the developers.

This frustration can end up as a rift between the design team and the development team, each stuck in its own corner instead of having a team that works well together with some that design and some that write code.

I’ve grouped these mistakes into 2 sections, some are harder to explain and implement inside the design team and some are easy, I’ll start from the harder stuff because I think they are more important to fix if they arise in your organization.

Mistakes that only developers can see

Mistake 1: Making desktop/ mobile designs that use different semantic tags

This one can drive a developer crazy, what I mean by “different semantic tags” is that sometimes a designer will decide that a title for the page in desktop mode should be “h1” which could be also the name of the style in Figma as well as the semantic tag the developer will use in HTML.

The problem begins when the designer decides that it looks too big on mobile, and instead of changing how “h1” will look on mobile in the entire system — the designer will just change the style of that one element in Figma into “h2”.

Figma lets you do that without any problems, HTML does not. An element using the tag of “h1” will always use the tag of “h1”, no matter the screen or the device you’re viewing it on.

There are solutions like making this element an “h1” with a class of “alternate” for example and then faking it all in CSS, but this is a solution for a non-existing problem that the designer manufactured, it breaks the system first approach and it slows down the development process for no good reason.

HTML h2 will not magically become h3 on mobile

Mistake 2: Only designing the happy path

This isn’t really a “mistake”, it’s more of an oversight. The designer might hand over screens with a lot of content and images but will not design what happens when the content changes, when it’s missing or when something goes wrong.

A placeholder for missing images, when does the content cuts-off if there’re too many words, what happens if there is no content, if the content is slow to load, if images are too small or too big or transparent or are GIF animations.

There’s so much that can go wrong and we, as developers, see all these different situations that can break the design, we can and should always ask questions but it would be even better if the designer would think of these in advance.

image #3 is missing — that happens a lot in the development phase

Mistake 3: Padding and fixed height are not the same

This is an easy one to fix, let’s say I’m developing a button component and I take the same font in the same size from Figma for the label, then I use the same paddings as the designer used in the auto layout — than my button should be the same height.

If the button is off by a pixel or two, let’s say my button in development is 51px in height and in Figma it’s 52px. That usually means the designer used a specific fixed height instead of leaving the height to “hug” in Figma, which translates to “auto” in CSS.

At this point why did we even use the paddings and not just centered the text using the auto-layout in Figma, or “flex” in CSS? Also this approach in Figma will totally break the button if the text will break into 2 lines, which shouldn’t happen but that was the point of “Mistake 2” (see above).

Why do we even need padding at this point?

Mistake 4: Detached or unique components

This is the worst mistake of all — when working with a Design System in Figma nothing should arrive to the development phase as not a part of the Design System.

Nothing should be detached and nothing should be “unique”, even something that is so “unique” that it only appear in one place should be a part of the Design System and it should be a component, not made out of frames or groups.

In development everything is a part of the larger system, in big projects making a component outside the Design System could be very destructive, it could also be ignored by the development team by accident.

Worse than that — it could be built in development with inline styles and without considering the system first approach, which can make components appear non-consistent, can lead to duplication of efforts and can accumulate to a future tech debt.

Smaller Mistakes

These are mistakes that can be rectified easily by just telling the designers not to do those things, they are not mistakes that are smaller in their severity, only in their potential solution.

Mistake 5: No constraints

Constraints in Figma lets the development team see how this layout can work for slightly different screen sizes, see in the example below how much more information the “right” use case can gives us over the “wrong” use case.

We can see the cards should stack next to each other in a “flex-wrap” CSS property, also we see what sticks to the right and what sticks to the left, what stretches the entire screen, like the search bar, and what increases its gap, like between the title and the avatar.

Not using this properly can lead to confusion from the developers and will end up with elements that are not built as efficiently as they could have been.

Amazing how much a developer can learn from the right constraints

Mistake 6: No hover, active or focus states

This is self explanatory: buttons, checkboxes, input fields etc needs to have their different states designed carefully, the different states meaning hover state, active state (pressed), focus state and sometimes even more states like disabled, like placeholder state, like empty state etc.

Mistake 7: Not thinking about Motion

It’s not really a “mistake” if the designer doesn’t expect any motion, but more often the designer had something in mind regarding how the states transition between one another or how the layout shifts but it somehow stayed in the designer’s head.

Anything regarding motion needs at least one of the following things:

• A reference to a different website or a CodePen that used the same effect or transition.

• A prototype of how it should work, can be done in Figma, After Effects, Rive or any other tool.

• A detailed explanation of the transition, both going in and going out (unless it’s symmetrical).

Mistake 8: Not whole pixels

Again, this could be a product of scaling or of a designer not paying attention, but in CSS we’ll always prefer whole pixels, like 50px instead of 50.78px (see example below).

The reason that developers will prefer whole pixels is that different screens will behave differently, we are all used to Retina screens and the pixel doubling we get on higher density displays, but not all screens will display it properly.

For example, let’s take a stroke (or border) that is 0.5px in width, a screen without any pixel doubling might not even render it, it might round it down to 0px, instead of just using 1px which will not be rounded at all and will always be rendered as 1px, no matter the screen or the display resolution.

What happened here? Did the designer scale it?

Closing Words

All of these mistakes are mistakes I’ve seen in the wild, they come out of designers that don’t know enough about the development process. I highly recommend to any designer that designs for the web to learn the basics of HTML and CSS.

If you’re a designer for mobile apps then learn basic Swift, if you work in gaming — learn Unity etc. We work mostly for the web so my recommendation will be HTML & CSS, there’s very good introduction videos in the Bootcamp of Frontend Masters.

I implore every designer to watch at least “Introduction to HTML” and “Introduction to CSS” as they can explain a lot and make you, as a designer, more aware of any possible issues with your designs.

If you liked this article, please follow me for more, and of course clapping is always appreciated. If these mistakes is something you see in your organization, feel free to share this article with any designer or developer who might get value out of it.

Thanks for reading. 🙏

Adobe apps are good, but making money is better for the company.

App History

You might know me as a Front-End Developer and you'd be right, that's what I do in my day to day, that's what I do for work, that's what I teach in various universities and collages and that's what I do in my free time. But before all that I worked as a Motion Designer and a Product Designer for years, I actually stumbled upon Front-End Development through Product Design and not the other way around.

In all my design career of about 2 decades or so I used Adobe products. As a Motion Designer I used Adobe After Effects, I used Flash (yes, before it was called Animate), I used Adobe Premiere and Audition.

As a Product Designer I also used Adobe Photoshop, Adobe Illustrator, Dreamweaver, Muse and even Adobe XD (not all at once, of course).

I am exactly the kind of person that edits all his photos in Photoshop before sending them, the kind that cuts his own videos from vacation in After Effects and the kind that builds a quick website just to send his portfolio to a potential job opportunity.

License History

I started with Adobe in high school, I learned Photoshop and Freehand, which was a Macromedia software very similar to Adobe Illustrator, Later Adobe would buy Macromedia and implement Freehand’s features into Adobe Illustrator.

At this point when I was 15 or 16 I used a pirated copy of Photoshop, Adobe didn’t have its Creative Cloud yet so once you’d have a pirated copy - you’ll have it forever. I started using Photoshop 6 and quickly got my hands on Photoshop 7, which I remember to be a big step up in 2002 (I was 18 at this point).

After a few working opportunities at this young age, I realized this is what I wanted to do with my life and I went to design school for a 4 year BFA program.

During that time I learned Flash, After Effects, Premiere and Audition, all for animation purposes and all were very professional tools with no competition in the industry, I would argue that After Effects remains an industry leader with little competitors to this day.

At this point my design school was taking care of my licenses, Adobe had (and still do) a big student discount and my school took care of it for its students, I’m sure I paid for it with some start of the year fee for equipment and such, but it was nice anyway.

Work History

When I got into the job market I already knew most of adobe programs - and still it took me a few months to get my first job, which required me to learn even more software. I learned a lot of Autodesk 3Ds MAX and a bit of Blender.

My background with After Effects helped me a ton in post-production and I became a 3D artist, at this point I even started to use Adobe Fireworks (RIP) for textures.

My workplace paid for the software and licenses, this was an era of desktop computers, 3D work and After Effects could have been done on a laptop, but not seriously. Computers would have been beefed up specifically to run these programs (back when 8GB of RAM was a lot).

I was an OK 3D artist but eventually I went full After Effects for a while and became a 2D Animator/ Visual Effects artist, I worked for a small company and we mostly did Kid’s shows that can be animated quickly in After Effects.

Until one day my boss had an idea - what if this studio had a website, I know it was long ago and all.

He called me up to his office and he knew I had some experience with HTML since I sent him a website of my portfolio when I started working there (apparently other designers and artists were sending video reels or PDF files).

So it was there where I learned Adobe DreamWeaver, Muse and Brackets so I can whip up some web presence for the studio and this was they’re website for about 3 years.

Enter Figma

As I started do more and more HTML and worked closer with developers suddenly my designs (that were all for digital products at this point: websites, interactive tours, online presentations etc.) that I was doing in Photoshop and/or Illustrator felt silly.

They felt like I’m making presentations for the developers on how to build the websites instead of doing the designs for real websites, they lacked responsive and understanding of what can be done with CSS and how, sometimes I would make designs that were almost impossible to develop in time for a certain deadline.

I discovered Figma by accident but it was almost everything I was hoping for and I started championing it in my company, all of my designs were made in Figma and I urged other designers in my company to make the leap too.

They didn’t, or at least not while I was still there, I did quit during the 2020 pandemic and started to work for a studio that was all-in on Figma. At this point I was still using Adobe products like Photoshop and After Effects but less so since I was very excited about Figma.

Adobe who?

Today I work mostly in a code editor, but Figma remains the design tool I'm working with and it's in use by any other designer I work with too, I can’t remember the last time anyone sent me a PSD or an AI file.

If I absolutely need something done in Photoshop or Illustrator, I just use Affinity, they have most of the tools I need from Photoshop and Illustrator and I was using it on my iPad anyway so it’s not really unfamiliar to me.

Instead of Premiere I just use DaVinci Resolve, instead of Audition I use Audacity, Flash is dead anyway so I just make HTML/CSS animations in my code editor instead.

The only software from Adobe I sometimes still need in After Effects, and I have a full Adobe license from my workplace so I could use any Adobe software I want. I just don’t want to use Adobe, I don’t like them anymore.

A Word of Caution

Just like I don't like Adobe anymore, a lot of people who use Adobe - artists, designers, video editors and compositors - don't like Adobe anymore. As a company Adobe burned a lot of good will from its users with unfair pricing, predatory business models and poor communications.

Adobe had put their bottom line before its users and people are (right to be) pissed. Affinity went to the free route and people on the Internet cheered, they took some market share from Adobe users instantly since people hate Adobe so much.

If I need to think about another big companies people hate in the same way - Microsoft comes to mind, every year they do something their user base doesn't like.

As a result, people publicly trash on Microsoft all the time, people also move to MacOS for work and to Linux (like the successful Steam OS) for gaming, at this point the only users left on Microsoft Windows are the Excel fanatics, which is a real community.

Adobe getting weaker in combination with Microsoft getting more hate than ever with Microsoft Windows could mean people will flock to Linux professionally as well. Right now work happens on MacOS mostly and with Apple chips becoming more and more powerful - I don't see people flocking back to Windows anytime soon.

Adobe will never die completely, it has its own ad network and its own font store (TypeKit) and those things alone can keep it afloat but if their business model won't change, their predatory fees will keep new users out, Adobe can see the flocking Microsoft had seen to MacOS sooner rather than later.

Programs like Figma and Affinity (and Krita, Blender, Penpot etc.) are not the future, they are very much the present and people flock to them because they hate Adobe, and that's not a good place for Adobe to be in.

The Steam Deck, the best selling handheld PC, it runs Linux instead of Windows.

Foreword

Two weeks ago we saw the release of the new Sora app by OpenAI. Unfortunately the app is only available in the US and Canada, and I’m in neither. Since I can’t use the app itself, I thought I’ll do a breakdown of what I can actually see - the app icon, it looks simple at first glance but it packs a lot if we can deconstruct it. I’m doing this breakdown as a fun exercise in design appreciation, I know my breakdown will probably not going to align with the authorial intent behind it. If you like this breakdown please share it, now let’s dive in.

These kinds of breakdowns are akin to exercises I used to do while earning my Master’s Degree in Visual Communications, they can be a lot of fun but they’re intended to reveal hidden truths or meanings lurking in plain sight. Seeing with our eyes is great but analyzing a visual component in a written long-form article tend to make us (or at least - make me) think a little harder, to notice the things I can feel when looking at a visual work, but don’t consciously see.

Breaking down Sora’s app icon will require some knowledge of what the Sora app is. Sora is a mix of a social video app, like TikTok, but all the content is AI generated videos, not unlike Midjourney’s Explore page.

The Sora app also has a feature called “cameo” where you can generate videos of yourself, or any other person who gave the app permission, could be your friends or could be celebrities like Michael Jackson or even OpenAI’s Sam Altman (who appears in many of Sora’s videos).

The generated videos are not more than 10 seconds long and rendered with both sound and a moving watermark, to make it harder to spread as real footage. The app itself is invite only right now, but will probably be available soon to everyone, with better and more precise rules and guardrails in place. Even though the app feels like TikTok and got a lot of comparisons to TikTok in both the traditional media and social media - its app icon is very different.

OpenAI’s Sora website - on the right side are 4 generated videos.

Chapter 1

The Little Cloud

The most prominent element in the Sora icon is without a doubt the cloud in the middle. At first we can see by its shape and angle of rotation that this cloud is the same as the ChatGPT icon - OpenAI’s only app except Sora.

Left to right: Sora app icon, ChatGPT app icon, both icons overlayed.

The reason I started by calling it a “cloud” is that it looks kind of like a cloud since it’s floating in the sky. This also can fit the AI narrative of making everything, including videos, in the cloud (in the technological sense of clouds). Generated AI images are also often compared to humans looking at the clouds and seeing things, and in that sense it would be really easy to see a cloud in this icon too. But when I tried to compare it to other clouds iconography used by tech companies, something amazing happened- I realized it’s not a cloud at all.

Sora app icon, Apple’s iCloud app icon and Microsoft’s OneDrive App icon

Notice how the other “clouds” are flat at the bottom so the cloud can actually stand upright when left alone on a desk, like a computer would. This might be an intentional aspect of cloud computing since they are computers behind the curtains, after all.

The Sora icon is different, so it’s not a cloud, it can also reference a thought bubble in the style of comics, since they have no flat part. Notice that these bubbles are for thinking, not speaking.

The thinking behind this might be that Sora generates videos in the speed of thought, any video you can think of will be done in mere minutes. The only barrier now is your own imagination, or your thought process, just like the thought bubbles in comics that can only hold so much text. Also, both comics and AI prompts use text in a very similar ”conversational” manner, so it’s only natural to use it for this icon.

Left: Sora app icon, Right: a thought bubble (from Understanding Comics/ Scott McCloud, 1993)

At this point you might think sure I believe you it’s a thought bubble, but why does this bubble have eyes, well I’m getting to it.

Chapter 2

Smiling with Your Eyes

First of all let’s get the obvious out of the way - the eyes make it seem like a friendly robot, signaling this AI is a friendly one. Sora’s AI is a cute little robot that just wants to help you be more creative and is capable of no harm (roll your eyes now, please).

Of course, that’s not the whole story, the eyes have little AI “sparkling” emoji, as we all know this emoji (✨) was intended to signal magical stuff but was hijacked by the AI industry to signal if anything has AI in it. Much like the AI industry highjacked all of our content and scrapped everything humans ever created- they also highjacked the icon to represent it (again, roll your eyes).

Left: Sora app icon, Right: Smile Precure!, スマイルプリキュア！ (Episode 35)

This emoji, like all original emojis, was first made by Shigetaka Kurita for SoftBank- a Japanese telecom company. Kurita itself was asked by David Amel (YouTube link) about the usage of this icon for AI features and he didn’t like it. Of course anybody can use any emoji but since its meaning was originally supposed to be something else and the literal father of emojis doesn’t like it, I’ll consider this emoji stolen because they highjacked its meaning.

David Amel Emoji video (YouTube Link)

To bring it back to the Sora icon itself, if we’ll look closely at the eyes we can see that it’s not eyes at all, it’s holes that we can see the background through. What can be the meaning of those “holes for eyes” face, well - first of all let’s explore the most simple answer. A face with holes for eyes is a skull, the eyes decay and we’re left with only the bones.

Sora app icon vs a skull (via Apple’s Emoji)

A skull is obviously a dead person, but it can also refer to pirates because of their flag, known as the Jolly Roger or simply as the “skull and crossbones”. Pirates can mean a few things in the software business, first and the most likely explanation here is a nod to the famous Steve Jobs quote “it’s better to be a pirate than to join the navy”.

The meaning of this quote is that it’s better to explore the unexplored than to act inline - since the discovery of the new will always happen by “pirates”. Steve Jobs apparently felt so strongly about this quote that he did decorate Apple’s offices with the Jolly Roger flag in his first run at Apple.

Steve Jobs standing in front of Apple’s Jolly Roger flag.

Of course we’re all thinking about the other explanation of a pirate flag in the software industry and that’s pirated software. Pirated software is what the software industry calls a piece of software that users share among themselves without proper licensing.

That was (and still is) a crime when people did that and some people even got sued or fined for it. But when big companies do that, like OpenAI and other AI companies it’s somehow not a crime and they get to be worth billions of dollars instead. So they do really get to be pirates.

Another popular entity with holes for eyes is the Golem. The Golem is a famous European Jewish myth about a clay creature that becomes alive when a wise rabbi does some magic to awake him. The magic this rabbi is doing is to carve a word into the Golem’s forehead, the word in this instance can be analogous to a prompt the AI needs to do its magic, to become “alive”.

Both AI and the Golem in the story are not really alive but rather have the illusion of being alive. The Jewish tale is meant to be cautionary, the Golem is becoming unstoppable and tries to upstage the rabbi, much like AI is threatening to upstage human workers in many different industries today.

If you don’t like this Jewish parable you can think of The Terminator instead, it’s also a man-made entity that, once built, we lost any control over it. The Terminator again looks like a skull and again has no eyes (only lights, much like the sparkling in Sora’s no-eyes), so it’s a good enough reference, although I prefer the Golem analogy. The Terminator is also regarded as a cautionary tale against the dangers of AI, of course.

Sora app icon vs The Golem (statue in Prague, Czech Republic)

Chapter 3

Stars at Night

Sora's icon is also interesting, it is a linear gradient transitioning from blue up to a very dark blue, it's brighter at the bottom and darker at the top, it also have tiny lighter pixels on it, presumably like stars in the sky.

OpenAI, I think, picked a blue background for a few reasons, first and foremost it's reminiscent of other "social" apps, much like Facebook, LinkedIn and the original Twitter app. The transitioning to the darker color is meant to signal that it's a more modern social app like TikTok, Threads and X (new Twitter) which all share a black background.

The Sora app isn't just a video generation AI model, it's a social app designed to feel much like TikTok and in that sense, they were spot on with the background colors, they signal they're a new kind of social app but with some respect, or a nod, to the past that started it all.

First row: Sora, Facebook, LinkedIn and Twitter.
Second row: Sora, TikTok, Threads and X.

We aren't done yet with the background, the background also have stars in it, those stars might invoke the image of "The Starry Night" by Vincent Van Gogh (1889), which with many other classic artists, were replicated by AI to death, so now anyone could create in his iconic style.

Get your AI Generated Van Gogh (from Getimg.ai)

If we'll go to a more pop culture route we can also think of Disney's famous "When You Wish Upon a Star" from the movie Pinocchio (1940), one of my favorite Disney movies.

Pinocchio also stars a wooden man-made doll that becomes alive and then gets into all kind of troubles, in that sense Pinocchio - like the Golem and Terminator, becomes a fitting metaphor for Sora and the AI industry as a whole.

Left: Sora app icon, Right: “When You Wish Upon a Star”, Pinocchio, Walt Disney, 1940

At first I found it strange that the Sora icon (and it's "cloud") were on a night-time background but as I started to understand the symbolism I was reminded of the hit show Game of Thrones most famous phrases: "For the night is dark and full of terrors".

Afterword

This breakdown was done without experiencing the app itself (because of my region), so all I know is by the cultural impact it made on the internet: articles, podcasts, YouTube videos etc.

Take it with a grain of salt and I hope some of what I wrote did resonate with you after all, if it did please let me know. AI as a whole was a very interesting development in the tech landscape and as I saw many people for and against the technology I only left hoping that Sora has enough guardrails in place and that they will never change their fabulous icon.

I did saw many Sora videos in a few social networks and many people screaming against Sora or video generation as a whole, but I never saw anyone doing a deep dive on their icon like I did here, so hopefully it can serve as another way we can talk about these apps that is more academic and level-headed.

Oh, and Sora is the name of the main character in the game Kingdom Hearts (2002) that yields a giant key, keys usually open doors, maybe the door to the future? to unite the past of early 2000s with the future of AI? Do with that what you will.

Goodbye.

Introduction

Obsidian is a great tool, if you're not familiar with it yet - it's a markdown editor for writing notes, documents, knowledge base or thoughts. It is a very flexible tool and it can be shaped to do almost anything by just adding plugins.

And it also has a view to see the connection between different files, Zettelkasten style, but we won't touch on that here, what we are going to touch on is how you can use Obsidian to manage a GitHub repo.

This can be also viewed the other way around - to use GitHub to store your Obsidian documents, which is the same thing but for a different use case, we'll cover both of these use cases here, so just keep reading.

Why use GitHub + Obsidian together?

This question can be split into 2 parts, depending on your use case:

Why use Obsidian as my GitHub front-end?

Obsidian uses markdown files (.md files), if you're a developer chances are you also use those files as README files on GitHub, and if you have a repository of knowledge base or documentation chances are you use them a lot.

Hand coding these files is fine, but Obsidian can be much nicer to look at than your IDE and also offers some more functionality like the ability to render them properly, helping you with syntax if you forgot how to write something and so on.

It's also very nice to separate your coding environment from your documentation environment, since you might have to jump between them all the time.

Why use GitHub as my Obsidian back-end?

GitHub can offer a free hosting to make sure your files are safe, it's one of the most reliable websites out there. Almost every developer on the planet uses GitHub for their work so you can bet the site is (almost) never down.

It can also give you some knowledge of how stuff work on the internet, a GitHub account is very handy for lots of third-party apps and services and you don't need to worry about security or maintaining your files, it will all be done for you.

Your repository can be made private, if you're worried somebody will see your grocery lists but as a rule of thumb you shouldn't write passwords or sensitive data in your GitHub repository, even private ones.

First steps:

Pulling a repo from GitHub

Before you begin, you’ll need the actual files from GitHub on your computer, to do so I recommend using the official GitHub Desktop Client.

This step can also be done with other apps such as Fork, Working Copy and more, it could also be done via the Terminal if you’re comfortable with CLI tools.

If you don’t have a particular repo you need to sync to, just open a new repo on GitHub specifically for that purpose.

Adding a gitignore file

This step is important to do before you make this repo an Obsidian vault, since Obsidian will automatically save some files to the vault’s folder.

These files will live inside a folder called .obsidian (at least on Mac OS), and to prevent this folder from syncing you can just add to the repo a file called .gitignore

This file should contain this line:

.obsidian/

Please push and commit this file back to GitHub before continuing.

If you do want to sync this folder just be aware that Obsidian will sync to GitHub your app settings, preferences and plugins you may install.

In a work setting this might be useful to sync to all employees, so they will use the same settings and plugins out of the box, so if you prefer syncing it- ignore the gitignore step and continue.

Installing Obsidian

Go to the Obsidian website and get the latest version to your preferred OS - Mac, Windows or Linux and install it (I’m sure you know how to install applications on your preferred OS).

After installing it, go ahead and open the application, on first run you will see a popup window like this:

You should use the “Open folder as vault” option

If this popup didn’t load automatically, you can always go to “File” then “Open Vault” in the Obsidian native menus.

Pick the “Open folder as vault” option (highlighted in red - see image above) and from there just pick the GitHub repo folder we did set up before installing Obsidian, if you didn’t do that- please scroll up to the “First steps” section of this article.

Using the GitHub Sync Plugin

There’s a lot of Community Plugins for Obsidian, and I mean a lot, and there are a few options to sync with GitHub, I like the plugin called GitHub Sync by Kevin Chin as I find it the most simple to set up.

In order to get it installed you’ll need to first “Enable Community Plugins” in the Obsidian settings, I recommend that you do since those plugins make Obsidian so much more robust and also tailored to your specific needs.

GitHub Sync Plugin - by Kevin Chin

Once this is installed you’ll need to set it up, go to your settings and in the bottom of your settings you’ll now have a new setting called “GitHub Sync” (it should be the last one, unless you have more plugins installed).

I recommend setting the Remote URL setting from GitHub in HTTPS format, which sounds complex, but GitHub will just give you this format (see images below).

Just make sure you’re in HTTPS tab, then hit copy

My recommended settings, notice the git location is in HTTPS format

Now if everything is setup correctly, you’ll see a GitHub icon in your Obsidian sidebar to your left, the icon should be the last one by default and when you hover your mouse over it- a little tooltip with a label “Sync with remote” should appear.

Try clicking it, did it sync successfully?

• If yes - you’re done! Congrats 🎉

• If not - close Obsidian completely, open it again and try syncing it again.

Summary

This was fun, now your Obsidian got a very reliable and professional backend, or your GitHub repo have a very nice and professional frontend. Either way- now you’re cooking.

Let me remind you that Obsidian is mostly useful (at least out of the box) for Markdown files, so this will be best for knowledge base or documentation repositories, less for an actual code repo - but that’s what your IDE is for.

If you’re working in a team, please remember that not everybody is using Obsidian so I do urge you to check the actual GitHub repo on the web from time to time to make sure you didn’t push anything that renders poorly on the site itself.

Also if you’re working from a few different devices- don’t push to GitHub from all of them at the same time as you might encounter conflicts.

Merge conflicts aren’t a massive issue on GitHub but you will have to go to GitHub on the web to resolve them (or use an IDE), an Obsidian plugin just won’t do here, so be careful and don’t push updates within 10 seconds of each other, as a rule of thumb.

I hope you enjoyed this article, please tell me if you did.
You can find me on all major social platforms:
Threads, Twitter, BlueSky

See you next time.

I’m making this into a tradition

Every month I’m making a roundup of all the CodePens I did that month, CodePens are little code sandboxes to test new ideas and see if it can work. Some I make in order to learn new things, some are just to challenge myself.

All are made for sake of creativity since writing code day-in and day-out can feel a bit monotonous so writing code creatively can be a nice change of pace and also bring unexpected joy and unexpected results.

And now - to the CodePens themselves:

To conclude - this month I made 3 CodePens, not so bad for August, which is a month my kids stay at home with no kindergarten to go to. This year I stayed with them for the majority of the month.

I’m still very happy with the results, and I’ll see you next month.

An AI Generated image, prompted with Midjourney.

How I Use AI for Writing and Coding

Let me preface this by saying I use AI everyday at work, I write and summarize the emails I write with AI, I use AI to generate faux data for UI elements (instead of using Lorem ipsum) and I also generate images with AI (like the one in this article). I constantly try out new AI tools for potential whenever a new AI tool reach some hype on Twitter, Threads, Reddit or ProductHunt.

But the most I use AI by far is for coding, I generate new files with AI from very specific prompts, I ask the AI what's wrong with my code whenever I get an error or an unexpected result and I prompt the AI for new features all the time.

I mostly use Open AI’s ChatGPT for that and sometimes Microsoft's Co-pilot, as it's built right into Visual Studio Code- my IDE of choice. I tried Cursor for a while to replace it but to be blunt I didn't find its AI to be any better for my usage- so I stayed with VS Code.

Having said all that, that's just for my work projects. In my own personal projects I don't use much AI at all, let me explain why and how I do use it when needed.

Why I don't use AI on my own projects

After saying all that, you might expect I’d use AI in all my projects but in my own personal projects I tend to not use it as much. When I make a CodePen or a new GitHub repo for myself- I do it to learn and to have fun, so everything I make in my free time is hand coded.

I want to remind myself that writing code is fun and the point of the project is to learn and to have fun- if I use AI to write my code I won’t learn anything and I’ll have less fun.

I do the same with writing, in work emails I might ask the AI to edit it but here in my blog I won’t. Everything you read here are my own words, because the point of writing for fun (which is what this blog is) is to write and have fun, not to publish what the AI wrote- actually write.

Of course I sometimes get stuck so I consult the AI like I would talk to a friend about a specific issue, but never with the attention of making the AI write it for me, just thinking with me.

Thinking vs “Problem Solving” with AI

At this point I have to separate the two modes of working with AI, what I do for work is “problem solving” with AI. Problem solving, which is basically solution hunting, it’s what I used to do with Stack Overflow before AI was even available.

It is to solve my problem as fast as possible, I don’t really read any documentation the AI gives me, I just ask it for code and then I copy said code for using in my project. It’s as simple as that.

It really lands itself to the workplace as I need to find the solution as fast as possible and I don’t really care about elegance or the challenge of writing it myself and all that.

In my personal projects- I do care about the code itself, not only I want it to be elegant and coherent, I also want to write most of it myself because the fun in writing code is- writing the code.

So I sometimes think with the AI as I would talk to a friend about my problem, not to find the solution but to understand my own problem better through talking it out. You can think of it as talking about your code to a non-dev friend, they can’t really help you but they can shed a different light on it so you can find the solution yourself.

How I Write This Blog

I write this blog myself, I never ask any AI to write it for me and I believe I’ll never will. I wanted to write this blog because writing helps me think- so why would I outsource the writing part?

Having said that I do sometimes think with the AI when writing, much like I do when I write code for my side projects. While writing “thinking with AI” is a bit different, as every fact needs to be checked and verified and never taken at face value.

Also, much like a friend who will just make up stuff they don’t know or not sure about. But still the AI can help me think more deeply sometimes. Most of the added value of it comes from its conversational nature because it really does feel like a dialogue between me and whoever I need it to be on the other side.

In conversation sometimes it’s easier to see the holes in my arguments and so it does inform my writing, even if no word or sentence were copied and pasted back to the post itself.

In Conclusion

Thinking through a problem using an AI as a tool isn’t new or revolutionary but it is the best way in my opinion to use it, as it deepens the thinking and makes your arguments stronger.

The AI starts being problematic when it’s used as the only tool in your arsenal, without fact checking and critical thinking the AI isn’t a tool, it’s a crutch. When using AI for solution hunting it isn’t a bad tool to find solutions, but it does not sharpen your thinking, maybe it even has the opposite effect.

Whatever it is that you love to do, just make sure you find a place to keep doing it and don’t fall into the hype that says everything should be done with AI. AI is just another tool and we should make sure we’re not using it as the only tool, otherwise we’re not sharpening our thinking.

Think of it as a 3D animator drawing in his sketchbook in his spare time, of course he makes money from his 3D work, but in his spare time he’s drawing like he’d done since he was a child, no fancy tools and no technology to upgrade.

It might sound mundane but that’s what he loves doing, just like I love writing simple code myself with no AI.

Just like I did when I was a child.

Let me start by saying that I’m not against the subscription model, I understand that indie developers have to eat and so they charge a small subscription for me to use their app and for them to have a dependable income they can rely on.

The same principle goes for larger software houses (even if I like it much less) and same goes for my favorite creators, youtubers, podcasters, film makers, musicians etc.

Apparently the same goes for news outlets, as The Verge recently launched a subscription plan (starting Dec 2024), which I immedietly bought into - because I love The Verge, I think they’re great journalists asking the right questions about tech these days.

I also used to love Wired, 404 Media, The Washington Post and The New York Times. If I break down the pricing for all of these subscriptions it will be $308 a year, that’s in US Dollars, $308 for just staying informed.

That’s not including the $50 a year I already pay for The Verge subscription, to put it into perspective $308 is $8 more expensive than the original Nintendo Switch, that you only buy once and not every year.

It’s almost as expensive as buying an entry level iPad, which is $350 - almost exactly the same price as all those subscirptions + The Verge subscription.

So now we can think of it as buying a brand new iPad every year, just for staying informed and up to date with the news.

The iPad is as expensive as reading the news for 1 year. Image by PCMag.

Lately I noticed that everytime I wonder what happens in Wired, The Washington Post or any other news website I bump into a paywall, after a while I’ll just won’t bother going there and I’ll end up reading what’s new on The Verge instead, the subscription I already own (and again, I’m glad to pay - they’re doing a great job).

The problem here isn’t really if I pay or not pay for news, it’s not even how much I choose to pay, the problem here is much deeper than that. The problem is that without a second (or more) source of news, I have no way of verifying what’s actually happening in the world.

For example if I read The Verge and they run an article about president Trump data purge (don’t even get me started), is it a big deal for tech enthusiasts or is it a big deal for everyone? Is it just a little thing he does next to a much bigger and more teribble thing? Who knows.

I certainly have no way of knowing, once upon a time I could just look at the headlines on different news outlets and see if they’re all reporting on the same thing and by that I could realize if it’s big or just big for tech people.

That’s a classic single story danger, as most people know the term. Meaning if you’re only reading, or watching, a certain pespective - your perspective will get distorted with time, since you have no frame of reference to the truth anymore.

I know we’re living in a post-truth era and with the rise of AI it’s harder than ever to understand what’s really “true” anymore, but paying for news is a way to make sure we’ll never cross-reference anything and we’ll just read what is given to us in our own corner of the internet and take it as absolute truth.

While this dystopian view is reality, I still very much recommend for everyone to pick at least one outlet to follow, mine is The Verge but it doesn’t really matter which one as long as you believe the journalists who work there are looking to actually report and not just to maximize their bottom line.

The reason I think everyone should pick a news outlet is that even a mediocre one is better than just scrolling through social media and believing everything you read there, which are mostly lies and half-truths.

Social media posts are often click baits that were designed to outrage and to attract discourse, by their nature they will never reflect the true state of the world, any news outlet will do better.

I’ll stay with The Verge for now.

UI Components from Daisy UI

It all started for me when I was at work, editing some WordPress website for one client while maintaining a React Storybook repo of UI components for another client.
My boss saw me working hard and he wanted me to know there going to be a new client that needs 3 templates for his website - in a day.

But the kick was that the client didn’t have a website yet so our templates will provide him with a base for his new website, meaning we can pick any tech stack we want, as long as we can maintain it later on.

My boss was so excited about the new client and the new templates - he wanted the moon and the stars and I thought: I only have a day? I can’t even get through a WordPress installation and installing a custom theme that fast.

So that’s when I started to think outside the usual React and WordPress boxes and thought about a lean website I can edit myself faster than I can read the docs.

Enter UI Libraries

If you’re reading this - you’re probably know about UI Libraries, they’re a fast shortcut a lot of websites and web apps take to implement a range of ready-made components instead of reinventing the wheel each time.

The most famous UI Libraries are ShadCN, Radix UI and MUI. All are very professional and very well thought out… for React.

ShadCN plays nice with every framework, as long as it’s based on React.

The problems with React

You might think - what’s wrong with React? I get it - React is a standard and we’re all used to it by now. I also spend most of my days at work hunching over some React code (or TypeScript) and it’s not a bad way to live.

But React still have some drawbacks:

1. React is hard to learn - which means that a lot of the time when I’m working with clients that are developers or have their own developers (like in this templates task) they can’t help me with React.

2. React projects needs to be built, there is no folder I can just ZIP and send around to the client’s website (I know I can send the build folder - but then even a small change will have to go through me).

3. It will take more time than just copying and pasting some HTML elements, React has more of an ecosystem around it - which is great but also more time consuming.

4. Clean HTML and CSS will always be simpler since in React you still need to confront those, but also a few more things - that can all go terribly wrong.

Entering the “Clean” HTML and CSS UI Libraries

Here is a quick overview of the best ones I found, there’s 4 of them here and they all work a little different, in order to test all of them, I’ll show a CodePen of each showing its native Card Component.

I picked the Card Component because it’s a simple component a lot of websites use nowadays but it’s not too simple, like a Button - that we can hardly appreciate the differences between the libraries.

<link href="https://cdn.jsdelivr.net/npm/daisyui@5" rel="stylesheet" type="text/css" />

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>

<link href="https://cdn.jsdelivr.net/npm/daisyui@5/themes.css" rel="stylesheet" type="text/css" />

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>

<script src="//unpkg.com/alpinejs" defer></script>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.20.1/cdn/themes/light.css" />

<script type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.20.1/cdn/shoelace-autoloader.js"></script>

In conclusion you can (and should) explore a wide range of UI Libraries when writing code - even if you write clean HTML, there’s no reason to reinvent the wheel with each new project.

If you’re the kind of person that doesn’t like React (or doesn’t want to learn it) maybe your next move is to learn how to work with Tailwind CSS to maximize your styling potential.

Even if you don’t want to learn Tailwind and don’t want to learn React, you can always just use Shoelace, it’s all clean code and it’s very simple to get started.

Thanks for Reading to the end. You now get a cookie 🍪

What is a CodePen?

CodePen is a website that makes it possible to write and share frontend code (I usually write HTML & CSS, sometimes JavaScript, sometimes Tailwind).

Other users of the site can also heart your creations and of course, you can send them or share them on social media to get help, show off or just share your knowledge.

It’s like part social-media and part a specialized web app for professionals. It’s wonderful.

Why Do I Make Them?

I try to make one every week, but sometimes life get in the way, so I’m not sure going forward I will have this kind of post every month.

Long story short - to learn new things in frontend, every CodePen I make makes it easier for me to understand some new concept or a new feature, I like doing it in CodePens for 2 main reasons:

• It’s a clean sandbox to work with, no React, no Next.js, nothing to obscure how this feature really works (and no excuses like - it works on my machine!)

• To have something to share, of course. it’s fun to share in social media and get some likes but it’s even more fun to show to a fellow developer and get asked “how did you do that?”.

All CodePens (also known as Pens) in this post are embedded as custom HTML Snippets, so you can see the creation front and center, the code should automatically open to the left if you switch to the HTML tab, the CSS tab or the JS one with a press of a button.

If there’s no JS tab to click on, it means this CodePen is made with pure HTML and CSS, no JavaScript involved (usually it means it’s an animation).

And now - to the CodePens themselves:

New J Animation

This is a “simple” CSS animation, its only complexity comes from the inverted colors, which I did with mix-blend-mode but I had to make it only on some of the keyframes so it will disappear on the background at the start and end points, otherwise the loop won’t work.

Not Closing Any Rings

On the flip side, this animation was anything but simple, it might look simple but it’s not, once you remember that in CSS you can’t really change the length of a circular line on the spot, or once you realize you have no line-cap property (like stroke-linecap from the SVG standard).

I could make this animation fairly simple with SVG animations (or in After Effects) but making it with CSS was the point, and I’m happy with how it turned out.

Based on Apple’s Health App, most people know it as “The Rings” (or “Activity Rings”) on their Apple Watch.

My Endless Button Collection

You might have seen this one before, as it made the CodePen Spark (CodePen’s weekly newsletter - here’s the link).

The whole idea started with a silly joke - buttons in product design and buttons in fashion design are quite different, but what happens if we marry the two?

Text Scroll Animation

I wanted to make some creative scrolling effect, I thought at first this could be done with CSS scroll-animation but the browser support wasn’t there at the time (today it’s much better).

It looks simple but there’s a lot going on here, the variable font, the font-size, the opacity and of course the hover effect all contribute to a full vision of scrolling that isn’t just scrolling.

To conclude - this month was very prolific, I did manage to make a new CodePen every single week, some were better than others but at least I showed up every time.

I even got into the CodePen Newsletter (again - here’s the link) and I’m really proud of how it turned out - those buttons were my favorite too.

See you next month.

This is my first post here!

You can say it’s just a technical test that everything is working as expected, but hey - a technical test is a lot, and if you’re reading this then I guess it did worked.

Now what? Now I’m blogging I guess…