I’m not going to lie; 2022 was my best year yet! I mean, don’t get me wrong, every other year has been fantastic, but 2022 was so exceptional that it reminds me of 2019 - the best year in the last decade.

Of course, 2022 wasn’t just filled with only good things, bad occurrences happened as well. This review will cover the good and the bad. I’ll also share my plans for 2023. So, let’s jump right into it. 💃

I passed the CKAD exam

If you don’t already know, I transitioned from Web Development to the Cloud Native field in the middle of 2021. I had always been fascinated by Kubernetes and other Cloud Native technologies, so when the opportunity came to make the switch, I thought this was the universe saying, “go for it”.

Transitioning to a new field involves a lot of learning and risk (because things may not always go as planned), and even though learning new things can be great, it can also be exhausting sometimes.

The company I work for is very intentional about the growth of their staff, so they paid for me to take the CKAD exam to enable me to improve my knowledge of Kubernetes. So, I prepared for the exam, wrote at least one article every week about my learnings, and eventually took and passed the CKAD exam, making me a Certified Kubernetes Application Developer.

Passing this exam was a reflection of all the progress I had made since the transition and how much I had learned. It made me very happy, but it also reminded me that I still had a lot more to learn.

I was promoted to Senior Developer Advocate

If you ask me if there was any day in 2022 that I was literally smiling from the beginning to the end of the day, then it will be that very day my manager told me that I had been promoted.

Becoming a Senior Developer Advocate in 2022 was one of my key goals. Seeing it materialize was literally one of the best things that have happened to me in my career. Aside from the salary increase that comes with a promotion, it is a reflection that your manager and the company at large believe that the work you’ve been doing is valuable and that you deserve to be taken to a new level because of that.

I’m always smiling most of the time, but I smiled a hundred times more throughout that week. 😂

I gave in-person tech talks in Europe and the United States of America

I have spoken at some international conferences, but it’s always been virtual. This year was different. I got to speak in Europe and the United States of America in person!

My first in-person international conference in 2022 was at KubeCon EU in Spain. I honestly couldn’t believe that I was going to speak at the world’s largest cloud native conference because it wasn’t even up to a year since the transition. It was almost unbelievable, to be honest, and wouldn’t have been possible without my manager and other amazing colleagues at Ambassador Labs.

The second in-person conference was at All Things Open in North Carolina. I got the opportunity to talk about two things that I love; Telepresence and Open Source. #AllThingsOpen was one of the most organized conferences I’ve been to - everything was set in place, the location was great, and the speakers were absolutely fantastic. I loved every single minute of it. Shout out to the organizers of All Things Open for creating such an excellent conference.

The interesting thing about speaking in person at these conferences is that I get to see so many people that have inspired, motivated, and supported me in person.

I travelled to six countries

Most countries and people across the world have a bad stereotype about Nigerians, so it can often be difficult to travel when you have a Nigerian passport. You’ll have to go through the draining process of applying for visas and getting rejected by the embassies. Even when your visa gets approved, you’ll still have to deal with standing in long queues when passing through immigration or getting searched more than every other person by the security just because you are “Nigerian”. Nevertheless, I’ll take the searches and queues over not my visa application getting rejected by the Embassy.

Regardless of these setbacks of being a Nigerian, I was opportune to travel to Europe and the United States of America for the first time this year.

I was only able to get the Schengen visa because I applied with someone who was a frequent traveller. I think my bank statement helped too lol, but considering that my Schengen visa was rejected in 2021, I think this one was approved because my application was tied to theirs.

I think I got my US visa because I had travelled to Europe already, worked for my current company, which is based in the US, for more than a year, and was invited to give tech talks at a conference in the US. I can’t explain why my visa application was approved, but these are my conspiracy theories. I had heard about how many people have been rejected severally, so I was grateful to God that I got the US visa.

Even though I went to 6 countries this year, I visited more than one state in each of those countries. This tweet below by Sultan about my trips made me laugh so hard when I saw it 😂

Anyway, let me briefly break down each trip. 👇

Europe - France, Spain, & Greece

Before travelling to Paris, I had never gone on a solo trip. Yes, I have travelled to several places before Paris, but it was either for tech conferences where I went with other tech people or on vacation with someone. This time, I left Nigeria alone for the first time. This meant I had to figure out everything myself, from taking pictures, exploring, translating French to English, communicating with the French folks, etc. Doing this solo trip reminded me that I was able to do anything by myself and that I was happy with my own company. Paris was fantastic! I finally got to see the much-talked-about Eiffel tower and the Louvre museum. I ate croissants, walked around the city, made memories, and visited other historical landmarks.

After Paris, I went to Spain for KubeCon EU. I met some of my friends from Nigeria who are now living in European countries. I also met my manager, Daniel, for the first time too, and it was amazing. Daniel is the best manager I’ve ever had, and it was so good to finally see the person I had been working with and speaking to virtually every week in person. I met a couple of other colleagues from Ambassador Labs as well and met some of my Twitter acquaintances in person too.

A couple of months later, I went to Paris (again) and Greece (Santorini and Athens) for vacation. Honestly, Santorini is just as beautiful as they claim it is - you could see the moon up close cause your hotel is on a hill, the water is blue, and the houses are white. Lovely place! Athens was amazing too - they had a lot of fantastic quotes and historical buildings.

Africa - Rwanda & Ghana

My best friends and I have been talking about going on vacations since forever, but the vacations never left the group chat. This year, we didn't just go to one country, we went to two! My best friends (Somto and Grace) are two of the most important people in my life, so anytime I get to spend with them is always fantastic and filled with great memories, laughter, communication, and peace. They are the best friends anyone could ask for. I love them so much, and I’m grateful I have them in my life.

United States of America - Detriot & North Carolina

I got to attend KubeCon NA in Detroit and speak at All Things Open in North Carolina. It was amazing to see what the US looked like in person, hang out with more colleagues from work, meet friends and acquaintances, and just all around have an amazing time.

The weather wasn't as cold as I expected and that was good because the cold and I aren't the best of friends. I plan to return to the US next year for vacation, so I can go to states like New York, San Francisco, Vegas, etc. I honestly can’t wait.

I took a step back from being active in the tech community & Twitter

I didn't do much in the tech community this year, but I’m adding it as a good part of 2022 because it was an intentional decision. Throughout my career, I’ve been super active in the tech community, and even though it is great and impactful, it can also be very overwhelming and would sometimes prevent you from doing other things you love because you’ll always have so many things to do every day.

Aside from speaking at All Things Open and KubeCon, I organized OSCAfest with some amazing folks, spoke at my hometown (Google I/O Uyo), and few more virtual tech conferences/events.

Honestly, taking a step back from the tech community and being active on Twitter was very much impactful in my life. It allowed me to do more things I loved, like travelling, watching movies, resting, spending more time with my loved ones, and, most importantly, not having too many things to do every day.

2023 will be different, though; I’d go back to being active on Twitter, hosting tech events, and speaking at more tech conferences, but this time balance it out with the things I love so I don’t feel overwhelmed.

I partnered with some amazing tech companies

I had partnership engagements with Talent QL, AltSchoolAfrica, Teleport & LinkedIn this year. Given the fact that I wasn't very active in the tech community this year, it was nice to still be able to partner with these companies. I look forward to partnering with more companies and tech communities in 2023.

Some things didn't go as planned in 2022

• One of the key things I wanted to do in 2022 was to create more video content. But like every other year, 2022 passed without me creating a YouTube channel or a TikTok page.

• I struggled a lot with consistency and maintaining a stable schedule this year. Some things that contributed to this were procrastination, change in time zones when I travelled, etc. I definitely want to be intentional about this next year.

• There was a saving goal I wanted to reach this year, but I wasn't able to. Nevertheless, I’m still grateful that I utilized my money effectively this year and used.

• I barely wrote an article on my personal blog. In June, I even wrote an article titled Hey! I’m back with the intention of becoming active with writing on my personal blog again, but I only wrote one more article after that. It’s not like I stopped writing completely. I wrote over 15 - 20 articles for my company, but it would have been nice if I also published articles on my personal blog too. I started writing this year in review today, so the year doesn’t end with me publishing only two articles on my blog because three is better than two 😂.

What will I be doing in 2023?

Inspired by 2022, I will start 2023 by proclaiming how it will be my best year yet. I won’t stop making those proclamations, I’ll also set systems to ensure those proclamations get manifested.

Here are some of the key things I want to do or achieve in 2023 👇

• I want to travel to Turkey, Amsterdam, Saudi Arabia, Italy (for my birthday), Morocco, and the US (for Christmas). I need to utilize the full potential of this remote work. Why work in Nigeria when I can be lying down on a beach somewhere and working? 😅

• 2023 is the year I finally take this video content creation thing seriously. I know it’s going to be hard and out of my comfort zone, but I’m going to push myself to do it.

• I love Nigeria, but I’ve finally come to the realization that Nigeria isn't the place I want to live in for the rest of my life. The government has been actively working towards making the country even worse, and I can’t even imagine what the country would look like in the next four years. I want to live a life where I don’t have to worry about power supply, internet service, or even the chance of surviving an accident or illness because of the inadequacy of the hospitals. It is super exhausting. I don’t have anything figured out yet, but I’ll think about the countries I’d like to relocate to and take steps toward making it a reality.

• There was a lot of inconsistency with my fitness journey in 2022. It significantly improved in the last few weeks of 2022, so I want to maintain that and even improve in 2023.

• Just like every other year, I’ll be working on improving myself. From learning Golang, journaling, improving my Kubernetes and Cloud Native knowledge, video editing, etc.

Summary

I bet there are so many other wins and losses that I didn't include in this review because I can’t remember them since I started writing this article today, and I want to go back to continue my vacation quickly. But before ending this article, I thought to share that one of the key things I learned from 2022 was the power of positive thinking. The ability to always stay or at least try to see the positive side of every situation you are in, whether it is a good one or not. It can be very beneficial for your mental health, growth, and the people you interact with.

Finally, I want to thank God for everything he has done for me. Honestly, I struggle to find the right words to express my appreciation to God. He made all of this possible, and I’m returning all the glory to him. I also want to thank everyone who has contributed to making 2022 phenomenal for me. And finally, I want to thank me for believing in me.

Next year will be better!

I know this year wasn't the best for most people, so if you are reading this, I want to use this opportunity to tell you to stand strong because 2023 will be better. You have your whole life ahead of you, and the fact that this year wasn't so great doesn't mean other years wouldn't be better.

You may be wondering why I'm talking about Klustered when the title of this article is centered around something else. I'll tell you! It's because I discovered Teleport during my time as a guest on Klustered. I was in awe of the platform and the things it could help me and my teammates achieve.

After the show, I decided to learn more about the capabilities of Teleport, and that was when I realized that it was more powerful than I had imagined. So, I decided to write an article about how you can use Teleport to give developers secure access to Kubernetes Clusters.

What is Teleport?

The creators of Teleport say it is the easiest and most secure way to access infrastructure.

In my opinion, Teleport is an open source multi-protocol access proxy that allows developers and security professionals to unify access for SSH servers, Kubernetes clusters, web applications, and databases across all environments. It consolidates identity-based access to your infrastructures, helps you meet compliance requirements (e.g., MFA, RBAC, etc.), and also gives you full visibility into the access and behaviour of your infrastructures.

Even though Teleport can be used to access different infrastructures anywhere in the world, this article is only focused on explaining how it can be used to give developers (or any other person who needs it) secure access to Kubernetes clusters.

What are the benefits of using Teleport?

Before getting hands-on with Teleport, I thought to share some benefits of Teleport and include real-life scenarios on how each of these benefits can positively impact the workflow, productivty and security of development teams using Kubernetes.

1. Teleport provides identity-based access to your Kubernetes cluster

Teleport gives every developer, infrastructure resources (VM, K8s cluster, Database or Windows Server), and application an identity, thereby neutralizing security threats and reducing the impact of breaches.

This means that anybody who doesn't match the identity you've set up will not be granted access to your Kubernetes cluster, and the identity and interactions of those who have access to the Kubernetes cluster can be easily identified & monitored for security reasons.

Scenario:

Most organizations use traditional approaches like passwords or private keys as a means of securing access to their Kubernetes clusters. But this isn't very scalable and secure as it requires manual effort, and the password can be exposed mistakenly. On the other hand, using Teleport to provide secure access to your Kubernetes clusters means that you can implement a single sign-on authentication scheme using GitHub or other supported SSO providers on your Kubernetes cluster to ensure that only members of a specified team can access the Kubernetes cluster.

2. Teleport gives you full visibility of all activities performed on your Kubernetes cluster

Teleport provides a way for you to see all the activities that have been performed by every single person that accesses your team's Kubernetes cluster. This visibility comes in three formats; session recording, unified audit logs, and a live view.

The session recordings can show you every kubectl session by a developer or service account. The unified audit log shows you all security events across all clusters in a single location, and the live view displays all online clusters, active kubectl sessions, and access requests.

Scenario:

Instead of having a panic attack when trying to figure out why a service in the cluster is down or why something isn't working as it used to, you can use Teleport's audit log, sessions, and live view as a source of truth to view all the activities performed, who carried them out and figure out what most have caused the error or bug. With Teleport, debugging and analyzing bugs is now easier than ever.

3. Teleport helps you implement best pratices for Kubernetes access easily

In a world where hackers have successfully been able to attack some of the most secured companies, the importance of going the extra mile to secure your team's Kubernetes cluster cannot be over-emphasized.

Teleport uniquely addresses these modern security challenges of today by enforcing the Zero Trust security approach, thereby making it easy for development teams to implement industry best practices for Kubernetes access (e.g., MFA, RBAC, & SSO using identity-based short-lived X.509 certificates for developers and service accounts) with minimal configuration.

Scenario:

If you only want Developer A to have edit access and Developer B to have only viewing access to the Kubernetes cluster, you can easily do that by either running a few commands on your CLI or directly on the Teleport web user interface with just a click.

You may be thinking "I can set up RBAC without Teleport so what's the essence of using it", but the interesting thing is Teleport just doesnt stop at allowing you set RBAC through a user interface, it also makes the approval process of Kubernetes access less stressful. For instances, if Developer B can fix a particular bug but doesn't have access to edit resources on the Kubernetes cluster, all they need to do is click on the request access button on Teleport and it can be approved via Slack or other supported plugins.

And that's not even all. Teleport also supports short-lived access to Kubernetes clusters. This means that Developer B can only be given edit access to the Kubernetes cluster for a limited duration of time.

4. Teleport makes you more productive

A single login gives developers access to all Kubernetes clusters across all environments. This means you can leave behind configuration complexity, juggling shared credentials and hopping between VPNs and access points.

Hands-on! Let's see Teleport in action

Now that you know all the fantastic ways Teleport can help boost a development or DevOps team's workflow, productivity, and security, I'll show you how to set up Teleport on a Kubernetes cluster.

