DEV Community: Franklin Okolie

A Look into Variable Scoping in Programming.

Franklin Okolie — Fri, 19 Feb 2021 16:00:25 +0000

Hello there, welcome to my blog. Building enterprise applications is no small feat for any software engineer, the code can span up to millions of lines and can't be written by a single engineer, many software engineers come together to write this application. While at this, it is important that each engineer on the team should have the ability not just to write code but to write clean, readable, and reusable code. But to be able to write and read clean code, a software engineer should have a strong foundation of programming concepts. One of such concepts are what I am going to be teaching you today called "Scoping". If you are a software engineer willing to grow your coding skills to another level by following the best practices, writing cleaner and reusable code, then this article is for you. I have been following best practices since I became a developer, and I thought I share some of what I have learned so far. Relax and enjoy the read, and do grab a pop-corn

What you learn from this article

What is Scoping?

Scoping in JavaScript

Scoping in Golang

What is Scoping?

A lot of newbie developers and even junior developers still find this concept hard to grasp and they, therefore, skip it and move to the next phase, in turn making them write bad code.

Scoping in programming refers to the position of a variable, which determines the accessibility of variables in the codebase. That is how simple it is. Where you declare your variables and how you access them plays an important role in how you write good code that everyone can read.

There are 2 types of scoping: Global scoping and Block scoping. In this section, I would be explaining scoping in 2 programming languages, Golang and JavaScript.

Global Scoping vs Block Scoping

Global scoping are those variables declared outside a block which can be a Function, If statement, Object methods, Loops block e.t.c and to this effect can be accessed anywhere within the codebase.

Block scoping are those variables declared inside a block, and such blocks include; Function, If statement, Object methods, Loops blocks e.t.c and therefore can only be accessed within that block which it was declared. Do you get it? Hang on, I have some real-life examples to show you.

Scoping in JavaScript

Let use the dog-pet example, while some people buy a pet dog to keep in their home, others choose to buy the pet and let it wander around the neighborhood and comes back when it feels like.
Mr. James buys his dog and lets it wander while Mr. Franklin buys his dog and keep it in his house only. From the illustration above, we can bring it into programming and say Mr. James has declared a global variable and Mr. Franklin has declared a local variable. Mr. James's dog can be seen and touched by everyone in the hood while Mr. Franklin's dog is meant to be touched and seen by only his family. Now let see that in code.

let dog1 = "flames";

function dogName(){
     let dog2 = "fire";
      console.log(dog1)
     console.log(dog2)
}
console.log(dog1)
     console.log(dog2)

Output:

// Code in the function
"flames"
"fire"

// Code outside function
"flames"
Reference error: dog2 is not defined

From the above code, you can see dog1 was accessible everywhere in the code including inside the function but dog2 which was declared in a function block was not accessible outside the function block which is its birthplace and death place too. When I tried to log out dog2, JavaScript simply told me "Hello, There is nothing like dog2 within my view". Does this mean JavaScript is blind or that dog2 doesn't exist? Nope. It simply means we set the rules that dog2 should only be available in the dogName function.

Nevertheless, we can get dog2 to log by calling the dogName function since it was declared globally. See the example below:

let dog1 = "flames";

function dogName(){
     let dog2 = "fire";
      console.log(dog1)
     console.log(dog2)
}
console.log(dog1)
  dogName()

Output:

// Code in the function
"flames"
"fire"

// Code outside function
"flames"
"flames"
"fire"

Scoping in Golang

One of the most elite languages developed by Google and a very useful tool. I picked it up sometime last year and it has been great learning it. Lol...

Just like every other programming language has the same concept just a change of name, Golang has the package level scoping(Global scoping) and Block scoping. The very same way we did it in Javascript, just a change of name and syntax. Still using Mr. James and Mr. Franklin's illustration, let write some code.

package main

import (
    "fmt"
)

var dog1 string = "mike"

func main() {
var dog2 string = "miko"
    fmt.Println(dog1)
   fmt.Println(dog2)
}

func printDog(){
 fmt.Println(dog1)
   fmt.Println(dog2)

}

