DEV Community: Aleksandar Vasilevsk

6 Ways to Loop Through an Array in JavaScript

Aleksandar Vasilevsk — Wed, 10 Jun 2020 12:37:29 +0000

Dealing with arrays is everyday work for every developer. In this article, we are going to see 6 different approaches to how you can iterate through in Javascript.

Continue reading...

8 Best Productivity Tips for Developers and Programmers

Aleksandar Vasilevsk — Wed, 11 Mar 2020 16:30:21 +0000

To stay productive as a programmer and developer is not an easy task. It's a stressful job that can make you lose focus very fast or make you feel drained, the understanding of how you can focus on your work, and deal with distractions, can help you a lot in making the most out of your working hours. In this article, we have made a list of the best productivity tips for developers and programmers that should follow for the best productivity.

Continue reading...

Algorithms and Data Structures: Linear Search

Aleksandar Vasilevsk — Tue, 03 Mar 2020 14:03:14 +0000

As the name says a linear search is a process that starts at the beginning of a list and goes through every element (one item at a time) until it finds the element which is looking for. To find the element which is searching for (for example we are searching for x), a linear search algorithm is comparing every element in the list with the value inside of x, until a match is found or the whole list has been searched. Performance for using linear search in large lists is bad because it makes at most n comparisons, where n is the length of the list. In practice, linear search algorithm is rarely being used because other search algorithms like the binary search algorithm allow significantly faster searching for all but shortlists.

Continue reading...

Best Programming Books in 2020

Aleksandar Vasilevsk — Sun, 26 Jan 2020 13:42:30 +0000

There are many books out there for programmers and no one can read every book out there. There are many more articles about programming books written too, but it is hard to find a good filtered list with books for programmers. In this article, I wanted to make a list that will help everyone to find particular books about programming topics that they are interested in to read. I selected this particular list of books not just to improve your coding skills and make you a better programmer, but would also help you to grow as a person in every way.

Continue reading...

Create React App From Scratch Part 1: Setting Up

Aleksandar Vasilevsk — Thu, 26 Dec 2019 11:30:47 +0000

This post is a preview part of the series Create React App From Scratch, you can find the other parts at https://www.codespot.org

Series Introduction

Since React is currently one of the most in-demand front-end technology, I have decided to start a course series that intends to show you how to create the React js app from scratch to finish. Today most of the front-end applications are mostly showing real-time data fetched from some backend service, I have decided that it will be useful to create a cryptocurrency single page application that will show prices and chart history of cryptocurrencies that will be fetched from some backend service.

Note: To follow this ReactJS course series you should have some basic knowledge in JavaScript programming language, even better if you know ES6.

Setting Up React

Before we start setting up the ReactJS app, firstly we need to have node.js installed on our computer. To check if node.js is installed you should open up the terminal or PowerShell in Windows and type:

node -v

If this shows you the node version, you can skip the installing part, else you should open nodejs.org and there you will find the latest version of node.js.

Setting up React js is easy, Firstly we will name the app crypto-app. Next, we will open up the terminal with a path to the folder where we want the app to be stored. To create a React project we need to use the following command:

npx create-react-app crypto-app

Feel free to name your app differently if you want to, but in my case, I will name the app crypto-app.
After a couple of seconds, the setup will finish with a couple of messages about our new React app. We can now use the following commands when we are inside the directory of the app:

npm start       #starts the development server
npm run build   #bundles the app into static files for production
npm test        #starts the test runner

To start our development server, first, we need to go into the project folder with the command cd crypto-app, when we are inside the project folder we can finally start the development server with the command npm start, our browser will open the app for us at localhost:3000, where we should see the React welcome screen.

React File Structure

To open our React project we need to use a text editor or IDE, if you don't have any installed, you can check my post about Top 5 Best Text Editors. When we open up the project in the text editor we can see a couple of configuration files and folders.

- node_modules        - contains all node dependencies
- public              - public files that are served
- src                 - source code of our ReactJS app
.gitignore            - record which files should git ignore
package-lock.json     - contains an exact, versioned dependency tree
package.json          - contains various metadata relevant to the project 
README.md             - readme markdown file

