Reading that title may not sound interesting. However, the inside will be.
Continue reading “Introduction to UI Challenge”Learn Rust: Hello World
Rust is a programming language that I wanted to tackle learning for so long. So instead of just learning it myself, I decided to learn it with the community. I don’t know how long these tutorials might last, but they will last for sometime.
What is Rust?
Rust is a programming language that helps you write faster, more reliable software. You can build many things with Rust. One of the things that really stood out to me was Redox. An OS built with Rust.
There are many guides out there that teach you on how to create an OS with rust, however, I will focus on the basics of the language first.
The Documentation
This tutorial is based off the documentation and my experience while writing the code. However, the documentation for Rust is very incredible and easy to understand as it is laid out just like a normal tutorial.
Installation
To install Rust, head over to https://www.rust-lang.org/. And click Get Started. Then follow the instructions on how to install it to your system.
If you are on Mac or Linux, the process is as simple as copying and pasting a command to the terminal. But on Windows, you will have to install it like a program.
Creating a Project
To begin with, it is suggested to use the Cargo command to create a project, however we can start with just creating a file in a directory.
I called my file: main.rs
Inside the file, we want to define a main function with the fn keyword. Then like any other language, we can give the function a name and then open a set of curly braces to write our code.
So, the code so far should look like:
fn main() {
}
Now, the reason I called my function main is because this is basically the entry point to our application. And since the file is called main.rs. It makes most sense for it to be called main()
So, how to we print something to the console? To print something to the console, we can use the println!() function. Inside the main() we are going to write the following:
fn main() {
println!("Hello World");
}
In Rust, semicolons ; are a must. It is very important that you put semicolons, for that reason, we must get in the habit of putting them.
Running Our Program
To run the code we just wrote, we can use a terminal command that came included with the Rust package you installed. The command is called: rustc. It takes arguments and one of them is the file name.
So, in your terminal you would run:
rustc main.rs
If nothing shows up in the terminal and it just ends, that means everything is good. Inside the directory, you will find a file called: main.
To run the file on Mac or Linux, run: ./main. On Windows, you would run: ./main.exe.
Hopefully in the terminal, you should get the words, Hello World written.
Review
Congratulations. You have written and compiled your first rust program. Now, what is the next step you might think.
In the next tutorial, we will look at using the cargo command to create projects setup for us and how we can run our code for development even faster.
Also, we will start looking at the compiler and how it helps us write Rust code after we make a mistake.
Using Git Version Control – The Simple Guide
You maybe developing projects every single day, but if you don’t have version control, then, you are missing a main component of development.
Or, you maybe creating projects and storing them on Google Drive or Dropbox or even iCloud so in case something happens, you can get them from there. But, did you know about Github?
So, let’s not waste much time and jump right in.
What is Git?
Straight from the Git website: Git is a free and open source distributed version control system designed to handle everything from small to very large projects with speed and efficiency
Git Installation
We are going to first start on Git on your local machine so I can explain the many basics of Git that you would need to know.
Now, depending on your OS you would need to install Git on your machine so you can use the command in the terminal.
Now, if you are on a Mac, you would want to just get Git from either the Xcode developer tools, or from https://git-scm.com/.
To check whether you have Git installed, run:
git --version
If it says like Command is not found or something related, that means you don’t have Git installed. Otherwise, if you get the version number, we are ready to move on.
Basic Git Commands
Now, so let’s navigate into a project directory, you can create a new directory or move into an existing one.
To navigate directories, you will want to run:
cd 'Folder Name'
# For Example
cd Desktop/
cd Projects/
cd test_project/
Now, inside of the directory, if it is a blank one, just insert a file of any type. Could be HTML, CSS or even a README file.
Initialize Git Repo
To initialize a Git repo inside a directory, run:
git init
Now it will create a folder inside your repository called: “.git”. It is a hidden folder, so if you were to see your hidden files, you would see that folder.
On a Mac, if you press:
cmd + shift + .
And, on Windows, look in your File Explorer options, and look for: Show Hidden Files.
The .git folder is not really that important, but it is just good to know where it is, in case you ever find the need for it.
Staging Your Files/Changes
So, the file you just added to your directory or the files that already exist, you want to stage them, and let Git know that they exist and that you would want to use version control with them.
So, for example, in my directory I have the following files:
- index.html
- app.css
- index.js
So, to stage each of them, you would run:
git add (file name)
# Example
git add index.html
git add app.css
git add index.js
While these commands maybe easy for just our project, imagine a project that you have over 20 files. Each time you make a change and want to stage it, you will have to run the command for each of the files that you made a change on.
Sometimes, this could be a very lengthy, so luckily Git includes an easier command for us.
git add .
This command essentially will add ‘all’ you files to the staging area. You can think of the staging area as like telling the waiter at a restaurant of what you want. You could call the waiter every-time for each item, or tell the waiter all at once.
Committing Your Staging
The next step is to commit your staging that you have done. Think of this like you paying for the food that you have ordered. This is a commitment. It would not be very nice to change your order to something else after you have ate it.
Now one thing that you will have to learn is known as Writing Commit Messages. Commit messages are essentially like leaving a review at the restaurant. But commit messages have to short and concise.
For now, we will use “Initial Commit” since this is our first commit we are making to the repository.
To make a commit, run:
git commit -m "Initial Commit"
You could replace Initial Commit with anything, it is totally dependent on you, but you really need make sure that it is short and concise.
Putting Together, What we have Learned So Far.
Alright, so it has been alot of reading so far, but we have learned so much, that I want to put it together in one small gist, so you can always remember it.
The Gist
- Initialize Repository: git init – in the directory
- Stage Your Files/Changes: git add (filename) or
. - Commit Your Stage: git commit -m “Commit Message”
So in just three steps, you are able to get version control on your git repo running.
Now, let’s push this code to GitHub so you can have a backup of what you are creating.
Github
First, head over to GitHub.com. You will want to create an account, and don’t worry it is FREE.
Then, you would want to create a New Repository. It will ask you the following:

Let’s go through these fields.
Your Repository Name should be relating to the project you are working on. For example, if you are creating an application, you might want to create the repository of the name of the application.
Also, make sure to keep your repository name short and concise so it is easy to read/understand.
Then, it asks you a description, which is exactly how it sounds.
Now, comes the part of public vs private. Depending on your project, you will want to make this choice. If you want other people to be able to discover your project, then you might chose Public.
However, if you want you only to look at the project, then chose private. At the end, it is ultimately your choice.
At last, it will ask you whether you want to initialize your repository with a README.md file or not. Go ahead and not check the option right now.
After clicking Create, you will be brought to this page.

So, we want to look under the second section where it talks about an existing repo.
The nice thing about GitHub is that it gives you exactly what you have to run in the terminal.
Inside your terminal, paste the add origin command. Then, paste the push command.
After the push command, it will ask you to login to GitHub, so login with the account you created the repository with.
Finally, your repository is now pushed to GitHub and is officially now has a backup.
Doing It Again.
So, you may be creating new files and changing files will continue in your project, so how do you push your code again. You won’t create a new repository for each change, that would be silly.
Instead, you will be running some of the commands from now on, for that repository.
git add . # for all changes/files
git commit -m "Changed Files" # for committing your changes
git push # to push your changes to github
With just three lines of code, you project will have a backup and you will have access to version control.
During this whole entire article, I was talking about Version Control. And version control allows you to go back in time of your project. Maybe, you came across an error, you might want to go back to a working state.
So, in your terminal, you can run:
git log
This will allow you to see all your previous commits that you have made.
To go back to an older commit, run:
git checkout <commit hash>
So an example would be:
git checkout 1bcad1d866d71a6ffb3a19244fdb5167877526e9
And you will receive a message saying that you are now in this specific time in your project.
Conclusion
Congratulations! You have successfully learned the basic git commands that you need to get started with git.
There are many other commands, and I will be sure to do another post about those at a later date. In the meantime, you could checkout this video, if you want more information about Git itself and the more advanced commands that you could run.
Alright, so have a great time developing! Welcome to 2020.
Create React App From Scratch Using Parcel
Welcome to this post
Good Bye, 2019
I just want to quickly write: Good Bye 2019.
2019 was a good/bad year and it was different for all of us.
I hope everyone a great rest of the years, and New Years to those living in different time zones.
I hope the upcoming year for everyone is better than 2019 and that what you didn’t like in 2019 will be better for you in 2020.
Happy New Years!
Looking Back at 2019. The rise and falls.
2019. The year of the rise and falls that occurred in the life of Nano. Quick note: I am releasing a new post soon known as: The Journey of Nano Education. So stay tuned!
Anyway, I would like to talk about 2019 for me but in the view of the community.
In April 2019, I created the channel Nano Productions and within a month of the creation, I released a 1 Hour Plus HTML and CSS Course to FreeCodeCamp, which was the main event that sparked the rise of my channel.
Then on November 6, 2019 I released my last video of the channel.
In just 7 months, I took my channel from just a great beginning and down to it being completely forgotten.
Together, we have gone through a journey and I have went through a roller coaster. Some days, I would be sitting for 1-2 hours with no idea on a video, and with my plan of my daily release schedule, it caused alot of stress on me.
So, maybe Nano Education ending could have been a great stress relief for me, but it is a great way for us to recognize Nano Education as a channel that survived 2019 only.
I will be updating this post as I find need, and see everyone in 2020 in the next decade.
A New Node.js Terminal!
This is a quick post which will be updated soon. But, A New Node.js Terminal has been developed by Youtuber C0d3R or Aseltic.
The terminal features some amazing features hand crafted with no external dependencies required. If you don’t believe me, try it out for yourself!
Github Link: https://github.com/Aseltic/AselTerminal
Special Thanks to C0d3R for developing this amazing terminal and allowing me to review it. Now it is your turn!
Challenge #1: Algorithm of Form
Guess What! Challenge #1 of December 2019 has been started. The challenge is to help us build towards our goal of a JavaScript Library. So lets make the best of it.
Challenge Description
Create an algorithm that will take all the inputs of a form (except the submit button) and assign variables to each of their values. Example:
<body>
<form>
<input type="text" id="first_name">
<input type="text" id="last_name">
<input type="submit" id="submit_btn">
</form>
</body>
let btn = document.querySelector("#submit_btn");
// End Result to be produced (but through algorithm)
btn.addEventListener("click", () => {
let first_name_input = document.querySelector("first_name").value;
let last_name_input = document.querySelector("last_name").value;
})
Make sure the variable name comes from the ID of the element, and adds _input to each variable name.
Submission
No one is excluded from submitting their challenge efforts, but here is something that you should know: Even if you get it wrong the first time, submit it, and we will look over it and see where you could improve or how to fix your mistake. We will support you until you get the challenge right.
The challenge is not only for the winning purposes, but it is also for the chance for you as a developer to get support regarding your skills.
Where can I host it?
- Codepen.io
- codesandbox.io
- stackblitz.com
- Netlify – If you want to live host the code
To Submit:
- Email Me: nanoproductions2@gmail.com
- Send a Contact Request with the Link
- Leave a comment with the link, with your email address
How to watch a Coding Tutorial?
There are 5 easy steps on how to approach a Video Coding Tutorial that will help you learn better and benefit more.
- Preview: Look at pre-requirements, date published, comments, and length.
- Pre-Watch: Just watch the tutorial without doing anything. Just watch and get yourself familiar with the tutorial.
- Outline: If not already given, create a mini outline of the course of mini sections.
Here is an exanple:
- Introduction
- Setup
- The Syntax
- JSX vs React.createElement()
4: Create: In your code editor, create seperate files for each mini section. For example, here is my structure for a React Tutorial:
- Introduction
- Notes.md
- Section 1:
- Index.jsx
- Notes.md
5. Fill In and Watch: as you watch the tutorial, feel free to code along, but code in the environment we created.
Remember to review what you have learned.
3. Bored! I found a Solution
Do you want to build something with vanilla javascript? How about a shopping cart with local storage?
Check out this video by Coding Addict! He will make you addicted.