Let's dive in. 🧑🏿‍💻👨‍💻

Step 1: Navigate to your preferred Kubernetes Cluster & install Teleport

Most organizations usually have more than one Kubernetes cluster, so the assumption is that you have a certain Kubernetes cluster you want to try using Teleport on. So, navigate to the context of that Kubernetes cluster using your preferred tool. I'm using Kubie in my case.

Next, run this command helm repo add teleport https://charts.releases.teleport.dev to add the teleport-agent chart to your charts repository.

With the teleport-agent chart now available in the Kubernetes cluster, the next thing you'll be required to do is install a single node teleport-cluster, provision a cert using ACME and switch to the context of the teleport cluster by running the command below on your CLI:

helm install teleport-cluster teleport/teleport-cluster \
--create-namespace \
--namespace=teleport \
--set clusterName=${CLUSTER_NAME?} \
--set acme=true --set acmeEmail=${EMAIL} \

Don't forget to update the --clusterName with a unique hostname which will serve as the public endpoint to your Kubernetes cluster (we will eventually set this up for DNS later using the teleport-cluster external load balancer IP address) and set the --acmeEmail to use an email address that will be receiving correspondence from the Letsencrypt certificate authority.

For context, the single node teleport-cluster contains:

• The Teleport Auth Service which is in charge of issuing certificates & conducting authentication challenges.

• The Teleport Proxy service which handles user requests, forwards user credentials to the Auth Service & communicates with Teleport instances that enable access to specific resources in your infrastructure.

Step 2: Setup DNS for the hostname and IP address

The IP address of the teleport-cluster external load balancer will be used to set up DNS for the hostname you added when you were setting up --clusterName. Confused? Look at the commands in step 1 again. 😃

To confirm the teleport-cluster is running, run this command kubectl get pod and then run the kubectl get services command to view the pod's external IP address.

Copy the external IP address and go over to your DNS provider which is Cloudflare in my case and create a DNS record for the hostname and external IP.

This will take a couple of minutes or hours to propagate. But you can use dig to confirm if the DNS records are propagated:

And curl to confirm that Teleport is running:

Step 3: Create a local user

Even though Teleport allows adding a Single sign-on authentication scheme, it is advisable to create a local user (a Kubernetes role object that can be used to assign roles to your teammates) as it serves as a reliable fallback when an SSO provider is down.

Let's go ahead and create a local user by adding the YAML content below into a local-users.yaml file. For context, the YAML configuration file below contains data that will create a Kubernetes role object named member.

kind: role
version: v5
metadata:
  name: member
spec:
  allow:
    kubernetes_groups: ["system:masters"]
    kubernetes_labels:
      '*': '*'
    rules:
    - resources:
      - '*'
      verbs:
      - '*'

Before creating a role with the local-users.yaml file, run this command POD=$(kubectl get pod -l app=teleport-cluster -o jsonpath='{.items[0].metadata.name}') to get the exact name of teleport-cluster pod and map it to a variable named POD.

Now, let's create the role by running this command: kubectl exec -i ${POD?} -- tctl create -f < local-users.yaml and then add a user named "didi" to the role by running this command kubectl exec -ti ${POD?} -- tctl users add didi --roles=member. This will generate a link that we can send to the user we just added to give them access to Teleport.

Anyone who clicks on the link (https://teleport-demo.edidiongasikpo.com) will be directed to the Teleport Welcome page and will need to click on Get Started to trigger the account creation process, add the required information and click the "Create Account" button to access the team's Kubernetes cluster.

As you can see from the screenshot below, the user "didi" now has access to the Kubernetes cluster via Teleport's web interface in a safe and secured state.

Step 4: Use GitHub's SSO on Teleport

You've successfully set up one local user, but doing this for your whole team will be time-consuming. Thankfully, Teleport is all about helping your DevOps team move fast while staying secured, so there's an option to connect to various SSO providers. In this section, I'll show you how to use GitHub's SSO on Teleport.

Go to your team's GitHub organization page -> Settings -> Developer Settings -> New OAuth App -> Add the required information and click the Register application button.

Now, create a file named github.yaml and paste the contents below into it. Remember to update the client id, client secret, redirect URL, and GitHub organization name with that of your team.

kind: github
version: v3
metadata:
  # connector name that will be used with `tsh --auth=github login`
  name: github
spec:
  client_id:  <insert client id here>
  client_secret:  <insert client secret here>
  # This name will be shown on UI login screen
  display: GitHub
  redirect_url: <insert your domain name here>/v1/webapi/github/callback
  # Map github teams to teleport roles
  teams_to_logins:
    - organization: <insert GitHub organization name here> 
      team: admin            # GitHub team name within that organization
      logins: 
        - member

Then run this command kubectl exec -i ${POD?} -- tctl create -f < github.yaml to create the GitHub authentication connector.

Go back to your Kubernetes cluster's domain name, in my case teleport-demo.edidiongasikpo.com and you'll notice that the GitHub SSO has been added as a sign-in option.

Clicking on the GitHub button will direct you to GitHub's Authorization page, where you'll click on the Authorize button to gain access to Teleport. With the GitHub SSO setup now completed, any developer who is part of the team you specified in the github.yaml file will now be able to log into Teleport and access the Kubernetes cluster - this increases the level of security and controls who can access your team's Kubernetes cluster.

Step 5: Connect to the Kubernetes cluster

Now, let's assume user "Didicodes" wanted to access the Kubernetes cluster you've just added to Teleport. She'll typically go to the hostname you gave to the cluster which is teleport-demo.edidiongasikpo.com in our case and sign in using GitHub or as a local user. On the web interface, she'll click on the connect button, which will display a list of commands she needs to run to connect to the Kubernetes cluster.

She'll have to run these commands on her CLI because Teleport doesn't have a kubectl user interface at the time of this writing. This is good as Didicodes can maintain the existing workflow of running kubectl commands on her CLI. To run these commands, Didicodes needs to download a tool called tsh - it allows end-users to interact with Teleport and will download a short-lived kubeconfig for your users.

With tsh now installed on Didicodes computer, she'll run this command to log into Teleport: tsh login --proxy=teleport-demo.edidiongasikpo.com:443 --auth=github.

Didicodes will then run tsh kube ls to list the clusters she is connected to via Teleport and then run tsh kube login teleport-demo.edidiongasikpo.com to connect to the specified cluster. If this works as expected, Didicodes will now be able to access the resources inside the Kubernetes cluster (of course, only the resources she's been given access to by the admin of the K8s cluster).

From the image above, you can see that user "Didicodes" has logged into the Kubernetes cluster and can perform her day-to-day activities in the Kubernetes cluster.

Step 6: View the activities performed on the Kubernetes cluster

Remember I mentioned that Teleport can show you all activities performed by developers on the Kubernetes cluster for debugging purposes. Let's see that in action👇

Let's assume user Didicodes wanted to perform some interactive kubectl exec commands on the Kubernetes cluster, she uses the kubectl apply -f https://k8s.io/examples/application/shell-demo.yaml command to add the shell demo pod into the cluster. Then runs this command kubectl exec --stdin --tty shell-demo -- /bin/bash to get a shell to the running container. In the shell, she decides to experiment by running other commands without realizing that one of them will impact the Kubernetes cluster negatively.

Didicodes goes out for lunch and a few moments later you get notified that something isn't working as it should on the Kubernetes cluster. You go to your Teleport Dashboard -> Activity -> Audit Log and realize the last person who accessed & performed an activity on the Kubernetes cluster was Didicodes.

You want to know exactly what Didicodes did but she has gone out for lunch. Since your Kubernetes cluster is connected to Teleport, you click on Activity -> Session Recordings -> Play to see the activities performed by Didicodes.

This gives you a clearer picture of what may have gone wrong, you fixed it and made the Kubernetes cluster operational again. Pretty cool, right? I know!

Summary

In my opinion, Teleport is one of the best DevOps tools because it seamlessly grants infrastructure access without compromising engineering productivity or security.

This article only focused on Teleport can be used to give developers secure access to Kubernetes clusters. If you want to learn more about their other offerings, I recommend checking out their official website.

Thank you for reading this article. I'm looking forward to hearing what you think about Teleport in the comment section. See ya. 💛

Bulma follows a strict CSS-only approach making it possible for you to have total control over your components’ functionality and the freedom to write the JavaScript code of your application the way you deem fit instead of being restricted to the framework's opinion of writing JavaScript.

In this tutorial, you will learn about Bulma CSS and how to use it to style your ReactJS applications.

Prerequisites

This tutorial assumes that you have the following:

• Node 8.10 or higher installed on your local development machine
• npx 5.2 or higher installed on your local development machine
• A basic knowledge of HTML, CSS, JavaScript, and React.

What is Bulma CSS?

Unlike most CSS frameworks, Bulma isn’t an all-or-nothing framework; it enables you to import and use specific components, such as a breadcrumb or form, without importing the entire framework. It also offers a plethora of already customized components, elements, columns, layouts, and forms for designing websites, letting users get up and running quickly.

Known for having the simplest grid system, Bulma is so smooth that columns automatically resize themselves depending on the screen size of the device being used.

Bulma has browser support on Chrome, Edge, Firefox, Opera, Safari, and Internet Explorer (10+), providing you with CSS classes to help you style your website.

Using Bulma CSS in React

Now that you've learned more about Bulma CSS, let’s see how we can use different Bulma CSS elements and components with React.

Installing Bulma in React

First, let's spin up a React application by using Create React App and running the following command:

npx create-react-app bulma-tutorial

Once the React app is installed on your local machine successfully, switch to its directory using the cd bulma-tutorial command, and install the Bulma package into your React project using the npm install bulma command.

After installing Bulma, run npm start to access the app on your browser window via localhost:3000.

Now, navigate to the src folder, click App.js, and paste the code snippet below:

import 'bulma/css/bulma.min.css';

const App = () => {
      return (
        <div classname="main"> 
          <div className="buttons">
            <button class="button is-primary">Primary</button>
            <button class="button is-link">Link</button>
            <button class="button is-info">Info</button>
            <button class="button is-success">Success</button>
            <button class="button is-warning">Warning</button>
            <button class="button is-danger">Danger</button>
            <button class="button is-black">Black</button>
            <button class="button is-white">White</button>
            <button class="button is-dark">Dark</button>
            <button class="button is-light">Light</button>
          </div>
        </div>
      )
  }

export default App;

By importing Bulma CSS into our project, we can now access Bulma’s components, elements, variables, and more, and utilize Bulma within our project.

Stylizing with Bulma in React

Here is the created component App with the added parent div. By then exporting the component, we can target it in other sections of the application.

const App = () => {
      return (
        <div classname="main">
          ...
        </div>
      )
  }

export default App;

Here, we added a div containing 10 buttons and styled it with Bulma CSS.

<div className="buttons">
  <button class="button is-primary">Primary</button>
  <button class="button is-link">Link</button>
  <button class="button is-info">Info</button>
  <button class="button is-success">Success</button>
  <button class="button is-warning">Warning</button>
  <button class="button is-danger">Danger</button>
  <button class="button is-black">Black</button>
  <button class="button is-white">White</button>
  <button class="button is-dark">Dark</button>
  <button class="button is-light">Light</button>
</div>

Most Bulma elements have alternative styles that require using either is- or has- to access them. For example, in the code snippet above, you’ll notice that each button contains two values: the element’s name, button, that signals to Bulma that this element is a button; and the modifier, is-dark, that accesses the style class property.

So, if you want to color an element of your app turquoise, for example, you’d use the is-primary modifier syntax.

The default color shades that can be used in Bulma are below, with their respective modifiers:

• is-primary is turquoise
• is-link is blue
• is-info is cyan
• is-success is green
• is-warning is yellow
• is-danger is red
• is-white is white
• is-black is black
• is-dark is dark
• is-white is white

With the buttons complete, save the code and return to the browser window to view what the updated page looks like. If everything is done correctly, it should look like the screen below:

Altering sizes of elements and components

With the understanding of how to apply colors to elements and components within React, we can continue to manipulate buttons by using Bulma’s modifier classes, is-small, is-medium, and is-large, to resize any element or component.

As each modifier name implies, elements will become smaller by adding is-small, medium by adding is-medium, and large by adding is-large to the element’s property.

Let’s add these properties to the code in our App.js file and see how it plays out:

import 'bulma/css/bulma.min.css';

const App = () => {
      return (
        <div classname="main"> 
          <div className="buttons">
            <button class="button is-success is-small">Small</button>
            <button class="button is-warning is-medium">Medium</button>
            <button class="button is-danger is-large">Large</button>
          </div>
      </div>
      )
  }

export default App;

By adding is-small, is-medium, and is-large to the codebase, your React app should now look like the following:

Controlling the state of elements and components

The ability to control the state of an element or component in an application is very important. To do this in a React app, use any of the three Bulma CSS properties below:

• is-outlined
• is-loading
• disabled

In the code snippet below, the first button’s state is outlined by adding is-outlined, the second button shows a loading wheel by adding is-loading, and the third button becomes disabled by adding is-disabled.

import 'bulma/css/bulma.min.css';

const App = () => {
      return (
        <div classname="main"> 
          <div className="buttons">
            <button class="button is-success is-outlined">Outlined</button>
            <button class="button is-warning is-loading">Loading</button>
            <button class="button is-danger" disabled>Disabled</button>
          </div>
      </div>
      )
  }

export default App;

You can see the output of this code below:

Utilizing Bulma’s customized code snippets

As mentioned earlier, Bulma offers a collection of already customized components that you can use to quickly customize your React apps instead of styling them from scratch.

For example, if we wanted to spin up a navigation bar, Bulma provides boilerplate code, and we can copy a snippet from their website, paste it into the App.js file, and add a closing tag to the img and hr elements.

import 'bulma/css/bulma.min.css';
const App = () => {
      return (
        <div>
            <nav class="navbar" role="navigation" aria-label="main navigation">
              <div class="navbar-brand">
                <a class="navbar-item" href="https://bulma.io">
                  <img src="https://bulma.io/images/bulma-logo.png" width="112" height="28"/>
                </a>

                <a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample">
                  <span aria-hidden="true"></span>
                  <span aria-hidden="true"></span>
                  <span aria-hidden="true"></span>
                </a>
              </div>

              <div id="navbarBasicExample" class="navbar-menu">
                <div class="navbar-start">
                  <a class="navbar-item">
                    Home
                  </a>

                  <a class="navbar-item">
                    Documentation
                  </a>

                  <div class="navbar-item has-dropdown is-hoverable">
                    <a class="navbar-link">
                      More
                    </a>

                    <div class="navbar-dropdown">
                      <a class="navbar-item">
                        About
                      </a>
                      <a class="navbar-item">
                        Jobs
                      </a>
                      <a class="navbar-item">
                        Contact
                      </a>
                      <hr class="navbar-divider"/>
                      <a class="navbar-item">
                        Report an issue
                      </a>
                    </div>
                  </div>
                </div>

                <div class="navbar-end">
                  <div class="navbar-item">
                    <div class="buttons">
                      <a class="button is-primary">
                        <strong>Sign up</strong>
                      </a>
                      <a class="button is-light">
                        Log in
                      </a>
                    </div>
                  </div>
                </div>
              </div>
            </nav>
          </div>

      )
  }

export default App;

Now we have a navigation bar on my website with a simple copy and paste and can customize it further using the concepts used in this tutorial.

Conclusion

Although this tutorial covers some of the fundamentals of using Bulma with React, they provide a base to expand upon when styling. You can learn more about how Bulma works, access code snippets, and experiment by visiting their official documentation. Feel free to explore these Bulma tutorials that I created on CodePen as well.

If you have any questions, you can leave them in the comments section below.

But as I delved more into it, I realized my assumption was wrong. Cloud native isn't just about Kubernetes; it is so much more!

In this article, I will help you understand Cloud native; the cloud computing delivery model, its benefits, architectural principles, and more!

What is Cloud native?

Cloud native is an approach to building and running apps that exploit the advantages of the cloud computing delivery model.

The "cloud" is really just the internet, as cliche as it may sound. It is a network of servers where information, software, applications, and services are housed and accessed. So what then is the cloud computing delivery model?

Understanding the Cloud computing delivery model

The definition of cloud native above is excellent, but you may be curious to know the meaning of the last four words in the definition - "cloud computing delivery model". At least, I was when I saw it on almost every Cloud native definition on the internet.

First of all, it is helpful to know what cloud computing means to get a better understanding of the cloud computing delivery model.

According to Techopedia, Computing is the process of using computer resources (storage, networking, and computing power) to complete a given goal-oriented task.

Cloud computing offers on-demand availability of these computer resources (mentioned above) without direct active management by the user.

The Cloud computing delivery model represents a specific, pre-packaged combination of IT resources offered by a cloud provider. There are a couple of cloud delivery models, but IaaS, PaaS, and SaaS are the most popular and widely used cloud delivery models.

• Infrastructure as a Service (IaaS) - This cloud computing delivery model focuses on providing infrastructure like servers, networking technology, storage, and data center space as a service to users. This gives users the autonomy to decide what infrastructure is provisioned based on the different needs of their application. Popular examples of IaaS providers are Microsoft Azure and AWS.

• Platform as a Service (PaaS) - This is more focused on the development side of things by providing a platform for developers to deploy their apps to the cloud; notable examples of PaaS providers are Netlify & Heroku. PaaS builds on top of IaaS, but unlike IaaS, it already handles the setup and configuration of the infrastructure your application needs. In cases where users want more control of their infrastructure configurations, IaaS is a preferred model to use.

• Software as a Service (SaaS) - This is the complete software product provided as a service to users in order to enable them to perform different activities. For example, Gmail is a great SaaS cloud native application used by millions of people worldwide. As a user of Gmail, you will most likely not be concerned about how it was built or the underlying infrastructure but you know for sure that you can use this software to send and receive emails.

Want to get more insight into these cloud computing delivery models? Read this article.

Cloud native terminologies - Is there a difference?

While learning about "Cloud Native", I struggled with understanding the difference between cloud native, cloud native apps, cloud native technologies, and cloud native computing. I felt like they were all using the prefix cloud native but meant the same thing.

In fact, if you search for "What is Cloud native" on Google, you will see over ten resources on the search result page. And out of these ten resources, 4 of them define or talk about Cloud native. The other 4 are either Cloud native application, Cloud native technologies, or Cloud native computing.

And to my surprise, these resources all had interchangeable definitions of what Cloud native meant, which got me confused. Was there a difference? Did these terminologies all mean the same thing? I asked myself.

I asked a couple of people about it and eventually understood the differences. So, here are my findings. 👇🏽

• Cloud native is an approach to building and running apps that exploit the advantages of the cloud computing delivery model.

• Cloud native applications are independent services, packaged as self-contained, lightweight containers that are portable and can be scaled rapidly based on the demand. They allow you to take advantage of the unique capabilities of the cloud.

• Cloud native technologies are the technologies used to build and scale cloud native applications. Example; Kubernetes, Helm, Docker, etc.

• Cloud native computing and cloud native mean the same thing. You can read the "Cloud native" definition above to understand better.

The architectural principles of Cloud native

Cloud native follows four architectural principles to enable businesses to ship products faster, implement their customer's needs quickly, create value faster, and aid collaboration between developers and IT specialists.

Here's an explanation of the four architectural principles. 👇🏽

1. Microservices: In microservices, the code is broken down into independent modules, where each feature is a standalone service, and resources are assigned to the services only when needed. Cloud native apps are built following this architecture.

2. Containers: Cloud native apps are packaged in containers. Containers provide isolation context for microservices making them highly accessible and easier to build, update and scale.

3. CI/CD: Cloud native applications run on a continuous delivery model that fosters collaboration between developers and the Operations team to enable them to build, deploy, & release software faster without affecting end-users or developers in other teams.

4. DevOps: Cloud native adopts DevOps as a practice to make Continuous delivery and continuous integration (CI/CD) possible.

Benefits of building Cloud native apps

• Independence: Because Cloud native apps use the Microservices architecture, it makes it possible to build cloud native apps independently of each other. This gives businesses the opportunity to build, manage and deploy the different components of an application independently without affecting other components.

• Automation: Cloud native apps run on a continuous delivery model making it possible to ship software updates immediately.

• No downtime: Thanks to container orchestrators such as Kubernetes, you can deploy a software update with essentially zero downtime, because if an instance of the application goes down, Kubernetes will automatically spin up another one for you immediately.

• Scalability: Cloud native apps enable flexible deployment options across the network making it easier to develop, deploy, and iterate on the application.

• Standards-based: Most cloud native services follow a set of standards championed by the CNCF Open Source organization. These standards have been vetted and approved by the community and are used by some of the biggest tech companies across the world. This helps reduce vendor lock-in and ensure that apps are built in the right way.

Summary

I hope you enjoyed reading this article. If you want to learn more about Cloud native, here are some useful resources for further reading:

• Cloud Native 101, VMware.

• How to start your Cloud native Kubernetes journey, Ambassador Labs.

• Understanding cloud-native apps, Red Hat.

• Cloud-Based, Cloud-Native, and Cloud-Enabled apps---What's the Difference?, PaperTrail.

• What is Cloud Native?, Oracle.

• What are Cloud Native applications?, VMware.

If you have any questions, share them in the comment section below, and I'll reply to every comment. 💛

If you think I am referring to the traditional SMS and Email 2FA methods from what you read above, you are wrong. I am actually referring to a more fascinating technology known as typing biometrics. Believe it or not, your typing behavior is unique enough to act as a substitute for traditional second factors.

TypingDNA, a company that provides a free authentication API & managed verification solutions for developers, is a leader in this space - and it’s simple to get started. As the curious developer that I am, I gave TypingDNA Verify a try, and I was impressed at the way it was able to verify me through the way I typed.

In this article, I will tell you everything you need to know about the fascinating TypingDNA Verify and how to use it.

So, what exactly is TypingDNA Verify?

TypingDNA Verify relies on a state-of-the-art authentication engine using AI-based algorithms to verify typing patterns and select the best key phrases that enable higher matching accuracy on short texts.

This means that your end-users will have to prove their identity by typing generated texts, only deferring to Root of Trust channels (SMS & Email) when strictly necessary.

While SMS OTP’s revolutionized the security best practices decades ago, the method has reached its limits, especially in the fast-paced world that we now live in and tech industries that value good user experience.

The interesting thing about TypingDNA Verify is that your users can be authenticated without having to search for their phone to see the SMS OTP or use a physical token. Why? That's because users can't forget their fingers or typing behavior behind. 😉

With TypingDNA Verify, you can:

• Recognize trusted users through the way they type.
• Minimize the user's effort and friction while producing a visible sense of protection.
• Catch fraudsters instantly because a true/false match response will be returned instantly and so much more!

Most importantly, the chances of a security break are very slim because your typing pattern is unique to only you!

At the time of this writing, TypingDNA Verify can only be integrated into a website. However, TypingDNA's Authentication API can be integrated into both a website and mobile application.

Using TypingDNA Verify on your website

Now that you understand what TypingDNA Verify offers, follow the steps below to integrate it on a website.

Step 1: Create an account

Go to TypingDNA Verify and click on the Sign up to integrate Verify button.

Sign up with Google or add your name, email, and password, then click on Continue to proceed.

On the Client's page, you will be given an option to choose between Verify or the Authentication API. For the purpose of this tutorial, click on Verify to access your dashboard.

On your dashboard, you will see your Client ID and Secret, a demo of Verify, an option to set up your first integration and configure your account using any of the recommended connection providers.

Step 2: Configure your account

Below are the steps required within the dashboard to configure a Verify account before beginning the integration process:

In order to begin the integration process, you need to configure your account by connecting it to either your Twillo and SendGrid account.

Connecting to Twillo or SendGrid is important because they will be used on your behalf to send a verification code or SMS to your users. Without connecting to any of the aforementioned providers, an error message will be returned.

As the image above implies, click on Connect Twillo if you want your users to receive an SMS verification, then click on Connect SendGrid if you want your users to receive an email verification.

Configuring Twillo and/or Sendgrid serves has a fall-back option for your users. The default 2FA TypingDNA Verify provides is the typing biometrics. 😃

Step 3: Integrate TypingDNA Verify into a website

To kickstart the integration process, click on the Add your first integration button on your dashboard.

Add the name for your application and the domain URL associated with it, then click on the Create Integration button.

This information will be used to ensure proper and secure communication between the TypingDNA Verify window and your website.

Step 4: Integrate TypingDNA Verify into your codebase

After configuring your account and adding the domain URL of your website to your dashboard, the next thing you need to do is integrate TypingDNA Verify into the frontend and backend of that website.

Let's get our hands dirty with code! 👇🏽

a) Install the TypingDNA Verify client

The first thing you need to do is install the TypingDNA Verify client using the command below:

npm install typingdna-verify-client

b) Initialize the client

