Since late 2019, it has possible in Chrome Dev Tools to easily toggle between prefers-color-scheme: dark and prefers-color-scheme: light .

1. Open your Dev Tools, you can find them by clicking the three dots in the top right corner, followed by More Tools > Developer Tools.

   

2. Open your command tools, you can do with by pressing Ctrl+Shift+P on Windows or Command+Shift+P on Mac. Alternatively, you can click the three dots. in the top right (within the dev tools menu) and click Run Command.

   

3. In the drop menu, search for Show Rendering and select it.

   

4. The Rendering tab should now be open. Search within it for the setting Emulate CSS media feature prefers-color-scheme.

   

5. You can now use this dropdown setting to easily switch between light and dark mode.

Thanks for reading 🙏

Did you find this guide helpful? Let me know in the comments, or just say hi 👋.

Until next time, Happy Coding!

1. Use a custom domain

Hashnode makes it very easy for you to link a custom domain to your blog, which can help create a level of legitimacy for your site. Many of the visitors to your blog will be from outside of the Hashnode community. They may becoming from Google or a link on your other social media accounts. Landing on a page that is owned by you helps them to trust you as a leader in your niche.

There are many good sites where you can buy a custom domain cheaply, including GoDaddy or Vercel.

2. Add a custom favicon to your blog

If you're not a web developer or designer by trade, the favicon is the small icon on a website's tab bar.

By default, all Hashnode blogs have the Hashnode cog logo as their icon, but you can change this in your blog appearance settings. This will also add to the legitimacy of your blog, separating it from the thousands of other Hashnode blogs.

If you want to keep it simple but effective, you can generate a favicon, for free, on favicon.io. Simply pick an emoji, or use the first letter of your name combined with your favourite font. Or you could try your hand at some pixel art and create a completely unique favicon here.

3. Create a logo for your blog

Another, great feature Hashnode makes easy to customise, is your blog logo. This can easily be changed in the appearance tab, in your blog dashboard. They even allow you to upload a different version for dark mode, so that it will always stand out.

If you're worried about your graphic design skills, then don’t be. Nowadays, you don’t need to be a graphic designer to create simple and effective graphics using tools like Canva. I recommend adapting one of their built-in logos which you like. It is important to remember to use a transparent background for a clean and polished look (you can sign-up on Canva for a 30-day free trial to access this feature).

4. Add article header images to all your articles

It is often said that “a picture is worth a thousand words”, and that “the average attention span on the internet is five seconds”. When you combine these two ideas, you realise that pictures are an important tool in capturing any of your potential readers' attention and getting them to stick around.

Again if you are worried about your design skills there are lots of great templates on Canva. Remember the titles don’t need to be complicated to be effective. I particularly like akoskm and Cognitive Computations’ article headers because they keep them simple and consistent. Here are some examples from akoskm’s blog, to inspire you:

A great alternative to creating article headers is to utilise Hashnode’s built-in Unsplash selector. Unsplash gives you access to thousands of high-quality, free-to-use, images that will look professional on your blog. To use this, next time you are writing an article, simply select ‘Add a cover’, then select the ‘Unsplash’ tab and search their vast collection.

5. Customise the CSS of your blog

Hashnode, like many great blogging platforms, allows you to customise the CSS of your blog. In your blog dashboard, appearance tab, look for the customise CSS button. You can edit and amend the generic CSS for your home page, your article and any pages you have.

Don’t worry if you're not a front-end web developer it is very easy and simple to get started. Avneesh Agarwal has a great tutorial here on how to edit the colours of your site to be more consistent with your brand. Personally, I am still deciding on my branding and colours, but wanted to make my site more interactive and polished with a few CSS animations. Inspired by Victoria Lo’s blog, here are the animations I have added so far:

.blog-author-area {
    overflow: hidden;
    animation: slideIn ease 2s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

@keyframes slideIn {
    0% {max-height: 0;}
    100% {max-height: 500px;}
}

.blog-theme-switcher{
    animation: rotate 1s;
}

@keyframes rotate {
    0% {transform: rotate(0deg);}
    100% {transform: rotate(360deg);}
}

.blog-posts-wrapper {
    justify-content: space-between;
}

.blog-post-card {
    transition: .6s;
    width: 48% !important;
    padding: 1.2rem !important;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.20);
}

.blog-post-card:hover {
    box-shadow: 0 8px 32px 0 rgb(177 156 217 / 60%);
}