First, we will look into the public folder. Here we have one important file and that is the index.html. This is a normal Html page which is a single page Html, in other words, we are not going to add more Html files to this project.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>
</html>

Note: I have deleted the comments so the file will look a bit cleaner, as it is not that complex as it looks like.

If you need to add any inputs, libraries like CSS, or meta tags you can do that here, in this file. Most important part about this file that you should remember is that <div id="root"></div> is where the React application is mounted.

Another interesting place for us is the src folder. When we open our src folder we can see a couple of files here, these files are our React application. The most important file here is the index.js. Let's see how does it look:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(<App />, document.getElementById('root'));

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

Here the ReactDOM.render(<App />, document.getElementById('root')); method renders our React application. As the first argument we have <App /> component (we will look into React components in depth later, for now, you can think of it like some element) which was imported at the top of our file. The second argument is where we get access to the root element in our DOM, in the Html file, which we saw before in the public folder.

Now let's open the App.js file, our only ReactJS component for now.

import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

Here we see JSX code (we will see later what it is), for now, we will remove all of the content in the wrapping div, also remove the logo import at the top and we will add h1 tag just for testing purpose with text inside it: Hello, World!, and then we will save it!.

import React from 'react';
import './App.css';

function App() {
  return (
    <div className="App">
      <h1>Hello, World!</h1>
    </div>
  );
}

export default App;

App.js

Because we have npm start command running, this will automatically trigger recompilation, and will also automatically reload your page (localhost:3000), which now you will see: Hello, World, instead of the old content. We can also remove the logo.svg file as we no longer needed. Lastly, let's see the two CSS files available, In the App.css we will delete everything but the first .App class.

.App {
  text-align: center;
}

App.css

The rest of the files are the serviceWorker.js which is related to the progressive web app, and some files related to unit testing.

Part Overview

In this part we have seen how we can create React application from scratch, also we have seen the project structure of newly created React application, and at the end, we have tweaked some of the components.

The code from the course is available on GitHub: Create React App From Scratch on the branch: 01-setting-up.

Next part: Create React App From Scratch Part 2: Into Components.

33 Best Materials to Learn Software Development in 2020

Aleksandar Vasilevsk — Thu, 28 Nov 2019 22:42:33 +0000

This is a preview of my original post cross-posted from my website's blog

1. Clean Code

Clean Code by Robert C. Martin (Uncle Bob) is one of the best books for software developers, it is a must-read book. Clean Code like its name says it is focused on how to write clean and good code it is focused on important things in software development like naming, functions, formatting, comments and error handling. It is an evergreen book and every programmer must have it.

2. Introduction to Algorithms

Introduction to Algorithms, 3rd Edition by Thomas H. Cormen, Charles E. Leiserson, Ronald L. Rivest, and Clifford Stein, is another great book, this book has been widely used as the textbook for algorithms courses at many universities. For software and web developers without Computer Science degree learning algorithms can be one of the most beneficial topics in solving problems, even if you have a CS degree it is a great book to have it under your belt.

3. MIT OpenCourseWare

MIT OpenCourseWare (OCW) is one of the best courses for learning software development out there, they are great especially if you don't have a Computer Science degree. There are video courses from Introduction to Computer Science and Programming, Introduction to Algorithms, etc. The best think about MIT OCW is that it is free and available for everyone.

MIT OpenCourseWare YouTube

4. HackerRank

HackerRank is a website that is focused on learning and competitive programming challenges that can be solved in a variety of programming languages (including Java, C++, PHP, Python, SQL, JavaScript, etc). HackerRank offers programmers to submits a solution to a programming challenge, their submission is given a score on the accuracy of their output. Programmers are then ranked on the HackerRank leaderboard and earn badges based on their results to drive competition among coders. HackerRank is free for coders to use.

https://www.hackerrank.com/

5. Design Patterns: Elements of Reusable Object-Oriented Software