After typingdna-verify-client has been installed successfully, go to your backend code and initialize the client using the code below.

const typingDNAVerifyClient = new TypingDNAVerifyClient({ 
    clientId: "",
    applicationId: "",
    secret: ""
});

Replace the empty strings with the value of your clientId, applicationId, and secret available on your dashboard.

c) Add the script to your HTML

Now, add the TypingDNA Verify CDN below to your frontend code.

<script src = "https://cdn.typingdna.com/verify/typingdna-verify.js"></script>

This script renders the button which opens the TypingDNA Verify window.

d) Retrieve the users data

We need to call the getDataAttributes JavaScript method to pass the credentials and encrypted user data to the button element we are going to add in our frontend code in the next step.

So, go back to your backend code and paste the code below.

const typingDNADataAttributes = typingDNAVerifyClient.getDataAttributes({ 
    email,
    phoneNumber,
    language :  'en',
    mode : 'standard' // 'show_otp' alternatively
});

The language and mode are optional parameters, defaulting to ‘EN’ and ‘standard’ respectively.

e) Add a button element to your HTML

Finally, add a button element with a ‘typingdna-verify’ class and the data attributes that correspond to values of the TypingDNADataAttributes object explained above. This will be passed to the TypingDNA Verify window once the button is clicked by an end-user.

<button
      class = "typingdna-verify"
      data-typingdna-client-id= typingDNADataAttributes.clientId
      data-typingdna-application-id= typingDNADataAttributes.applicationId
      data-typingdna-payload= typingDNADataAttributes.payload
      data-typingdna-callback-fn= "callbackFn"> Verify with TypingDNA
</button>

If you followed the steps above correctly, your users should now be able to authenticate themselves using TypingDNA Verify.

Demo 👨‍💻 👩‍💻

You can play around with the demo here to get a better understanding of how TypingDNA Verify works and let me know what you think in the comment section.

Conclusion

I believe TypingDNA Verify has a lot of potentials and could be the next big thing in the Two-factor authentication space. So, I'd recommend you give it a try now it is still free for a year.

Want to learn more about how TypingDNA Verify works? You can access code snippets, demos, and more by visiting their official documentation.

I hope you enjoyed reading this article. If you have any questions, share them in the comment section below, and I'll reply to every comment. 💛

In this article, I will share 5 different ways developers can make money through blogging.

Web Monetization

Web monetization is the process of making revenue from the traffic coming to your blog. So the higher the traffic on your blog, the higher the money you make.

Web monetization is very easy to set up (all you need is a tag), simple to use, and most importantly, ensures the traffic equals payment (your quality content is rewarded). I believe Web monetization is a great option for people who don't like adding ads to their blogs. If you are one of those people, Web monetization is exactly what you need.

In my case, adding web monetization to my blog was super easy because the platform I use Hashnode supports it. If you want to add web monetization to your blog, read this insightful guide by my friend, Akintunde Sultan.

Hashnode Sponsors

Hashnode Sponsors is a new way to monetize 💸 your developer blogs.

It is an inbuilt 1:1 micropayment service that lets readers sponsor their favorite bloggers. When someone sponsors your work via Hashnode Sponsors, you will receive the money instantly to your bank account. Amazing right?

Another interesting thing about Hashnode Sponsors is that Hashnode doesn't take any commission from the money your readers send to you. It's basically all yours to take.

At the time of this writing, Hashnode Sponsors is only accessible to those who own Hashnode powered blogs. So, if you want in on this, go ahead and create a blog on Hashnode now.

Advertising

Adding ads to your blog is one of the most popular ways to make money via a blog. Having said that, it is important to note that some developers dislike blogs that have ads, especially when the ads do not have anything to do with tech. But here are some solutions 👇

1. Advertising using Adsense or Carbon: If you want to add ads to your blog, consider using Adsense or Carbon because they only show tech-related content. This ensures that your readers see ads that might be useful to them and will not be forced to leave your blog.

2. Including affiliate links in your articles: Another interesting way to advertise on your blog is by adding affiliate links to the articles. Here, a person or company will reach out to you and inform you about a product or tool they want your audience (readers) to know about. You'll agree on a price, add a link to the product in your article, and then get paid based on the number of people that click on that link when they read your article. With this type of advertising, you get the benefit of crafting the content in a very natural way that won't come off as advertising/marketing to your readers.

Writing Paid Articles

You can make money by writing paid articles on a company's blog or your own blog. Here's a detailed explanation on both ways: 👇

1. Paid Community writing programs: Did you know that tons of tech companies and communities pay developers between $100 to $2000 to write technical articles for their blogs? Well, now you do! It is important to note that these companies will only accept you as a writer if you show them that you have prior experience as a tech blogger, so if you've not started blogging yet, create a blog with Hashnode and get started immediately. If you already have experience as a tech blogger, here's a list of some paid community writing programs for developers.

