DEV Community: Abel Terefe

GRUNT JAVASCRIPT FOR BEGINNERS

Abel Terefe — Mon, 21 Oct 2019 14:35:49 +0000

Allow me to Introduce Grunt

Installing Grunt on terminal OSX Mac

To use grunt you need to install it in the command line interface globally, so you can use it on many projects. The command line you enter is npm install -g grunt -cli. The -g stands for globally, the grunt allows it to be run in any directory. The grunt -cli stands for it to be multiple versions installed simultaneously. People use Grunt because of having the idea of having a common set of tasks that can be executed across many unique repositories. There are three components to Grunt, they are the command-line interface, a repositories Grunt file, great plugins.

Three components to Grunt

A repositories Grunt file

The Gruntfile.js or the Gruntfile.coffee file is a valid belong in the root directory that is right next to package.json. This file should be committed to the project source. The Grunt file has four parts the function, project and task configuration, loading Grunt plugins and tasks, and custom task.

The Command-Line Interface and The Plugins

Installing plug-in the terminal can be tricky. However, the easiest way to install the plugin is npm install --save -dev. For the I highly recommend downloading the module starting with grunt -contrib…. By doing that, the plugin that the creator made, and it is well documented. The three popular plugins are concatenation, minification, and uglify.

Concatenation, Minification, and Uglify

To download any of these plugins you would follow the command line to download plugin replacing the module with the respected plugin name. Concat will concatenate a specified amount of files into one. This will save time on reading pages. Minify gets rids of white spaces, which make the computer quicker to read. Uglify changes the variable and functions name up. By doing that, it will provide security and making it hard to understand what is going on. Most people use all there and by doing all that, it will create or app development to run faster and provide security.

Conclusion

There is still a lot you definitely should read about because Grunt is very effective, yet very complex. Grunt is a task and environmental runner, and is broken down three components are command-line interface, a repositories Grunt file, great plugins. Can use concat, minify, and uglify to make your code fast and secure. Also, I highly recommend to check out the grunt documentations.

Grunt for Beginners

Abel Terefe — Mon, 21 Oct 2019 05:53:44 +0000

Grunt is automation created by Ben Alman. Many companies use grunt to name the same are Walmart, Microsoft, Adobe, jQuery, Twitter, Mozilla, Bootstrap. It is also a build/task manager written on top Node.js.Some advantages are that it can make your code run more efficiently. This article will discuss many things such as installing it on the terminal, the three components, concatenation, uglify, minification, and how they all tie together.
To use grunt you need to install it in the command line interface globally, so you can use it on many projects. The command line you enter is npm install -g grunt -cli. The -g stands for globally, the grunt allows it to be run in any directory. The grunt -cli stand for it to be multiple versions installed simultaneously. People use Grunt because of having the idea of having a common set of tasks that can be executed across many unique repositories. There are three components to Grunt, they are the command-line interface, a repositories Grunt file, great plugins.
The Gruntfile.js or the Gruntfile.coffe file is a valid belong in the root directory that is right next to package.json. This file should be committed to the project source. The Grunt file has four parts the function, project and task configuration, loading Grunt plugins and tasks, and custom task. Installing plug-in the terminal can be tricky. However, the easiest way to install a plugin is npm install --save -dev. For the I highly recommend downloading the module starting with grunt -contrib…. By doing that, the plugin that the creator made, and it is well documented. The three popular plugins are concatenation, minification, and uglify.
To download any of these plugins you would follow the command line to download plugin replacing the module with the respected plugin name. Concat will concatenate a specified amount of files into one. This will save time on reading pages. Minify gets rids of white spaces, which make the computer quicker to read. Uglify changes the variable and functions name up. By doing that, it will provide security and making it hard to understand what is going on. Most people use all there and by doing all that, it will create or app development to run faster and provide security.
There is still a lot you definitely should read about because Grunt is very effective, yet very complex. Grunt is a task and environmental runner, and is broken down three components are the command-line interface, a repositories Grunt file, great plugins. Can use concat, minify, and uglify to make your code fast and secure. Also, I highly recommend to check out the grunt documentations.

The main event: EVENT LOOPS

Abel Terefe — Mon, 14 Oct 2019 13:17:31 +0000

One thing javascript is well known for being asynchronous code. Meaning the code runs one line at a time and single - thread. However, when running javascript behavior on the browser, javascript codes are built on top of the browser.

Heaps are the mostly unstructured region of the memory. Think of it as a code that has not been run or placed on the stack. Stacks is the reader that reads each javascript language a thread at a time. When the stacks become slow, the term that is referred to that is called block barcode. Block barcode usually happens, when your code takes long-running one line on the stack. For example, iterating through an array that has a million people that has a chase bank account. Also, stacks keep track of where each code is on the file. This happens because it reads the function from top to bottom. Lastly, the stack is an array-like data structure with limitations like only additional items in the back and only remove the last item. You can think of it as first in first out, because

Web APIs or browsers are built-in browsers, it allows you to share data from the browser and other computer environment and allows you to do complex things with it. Web APIs are not javascript; however, javascript is built on top of web APIs that allow the user to have functionality when visiting the site. Web APIs have access like threads that allow you to make calls to this where the concurrency happens. When using a set timeout or any callback, the callback goes to the web API then the call back goes to the task queue then the event loop looks at the stacks and if the stack is empty the event queue takes the first thing in the past few and place it to the stack Event Loop has to wait for the stack to be clear before putting the call back in the stack. If there is a code on the stack you can't click on the screen and expect the response. the render runs after each callback queue. With this, all being said remember about how javascript runs on the web browser. Also, I highly recommend checking out Philp Roberts video https://youtu.be/8aGhZQkoFbQ. Mr. Roberts goes into great detail about this topic.

More resources:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/EventLoop
https://hackernoon.com/understanding-js-the-event-loop-959beae3ac40

Working with Git terminal

Abel Terefe — Sun, 06 Oct 2019 21:39:25 +0000

What is Git? Git is a Supply Chain Management(SCM) that stands apart from the other SCM. Git has allows you to have multiple branches that are entirely different from each other. Every creation takes a few seconds and is completely easy to understand. In this article, I’ll be writing about some important keys, committing, pushing up to GitHub, and cool tricks. Also, this article is for mac users, but most of the keys should be similar to Linux or windows.
They are a lot of keys to use in the Git terminals. The cd (change directories, one of the most important keys is how you are able to change directories, which can be documents, folders, images, and etc. If you want to go back to the previous directory, then you insert the cd .. to go back. You can see all your list directories with the ls key. When it comes to making directories, you have to put mkdir. Seeing what directory you insert pwd. There are more keys out than there is chicken(lol maybe not that much), but you can search for them on the web.
You can commit, save, your repository on the local server. The reason to commit the repository on the terminal allows you to stage the repository, so you can push it up to a remote server. Let’s focus on how can we get the repository to be saved on the local server. To see what files have not been staged you would enter git status. Seeing what files that have not been staged in the repository is important because you may not want to commit some files you changed in the repository. After seeing the files that haven’t been staged, you would want to stage the files using the git add. It’s very important you type out the files name instead of using git add . because you may not want to commit some files. Last step, git commit that allows you to save the work to your local server. It’ll ask you to write a short message about why you are saving it. Doing this instead of hitting the save button will allow you to keep track of your previous commit that you can always go back.
Now that we staged our file, let’s learn about why we would want to push our work on GitHub. The reason to push it up to GitHub is that everyone all run into an accident that our computer may break on us, or accidentally spilling cereal on your laptop, which I have so don’t feel bad, or whatever reason your computer stops working. To push up on GitHub you would enter git push right after you git commit. Doing this allows your repository to be up on GitHub for you to have access to the repository on any computer because of it on the cloud, internet.
Let's go back to talking about commits, you can go back to the previous commit by entering git reflog which allows seeing all your previous commits to select the specific commit you are trying to get back to you would enter git reset HEAD@{index}. The index represents the specific commit number shown you trying to access. You can learn more on https://ohshitgit.com/ which has explicit language, so the clean version is on https://dangitgit.com/. These are websites with some pretty sweet git commands.

Client-side Concept

Abel Terefe — Sun, 29 Sep 2019 20:24:12 +0000

What is client-side? A client-side is basically what the FBI see through your camera, but for real a client-side is what the web browser application is showing to the client (a.k.a you). In this article, we will talk about three client-side concept components, server, and API.

Let go more in about what is a web browser application. A web browser application is an environment that executes code inside a web browser that’ll give clients access to the code functionality.

Components are different parts of the web application that allows the client to do many things on the web browser app. Components break things down on the conceptual level of things. For instance, the like button on facebook is a simple component that allows the client to like posts on the feed. Components that are dynamic are parts of the web browser application that needs to be updated frequently. You can think about it as when you gain a new follower on twitter your followers' count goes up. Components that are static are part of the app that does not require updating until the client request the update. For example, it can be updating your bio on tinder. Also, many components can have components inside a component like a Russian doll. Lastly Component can have encapsulation components meaning that some components can have related behaviors. An example of this is every time you post a picture on Instagram your picture will appear on your profile, the timeline, and your post count will also increase.

A server is an application that runs on your computer, laptop, or whatever electronic you use to access the web. The server provides an interface to data & resource that the client doesn’t have access to. You can think of a server as a server in the restaurant. If you tell the server what food you want, then the server goes run to the kitchen tells the chef what you want. After all that waiting, he brings the food out. You can see the server but never see the chef. Unless it’s a hibachi-style restaurant. You'll never see the data the server is getting for you to retweet that tweet.

Application Programming Interface, or API, is a way that allows coders to specify how to interact with servers in their program. Think of API as making a certain request to the URL then these actions will happen. There is an API called the RESTful API. REST stands for REpresentational State Transfer meaning that a pattern is created that construct interfaces to our server applications that use URLs that include noun to refer to their resources, called endpoint. The RESTful API is exactly like the REST pattern but it’s an interface that conforms to the REST pattern.

In conclusion, the client-side concept are a lot of things. But know we know about the different components on the web browser. We know there is a little server that responds to our every request we tell the server. I hope the article gave you a new way to think about every time you use the web. Also, if this is your first time reading a coding blog, welcome to the matrix! :)