Design Patterns: Elements of Reusable Object-Oriented Software by Erich Gamma, Richard Helm, Ralph Johnson, and John Vlissides, also known as The Gang of Four is one of the greatest books about object-oriented design theory and practice with a very high influence in the field of software development. The book is divided into two parts in the first part it is exploring the capabilities and pitfalls of object-oriented programming and in the second part describing 23 classic software design patterns. The Gang of Four is a must-read book, especially for Object-Oriented Programming.

6. Traversy Media

Traversy Media by Brad Traversy is a YouTube channel mostly focused on web development. The Video courses are great, very good and professionally explained and in-deep, the courses are especially good for beginners. The video course materials by Traversy Media are mostly free.

Traversy Media YouTube

7. Academind

Another great YouTube channel for learning web development is Academind. There are a lot of available tutorials and courses that are very good explained. Some of the tutorials are free on the YouTube channel and some of them you can find it on Udemy.

Academind YouTube

8. The C Programming Language

The C Programming Language by Brian Kernighan and Dennis Ritchie sometimes termed K&R, after its authors' initials, which also designed and implemented the C language, as well as co-designing the Unix operating system. This book is regarded by many to be the authoritative reference on C programming language and with it, you will learn C programming language and also you will see how to program on the lower level which is very important for every software developer.

You can read the full post with all the links and resources and find the 25 more tools on my website's blog

How To Build A Blog With Gatsby and Netlify

Aleksandar Vasilevsk — Sun, 17 Nov 2019 17:14:40 +0000

This is a preview of my original post cross-posted from my website's blog

What is Gatsby js

To build a blog today has become even more easy with the new JAM Stack (JavaScript, API, and Markup). JAM Stack stands for
A modern architecture - Create fast and secure sites and dynamic apps with JavaScript, APIs, and prerendered Markup, served without web servers.

Gatsby is a static site generator that is built on ReactJS. In its simplest definition, a static website is a group of HTML pages, which does not pull any data from a database when a viewer visits it. A static site looks the same for every visitor. Static sites are faster to load too, as the server sends the same response to every visitor. However, you can not customize content for visitors. Since Gatsby builds on top of React, you get all the benefits of React such as its performance, components, JSX, React library ecosystem and a large community. Gatsby Documentation is also very well written so you should not have any problems.

For many static websites, you will need to use external data sources during the build process. Gatsby provides support for many forms of data, including CMSs like WordPress, APIs, and Markdown. To access this data, Gatsby uses GraphQL.

Gatsby js Schema

If you know GraphQL, accessing data from Markdown using Gatsby feels easy. If GraphQL is new to you, it does add yet another thing to learn, however, the documentation on using GraphQL with Gatsby has a lot of information.

Note: GraphQL is a query language.

Building a Blog With Gatsby js

To create a blog with gatsby js, we need to do a couple of steps. Let's see in the example below.

Install the Gatsby CLI

npm install -g gatsby-cli

Create a new site

gatsby new gatsby-site

Change directories into site folder

cd gatsby-site

Start the development server

gatsby develop

After the four steps, your gatsby site will be ready, you can access the gatsby development environment at localhost:8000 by default. You can edit JavaScript pages in the src/pages and the changes will be reloaded automatically in the browser.

Create a production build

gatsby build

With the build command, Gatsby will perform production build for your site, which in other words means generating static HTML pages.

Serve the production build locally

gatsby serve

Lastly, with the shell command, Gatsby will start local HTML server for testing your build site

Gatsby project structure

With the Gatsby site installed you will get the default project structure, which is very simple with a couple of important config files to remember.

|-- /.cache
|-- /plugins
|-- /public
|-- /src
    |-- /pages
    |-- /templates
    |-- html.js
|-- /static
|-- gatsby-config.js
|-- gatsby-node.js
|-- gatsby-ssr.js
|-- gatsby-browser.js

Gatsby js project structure

There are four important files for gatsby site:

gatsby-config.js - configure options for Gatsby with metadata like title, description, etc.
gatsby-node.js - Gatsby Node.js API for customizing the default settings about the build process.
gatsby-browser.js - Gatsby browser API for customizing the default settings for the browser.
gatsby-ssr.js - Gatsby server-side rendering API for customizing the settings affecting server-side rendering.