Output :
(spoiler alert: The code won't run)

undefined: dog2

Go is a statically typed language, unlike JavaScript and other loosely typed languages, Go would never run a code if one line is wrong, but JavaScript let us run it and tell us the error when the job is done, not so with Go, you can try this example on Go playground. But away from that, we know that dog2 was declared in the main function, therefore not accessible outside it, and that line broke the code.

If you are really interested in Go, or the spirit of Go has whispered to you "Learn me", you should check Introduction to Go and Variables and Data types in Go.

With this piece of knowledge, you can now know how best to create variables and use them properly giving your codebase readability and a clean look, and also avoiding you pulling off your hair when JavaScript tells you "undefined". All you just have to do is check the scope of the variable you are using at the moment, you just solved a bug!!.

In the end...

So we have come to the end of this amazing article. Hope you learned something useful. If you did, like, share, comment, just do anything to make it go viral.

I would be posting more articles, so be sure to follow me to get notified when I post them.

If you have any questions concerning Go, Javascript, TailwindCSS, Open-source, or this article? You can reach me on Twitter. Till next time, see ya. Thank you.

Responsive design with TailwindCSS

Franklin Okolie — Mon, 18 Jan 2021 12:46:44 +0000

Hello there, welcome to my blog. As a developer writing frontend codes to bring designs to life and in turn making amazing websites and applications that user enjoys, I have always hit a roadblock every time that makes me grumble all the time. Can you take a guess? Responsive design!!. As front-end developers, we are burdened with the responsibility of making a website as responsive as it can be so it is not only limited to a few users.

The truth be told I always grumble when writing media queries, a CSS function for making a responsive site, I don't know about you but for me, there is always a screen that my website would look bad in, which makes me spend hours upon hours trying to fix it. All this happened until I met TailwindCSS, the love of my life. Many TailwindCSS developers have testified the ease of writing a frontend application that is responsive to every screen without ever leaving your HTML file or even writing any Media queries, I am one of them.

In this article, you are going to learn how to use TailwindCSS utility classes to make a responsive frontend application without writing media queries. Are you ready? Grab popcorn.

If this is your first time hearing about TailwindCSS, do well to read this article first.

What is responsive design?

Responsive Web design is the approach that suggests that the design and development of an application should respond to the user’s behavior and environment based on screen size, platform, and orientation.

Almost every company these days wants a mobile version of their website. It’s practically important after all: one design for the BlackBerry, another for the iPhone, the iPad, netbook, Kindle — and all screen resolutions must be compatible, too. In the next five years, we’ll likely need to design for a number of additional inventions. When will the madness stop? It won’t, of course. Software engineers just have to adapt to this but that doesn't mean we are not going to create tools that can help us adapt to the speed of the world, and one of those tools is TailwindCSS.

Responsive design with TailwindCSS.

According to the Tailwind documentation.....

Every utility class in Tailwind can be applied conditionally at different breakpoints, which makes it a piece of cake to build complex responsive interfaces without ever leaving your HTML.

There are five breakpoints by default, inspired by common device resolutions:

sm -- 640px minimum-width.
md -- 768px minimum-width.
lg -- 1024px minimum-width.
xl -- 1280px minimum-width.
2xl-- 1536px minimum-width.

To add a utility class for styling your app but only have it take effect at a certain breakpoint, all you need to do is prefix the utility with the breakpoint name, followed by the : character:

<img src="example.png" class= "w-24 md:w-34 lg:w-full" alt="" >

What the above means is: when the screen hits 768px(md) the image should resize to w-34 and when it hits 1024px(lg) the image should be 100% in width which is w-full. That the magic of TailwindCSS, this has saved us from writing:

@media (min-width: 768px) { .....}
@media (min-width: 1024px) { ... }

Can you see how sweet TailwindCSS is?. Further below this article, we would see a real-life example of this responsive utility class in action.

Mobile First

90% of users that visit a website or web application uses their mobile phones. I can sit at home and use my phone to order food from uber eats, I don't really need to use a Laptop, while 5% comes from users with tablet devices. This begs the question, "Which screen do I design for first?".

In frontend development, it is now becoming a culture and best practice to do mobile-first development then larger screens such as desktop and laptop comes last. Starting mobile-first design with vanilla CSS is actually tough. But here with TailwindCSS, it is a piece of cake. Trust me.

By default, Tailwind uses a mobile-first breakpoint system, similar to what you might be used to in other frameworks like Bootstrap.

What this means is those unprefixed utilities (like w-24) take effect on all screen sizes, while prefixed utilities (likemd: w-34) only take effect at the specified breakpoint and above.

Writing TailwindCSS without specifying the screen breakpoints would apply from the smallest screens to the largest screens. So we can start adding responsiveness by specifying which screen breakpoint should a class have. Below we are going to build a photo gallery containing 4 dogs photos which I would grab from Unsplash, and I would make use of the Tailwind playground to write the code. So let dive in, remember we are doing mobile-first

<section>
<div>
<img class="w-4/5 my-2 mx-auto " src="Dog1.png" alt="">

<img  class="w-4/5 my-2 mx-auto  src="Dog2.png" alt="">

<img  class="w-4/5  my-2 mx-auto  " src="Dog3.png" alt="">

<img  class="w-4/5  my-2 mx-auto " src="Dog4.png" alt="">


</div>


</section>

Note: Links to images were removed to make the markup readable. Here is the link to the project

Here I created a section that would serve as a body tag for us, then created a div that would serve as a container to hold our dog pictures. The images have a width of 4/5 which is equal to 80%, margin-top and bottom of 2( my-2), and a margin-auto for left and right(mx-auto) to center the pictures on the screen. That all for that. This styles would apply to all screens as long as we don't specify a breakpoint, in this case, I want the dogs' pictures to stack on top of each other on mobile but form a grid on larger screens.

Output on mobile:

Just as we want it. But to make it grid-like on larger screens like tablets, desktops, or laptops we have to add a breakpoint, and thanks to the TailwindCSS utility class, we don't need to write any media queries. Here we go:

<section>

<div class="md:grid grid-cols-2 gap-2">
<img class="w-4/5 my-2 mx-auto md:w-full" src="Dog1.png" alt="">

<img  class="w-4/5 my-2 mx-auto md:w-full"  src="Dog2.png" alt="">

<img  class="w-4/5  my-2 mx-auto  md:w-full" src="Dog3.png" alt="">

<img  class="w-4/5  my-2 mx-auto md:w-full" src="Dog4.png" alt="">


</div>

</section>

Here we just added some styles that would apply to a specific breakpoint md which is 768px and above. It is just like saying "when the screen hits 768px and above, apply this style". Simple!

From the above, I made the images 100% width when the screen becomes 768px md:w-full, and for the container div wrapping all the pictures, I made it a grid container, using CSS grid which is available in TailwindCSS, when the screen becomes larger, I want a 2-grid formation, making the pictures 2 on a row and giving it a grid-gap of 2. Easy peasy, No media queries. Such a relief.

Output on a laptop:

Can you believe what we just did? No CSS!!. TailwindCSS is really amazing.

Another project I made with TailwindCSS is Developers fact card and an open-source project. Used TailwindCSS 100% from responsiveness to the grid system. Check it out, and make a PR too!.

With this knowledge in your hands, you can now effectively design your frontend application using TaiwindCSS responsive utilities with the 5 breakpoints without ever worrying about media queries.

In the end...

So we have come to the end of this amazing article. Hope you learned something useful. If you did, like, share, comment, just do anything to make it go viral.

I would be posting more articles, so be sure to follow me to get notified when I post them.

If you have any questions concerning Go, Javascript, TailwindCSS, Open-source, or this article? You can reach me on Twitter. Till next time, see ya. Thank you.

An immersive introductory guide to Open-source

Franklin Okolie — Sat, 16 Jan 2021 13:06:23 +0000

Introduction.

Hello there, welcome to my blog. Do you know I can close my eyes and list 10 great software and apps that you use every day that are open-sourced and you can add a feature to it if you feel the need to? That quite a long question, Lol. But do you know the source code of VLC media player is free and available for the public? which means you can actually download the source code, modify it, add new features. Isn't that amazing?. That is the power of Open-source, and in this article, you and I are going to learn what this "open-source" means and how to get started with it. Are you ready? Alright! make sure you grab some popcorn.

Another great example of Open-source software is Andriod, the software that runs on mobile phones, if you aren't using an iPhone, you are definitely using android.

This article is aimed to cover :

What is Open-source software(OSS)?
Why Open-source is important?
Why should you contribute to open-source software?
How to contribute to Open-source software?
Making your first contribution. ( This would be fun, trust me)

What is Open-source software(OSS)?

Open-source software is a type of software in which the source code is publicly available and gives users the license and right to freely use it, download the source code, modify, distribute it, and also contribute to it.

Open-source is free not because it is free of charge but free that it gives anyone the freedom to do what they want with the software and of course won't face any legal issues. One awesome example is Linux, created by Linus Torvalds in 1991 is an Open-source kernel operating system for desktop, servers, embedded systems, AI(Artificial Intelligence) e.t.c. Many Fortune 500 companies use this software for their day-to-day activities and have modified, and contributed to this Open-source software. Do you need more examples?

Google is a big-time fan of Open-source software, being the maintainers of Andriod have some other Open-source software they maintain and make it freely available to the public, the softwares can be found here. Maybe after this article, you can go back and check them out. Google uses a desktop environment in the company called Goobuntu, which is an operating system built upon Linux.

Why Open-source is important?

I really don't think that without Open-source software life would be enjoyable. From VLC for playing music and videos to Andriod that powers your phone and even your Facebook app that runs on Open-source server software called Apache.

The importance of Open-source software(OSS) can not be overemphasized as many companies and lives depend on it. Let us see some examples here:

If you are a React developer, how would you feel each time you want to create a react app, you are asked to pay? - I know that
the React library has upgraded since it was created and thanks to all the JavaScript engineers all over the world who contributed to this software, React is getting better every day.
Aside from the creator of the python programming language Guido van Rossum, python developers all over the world have contributed to this language which makes the language get better every day. Do you honestly think as sweet as python feels, that only one person was able to make it that powerful? Of course not, that was the effort of thousands of developers out there. The same thing applies to languages and framework such as PHP, JavaScript, Laravel, Go, TailwindCSS e.t.c

When software is open-sourced, it invites collaboration from different expert around the world which results in :

Finding bugs and resolving them.
Collaboration as people bring their ideas to make the software better.
More features.
Love and unity among developers who contribute to this software. and many more.

So you can see why OSS is important. Go and check all the software that is open sourced and see how amazing they are, but note that it is not the effort of a single person but thousands of people coming together.

Two heads are better than one.

Why should you contribute to open-source software?

Yes, why should you? Can you take a minute and close your eyes, now imagine that your favorite app and imagine you can add that feature you think that app needs. Now that one of the many reasons you should contribute to open-source. Aside from that let's look at some of the reasons:

Collaboration - By contributing to an OSS you get to meet different people around the world, learn from them, and also learn how to collaborate even though you are miles away from them. Through OSS many have made life partnerships, friendships that lasted for decades and some even met their spouse.
Improvement - Be you a developer, designer, or writer contributing to OSS, you are sure to improve your skills as you learn new ways of writing code, designing, and also writing. Take for example you are contributing to Andriod as a developer, the codes there are standard and top-notch and before your contribution can be accepted it must follow that style of quality. See you get to learn as you contribute.
Job opportunities - Yes, as a contributor you can get remote jobs as people from all over the world are seeing your code, contribution, and effort. I know of Henry Yu, who got to work for Babel after he has contributed to the software many times others include Samson Goody, Prosper Otemuyiwa and many others. That may be your own case too.

Open-source is the new sauce.

How to contribute to Open-source software?

So I guess you are ready now and you must be asking "Okay, how". We are going to discuss that now.

One of the misconception beginners in Open-source are fed with, is that contributions to an Open-source software must be code and code alone, but am here to tell you that is not true. Even as a writer you can contribute, here are the various ways you can contribute:

Documentation- This includes writing guides, translations, tutorials e.t.c for the OSS on how it is used, installed, or how someone can contribute. Okay let me use myself as an example, I am an active contributor to the TailwindCSS framework, aside from codes which I do contribute, I have written tutorials on it which include:

And also an active contributor to Golang, I have also written tutorials and articles, which you can find here on this blog. All these are aimed at contributing to the OSS.

Planning and organizing events and communities - You can also plan and host events and build communities to promote the usage of open source software and get more people to contribute. Some of those events and communities include forLoop Africa, OSCA, Gnome Africa e.t.c
Designing - As a designer, you can contribute by proposing a new design to the software or adding new colors to the old one. There are many designers who are in the Open-source, if you are a designer reading this, yes there is so much room for you to join. We are waiting for you.
Onboarding and helping new members - This is also a way, and again I will use myself as an example, am sure after reading this article you will be ready to make your own contribution, and yes I have onboarded you by writing this article for you, another one is my contributions to Go and TailwindCSS, through my articles, many people have started making use of it, and many ask me question concerning it. So can you see what onboarding means? You too can contribute in this way.
Code reviews and mentoring - You can also contribute by reviewing the codebase by checking for bugs, quality of the code, errors, and checking if the best code practices are being followed.

Many beginners make the mistake of jumping into the large codebase and start trying to understand it due to the misconception that they have been fed with, that contributions should be code alone which in turn leads to frustration. Even non-developers are scared to try due to this same misconception. But I think this article has highlighted some of the ways anybody can contribute without even knowing how to write code. So start small, but most importantly START!.

Making your first contribution.

Github as most of us know is an online place where we store our OSS codes, there is also a paid option for those who don't wish to make their code open-source. If you are ready to get started and make your first contribution or should I say pull request as the OSS community calls it, I have one beginner-friendly project you will like.

It is called Developers Fact Card, which means a website that contains facts, motivational quotes that can help a person in his/her career as a developer, writer, or designer in a card-like form. Do you have a motivational quote or fact about life that you need the world and the next generation to know? You can make a contribution to the project. The documentations are very simple and easy to understand, you don't need to be a super-coder to contribute as the project is geared towards beginners. Below are the details:

Github repo: Developers-fact-card
Live website: Devfact card

The maintainers are super friendly and you ask them for help if you get stuck along the way, everything you need to get started is explained in the documentation of the project. Get on board and make your contributions now!

Conclusion

We have reached the end of this amazing article, did you finish your popcorn? or you didn't get one at all? Anyways, if you find this article helpful, like, comment and share, just do anything to make it get into the hands of many other beginners interested in Open-source.

I would be posting more articles, so be sure to follow me to get notified when I post them.

If you have any questions concerning Go, Javascript, TailwindCSS, Open-source, or this article? You can reach me on Twitter. Till next time, see ya. Thank you.

5 proven ways to increase your productivity as a Developer

Franklin Okolie — Thu, 14 Jan 2021 13:58:21 +0000

Introduction

Hello there, welcome back to my blog. Every developer go through burnout and stress, the worst and heartbreaking of all of them is not being productive, you may be shipping a product or building something as small as a calculator, but being productive and been able to finish that task not just on time but also very well gives some sense of satisfaction. Most developers often complain of not being productive while some complain about how their productivity drops as the day goes by. In this article, we are going to learn 5 ways we can improve our productivity as a Developer.

1. Focus on one thing at a time

I mean it when I say it, most developers and human, in general, thinks being able to multitask and do million of things at the same time is what makes you productive. That is a big lie.

What is the one thing you can do now, that by doing it every other thing will become easier or unnecessary? - Gray .W Keller author of The One thing

By simply picking a task for a day and finishing it to the very end before moving to another is a proven way of being very productive. The same productivity is what the 80/20 rules talk about, what is that 20% task you can take that would produce 80% result, you just have to find it and focus on it for the rest of the day, weeks, or month as the case may be, then you can move to another task.

Bit by bit, the bucket gets filled - Todd McLean

2. Break your task

Just like in programming, this applies to also our work. Break your task into a smaller unit and start small. If your task is to build a full video player application, you can start breaking it down:

Day1 - Brainstorm on the process.
Day2 - Make the HTML markup. e.t.c

With this, you are able to keep track of your progress and become productive by achieving each task daily. Bombarding yourself with the whole process in one day can lead to mental stress, burnout, and fatigue which in turn can lead to depression when you are unable to meet this heavy task. So break it down!

3. Block distracting apps/websites

According to research carried out by RescueTime, the average digital worker can’t go more than 6 minutes without checking their email or instant messaging. The digital nature of our work and social lives leaves us constantly checking for notifications and this constant distraction hampers our ability to focus on tasks for even short periods of time.

This really has to change. To be very productive, developers need to minimize and control the amount of time they spend on other apps and websites.

There are a number of website and app blocker tools on the market and this is one of the key features in Serene, too. You create a list of apps and websites (you can block individual pages, too), which will automatically be blocked during work sessions. You can even prevent notifications from coming through during work hours and they’ll automatically come in once the session has finished.

4. Choose your tools right

As software engineers, we are bombarded daily with different tools from different angles, Javascript alone can boast of 10 frameworks for frontend development. Can you imagine? your job as a developer who wants productivity is to pick one of the many tools available that you are most comfortable with and use it, to avoid moving from one framework to another. The same applies to programming languages. I have heard about Bootstrap, Bulma, Materialize e.t.c but I choose to go for TailwindCSS, the one I am most comfortable with.

It is essential to have good tools, but it is also essential that the tools should be used in the right way. - Wallace .D. Wattles

A good tool improves the way you work. A great tool improves the way you think. - Jeff Duntemann

5. Create a dedicated workspace.

This one is crucial if you work from home or remotely. Don’t just sit on the couch or at the dinner table; create a dedicated workspace where you can go to work and then leave it once you’re done.

This also includes using the right hardware, for example, you can't learn and train a Machine learning model on a computer with an Intel Atom processor. Not that Intel Atom is a bad processor but it is not the right hardware for machine learning. So pick
the hardware that best suits your work and you are good to go.

Conclusion

These are tested ways and I have used them in my work and I noticed some improvement from my end so I decided to share.

If you find this article useful, you can like, comment and share.
I would be posting more articles, so be sure to follow to get notified when I post them.

If you have any questions concerning Go, Javascript, TailwindCSS, Open-source, or this article? You can reach me on Twitter. Till next time, see ya. Thank you.

Getting Started with TailwindCSS - An Overview and Walkthrough Tutorial

Franklin Okolie — Thu, 14 Jan 2021 12:37:21 +0000

Introduction

Hello there, Welcome back to this blog, today we are going to be looking at how we can get started with TailwindCSS, an open-source CSS framework.

Every software engineer is always looking for a tool that can perform the 80/20 rule, that is 20% work and 80% output and this does not exclude programming languages.

CSS has been perceived to be hard to master and therefore many open-source tools have sprung up such as Bootstrap, Bulma, and the rest, all aimed at minimizing the time and effort it takes to write CSS.
In this article, we would be looking at TailwindCSS another amazing CSS framework aimed at bringing that 80/20 to reality.

Presiquites

This tutorial is aimed at beginners wanting to get started in a CSS framework and must have the knowledge of the following:

Basic CSS.
Basic HTML.
Basic command-line knowledge ## What is TailwindCSS?

TailwindCSS is a utility-first CSS framework packed with classes like flex, pt-4, text-center, and rotate-90 that can be composed to build any design, directly in your markup.

Utility classes help you work within the constraints of a system instead of littering your stylesheets with arbitrary values. They make it easy to be consistent with color choices, spacing, typography, shadows, and everything else that makes up a well-engineered design system.

Unlike Bootstrap where classes have been declared for you to use giving zero control over your CSS, making everyone who uses Bootstrap website look alike. But with TailwindCSS, you have only be provided with the utility classes and it is left to you to know what to use them for giving control over your CSS. TailwindCSS classes are easily understood by anyone even a beginner in CSS. Example: bg-orange-100, this simply means background: orange; the 100 stands for the density you need on the color, and with TailwindCSS you are given from 100-900 for you to choose from.

Why TailwindCSS?

This may be a question from a total beginner or an experienced CSS framework user. Well, I asked that same question myself. Tailwind gives the freedom to make customization, use utility classes and it is very low level and basic for anyone wishing to start using the CSS framework. A total beginner in CSS can pick this up and get familiar with it in an hour or 2. Some reasons why you should choose TailwindCSS:

Easy to understand CSS class name.
Memorable class name.
Beginner friendly.
No rules on how you use class names.
Totally customizable - You don't need SASS or LESS to overwrite styles.
Utility-first classes. With Tailwind you can build a fully functional website frontend without ever leaving your HTML.

TailwindCSS classes and Output

Below is a simple example of how Tailwind utility classes work

<div class=" bg-indigo-500 text-white px-4 py-4">
<h1> Hello </h1>
</div>

Output:

Let's deduce the above, First, we created a div giving it a Tailwind class of:

bg-indigo-500: A background color of indigo with a density of 500.
text-white: All text in this div should be white in color.
px-4: Give the div padding 4 on the x-axis which is left and right.
py-4: Give the div padding 4 on the y-axis which is top and bottom. From the output above we can tell that the classes worked!.

Basic Utility classes and their meaning.

We would go over some utility classes in this section and their meaning but bear in mind, this is simple and can be taken as you are writing your own CSS only that you are doing it in your HTML file. Let dive in.

bg-red-100: A background of red with a density of 100, you can choose from 100-900.
mt, mb, mr, ml: Simply means margin-top, margin-bottom, margin-right, margin-left. You can therefore use mx and my to get the x-axis(left and right) and the y-axis(top and bottom).
pt, pb, pr, pl: Simply means padding-top, padding-bottom, padding-right, padding-left. You can also use px and py to get the x-axis(left and right) and the y-axis(top and bottom).
text-orange-200: A text with the color of orange with a density of 200.
b-gradient-to-r from-pink-200 to-red-500: This gradient in CSS, coming from the left to right having the color pink at the left then transforming to red at the right.
text-center- This is the same as writing text-align: center;.
font-bold - The same as writing font-weight: bold;.

With TailwindCSS classes as you can see up there, they are very and very basic. It is also similar to CSS properties names. You can always look at the documentation to get the name of any class you feel your CSS needs.

Another Tailwind example:

<div class="bg-gradient-to-r from-yellow-400 via-red-500 to-pink-500 p-10 text-white font-bold text-lg text-center">
Hello there! My name is Franklin and we are learning TailwindCSS </div>

Output:

After this example, I think I laughed hard trying to recollect the number of lines I would have written in CSS, but I just spun this of with Tailwind, without leaving my HTML.

Installation guide.

Now that we have seen how amazing Tailwind can be, let look at how we can use it in our project by installing it in our local machine. According to the documentation, there are two ways of installing TailwindCSS.

Installation via npm
Using it via CDN - This comes with a lot of limitations.

In this section, we shall be setting up our environment to be able to use Tailwind, follow along, let explore this sweet framework.

First things first, Open up your preferred Code editor, I use Visual studio code. Make sure you are connected to the internet, as npm would need the internet to install Tailwind. Done? Good.

Now name a folder you would love to use to practice this installation, any name at all. Now open it in your code editor.

Let create a package.json file to manage our dependencies which in this case is our Tailwind we want to install.

Open your terminal in your code editor with your folder opened.

Type:
npm init -y

Done? Good. We are getting there.

We are going to learn how to structure our folders. Create a folder named "src", and in the folder create a CSS file. This would be used to import our tailwind base, components, and utilities styles.

/* in your src/style.css  paste the tailwind directives */
@tailwind base;
@tailwind components;
@tailwind utilities;

We are getting there. And you are doing fine, am proud of you.

Second step, let create a folder name it anything but am calling mine "public", in this folder create the HTML file we would write the markup in and the CSS file where we shall build our src file into. Your structure should like this: . We are ready to install Tailwind, our folder is set!

Now open the terminal and type:

npm install tailwindcss@latest autoprefixer@latest

Since Tailwind does not automatically add vendor prefixes to the CSS it generates, we recommend installing autoprefixer to handle this for you as we've shown in the snippet above.

Now to check if Tailwind is truly installed. Check your package.json file and you see something like this:

"keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "autoprefixer": "^10.1.0",
    "tailwindcss": "^2.0.2"
  }
}