.dark .blog-post-card:hover {
    box-shadow: 0 8px 32px 0 rgb(255 255 255 / 40%);
}

@media (max-width: 620px) {
    .blog-posts-wrapper {
        justify-content: center;
    }

    .blog-post-card {
        width: 96% !important;
    }
}

Feel free to use these as you will. Personally, I am using the “Grid Layout” (you can change this in your dashboard, appearance settings) for my home page, so the selectors you need to use for other layouts may vary.

Remember to always test any changes for mobile responsiveness!

Bonus: 6. Add a few pages to your site

One commonality I have noticed between lots of the best-achieving blogs on the site is the use of pages. Pages can be added using markup on the pages tab of your dashboard. (Remember to add them to your Navbar afterwards!)

Adding pages allows you to direct any new visitors to your blog to your particular areas of interest. This can be a separate page or even just an article series. This gives new visitors more of an idea of what you are about and makes your blog much easier to navigate.

Good page ideas to start with:

• About Me - Introduce yourself, why do you blog, what can you offer readers?

• Resources - What are some of the best resources you use all the time, within your area of expertise?

• Books - This echos a resources tab, what books do you think everyone should read?

• Your favourite series/collection of articles you’ve written

Thanks for reading!

Do you have any other tips to improve your Hashnode? Let me know in the comments, or just say hi 👋.

Until next time, Happy Coding!

Group hovers allow you to easily and simply create hover events that detect and work across a subsection of your page. This is challenging to do in vanilla CSS, as it involves creating multiple nested clauses. However, once you understand how Tailwind groups work and how to combine them with group hover this becomes simple, clean and easy.

Take the example below, when the user hovers anywhere in the word the whole section changes to a beautiful rainbow of colours.

Lets start with a simple text string broken down with multiple spans, each representing a different colour in the soon to be rainbow.

<p>
    <span id="red">Richard</span>
    <span id="orange">Of</span>
    <span id="yellow">York</span>
    <span id="green">Gave</span>
    <span id="blue">Battle</span>
    <span id="indigo">In</span>
    <span id="violet">Vain</span>
</p>

Now in the CSS you could create a clause for each of these Ids and detect hover to implement the colour change. But this would only change each word one at a time - what if you want to make the whole string rainbow at the same time?

To do this you need to add hover detection on the parent <p> element, and then access each of the <span> elements within it. While this works, if you are working with lots of different elements, all doing different things, it can quickly become long and difficult to maintain.

p:hover #red {
  color: red;
}
p:hover #orange {
  color: orange;
}
p:hover #yellow {
  color: yellow;
}
p:hover #green {
  color: green;
}
p:hover #blue {
  color: blue;
}
p:hover #indigo {
  color: indigo;
}
p:hover #violet {
  color: violet;
}

You could use SCSS, which allows use to nest all of the children tags within a single copy of the parent. But, better still you can use Tailwind groups.

In Tailwind, you start by defining the group. You can do this by adding the group class to the parent - in this case this is the <p> tag.

<p class="group"><span id="red">Richard</span>...</p>

Then you call group-hover class within each of the children classes, combined with what styles should be applied on hover.

<p class="group"><span id="red" class="group-hover:text-red-500">Richard</span>...</p>

You can now clean up your HTML and remove the unnecessary IDs, leaving us with just the following.

<p class="group">
    <span class="group-hover:text-red-500">Richard</span>
    <span class="group-hover:text-orange-500">Of</span>
    <span class="group-hover:text-yellow-500">York</span>
    <span class="group-hover:text-green-500">Gave</span>
    <span class="group-hover:text-blue-500">Battle</span>
    <span class="group-hover:text-indigo-500">In</span>
    <span class="group-hover:text-violet-500">Vain</span>
</p>

But what is you want to nest hover interactions - for example, if you wanted “york gave battle” to also be all different sizes when hovered on? Well this is just as easy using group names. Simply follow the same steps, but label your new group with a concise name. You can do this with the slash syntax, so to name a group ‘bigger’ use group/bigger .

<p class="group">
    <span class="group-hover:text-red-500">Richard</span>
    <span class="group-hover:text-orange-500">Of</span>
    <span class="group/bigger">
        <span class="group-hover:text-yellow-500 group-hover/bigger:text-lg">York</span>
        <span class="group-hover:text-green-500 group-hover/bigger:text-xl">Gave</span>
        <span class="group-hover:text-blue-500 group-hover/bigger:text-lg">Battle</span>
    <span>
    <span class="group-hover:text-indigo-500">In</span>
    <span class="group-hover:text-violet-500">Vain</span>