You can read the rest of the post on my website's blog

12 Best Online Tools for Web Developers

Aleksandar Vasilevsk — Mon, 11 Nov 2019 18:38:38 +0000

This is a preview of my original post cross-posted from my website's blog

There are a large number of online tools out there. This article is aimed to help developers in the search to find the best tools to make everyday developing experience better. 12 web tools are listed below for new and experienced developers.

1. Stack Overflow

Stack Overflow is a question and answer web site for developers. It features questions and answers on topics in computer programming. Stack Overflow is the right hand of every professional and enthusiast software developer, with its huge community of developers it is the number one tool for solving problems and gaining knowledge. Stack Overflow is free to use, just be sure first to check if the answer is already there before you ask one or you will get some negative votes.

2. Google Fonts

Google Fonts is all you need to find and load a font for your web site. It has a wide range of free fonts and it is very easy for use, in a couple of steps you can find your favorite font, select it, and copy it to your CSS styles.

3. Chrome Developer Tools

Chrome Developer Tools offer a wide range of tools to web developers for testing and debugging their code, from editing HTML and CSS, to writing JavaScript code in real-time. Chrome Developer Tools come as browser add-ons in web browsers, and it is not hard to get started.

4. GitHub

Every developer nightmare, when you’re working on a project feature and you mess up with your code. Say welcome to version control systems or specifically, GitHub.

5. JSFiddle

With JSFiddle you can add JavaScript alone or in combination with HTML and CSS and render the code in the output window, There is also an option to save the code or send to other people. With JSFiddle, you can inject JavaScript and CSS from other web sites and load it in jQuery. It is not hard to get started, try it.

6. JSONLint

JSONLint is a great tool for debugging JSON, it lint flags if you’ve missed something in the syntax. JSONLint is a great tool for working with big JSON formats, and it is easy to get started.

You can read the full post and find the 6 more tools on my website's blog

Token vs Session Authentication

Aleksandar Vasilevsk — Wed, 09 Oct 2019 07:52:05 +0000

Originally published at https://www.codespot.org

HTTP (HyperText Transfer Protocol)

HTTP is a protocol for communication between the client and the server. HTTP is stateless, which means each request doesn't know of any previous actions. For example, when a user logs in, and then navigate through the app, the server will not know that we just logged in without session or token authentication.

Session Authentication

In session authentication, the server is responsible for creating a session for the particular user when the user log's in, after that the id of the session is stored in a cookie on the user browser. For every request sent by the user, the cookie will be sent too, where the server can compare the session id from the cookie with the session information stored on the server so the user identity is verified.

Token Authentication

In token authentication, the server creates a JSON Web Token (JWT) and sends the token to the client. The JSON Web Token usually is stored in a local storage or in the cookie, and it is included in every request made by the user. The server will validate the JSON Web Token. The JSON Web Token authentication is a more modern approach used in newer web applications and for mobile devices. The user state is not stored on the server with this approach instead it is stored in the token.

Scalability

Generally, the JSON Web Token scales much better with the size of the application because it is stateless, there is no need user information to be stored, on the other side sessions can use a lot of the server resources if the application has a lot of traffic.

Security

The JSON Web Token usually is either stored in local storage or cookies, and JavaScript has the access to the storage, this simply means that JSON Web Tokens might be vulnerable to XSS (Cross-site Scripting), that's why very sensitive data should not be stored in the Local Storage. I case when the JSON Web Tokens are stored in the cookies are vulnerable to CSRF (Cross-site Request Forgery) attacks. One way to prevent the CRSF attack is to be sure that the cookie is accessible by only your domain. The JWT also should be with short expiration times and HTTPS/SSL should be used for safe client and server transmission.

Which Is Better?

While sessions and JSON Web Tokens are both viable options, in some situations one is better to be used over the other. For smaller and medium websites, when we got just user login session authentication is usually good. For larger web sites and applications, when we need to handle a lot of requests, JSON Web Token is much better because of scaling.