Indicating that the dependencies and their versions. Did it work? Good. You are killing it. And a file named package.lock.json and the node_modules folder, would be present. Like this:

Last step: Now let build Tailwind and export the classes to our style sheet ready for us to use. Open your package.json locate the scripts key and let edit to this:

"scripts": {
    "build:css": "tailwind build src/style.css -o public/style.css"
  }

From the above, we are asking tailwind to "build or export" it styles ( base, components, utilities) stored in the src/style.cssand export to our own style sheet in the public/style.css

Now open your terminal and run:

npm run build:css. Now check your public/style.css to confirm. Cheers!!! We just installed TailwindCSS. Horray.

Don't forget to link to public/stylesheet to your HTML file.

<link rel="stylesheet" href="public/stylesheet">

This installation may look foreign to you and that is okay, do it 3 more times and it would stick, in this article, I talked about consistency as a developer, doing it consistently would make it stick, and you can always go back up and read through again in case you get stuck. Congratulations on choosing Tailwind.

Resources.

Conclusion

Thanks for reading, in the next article we would build something with Tailwind, so follow me to be notified when it is posted.

Do you have any questions concerning Go, Javascript, Tailwind, Open-source? You can reach me on Twitter here. Till next time, see ya. Thank you

A gentle guide to customization in TailwindCSS

Franklin Okolie — Thu, 14 Jan 2021 12:35:34 +0000

Introduction.

Hello there, welcome back to my blog. In the last article, we learned about TailwindCSS and made some example code with it. I also said we would make a project with it, but I am still brainstorming on that, I need something small and simple, so I would continue brainstorming on that. But here in this article, we are going to learn how to customize TailwindCSS to our own color, font-family e.t.c.

If you are just hearing of TailwindCSS for the first time, you should read this for an introduction.

Why customize TailwindCSS?

Before I answer that question, I would like us to rewind back to the last article, I talked extensively about how Tailwind is 100% customizable, you don't need LESS or SASS to over-write styles, and you don't need to even write a single thing in CSS. Unbelievable right? Yeah, I know. That one of the million reasons I love this framework. Let me surprise you again, in Tailwind everything is customizable, from margin measurement to colors down to the border colors. Incredible!!!

So as a developer learning Tailwind for the first time, you may not see the reason to add your own customization since Tailwind has loads of color and fonts e.t.c to choose from, but a developer using Tailwind for company work or freelancing would need to customize the colors, font as the UI design of the company looks like or how the clients want it. Or maybe you are still sitting on the fence and trying to know if Tailwind is worth it, maybe you are just a savvy techy trying to play around with this tool to see it back and front, well here we are going to learn how to customize Tailwind to our own choice.

Before you scroll down, I made an amazing website, cloning Tailwind UI's official site, made it with TailwindCSS with my own customizations. Take a look at it here and tell me what you think.

I think you looked at the website above, it looks cool right?. Well, I did that without leaving my HTML, plus adding my own customizations without headache. Hooray!. Now let learn how you can make your own customizations. Ready? Let dive in.

Customizing TailwindCSS.

Like I previously said from the beginning, Tailwind made it possible to customize everything and anything, but in this article, we would be looking at how to customize:

Colors.
Font family.
Font weight.

I assure after learning these 3 up there and the whole concepts, you can pretty much customize anything you want in Tailwind.

So starting out from where we stopped in the last article, I presume we still have that folder we used for installing Tailwind, if you don't know how that is done, please read the installation guide in this article.

Now let open our terminal in our preferred editor and install the Tailwind configuration file - a file that let's do the customization. Type:

npx tailwindcss init

Now you should see a file named tailwind.config.js.

Done? Good. Let the customization begin!!!.

Customizing Font family

You probably need to make use of your own fonts rather than the default ones given by Tailwind, and that's okay. Let see how we can do that. We probably know of CDNs like Google fonts and Font awesome that provide millions of fonts for free. In this section, we would be using Google fonts, head over to the google font website, type the fonts you want( I will be using Roboto), click on it, select the style you want( I will be picking regular 400 and medium 500 and copy the link for your HTML page and paste it in your HTML page:

Now we open our tailwind.config.js and configure it.

module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
fontFamily:{
      "rob": ['Roboto', 'sans-serif']
    },
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

From the above, let deduce it. We added an object with the name fontFamily if you are familiar with Javascript you should know what that means, but if you are not, don't freak out, just follow the naming convention and the concepts on how it is done and you are okay, do this for 3 times more and you are a pro in customization. Now our objects have a key and a value. The key is the name we want the font to bear, so we can reference it in our HTML file, make sure to write it short, so you can do less typing and more productive work. The value is the name of the fonts and its fallback( incase the fonts is not available on Google again, which can't happen though), which in this case is Roboto and fallback sans-serif as seen on Google here:

Note: Follow the concepts up there, you don't need to write "font-family " again, the object name already specify that. Just pick the value and put them in a square bracket with quotes on them, and you are fine.

Now, if that is the only thing you wish to customize, go ahead and run :
npm run build:css

So the custom font can be built into your CSS file style.css through Tailwind. Test it now:

<h1 class="font-rob" > Hello there, I am Roboto" </h1>

Worked? Perfect. It didn't? No fears, just follow the installation guide here and continue to this blog, we are building from the previous installation. You can add as many font-family as you want and then reference them in your CSS styles.

Customizing Font weight

Here we go, remember I asked you to choose your style, either regular 400 or medium 500, which are what I chose, this are what would determine our font-weight, from the CDN link we can see that the weight we chose were included, so we just have to reference it. But if we like we may leave it and let Tailwind decide the font-weight for us. No? Ohhh... I see you really love doing your own thing right. Okay, let Jump in.

module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
fontFamily:{
      "rob": ['Roboto', 'sans-serif']
    },
fontWeight:{
     "bold": "400",
    "extra-bold": "500"
},
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

That is it, easy peasy. Just specify it with the name of the font-weight and its value. Now go use it:

<h1 class="font-rob font-bold" > Hello there, I am Roboto" </h1>

If you are done customizing, run:

npm run build:css

This would add this font-weight configuration to your style.css through Tailwind.

*Customizing Colors *

Now let move to the last one for today's article. Maybe your client gave you some colors to add to the project which is really not in Tailwind colors by default, or the UI designer is screaming that he wants the exact color on the design to be replicated on the projects, relax... Tailwind got ya.

module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
fontFamily:{
      "rob": ['Roboto', 'sans-serif']
    },
fontWeight:{
     "bold": "400",
    "extra-bold": "500"
},
colors:{
      "darkblue": "#161E2E",
      "ash": "#D1D5DB",
      "litash":"#374151",
      "white": "#ffff"
},
  extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

Yes, we did it, we added our own colors. Hooray!!!. Now that is the last customization for this tutorial, so let run it together.

npm run build:css

Now dust your palms, we are done here. Sweet right? I know. Any other customization you feel like making maybe changing the margin measurement or background image. You can come back to this blog and read again and use Tailwind Docs for the specific thing you want to change.

<h1 class="font-rob font-bold bg-ash text-darkblue" > Hello there, I am Roboto" </h1>

Conclusion.

Be aware that any value you customize in Tailwind, is what you are going to use throughout your project, you can't use the default value again. Example: Like the above where we customize colors, we can't use any inbuilt colors from Tailwind again, same goes for anything other value we customize. Maybe that Tailwind punishment for abandoning her colors she took time to create for you. Lol... Anyways, make sure you specify every color you need to use well because even the default white won't work, or maybe you should look through Tailwind colors very well to be sure your preferred color is not there.

Remember, we are going to build a little project with Tailwind here on this blog. So follow me to know when I would publish it. Once again look at this beautiful work here made with TailwindCSS and of course, I added my customization. You can add as many customizations to a specific style e.g colors, font-family e.t.c

If you have any questions concerning Go, Javascript, TailwindCSS, Open-source, or this article? You can reach me on Twitter here. Till next time, see ya. Thank you

Creating customized Utility and Components classes in TailwindCSS

Franklin Okolie — Thu, 14 Jan 2021 12:33:13 +0000

Introduction.

Hello there, welcome back to my blog; in the last article here, we talked about customization in TailwindCSS. One of the pros of TailwindCSS is that everything is customizable, and there are no rules on how classes in TailwindCSS are used and in this article, we would discuss how we can customize classes in TailwindCSS. Unlike Bootstrap, which is a component-class framework, TailwindCSS is a utility-first framework. In Bootstrap, for example, a card components class have been styled by default, all you need to do is add the class, and it generates a card design for you, but this comes with a problem of making all bootstrap website look the same since they all use the same component class. In this article, we will look at how we can create our own customized utility classes and component class in TailwindCSS.

Component class vs. Utility class.

In this section, we are going to be discussing the difference between component classes and utility classes. As we all know, TailwindCSS is a utility-first framework, and you might be forced to ask me, what is utility? Well, that is what we are going to learn in this section. Utility classes mean "one class, one style." In TailwindCSS we are given as many utility classes as possible so we can combine them and make the desired design we need in our Front-end design. Example.

<div class="p-4 text-orange-200 bg-indigo-200">  Hello there 
            </div>

Output:

The above example is an example of the utility classes we are talking about; one class makes one style in our Frontend design.
A good example of a component class is that of Bootstrap, which I will use in this example.

<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

Output:

As we see above, the classes there are components class, which mean one class for multiple styles, checking the CSS class for card there must be nothing less than 7 CSS styles to be able to form such a style.

Creating a component class in TailwindCSS.

There may be many situations where, you will need to create your own component class in TailwindCSS for many reasons best known to you, remember component classes is one class, many styles. Here is some reason why we may need to create our own customized component in TailwindCSS:

Too many classes for one HTML element.
To avoid repeating one class in different HTML elements.
To maintain clean code.
Grouping our classes and styles for neat code.

Example, below are 2 buttons made with TailwindCSS:

<button class="px-4 py-4 text-indigo rounded m-10 bg-pink-300"> Press me </button>
<button class="px-4 py-4 text-indigo rounded m-10 bg-indigo-300"> Press me </button>

Output:

As we can see from the example, they have the same utility classes on them except the background-color, so wouldn't it be nice that we can create a component class to handle this button so we avoid repeating ourselves?. In some enterprise websites, the buttons on the website tend to look alike except maybe the colors as we can see in these cases above. So let make a component class. Kicking off from the last session, assuming we still have our folder we have been using for this series, if not check this article here in the installation guide to see how you can set up your folder structure.

Now let open our src/style.css file and write the following:

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
          .btn{
       @apply px-4 py-4 text-indigo rounded m-10
}
}

Now let explain that, we told TailwindCSS that we want the style to be included in the component's styles, that why we used the @layer components then we created a custom class name .btn that would contain this component, and then we used the @apply to apply the style to be in the components. So now we just have to use .btn as our class and specify the background color and those styles would be made available to us. So let run :

npm run build:css

To build this components in our style sheets. And we can use it:

<button class="btn bg-pink-300"> Press me </button>
<button class="btn bg-indigo-300"> Press me </button>

Output :

Now did you enjoy that? You see that with TailwindCSS we can create as many component class, thereby making a mini Bootstrap, and one of the reasons I love this is that these components are available to only that stylesheet you made it from, meaning in your next project, you may decide not to use component class, remember there are no rules. Hooray!

Creating your own utility class in TailwindCSS.

Although Tailwind provides a pretty comprehensive set of utility classes out of the box, you may run into situations where you need to add a few of your own.

Deciding on the best way to extend a framework can be paralyzing, so here are some best practices to help you add your own utilities in the most idiomatic way possible.
Open the src/style.css

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer utilities {
  .scroll-snap-none {
    scroll-snap-type: none;
  }
  .scroll-snap-x {
    scroll-snap-type: x;
  }
  .scroll-snap-y {
    scroll-snap-type: y;
  }
}

Just like the example of the component, we told TailwindCSS that we need these classes and styles to be added to the utility styles so we can use these classes at the utility level using the @layer.
And that's it, now we can build it by running:

npm run build:css

Now we are done, with this knowledge we have grasped, we can go on to create as many customized Component and Utility classes of your choice.

Conclusion

We have come to the end of the article on creating our own components and utility classes, remember with TailwindCSS there are no limitations with what you can do with it. In the next article we would be making a project with TailwindCSS, so follow me to get notified when I post it.

If you have any questions concerning Go, Javascript, TailwindCSS, Open-source, or this article? You can reach me on Twitter here. Till next time, see ya. Thank you.

Building a testimonial card with TailwindCSS

Franklin Okolie — Thu, 14 Jan 2021 12:30:57 +0000

Introduction