2. Sponsored Articles: Aside from paid community writing programs, you can also be sponsored by a company to write an article about them on your own blog. Oh yes! That is possible. For instance, if you've always been writing content about React, a company that builds products for React developers can pay for you to write an article about their services on your blog. If you want to explore this method of making money, this guide by my friend Catalin Pit will teach you how to go from 0 to paid articles.

Community funding

People can love your content so much that they decide to support you financially for creating those insightful content with platforms like Patreon or Buy Me a Coffee. Here's what you need to do. 👇

1. Write insightful articles: This is crucial because people need to find your articles useful enough to support you. 😉
2. Write consistently: It won't be ideal to write just one article and decide to ask for community funding. When you write consistently, you earn support and trust from the community.
3. Create a Patreon or Buy Me a Coffee account: These platforms provide a fast and beautiful way to accept financial support from your audience.
4. Integrate Patreon or Buy Me a Coffee to your blog: When you add either or both of these platforms to your blog, people can easily identify that you would love to be supported for your content creation and support you.

Conclusion

I am glad you are now aware of the different ways to make money from the content you create. Yes, you might be blogging for passion, but you can also make money simultaneously.

If you've not started blogging already, you don't need to create a blog from scratch to start. Create one with Hashnode in under 2 minutes, start blogging and make some money! 🤑

This article is part of the #ChooseToChallenge campaign by Hashnode.

I have and will always believe that women are legends. But most people in the world do not appreciate or acknowledge the hard work women put in every day to scale across different areas of lives, so it almost feels like women are underrated legends. By underrated legends, I mean women in tech are not rated or highly valued enough like their male counterparts

Don’t believe me? Here’s a brief example. 👇🏾

Sometime in 2019, I collaborated with another team at the company I used to work with to write a technical article on one of our products. I wanted to add a design to the article, so I reached out to the design team. The design team shared the design with the team lead I was working with, and I noticed he didn’t like the design. An ideal approach would have been for him to give his feedback and proposed changes, but he said, and I quote, “ I know it’s a female designer that created this.” That statement showed that he didn’t value the skills of women in the design space and believed they were not good enough. Astonished by his perception, I had to speak up and challenge his perception of the issue until he realized he was wrong.

As I did, we can all choose to challenge and call out gender bias and inequality in the tech ecosystem and the world because biased mindsets will change when we do.

As we celebrate International Women’s Day this year, I stand with everybody lending a voice and #ChooseToChallenge:

• Every system, perception, & ideology portraying women as undervalued and underrated.
• People who don’t speak up when they see their colleague or random person say something condescending to women.
• People who do not acknowledge the essential value women bring to the world.
• People who do not celebrate women's achievements.

Collectively, we can all help create an inclusive world. Let’s work together!

I was curious to know exactly why developers use Hashnode; was it the in-built dev community, total independence of their content, custom domain mapping, customization, or all of them?

To find out, I reached out to 15 developers across the world and asked them a couple of questions that evolved around why they use Hashnode

Read through to find out what they said. 👇🏽

Victoria Lo, lo-victoria.com

Hashnode has taught me about the power of personal branding and the importance of giving back to the community through sharing knowledge.

When I created my blog on Hashnode, I used the default hashnode domain (victoria.hashnode.dev) because I didn't know the importance of mapping your blog to your domain. Thankfully, Sandeep (the co-founder of Hashnode) reached out to me, offering me my current domain (lo-victoria.com). And suddenly, my viewers and online following grew beyond what I could have imagined.

Thanks to developing my personal branding via my Hashnode blog, I got my current job as a Software Engineer at PayPal. So why use Hashnode? My answer is: why not?

Catalin Pit, catalins.tech

I read your blog a few times, and I liked the design and feel of it. I became curious if it's custom-made or you are using a platform. Then I found out that you're using Hashnode, and the rest is history. I jumped on Hashnode too!

In my case, it satisfies all my needs. Using Hashnode is like I asked for a custom-made blog. I like it in all aspects, and what I like more is that you can request features. Surprisingly, they get implemented super fast if they are reasonable and requested by more people.

Hashnode has all I need and more. I wrote a detailed article about why Hashnode is different from other blogging platforms here.

Ayu Adiati, adiati.com

I discovered Hashnode via a tweet by Catalin Pit. My first impression was it is "different' and offers more features than other blogging platforms. So I gave it a try.

My experience with Hashnode has been excellent; The #2Articles1Week challenge motivated me to write consistently, I can customize the look of my blog, the community on discord is incredible, and the Hashnode team responds fast to complaints.

I use Hashnode because I can map my blog to my domain without worrying about security (SSH) and other things. All I need to do is write, and Hashnode takes care of the rest.

Nick Bull, blog.nickbulljs.com

I was looking for a platform that would let me connect with a strong developer community and map my blog to a custom domain. I explored different options like Medium, Ghost, and DEV, but they gave me one of the things I required but not all. Then I heard about a blogging platform called Hashnode on Twitter and decided to check it out.

I glanced through the features, and these were my thoughts. 👇🏻

• Easy managing content? Check ✅
• Can I host it on my domain? Check ✅
• Can you import previous articles from Medium? Check ✅
• Comment section? Check ✅
• Design customization? Check ✅

I was very impressed and decided to use Hashnode as my blogging platform. Hashnode satisfies all my needs. I love it!

Tapas Adhikary, blog.greenroots.info

I use Hashnode for the following reasons:

• The Power of Ownership: I own my domain, and my blog can be accessed using it. The fact that creators have total control of every content they publish on their blogs makes Hashnode unique and different from platforms like DEV, Medium, etc. Hashnode gives my readers and me full freedom.

• The Community: On Hashnode, people encourage each other to write and improve their articles' quality. Hashnode hosts technical writing bootcamps, an active Discord channel, people in the community can help you review your drafts, brainstorm ideas on what to write next, and so much more. Hashnode also shares our articles on multiple social media channels, which gives us a better reach to our readers.

• Outstanding features: When I started a couple of years back, Hashnode had a limited set of features. But look at it now! It has mostly everything to make us a productive author. A simple yet powerful article editor, analytics, draft sharing, customization, static pages, Free SEO, third party integrations, GitHub integration for saving my post and even publishing it, writing challenges to keep the community motivated so much more.

Ayushi Rawat, ayushirawat.com

Hashnode conducts technical writing bootcamps and exciting writing challenges, which motivate me to write more. I won one of Hashnode's writing challenges and received a fantastic swag kit from Hashnode.

Ayushi's Swag Kit from Hashnode

I use Hashnode because I believe it is an excellent platform with a nice user interface. It's been a few months since I joined Hashnode, and the Community seems to be growing rapidly.

Braydon Coyer, blog.braydoncoyer.dev

When I decided to start blogging, I knew I had a hard decision to make -- which platform do I choose? When I found Hashnode in Q3 of 2020, I immediately knew it was where I needed to be. Other platforms can't compare to the features and flexibility that Hashnode provides.

Hashnode has given me the outlet to share my knowledge, findings, and struggles with an ever-growing engaging community. I didn't know I enjoyed writing as much as I do -- this new creative outlet is all thanks to Hashnode!

Getting started with Hashnode is as simple as clicking a few buttons! It is, by far, the easiest way to start blogging in 2021, and I can't recommend it highly enough.

Francesco Ciulla, francescociulla.com

My very first article on Hashnode was the first in the world to get the badge for "Featured on Hashnode." 😁 That made me so excited and more motivated to write and use the platform.

I love the fact that I can my articles to my domain, add static pages to my blog, preview my drafts and insert images and code easily.

I strongly recommend Hashnode for every developer but especially for developers who don't have time to create their blog and focus on creating content! Just create an account and start writing!

Omotola Shogunle, blog.oshogunle.com

I use Hashnode because it has a sense of community, the feedback on my post is almost immediate (good/bad), I see the analytics -- my blog performance is finally measurable. I have also read people's stories and formed connections with technical writers like myself, which's excellent. Also, the User Interface is beautiful and easy to use. It makes the job of writing content easier for me.

I would recommend Hashnode to developers interested in technical blogging in a heartbeat because it is honestly the most straightforward way to set up a blog. And trust me, I have tried a few.

Idris Olubisi, blog.idrisolubisi.com

When I first heard about hashnode, I thought it was just like every other blogging platform, but I was amazed when I found out that Hashnode gives much more than just a blogging experience.

I use Hashnode because of its uniqueness, analytics, custom domain functionality, markdown experience, audience, custom page layout, daily.dev integration, friendly community, etc. I also get to network with amazing people, and I get several messages thanking me for writing great content.

I'm pretty sure that when any developer starts using Hashnode, there won't be any reason to stop.

Maxi Contieri, maximilianocontieri.com

I use Hashnode because it is straightforward to use, customizable, and has a strong and growing community. I like it so much that I decided to map my domain to my Hashnode blog.

I have been writing 3 or 4 articles per week on my blog since October, and the feedback I've received from the developer community on Hashnode has been tremendous.

Ruth Ikegah, cakebaby.dev

I use Hashnode because it is not just a blogging platform but has a community of excellent developers where I can get an audience, feedback, and appreciation for my content. Additionally, Hashnode is the full package with so many unique features and ease with writing and analyzing contents.

My experience with blogging on Hashnode has been better and keeps getting better. Over time, exciting features are shipped in, and it's not just about what's changed but how it precisely suits the needs of the users of Hashnode.

Pratham Prasoon, prathamprasoon.codes

When I created a blog on Hashnode, I was very impressed. I use Hashnode because of the fantastic community, phenomenal interface, and ease of use.

Hashnode makes blogging very simple for me, and I would recommend Hashnode to other developers.

Adewale Abati, devlogic.acekyd.com

I heard about Hashnode on Twitter, and upon checking it out, it seemed like a lovely community where you can share opinions and content with other developers.

The experience with Hashnode has been smooth. I quickly set up my custom domain - for free and start writing my own articles. The analytics on posts are also great.

I use Hashnode because it provides a blog platform that I don't have to manage myself, and it has a community of developers, which ensures writers get more readership on their articles.

Ana Vela, blog.anavela.dev

I heard about Hashnode through Twitter when they announced their first technical writing bootcamp. Providing valuable resources for blogging like this made me want to check out the Hashnode platform. I found it easy to set up and start blogging right away.

Hashnode continues to impress me with new features and hackathons to keep developers motivated to write and work on new projects. I'm always learning something new as I browse through articles regularly.

I find Hashnode to be a friendly place to write and learn from other developers. I recommend Hashnode to developers of all levels who want to start blogging.

Conclusion

Every single person I interviewed said Hashnode is absolutely worth recommending to other developers. In fact, one of them (Ayushi) has brought over 100+ developers on Hashnode already.

Hashnode is one of the fastest-growing developer blogging platforms. We want you to focus on creating and publishing articles on your blog while we take care of the rest.

I hope reading this article made you see the value Hashnode brings to the lives of developers. Not on Hashnode yet? Learn more & start your personal blog for free.

Over the years, there has been a significant improvement in scroll driven animation libraries that power scrollytelling in JavaScript. From the launch of SuperScrollorama by John Polacek in 2013 to ScrollMagic by Jan Paepke in 2014, and the recent announcement of ScrollTrigger by GSAP in 2020.

ScrollTrigger is the reinvention of scroll-driven animation but in a more suitable and user-friendly way, giving you the ability to control the flow of GSAP animations or any other thing while scrolling. In this tutorial, you will learn about the GSAP ScrollTrigger plugin, how to use it to trigger animations on the scroll in React, and the use cases for it.

Prerequisites

This tutorial assumes the reader has the following:

1. Node >= 8.10 installed on their local development machine
2. npx 5.2 or higher installed on their local development machine
3. Basic understanding of how to animate elements with GSAP
4. A basic knowledge of HTML, CSS, JavaScript, and React

Introducing the GSAP ScrollTrigger plugin

GSAP is an acronym for the GreenSock Animation Platform. It is arguably the best animation library for the web because it can animate DOM elements, canvas, SVG, CSS, WebGL, generic JavaScript objects, and so much more.

The creators of GSAP strongly believe it is the fastest full-featured scripted animation tool on the planet.

ScrollTrigger is built on the GSAP and can be used to trigger those intriguing GSAP animations on the scroll with just a few lines of code, excellent performance, cross-browser compatibility, and support from the GSAP community.

Use case for ScrollTrigger

In this section we’ll look at the importance of ScrollTrigger, and when you should use it.

There are three circles in the demo below. The third circle has been animated with GSAP to move along the x-axis of the page for two seconds. The third circle might not be visible to you at first glance, so you need to scroll down.

On scrolling down, you'll notice that the third circle had already moved towards the x-axis before you reached that section of the page. Yeah, I know. That's not cool.

The good news is, ScrollTrigger solves this problem with its ability to let you trigger the animations when a user reaches a specified viewport while scrolling.

The possibilities of the GSAP ScrollTrigger plugin

Here are some of the things you can do with ScrollTrigger:

• Animate anything (DOM, CSS, SVG, WebGL, and Canvas) on the scroll
• Toggle playback state or scrub through animations
• Automatic resizing on different screens
• Support for vertical and horizontal scrolling
• Ability to pin elements in place

Find out more about these possibilities on ScrollTrigger's website.

ScrollTrigger basics

Before we trigger our animations on the scroll using ScrollTrigger, let's get familiar with the basics.

This tutorial assumes that the reader has a fair understanding of how to animate using GSAP, so we will only cover the basics of ScrollTrigger. Find a fantastic resource to get you up to speed with GSAP here.

The ScrollTrigger basics you will learn in this section will be used in building our project later in this tutorial. You can check out the full list of ScrollTrigger properties and methods in their documentation.

If you already know the fundamentals of ScrollTrigger, you can skip this section and jump straight to the project section, where we'll build a simple landing page in React and trigger the animations on the scroll with ScrollTrigger.

trigger

The trigger property is used to specify the point we want our animation to start. To add a trigger property, use the syntax below:

trigger: "element"

With this property, we can make the third circle in our previous demo the trigger point for the animation. This means that the circle will only move towards the x-axis when we reach the specified element’s (the third circle, in this case) viewport.

Let's set the #thirdCircle as the trigger point and see if anything changes:

trigger: "#thirdCircle"

Moment of truth! 😱

Now, you can see that the #thirdCircle starts animating as soon as it comes into view. Exciting right?

markers

markers is a development-enabling feature that allows you to see the start and end position of the element to be animated and the page's viewport.

Let's add markers to our previous demo using the syntax below:

markers: true

If we scroll down to the trigger element (the third circle), we will notice that the start and end position is now visible thanks to markers.

start

By default, the trigger element starts animating as soon as it enters the bottom of the scroller's viewport.

However, we can change the default start position using the ScrollTrigger start property. Let's change the start position of the animation in our previous demo using the code below:

start: "top center"

• Here, top refers to the top of the trigger element, which is thirdCircle in this case
• center signifies the center of the webpage

Aside from using keywords like top, bottom, and center to control the animation's position, we can also use pixel or percentage values.

end

Just like we could change the start position, we can also change the end position using ScrollTrigger's end property.

By default, the trigger element stops animating as soon the bottom enters the top of the scroller's viewport. Let's change the end position of the animation in our demo using the code below.

end: "bottom top"

• Here bottom signifies the bottom of the trigger element thirdCircle
• top here signifies the top of the webpage

scrub

The scrub property links the scroll position to an animation's progress. When you set scrub to true, it makes the scroll bar act as a scrubber while it's between the start and end position property.

Let's add a scrub using the syntax scrub:true to our demo to get a clearer understanding:

If you scroll through the page and look closely, you will notice that the trigger element (thirdCircle) moves along the x-axis when you scroll down, but if you scroll up again, it takes it back to the original position, thereby acting like a scrubber.

So far, we've learned that ScrollTrigger allows you to trigger an animation when the page is scrolled to a specific viewport. We've also covered the basics of ScrollTrigger, now let's move on to using ScrollTrigger in a React app.

Using ScrollTrigger in a React app

Yay! The time we've all been waiting for is here. In this section, we will build a basic landing page with React, animate the landing page, and trigger the animations using ScrollTrigger.

Check out the demo on Codesandbox and code repository on GitHub.

This section has been broken down into different steps to make it easier to understand.

Step 1: Create a React project

First, let's spin up a React application by using Create React App:

npx create-react-app scrolly

The command above will create a React application called scrolly for us. Once the application has been created successfully, switch to its repository using cd scrolly and run the command below:

npm start

If the React app has been created correctly, you should see this in your browser window when you navigate to localhost:3000.

Step 2: Add content to our React app

Open the newly created React app in your favorite integrated development environment (IDE) and paste the code below inside the App.js file:

import "./App.css";
import workout from "./workout.svg";
import greensocklogo from "./greensocklogo.svg";
import happy from "./happy.svg";

function App() {
  return (
    <div className="App">
      <div className="first">
        <h1>ScrollTrigger</h1>
        <p className="first-paragraph">
          is the coolest Greensock plugin.
          <span role="img" aria-label="celebrating">
            🥳
          </span>
        </p>
        <div className="logo-main">
          <img src={workout} id="workout-logo" alt="workout" />
        </div>
      </div>
      <div className="second">
        <div className="logo-main">
          <img src={greensocklogo} id="gsap-logo" alt="greensocklogo" />
        </div>
      </div>
      <div className="third">
        <p>
          <span className="line" />
        </p>
        <div className="logo-main">
          <img src={happy} id="happy-logo" alt="happy" />
        </div>
      </div>
    </div>
  );
}
export default App;

The code above is a basic functional React component that we will use to animate our landing page.

Now, let me explain the code bit by bit:

import './App.css';
import workout from "./workout.svg";
import greensocklogo from "./greensocklogo.svg";
import happy from "./happy.svg";

Here, we imported all the external files we need to build the landing page.

The SVG images imported in the code snippet above can be found here. To add these files to your React app, create a file for each of the SVG images (workout.svg, greensocklogo.svg, and happy.svg), copy the SVG code here, and paste it into the files you created:

function App() {
  return (
    <div className="App">
      <div className="first">
        <h1>ScrollTrigger</h1>
        <p className="first-paragraph">
          is the coolest Greensock plugin.
          <span role="img" aria-label="celebrating">
            🥳
          </span>
        </p>
        <div className="logo-main">
          <img src={workout} id="workout-logo" alt="workout" />
        </div>
      </div>
      <div className="second">
        <div className="logo-main">
          <img src={greensocklogo} id="gsap-logo" alt="greensocklogo" />
        </div>
      </div>
      <div className="third">
        <p>
          <span className="line" />
        </p>
        <div className="logo-main">
          <img src={happy} id="happy-logo" alt="happy" />
        </div>
      </div>
    </div>
  );
}

export default App;

Here, we have a parent div element with three child div elements. This section controls what is displayed on our landing page. Finally, we exported our App component so that we can reuse it in different sections of the React app.

If you added the SVG's images correctly, there shouldn't be any error, and the landing page should look like this now. 👇🏽

Step 3: Customize the landing page

As you can see, our landing page isn't styled adequately, so make it more appealing with CSS. To do this, paste the code below into your App.css file:

* {
    padding: 0%;
    margin: 0%;
    box-sizing: border-box;
}

.first {
    width: auto;
    height: 500px;
    background-color: #fdfffc;
    margin-top: 30px;
}

.second {
    width: auto;
    height: 400px;
    background-color: #e0fbfc;
}

.third {
    width: auto;
    height: 400px;
    background-color: #fdfffc;
}

.line {
    width: 100%;
    max-width: 1400px;
    height: 20px;
    margin-top: 20px;
    position: relative;
    display: inline-block;
    background-color: #023047;
}

h1 {
    text-align: center;
    padding-top: 90px;
    color: #023047;
    font-size: 60px;
}

.first-paragraph {
    text-align: center;
    color: #023047;
    font-size: 20px;
    font-weight: bold;
}

.logo-main {
    align-items: center;
    display: flex;
    justify-content: center;
}

#workout-logo {
    width: 500px;
    height: 300px;
    margin-top: 10px;
}

#gsap-logo {
    width: 500px;
    height: 300px;
    margin-top: 50px;
    padding-right: 80px;
}

#happy-logo {
    width: 500px;
    height: 300px;
}

.second-paragraph {
    font-size: 30px;
    margin-top: 40px;
}

.third-paragraph {
    font-size: 30px;
    margin-top: 40px;
}

With the CSS we just added, our app should look like this. 👇🏽

Step 4: Target elements using refs

We need to target the elements we intend to animate on the landing page using the useRef React hook.

Paste the updated code below into your App.js file:

import { useRef } from "react";
import "./App.css";
import workout from "./workout.svg";
import greensocklogo from "./greensocklogo.svg";
import happy from "./happy.svg";

function App() {
  const ref = useRef(null);

  return (
    <div className="App" ref={ref}>
      <div className="first">
        <h1>ScrollTrigger</h1>
        <p className="first-paragraph">
          is the coolest Greensock plugin.
          <span role="img" aria-label="celebrating">
            🥳
          </span>
        </p>
        <div className="logo-main">
          <img src={workout} id="workout-logo" alt="workout" />
        </div>
      </div>

      <div className="second">
        <div className="logo-main">
          <img src={greensocklogo} id="gsap-logo" alt="greensocklogo" />
        </div>
      </div>

      <div className="third">
        <p>
          <span className="line" />
        </p>
        <div className="logo-main">
          <img src={happy} id="happy-logo" alt="happy" />
        </div>
      </div>
    </div>
  );
}

export default App;

Here’s an explanation of the code changes:

import {useRef} from "react";

We imported the useRef() React Hook into App.js:

const ref = useRef(null);

Then we created a variable called ref that will be used to store the reference of our target element (the parent div element in this case).

<div ref={ref} className="App">
    ...
</div>

Finally, we passed the mutable ref object into the parent div element.

Step 5: Animate the React ref using GSAP

Now that we have targeted the element we intend to animate, let’s animate it with GSAP. First, install GSAP into your React app by running the command below in your terminal:

npm install gsap

After installing GSAP into the React app successfully, paste the updated code below into your App.js file:

import { useRef, useEffect } from "react";
import "./App.css";
import workout from "./workout.svg";
import greensocklogo from "./greensocklogo.svg";
import happy from "./happy.svg";
import { gsap } from "gsap";

function App() {
  const ref = useRef(null);
  useEffect(() => {
    const element = ref.current;
    gsap.fromTo(
      element.querySelector(".first-paragraph"),
      {
        opacity: 0,
        y: -20,
      },
      {
        opacity: 1,
        y: 0,
      }
    );
  }, []);

  useEffect(() => {
    const element = ref.current;
    gsap.fromTo(
      element.querySelector("#gsap-logo"),
      {
        opacity: 0,
        scale: 0.2,
        y: -20,
      },
      {
        opacity: 1,
        y: 0,
        scale: 1,
        duration: 1,
        ease: "none",
      }
    );
  }, []);

  useEffect(() => {
    const element = ref.current;
    gsap.from(element.querySelector(".line"), {
      scale: 0,
      ease: "none",
    });
  }, []);

  return (
    <div className="App" ref={ref}>
      <div className="first">
        <h1>ScrollTrigger</h1>
        <p className="first-paragraph">
          is the coolest Greensock plugin.
          <span role="img" aria-label="celebrating">
            🥳
          </span>
        </p>
        <div className="logo-main">
          <img src={workout} id="workout-logo" alt="workout" />
        </div>
      </div>

      <div className="second">
        <div className="logo-main">
          <img src={greensocklogo} id="gsap-logo" alt="greensocklogo" />
        </div>
      </div>

      <div className="third">
        <p>
          <span className="line" />
        </p>
        <div className="logo-main">
          <img src={happy} id="happy-logo" alt="happy" />
        </div>
      </div>
    </div>
  );
}

export default App;

Here’s an explanation of the changes we made to the existing code in our App.js file:

import { useRef, useEffect } from "react";
import { gsap } from "gsap";

We imported the useEffect() React Hook and gsap into App.js:

useEffect(() => {
    const element = ref.current;
    ...
}, []);

We initialized three different useEffect() React Hooks for the three child div elements. Inside each useEffect() Hook, we created a constant variable called element and assigned it a reference to the parent div element we targeted using the useRef() React Hook:

useEffect(() => {
  const element = ref.current;
  gsap.fromTo(
    element.querySelector(".first-paragraph"),
    {
      opacity: 0,
      y: -20,
    },
    {
      opacity: 1,
      y: 0,
    }
  );
}, []);

useEffect(() => {
  const element = ref.current;
  gsap.fromTo(
    element.querySelector("#gsap-logo"),
    {
      opacity: 0,
      scale: 0.2,
      y: -20,
    },
    {
      opacity: 1,
      y: 0,
      scale: 1,
      duration: 1,
      ease: "none",
    }
  );
}, []);

useEffect(() => {
  const element = ref.current;
  gsap.from(element.querySelector(".line"), {
    scale: 0,
    ease: "none",
  });
}, []);

In each of the three hooks, we added GSAP tweens to animate the three child div elements; .first-paragraph, #gsap-logo, and .line.

With this new update, our landing page now looks like this. 👇🏽

If you look at the landing page now, you will notice that we've successfully animated the .first-paragraph, #gsap-logo, and .line child elements.

However, these animations start animating once the page is loaded into the browser window preventing us from seeing our animations in action. I bet you didn’t see the animation of the .line element at the end of the landing page.

Let's fix this by adding the ScrollTrigger plugin to ensure the animations are only triggered on the scroll.

Step 6: Trigger animations on the scroll using ScrollTrigger

Yay! It is time to see the ScrollTrigger plugin in action.

Paste the code below into the App().js file:

import { useRef, useEffect } from "react";
import "./App.css";
import workout from "./workout.svg";
import greensocklogo from "./greensocklogo.svg";
import happy from "./happy.svg";
import { gsap } from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";

function App() {
  gsap.registerPlugin(ScrollTrigger);
  const ref = useRef(null);
  useEffect(() => {
    const element = ref.current;
    gsap.fromTo(
      element.querySelector(".first-paragraph"),
      {
        opacity: 0,
        y: -20,
      },
      {
        opacity: 1,
        y: 0,
        scrollTrigger: {
          trigger: element.querySelector(".first"),
          start: "top top",
          end: "bottom center",
          scrub: true,
        },
      }
    );
  }, []);
  useEffect(() => {
    const element = ref.current;
    gsap.fromTo(
      element.querySelector("#gsap-logo"),
      {
        opacity: 0,
        scale: 0.2,
        y: -20,
      },
      {
        opacity: 1,
        y: 0,
        scale: 1,
        duration: 1,
        ease: "none",
        scrollTrigger: {
          trigger: element.querySelector(".first"),
          start: "top center",
          end: "bottom top",
          scrub: true,
        },
      }
    );
  }, []);
  useEffect(() => {
    const element = ref.current;
    gsap.from(element.querySelector(".line"), {
      scale: 0,
      ease: "none",
      scrollTrigger: {
        trigger: element.querySelector(".third"),
        scrub: true,
        start: "top bottom",
        end: "top top",
      },
    });
  }, []);
  return (
    <div className="App" ref={ref}>
      <div className="first">
        <h1>ScrollTrigger</h1>
        <p className="first-paragraph">
          is the coolest Greensock plugin.
          <span role="img" aria-label="celebrating">
            🥳
          </span>
        </p>
        <div className="logo-main">
          <img src={workout} id="workout-logo" alt="workout" />
        </div>
      </div>
      <div className="second">
        <div className="logo-main">
          <img src={greensocklogo} id="gsap-logo" alt="greensocklogo" />
        </div>
      </div>
      <div className="third">
        <p>
          <span className="line" />
        </p>
        <div className="logo-main">
          <img src={happy} id="happy-logo" alt="happy" />
        </div>
      </div>
    </div>
  );
}
export default App;

Here’s an explanation of the changes we made to the code:

import { ScrollTrigger } from "gsap/ScrollTrigger";

We imported the ScrollTrigger plugin into App.js:

gsap.registerPlugin(ScrollTrigger);

Then we registered the ScollTrigger plugin:

useEffect(() => {
  const element = ref.current;
  gsap.fromTo(
    element.querySelector(".first-paragraph"),
    {
      opacity: 0,
      y: -20,
    },
    {
      opacity: 1,
      y: 0,
      scrollTrigger: {
        trigger: element.querySelector(".first"),
        start: "top top",
        end: "bottom center",
        scrub: true,
      },
    }
  );
}, []);

In each of our useEffect() Hooks, we added scrollTrigger as one of the values in our gsap tween.

scrollTrigger: {
    trigger: element.querySelector(".first"),
    start: "top top",
    end: "bottom center",
    scrub: true
}

We added our trigger element in this case, the .first element. Then we also specified the start and end position for the animation. Finally, we set scrub to true so that all our animations will act as a scrubber when we scroll through the landing page.

With the updated changes, our landing page's animations will only start animating when we reach the specified viewport while scrolling through the web page. See demo below. 👇🏽

Conclusion

I hope you were able to learn about the GSAP ScrollTrigger plugin in this tutorial. Even though this tutorial covers the fundamental possibilities of using ScrollTrigger, there's so much more you can do with ScrollTrigger. You might be inspired by the demos on GreenSock's CodePen.

If you have any questions, you can leave them in the comments section below.

Resources for further reading

• GreenSock 101, Petr Tichy
• GSAP Cheatsheet, GreenSock
• ScrollTrigger Documentation, GreenSock
• Most Common ScrollTrigger Mistakes, GreenSock

As my first article for 2021, I will be highlighting 16 tech blogs written by women in tech across the world. If you want to read more tech articles this year, you should definitely follow these blogs

Emma Bostain, compiled.blog

Emma is a Frontend Engineer at Spotify. She writes about CSS, JavaScript, technical interviews, how to publish an ebook & so much more. She sure has a great way of explaining tech concepts in a very relatable way. Emma’s blog definitely inspired me to get into tech blogging.

Victoria Lo, lo-victoria.com

Victoria is one of the most consistent tech bloggers I know. She writes about web development, ReactJS, and also shares blogging tips on her blog. Following her blog would definitely inspire you to write consistently & effectively.

Angie Jones, angiejones.tech

With a mix of test automation strategies, coding recipes, & tutorials on Java, this blog is perfect for QAs, Java enthusiasts, and developers interested in testing.

Angie is not only an amazing tech blogger; she is also a Java Champion and Principal Developer Advocate at Appitools.

Ayushi Rawat, ayushirawat.com

You know the popular quote that says;

Building projects is one of the best ways to improve your coding skills?

Ayushi's blog is the epitome of that quote.

She doesn't just write about a tech concept. She builds different projects with Python and explains how she was able to achieve them. If you want to improve your Python skills by building projects, her blog is for you.

Tania Rascia, taniarascia.com

I have read different tech articles throughout my career, and I must say that Tania's articles are the best. If you come across any of her articles, you will be astonished and learn a great deal.

Tania writes about Open Source, ReactJS, VueJS, amongst other things.

Ruth Ikegah, cakebaby.dev

Ruth's blog is the beginner's corner. She writes beginner-friendly and easy to understand articles about Python, Open Source, and GO. If you are a code newbie, you should read Ruth's articles.

Lindsey, a11ywithlindsey.com

Lindsey is a self-taught web developer. She helps developers get the hang of accessibility, write better code, and empower them to build an exclusive internet through her blog.

Anita Ihuman, movi.hashnode.dev

Anita is a full stack developer and open source contributor. Her blog features beginner-friendly tech articles with a spice of real-world examples and developers' life.

Monica Lent, monicalent.com

Monica Lent is a software engineer and former engineering manager. Trust me when I say her blog is the go-to place for all things blogging for devs, startups, and career growth. Her work utterly inspires me.

Sai Laasya, laasyasettyblog.hashnode.dev

If you are a Cloud enthusiast, Sai's blog should be added to one of your top resources for tech articles. Aside from writing about the Cloud, she shares insights on blogging and productivity.

Jennifer Opal, jenniferopal.co

Jennifer is a DevOps Engineer focusing on Big Data. Her blog covers many educative articles about inclusion, career, neurodiversity, and tons of motivation to start a tech career. I recently discovered her blog & it is a gem.

Anna J, blog.annamcdougall.com

Anna is a web developer who demystifies JavaScript and CSS on her blog. I really love her content because she doesn't just focus on writing about frameworks or languages. She educates developers on how to ask questions, give compliments, and be inclusive.

Ali Spittel, welearncode.com

Ali is a Senior Developer Advocate at Amazon. She writes about AWS, coding questions, GraphQL, and so much more. I love her blog because it is so informative and user friendly at the same time.

Alyssa Holland, blog.alyssaholland.me

I discovered Alyssa's blog some months ago on Hashnode, and I loved it. She writes about front-end development, productivity and Docker.

Gift Egwuenu, giftegwuenu.dev

Gift is a frontend developer and content creator based in the Netherlands. She writes about content creation, preparing for tech interviews, front-end development and more.

Stephanie Morillo, stephaniemorillo.co

Do you know what they say about saving the best for the last? Stephanie shares content that helps developers become better content creators and bloggers. She even wrote a book on content creation as well - that's how good she is. She's an inspiration.

Conclusion

I hope you found this article useful and would hopefully start reading these tech blogs this year.

Do you know of any other tech blog owned by a woman? Please share it in the comment section below, and I'll reply to every comment.

Most developers shy away from blogging because they think they are not smart enough or they don't think it is important.

As someone who has been into tech blogging for quite some time, I will be sharing some reasons why blogging is important for developers. If you've ever wondered why developers should blog, then this article was written with you in mind. I do hope you learn a thing or two from it.

Now let's get right into it. 💃🏽

Give back to the community

When you started learning how to code, you most likely read a couple of tech articles to grasp that programming language. You know what? Let's scratch that. You still read tech articles now that you are no longer a code newbie.

If the assumption I made above is correct, that means you've benefited from at least 1 tech blogger in the developer community at some point in your career. So, why not write to help another developer too?

There's a high chance that this might not seem like an excellent reason for you to start blogging but try to imagine those articles that helped you out were not written by the authors and ask yourself if you would've been able to understand those tech concepts at the time.

Blogging gives you an opportunity to give back to the community, to help someone understand coding, and to inspire.

Improve your skill

Over the years, I have noticed that people think tech blogging is only about educating others. But that's not true. I believe blogging actually helps the author as much as it helps the reader.

Truth be told, most tech bloggers actually research the tech concepts days or weeks before writing an article about it on their blog. Because of this research carried out by tech bloggers, their knowledge about everything they write about keeps improving. For instance, if I write about ReactJS consistently for a year, I will be way better at ReactJS than I was the previous year when I didn't write anything about it.

So, what exactly am I saying?

Blogging helps to educate others, but it will help you learn about new things and improve your coding and communication skills.

Build your brand

At first, it may seem like nobody is watching or noticing your articles. But over time, people will get to know you for the type of tech articles you write. And that, my friend, is a good way to build your brand.

Blogging about a certain programming language or tech concept consecutively will make you known in that respective developer community. This can lead to recommendations, opportunities, job offers, and so much more.

When recruiters see your blog posts, it can also increase your chances of getting the job over others who don't write technical articles because it shows them you are really knowledgeable about the subject matter and you also have good communication skills. I mean, who doesn't love a developer with strong communication skills? 😉

Make money

Oh yes, you can make money from blogging. In fact, it is such a good way to make a passive income even while working as a full-time developer.

Listed below are some ways to make money while blogging as a developer;

1. Ads: Adding ads to your blog is one of the most popular ways to make money through tech blogging. But most developers don't like seeing a lot of ads when they are reading articles, so I will recommend using Carbon Ads because it centered around content for developers and designers, so developer may not leave your blog when they see these type of ads.
2. Web monetization: If you are not a fan of ads, you can integrate Web Monetization on your blog.
3. Paid community writing programs: There are tons of tech companies and communities that pay developers to write technical articles for them. Most of them pay between 100 to 2000 dollars. Here's a list of some paid community writing programs for developers.
4. Affiliate links: You can add affiliate links from various tech companies on your blog posts.
5. Community funding: Getting community funding is also another way to make money as a tech blogger. With a Patreon or Buy Me a Coffee account, various people in the developer community can support you financially monthly.

Conclusion

Blogging is a combination of sharing & gaining knowledge. It can help you achieve great things & get better as a developer.

My final words would be to remind you that tech bloggers have the great benefit of becoming lifelong learners because they need to be well-versed in the field they are writing to explain the concepts to readers clearly. So when you blog, you also help yourself too.

If you now see why you should start blogging and want to get started, I'd recommend using Hashnode because it is the easiest way to start a blog mapped to your personal domain for free & connect with the readers through the Hashnode's developer community.

Do you know of any other benefits of blogging as a developer? Please share it in the comment section below, and I'll reply to every comment.

Due to blogging's numerous benefits, different people have asked questions like; what are the best technical blogging platforms? Should I build a blog from scratch or use a network-based technical blogging platform?

This article aims to answer some of those questions by highlighting some of the best ways to start a technical blog in 2021. I will divide it into network-based and self-hosted tech blogging platforms.

Network-based Platforms

These are technical blogging platforms with an existing audience that you can leverage when you publish articles. You don't have to understand how to code to use these platforms or worry about maintaining your blog as well.

Hacker Noon

Hacker Noon is a community of over 12,000+ contributing writers publishing free high-quality tech stories.

Hacker Noon supports writers by proofreading their articles before it is published on the platform, has in-built blog analytics, strong security, and is web monetized to enable writers to earn money from their articles.

As a network-based platform, it already comes with an existing audience waiting to read the articles you publish on the platform.

Medium

Medium is a community of writers, bloggers, journalists, and experts. - From the description, you can see that medium is not only for people in tech because it has various writers and publications from different areas of life.

No coding skill is required to create a blog on Medium. It comes with in-built analytics and a paid writer program.

Medium received many backlashes from the tech community when they added the paywall feature because users were limited to reading five articles for free every month on Medium. Even though these platforms come with many readers, you can't use your own domain on your blog, and there's not a lot of customization options.

Hashnode

Hashnode is a content creation platform and community that enables developers to create a blog on their personal domain for free. As a network-based platform, your articles are shared with the community on Hashnode for initial traction and readership.

You don't have to create your blog from scratch; hence no coding skill is required and you get to enjoy all the SEO benefits because the blog is mapped to your personal domain name. Blog customization is pretty great as well.

The platform doesn't have a paid writer program like medium but it has got web monetization integrated to enable writers to make money from their articles with no popup ads.

Dev.to

Dev.to is an open-source software that powers a community of software developers who write articles and build relationships with other developers.

As a network-based platform, it comes with an existing audience waiting to read your articles. It doesn't require any coding skills to set up and is web monetized as well.

You can't map your blog to your personal domain, so the traffic goes to dev.to instead of your blog. The platform respects your canonical URLs so you can republish your articles.

Self-hosted Platforms

These platforms require understanding how to code. You have to create the blog from scratch and also maintain it as well. Self-hosted platforms do not come with have an existing audience like the network-based platforms.

WordPress.org

WordPress.org is a software designed for building websites and blogs. You will have access to different plugins to enhance your blog and total control over every aspect of your blog.

It doesn't come with a built-in audience, so nobody might read your articles when you publish them except you have a good social media following or have been blogging for a long time.

You have to manage your own backups and security, so some coding knowledge is required here. There are tons of people using WordPress worldwide, so finding resources to help you build with WordPress is easy.

MDX and Next.js

MDX is an authorable format that lets you write JSX and import components into your Markdown files, while Next.js is a React framework that enables you to build static and dynamic apps quickly.

You need to understand React and Next.js to be able to create the blog with MDX and Next.js. You have the power to customize your blog in different ways and also have total control of your content.

Since it is a self-hosted platform, there's no existing audience waiting to read your articles when you publish them.

Gatsby

Gatsby is a free and open-source framework based on React that helps developers build fast websites and blogs.

Knowledge of GraphQL and React is a must-have to build a blog with Gatsby. I believe Gatsby's documentation is excellent, so it shouldn't be challenging if you are looking to explore building with Gatsby.

Blog customization can be done in diverse ways and you will also have total control of your content.

As a self-hosted platform, you will be required to build your blog from scratch and maintain it. It doesn't come with an existing audience, so you may not get a lot of readerships, except your articles are shared on social media platforms.

Conclusion

Network-based and self-hosted platforms are great. It is essential to understand the differences between them and what you stand to gain from using either of them.

I hope you were able to learn about the best ways to start a technical blog in 2021. Thank you for reading this article.

Most developers wonder why they should create a blog with Hashnode instead of building one from scratch. So, this article aims to question the reasoning of these developers and at the same time highlight why using Hashnode is a great option.

First, I have 3 questions for you 😀

For every developer looking to create a blog from scratch, here are three questions I have for you:

Do you complete every side project you work on?

I honestly can't keep track of the number of side projects I have not completed over the years. And interestingly, this seems to be the case with other developers across the world.

If your case is different, then I'd love to know your secret. But if you are like most of us with uncompleted side projects, do you think building a blog would be different?

Let's assume you decide to build a blog from scratch, what happens when you can't finish it due to lack of time? You won't be able to publish an article on an unfinished blog. So, there goes the beginning of your dev blogging journey down the drain. 😭

Would you have time to maintain the blog?

Assuming you complete building the blog, what happens when you can't maintain the blog after some months/year because of your busy schedule or for some other reasons beyond your control? You may be forced to stop publishing articles till you update the blog or at the worst case, stop publishing articles forever.

Time is a scarce resource and it may be advisable to spend your time on activities that have the highest investment. Maintaining a blog when Hashnode already does that for you at no cost, may not be the best investment of your time.

How would people discover the articles you publish on your blog?

When you create a blog from scratch, it doesn't come with an inbuilt community like Hashnode. So if you don't have a strong social media presence, your article might not be read by people for a couple of weeks, months or even years.

But with Hashnode, there are different developers across the world early waiting to read your insightful articles from day 1. So, there's no cold start for you.

So, what exactly am I saying?

Creating a blog with Hashnode saves you the stress of creating your blog yourself and helps you to be more efficient. It gives you the best of both worlds - a blog mapped to your domain for free and readership from the dev community.

The good thing is, you can create a blog on Hashnode in under 2 minutes and start writing articles immediately. You can also republish your existing articles on Hashnode for more visibility if you are not ready to move to Hashnode entirely yet.

Guess what? I am not the only developer who loves using Hashnode. Here's what other developers worldwide think about Hashnode.

Conclusion

This article is very opinionated and may not necessarily apply to developers that build blogs because they want to learn about the languages or framework used during the building process.

So, if that's you, go ahead and build that blog from scratch. After all, you will not have to maintain it or publish articles there. And if you do, your intention may just be to test out what you've built.

But to developers like me who have full-time jobs, and other responsibilities but want to ship out articles to the developer community and get a lot of readerships - Hashnode is what you need to use. Learn more and create a blog on Hashnode.

You might think you're not good enough to have a career in tech -- but give yourself a chance. You can do it.

The truth is you, don't have to be a genius to work in technology. And in this article, I'll explain how you can kickstart your own career in tech.

Do Your Research

Technology is a very broad field. This means that there are different areas in tech that require certain skills. In order to discover the right role for yourself, you need to do some research.

You can start by researching the major areas in tech below:

• Web Development
• Mobile Development
• Product Management
• Technical Writing
• UI/UX Designing
• Product Design
• Data Science

After reading through the resources listed above, you will have a better idea of the major areas in tech. With this knowledge, you can go ahead and explore the area that you found most interesting.

You can either do this online using your favorite search engine or by asking someone in tech (if you know any).

If you decide to follow the search engine route, ask questions targeted at what you want to discover. For instance, if you want to learn about the benefits of technical writing, your question should follow this format "What are the benefits of becoming a technical writer?".

If you want to know about the skills required to be a Data Scientist, then your question should follow this format "What do I need to know to become a data scientist?" or "How do I become a data scientist?".