</p>

You can check out both these working examples in tailwind playground [here].

Or have a look at a more realistic use of group hover on an example card [here].

Thanks for reading!

What other cool features of Tailwind do you like to use? Let me know in the comments, or just say hi 👋.

Until next time, Happy Coding!

To learn more about this topic, I recommend reading the Tailwind documentation:

• https://tailwindcss.com/docs/hover-focus-and-other-states

1. Hopper almost certainly wasn’t the one who found it or wrote about it and more importantly,

2. The use of the term bug to describe an engineering or software issue long predates Hopper and her team.

So how did this story come to be?

Well, there was definitely a squished moth found in the relays of the Havard Mark II, while Hopper was working there. We know this because of a logbook entry that was written, with the following quote:

“First actual case of bug being found”

- complete with the moth sellotaped neatly above it.

The notebook is now held as a piece of history in the Smithsonian Institution’s National Museum of American History collection - taped moth still intact!

So it’s true then Hopper did coin the term after finding a squished moth?

Unfortunately not, based on handwriting comparisons the Smithsonian Institution does not believe the writing to be that of Grace Hopper. And considering that Hopper’s work in the lab was not that of a technician maintaining the relays, it is unlikely that she was the one to find the famous critter.

This might lead you to believe that it was a technician working with Hopper who coined the term, but it was simply a joke among colleagues.

The term had already been in common use by engineers for over 50 years.

As far back as 1873, Thomas Edison, the inventor of the lightbulb, had filed a patent for his ‘bug trap’ designed to reduce interference, or bugs, on his morse-code quadruplex telegraph system.

Edison is frequently reported to have used the term bug to refer to issues with his inventions and would often write about bugs as if there was an actual critter in the system causing the issue.

In an 1889 newspaper, a British reporter wrote:

“Mr. Edison…had been up the two previous nights working on fixing ‘a bug’ in his phonograph—an expression for solving a difficulty, and implying that some imaginary insect has secreted itself inside and is causing all the trouble.”

In fact, the Oxford English dictionary used this quote to define a bug as “a defect or fault in a machine, plan, or the like.”

In all likelihood, Edison didn’t invent the term either but was one of the many great engineers of the time to popularise it.

The term ‘bug’ in reference to an insect, appears to have originated from several Middle English words used to describe ghouls, ghosts and other spirits. These included:

“Bugge”, “Bugaboo” and “Bugbear”

In the 1620s, it would first be used to describe a small creature in reference to bedbugs. Slowly evolving in form to describe a range of critters.

So the question remains who invented the term, well we don’t know and I guess we probably never will. That is likely why Hopper’s story has become so well known because it’s a simple and funny anecdote with a punchline that still makes software engineers chuckle today.

So next time you are frustrated trying to get your code to work - just be glad you no longer have to check if it’s being caused by an actual fly stuck inside the computer.

Thanks for reading!

Did you know the true origins of the term, or had you been fooled by the Grace Hopper tale? Let me know in the comments, or just say hi 👋.

Until next time, Happy Coding!

To learn more about this topic, I recommend reading the following articles:

• https://education.nationalgeographic.org/resource/worlds-first-computer-bug/

• https://spectrum.ieee.org/did-you-know-edison-coined-the-term-bug

Hi, I'm Annie.

I am a full-stack developer, who has a passion for coding; creating things for the web and making creative front-end projects. I'm looking to use this blog to connect with like-minded people and grow in my own skills along the way.

I have been coding since I first discovered HTML & CSS on the web game, Neopets, way back in the day. Later, I learned JavaScript to personalise my Tumblr theme and I have been hooked ever since.

My favourite computing related fun fact is the first turing complete computer, the ENIAC, weighed in at a whopping 27 tonnes. That's roughly the weight of 150 thousand modern smartphones!

Outside of programming, I am a diagnosable nerd who loves Lego, Doctor Who, crochet and cuddles with my two, very fluffy, cats.

Thanks for reading!

Do you have a favourite computing fun fact? Please share in the comments, or just say hi 👋.

Until next time, Happy Coding!

Bonus! Cat Tax: