Dark Mode, the easy way.

Jonathan Adly — Mon, 30 Nov 2020 15:59:54 +0000

The basics

I love dark mode. It is elegant, beautiful, and instantly elevates the user experience. Although, it is a lot of work to get right as a solo-developer without a CSS framework.

You have to get the color schemes right, add classes for dark mode elements, and sprinkle some javascript to make it all work. Here is a basic implementation of how to do it yourself.

I recently discovered the halfmoon CSS framework and instantly fell in love. It is all the good things that come with bootstrap, but with Dark Mode implementation and easy customization.

Between Tailwinds and halfmoon, I find myself much more at ease with halfmoon as a Django developer.

This is meant to be a review of my experience with it, building joyful.gifts - a relatively complex and a large project.

The good

Dark mode naively supported. As easy as putting a button in.

<button class="btn btn-action mr-5" type="button" onclick="halfmoon.toggleDarkMode()" aria-label="Toggle dark mode">
<!--- bootstrap svg icons -->
  <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-circle-half" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M8 15V1a7 7 0 1 1 0 14zm0 1A8 8 0 1 1 8 0a8 8 0 0 1 0 16z" />
    </svg>
</button>

Easy customization. Just override whatever variables you want to customize in a style tag. And you are done!

<style>
:root {
            /* Change primary color from blue to orange */

            --primary-color: #FF8C42;
            /* Before: var(--blue-color) */
            --primary-color-light: #FFA65C;
            /* Before: var(--blue-color-light) */
            --primary-color-very-light: #FFBF75;
            /* Before: var(--blue-color-very-light) */
            --primary-color-dark: #E67329;
            /* Before: var(--blue-color-dark) */
            --primary-color-very-dark: #E67329;
            /* Before: var(--blue-color-very-dark) */
        }
    </style>

Delivery over CDN even with customization. No downloading packages, or bloat. Just one CSS file, and one JS file.
Bootstrap like documentations and classes. Documentations and intuitive naming is a huge strength to any framework, and I love how halfmoon went about their documentation and naming.

What's missing!

Some bootstrap features - I really missed the Carousel from bootstrap.
Templates to plug and go (or buy and go).

But wait...there's more

Doing dashboards for SaaS or SaaS-like web application like joyful.gifts is time consuming and prone to errors. Well - halfmoon gives you a dashboard, ready for you to take and customize in the documentation - completely free.

Closing thoughts

I was not involved in the development of halfmoon or confident enough in my CSS abilities to contribute. The least I can do is to spread the word of this amazing piece of open-source software. It definitely doesn't get as much attention as it deserves!

If you liked this article and want to see more - Let me know. I would like to continue exploring the tech used in joyful.gifts and your words of encouragement or spreading the word about the project would go a long way.

How I learned to code & built a real software product in ~ 6 months

Jonathan Adly — Fri, 20 Nov 2020 13:18:12 +0000

On May 21st, 2020. I wrote my first ever line of code as part of Harvard’s CS50 online course. Six months later, I pushed a production ready web application (see https://joyful.gifts/ ) for the whole world to use. Below is how I approached learning, the journey, and some unconventional advice for those learning to code to build products.

First line of Code in C!

How I learned.

Please note, this journey from the very beginning was about being flexible as an entrepreneur and a builder as well as be able to use the best tools available to solve real-world problems. Take it with a grain of salt if your goal is primarily to take an entry-level job as a software developer, it may not apply.

Here is how I approached learning,

I focused on building and getting joy from what I built. If it felt like grinding, I knew I was doing it the wrong way
I didn’t compare where I am or my tech stack with anyone. If it works, it’s reliable and joy to work with, it means I was in the right place
I put a lot of effort in searching for true experts in the field, and ignored marketers trying to sell me the latest hyped tutorial
I kept a close eye on and validated advice in developer to developer platforms (super-technical podcasts, developer forums, niche subreddits are good places to start)
I familiarized myself with new tech as needed, but only dived deep if it solved a specific problem that I have now! (Sorry — I still don’t have a problem that SPA’s would solve)
I didn’t shy away from “hard” things if they solved a problem. Docker is hard, but solved a problem that I had, so I went there.
Given a choice, I always choose the proven and tried technology over the new and shiny.

Journey.

This should be as an overall guide rather than a specific step by step direction, software development evolves very quickly and resources gets outdated quickly. Additionally, there are smaller topics that one needs to learn along the way to ship products where a simple tutorial will do (GIT, Bootstrap, third party integrations, deployment, etc.)

C & Intro to Algorithms via CS50
HTML/CSS fundamental via FreeCodeCamp
JavaScript via eloquentjavascript
Python/Flask via CS50
Django — Beginner via the book “Django for beginners”
Using Django + Modern JavaScript via CS50W
Docker via Dive into docker
Django — Professional & best practices via “Django for professionals” and “Two scoops of Django”

Unconventional Advice (maybe?).

If you want to learn, learn something brand new. If you want to build, build using what you already know and proven to work.
Popular tools doesn’t equal useful tools.
Seek the advice of older developers who had seen a disaster or two. Avoid tech-hype guys/gals.
Learning to code is like learning to read or write. Only useful if you have something meaningful to say.

I am happy to answer any specific questions about my journey or joyful.gifts — Best way is at Twitter

DEV Community: Jonathan Adly