To be honest, it is almost impossible to not find information about the different areas in technology online.

If you decide to ask someone in tech, always be polite and go straight to the point. Instead of saying "Hi" and waiting for the person to respond before asking your question, you can follow this format:

"Hi Rita, my name is Edidiong and I have been researching different career paths in tech. I have read different articles online but I wanted to also hear your opinion as well. How did you know web development was the right career for you? I'd totally understand if you can't respond because of your busy schedule but I will be glad if you do."

You might think that this was a pretty long message, but it covered the most important things: your name, what you need, the research you've done already, and that you understand that you are not entitled to the person's time.

Decide Which Path to Take

After carrying out the necessary research, you need to take a moment and decide on the tech career path you want to pursue.

Perhaps you've read about product design, but you've never had an eye for designing or using colors effectively. Then maybe you also heard about program management and it made you excited because you've always loved managing people or events.

And maybe your friend in tech also told you about the benefits of being a web developer and you were impressed. But you are not sure yet which tech role to pursue because they all sound good.

Here are some tips for things to think about when trying to make this decision.

Think about your current (transferrable) skills

Before you decided to kickstart a career in tech, you were mostly doing something else that you found interesting. Let's assume you loved painting.

Anyone who loves to paint understands a lot about colors -- so that means product or UI/UX design might be a good fit for you. The goal here is to try to connect your current skill or hobbies to your proposed tech career path.

Just get started -- no matter how that looks

Choosing an initial tech career path doesn't mean that's what your career will always be about. My point is, it is totally fine to start out as a technical writer and switch to mobile development later.

For instance, I started out as an android developer but eventually switched to web development. So go ahead and get your feet wet before you narrow down to exactly what you want.

Go for passion, but be practical too

It is important to know that choosing to pursue a certain tech role because you are passionate about it is great. But it's also ok to choose a role because you believe the opportunities are better, even if you are not very passionate about it.

So, I'd recommend that you do a mixture of both: choose something you will enjoy doing and become so good that you get tons of opportunities.

Find Tools & Resources Online

Remember how I said it is almost impossible not to find resources about tech online? Yes, I wasn't joking.

It's so amazing that you can also find really insightful resources to kickstart your career in tech for free.

For instance, freeCodeCamp is a platform that empowers people from all over the world to learn how to code for free. I personally used it while learning how to code and it was one of the best resources. 😃

To find these tools and resources, search for them on Google by using keywords and phrases like where can I learn how to be a (insert tech role) for free?

If you have the funds to acquire paid tools and resources, go for it. If you prefer one on one sessions with a tutor, then you can pay for that, too. 🤑

Simply put, finding the resource is not an issue. Choosing the right resource is the key thing here.

So, how do you choose the right project? I'll tell you!

• First, think about your preferred way of learning. For example, do you prefer reading or watching videos?
• After choosing your preferred learning format, make sure you choose a resource that has some structure. By structure, I mean a plan or curriculum that will educate you about the necessary skills step by step until you understand.
• Ask questions or read reviews about the resource.
• Do a quick test run to see if this resource is the right one for you. Does it have the right format, good examples, pictures, and so on?

This is very important because choosing the wrong resource or tool might make you give up easily because you won't enjoy the process or understand what you are trying to learn.

Just Start Learning

The secret of getting ahead is getting started. - Mark Twain

Yes, I had to share Mark Twain's quote because it is something we all need to remember when we are about to take up a new challenge.

Deciding to kickstart a career in tech is great, but putting in the necessary work to learn is even greater.

Think about it this way: you did your research about different roles in tech, you chose your preferred tech career path, and you found the right learning resources. But now you don't want to put in the work and learn? No!

You didn't spend all that time and effort to give up at the most important point.

You have to start learning.

Set up a schedule that works for you. For instance, learning for at least 30 minutes or 1 hour every day. If you have more time, then spend more time learning. Your growth will be tremendous.

Build projects

Once you have a good foundation of knowledge, start building basic projects.

Most people think they need to know everything about a particular programming language or tool before they start building a project. But most times, this only results in watching tutorials for months.

The truth is that building projects lets you improve your coding skills in ways you can't imagine. It also gives you something to show off in interviews when you are telling your interviewers about your tech skills.

Here's a list of beginner-friendly projects ideas:

• 9 Simple App Ideas to Learn Android Programming (With Tutorials).
• Project ideas to help you improve your coding skills
• UX Design Projects for Beginners.
• 21 Interesting Web Development Project Ideas For Beginners [2020].
• 500+ Product Design ideas in 2020.
• 7 Websites To Find Front End Projects For Your Portfolio.
• How to find blog content ideas effortlessly?

Start writing

Most people think you have to be super smart to start writing and sharing knowledge. But I completely disagree. As much as we write to share knowledge, we also write to document what we've learned.

Our brains don't have the capacity to remember everything we've learned, so writing it down on your blog will serve as a reference point for you in the future. It can also help someone who is also trying to understand that concept you just learned.

In my case, I created my blog with Hashnode because it is super fast, has a strong community, and allows you to map the blog to your domain. I'd recommend you use the same platform for creating your first blog.

After you've gotten comfortable with writing, you can now submit your articles to the amazing freeCodeCamp publication to reach a wider audience and give back to the tech community.

Writing is a great way to digest and process the information you take in. It gives you access to so many opportunities and can also help you make your mark in the tech ecosystem.

Writing changed my life, and I believe it will be of great help to you and your tech career. Start blogging now.

Stay consistent

This is the most important step in kick-starting a career in tech. It's highly unlikely you'll achieve great things if you're not consistently trying to improve on your chosen tech skill.

Consistency forms habits that become almost second nature. So if you code or design for at least 30 minutes every day for a month, you will become better and better.

It is not compulsory to stick with the 30 minutes scenario above -- just find out what works for you, and be very consistent. Only then will the sky be your limit.

Summary

Kickstarting a career in tech is definitely doable if you follow these steps. And I strongly encourage you to try, because of the diverse opportunities that come with it.

Anybody who is willing to learn can start a career in tech with or without any formal knowledge from school. Just go ahead and start.

Yes, it may not be really easy, but there are so many supportive tech communities willing to help you through.

I hope you learned a thing or two from this article. If you have any questions, feel free to send me a DM on Twitter and I'll be happy to answer every single one.

In this tutorial, I will explain why you'd want to use SVG images and how you can use them in CSS and HTML.

Why should you use SVG images?

There are several reasons to use SVG images, some of which are:

• SVG images do not lose their quality when zoomed or resized.
• They can be created and edited with an IDE or text editor.
• They are accessible and animatable.
• They have a small file size and are highly scalable.
• And they can be searched, indexed, scripted, and compressed.

Now let's see how you can actually work with SVG images.

How to download the SVG image used in this tutorial

If you want to work with the SVG image I've used in this tutorial, follow the steps (and diagram) below to download it.

• Go to unDraw.
• Change the background colour to yellow.
• In the search box, search for the word happy.

• Click on the image named Happy news.
• On the pop-up window, click on the Download SVG to your projects button.

If you followed the steps above correctly, the SVG image should be on your computer now.

Now, open the SVG image in your favourite IDE or text editor. Rename it to happy.svg or whatever name you prefer.

How to use SVG images in CSS and HTML

There are several different ways to use SVG images in CSS and HTML. We will explore six different methods in this tutorial.

1. How to use an SVG as an <img>

This method is the simplest way to add SVG images to a webpage. To use this method, add the <img> element to your HTML document and reference it in the src attribute, like this:

<img src = "happy.svg" alt="My Happy SVG"/>

Assuming you downloaded the SVG image from unDraw and renamed it to happy.svg, you can go ahead and add the code snippet above into your HTML document.

If you did everything correctly, your webpage should look exactly like the demo below. 👀

When you add an SVG image using the <img> tag without specifying the size, it assumes the size of the original SVG file.

For instance, in the demo above, I didn't modify the size of the SVG image, so it assumed its original size (which was a width of 600.53015px and a height of 915.11162px).

Note: to change the original size, you have to specify the width and height with CSS as you can see in the demo below. You can also update the original width and height directly.

Even though we can change the size of SVG images added via the <img> tag, there are still some restrictions if you want to make major style changes to the SVG image.

2. How to use SVG as a CSS background-image

This is similar to adding SVG to an HTML document using the <img> tag. But this time we do it with CSS instead of HTML as you can see in the code snippet below.

body {
  background-image: url(happy.svg);
}

When you use an SVG as a CSS background image, it has similar limitations to using <img>. Still, it allows a bit more customization.

Check out the demo below and feel free to make modifications to it using CSS.

3. How to use inline SVG images

SVG images can be written directly into the HTML document using the<svg> </svg> tag.

To do this, open the SVG image in VS code or your preferred IDE, copy the code, and paste it inside the <body> element in your HTML document.

<body>
 // Paste the SVG code here.
</body>

If you did everything correctly, your webpage should look exactly like the demo below.

When you use SVG inline in the HTML document, it reduces load time because it serves as an HTTP request.

Using this method lets you perform more customization as opposed to using either the <img> or background-image methods.

4. How to use an SVG as an <object>

You can also use an HTML <object> element to add SVG images to a webpage using the code syntax below:

<object data="happy.svg" width="300" height="300"> </object>

You use the data attribute to specify the URL of the resource that you'll use by the object, which is the SVG image in our case.

You use the width and height to specify the size of the SVG image.

Again, below is a demo for you to explore. 😃

Using the <object> is supported across all browsers that support SVG.

5. How to use SVG as an <iframe>

Even though this isn't advisable, you can also add an SVG image using an <iframe> as seen in the demo below.

Just keep in mind, though, that <iframe>s can be difficult to maintain and will be bad for your site's Search Engine Optimization (SEO).

Using <iframe> also defeats the purpose of the Scalable in the name Scalable Vector Graphics because SVG images added with this format are not scalable.

6. How to use SVG as an <embed>

The HTML <embed> element is another way to use an SVG image in HTML and CSS using this syntax: <embed src="happy.svg" />.

Keep in mind, however, that this method has limitations, too. According to MDN, most modern browsers have deprecated and removed support for browser plug-ins. This means that relying upon <embed> is generally not wise if you want your site to be operable on the average user's browser.

Below is a demo of using the HTML <embed> element to add an SVG image.

Conclusion

I hope you were able to learn about the different ways of using SVG images in CSS and HTML. This will hopefully guide you towards choosing the right method when adding SVG images to a website.

If you have any questions, share it in the comment section below, and I'll reply to every comment.

Being able to identify and choose the right tool for yourself can be quite daunting because of the numerous options or the need to do things manually.

In this article, I will highlight 5 must-have tools every developer should use to help them stay informed, increase their productivity, and excel in their tech career.

Editor: VS Code

Every developer needs a text editor or IDE to write code with, right? And trust me when I say I have used different text editors and IDEs, and so far, VS Code is top-notch.

Why?

To start with, VS Code has one of the best documentation I have ever seen. This means that any question you may have about VSCode is explained effectively in their documentation.

Working with Git and other version control systems has been made easier because of VS Code's inbuilt support for Git commands.

There are also thousands of extensions that make coding more exciting and increase your productivity as a developer.

You can run and debug your code directly on VS Code, customize it to fit your preference and build cool extensions for it as well. I also love the fact that different developers worldwide recommend using VS Code for coding shows that it is an excellent software with a strong community behind it.

VS Code is incredible and is a must-have for any developer.

Blog: Hashnode

As a developer, blogging does not only allow you to share your technical knowledge & experience with the developer community; it also helps to reinforce your learning on every topic you write.

Most people think you have to be super smart to start writing and sharing knowledge, but I disagree entirely. As much as we write to share knowledge, we also write to document what we've learned.

Hashnode enables developers to create a blog mapped to their own domain for free. The goal here is to help you focus on developing and sharing content on their blogs while Hashnode takes care of the rest - customization, readership, visibility, web monetization, and so much more.

You’ve probably asked yourself why you should create a blog with Hashnode when you can build a blog yourself.

Well, I have one question for you.

Do you complete every side project you start working on? If your answer is yes, then I’d love to know your secret. But if you are like most of us, and your answer is no, why do you think building a blog would be different?

Let’s assume you decide to build a blog from scratch, what happens when you can’t finish it due to lack of time? You won’t be able to publish an article on an unfinished blog.

What happens when you actually finish the blog but can’t maintain it after some time or people don’t read your articles? You may stop publishing articles.

Creating a blog with Hashnode saves you the stress of creating your blog yourself and helps you to be more efficient. It gives you the best of both worlds - a blog mapped to your domain for free and readership from the developer community.

Version Control: GitHub

You know what they say about having a strong GitHub profile as a developer, right? If you have a good GitHub profile, you can access job opportunities and collaborate with other developers in the community.

From open source to business, you can host and review code, manage projects, and build software alongside 50 million developers.

The user experience on GitHub is better than other version control tools; you can easily find, use or contribute to open source projects available on GitHub.

Most importantly, GitHub also serves as a storage for your code. Gone are those days where you lose all the projects you are working on because your laptop spoilt of you changed your computer. When you push your code to GitHub, it will be there forever.

Browser Extension: daily.dev

With every new tab opened on your browser, you may find the article you've been looking for displayed on your screen to help you boost your knowledge.

daily.dev is a browser extension that curates tech news, articles, and discoveries worldwide for software developers.\ With daily.dev installed on your browser, you can easily keep track and stay updated with the latest programming publications worldwide.

If you write technical articles on Hashnode for instance, your article will be picked by daily.dev and displayed to thousands of developers using the product.

Task Management: Trello

Staying updated with new technologies, working on our full-time jobs, freelancing and building side projects are a couple of things most software developers do.

You will often see us say things like “24 hours isn’t enough” because we don’t know how to manage our time effectively or we end up burning out because we’ve been doing so many things in a short period of time.

With Trello, you can keep track of everything; your task, goals, priorities, etc. All you need to do is create a board for your task with a list and cards highlighting each of them. Most times, we lose track of the things we have done and end up thinking we've not done anything with our time, but when you use Trello as your task manager, you can clearly see everything you've achieved so far - this can be good for your mental health if you ask me.

You can also power up your workflow by integrating Trello with awesome tools like Slack. Google drive, time trackers, calendar, and so much more. It is definitely a must-have for developers.

Conclusion

I hope you found this article useful and would hopefully start using one if not all the 5 must-haves for developers I shared in this article.

Do you know of any other platform or tool that developers should use? Please share it in the comment section below, and I'll reply to every comment.

In this article, I will share 5 tips for formatting articles on Hashnode.

Formatting the title of your article

You know what they say about first impressions right? They matter. 😃

The title of your article is the first thing a reader sees so you should pay attention to it and format it appropriately. The title of a technical article should be written in Title Case or Sentence case instead of UPPERCASE.

For more context, here's the difference between them;

Getting Started With the DOM
/*A title written in title case*/