Hello there, welcome back to my blog. The much-awaited project with TailwindCSS is here!! Horray! isn't that great?. In the last 3 articles of TailwindCSS series, we discussed the fundamentals of Tailwind, it pro and cons, we discussed customization in TailwindCSS and we even went as far as making our own customized utility and custom classes in TailwindCSS. In this article you are going to learn:

Mobile-first design.
Mobile responsiveness with TailwindCSS.
The usage of different combination of utility classes

If this is your first time hearing about TailwindCSS, be sure to consume the following article and come back and join us here, we would be waiting for you:

Getting Started with TailwindCSS - An Overview and Walkthrough Tutorial

A gentle guide to customization in TailwindCSS

Creating customized Utility and Components classes in TailwindCSS

In this article, we are going to be building a testimonial card that bears our name, profession, and the amazing testimony you have about TailwindCSS. Here is mine below:

Is that lovely? I built it without writing any single CSS! just me and TailwindCSS, you are going to learn how to build yours, for the purpose of this article, I will rebuilding mine again with my preferred color, but on your end, I want you to twitch yours by adding your own color, a beautiful picture of you, your name and your profession, just as I did mine.

We are going to make use of Tailwind Playground, and of course, you may choose to use an online environment you prefer, you may even use your code editor on your local machine and go through the learning process of installing Tailwind for this practice, as this would enforce what you have learned previously, you can use the installation guide on this article. If you are going to use any other online code editor, you can check out Codepen. If you are using codepen, let me teach you how to add some settings that would allow you to use TailwindCSS.

Open a pen, click on the Settings Tab.
Click on CSS, and scroll down to the Add External Stylesheets/Pens.
Then search for "TailwindCSS". Then click on it and Tailwind is now active in Codepen. Dust your palms.

The Tailwind Playground already has Tailwind embedded, so you don't need any settings for it.

Let build!!!

Now we are set to build, we must know that TailwindCSS is a framework that gives us the opportunity to use a mobile-first
approach to designing anything we want, as that is the method we would use in this project.
First, let create a container section that would contain the whole items in the card.

<section class= "pt-4 bg-white rounded-xl shadow mx-auto my-10 w-4/5">

</section>

So what did we do above?. We gave the container a padding-top of 4, then a background of white, a border-radius using TailwindCSS class rounded-xl which is equal to 0.75rem, added shadow to the card, an mx-auto which means margin on the x-axis(left and right) making it centered on the page, included is also a margin-top of 10 to push it down the page. Then we added a width of w-4/5 which is a Tailwind class for a width equal to 80%. Done? Good.

Now, inside the section we are going to create a blockquote to hold our testimonial statement.

<section class= "pt-4 bg-white rounded-xl shadow mx-auto my-10 w-4/5">
<blockquote class="m-8">
    <p class= "font-semibold"> "I had no design skills prior to using TailwindCSS, but with this amazing tools, I got better at CSS and design in general, it is an amazing tool" </p>
  </blockquote>

</section>

We added a margin of 8 on all sides of our blockquote, and we made our testimonial statement semi-bold with the class font-semi-bold. At this time your card should look like this :

We are doing great!!!. Now let move to the part that contains our name, photo, and profession. We are going to create a div to wrap the image and our name + profession.

<section class= "pt-4 bg-white rounded-xl shadow mx-auto my-10 w-4/5">

<blockquote class="m-8">
    <p class= "font-semibold"> "I had no design skills prior to using TailwindCSS, but with this amazing tools, I got better at CSS and design in general, it is an amazing tool" </p>
  </blockquote>


 <div class= "text-white bg-pink-600 p-8 rounded-b-xl">

    </div>

</section>

The div has a background color of pink with a density of 600, with the text of color white, padding of 8 on all sides, a rounded bottom (border-radius of 0.75rem), you can use any background color of your choice.

Now let add a photo and text which is our name and profession. I am going to be using a picture from Unsplash.

<section class= "pt-4 bg-white rounded-xl shadow mx-auto my-10 w-4/5">

<blockquote class="m-8">
    <p class= "font-semibold"> "I had no design skills prior to using TailwindCSS, but with this amazing tools, I got better at CSS and design in general, it is an amazing tool" </p>
  </blockquote>


 <div class= "text-white bg-pink-600 p-8 rounded-b-xl">

     <img src="https://images.unsplash.com/photo-1591258739299-5b65d5cbb235?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80" alt="" class="w-24 h-24 rounded-full border-4 border-white " >

     <div>
       <p class= "font-bold"> Franklin Okolie</p>
       <p> Software Engineer</p>
     </div>
    </div>

</section>

Our image has a class of w-24 which means a width of 6rem and h-24 for a height of 6rem also. We made it a rounded-full to make it a circle, and a white border around it, I also wrapped my name + profession in a div to make the code neat and readable. Now your card should look like this :

Horray! We can dust our palms and move on, but we need to add some more styles to make it presentable on desktop, the styles above will by default apply for desktop screens even as we used a mobile-first approach. On the section we are going to add the following:

<section class= "pt-4 bg-white rounded-xl shadow mx-auto my-10 w-4/5 md:w-3/5">
</section>

We just added md:w-3/5 which means for medium screens and above, the width of the section should be w-3/5 which is equal to 60% width. On our div holding the image and the text, we want on the medium screen and above the image and our name + profession to stay side by side. So we can add a flexbox style and center it :

<div class= "text-white bg-pink-600 p-8 rounded-b-xl md:flex md:items-center">
</div>

For our Image, let give it a margin-right on the medium screen to push away from the name+ profession:

  <img src="https://images.unsplash.com/photo-1591258739299-5b65d5cbb235?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80" alt="" class="w-24 h-24 rounded-full border-4 border-white md:mr-4">

And we are done!!!. Our card is set and super responsive on all screens from mobile to desktop. Isn't that sweet? we did all of that without writing any single CSS! This should be the number 8 wonder of the world.

Conclusion

I hope you enjoyed this article, I really can't wait to see your testimonial card, can you show me in the comment section?. I have some more to show you.

My Tailwind testimonial card here
More cards of my codepen here

Tell me if they are beautiful. More articles on TailwindCSS and other topics are coming, so follow to get notified when I publish it. If you find this article useful, share, like, and comment.

If you have any questions concerning Go, Javascript, TailwindCSS, Open-source, or this article? You can reach me on Twitter here. Till next time, see ya. Thank you.

Understanding Variables and Data types in Go.

Franklin Okolie — Thu, 31 Dec 2020 12:14:47 +0000

Hello there! So today we would be learning about Go variables and the different data types associated with Go.
Just in case you are just started the Go language, you should read this.

We would be using the Go Playground to learn and practice this example, and you can grab a pop-corn, this would be a long and interesting ride. Ready? Let hop in.

Go is all about types, type is Go and Go is type - Bill Kennedy

What would you learn?

In this article we are going to look at :

How to declare a variable in Go.

Different way to declare variable in Go.

The basic types in Go. And after this article you will get in-depth understanding of types in Go.

Drop by drop the bucket get filled - Todd Mcleaon.

Variables

Let look at the code snippet below:

package main

import (
    "fmt"
)

func main() {
        var name string = "Franklin"
        var number int = 34
    fmt.Println("Hello, playground")
}

The above is what your Go playground should look like, now let analyze what is happening there.

Package main - Go programs are made of packages for ease of programming and efficient compliation. The main package is a package provided by Go that is used with the programs to show that they are excutable. The package main is the entry point of the Go complier to know that the file is ready to be excuted and complied.
import "fmt" - This is a standard libary provided by the Go language for Formatting (I/O functions to print output),by importing the fmt libary package, Go is able to print and format strings, print messages in the console, write files and also format all other data types avaliable in Go.
- func main() - This is the entry point of programs used and run in Go, it does not take any parameter or argument, by default the function run and compile any code in between the {} curly brackets. It is known as the Chief function in Go, it was provided in Go by default.
fmt.Println - Now remember the Formatting package libary we imported eariler in the code above. Now this is it in action, we are calling it and adding a built function avaliable in the libary package called 'Println' and asking it to print the word 'Hello Playground'.

package main

import (
    "fmt"
)

func main() {
        var name string = "Franklin"
        var number int = 34
    fmt.Println(name)
        fmt.Println(number)
}

Output :