GETTING STARTED WITH THE DOM
/*A title written in uppercase*/

Getting started with the dom
/*A title written in sentence case*/

I know you might be tempted to write the title of your article in UPPERCASE because you think it will be more pronounced but take a moment to look at the example above and notice how it reads better when the title was written in Title Case or Sentence case than UPPERCASE.

I have also read through numerous technical writing style guides and they all recommended using either Title Case or Sentence case as well.

Formatting your article's cover image

More often than not, people forget to add a cover image to their article or they end up using an image that doesn't relate to the article's topic in anyway.

Even though designing a cover image or searching for the right image can be tasky, it is definitely worth it.

You might ask, why is a cover image necessary? I will tell you. But first, this is what an article without a cover image looks like;

Now, let's add a cover image and see the difference. To do this, open the editor and click on Upload an image under Article Cover.

The article cover image should now look like this;

As you may have noticed, the cover image;

• Made the article look more appealing to the eyes.
• Portrays the topic of the article.
• Improves the SEO of the article.
• Improves that chances of the article gaining traction if shared on social media.

To buttress more on the impacts of an article's cover image on social media, here's a quick scenario;

This is an article without a cover image. As you can see, it uses Hashnode default cover image for the social media card.

This is an article with a cover image. As you can see, it shows the cover image of the author, it is more visually appealing and would encourage people to read the article.

Formatting the main headings and sub-heading

Hashnode supports Markdown's Atx-style headers which is similar to the HTML header tag.

# This is Heading 1  
## This is Heading 2  
### This is Heading 3
#### This is Heading 4
##### This is Heading 5
###### This is Heading 6

The main heading and sub-heading of your article should follow the format above. Since the title of your article already uses the H1 tag header tag, I'd recommend using a H2 as the main heading and a H3 tag for the sub-heading.

Let's try it out!

As seen in the image above, I used the H2 markdown command ## for the main heading while I used the H3 markdown command ### for the sub-heading.

You can notice it's easier to different the main heading from the sub heading in the article. Aside from that it is also semantically correct to do it this way instead of making it bold as seen in the image below.

Tags

Every Hashnode user follows at least one technology or programming language tag during or after signup. So the articles displayed on a user's feed on Hashnode are based on the tags they followed.

When you write an article about React, you would ideally want people who are interested in React to read it right? The only way to do that effectively is to add a React tag to your article so everyone who followed the React tag will get to see it.

To add a tag to your article, go to the editor, find Select tags section as seen in the image below, and add the tags that describe your article.

I added the tags shown in the image above to an article titled Getting Started With the DOM. As you may have noticed, these tags correspond or relate to the article's title.

Aside from making your article appear to the right target audience in the Hashnode community, tags can also increase the reach of your article when it is shared on social media.

Formating the content of your article with Markdown

Markdown is a lightweight plaintext markup language that you can use to add elements to plaintext documents rather than using the older WYSIWYG editor.

Hashnode’s editor supports simple markdown along with special tags to embed Tweets, YouTube videos, Codepen snippets, etc.

To find a list of markdown commands that will help you create well formatted articles on Hashnode, go to the blog's editor and click on Guide.

Conclusion

I hope the tips shared in this article was helpful to you. Now, its time to create well-formatted articles.

If you have any questions or suggestions, you can leave them in the comments section below, and I'll be happy to answer every single one.

In other words, adding a newsletter to your blog can help you increase readership and have a sense of people that are interested in reading your articles.

In this article, I will explain the benefits of adding a newsletter to your blog, and how to enable Hashnode's free in-app newsletter feature on your blog.

What are the benefits of adding a newsletter to your blog?

• It keeps your readers updated about your new articles.
• It increases interaction with readers.
• It drives targeted traffic.
• Increase monetization.

How to enable Hashnode Newsletter on your blog

Once you create a blog on Hashnode, you automatically have access to its free newsletter feature. You don't have to purchase a 3rd party newsletter subscription service like Mailchimp when you blog with Hashnode.

To enable the Hashnode free in-app newsletter feature, follow the steps below:

Step 1

Log in to your hashnode account. If you don't already have an account on Hashnode, follow the guide here to create one - it takes less than 2 minutes.

Step 2

Click on your profile picture at the bottom-left corner of the page on a desktop screen or top-right corner on a mobile screen.

Step 3

Click on the Blog Dashboard option from the popup modal to access the dashboard page.

Step 4

On your Blog's Dashboard page, click on NEWSLETTER.

Step 5

On the NEWSLETTER page and click on the Toggle button to enable the newsletter service feature on your blog.

Voila. You've successfully added the newsletter feature on your blog. It is time to increase your blog's readership.

Conclusion

I hope you were able to learn how to enable Hashnode's free inbuilt newsletter feature on your Hashnode powered blog in this article.

Hashnode enables developers to create a blog mapped to their own domain for free. So they can focus on developing and sharing content on their blogs while we take care of the rest - customization, readership, visibility, web monetization, and so much more. Learn more and create a blog on Hashnode.

If you have any questions, you can leave them in the comments section below, and I'll be happy to answer every single one.

Yet, few open-source projects can claim they are well documented, and many others struggle to keep their documentation up to date.

As important as open source projects' documentation may seem, most technical writers shy away from contributing to open source projects because they don't know how to or they are influenced by the stereotype that only software engineers can contribute to open source.

This article aims to provide an introductory guide for technical writers who want to contribute to open source projects. It will cover how to get started, best practices, benefits, and insightful resources for further learning.

Table of Contents

• What is an open source project?
• Why are technical writers important in open source?
• How can technical writers contribute to open source projects?
• Some notable best practices.
• Benefits of contributing to open source projects as a technical writer.
• Conclusion.
• Resources & further reading.

What is an open source project?

An open source project is a project whose source code and documentation are made available for use, modification, or enhancement by anyone in the world.

Did you notice that I said "anyone in the world" and not "only software engineers"? That's because anybody can contribute to an open source project.

Why are technical writers important in open source?

Based on a survey carried out in 2017 by GitHub, the major problem encountered in open source projects is incomplete or confusing documentation.

This means that people decide not to use an open source project or contribute to it because of the documentation. - So, if technical writers come onboard and become active open source contributors, this problem will be solved, and more people will contribute to or use more open source projects.

Hence, the documentation of an open source project is arguably as necessary as the software. So, technical writers are as important as software developers in the open source ecosystem because humans can't use what they don't understand.

How can technical writers contribute to open source projects?

This section covers a guide for technical writers who want to contribute to open source projects.

Find a project you can contribute to

As explained at the beginning of this article, the documentation of so many open source projects is incomplete or confusing, so there are many projects that you can improve. The first thing you need to do is identify the project you can contribute to. If you are interested in Pytorch, you should look out for open source projects using PyTorch since you already have a basic understanding of the tools used. Here's a list of open source projects with documentation opportunities.

Identify an issue to solve

After identifying the open source project, the next thing you need to do is identify an issue to solve. Most open source projects already have available problems relating to their documentation, while others don't.

If you happen to work with an open source project that has raised documentation issues, notify the maintainers of your interest in the project, and start working on it.

If you don't see available documentation issues, then try using the project and identify things that should be documented but haven't been. Then write it and submit a pull request.

Send a pull request

Before submitting the pull request, try to understand the open source project's review process and how they expect to submit pull requests. Ensure you follow the style guide when submitting your pull request.

Some notable best practices

• Follow a style guide (if it exists).
• The page title should reflect the content of the page.
• Always define what the page is about in the first paragraph.
• Consider your audience when creating content.
• Avoid duplicating content.

Benefits of contributing to open source projects as a technical writer

Even though contributing to open source organizations is done for free, there are so many benefits from it. Here are some of the benefits of contributing to an open source project as a technical writer.

Your writing skill will improve

Due to open source projects' nature, contributions are always reviewed by at least one maintainer before it is merged. This means you automatically get access to more reviews and feedback that you naturally didn't have access to.

By implementing this feedback on your pull request and working with maintainers and contributors from different parts of the world, your writing tends to improve over time.

You expand your network

Besides improving as a technical writer, you also get an opportunity to work with people doing extraordinary things in the Open source space. For instance, if you work with an organization like VideoLAN organization, you automatically build relationships with other developers, writers, and top maintainers of the project. Remember having a good network of people in your space is very important for your career.

You can get recommendations and referrals

When applying for any job, having a good recommendation letter often helps to strengthen your application. Working closely with a maintainer of any open source project presents an opportunity to secure a rich source of recommendations and referrals.

You can get accepted into the Season of Docs program

Season of Docs is an annual program organized by Google. Its goal is to bring technical writers and open source organizations together to foster collaboration and improvement of documentation in the Open Source space.

As a technical writer who contributes to open source projects already, your chances of getting accepted into the Season of Docs program is super high already.

You become an open source contributor

This is my favourite benefit because every technical writer contributing to an open source project helps the world debunk the stereotype that open source contributions are only meant for Software developers.

Conclusion

Documentation helps orient new members: how to use a project, how to contribute, the terms of use and contribution, and the etiquette of conduct in a community.

Improving documentation is an impactful way to contribute back to open source, and contributing to an open source project opens you up to many opportunities.

I hope you could learn about contributing to open source projects as a technical writer in this article. If you have any questions, you can leave it in the comments section below, and I'll be happy to answer every single one.

Like this article? Follow me on Twitter @didicodes.

Resources & Further Reading

I curated a list of useful resources to help you learn more about contributing to open source projects as a technical writer.

• "How technical writers can help open source contributors get started," Sarah Maddox.
• "Documentation as a gateway to open source," James Turnbull.
• "Open Source contributions: A catalyst for growth," Edidiong Asikpo.
• "Introduction to open source Documentation," Developer Circles from Facebook.

Developers were really excited when Hashnode announced the custom CSS launch last week because they all yearned for more control over the styling of their Hashnode powered blogs. 🌈

I used the custom CSS feature to override the default Hashnode style on my hashnode powered blog. It reaffirmed my opinion about Hashnode being the best content creation platform for developers. 🍺

This article will explain the seamless process I took in customizing my blog and my thoughts on why you should customize your Hashnode blog as well.

Prerequisites

This article assumes the reader has the following:

• A web browser.
• A Hashnode powered blog.
• Basic knowledge of CSS.

How to enable the custom CSS feature

The custom CSS feature is not enabled by default on Hashnode. So I had to enable it on my blog's dashboard. Here are the steps I followed to enable the custom CSS feature.

1. Go to your blog's dashboard and click on the Appearance tab.
2. Scroll to the bottom of the Appearance page and click on the Toggle button to enable the Custom CSS feature on your blog.
3. Finally, click on Update to save your changes.

Adding custom CSS to my blog

After enabling custom CSS on my blog, you'd have to click on the Add Custom CSS link (see image above) to access the CSS editor where you'd be able to style your blog.

This is where the magic happened. 🎨💃🏽

As you may have noticed, the CSS editor is divided into three different tabs - Home, Articles, and Pages.

So, I had to add custom CSS for my blog's homepage, article, and pages individually.

At the time of this writing, the custom CSS feature is only available for Hashnode Ambassadors.

Customizing my blog's homepage

The first section I changed was my blog's homepage. I mean, who doesn't love a unique homepage?

I did this by adding the custom CSS (shown below) using the CSS editor.

.blog-header{
    padding: 10px 0;
    background: #ffd600;
    color: #000;
    border-bottom: none;
}

.blog-theme-switcher, .blog-settings, .new-story-button{
    color: #000;
}

.blog-social-media-section a, .blog-sub-header-nav a{
    color: #000;
    border-radius: 5px;
    opacity: 100%;
}

.blog-sub-header-nav a.blog-nav-active{
    background: #000;
    color: #FFF;
}

.blog-author-area-photo{
    border: 5px solid #ffd600;
}

.blog-post-card-cover a, .mode-dark .blog-post-card-cover a{
    border: 5px solid #ffd600;
}

Looking at the code snippet above, I modified the .blog-header class to apply custom styling to my blog's header. Similarly, using the .blog-social-media-section and the .blog-sub-header-nav classes, I was able to style the social media icons and the navigation bar respectively.

Other changes I made include making my image area yellow and each of my postcards cover yellow. And yes, I really love yellow.

Hashnode advises users only to modify class names that start with blog-* because they made sure they are unique and represent only one component. For instance, if you want to change your blog's header, you should modify the .blog-header class. Find out more about this here.

Customizing my articles page

The next section I modified was my articles page. I did this by adding the custom CSS (shown below) using the CSS editor.

.blog-header{
    padding: 10px 0;
    background: #ffd600;
    color: #000;
    border-bottom: none;
}

.blog-theme-switcher, .blog-settings, .new-story-button{
    color: #000;
}

.blog-social-media-section a, .blog-sub-header-nav a{
    color: #000;
    border-radius: 5px;
    opacity: 100%;
}

.blog-sub-header-nav a.blog-nav-active{
    background: #000;
    color: #FFF;
}

By applying the custom CSS shown above, I am ensuring that the same styling used on my home page is what is used on my articles page.

This is what my blog's article page looks like now.

Customizing my static page

Finally, I changed the default look of my static page as well. It was time to make my About page look even cooler. I did this by adding the custom CSS (shown below) using the CSS editor.

.blog-header{
    padding: 10px 0;
    background: #ffd600;
    color: #000;
    border-bottom: none;
}

.blog-theme-switcher, .blog-settings, .new-story-button{
    color: #000;
}

.blog-social-media-section a, .blog-sub-header-nav a{
    color: #000;
    border-radius: 5px;
    opacity: 100%;
}

.blog-sub-header-nav a.blog-nav-active{
    background: #000;
    color: #FFF;
}

.blog-page-title{
    display:none;
}

Here, I maintained the same header design for my homepage and removed the About heading from the page.

Take a look at the new look below. Pretty cool, right? I know!

After adding all the custom CSS to the editor, I clicked on the Publish button to ship my customization to production.

Guess whose blog is so damn cool right now? Mine!

My thoughts?

The importance of personal branding for developers can not be overemphasized because of its ability to help developers build a distinct identity, access opportunities, and stand out in the developer community.

Hashnode exists to help you focus on developing and sharing content on your blog while we take care of the rest - customization, readership, visibility, total control of your content, and so much more.

Using custom CSS to style your Hashnode powered blog allows you to not only enjoy Hashnode's developer-centric product for free but also maintain your personal branding effortlessly.

Always remember that the best time to create a Hashnode powered blog is now! Learn more and start blogging now.

Conclusion

I hope you were able to learn about Hashnode's custom CSS feature in this article. Even though this article covers the fundamental possibilities of changing the design of your Hashnode powered blog with CSS, there's so much more you can do.

Feel free to use what you've learned in this article to create fascinating designs for your blog.

If you have any questions, you can leave it in the comments section below, and I’ll be happy to answer every single one.