"Franklin"
34

var is the keyword used to declare a VARIABLE( name) to a TYPE(string , int) and assign a VALUE( Franklin,34).
Now see Variables as paper box , and the Type as a certain color the papers in box should have, storing values with are the papers.

Variables can also be declared using the short declaration method with works only if the variable is declared within a function block. By doing this, we are asking Go to deduce what Type should the value be using the ' : ' and the ' = ' . Example :

package main

import (
    "fmt"
)

func main() {
        var name := "Franklin"
        var number : = 34
    fmt.Println(name)
        fmt.Println(number)
}

Output :

"Franklin"
34

We also have the Constant method using the ' const ' keyword. This can be declared and used both in the package level and the function level just like the var. Example :

package main

import (
    "fmt"
)
 const name = "Franklin"
func main() {

        const  number = 34
    fmt.Println(name)
        fmt.Println(number)
}

Output :

"Franklin"
34

When using the "const" and the short declaration method, we didn't have to specify the Type, but Go deduced it. That one of the benefits of using them.

Key take away :

VARIABLES are like paper box with papers in it which are VALUES of a certain color which are the TYPE.

When using the "const" and short declaration to declare variables, you need not specify the type.

The "var" and "const" way of declaring variables can be used anywhere in the code, while the short declaration can only be used in a function block between the{} curly braces. That it for variables. Try and play around with it and print different stuffs, your name, age, e.t.c.

### Data Types
Now let talk about Go data types. A data type simply means the different way data are stored across a computer program, this data includes numbers, strings(letters), slices e.t.c. Where and how we store this data is what is called a Data Type.

In Go we have 7 Data types :

Method sets

Boolean types

Numeric types

String types

Array types

Slice types

Struct types

Pointer types

Function types

Interface types

Map types

Channel types

But today we would be looking at the following types:

Boolean types
Numeric types
String types
Slice types
Struct types
Map types We would discuss the rest in the next series. Trying to keep this as short as possible.

Boolean Types

Boolean types are data types used to store values which are either "True" or "False". Example :

package main

import (
    "fmt"
)

func main() {
         var isMarried bool = false
         var loveFood bool = true
    fmt.Println(isMarried)
        fmt.Println(loveFood)
}

Output :

false
true

As we noticed Types are declared after the variable names for Go to understand what Type of value you want the variable to hold and in this case Boolean.

Numeric Types.

Numeric types comes in two kinds, we have the int(interger) which are whole numbers and float64 which are decimal numbers. This two numeric types are used to hold values that are either whole numbers or decimals.
NOTE: There are more kinds of Numeric types but this article is limited to two.

package main

import (
    "fmt"
)

func main() {
        var x int = 19
        var y float64 = 99.7
    fmt.Println("Hello, playground")
}

Output:

19
99.7

Note that putting a float is a variable that has a Type int would throw errors, vice-versa.

String Types.

Strings types are used to hold values that are letters but are called strings in computer science. They are letters. SIMPLE!
Example:

package main

import (
    "fmt"
)

func main() {
       var myName = "DeveloperAspire"
    fmt.Println(myName)
}

Output :

"DeveloperAspire"

Strings are put in between " " symbols or the backtick .

Slice Types.

Slices are types used to group values of the same types. When I want a variable to hold more than one numbers, I would use a slice type to hold the value. When you go to the market to get grocries, you use a bag to put all of them and they all the same.

package main

import (
    "fmt"
)

func main() {
       var names = []string{`Franklin`, `Okolie`, `DeveloperAspire`}
       var num = []int{1, 2, 3, 4}
    fmt.Println(names)
}

Output:

[ `Franklin`, `Okolie`, `DeveloperAspire`]
[1, 2, 3, 4]

From the above code example we noticed that the type came after the '='. That is how the syntax is declared. The ' [ ] ' is telling Go that this is going to be a list and hold it with this ' [ ]', then the Type(int or string), declared after is telling Go the type of values you want your slice to hold, and the ' { }' is used to hold the values.

Quick Tip:
Slice is like a list, it is used to hold the same type of value which are multiple. It is called an Array in languages like JavaScript

### Map types.
Map types are used to store data which have a Key and Value pair, these are used to store values that make reference to each other. They are used to store data of different types. This is like an Object in other languages like JavaScript.
Let make a example:

package main

import (
    "fmt"
)

func main() {
        var x =map[string]int{
                  "Day" : 30,
                   "Night" : 23,
                   }
          var y =map[int]string{
                  30 : "Day",
                  50 : "Night",
                   }

    fmt.Println(x)
        fmt.Println(y)
  }

Output :

map[Day:30 Night:23]
map[30:Day 50:Night]

Now let break it down; from the code snippet above , we can see we used the word "map" to declare the type. Now all those are syntax, how a language is being constructed but we are to understand them and not memorize them. After the map keyword the ' [ ]' is telling Go that the " Key" of the Map type should be what is passed in-bewteen , it may be a int or string. The next declaration after it which is a type int,string, slice e.t.c is telling Go what the Values of the map should be. Lastly the '{ }' just like the slice is the place holder of the value.

var x =  map= type [ ]= key int= value { }=placeholder

Key take away

The map holdes value that consist of a key-value pair, like "Firstname" : "Franklin".

The Key data type is passed inside the [ ].

The value data type is declared after the [ ].

The { } is the place- holder for the values.

Struct types

Struct types are the advanced way of writing Maps but there a different. A struct is a sequence of named elements, called fields, each of which has a name and a type. See it as a Map type that has it key and value already declared and you can use it mulitiple times anywhere in your code. We have the Named struct and the Anonymous struct. This is likened to be a Class in JavaScript.

package main

import (
    "fmt"
)

type person struct {
    firstname string
    lastname  string
    age       int
}

func main() {
    var person1 = person{
        firstname: "Perry",
        lastname:  "Jack",
        age:       24,
    }
    var person2 = person{
        firstname: "Mark",
        lastname:  "Honest",
        age:       36,
    }
    fmt.Println(person1)
        fmt.Println(person2)

}

Output :

{Perry Jack 24}
{Mark Honest 36}

As we can see struct types are ways of writing Map in a more advanced, neat, and re-usable way, where you can make a Map of a certain structure and use it anywhere you need it.

Go is all about types, type is Go and Go is type - Bill Kennedy

Now let analyze it. We started by declaring a type using the 'Type' keyword that has a name called 'person' using the underlying type called 'struct', after that between the { } we gave the key a variable name and assigned them a specific type their value should have. It saved us a lot of strength and time from writing the map twice for 2 people as seen above. We simply declared a variable and assigned it the Named type 'person' , and use the key names while putting our own different value for the different person. The above example of struct is called the Named struct as it has name 'person'.

Example of anonymous struct type :

package main

import (
    "fmt"
)


func main() {
    var person1 = struct {
    firstname string
    lastname  string
    age       int
}person{
        firstname: "Perry",
        lastname:  "Jack",
        age:       24,
    }

    fmt.Println(person1)
}

Output :

{Perry Jack 24}

The anonymous struct does not need a name as it is used right when the variable is declared. This is used in most cases when a struct is unique in a code. But why not use map instead for clearer code.
The use of Struct proves the 3 chief purpose of Go which are effiecient compilation, effiecient execution and ease of programming. Yes... ease of programming.

Key take away :

Named Struct are declared by using the 'type' keyword and giving it a name with the underlying type 'struct'.

The Key variables are already named while the values Type have been given.

Use the struct by using it name in a variable and passing the preferred value, the Key names CAN NOT be changed.

Anonymous struct are struct without name.

Go is all about types, type is Go and Go is type - Bill Kennedy.

You must have seen this quote all over this article right?. That quote was made by Bill Kennedy one of the Pro of Go. It means that Go is all about type and how to use them efficeintly of concurreny, speed and memory management, once you understand TYPES in Go, you can use it to make program in Go.

That was a long article right? But that not all we still have more types to discuss but it would be on a different article on this series ' Go for Us '. Watch out for the next article for the other Types in Go. See you in the next series.

Introduction to Google Go - Beginner Guide.

Franklin Okolie — Wed, 30 Dec 2020 10:50:10 +0000

This article is a beginner guide introduction to Golang and also for those with experience with other languages but wish to learn the Go programming language.

In this article we shall cover some basic introduction to the Google Go , by the end of this article you should know:

What is Go?
Who are creators of Go?
Why Go?
Purpose of Go.
What is Go used for?
Companies using Go.
Writing your first 'Hello World' in Go (This Would be fun).
Resources to learn Go.

What is Go?

Go is a procedural language. It was developed in 2007 by Rob Pike, Robert Griesemer, Ken Thomspon at Google but launched in 2009 as an open-source programming language. Programs are assembled by using packages, for efficient management of dependencies. This language also supports environment adopting patterns alike to dynamic languages.

Go is a statically typed language. A statically typed language is a language that perform type checking at compile time. This means that scripts written in dynamically-typed languages (like JavaScript) can compile even if they contain errors that will prevent the script from running properly (if at all). If a script written in a statically-typed language (such as Golang) contains errors, it will fail to compile until the errors have been fixed.
Second, statically-typed languages require you to declare the data types of your variables before you use them, while dynamically-typed languages do not. See the examples below

// JavaScript
let name = 'Franklin' ;

//Go
var name string = 'Franklin'

Go is also called Golang due to it website (https://golang.org/) and not go.org which was not avaliable to Google.

Who are the Creators of Go.

I would really love us to look at the genius behind this amazing language. These are the people who made the Go langauge, ideally I love to call them the 'Pioneers of Go'. They include :

Rob Pike - He is also responsible for making the Unix used by Apple for their operating system and also the UTF-8 engine used by all browsers today
Robert Griesemer - Studied under the creator of Pascal , Maybe this is where he got his amazing skills of creating amazing stuffs.
Ken Thompson - solely responsible for designing and implementing the original Unix operating system
- invented the B programming language, the direct predecessor to the C programming language.
- helped invent the C programming language

Wow!!! Great people indeed , from the above analogy of these people who came together to make this amazing language in Google Labs, it is expected to be one Hell of a language and very efficient for anyone to use and seeing it is being backed by Google is a great encouragement for anyone looking forward to learn this language.

Why Go?

You might ask 'Ok, why do i learn Go?, there are bunch of other languages outhere?'. Yes , you are right. But hang on.

Go was created in 2007 at Google by Rob Pike, Robert Griesemer, and Ken Thompson when Google hit a problem in it internal systems. YouTube serves more than 4 billion hours of video each month. About 72 hours of video are uploaded to the service every minute. While YouTube stores all its videos directly on a file system, it uses MySQL to store all the metadata needed to serve each video, such as user preferences, advertising information, country customizations and other needed bits of information.

YouTube likes using MySQL for its reliability, said Solomon, one of the engineers who originally built the service. It has quirks, but those quirks are well-known and can be mitigated fairly easily, he said. However, MySQL also has issues with scaling -- at least scaling to accommodate a service as large as YouTube's.

"The major problem with MySQL is that once you get to a certain point [of usage], you spend a lot of time managing hardware and how many instances you have," Solomon said. "We want to automate that chunk. We want to take every action that is complicated and error prone and make it heal itself."

MySQL also is not very efficient when used in a large deployment. Typically, each connection to MySQL requires its own thread on the server. This approach is not feasible at the scale of YouTube's operations, however. "Running tens of thousands of connections is not really viable," Solomon said.

The company's engineers, however, have been reluctant to try to change the core MySQL code itself, noting that making changes to the complex and somewhat difficult-to-understand code can often result in unanticipated effects. "It is not straightforward. Just when you think you know what you are doing, that's when you start getting in trouble," Solomon said.

So Vitess a tool developed in Go was created to run in conjunction with MySQL to offer additional management capabilities. The Vtocc component, for example, consolidates thousands of incoming SQL queries into a smaller number of batches so MySQL can take fewer resources fulfilling these requests. Vtocc also parses queries so they can be executed more efficiently, and reduces the work caused by duplicate queries by reusing the results from one query to satisfy the other identical requests.
Using Go has allowed YouTube developers to be more productive than they would have been using a more traditional language, Sougoumarane said.

Go code compiles quickly, he said. The 30,000 lines of code in Vitess can be compiled into binaries in about 30 seconds. And, thanks to a rich set of libraries, many tasks do not require that much programming. For instance, Sougoumarane wrote a 105-line routine that periodically trims log files, functionality that couldn't have been written in as few lines by using C or C++.

"That's how expressive Go is," Sougoumarane said. "The language features are well-thought-out. They help you compose things in a much more elegant way than traditional languages." Sougoumarane also praised Go's concurrency support, vital for use in multicore processors. "You don't have to worry about managing threads. Go manages them for you," he said.
Youtube is currently being re-written in Go from Java, C++ and Python. It is funny to see how Go is taking the place of not 1, not 2 but 3 programming language!!.

Purpose of Go.

Go was developed for chiefly 3 purposes which should ring in every developer who wish to learn the Go language. This 3 purpose is what makes it have the features of 3 languages. There are:

Effective Compilation.
Efficient execution.
Ease of programming.

From the issue Google had with Youtube , those issues from the above were solved by this Go features which in turn has set Google at peace has it has hit a gold mine called Go.

Meanwhile, Google had become frustrated by the undue complexity required to use the languages that worked with to develop server software. Computers had become enormously quicker since languages such as C, C++ and Java were first developed but the act of programming had not itself advanced nearly as much. Also, it was clear that multiprocessors were becoming universal but most languages offered little help to program them efficiently and safely.

Google decided to take a step back and think about what major issues were going to dominate software engineering in the years ahead as technology developed, and how a new language might help address them. For instance, the rise of multicore CPUs argued that a language should provide first-class support for some sort of concurrency or parallelism. And to make resource management tractable in a large concurrent program, garbage collection, or at least some sort of safe automatic memory management was required.

These considerations led to a series of discussions from which Go arose, first as a set of ideas and desiderata, then as a language. An overarching goal was that Go do more to help the working programmer by enabling tooling, automating mundane tasks such as code formatting, and removing obstacles to working on large code bases.

A much more expansive description of the goals of Go and how they are met, or at least approached, is available in the article, Go at Google: Language Design in the Service of Software Engineering..

What is Go used for?

Go can practically be used for anything in the programming world but due to it being a new language there are very few liabries and frameworks to support some usage but Go is efficient just as it was created to be. Below are some things Google Go can be used for :

Networking. -http, tcp, udp.
Concurrency / Parallelism.
Embedded Systems.
Automation, command-line tools.
Crypto/ Blockchain.
image processing.
Backend Web development.
Artificial intelligence
Machine Learning.
Cloud services.
Big Data. ### Companies Using Go. Since the creation of Go in 2007, it has gained wide popularity and usage. Go has given companies the reason to love them as they can run large data and programs without ever worrying for App crashes, they can make products faster as Go offers ease of programming, their apps are faster with Go's efficient compliation and speed. Go has been trusted by many Big companies in the world. Below are some major companies using Go.
Google.
Youtube.
Docker.
Amazon for AWS.
Jumai Foods.
Alibaba.
Xiaomi.
Kubernetes. See more list at Companies using Go.

Writing Hello World in Go.

Go boasts of ease of programming which I will show below, it is also a statically typed language but nevertheless. Go is Fun.
Since we don't have Go installed yet on our local machine, we can use a great tool provided by Go to get started as quick as possible.

Visit Go Playground. Clear the default code there and enter the code below.

// This is the entry point of any Go application.
package main

// This is to import the Formating Package that allows printing of strings
import "fmt"
// Declare a function.
func main(){
// use the format package we imported
            fmt.Println("Hello World")
}

Now press the Run button and you should see :

Hello World

Did it Run correctly? Yes? Good. No? Check the syntax very well, note that Go is statically typed and doesn't agree to errors.

Resources to learn Go.

Just as I would advice any developer, the best resources of any language are the language official Docs. But below are some amazing content that will get you started in Go.

This Blog - Visit this blog and get beginner friendly approach to Go.
Go Offical Docs.
Go by example.
Go Doc. - Summary of the Original Docs.
A Go Book.
A Go blog .
Learn how to Code Google Go- Udemy Course.

Was the Article helpful? Kindly leave a comment below and a love for me. I would be publishing next on Declaring Variables in Go.
This is just an Introdution and a history of Go. Kindly Suscribe to the newsletter to get alerted when I publish more articles on Go.