![\"app-logo\"](\"/assets/cover/countdown-timer.png\")
The countdown timer is a simple app you can build to exercise your skills as a developer. To build the countdown timer you will need the basic knowledge of HTML, CSS, and JavaScript.
\nWe are starting with creating a div with a class container which will have all of the div with box class nested inside, the box class div have h2 element for the static unit text and p element which will hold the values.
<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>Countdown Timer</title>\n <link rel=\"stylesheet\" href=\"style.css\">\n <script defer src=\"main.js\"></script>\n</head>\n<body>\n <div class=\"container\">\n <div style=\"width: 130px;\" class=\"box\">\n <h2 id=\"days-text\">Days</h2>\n <p id=\"days\">000</p>\n </div>\n <div class=\"box\">\n <h2 id=\"hours-text\">Hours</h2>\n <p id=\"hours\">00</p>\n </div>\n <div class=\"box\">\n <h2 id=\"minutes-text\">Minutes</h2>\n <p id=\"minutes\">00</p>\n </div>\n <div class=\"box\">\n <h2 id=\"seconds-text\">Secondes</h2>\n <p id=\"seconds\">00</p>\n </div>\n </div>\n\n <div style=\"background: rgb(204, 24, 24);\" class=\"alert\">\n <h1 style=\"padding: 50px 80px;color: white;\">Finished!</h1>\n </div>\n</body>\n</html>\nThe next step is to style our elements which we added previously using CSS.
\n*{\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n background: rgb(18, 19, 18);\n}\nbody{\n height: 100vh;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.container{\n width: 600px;\n height: 200px;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.box{\n width: 100px;\n height: 100px;\n margin: 0 15px;\n}\nh2{\n text-align: center;\n padding-top: 2px;\n color: blanchedalmond;\n \n}\n.box p{\n font-size: 50px;\n text-align: center;\n font-family: sans-serif;\n font-weight: 800;\n margin-bottom: 15px;\n color: blanchedalmond;\n}\n.alert{\n display: none;\n}\nLastly, we will need to add JavaScript for the logic part so our countdown timer can be functional.
\nconst finaleTime = new Date(\"January 1, 2022 00:00:00\").getTime();\n\nconst timer = () =>{\n const currentTime = new Date().getTime();\n let difference = finaleTime - currentTime;\n // Displaying the alert when the timer finishes.\n if(difference < 0){\n document.querySelector('.alert').style.display = 'block';\n document.querySelector('.container').style.display = 'none';\n }\n \n let days = Math.floor(difference / (1000*60*60*24));\n let hours = Math.floor(difference % (1000*60*60*24) / (1000*60*60));\n let minutes = Math.floor(difference % (1000*60*60)/ (1000*60));\n let seconds = Math.floor(difference % (1000*60) / 1000);\n // Adding the zeros.\n days <= 99 ? days = `0${days}` : days;\n days <= 9 ? days = `00${days}` : days;\n hours <= 9 ? hours = `0${hours}` : hours;\n minutes <= 9 ? minutes = `0${minutes}` : minutes;\n seconds <= 9 ? seconds = `0${seconds}` : seconds; \n\n document.querySelector('#days').textContent = days;\n document.querySelector('#hours').textContent = hours;\n document.querySelector('#minutes').textContent = minutes;\n document.querySelector('#seconds').textContent = seconds;\n\n}\ntimer();\n// Calling the function every 1000 milliseconds.\nsetInterval(timer, 1000);\nWith this step, we have finished creating our Countdown Timer with JavaScript.
\nFor more information on learning JavaScript, I highly recommend the following books:
\n![\"redux-logo\"](\"/assets/cover/redux-landscape.png\")
If you've used server-side libraries like Express you are probably already familiar with the concept of middleware. The middleware is some piece of code you can put between the framework receiving a request and the framework generating a response. The best thing about the middleware is that it's compostable in a chain.
\nIn Redux, the middleware solves a different problem from the Express. Here the middleware provides an extension point between dispatching an action and reaching the reducer. The most common situation to use Redux middleware is for logging, crash reporting, asynchronous API calls, routing, and more.
\n![\"redux-middleware-schema\"](\"/assets/samples/redux-middleware-schema.png\")
The most basic example of using redux middleware is to log the action and the next state every time we are dispatching an action. To start using the middleware in redux firstly we need to import the applyMiddleware from redux package (the createStore and compose).
import React from 'react';\nimport ReactDOM from 'react-dom';\nimport { createStore, applyMiddleware, compose } from 'redux';\nimport { Provider } from 'react-redux';\nImporting packages in index.js
\nconst logger = store => {\n return next => {\n return action => {\n console.log('[Middleware] Dispatching', action);\n const result = next(action);\n console.log('[Middleware] next state', store.getState());\n return result;\n }\n }\n}\nlogger function in index.js
\nLastly, we just need to pass the applyMiddleware with the logger function as an argument inside the createStore function and we are done.
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;\nconst store = createStore(someReducer, composeEnhancers(applyMiddleware(logger)));\n\nReactDOM.render(\n <React.StrictMode>\n <Provider store={store}>\n <App />\n </Provider>\n </React.StrictMode>,\n document.getElementById('root')\n);\nPutting all together in index.js
\nFor more information on understanding redux middleware, the following are great resources:
\n","frontmatter":{"path":"/how-to-use-middleware-in-redux/","date":"2021-01-22T12:40:00.619Z","title":"How to Use Middleware in Redux","author":"Aleksandar Vasilevski","image":"/assets/cover/redux-landscape.png","category":"React","tags":"#react #redux #js #javascript","featured":false}}},{"node":{"id":"a388dabf-4911-50d0-956f-62b936faeee6","html":"![\"fighter-jet\"](\"/assets/cover/fighter-jet.jpg\")
Axios interceptors are built-in functions in Axios that calls for every request or response. Axios interceptors can be used in every request before it is sent or to transform the response before being returned to Axios. In simplest words, you can think of interceptors in Axios as middleware in Express. There are two types of Axios interceptors, request interceptors and response interceptors. Let's dive deeper in both types and see how they work and when should you use them.
\n\n\nIf you want to learn more about Axios you can check the Axios Http Client or Axios Github Page
\n
The best way to get started with Axios interceptors is to use console.log() in every HTTP request.
const axios = require('axios');\n\naxios.interceptors.request.use(req => {\n console.log(`${req.method} ${req.url}`);\n // You must return the request at the end\n return req;\n});\n\n// Result: \"get https://codespot.org/get\"\nawait axios.get('https://codespot.org/get');\n\n// Result: \"post https://codespot.org/post\"\nawait axios.post('https://codespot.org/post', {});\nAs with HTTP requests, we can also use Axios interceptors in every response we get from the server.
\nconst axios = require('axios');\n\naxios.interceptors.response.use(res => {\n console.log(res.data.json);\n // You must return the response at the end\n return res;\n});\n\n// Result \"post https://codespot.org/post\" followed by \"{ code: 200 }\"\nawait axios.post('https://httpbin.org/post', { code: 200 });\nThe most common case to use Axios interceptors is to set the authorization header. Most of the times the client needs to send a secret token to the server to authorize the user. With interceptors, you can set the authorization header automatically on every request.
\naxios.interceptors.request.use(req => {\n req.headers.authorization = 'secret token';\n return req;\n});\n\nconst res = await axios.get('https://codespot.org/get');\nWith the response interceptors, you can also elegantly handle errors. This is important for Axios because you will get the generic error message \"Request failed with status code 404\", which usually you won't show to the user.
\nTo handle errors in Axios you should use axios.interceptors.response.use() function which takes two argumentssuccessHandler and errorHandler, The first one successHandler is called if the request is successful and the errorHandler is called if the request failed.
axios.interceptors.response.use(\n res => res,\n err => {\n if (err.response.status === 404) {\n throw new Error(`${err.config.url} not found`);\n }\n throw err;\n }\n);\n\n// Automatically sets the authorization header because\n// of the request interceptor\nconst err = await axios.get('https://codespot.org/status/404').\n then(() => null, err => err);\n\nerr.message; // \"https://codespot.org/status/404 not found\"\nSometimes you don't want to intercept the request but you want to set up a global configuration. For example, the domain in the URL address you are sending from your application is always the same. You can set up the base URL in someplace where will be run first (for example in React, index.js is a good place). Also you can set authentication token and much more.
\n//Base URL for every request\naxios.defaults.baseURL = \"https://codespot.org\";\n//Base authentication token\naxios.defaults.headers.common['Authorization'] = \"Token\";\nindex.js
\nconst axios = require('axios');\n\naxios.interceptors.request.use(req => {\n console.log(`${req.method} ${req.url}`);\n return req;\n});\n\n//With the base URL set up now, you don't need to put it in the request path\nawait axios.get('/get');\nyour-request.js
","frontmatter":{"path":"/how-to-use-axios-interceptors/","date":"2020-10-21T09:25:49.619Z","title":"How to Use Axios Interceptors","author":"Aleksandar Vasilevski","image":"/assets/cover/fighter-jet.jpg","category":"JavaScript","tags":"#js #javascript #axios #http #request","featured":false}}},{"node":{"id":"02c5e829-8ff4-519d-8513-f1559135a992","html":"![\"html\"](\"/assets/cover/html.png\")
As you start learning HTML5, you will want to build yourself a boilerplate from which you can begin all your HTML-based projects.
\nIn this article, we will take a look at a simple boilerplate HTML5 code for any project.
\n<!doctype html>\n\n<html lang=\"en\">\n<head>\n <meta charset=\"utf-8\">\n\n <title>The HTML5 Herald</title>\n <meta name=\"description\" content=\"The HTML5 Herald\">\n <meta name=\"author\" content=\"CodeSpot\">\n\n <link rel=\"stylesheet\" href=\"css/styles.css?v=1.0\">\n\n</head>\n\n<body>\n <script src=\"js/scripts.js\"></script>\n</body>\n</html>\nHTML5 template for starting project
\nNow let’s see what are the significant parts of the markup and why are they important.
\nOn the top, we have the Document Type Declaration or doctype. This is nothing more than a way to the browser what type of document it’s looking at. In the case of HTML, it means the specific version of the HTML document. The doctype should always be on top of the HTML file.
\n<!doctype html>\nHTML5 document type declaration
\nNext is the html element which has included the lang attribute with a value of en, which specifies that the document is in the English language. The html element has not changed much in the HTML5.
<!doctype html>\n<html lang=\"en\">\n\n</html>\nThe head element is the container for metadata (Metadata is data about the HTML document. Metadata is not displayed). In the head element we typically define:
meta - meta element is for metadata title - title element is for the page titlelink - link element is for external style sheet<!doctype html>\n<html lang=\"en\">\n<head>\n <meta charset=\"utf-8\">\n\n <title>The HTML5 Herald</title>\n <meta name=\"description\" content=\"The HTML5 Herald\">\n <meta name=\"author\" content=\"CodeSpot\">\n\n <link rel=\"stylesheet\" href=\"css/styles.css?v=1.0\">\n</head>\n</html>\nThe body element contains all the contents of an HTML document. In the body element we typically define elements like headings, paragraphs, images, hyperlinks, tables, lists. At the bottom of the body element we also define:
script - script element is used to embed a client-side script (JavaScript).<!doctype html>\n\n<html lang=\"en\">\n<head>\n <meta charset=\"utf-8\">\n\n <title>The HTML5 Herald</title>\n <meta name=\"description\" content=\"The HTML5 Herald\">\n <meta name=\"author\" content=\"CodeSpot\">\n\n <link rel=\"stylesheet\" href=\"css/styles.css?v=1.0\">\n\n</head>\n\n<body>\n <script src=\"js/scripts.js\"></script>\n</body>\n</html>\nPutting scripts at the bottom of the body is considered the best practice for embedding JavaScript. This is important for page-loading speed; when a browser sees a script tag, it will pause downloading and rendering the rest of the page while it parses the script. This way the page loads much more slowly when large scripts are included at the top of the page before any content.
\n\n","frontmatter":{"path":"/html5-template/","date":"2020-06-26T10:07:49.619Z","title":"HTML5 Template For Starting Project","author":"Aleksandar Vasilevski","image":"/assets/cover/html.png","category":"HTML","tags":"#html #webdev","featured":false}}},{"node":{"id":"5438c993-6c6a-59fe-b7eb-efdc0022a223","html":"In some special cases, the script may need to be placed in the head of your document, to take effect before the browser starts rendering the page.
\n
This tutorial is for complete beginners in HTML who want to learn basic web development and web design
\nHTML stands for HyperText Markup Language, and as the name says HTML is not a programming language but a markup language for creating web pages. HTML is strictly presentational, it doesn't have any logic, it is just for displaying elements in a web page like an image, text, list, etc. HTML is a very important part of web development, it is a building block of the web, every web site out there output HTML in the browser, and a web site can be built just with HTML (although will not look very good). To start building web sites with HTML you will need a text editor(Visual Studio Code, Sublime, Atom, etc) and a web browser(Chrome, Firefox, Safari, etc). HTML code lives in .html files and doesn't need a server to be run, it can run simply in a web browser. In most of the cases, there is a index.html which is the home page of a website.
To get started we will make a folder called html-for-absolute-beginners and inside that folder, we will make a file called index.html. Then we will\nsimply open that file in our favorite text editor. If we write anything in the index.html, for example, a Hello, World, and then open the same file in our browser we will see the text Hello, World displayed in the browser.
Hello, World\nindex.html
\nMost of the time we will not write simple text like this in our HTML files, instead, we will be using an HTML Tags.
\nTags are the building block of HTML, every tag format the information we want to display which can be text, image, etc. HTML element structure looks like this:
\n<tagname>content</tagname>\nhtml element example
\nElements usually have a start tag and end tag and content in the middle, in some cases tags close themselves. Tags can be inline or block-level elements.
\n\n\nYou can find HTML documentation with every tag/element on the developer.mozilla.org.
\n
![\"html-structure\"](\"/assets/samples/html-structure.png\")
html page structure example
\nAs you can see in the example above, there is a specific structure in every HTML document which everything is nested in elements starting with the <html></html> element which represents the root of an HTML document, inside we have <head></head> which is a container for metadata and <body></body> area which contains all the content of an HTML document such as headings, paragraphs, images, hyperlinks, tables, lists, etc.
Firstly thing we want to put in every HTML document is the <!DOCTYPE html> which is an \"information\" to the browser about what document type to expect. The next thing is the <html> element like we saw in the HTML structure before. Inside the <head> we have the <title> element which is required and it defines the title of the HTML document.
<!DOCTYPE html> <!--Type of the document type to expect-->\n<html> <!--Root of an HTML document-->\n <head> <!--Container for metadata-->\n <title>HTML for beginners</title> <!--Defines the title of the document-->\n </head>\n <body> <!--Contains all the contents of an HTML document-->\n\n </body>\n</html>\nindex.html - very basic HTML document
\n\n\nOn the right side there are comments which are: , comments are not shown in the browser, they are just visible to the developer.
\n
As you can see in the example, there are six different heading elements we can use: <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, which <h1> defines the most important heading and <h6> defines the least important heading, also the size of each heading is not the same by default, you can later change the size with CSS.
<!DOCTYPE html>\n<html>\n <head>\n <title>HTML for beginners</title>\n </head>\n <body>\n <!--Headings-->\n <h1>Heading One</h1>\n <h2>Heading Two</h2>\n <h3>Heading Three</h3>\n <h4>Heading Four</h4>\n <h5>Heading Five</h5>\n <h6>Heading Six</h6>\n </body>\n</html>\n\n\nOnly use one
\n<h1>per page, this should be the main heading/subject for the whole page. Also, you should not skip heading levels.
The paragraph in HTML is just the <p> element, we can use a paragraph to put a block of text inside of it. Every paragraph always starts on a new line, and browsers automatically add some white space before and after a paragraph.
<!DOCTYPE html>\n<html>\n <head>\n <title>HTML for beginners</title>\n </head>\n <body>\n <!--Paragraph-->\n <p>\n Some random short or long <strong>paragraph</strong> text goes <em>here</em> \n if you want to learn more click <a href=\"www.google.com\">here</a>\n </p>\n </body>\n</html>\n\n\nInline vs Block Elements - Inline elements do not start a new line and take only the necessary width, Block elements start on a new line and take the full width.
\n
The first tags which we have seen were block elements, now let's see some of the inline elements. As you can see in the example we have a <strong> tag in the middle of the paragraph which is telling that the content inside the <strong> tag will be bold. Next is the <em> tag which is used for italic who is also inside the paragraph.
If we want to link some content on our page we need to use the <a> tag. For the link element to work, we need to give it an attribute href=\"some link\" which is the link we want to use it, like in the example if we click on the link it will take us to the linked page. The href attribute can be an external or internal link. Another important attribute for a link is the target=\"_blank\" which will open the link in a new tab (usually you will use this if the link is an external site).
\n\nHTML attributes provide additional information about HTML elements which are always specified in the start tag. Attributes are written as key/value.
\n
In HTML there are also list elements, which are much important for displaying data. There are two types of list elements, ordered list <ol> and unordered list <ul>. Inside the lists, we need to have list items which are <li> elements, and inside of we will put the content. The difference between the ordered list and unordered list is that in the ordered list every item has a number, in the unordered list every item has a bullet point.
<!DOCTYPE html>\n<html>\n <head>\n <title>HTML for beginners</title>\n </head>\n <body>\n <!--Lists-->\n <ol>\n <li>Item 1</li>\n <li>Item 2</li>\n <li>Item 3</li>\n </ol>\n\n <ul>\n <li>Item 1</li>\n <li>Item 2</li>\n <li>Item 3</li>\n </ul>\n </body>\n</html>\nThere are <br> which is nothing more but just a line break, you can use <br> to separate some content (which can be also done with CSS). Also, there is a <hr> which is a horizontal rule that is a horizontal line. Both <br> and <hr> are self-closing tags.
<!DOCTYPE html>\n<html>\n <head>\n <title>HTML for beginners</title>\n </head>\n <body>\n <br>\n <hr>\n </body>\n</html>\nForms are an important part of a web page which will get some data from the user and send to the server, with HTML we are just looking for the form, we cannot add functionality. The form starts with the <form> element, and in most of the cases, the form will have an attribute action=\"some file\" which will submit the form to some page. Also there should be method attribute method=\"POST\" which in most of the cases will be post, which means we are doing a post request to the server, or simply we are sending some data to the server.
<!DOCTYPE html>\n<html>\n <head>\n <title>HTML for beginners</title>\n </head>\n <body>\n <!--Forms-->\n <form action=\"submit.php\" method=\"POST\">\n <label>First Name</label>\n <input type=\"text\" name=\"first_name\">\n <input type=\"submit\" name=\"submit\" value=\"Submit\">\n </form>\n\n </body>\n</html>\n\n\nThere are other HTTP requests too like, GET, POST, PUT, DELETE, etc.
\n
Inside the form, we have a <label> element, which is nothing more than just a label for an input field below of it which is declared with the element <input>. The input element has a couple of attributes like type=\"text\" which sets the type of the input field, the next is the name=\"first_name\" is the value which we give to the server-side. Also, you can see that the input element doesn't have a closing tag because it is self-closing. Also, we can use input elements like a button to submit the form which is the last input element in our example. The submit element has a type, name, and value, the first two we already know about them the last one the value is the text of the button.
We can also have a button independent from the form, we can declare a button with the <button> tag. For a button to do something we need to use JavaScript, but in this tutorial, we are gonna focus just on HTML, inside the button element we put the text for the button.
<!DOCTYPE html>\n<html>\n <head>\n <title>HTML for beginners</title>\n </head>\n <body>\n <!--Button-->\n <button>Submit</button>\n\n </body>\n</html>\nWe can use images in HTML with the <img> element, the image element is also with a self-closing tag. To display an image in the image element, we need to give it a source attribute with the src=\"image_path/url\", we can use images from local storage or we can use an image from the web. We can also set the width and height of an image with HTML.
<!DOCTYPE html>\n<html>\n <head>\n <title>HTML for beginners</title>\n </head>\n <body>\n <!--Image-->\n <img src=\"path\" width=\"300\"/>\n\n </body>\n</html>\nWith HTML5 we can enrich the semantic content of HTML documents, new page structure elements such as
<!DOCTYPE html>\n<html>\n <head>\n <title>HTML for beginners</title>\n </head>\n <body>\n <header><!--header--></header>\n <nav><!--navbar--></nav>\n <main><!--main_content--></main>\n <aside><!--sidebar--></aside>\n <footer><!--footer--></footer>\n </body>\n</html>\nhtml5 semantic example
\nYou can find the full code below
\n<!DOCTYPE html>\n<html>\n <head>\n <title>HTML for beginners</title>\n </head>\n <body>\n <header><!--header--></header>\n <nav><!--navbar--></nav>\n <main>\n <!--Headings-->\n <h1>Heading One</h1>\n <h2>Heading Two</h2>\n <h3>Heading Three</h3>\n <h4>Heading Four</h4>\n <h5>Heading Five</h5>\n <h6>Heading Six</h6>\n\n <!--Paragraph-->\n <p>\n Some random short or long <strong>paragraph</strong> text goes <em>here</em> \n if you want to learn more click <a href=\"www.google.com\">here</a>\n </p>\n\n <!--Lists-->\n <ol>\n <li>Item 1</li>\n <li>Item 2</li>\n <li>Item 3</li>\n </ol>\n\n <ul>\n <li>Item 1</li>\n <li>Item 2</li>\n <li>Item 3</li>\n </ul>\n\n <br>\n <hr>\n\n <!--Forms-->\n <form action=\"submit.php\" method=\"POST\">\n <label>First Name</label>\n <input type=\"text\" name=\"first_name\">\n <input type=\"submit\" name=\"submit\" value=\"Submit\">\n </form>\n\n <!--Button-->\n <button>Submit</button>\n\n <!--Image-->\n <img src=\"path\" width=\"300\"/>\n </main>\n <aside><!--sidebar--></aside>\n\n <footer><!--footer--></footer>\n </body>\n</html>\nindex.html
","frontmatter":{"path":"/html-for-beginners/","date":"2020-06-16T11:33:49.619Z","title":"HTML for Complete Beginners","author":"Aleksandar Vasilevski","image":"/assets/cover/html.png","category":"HTML","tags":"#html #webdev","featured":false}}},{"node":{"id":"64bc92dd-753e-553f-b1ca-196cecacd40f","html":"![\"javascript-logo\"](\"/assets/cover/web-development-courses.jpg\")
Web developers today are one of the most in-demand and very well paid. With the skill set of web developers, you can work in a company, as freelance or even you can make your web application to make money.
\nThere are Front-end, Back-end, and best of both worlds Full-stack web developers, a full-stack web developer has basic skills across a lot of platforms and technologies as well as deeper knowledge and specialization in some of those. Some of the skills a web developer should have are:
\nWant to become a web developer? Here’s a list of best courses and tutorials that will help you learn the right skills to start your career as a web developer and advance yourself as a full-stack web developer.
\nThe only course you need to learn web development - HTML, CSS, JS, Node, and More!
\n![](\"https://img-a.udemycdn.com/course/480x270/625204_436a_2.jpg\")
The Web Developer Bootcamp is a course by Colt Steele. This course can be a single web development course that you will ever need it because it covers almost everything from front-end to back-end and databases. The Web Developer Bootcamp has been enrolled by more than 500,000 students and it is very highly rated with reviews. This course is very friendly for beginners that take step by step to give students a good foundation in modern web development. The course covers a wide range of tools and technologies including HTML5, CSS3, JavaScript, Bootstrap 4, SemanticUI, DOM Manipulation, jQuery, Unix(Command Line) commands, NodeJS, NPM, ExpressJS, REST, MongoDB, Database Associations, Authentication, PassportJS, and Authorization.
\nWhether you’re a beginner or someone who needs a refresher on the basics or someone looking to learn new skills in web development, this course works perfectly for all.
\nStart The Web Developer Bootcamp
Learn Web Development by building 25 websites and mobile apps using HTML, CSS, Javascript, PHP, Python, MySQL & more!
\n![](\"https://img-a.udemycdn.com/course/480x270/764164_de03_2.jpg\")
The Complete Web Developer Course 2.0 again a very good course which will introduce to the web development. The Complete Web Developer Course 2.0 has been enrolled by 250,000 students. This course is great for beginners, you will get hands-on experience with building real projects with a wide range of technologies like HTML, CSS, Javascript, PHP, Python, MySQL.
\nYou will learn how to build your responsive websites with basic technologies like HTML, CSS, and JavaScript, also more advanced techniques such as jQuery, PHP, Python, MySQL and Twitter Bootstrap.
\nStart The Complete Web Developer Course 2.0
Learn React 16, Redux, D3, ES2015, Testing, CSS Flexbox, Animations, SVG, AJAX, and more!
\n![](\"https://img-a.udemycdn.com/course/480x270/1218586_9f86.jpg\")
The Advanced Web Developer Bootcamp is the next part of the first course by Colt Steele. This course is also highly rated with over 60,000 enrolled students. Starting this course will teach you the advanced web development technologies like React, Redux, D3, Testing, CSS Flexbox, Animations, SVG, and Ajax. As you learn, with this course you will develop real web applications using the latest state-of-the-art technologies. There are over ten projects with a lot of code challenges to master the material.
\nThis course is perfect for web developers who have a basic understanding of HTML, CSS, and JavaScript and want to explore more advanced concepts and technologies to become more successful in their career
\nStart The Advanced Web Developer Bootcamp
Master JavaScript with the most complete course! Projects, challenges, quizzes, JavaScript ES6+, OOP, AJAX, Webpack
\n![](\"https://img-a.udemycdn.com/course/480x270/851712_fc61_5.jpg\")
The Complete JavaScript Course 2020: Build Real Projects! is a course focused on learning JavaScript which is one of the most important parts of every Web Developer as you can use JavaScript today for both front-end and back-end development. This course is a bestseller with over 300,000 enrolled students and offers a lot of projects, challenges, quizzes which will help you in the learning process.
\nThis course is perfect for everyone who wants to dive deeper and master JavaScript with a lot of modern tools like ES6+, OOP, AJAX, Webpack
\nStart The Complete JavaScript Course 2020: Build Real Projects!
All four courses are great for learning Web development in depth. You don’t need to go through all of them, but I suggest you start with the first one if you are a beginner, happy learning!
","frontmatter":{"path":"/best-web-development-courses/","date":"2020-06-11T11:20:49.619Z","title":"Best Web Development Courses for Beginners (Updated 2021)","author":"Aleksandar Vasilevski","image":"/assets/cover/web-development-courses.jpg","category":"Courses","tags":"#html #css #js #javascript #nodejs #php #python #webdev","featured":false}}},{"node":{"id":"7c22b784-5174-550b-874a-0a304e603df0","html":"![\"javascript-logo\"](\"/assets/cover/javascript.png\")
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.
\nThe for loop statement has three expressions:
\nfor (initialization; condition; update statement) {\n // code block to be executed\n}\nfor loop syntax
\nExample of for-loop:
\nvar array = [\n {id: 0, name: 'John', age: 20},\n {id: 1, name: 'Jane', age: 22},\n {id: 2, name: 'Bob', age: 24},\n {id: 3, name: 'Ana', age: 26},\n];\n\nfor(let i = 0; i < array.length; i++){\n console.log(array[i].name);\n}\n\n/*\nOutput:\n John\n Jane\n Bob\n Ana\n*/\n\n\nA break statement can be used to stop the loop at any time.
\n
The while loop statement has one expression:
\nwhile (condition) {\n // code block to be executed\n}\nwhile loop syntax
\nExample of while-loop:
\nvar array = [\n {id: 0, name: 'John', age: 20},\n {id: 1, name: 'Jane', age: 22},\n {id: 2, name: 'Bob', age: 24},\n {id: 3, name: 'Ana', age: 26},\n];\n\nvar i = 0;\nwhile(i < array.length) {\n console.log(array[i].name)\n i++\n}\n\n/*\nOutput:\n John\n Jane\n Bob\n Ana\n*/\nThe do/while loop statement has one expressions:
\ndo {\n // code block to be executed\n} while (condition)\ndo/while loop syntax
\nExample of do/while loop:
\nvar array = [\n {id: 0, name: 'John', age: 20},\n {id: 1, name: 'Jane', age: 22},\n {id: 2, name: 'Bob', age: 24},\n {id: 3, name: 'Ana', age: 26},\n];\n\nvar i = 0;\ndo {\n console.log(array[i].name)\n i++\n} while(i < array.length)\n \n/*\nOutput:\n John\n Jane\n Bob\n Ana\n*/\nThe for/of loop statement has two expressions:
\nfor (value of iterator) {\n // code block to be executed\n}\nfor/of loop syntax
\nExample of for/off loop:
\nvar array = [\n {id: 0, name: 'John', age: 20},\n {id: 1, name: 'Jane', age: 22},\n {id: 2, name: 'Bob', age: 24},\n {id: 3, name: 'Ana', age: 26},\n];\n\nfor (let index of array) {\n console.log(index.name)\n}\n\n/*\nOutput:\n John\n Jane\n Bob\n Ana\n*/\nThe forEach() is a method of the array that uses a callback function to include any custom logic to the iteration. The forEach() will execute the provided callback function once for each array element.
\nThe callback function takes up 3 arguments:
\nThe thisArg (optional) - value for the callback function which will be used as its this value.
\narray.forEach(callback(currentValue [, index [, array]])[, thisArg]);\nforEach() loop syntax
\nExample of forEach():
\nvar array = [\n {id: 0, name: 'John', age: 20},\n {id: 1, name: 'Jane', age: 22},\n {id: 2, name: 'Bob', age: 24},\n {id: 3, name: 'Ana', age: 26},\n];\n\narray.forEach(function(profile, index, myArray) {\n console.log(`Index: ${index}, Name: ${profile.name}`);\n});\n\n/*\nOutput:\n John\n Jane\n Bob\n Ana\n*/\nThe map() method is very similar to the forEach() method as it will also execute the provided callback function for each element in the array. The difference between the two is that the map() method creates and returns a new array based on the result of the provided callback function.
\nThe callback function takes up 3 arguments:
\nThe thisArg (optional) - value for the callback function which will be used as its this value.
\nvar new_array = array.map(function callback(currentValue[, index[, array]]) {\n // Return element for new_array\n}[, thisArg])\nmap() loop syntax
\nExample of map():
\nvar array = [\n {id: 0, name: 'John', age: 20},\n {id: 1, name: 'Jane', age: 22},\n {id: 2, name: 'Bob', age: 24},\n {id: 3, name: 'Ana', age: 26},\n];\n\nvar newArray = myArray.map(function(profile, index, myArr) {\n var newProfile = {\n 'id': index,\n 'name': profile.firstName,\n 'age': profile.age\n }\n\n return newProfile\n})\n\nnewArray.forEach(function(profile, index, myArr) {\n console.log(profile.fullName)\n});\n\n/*\nOutput:\n John\n Jane\n Bob\n Ana\n*/\n\n","frontmatter":{"path":"/ways-to-loop-through-an-array-in-javascript/","date":"2020-06-10T11:10:49.619Z","title":"6 Ways to Loop Through an Array in JavaScript","author":"Aleksandar Vasilevski","image":"/assets/cover/javascript.png","category":"JavaScript","tags":"#js #javascript #array","featured":false}}},{"node":{"id":"a2e4e162-13da-51d8-a64d-73c6a2df23dc","html":"If you want to learn more about both methods forEach() and map(), you can check JavaScript Map vs ForEach Method
\n
![\"create-react-app-part-5\"](\"/assets/cover/create-react-app-from-scratch-part-5.png\")
This article is part of the ReactJS series, you can find the previous part on the following link: Create React App From Scratch Part 4: Styling Components.
\nAlmost every web application build with React will need to get some data from a server, because as you know React is just the frontend. Most of the time for making the data requests from the server we are using HTTP requests, there are other methods too but in this part, we will focus on HTTP requests. In single-page applications we are not getting HTML pages when we are sending requests to the server, instead, we will get JSON data, we can send JSON data to the server too. The server which will be responding to our requests is typically Restful API. In this tutorial, we will make the HTTP requests with Axios. Axios is a promise-based HTTP client for the browser and also for Node.js. If you want to read more in detail about Axios you can get more info at Guide to Axios js Http Client.
\n\n\nThere are other popular libraries for making HTTP requests as jQuery AJAX, window.fetch, etc.
\n
In the previous parts, we have created a basic react app, now it is time to get real data instead of the dummy data. Firstly thing what we need to do is to create the HTTP requests, but where are we gonna put them? React have a lifecycle in the future we will see how this lifecycle work in detail, now we will use ComponentDidMount() which is the place where we will make HTTP requests. Firstly we need to install Axios with npm install axios, then in the CryptoCurrencies container, on the top, we need to import Axios, and to create ComponentDidMount().
\n\nFor our request to return a date we will need some Rest API, I will be using CoinGecko, it is free with great documentation, you can find more info on\ncoingecko.com.
\n
Axios by default uses promises, in our example, we will use async/await, you can read more about it at Async JavaScript Part 3: Async/Await. lets see the example:
\nimport React, {Component} from 'react';\nimport Cryptocurrency from '../../components/Cryptocurrency/Cryptocurrency'\nimport {Container} from 'react-bootstrap'\nimport axios from 'axios'\n\nclass CryptoCurrencies extends Component {\n\n state = {\n coins: []\n }\n\n async componentDidMount(){\n try{\n let response = await axios.get('https://api.coingecko.com/api/v3/coins/')\n this.setState({coins: response.data})\n }catch(err){\n console.log(err);\n }\n }\n\n render(){\n const cryptocurrencies = this.state.coins.map(coin => {\n return <Cryptocurrency key={coin.id} name={coin.name} symbol={coin.symbol} price={coin.market_data.current_price.usd}/>\n })\n return(\n <Container>\n {cryptocurrencies}\n </Container>\n );\n }\n}\n\nexport default CryptoCurrencies;\nCryptoCurrencies.js
\nAs you can see we are getting the API response from the coingecko.com, then we are setting the response to the state. On the bottom firstly we are mapping every cryptocurrency to the Cryptocurrency component and we are outputting the list in the container.
\nIn this part, we have seen basics about how we can fetch data in the React components with Axios, and we have outputted that data instead of the old dummy data. HTTP requests are very important because almost any React application needs some data to display or send some data to the server.
\nIf you are interested to learn React much deeper, I recommend you to read this book:
\nThe Road to learn React: Your journey to master plain yet pragmatic React.js
\nIf you prefer a video course, I highly recommend you to take a look at this course on Udemy:
\n![](\"https://i.udemycdn.com/course/480x270/1362070_b9a1_2.jpg\")
React - The Complete Guide (incl Hooks, React Router, Redux)
The code from the course is available on GitHub: Create React App From Scratch on the branch: 05-http-requests.
\nYou can find the next part of the series here: Upcoming!
","frontmatter":{"path":"/create-react-app-from-scratch-part-5/","date":"2020-06-09T10:30:49.619Z","title":"Create React App From Scratch Part 5: Http Requests","author":"Aleksandar Vasilevski","image":"/assets/cover/create-react-app-from-scratch-part-5.png","category":"React","tags":"#react #js #javascript #createReactAppFromScratch #http #request","featured":false}}},{"node":{"id":"ea4cc04e-512a-56dc-a821-a5404a09ae35","html":"![\"deno-logo\"](\"/assets/cover/deno.png\")
Deno is a runtime for JavaScript and TypeScript based on the JavaScript V8 engine the same as the Node.js, and it is created by the same person as the Node.js, Ryan Dahl. Deno was announced by Dahl in 2018 during his talk \"10 Things I Regret About Node.js\". Deno aims to be a productive environment for the modern programming, like Node.js it is an event-driven architecture, with a set of non-blocking IO utilities, along with their blocking versions. Deno is used mostly for creating web servers. You can check the talk by Ryan Dahl on Youtube on the link below:
\n![\"deno\"](\"https://img.youtube.com/vi/YOUTUBE_VIDEO_ID_HERE/0.jpg\")
\n10 Things I Regret About Node.js - Ryan Dahl - JSConf EU
Let's see how does Deno look in some very simple code samples:
\nimport {serve} from 'https://deno.land/std@0.50.0/http/server.ts'\nconst s = serve({ port: 8000 });\nconsole.log(\"http://localhost:8000/\");\nfor await (const req of s) {\n req.respond({ body: \"Hello World\\n\" });\n} \nAs you can see we can use TypeScript out of the box with Deno (you can still use JavaScript), next interesting thing is that we can use the import syntax (if you worked with React or some modern JavaScript you should be familiar with it), and as we can see we don't need to install npm modules to import them, instead of with Deno we can import from URL. On the 4'th line, we can also see more modern JavaScript features that Deno is using like promises or async iterable (this is a for loop that goes through an infinite array of incoming events).
\nYou can find more info and documentation about Deno on Deno.Land
\nAs we said Deno and Node.js are both runtimes that are built on the V8 engine, the same engine used for Google Chrome. Both Deno and Node.js have internal event loops and provide a command line for running scripts. Deno is different from Node.js in the following aspects:
\nSource: Wikipedia
\nWill Deno replace Node.js? Deno is a replacement for Node.js, BUT! not in the sense that you should start learning it and using it right away, instead you could look at Deno because it might do the same thing as Node.js but on a better way. Deno is still in the early stages of development, and Node.js is used in many projects out there, this means that Node.js is not going out of the game anytime soon.
","frontmatter":{"path":"/what-is-deno-and-will-it-replace-nodejs/","date":"2020-05-20T11:50:00.619Z","title":"What is Deno and Will it replace Node.js?","author":"Aleksandar Vasilevski","image":"/assets/cover/deno.png","category":"Deno","tags":"#deno #javascript #typescript","featured":false}}},{"node":{"id":"542df460-a321-5380-8ffb-d7b1049b92fb","html":"
Before the ES6 was released, var was the only feature for declaring variables in Javascript. When the ES6 was released, one of the most interesting features was the addition of let and const for variable declarations. In this article we will see the difference between var, let and const.
The var declaration is the oldest of all and was used before the ES6 was released. There are associated issues with var declarations though. That's why new variable declarations were necessary.
The var declarations can be globally or locally scoped. If the var is declared outside a function it is globally scoped. This means that any var variables declared globally are available for use in the whole window. If the var is declared inside a function it is function scoped. This means that it is available and can be accessed only within that function. Let's see a simple example below.
var foo = \"foo\";\n\nfunction dummy(){\n var bar = \"bar\";\n}\nIn the example above foo is globally scoped because it exists outside a function, while bar is function scoped. This means we cannot access the bar variable outside of our dummy function.
In JavaScript, hoisting is a mechanism where variables and function declarations are moved to the top of their scope before the code is executed. This means if we do:
\nconsole.log(foo);\nvar foo = \"foo\";\nIt will be interpreted like this
\nvar foo;\nconsole.log(foo); //foo is undefined\nfoo = \"foo\";\nAs we can see var variables are hoisted to the top of its scope and initialized with a value of undefined.
\nIf we are using var declarations everywhere we can start getting problems and bugs with our code. Let's see an example of var issues below.
\nvar foo = \"bar is smaller\";\nvar bar = 5;\n\nif(bar > 3){\n var foo = \"bar is bigger\";\n}\n\nconsole.log(foo); //bar is bigger\nThis is not a problem if you want foo to be redefined, but it becomes a problem when you do not realize that a variable foo has already been defined before. This might cause a lot of bugs in the code. This is why the let and const are necessary for some situations.
\nThe let declaration is the preferred way for variable declaration after the ES6 was released, It is considered as an improvement to the var declarations.
The let declaration is block scoped (block is a piece of code encapsulated with \"{}\") this means a variable declared in a block with the let is only available for use within that block. Let's see an example about the let.
let foo = \"bar is smaller\";\nlet bar = 5;\n\nif(bar > 3){\n let foo = \"bar is bigger\";\n console.log(foo); //bar is bigger\n}\n\nconsole.log(foo); //bar is smaller\nWe can see that using foo outside its block its not updated from the block. This is because both instances of foo are treated as different variables since they have different scopes. If we want to update let like var we must do that inside its scope. Because of this, let is a better choice than var. When using let, you won't mess up if you have used a name for a variable before as a variable exists only within its scope.
\nSame as var, let variable declarations are hoisted on top, the difference is that with var is initialized as undefined, the let is not initialized. So if you try to access it you'll get a Reference Error.
The const declaration is very similar to let and as the name const says they maintain constant values.
Same as let declarations, const declarations are block-scoped and can only be accessed within the block it was declared. The biggest difference is that they cannot be updated or re-declared, this means the value remains the same with the scope. Also every const declaration, therefore, must be initialized at the time of declaration.
\nconst foo = \"foo\";\nfoo = \"bar\";//error : Assignment to constant variable. \nThe const declarations here are the same as let also. they are hoisted to the top but are not initialized.
\n","frontmatter":{"path":"/the-difference-between-var-let-and-const-in-javascript/","date":"2020-05-05T12:10:00.619Z","title":"The Difference Between var, let and const in JavaScript","author":"Aleksandar Vasilevski","image":"/assets/cover/javascript.png","category":"JavaScript","tags":"#javascript","featured":false}}},{"node":{"id":"eec108c6-9d71-56a1-8e25-8d28de8da85f","html":"If you want to learn more in-depth about scope in Javascript, I highly recommend you to check this book: You Don't Know JS: Scope & Closures
\n
![\"rubik-cube\"](\"/assets/cover/puzzle.jpg\")
![](\"/assets/samples/binary-search-1.png\")
\nThe binary search algorithm is a divide and conquer type algorithm, the idea behind the binary search is that the first comparison is done in the middle of the list if the item that we are searching for is it in the middle, the searching is complete, if the item we are searching is smaller then the item in the middle we are going to repeat the process on the left half of the list, or if the item we are searching is bigger then the item in the middle, we are going to search on the right side of the list. The initial size of searching is the entire list, but on each round, the size shrinks so the new size is half as big as the previous size. An important thing to remember about the binary search is that this type of search to work the list must be sorted in order. If the items in the list are not sorted, the most efficient search to be used is a linear search.
\n\nThe divide-and-conquer paradigm is often used to find an optimal solution to a problem. The basic idea behind divide-and-conquer is to decompose a given problem into two or more similar, but simpler, subproblems, to solve them in turn, and to compose their solutions to solve the given problem.
\n
A binary search algorithm is not too complex for implementation, and it is very practical if the list is sorted (as we said before if the list is not sorted the binary search algorithm will not work!). Let's see an example of a binary search algorithm in Python.
\ndef binarySearch(a, x):\n \"Binary search to find x in list a\"\n lower = -1\n upper = len(a)\n while upper > lower + 1:\n mid = (lower + upper) // 2\n if a[mid] == x:\n return mid\n if x < a[mid]:\n upper = mid\n else:\n lower = mid\n return None\nBinary search imlementation in Python
\nAt the start of our binary search algorithm example, we are defining a function named: binarySearch which accept two arguments(a and x) where a is the list and the x is the item we are searching for in the list. Inside the binarySearch function we have two variables lower and upper which will be the initial points where we start and stop with searching in the list. At any point in the binary search algorithm, lower will be one index less\nthen the index of the first item in the region and upper will be one more than the index of the last item in the region. The first step on each round of the binary search algorithm is to compute the location in the middle of the region. If the item we are searching for (x) is at that location the search terminates successfully. Otherwise, we need to find the middle of the region. It’s simply the index value that is halfway between lower and upper:
mid = (lower + upper) // 2
If the list item at this location is equal to x, the value we are searching for, we return mid as the final result. If the item is not at the midpoint we have to continue the search, and we will reduce the size of the region. To do that we simply have to move one of the boundaries so it is equal to the current midpoint.
For a given list with n size of items, the best case is when the value is equal to the first item of the list O(1), in which case only one comparison is needed. If we know that the item is in the list, the worst case will be the O(log n) eg. the first or the last item because we have to do a maximum number of comparisons. In terms of average performances, no search algorithm that works only by comparing items can have better average performance than binary search which is O(log n).
\n","frontmatter":{"path":"/algorithms-and-data-structures-binary-search/","date":"2020-04-13T21:40:00.619Z","title":"Data Structures and Algorithms: Binary Search","author":"Aleksandar Vasilevski","image":"/assets/cover/puzzle.jpg","category":"DSA","tags":"#algorithms #datastructures","featured":false}}},{"node":{"id":"1c30fda2-ebb0-5b38-8f80-a8756a07d0a5","html":"If you want to learn more in-depth about algorithms and data structures, I highly recommend you to check this book: Introduction to Algorithms, 3rd Edition (The MIT Press)
\n
![](\"/assets/samples/insertion-sort-1.png\"/)
\nInsertion sort is a simple sorting algorithm that builds the final sorted array one item at a time. This algorithm is a simple technique that is easy to understand and implement. The steps done by this algorithm are an iterative solution of how a complex problem can be solved by repeatedly executing very simple steps. To understand how the insertion sort works, imagine that you have a couple of cards in one hand and you need to put them in order of their rank. One way to do it is to make sure cards on the left side in your have been sorted. Then pick up the third card (which is first not sorted) and place it on proper order among the first two cards. At any point in this process, we have two parts, the left part which is sorted and the right part which is not sorted. After each round of insertions, the sorted part grows longer, and the algorithm stops when the last card has been placed where it belongs and the entire hand is sorted.\n![](\"/assets/samples/insertion-sort-2.gif\")
\n Insertion sort algorithm visual example
\nInsertion sort algorithm is simple to implement, if we want to write an insertion sort algorithm we will need to use a for-loop inside the main function which we will be using it to iterate over all of the elements in the list and a while-loop inside the helper function which will be doing the most of the work. Let's see an example of an insertion sort algorithm in Python.
\n#insertion sort function\ndef insertionSort(a):\n for i in range(1, len(a)):\n moveLeft(a, i)\n\n#helper function that moves a[j]\ndef moveLeft(a, j):\n x = a.pop(j)\n while j > 0 and a[j - 1] > x:\n j -= 1\n a.insert(j, x)\nInsertion sort imlementation in Python
\nAt the beginning of the example, we are defining a function insertionSort with one argument (a) which is the list. Inside the function, we have a for-loop that iterates through every element from the 1 (which is the second element, because the first is already sorted) to the end at the size of the list. Inside we have a helper function called moveLeft where we pass the reference to the list as the first argument a and the current index j. Removing the item at a specified location is straightforward, we simply need to call a method named pop defined in the list class, and it will remove the object at location j and saves it in x. On the next line, we have a while-loop that implements our leftward scan. Because j is the location where x was used to be, the first time the program executes the while-loop it will compare x to the item that was to its left. If the element on the left is larger it will need to go further to the left. The line with the j -= 1 in the while-loop subtracts one from j. On the last line, we simply insert the x at index j into the list a.
The best case input about the insertion sort algorithm is when the list is already sorted, which has a linear running time (i.e., O(n)). The worst-case input is when the list is sorted in reverse order, this gives us a quadratic running time (i.e., O(n2)). The average case is also quadratic, which puts insertion sort not very useful for sorting large lists. However, insertion sort is one of the fastest algorithms for sorting very small lists. For a given list with n size of items, the best case is when the value is equal to the first element of the list, in which case only one comparison is needed. The worst case is when the value is not in the list or occurs only once at the end of the list, in which case n comparisons are needed.
\n\n","frontmatter":{"path":"/algorithms-and-data-structures-insertion-sort/","date":"2020-03-06T19:20:49.619Z","title":"Data Structures and Algorithms: Insertion Sort","author":"Aleksandar Vasilevski","image":"/assets/cover/puzzle.jpg","category":"DSA","tags":"#algorithms #datastructures","featured":false}}},{"node":{"id":"61a1182f-ec59-5755-bb69-00376f77a407","html":"If you want to learn more in-depth about algorithms and data structures, I highly recommend you to check this book: Introduction to Algorithms, 3rd Edition (The MIT Press)
\n
![](\"/assets/samples/linear-search-1.png\")
\nAs 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.
A linear search algorithm is usually simple to implement and is practical when the list is short with only a few elements, or when we are performing a single search in an unordered list.\nIf we want to write a linear search algorithm obvious choice will be to use a for loop. To search the list we will be using a range expression to get all index values from 0 to the length of the list minus one. We will be testing every index in the body of the loop to see if it contains the item which we are searching for. Let's see an example of a linear search algorithm in Python using a for-loop.
\ndef linearSearch(a, x):\n for i in range (0, len(a)):\n if a[i] == x:\n return i\n return None\nLinear search imlementation in Python using for loop
\nAt the beginning of the example we are defining a function linearSearch with two arguments (a and x) where a is the list and the x is the element we are searching for. Inside the function, we have for-loop which iterate through every item from the start at 0 to the end at the size of the list. Inside the for-loop we are testing every index(a[i]) with the value of x, if the test is true we are returning the index where we wound the element. If the for-loop ends and no matching element is found in the list, the function will return None at the end.
We can also use a while-loop instead of for-loop for the linear search algorithm, using the for-loop the code look cleaner but at the end is the matter of writing style.
\nFor a given list with n size of items, the best case is when the value is equal to the first element of the list, in which case only one comparison is needed. The worst case is when the value is not in the list or occurs only once at the end of the list, in which case n comparisons are needed.
\n\n","frontmatter":{"path":"/algorithms-and-data-structures-linear-search/","date":"2020-03-03T13:20:49.619Z","title":"Data Structures and Algorithms: Linear Search","author":"Aleksandar Vasilevski","image":"/assets/cover/puzzle.jpg","category":"DSA","tags":"#algorithms #datastructures","featured":false}}},{"node":{"id":"e3e070c2-9615-5432-abb3-4d017d8948a8","html":"If you want to learn more in-depth about algorithms and data structures, I highly recommend you to check this book: Introduction to Algorithms, 3rd Edition (The MIT Press)
\n
JavaScript is a widely-used programming language today in web development, in both front-end and back-end development, and proper email validation is a must-know skill for every software developer.
\nWhen we are developing any website or application in JavaScript, we must create some kind of form from where we are getting the emails from the users. It is very important to validate the input field, before doing something else with that piece of information.
\nThere are many ways to validate email address, the three most popular ways are:
\nAs using regex expression is most popular, we will take a look at how we can validate an email address with a regex expression.
\nBefore we start writing the regex expression, we need to know the basics of email validation.
\nMost of the email addresses are with two parts, the local part and domain part.
\nThe local part of the email address can contain the following:
\nThe domain part of the email address can contain the following:
\nThere is no general expression to validate an email address. Every developer out there is using a different set of regex in their program to validate an email address. Before we use any regex in our code, we first need to validate it with testing some email addresses, both valid and invalid.
\n/^(([^<>()\\[\\]\\\\.,;:\\s@\"]+(\\.[^<>()\\[\\]\\\\.,;:\\s@\"]+)*)|(\".+\"))@((\\[[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}\\])|(([a-zA-Z\\-0-9]+\\.)+[a-zA-Z]{2,}))$/\nThe above example is a regex that can validate almost all (99%) of the email addresses.
\nconst validateEmail = (email) => {\n const re = /^(([^<>()\\[\\]\\\\.,;:\\s@\"]+(\\.[^<>()\\[\\]\\\\.,;:\\s@\"]+)*)|(\".+\"))@((\\[[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}\\])|(([a-zA-Z\\-0-9]+\\.)+[a-zA-Z]{2,}))$/;\n return re.test(email.toLowerCase());\n}\nIn the example above we have a simple JavaScript arrow function, which will validate any email address we insert. The code above is not hard to understand, we are simply using a regular expression to compare it with the email address provided after it is converted to lowercase.
\nWe have converted the most important parts about email validation in JavaScript using the regex expression, As you can see it is not hard at all, although the regex which we use is not easy to understand.
","frontmatter":{"path":"/javascript-email-validation/","date":"2020-02-13T19:30:49.619Z","title":"How to Validate Email Address in JavaScript","author":"Aleksandar Vasilevski","image":"/assets/cover/javascript.png","category":"JavaScript","tags":"#javascript #validation","featured":false}}},{"node":{"id":"6f250f20-808c-533b-8649-2f4034378c5f","html":"
To be able to see the bigger picture of some piece of code you must know how that particular programming language works under the hood. In this article, we will see how the JavaScript works behind the scenes.
\nEvery block of code written to work properly it needs some environment when it can run, and it is no different for the JavaScript too. Say hi to the Execution Context which is the place where the JavaScript code is running. To have a picture of the Execution Context, think of it like some kind of box, container or wrapper which stores variables and which a piece of JavaScript code is evaluated and executed.
\nThe default execution context is the global execution context, which means all of the code (variables and functions) that is not inside of any function is executed. You can think of this Global Execution Context as some global object which is the window object. Everything that we declare in the global context is attached to the window object, for example:
\nvar firstName = \"Ace\";\nfirstName === window.firstName // True\nDeclaring the variable firstName or window.firstName is the same thing, think of it like firstName is a property of window object.
What about the code that is in functions? each time we call a function, that function is getting a new execution context called function execution context on the top of the execution stack. Let's see some practical example:
\nvar name = \"Ace\";\n\nfunction first(){\n var a = \"Hello\";\n second();\n var x = a + name;\n}\n\nfunction second(){\n var b = \"Hi\";\n third();\n var z = b + name;\n}\n\nfunction third(){\n var c = \"Hola\";\n var z = c + name;\n}\n\nfirst();\nOur first declaration, the variable name is not in any function, which means we are in the global execution context. The function first(), function second() and function third() declarations are also in the same execution context. When we go to the last line (49) where the first() function is called, we will get a new execution context on the top of the execution stack. Every execution context that is on the top of the execution stack becomes an active context in which the code is executed.
Now inside our new execution context (line 33), we have a variable a stored, on the next line (34) we call the second function which again new execution context will be created on top of the execution stack, which also now becomes an active context.
Here inside the execution context of the second function, we have a variable b stored inline 39. Inline 40 we are calling the third function which will again create a new execution context on top of the execution stack.
Inside the execution context of the third function, we have a variable c and z and nothing more. So our third function has finished all of its work and we say that the function returns, and it's execution context it's removed from the top of the execution stack.
![\"execution-stack\"](\"/assets/samples/execution-stack.png\")
After that, the context of the second function which called the third function becomes the active context again, and we continue on line 41. Now the z variable is updated and the second function finishes all of its work and returns, which it's execution context is also removed from the stack.
Now the context of the first function is again the active context, and the code continues on line 35 where the x variable is updated and because there is no more work to be done inside the first function, we say again that the function returns and its execution context is removed from the execution stack.
As we said before we can associate an execution context with an object, this object has three properties:
\nNow let's see how the execution context is created. As we said before when a function is started an execution context is put on top of the execution stack, this process happens in two phases:
\nIn the creation phase we first have the creation of the Variable Object, second the creation of the Scope Chain, and at the end \"this\" variable is set.\nIn the execution phase, the code that generated the current execution context is run line by line, and all of the variables are defined. If it is the global context, then it is the global code that is executed.
\n\n","frontmatter":{"path":"/how-javascript-works-execution-context/","date":"2020-01-29T16:30:49.619Z","title":"How JavaScript Works: Execution Context","author":"Aleksandar Vasilevski","image":"/assets/cover/javascript.png","category":"JavaScript","tags":"#javascript","featured":false}}},{"node":{"id":"77f56526-c8e2-50ad-9b9a-26dd1fdef53d","html":"If you want to go deeper about how JavaScript works, I can recommend you to read this book: How JavaScript Works.
\n
Creating elements using HTML is not the only way to do it, although most of the time we are creating elements directly in the Html document because of simplicity, it is possible to be also done with JavaScript. In this article, we will take a look at how we can create elements with JavaScript only, and we will see how the JavaScript is doing that under the hood.
\n\n\nThe Document Object Model (DOM) is a platform and language-neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document.
\n
Creating DOM elements using js, adding text to the new element and appending the child to the Html body is not a hard task, it can be done in just a couple of lines of code. Let's see in the next example:
\nvar div = document.createElement('div'); //creating element\ndiv.textContent = \"Hello, World\"; //adding text on the element\ndocument.body.appendChild(div); //appending the element\nIn the example above, on the first line, we are creating new div with the method createElement() which has been called on the document object. In the method, we are passing an argument telling which element we want to be created. On the second line, we are using the textContent property to add text to our newly created element. Lastly, on the third line, we are using the document, body property to call the appendChild() method and pass our element we want to append to the body, in our case the newly created div element.
So as we can see, the code above is equivalent to:
\n<body>\n <div>Hello, World</div>\n</body>\nRemoving DOM elements is also simple and easy as creating DOM elements. Each DOM element has a property that’s the DOM element’s parent. To remove an element, we just need to call the removeChild() method, and pass the child element we want to remove as an argument to the same method:
div.parentNode.removeChild(div);\nAs you can see it is even simpler than creating elements!.
\nAs an alternative to vanilla JavaScript, we can use the jQuery library to do the same things as creating, adding, removing DOM elements, etc.
\nvar div = $('<div/>').text(\"Hello, World\").appendTo(document.body);\n\n\nIn the long run, using jQuery can be not the best thing because, with today's demand for modern technologies like React, vanilla JavaScript is a much better skillset.
\n
Now I hope you can understand how does the creating, adding and removing of DOM elements works in JavaScript and jQuery. If you find this article helpful feel free to share it.
","frontmatter":{"path":"/javascript-create-element/","date":"2020-01-22T10:40:49.619Z","title":"How to Create HTML Element in JavaScript","author":"Aleksandar Vasilevski","image":"/assets/cover/javascript.png","category":"JavaScript","tags":"#javascript","featured":false}}},{"node":{"id":"07d439b6-9f68-5582-9257-12c25e22485d","html":"![\"css-logo\"](\"/assets/css.jpg\")
Adding CSS hover effects to a web site is a great way to draw the attention of the users and make the website to be more engaging. In this article, you will learn how to do 10 simple CSS hover effects for your web site or blog.
\nBefore we start, we will set up a button with some Html and Css with very simple rules on it.
\n\n\nFor this article we will use the core CSS styles for all of the transitions and animations.
\n
<button>Hover Effects</button>\nbutton {\n border: none;\n background: #ff7a59;\n color: #fff;\n padding: 10px;\n font-size: 16px;\n border-radius: 5px;\n position: relative;\n box-sizing: border-box;\n transition: all 500ms ease; \n}\nNow let's see some easy CSS3 hover effects.
\nWe will start with the simplest hover effects of all, ghost button which change the color of the button on hover. This CSS hover effect is simple but very effective, great for almost every action button. To do it we just add a :hover on it with different values from the original:
button:hover{\n color: #ff7a59;\n border: #ff7a59 solid 1px;\n background:#fff;\n}\nThis effect is great to be used for functions, for example when doing some actions like submitting some form. This effect is a sliding icon that will appear next to the text when you hover over the button. Firstly we will add more padding because we need more room for the icon, also we will set the overflow to hidden:
\nbutton{ \n padding: 10px 40px; \n overflow:hidden;\n}\nThe next step is to add some icon (you can use Font Awesome) and in the ::before pseudo-element and set the position outside the button.
button:before {\n font-family: FontAwesome;\n content:\"\\f07a\";\n position: absolute;\n top: 11px;\n left: -30px;\n transition: all 300ms ease;\n}\nThe last thing which we need to do is to animate in the icon with setting the left property:
\nbutton:hover:before {\n left: 7px;\n}\nFade In effect is fairly commonly used because it is a great CSS effect to draw user attention to a call to action. Fade-in effects are in two steps, the initial phase, and the hover phase:
\nbutton{\n opacity:0.5;\n}\nbutton:hover{\n opacity:1;\n}\nLike the previous effect, this one is also great for getting the user's attention for a call to action because the button will grow when it hovers.
\nbutton:hover{\n -webkit-transform: scale(1.2);\n -ms-transform: scale(1.2);\n transform: scale(1.2);\n}\nFor this animated CSS effect, we are going to use some keyframes for the button to enable a bounce effect when it hovers. This effect is always effective for grabbing the user's attention.
\n@keyframes bounce {\n 0%, 20%, 60%, 100% {\n -webkit-transform: translateY(0);\n transform: translateY(0);\n }\n\n 40% {\n -webkit-transform: translateY(-20px);\n transform: translateY(-20px);\n }\n\n 80% {\n -webkit-transform: translateY(-10px);\n transform: translateY(-10px);\n }\n}\nAnd lastly, we just need to apply the animation on hover:
\nbutton:hover {\n animation: bounce 1s;\n}\nAnother great transition in CSS3 is the skew. Using this transition effects is incredibly simple, we just need to set it on hover:
\nbutton:hover {\n transform: skew(-10deg);\n}\nThis hover effect is very much similar to the ghost button, here instead of the regular border we will be doing a dotted border:
\nbutton {\n border: 3px solid #ff7a59;\n}\n\nbutton:hover {\n border: 3px dotted #ff7a59;\n color: #ff7a59;\n background: #fff;\n}\nOur last effect will make the button flipping over to show a message, which will be added in the after pseudo-element of the button. To do that, firstly we will set the button’s transform style to preserve-3d so that children of the element will preserve their 3D position:
\nbutton {\n transform-style: preserve-3d;\n}\nNext, we will set up the pseudo-element:
\nbutton:after {\n top: -100%;\n left: 0px;\n width: 100%;\n position: absolute;\n background: #ff7a59;\n border-radius: 5px;\n content: 'Flipped';\n transform-origin: left bottom;\n transform: rotateX(90deg);\n}\nAnd in the end, we just need to create the hover animation:
\nbutton:hover {\n transform-origin: center bottom;\n transform: rotateX(-90deg) translateY(100%);\n}\nAs you can see every CSS transition effect we have seen takes just a couple of minutes to be set up in any project, some of them can be done even in secondes!. I find the article helpful please share it.
","frontmatter":{"path":"/css-hover-effects/","date":"2020-01-21T13:00:00.619Z","title":"8 Easy CSS Hover Effects","author":"Aleksandar Vasilevski","image":"/assets/css.jpg","category":"CSS","tags":"#css #html #hover #effects","featured":false}}},{"node":{"id":"acbe61d2-e8cb-5f61-a7e1-ff66d49eeb15","html":"![\"you-dont-know-js-cover\"](\"/assets/cover/you-dont-know-js.jpg\")
There are many books about the JavaScript programming language out there, some of them are worth reading, some are not. In this article, we will take a close look at the You Don't Know JS.
\nYou Don't Know JS is not just one book but there are six of them. They are ordered below from the first to the last.
\nEven if your experience and knowledge in JavaScript are great and you think that you know everything about the language, every time you read these books again you will understand something much better or if you are reading them for the first time you will learn something new about the JavaScript programming language for sure.
\nThe first book \"Up & Going\" is mostly focusing on the basic building blocks of programming, and it is great for absolute beginners in programming. Up & Going will introduce you to things like operators, types, variables, conditionals, loops, functions, etc.
\nThe second book \"Scope and Closures\" as the name it is focused on in-depth inside scope and closures, which are the two core concepts you need to know to become a better JavaScript programmer. You will see how they work and why they are the trickier parts of the language that many JavaScript programmers are trying to avoid.
\nThird book of the You Don't Know JS series: this & Object Prototypes will take you to the JavaScript object-oriented programming, and why you need to use it. You will look into the nature of JavaScript objects, prototypes, classes, inheritance, etc.
\nThe fourth book of the series the Types & Grammar like the other books dives into trickier parts of the language. Many JS developers believe that JavaScript has no types. Is that true? read this book and find out.
\nThe fifth book Async & Performance focuses on asynchronous features and performance tweaks which include the usage of Promises, generators, and Web Workers, which let you create modern single-page web applications. This book is my personal favorite.
\nThe last book of the You Don't Know JS called ES6 & Beyond focuses on the modern part of the language. Here you will learn the ES6 syntax that will make your life much easier. You will take a look at how to organize your code with iterators, generators, modules, and classes.
\nAre You Don't Know JS the best JavaScript books? probably, especially if you are a big fan of the JS, if you are an absolute beginner and you want to dive into web development they are also a great way to learn JavaScript, if you are experienced programmer you will still learn a lot from them and in the end, these books are worth having them in your collection.
\nYou can check You Don't Know JS books on the links below:
\n\nYou Don't Know JS: Scope & Closures
\nYou Don't Know Js: this & Object Prototypes
\nYou Don't Know Js: Types & Grammar
\nYou Don't Know Js: Async & Performance
\nYou Don't Know JS: ES6 & Beyond
","frontmatter":{"path":"/review-you-dont-know-js/","date":"2020-01-18T10:15:49.619Z","title":"You Don't Know JS - Best JavaScript Books?","author":"Aleksandar Vasilevski","image":"/assets/cover/you-dont-know-js.jpg","category":"Books","tags":"#javascript #book #review","featured":false}}},{"node":{"id":"207c63f5-dc83-5a20-8c92-91e2dc74ead5","html":"
Arrays in JavaScript are list-like objects whose prototypes have methods to perform some operations on them. In this article, we will see the most important array methods in JavaScript, and how we can use them.
\nThe find() method returns the first found element in the array, tested with the provided function. If the element is found it returns undefined.
const someArray = [\n { id: 1, name: \"John\" },\n { id: 2, name: \"Smith\" },\n { id: 3, name: \"Bob\" },\n]\n\nsomeArray.find(element => element.id === 2)\n//-------> Output : {id: 2, name: \"Smith\"}\nThe findIndex() method returns the index of the first found element in the array, tested with the provided function. If the index is not found it returns -1.
const someArray = [\n { id: 1, name: \"John\" },\n { id: 2, name: \"Smith\" },\n { id: 3, name: \"Bob\" },\n]\n\nsomeArray.find(element => element.id === 2)\n//-------> Output : 2\nThe forEach() method uses a function on each element in the array.
const someArray = [\n { id: 1, name: \"John\" },\n { id: 2, name: \"Smith\" },\n { id: 3, name: \"Bob\" },\n]\n\nmyAwesomeArray.forEach(element => console.log(element.name))\n//Output : John, Smith, Bob\nThe map() method applies a function as a parameter and creates a new array populated with the results of the function on every element.
const someArray = [1, 2, 3, 4]\nsomeArray.map(x => x * x)\n\n// Output: 1, 4, 9, 16\n\n\nIf you are interested to read more in-depth about the
\nforEach()andmap()methods, you can check the JavaScript Map vs ForEach Method.
The flat() method creates a new array as a result that contains the element from the sub-array and flat them into the new array. Remember that this method will work only one level in depth.
const someArray = [1, [2, 3], [4, 5]]\nsomeArray.flat()\n\n//Output: [1, 2, 3, 4, 5]\nThe flatMap() method is a combination of the flat and map methods. This method uses a function on each element, which first maps each element using the map then flattens the result into a new array. This method only works on one level in depth.
const someArray = [[1], [2], [3], [4], [5]]\n\nsomeArray.flatMap(a => a * 10)\n\n//Output: [10, 20, 30, 40, 50]\nThe filter() method applies a function, which returns a new array with all elements that are passing the test.
const someArray = [\n { id: 1, name: \"John\" },\n { id: 2, name: \"Smith\" },\n { id: 3, name: \"Bob\" },\n]\n\nsomeArray.filter(element => element.name === \"Bob\")\n//Output: 0:{id: 3, name: \"Bob\"}\nThe sort() method sorts every element of the array and returns the sorted array. The sorting order by default is ascending.
const someArray = [4, 1, 3, 2]\n\n// Sort from smallest to largest\nsomeArray.sort((a, b) => a - b)\n//Output : [1, 2, 3, 4]\n\n// Sort from largest to smallest\nmyAwesomeArray.sort((a, b) => b - a)\n//Output : [4, 3, 2, 1]\n\n\nThe sort method is converting the elements into strings before comparing them if you want to read more about the sort method you can check the JavaScript Map vs ForEach Method.
\n
The push() method adds an element to the end of the array and returns the length of the array.
const someArray = [\"Tesla\", \"Audi\", \"BMW\"]\n\nconsole.log(someArray.push(\"Toyota\"));\n//output: \"4\"\n\nconsole.log(someArray);\n//output: Array [\"Tesla\", Audi\", \"BMW\", \"Toyota\"]\nThe unshift() method adds an element to the start of the array and also returns the new length of the array.
const someArray = [\"Tesla\", \"Audi\", \"BMW\"]\n\nconsole.log(someArray.unshift(\"Toyota\"));\n//output: \"4\"\n\nconsole.log(someArray);\n//output: Array [\"Toyota\", \"Tesla\", Audi\", \"BMW\"]\nThe shift() method removes the first element from the array and returns the element. Remember that using the shift method will change the length of the array.
const someArray = [\"Tesla\", \"Audi\", \"BMW\"]\n\nconsole.log(someArray.shift());\n//output: \"Tesla\"\n\nconsole.log(someArray);\n//output: Array [\"Audi\", \"BMW\"]\nThe pop() method removes the last element from the given array and returns the element. Remember that using the pop method will also change the length of the given array.
const someArray = [\"Tesla\", \"Audi\", \"BMW\"]\n\nconsole.log(someArray.pop());\n//output: \"BMW\"\n\nconsole.log(someArray);\n//output: Array [\"Tesla\", \"Audi\"]\nThese methods are just a few of the array methods available, there are more of them for example concat, every, length, slice, etc. If you want to check them all you can check the JavaScript documentation
","frontmatter":{"path":"/javascript-most-important-array-methods/","date":"2020-01-15T19:55:49.619Z","title":"Most Important Array Methods in JavaScript","author":"Aleksandar Vasilevski","image":"/assets/cover/javascript.png","category":"JavaScript","tags":"#javascript","featured":false}}},{"node":{"id":"c74661e5-f0c5-5152-a8ef-d9666cff338a","html":"
One of the best parts about the CSS3 is the animations and transitions, they are something we didn't have in the past, which it was required usage of JavaScript. Because they are so important in modern web development, there are great CSS libraries out there, one of them is the Animate.css library. In this article, we will take a close look at how to do CSS animations with Animate.css.
\nAs we have mentioned in the article intro, Animate.css is a CSS library that comes with cross-browser built-in animations that you can implement in your projects very fast and with ease. To start using the Animate.css library, the first thing is to download it from the GitHub page, and load the file in your HTML document:
\n<link rel=\"stylesheet\" href=\"css/animate.min.css\">\n\n\nAs an alternative to Animate.css you can always do animations with JavaScript.
\n
After this step, you will have access to every animation that is included in the library. To call an animation from the library on an element, you just need to give it the class animated space and then to put the name of the desired animation. You can find the list with the animation names here.
\nFor example, to use the \"bounce\" animation, you just need to do the following:
\n<div class=\"animated bounce\">Hello World</div>\nAfter you reload the page, you will see that the div element which we added in our exercise that will complete the bounce animation. But what if we want to do something like animate elements when the button is clicked or after some particular action done by the user, in most of the cases we are adding animations after a particular event. For completing that you will need just a little JavaScript for triggering the click event and also adding the classes to the desired element.
\nFor example, let's say that this is the HTML:
\n<button>Button</button>\n<section>\nSome random text...\n</section>\nWhat you want to do here is to animate the section using the fade animation, for example, when the user clicks on the button. To do this, first, you need to give it an opacity of 0, and after that, you just need to add the classes dynamically with JavaScript, like in code the example below:
\n$('button').click(function() {\n $('section').addClass('animated fadeInLeft');\n});\nYou can also modify the speed of the animations in your CSS:
\n.animated {\n -webkit-animation-duration: 500ms;\n -moz-animation-duration: 500ms;\n animation-duration: 500ms;\n}\nIt is also possible to change the delay time in the animation and the count of how many times it is played using the animation-delay and animation-iteration-count.
\nYou can also perform animation for the transition out after the first animation ends. To do this you need to use the one event and attach it to the end of the animation and simply add the class of the animation we want to use. You can also add a delay class that will allow you to have a delay between fade in and fade out.
\n$('section').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function() {\n $('section').addClass('delay fadeOutRight');\n});\nFor the CSS part of the code you simply need to add:
\n.delay {\n -animation-delay: 1s;\n -webkit-animation-delay: 1s;\n -moz-animation-delay: 1s;\n}\nAfter you refresh the page, you can see the fade-in animation, and after one second the fade-out animation too.
\n\n\nCSS animations in the Animate.css have cross-browser support for popular browsers.
\n
For everyone that likes to use CSS animations, knowledge of Animate.css can be essential to make things easy, smooth and simple. You can find the Animate.css on GitHub here. Thanks for reading, if you find this article helpful please share it.
","frontmatter":{"path":"/animate-css/","date":"2020-01-15T12:35:00.619Z","title":"How to do CSS Animations with Animate.css","author":"Aleksandar Vasilevski","image":"/assets/css.jpg","category":"CSS","tags":"#css #html #animations","featured":false}}},{"node":{"id":"35b620c2-8742-5c2c-b47e-e132e3525847","html":"
Every web developer has probably come across to of JavaScript map() and forEach(), two of the most widely used methods in programming. In this article, we will discuss the map() and forEach() method, the differences and usages between two in the JavaScript programming language.
\nNow let's understand what is going on in these two statements.
\nThe map() method calls a provided function on every element that it is in the array. The difference from the forEach() method is that the map() method utilizes return values and also returns a new array of the same size.
The forEach() method doesn't return anything, but it simply calls a provided function on every element in the array, also this callback can mutate the calling array.
Understanding from definitions can be a bit difficult, now let's see some code examples.
\nLet's say we have an array with the name \"exampleList\" and perform both the map and the forEach methods on this array, and see the differences between these two methods at the end.
\nlet exampleList = [1, 2, 3, 4, 5]\nexampleList.map(num => {\n return num * 2;\n});\nIn the code above, we are doing nothing more just multiplying each element of the \"listArray\" with the 2, which at the end we have a new array called \"mapListResult\", having the same size as the previous one.
\nResult:
\n2, 4, 6, 8, 10\nexampleList.forEach((num, index) => {\n return exampleList[index] = num * 2;\n});\nIn the code above we are doing the same thing as with the map() method but this time we are using the forEach() method.
2, 4, 6, 8, 10\nWe have seen the implementation between these two methods, which will give you a better picture of both of them. Now about the usage, if your only purpose is to iterate the array and perform some operations on the elements, it is better to use the forEach() method. On the other hand, if you need to transform the elements from the array then you should use the map() method, also if you want to filter the data after modifying it, map() method is better option, because it will create a new array, and you can perform operations on it.
\n\nIf you like functional programming, using
\nmap()method may be preferred, this is because the ForEach will affect and changes the original array, where Map returns an entirely new array without modifying it.
In development, we should always keep in mind the performance or speed factor for performing some operation of the code. Now let's see which one is the faster the map() or forEach() method.
map() method is faster then forEach() method in terms of speed. In practice you shouldn't be using the forEach() method until the map() method cannot do the required task.
\n\nBoth
\nmap()andforEach()methods are worse then the standardfor()loop when the speed is considered. But sometimes we may want to sacrifice speed for better code readability (cleaner code).
We have seen implementation and key differences between the Map and ForEach methods in JavaScript, I hope now you understand how and when to use these two methods in your projects. If you find this article helpful to you please share it, and thanks for reading.
","frontmatter":{"path":"/javascript-map-vs-foreach/","date":"2020-01-13T12:00:49.619Z","title":"JavaScript Map vs ForEach Method","author":"Aleksandar Vasilevski","image":"/assets/cover/javascript.png","category":"JavaScript","tags":"#javascript","featured":false}}},{"node":{"id":"8a275674-42f5-56dc-ac04-61f8ad6863a4","html":"![\"create-react-app-part-4\"](\"/assets/cover/create-react-app-from-scratch-part-4.png\")
This article is part of the ReactJS series, you can find the previous part on the following link: Create React App From Scratch Part 3: Working with Props.
\nIn the last parts of the series, we cover a lot about React components, but we have not touched the styling of the React components at all. In this part, we will see how we can style React components. There are a couple of ways to style React components, where all of them have some pros and cons. Let's see some of the ways to style React components.
\n\n\n\nIn this part, we are going to use some basics of the CSS FlexBox for additional styling of the React components. If you are not familiar with CSS FlexBox, you can check these two great books linked below to learn more.
\n
CSS: The Definitive Guide: Visual Presentation for the Web
\nThe first way to style a React component is to use the App.css file in the src folder. App.css is a global CSS file that will affect the style of all of the components in your React project. Pros for using App.css is that you can use pseudo selectors. The cons are that the file can become big and messy, and we cannot change styling dynamically (to use conditionals for example).
We can also use React inline styling, to do this we just need to declare style property on an element and set the style, but for cleaner code instead of writing the CSS on the line where the property is declared we will just pass the variable, like this:
\nconst style = {\n backgroundColor:'white',\n padding:'8px',\n border:'1px solid red'\n cursor:'pointer'\n}\n\n<button style={style} onClick={this.doSomething}>Some Button</button>\nPros for inline styling is that we can use conditionals if we need them in some cases when we want to set the style that depends on some value. This is possible because JSX is also JavaScript. The cons are that we cannot use pseudo selectors here.
\nThe third way to style React components it is with the CSS modules. CSS module is a file in which all class names and animations are scoped locally-e.g., every JS file will have CSS file which is scoped to that file. Later in this series, we will start using the CSS Modules.
\nNow as we have seen how we can style React components, before we start we will install React Bootstrap, to install React Bootstrap we will use the following commands:
\nnpm install react-bootstrap bootstrap\nnpm install bootstrap\n\n\nReact Bootstrap is the same as the regular bootstrap just it is implemented on a different way.
\n
Before we can use React Bootstrap we must add it on top of the src/index.js file.
\nimport 'bootstrap/dist/css/bootstrap.min.css';\nNow after everything is set up correctly we can start styling our first React component the Cryptocurrency component, which is the component for every item (coin) on the list.
\nconst styleCryptocurrency = {\n backgroundColor: \"white\",\n border: \"solid 1px gray\",\n padding: \"10px\",\n cursor: \"pointer\",\n display: \"flex\",\n flexDirection: \"row\",\n}\n\nconst styleName = {\n padding: \"0 5px\",\n flex: \"1\",\n color: \"#004e92\",\n}\n\nconst styleSymbol = {\n fontWeight: \"bold\",\n color: \"grey\",\n padding: \"0 5px\",\n marginLeft: \"20px\",\n flex: \"6\"\n}\n\nconst stylePrice = {\n padding: \"0 5px\",\n}\n\nconst cryptocurrency = (props) => (\n <div style={styleCryptocurrency}>\n <div style={styleName}>{props.name}</div>\n <div style={styleSymbol}>{props.symbol}</div>\n <div style={stylePrice}>{props.price}</div>\n </div>\n);\nHere we have added a couple of basic stylings for the component itself, name, symbol, and the price.\nAnd also we want to style our CryptoCurrencies component which is the container for the Cryptocurrency components.
\nimport {Container} from 'react-bootstrap';\n\nclass CryptoCurrencies extends Component {\n render(){\n return(\n <Container>\n <Cryptocurrency name=\"Bitcoin\" symbol=\"BTC\" price=\"7000\"/>\n <Cryptocurrency name=\"Ethereum\" symbol=\"ETC\" price=\"125\"/>\n <Cryptocurrency name=\"XRP\" symbol=\"XRP\" price=\"0.1\"/>\n <Cryptocurrency name=\"Bitcoin Cash\" symbol=\"BCH\" price=\"180\"/>\n </Container>\n );\n }\n}\nHere we have imported the Container from the React Bootstrap library, and we have replaced the parent div with the Container which under the hood is nothing more thana div with class container. When we see the app now it is still not looking great but it will be improved over time in the next parts.
\nIn this part, we have seen basics about how we can style React components also a couple of ways how we can do that, and when which one is best to be used. Later in the series, we will come back at styling React components when we will have dynamic data.
\nIf you are interested to learn React much deeper, I recommend you to read this book:
\nThe Road to learn React: Your journey to master plain yet pragmatic React.js
\nIf you prefer a video course, I highly recommend you to take a look at this course on Udemy:
\nReact - The Complete Guide (incl Hooks, React Router, Redux)
The code from the course is available on GitHub: Create React App From Scratch on the branch: 04-styling-components.
\nNext part: Create React App From Scratch Part 5: Http Requests
","frontmatter":{"path":"/create-react-app-from-scratch-part-4/","date":"2020-01-09T21:10:49.619Z","title":"Create React App From Scratch Part 4: Styling Components","author":"Aleksandar Vasilevski","image":"/assets/cover/create-react-app-from-scratch-part-4.png","category":"React","tags":"#react #js #javascript #createReactAppFromScratch #components #style #css","featured":false}}},{"node":{"id":"888352dd-3008-5119-b19a-5739d6f32385","html":"![\"nodejs-heroku-logo\"](\"/assets/cover/productivity-room.jpg\")
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.
\nAlmost every developer has some hierarchy of daily tasks in some sort of to-do list. If you focus on simply checking off to-do list items, you’ll end up with a mix of important and less important tasks completed. This habit can also expose you to spending the whole day checking off easy, less important to-dos instead of finishing some of the hard stuff. Instead of doing this, you should spend a couple of minutes at the beginning of your workday to chose a couple of most difficult tasks and do them, no matter what, you need to finish by the end of the day.
\nMost of the way then we see some hard task it looks too daunting and we want to skip it somehow, you look at the task and think “I don’t even know where to start.” I bet you hear about divide and conquer algorithm, here we can reuse the same principle for the work-related tasks. For example, if you have a task that says \"write a blog post on productivity\" you can break that task into smaller parts like: \"look for keywords related to productivity\", \"Find 5 examples of productivity posts\", etc.
\nDistractions are the biggest enemy of productivity not just for developers but in every profession, so you need to find a way to ignore them as much as it is possible. For example, often checking work-related stuff like emails, chats, etc, can be seen as work-related but spending too much time on these things will make you not finish anything at the end of the day. So the best thing is to make some patterns, for example, to check emails two times a day, switching off notifications from social channels, etc
\n\n\nNobody can stay focused for eight hours a day without taking breaks, not even highly focused people. There are many kinds of research done that are showing that taking a break at least a few minutes long can help you to feel more focused and come up with new ideas. There is one famous technique for taking breaks called Pomodoro Technique that uses a tomato-shaped timer to measure time. It works with 25 minutes time blocks with 5 minute short breaks and 10 minutes long breaks. The Pomodoro Technique is so much popular in the developer community that there are even Pomodoro Apps you can use it.
\nProgrammer productivity starts with a good code editor. There are great Code Editors or IDE's out there, and it is not easy to tell which one is the best, and also it depends on your needs. To find the best code editor for you, it is best to try different code editors to see which one fits you the best. When searching for the best code editor there are few things to remember:
\nToday automating repetitive tasks is a must as a developer or programmer. In the development phase, this can be a lot of things like learning common keyboard shortcuts in your code editor or IDE or refactoring the name of a variable or function in more than one place (which are connected with the last tip about the best code editor). Knocking these things from your work-flow can save you lots of energy and time, and make you much better on focusing on other more important things.
\nScheduling your tasks in advance can greatly improve your productivity. You can create a to-do list for your tasks using to-do apps like Notes - Notepad and Memo App. When using task scheduling apps, too much complexity can even lead to a loss of productivity. So the app should be simple enough and still useful like the app linked above, it is easy to get lost in some big apps in doing very simple things.
\nOne of the best habits for every programmer is to use the CLI (Command Line Interface) instead of GUI (Graphical User Interface), this will greatly speed up the development process and at the end, good knowledge of the CLI commands is an important programming skill that will greatly improve your market value when you will be looking for a new programming related job and will make your work-flow look much more confident and professional.
\nIf you follow these productivity tips, you can make your working hours much more efficient and also improve your development workflow at the same time. At start picking, new habits can be hard but quickly will become natural. Experimenting new things is key in productivity when you try new thing that or tool it is not working on you skip it and move to the next one, until you find the best tools and techniques.
\nI will highly recommend you to read these two great books about productivity:
\nGetting Things Done: The Art of Stress-Free Productivity
\nThe 4-Hour Workweek: Escape 9-5, Live Anywhere, and Join the New Rich
","frontmatter":{"path":"/productivity-tips-for-developers-and-programmers/","date":"2020-01-05T14:30:00.619Z","title":"8 Best Productivity Tips for Developers and Programmers","author":"Aleksandar Vasilevski","image":"/assets/cover/productivity-room.jpg","category":"Tips","tags":"#tips #productivity","featured":false}}},{"node":{"id":"d0cc9eff-b91f-58a4-aa93-2cfe00cfb46e","html":"![\"nodejs-heroku-logo\"](\"/assets/cover/nodejs-heroku.png\")
In the last couple of years, Node.js has become one of the most preferred technology for building backend services, with the rise of microservices, Node.js has become even more desirable. That is because it is fast, stable, and almost every web developer today know JavaScript. The last phase of building the Node.js app is to find good and cheap hosting. In this article, we will see how to deploy Node app to Heroku.
\nHeroku is a cloud application platform that allows developers to deploy, manage and scale modern apps. Heroku platform is elegant, flexible, and easy to use, which in the end, it is offering to the developers the simplest path to get their apps on the market. Heroku officially supports most of the programming language used today for building backend services like Node.js, Ruby, Java, PHP, Python, Go, Scala, Clojure and in addition to the officially supported languages, you can use any language that runs on Linux with Heroku via a third-party build-pack.
\n\n\nIn this article we are using the Node.js app for the examples, but the process is very similar if you are using other programming languages or frameworks as well.
\n
To deploy node app on Heroku, firstly you need a Heroku account, which you can create for free in a couple of minutes. When you sign in to the Heroku, on the first screen you will see all your deployed applications and a button named new, which is what we are looking for, and in the dropdown menu, we need to select create a new app, as in the picture below.
\n![\"heroku-example-1\"](\"/assets/heroku/heroku-admin-01.jpg\")
The next step in the app deployment is the create a new app screen, where you need to pick a name for the app and chose the region where the app will be hosted. as it is shown below.
\n\n\nChosing proper region is important as will reduce the lag in the app
\n
![\"nodejs-example-2\"](\"/assets/heroku/heroku-admin-02.jpg\")
In this step, you have a much detailed screen, where you need to connect the repository with your node.js application with the Heroku. There are a couple of ways to do that, one is to use Heroku Git, but the preferred option is to have the Node.js application on GitHub and to connect the Heroku with the repository. To do that you need to select connect to GitHub, like in the example below.
\n![\"nodejs-example-2\"](\"/assets/heroku/heroku-admin-03.jpg\")
When you select the connect to GitHub option you will need to search for the repository on GitHub after that new options will appear on the screen when you need to choose a branch to deploy, and here you can enable automatic deploys from GitHub, which will update automatically when the branch is updated. When everything is ready you just need to press the deploy branch button, and if everything is ok with the app, after a couple of seconds the message \"Your app was successfully deployed\" should appear, which means your application is live.
\nIf there are problems during the deployment you can check the activity tab on the top which has log messages. In the settings tab, you can Config Vars, where you can set your environment variables for production.
\nAs we can see from the steps above, deployment of the app on Heroku is not hard at all, it can be done in a couple of minutes. There are many more tools that the Heroku platform offers to the developers, there are priced packages too, which are also great if you have a bigger app. In the end, I hope you can understand how to deploy the Node app to Heroku if you find this article useful please share it.
","frontmatter":{"path":"/how-to-deploy-node-app-to-heroku/","date":"2020-01-02T11:00:00.619Z","title":"How to Deploy Node App to Heroku","author":"Aleksandar Vasilevski","image":"/assets/cover/nodejs-heroku.png","category":"Nodejs","tags":"#nodejs #expressjs #javascript #heroku","featured":false}}},{"node":{"id":"1d433663-12eb-57fe-b066-1201747247e1","html":"![\"create-react-app-part-3\"](\"/assets/cover/create-react-app-from-scratch-part-3.png\")
This article is part of the ReactJS series, you can find the previous part on the following link: Create React App From Scratch Part 2: Into Components.
\nIn the last part, we talked a lot about React components and we have added two of them. Now we need to add one more React component, the cryptocurrency component, which will be rendered for every cryptocurrency we have on the list. We will nest all of the cryptocurrency components inside the container component called CryptoCurrencies.js.\nTo start with it, we will create a folder inside the components folder called Cryptocurrency, we are creating the folder here because this component will be presentational only (it's not going to manage any state). Inside our new folder, we will make a new React component called CryptoCurrencies.js, which will be again a functional component. Let's see how it looks in the next example.
import React from 'react';\n\nconst cryptocurrency = (props) => (\n <div>\n <span>{props.name}</span> | <span>{props.symbol}</span> | <span>{props.price}</span>\n </div>\n);\n\nexport default cryptocurrency;\nAs you can see now we have added three span elements, which are temporary just for better formating, and inside we are using the props to access the data passed from the parent component which we will be adding next.
\n\n\nNote: The props argument is just properties passed to this component, and you can name it how you want to, but the name \"props\" is used as default.
\n
Until now our components don't do anything in our app, also they are not holding any data, now we will change this. Before we are showing dynamic data fetched from a Rest API, we will test our app with dummy data. As we talked in the last part, our Cryptocurrencies.js component will be responsible for storing the data. Let's add some dummy data and see how it looks like in the next example.
import React, {Component} from 'react';\nimport Cryptocurrency from '../../components/Cryptocurrency/Cryptocurrency'\n\nclass CryptoCurrencies extends Component {\n render(){\n return(\n <div>\n <Cryptocurrency name=\"Bitcoin\" symbol=\"BTC\" price=\"7000\"/>\n <Cryptocurrency name=\"Ethereum\" symbol=\"ETC\" price=\"125\"/>\n <Cryptocurrency name=\"XRP\" symbol=\"XRP\" price=\"0.1\"/>\n <Cryptocurrency name=\"Bitcoin Cash\" symbol=\"BCH\" price=\"180\"/>\n </div>\n );\n }\n}\n\nexport default CryptoCurrencies;\nFirstly we have added new import which is the new component we have created at the beginning called cryptocurrency, and inside the cryptocurrencies container, we have added a couple of new components with some dummy data that we will render inside them, which they are accessing through props.
\n\n\nNote: In React when state changes, the component will re-render and will show the new state.
\n
Now our components tree look like this:
\n![\"component-tree\"](\"/assets/samples/create-react-app-from-scratch-components-tree-3.png\")
\n\nNote: For now, our components have just a basic look, but we will style them later in the series.
\n
In this part, we have seen more on components to React as we created one more component called Cryptocurrency. We have also seen what is props and how we can pass it or access inside of our components.
\nTo learn React much deeper, I recommend you to read this book:
\nThe Road to learn React: Your journey to master plain yet pragmatic React.js.
\nIf you prefer a video course, I highly recommend you to take a look at this course on Udemy:
\nReact - The Complete Guide (incl Hooks, React Router, Redux)
The code from the course is available on GitHub: Create React App From Scratch on the branch: 03-working-with-props.
\nNext part: Create React App From Scratch Part 4: Styling Components
","frontmatter":{"path":"/create-react-app-from-scratch-part-3/","date":"2019-12-25T23:00:49.619Z","title":"Create React App From Scratch Part 3: Working with Props","author":"Aleksandar Vasilevski","image":"/assets/cover/create-react-app-from-scratch-part-3.png","category":"React","tags":"#react #js #javascript #createReactAppFromScratch #components","featured":false}}},{"node":{"id":"1791b62b-2e73-5980-9d1f-93a77471e4d9","html":"![\"head-first-java-cover\"](\"/assets/cover/head-first-java.jpg\")
Learning a new Programming language is not an easy task, and to learn a new language the best way is to read a book. If you check the Top 50 books on Amazon in the Computers and Internet (C&I) section you will for sure find a book from the Head First series. Head First Java written by Kathy Sierra, is a book about the Java Programming Language, first published in 2003, since then it is one of the best books to start learning the Java Programming Language. As with the other books in the series Head First. The format of every Head First book in the series is somewhat different from the other books, and that is same for the Head First Java which is rich with pictures, quizzes, tips and tricks to make the learning of the particular topic much easier.
\nThe learning approach in the book is mostly object-oriented, this is great because if you are a beginner you will gain the right mindset on object-oriented programming. The book is a little under 700 pages, and there are 18 chapters.
\nHead First Java covers every aspect of the Java programming language for starters. It starts with some basic topics around the programming and from one to another chapter it goes on more complex things.
\nOverall head First Java has a heavy emphasis on object-oriented philosophy. It is a great book to get started with Java, but as we saw in the topic above, as we go from one to another it also covers some of the more advanced topics, which means it offers much more than just introduction.
\nYou can find the Head First Java on the link below on Amazon:
\n\n![\"create-react-app-part-2\"](\"/assets/cover/create-react-app-from-scratch-part-2.png\")
This article is part of the ReactJS series, you can find the previous part on the following link: Create React App From Scratch Part 1: Setting Up.
\nIn the last lecture, we have mentioned the React components, and we have edited the App.js component. Now let's dive deeper into the components. React is everything about creating components, which are custom Html elements, where later we use them to build our ReactJS application. This App.js component which we saw in the last part of the Create React App From Scratch, is used into the index.js where we render it into the root element. Typically you render one root component, in our case the App component (but we can name it whatever we want) and inside of it, you will nest all other React components. The best thing about React components is that we can reuse them.
\n\nNote: You can render normal Html elements instead of React components.
\n
There are two ways to define a React component. The first way to define component is class-based, where we create a JavaScript class. The other way is function-based, where we create a JavaScript function.
\n![](\"//ws-na.amazon-adsystem.com/widgets/q?_encoding=UTF8&MarketPlace=US&ASIN=0596009208&ServiceVersion=20070822&ID=AsinImage&WS=1&Format=_SL250_&tag=aleksandarvas-20\")
![\"\"](\"//ir-na.amazon-adsystem.com/e/ir?t=aleksandarvas-20&l=am2&o=1&a=0596009208\")
import React, {Component} from 'react';\nimport './App.css';\n\nclass App extends Component{\n render(){\n return(\n <div className=\"App\">\n <h1>Hello, World!</h1>\n </div>\n );\n }\n}\n\nexport default App;\nClass-based React component
\nThe first way for creating React components is class-based were at the top we are importing the React and Component from the React library, after that we are creating JavaScript class and then we extend the Component class. Inside the class we have the render method, this method is important because React calls this method to render something on the screen, and inside the render method we are returning (rendering) some code. And at the bottom, we export the App class.
\n\n\nNote: The code inside the components looks like Html but it is called JSX. JSX is JavaScript that looking a bit different.
\n
import React from 'react';\nimport './App.css';\n\nfunction App() {\n return (\n <div className=\"App\">\n <h1>Hello, World!</h1>\n </div>\n );\n}\n\nexport default App;\nFunction-based React component
\nThe second way for creating React components is function-based, basically is the simple JavaScript function which returns some JSX code, and it is exported at the end. Like in the class component we still need to import the React library at the top of the component, but here we don't need the component import. This is the simplest form, but the recommended way is the ES6 function syntax, which we will be using for creating the next components.
\n\n\nNote: We can do other stuff inside the components like connecting to the internet, doing calculations, listen to events, etc.
\n
We have seen what are the components, but we still have just one compnent. Now let's start creating more of them. Firstly we will add the layout component, we want to use this layout component as a wrapper. It is fine even if we used the App.js becouse it is the root component. For now we want our component tree to look like this:
\n![\"component-tree\"](\"/assets/samples/create-react-app-from-scratch-components-tree-1.png\")
To start with, we want to have two new folders inside the src folder, components, and containers. In the components folder, we will be storing the presentational components that are not holding any state (we will look at the state later), and in the containers folder, we will be storing the state full components. Now we are going to create the layout component in the components folder because right now we don't need to manage any state inside of it. Inside components, we are going to create a subfolder named Layout, and inside we will create the Layout.js file. So we have nicely structured components in separate folders.
Inside the Layout.js we will create a functional component but now we will start using ES6 syntax as I said earlier. Firstly we will import the React library at the top, inside the component, first we need to create a parent div, because there should be one parent element in every React component, and at the top, for now, we will create just a placeholder div with the keyword toolbar inside it (later we might add more). Below that we will create the main element that we have from the Html, here we are going to output the component we wrap this layout, we will use {props.children}. With this, we can use this layout component as a wrapper around the content component. Lastly at the bottom we will export our component. And we got the following code:
import React from 'react';\n\nconst layout = (props) => (\n <div>\n <div>Toolbar</div>\n <main>\n {props.children}\n </main>\n </div>\n);\n\nexport default layout;\nNow we simply need to use this component in the App.js file. To use it we will import the component at the top, and then simply use it inside the parent div with some test paragraph, as the following example:
\nimport React from 'react';\nimport './App.css';\nimport Layout from './components/Layout/Layout'\n\nfunction App() {\n return (\n <div>\n <Layout>\n <p>Test</p>\n </Layout>\n </div>\n );\n}\n\nexport default App;\nNow let's make our Cryptocurrency component, which will actually be a container because here we will manage the state for the cryptocurrencies. We will create a new folder in the container folder which we will name it CryptoCurrencies, and inside that folder we will make our container component named CryptoCurrencies.js which will be class component becouse it is easier to manage the state. At the end it should look like this:
\nimport React, {Component} from 'react';\n\nclass CryptoCurrencies extends Component {\n render(){\n return(\n <div>\n <div>Currency1</div>\n <div>Currency2</div>\n <div>Currency3</div>\n </div>\n );\n }\n}\n\nexport default CryptoCurrencies;\nThis component is a list with Html elements as placeholders for now, but in the future that will change, as we will add components instead of them. Lastly we need to import this component to the App.js like we did with the last one. The App.js final code should look like this:
\nfunction App() {\n return (\n <div>\n <Layout>\n <CryptoCurrencies />\n </Layout>\n </div>\n );\n}\nAnd the components tree will look like this:
\n![\"component-tree\"](\"/assets/samples/create-react-app-from-scratch-components-tree-2.png\")
Now when we go to the localhost:3000 we can see our app, with the toolbar placeholder on top and the dummy list after. In later parts, we will apply styling to it and will look much better.
In this part we have seen, what is a component in React, the difference between class and function components. In the end, we created our first component the layout component which will be our wrapper around the other content, and the CryptoCurrencies component which is a list that will hold the future CryptoCurrency component.
\nTo learn React much deeper, I recommend you to read this book:
\nThe Road to learn React: Your journey to master plain yet pragmatic React.js.
\nIf you prefer a video course, I highly recommend you to take a look at this course on Udemy:
\nReact - The Complete Guide (incl Hooks, React Router, Redux)
The code from the course is available on GitHub: Create React App From Scratch on the branch: 02-into-components.
\nNext part: Create React App From Scratch Part 3: Working with Props
","frontmatter":{"path":"/create-react-app-from-scratch-part-2/","date":"2019-12-18T13:55:49.619Z","title":"Create React App From Scratch Part 2: Into Components","author":"Aleksandar Vasilevski","image":"/assets/cover/create-react-app-from-scratch-part-2.png","category":"React","tags":"#react #js #javascript #createReactAppFromScratch #components","featured":false}}},{"node":{"id":"24ac14db-2851-5f58-8c21-c9a2017ff48a","html":"![\"create-react-app-part-1\"](\"/assets/cover/create-react-app-from-scratch-part-1.png\")
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.
\n\n\nNote: To follow this ReactJS course series you should have some basic knowledge in JavaScript programming language, even better if you know ES6.
\n
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:
\nnode -v\nIf 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.
\nSetting 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:
\nnpx create-react-app crypto-app\nFeel free to name your app differently if you want to, but in my case, I will name the app crypto-app.\nAfter 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:
\nnpm start #starts the development server\nnpm run build #bundles the app into static files for production\nnpm test #starts the test runner\nTo 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.
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.
\n- node_modules - contains all node dependencies\n- public - public files that are served\n- src - source code of our ReactJS app\n.gitignore - record which files should git ignore\npackage-lock.json - contains an exact, versioned dependency tree\npackage.json - contains various metadata relevant to the project \nREADME.md - readme markdown file\nFirst, 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>\n<html lang=\"en\">\n <head>\n <meta charset=\"utf-8\" />\n <link rel=\"icon\" href=\"%PUBLIC_URL%/favicon.ico\" />\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n <meta name=\"theme-color\" content=\"#000000\" />\n <meta\n name=\"description\"\n content=\"Web site created using create-react-app\"\n />\n <link rel=\"apple-touch-icon\" href=\"%PUBLIC_URL%/logo192.png\" />\n <link rel=\"manifest\" href=\"%PUBLIC_URL%/manifest.json\" />\n <title>React App</title>\n </head>\n <body>\n <noscript>You need to enable JavaScript to run this app.</noscript>\n <div id=\"root\"></div>\n </body>\n</html>\n\n\nNote: I have deleted the comments so the file will look a bit cleaner, as it is not that complex as it looks like.
\n
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';\nimport ReactDOM from 'react-dom';\nimport './index.css';\nimport App from './App';\nimport * as serviceWorker from './serviceWorker';\n\nReactDOM.render(<App />, document.getElementById('root'));\n\n// If you want your app to work offline and load faster, you can change\n// unregister() to register() below. Note this comes with some pitfalls.\n// Learn more about service workers: https://bit.ly/CRA-PWA\nserviceWorker.unregister();\nHere 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';\nimport logo from './logo.svg';\nimport './App.css';\n\nfunction App() {\n return (\n <div className=\"App\">\n <header className=\"App-header\">\n <img src={logo} className=\"App-logo\" alt=\"logo\" />\n <p>\n Edit <code>src/App.js</code> and save to reload.\n </p>\n <a\n className=\"App-link\"\n href=\"https://reactjs.org\"\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n >\n Learn React\n </a>\n </header>\n </div>\n );\n}\n\nexport default App;\nHere 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!.
\nimport React from 'react';\nimport './App.css';\n\nfunction App() {\n return (\n <div className=\"App\">\n <h1>Hello, World!</h1>\n </div>\n );\n}\n\nexport default App;\nApp.js
\nBecause 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 {\n text-align: center;\n}\nApp.css
\nThe rest of the files are the serviceWorker.js which is related to the progressive web app, and some files related to unit testing.
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.
\nTo learn React much deeper, I recommend you to read this book:
\nThe Road to learn React: Your journey to master plain yet pragmatic React.js.
\nIf you prefer a video course, I highly recommend you to take a look at this course on Udemy:
\nReact - The Complete Guide (incl Hooks, React Router, Redux)
The code from the course is available on GitHub: Create React App From Scratch on the branch: 01-setting-up.
\nNext part: Create React App From Scratch Part 2: Into Components
","frontmatter":{"path":"/create-react-app-from-scratch-part-1/","date":"2019-12-16T13:25:49.619Z","title":"Create React App From Scratch Part 1: Setting Up","author":"Aleksandar Vasilevski","image":"/assets/cover/create-react-app-from-scratch-part-1.png","category":"React","tags":"#react #js #javascript #createReactAppFromScratch","featured":false}}},{"node":{"id":"cfa301e1-506d-5ff7-aa12-77b778b7b58f","html":"![\"axios-http-client\"](\"/assets/cover/books-row.jpg\")
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.
\nI have sorted the list by the types of books that I think are the most important. In this list about best books for programmers, you will find books that are foundational to topics in computer science that will introduce you to the major programming concepts, will improve the way you think and your problem-solving ability. You will also find books that will help you write clean code and structure your code greatly. On the list, you will find books that will help you to advance your career as a programmer. And lastly, you will find books that will help you to grow as a person and to achieve the goals you want to achieve in your life. Many of the books listed are also used as textbooks in many computer science and software engineering universities around the world.
\nThere might be affiliate links on this page, which means we get a small commission of anything you buy. As an Amazon Associate we earn from qualifying purchases.
\nThese programming books are about foundations in programming, some of them are mainly used in universities are textbooks. For people that are coming from other fields into software development, they are highly recommended.
\n\n![\"introduction-to-computing\"](\"/assets/books/introduction-to-computing.jpg\")
\n![\"explorations-in-computing\"](\"/assets/books/explorations-in-computing.jpg\")
\n![\"structure-and-interpretation-of-computer-programs\"](\"/assets/books/structure-and-interpretation-of-computer-programs.jpg\")
\n![\"design-patterns-elements-of-reusable-object-oriented-software\"](\"/assets/books/design-patterns-elements-of-reusable-object-oriented-software.jpg\")
\n![\"head-first-design-patterns\"](\"/assets/books/head-first-design-patterns.jpg\")
\n![\"clean-code\"](\"/assets/books/clean-code.jpg\")
\n![\"the-art-of-computer-programming\"](\"/assets/books/the-art-of-computer-programming.jpg\")
\nThese books for programmers are about improving the way you think and solving-problems, also with these books you will learn how to solve interviews whiteboard questions. Some of these books are also used in universities are textbooks. These books are highly recommended if your goal is to improve logic ability.
\n\n![\"introduction-to-algorithms\"](\"/assets/books/introduction-to-algorithms.jpg\")
\n![\"cracking-the-coding-interview-150-programming-questions-and-solutions\"](\"/assets/books/cracking-the-coding-interview-150-programming-questions-and-solutions.jpg\")
\nBooks in this section are great for extending the way on how you think from the bigger picture of problem-solving. Architectural based books make you see from another angle, on how to design the program.
\n\n![\"domain-driven-design\"](\"/assets/books/domain-driven-design.jpg\")
\n![\"patterns-of-enterprise-application-architecture\"](\"/assets/books/patterns-of-enterprise-application-architecture.jpg\")
\n![\"refactoring-to-patterns\"](\"/assets/books/refactoring-to-patterns.jpg\")
\nHere you will find books about learning programming languages, from the most popular one to the new kids on the block. With these books, you will not only learn another programming language like in youtube videos, but you will extend the way of thinking in a particular programming paradigm.
\n\n![\"javascript-the-good-parts\"](\"/assets/books/javascript-the-good-parts.jpg\")
\n![\"thinking-in-java\"](\"/assets/books/thinking-in-java.jpg\")
\n![\"effective-modern-c++\"](\"/assets/books/effective-modern-c++.jpg\")
\n![\"c-sharp-in-depth\"](\"/assets/books/c-sharp-in-depth.jpg\")
\n![\"learning-python\"](\"/assets/books/learning-python.jpg\")
\n![\"kotlin-in-action\"](\"/assets/books/kotlin-in-action.jpg\")
\n![\"programming-elixir\"](\"/assets/books/programming-elixir.jpg\")
\n![\"the-rust-programming-language\"](\"/assets/books/the-rust-programming-language.jpg\")
\n![\"the-c-programming-language\"](\"/assets/books/the-c-programming-language.jpg\")
\n![\"the-go-programming-language\"](\"/assets/books/the-go-programming-language.jpg\")
\nLastly but not least important are the books that are targeting the improvement of firstly: the professional development of every programmer and the personal growth in the field of software development, and secondary: the soft skills not just about programmers but these books will help you to be successful in other fields of life.
\n\n![\"the-pragmatic-programmer-from-journeyman-to-master\"](\"/assets/books/the-pragmatic-programmer-from-journeyman-to-master.jpg\")
\n![\"the-clean-coder\"](\"/assets/books/the-clean-coder.jpg\")
\n![\"soft-skills-the-software-developer’s-life-manual\"](\"/assets/books/soft-skills-the-software-developer’s-life-manual.jpg\")
\n![\"cover-photo\"](\"/assets/cover/sql.jpg\")
To query data from a single table we usually use the select statement in SQL, but sometimes we might want to query data from more than one table. In this article, we will see how we can do that with inner join in SQL, but also we will look at the full join, right join, and left join in SQL to query data from two or more tables.
\n\n\nNote: To query data from a single table we usually use the SELECT * FROM table_name statement.
\n
To query data from two or more tables we must use a process that will link both tables together. The process of linking is called joining. SQL provides more than one kind of joins such as inner join, left join, right join, full join, etc, but now we ill focus on inner join in SQL.
\nThe inner join links two (or more) tables by a relationship between two columns. Whenever you use the inner join clause, you normally think about the intersection between both tables (in case you have two). To understand the concept of inner join in SQL we will look at a simple example:
\n![\"sql-inner-join\"](\"/assets/samples/sql-inner-join.png\")
\nHere we have two tables A and B, table A has four rows: 1, 2, 3, 4 and table B has also four rows: 3, 4, 5, 6. When table A joins with table B, we have a result of the intersection of table A and table B which is: 3, 4. The inner join clause finds each row in table A that matches each row in table B, all rows that match are included in the final result.
\nWe use the following syntax in SQL to inner join table A with table B.
\nSELECT A.n FROM A INNER JOIN B ON B.n = A.n;\nAs we see in the SQL code example above, we are using the INNER JOIN clause after the FROM clause. The condition to match between both tables A and B is specified after the ON keyword. This condition is called join condition, B.n = A.n.
\nWe can use the INNER JOIN clause to join three or more tables as long as they have relationships between them, typically foreign key relationship is used.
\nSELECT A.n FROM A INNER JOIN B ON B.n = A.n INNER JOIN C ON C.n = A.n;\nHere we have inner join on three tables.
\nLet's see one more example of the inner join in SQL. We will use the users and locations table to demonstrates how the inner join in SQL works.
![\"sql-users-locations-table\"](\"/assets/samples/users-locations-table.png\")
\nEach user belongs to only one location while each location can have more than one user. The relationship between the users and the locations table is one-to-many.\nThe location_id column in the user's table is the foreign key column that links the users to the locations table.
To get the information of the location id 1 and 2, we use the following statement.
\nSELECT location_id, location_name FROM locations WHERE location_id IN (1, 2);\nAs you can see we are using the IN in the WHERE clause to get the rows with location_id 1 and 2.\nTo get the info of users from the locations with id 1 and 2, we use the following query:
\nSELECT first_name, last_name, location_id FROM users WHERE location_id IN (1, 2) ORDER BY location_id;\nAnd if we want to combine data from both tables, we can use an inner join clause like the following query:
\nSELECT first_name, last_name, locations.location_name FROM users INNER JOIN locations ON locations.location_id = users.location_id WHERE users.locations_id IN (1, 2);\nLeft join in SQL is useful when we want to link tables together but the result is different from the inner join. Let's look at the example of left join in SQL:
\n![\"sql-left-join\"](\"/assets/samples/sql-left-join.png\")
\nHere we also have the same two tables as before, A and B. When table A left joins with table B, we have a result of every row in table A and the matched records from table B, which is: 1, 2, 3, 4.
\nThe following syntax in SQL is used to left join table A with table B.
\nSELECT A.n FROM A LEFT JOIN B ON B.n = A.n;\nWe have the LEFT JOIN clause after the FROM clause. The condition that is after the ON is called the join condition B.n = A.n.
\nThe right join in SQL is almost the same as the left join with minor differences.
\n![\"sql-right-join\"](\"/assets/samples/sql-right-join.png\")
\nWe are using the same two tables again, A and B. When table A right joins with table B, we have a result of every row in table B and the matched records from table A, which is: 3, 4, 5, 6. Here the difference from the left join is that we are getting the opposite table.
\nThe syntax for right join in SQL looks like this.
\nSELECT A.n FROM A RIGHT JOIN B ON B.n = A.n;\nWe have the RIGHT JOIN clause after the FROM clause. The condition that is after the ON is called the join condition B.n = A.n.
\n\n\nNote: In both left join and right join we get the matched records, but the difference is that in left join we have every column from table A, and in right join, we have every column from table B.
\n
The full outer join (full join) includes every row from the joined tables whether or not it has the matching rows. If the rows in the joined tables do not match, the result set of the full join will contain NULL values for every column of the table that doesn't have a matching row. For the matching rows, every single row that has the columns populated from the joined table will be included in the result set.
\n![\"sql-full-join\"](\"/assets/samples/sql-full-join.png\")
\n\n\nNote: Full outer join and outer join in sql are the same.
\n
The syntax for the full outer join looks like this:
\nSELECT column_list FROM A FULL OUTER JOIN B ON B.n = A.n;\nWe have the FULL OUTER JOIN clause after the FROM clause. The condition after the ON is called the join condition B.n = A.n.
\nJoining in SQL is very important in many situations when we are working with more than one table, and it is very useful to know about it. If you find this article useful please share it.
\n\n","frontmatter":{"path":"/sql-join/","date":"2019-12-10T14:00:49.619Z","title":"SQL Inner Join, (Left, Right and Full Outer Join)","author":"Aleksandar Vasilevski","image":"/assets/cover/sql.jpg","category":"SQL","tags":"#sql #database #db #join","featured":false}}},{"node":{"id":"14da8eb5-67a2-5fa7-8d75-5dad4120e988","html":"Note: If you want to learn more about SQL, I highly recommend you to read this book: SQL in 10 Minutes, Sams Teach Yourself (4th Edition).
\n
The JavaScript destructuring assignment is a more readable compact and expressive syntax that allows us to destructured values from arrays or properties from objects, into different variables. JavaScript destructuring was a new addition to ES6 which took inspiration from languages like Python. Let's see a simple example of JavaScript destructuring:
\nWithout destructuring assignment, we need to access the items in an array like this:
\nvar firstItem = someArray[0];\nvar secondItem = someArray[1];\nvar thirdItem = someArray[2];\nWith destructuring assignment, it is more concise and readable:
\nvar [first, second, third] = someArray;\nAs we see in our example above, we can use JavaScript destructuring in so many different ways.
\nLet’s see how we can do object destructuring, starting from the beginning. We use an object literal on the left-hand-side of an assignment expression for object destructuring. Let's start with the basic assignment example.
\nconst user = {\n firstname: 'John',\n lastname: 'Doe',\n nickname: 'jDoe'\n};\n\n// Object Destructuring\nconst { firstname, lastname, nickname } = users;\nconsole.log(firstname, lastname, nickname); // John Doe jDoe\nWe are here using object destructuring syntax to assign values to three variables: firstname, lastname and nickname using the values from their keys on the user object. This is the simplest example of object destructuring. Now let's see more interesting examples of object destructuring.
We can assign variable value with destructuring without separate from its declaration.
\nlet a, b;\n\n({a, b} = {a: 1, b: 2});\n\n\nNote: It is required to have parentheses ( ... ) around the assignment statement when using object literal destructuring assignment without a declaration.
\n
We can also assign property from unpacked object to a variable with a different name than the object property.
\nlet o = {p: 22, q: true};\nlet {p: foo, q: bar} = o;\n \nconsole.log(foo); // 22 \nconsole.log(bar); // true\nIn the example above, const {p: foo} = o takes from the object o the property named p and assigns it to a variable named foo.
\nWe can also set a default value if the unpacked object value is undefined
\nlet {a = 10, b = 5} = {a: 3};\n\nconsole.log(a); // 3\nconsole.log(b); // 5\nA property can be:
\nconst {a: aa = 10, b: bb = 5} = {a: 3};\n\nconsole.log(aa); // 3\nconsole.log(bb); // 5\nconst user = {\n id: 42,\n nickName: 'jdoe',\n fullName: {\n firstName: 'John',\n lastName: 'Doe'\n }\n};\n\nfunction userId({id}) {\n return id;\n}\n\nfunction whois({displayName, fullName: {firstName: name}}) {\n return `${displayName} is ${name}`;\n}\n\nconsole.log(userId(user)); // 42\nconsole.log(whois(user)); // \"jdoe is John\"\nIn this example, we unpack the id, nickName, and firstName from the user object and we simply output them with console.log.
We can also use nested array destructuring where the item must be an array to use a nested destructuring array literal to assign items to local variables.
\nconst metadata = {\n title: 'Scratchpad',\n translations: [\n {\n locale: 'de',\n localization_tags: [],\n last_edit: '2014-04-14T08:43:37',\n url: '/de/docs/Tools/Scratchpad',\n title: 'JavaScript-Umgebung'\n }\n ],\n url: '/en-US/docs/Tools/Scratchpad'\n};\n\nlet {\n title: englishTitle, // rename\n translations: [\n {\n title: localeTitle, // rename\n },\n ],\n} = metadata;\n\nconsole.log(englishTitle); // \"Scratchpad\"\nconsole.log(localeTitle); // \"JavaScript-Umgebung\"\nThere are some cases when we are working with a complex array or object structure and we need to assign values from it to variables. In the next example, we will see that it is possible to combine array and objects in destructuring.
\nconst props = [\n { id: 1, name: 'Fizz'},\n { id: 2, name: 'Buzz'},\n { id: 3, name: 'FizzBuzz'}\n];\n\nconst [,, { name }] = props;\n\nconsole.log(name); // \"FizzBuzz\"\nArray destructuring is very similar to object destructuring. In array destructuring, we use an array literal on the left-hand-side of an assignment expression. Each variable on the array literal maps to the item at the same index on the destructured array. Here is a basic example.
\nconst rgb = ['one', 'two', 'three'];\n\nconst [red, yellow, green] = rgb;\nconsole.log(red); // \"one\"\nconsole.log(yellow); // \"two\"\nconsole.log(green); // \"three\"\nHere we have assigned the items in the rgb array to three local variables: red, green and blue using array destructuring. You may notice that every variable is mapped to the item at the same index on the rgb array.
\nWe can assign a variable value via destructuring separate from the variable's declaration.
\nlet a, b;\n\n[a, b] = [1, 2];\nconsole.log(a); // 1\nconsole.log(b); // 2\nWe can set a default value to a variable. In this case that the value unpacked from the array will be undefined.
\nlet a, b;\n\n[a=5, b=7] = [1];\nconsole.log(a); // 1\nconsole.log(b); // 7\nWe can swap two variables values in one destructuring expression.\nIf we want to swap variables without a destructuring assignment, swapping two values requires a temporary variable (in low-level languages, the XOR-swap trick).
\nlet a = 1;\nlet b = 3;\n\n[a, b] = [b, a];\nconsole.log(a); // 3\nconsole.log(b); // 1\n\nconst arr = [1,2,3];\n[arr[2], arr[1]] = [arr[1], arr[2]];\nconsole.log(arr); // [1,3,2]\nAs we know it has been possible to return an array from a function, but with destructuring, we can make more concise the array return value.
\nfunction f() {\n return [1, 2];\n}\n\nlet a, b; \n[a, b] = f(); \nconsole.log(a); // 1\nconsole.log(b); // 2\nIn the example above, the f() function returns the values [1, 2] as its output, which can be parsed in one line with JavaScript destructuring.
\nWe can ignore or skip return values that we are not interested in.
\nfunction f() {\n return [1, 2, 3];\n}\n\nconst [a, , b] = f();\nconsole.log(a); // 1\nconsole.log(b); // 3\nIt is also possible to ignore all return values:
\n[,,] = f();\nWhen we destructuring an array, we can unpack and assign the parts of it to a variable using the rest:
\nconst [a, ...b] = [1, 2, 3];\nconsole.log(a); // 1\nconsole.log(b); // [2, 3]\n\n\nNote: If a trailing comma is used on the left-hand side with a rest element a SyntaxError will be thrown.
\n
We can also do nested destructuring with arrays.
\nconst color = ['#FF00FF', [255, 0, 255], 'rgb(255, 0, 255)'];\n\n// Use nested destructuring to assign red, green and blue\nconst [hex, [red, green, blue]] = color;\n\nconsole.log(hex, red, green, blue); // #FF00FF 255 0 255\nAs we can see in this article ES6 destructuring is useful in many cases. I hope you can understand how the destructuring in JavaScript works if you find this article useful please share it.
","frontmatter":{"path":"/javascript-destructuring/","date":"2019-12-06T16:30:49.619Z","title":"Guide to Javascript Destructuring in ES6","author":"Aleksandar Vasilevski","image":"/assets/cover/javascript.png","category":"JavaScript","tags":"#javascript #es6","featured":false}}},{"node":{"id":"36d1c916-7a7a-5d63-8501-bfad51cd4c0f","html":"![\"rubik-cube\"](\"/assets/cover/problem-solving.jpg\")
A problem is an obstacle to overcome, once the obstacle circumvented, the problem is solved and we can move on the next one. When we write programs to solve problems, though, we have a larger goal. We don't want to solve just one instance of a particular problem, we want an algorithm that will solve all instances of a problem. A problem is defined by its inputs and the desired output.
\n![\"input-output\"/](\"/assets/samples/input-output.png\")
\nOur goal for solving the problem is to devise a procedure that takes inputs that define a problem instance and produces an output that is the solution to that problem. Most problem solving involves breaking problems into simpler and simpler problems until you find problems simple enough that you already know\nhow to solve. This approach of solving problems by breaking them into simpler parts is known as divide-and-conquer.
\n\n\nNote: An algorithm is a well-defined, computer-implementable instructions, typically to solve a problem or to perform a computation.
\n
![\"recursion\"](\"/assets/samples/recursion.jpg\")
\nRecursive problem solving is where a function calls itself again to repeat the code with a goal to reduce the problem to be simple enough. To define recursion, we use an if expression to test the input. If it is true, the consequent expression is the known answer, otherwise, if the test is false, the recursive case applies the procedure again but with a smaller input. For the application to make progress towards reaching the base case, means the input has to change that gets closer to the base case input. The recursion is more used in functional programming.
function factorial(number) {\n if (number === 1) {\n return 1;\n }\n return number * factorial(number - 1);\n}\nAs we see in the factorial function we have a number parameter which we test with an if statement. If the test is true (the number is 1) we stop the cycle, if the test is false (the number is not 1) we are multiplying the number with the factorial function, which is called by itself.
\n\nNote: Factorial is the operation of multiplying any natural number with all the natural numbers that are smaller than it.
\n
function fibonacci(number) {\n if(number <= 1){\n return 1;\n }else {\n return fibonacci(number - 1) + fibonacci(number - 2);\n }\n}\nIn our second example is probably one of the most famous algorithms ever Fibonacci sequence. We have a number parameter that we test with an if statement. If it is true, then we return 1 and the cycle ends here. if the test is false we are are going on the next test. Here at the else clause, we have a return statement with two Fibonacci functions which are added with the first one have a parameter number - 1 and the second one number - 2.
\n\nNote: Fibonacci numbers, also called the Fibonacci sequence, such that each number is the sum of the two preceding ones, starting from 0 and 1.
\n
![\"recursion\"](\"/assets/samples/iteration.jpg\")
\nIterative problem solving is based on gradual improvements that loop to repeat some part of the code. To define iteration we use a loop that has a variable that tests the input. If it is true, the loop ends and the answer is known. If the test is false, the loop repeats again and re-evaluate the body expressions of the passed values. For the application to make progress towards reaching the goal, means that the variable that is tested has to change and gets closer to the input. The iteration is more used in imperative programming.
function factorial(number){\n var result = 1;\n\n for(var i = 1; i <= number; i++){\n result = result * i;\n }\n return result;\n}\nWe can see in the iterative factorial example that we have a number parameter in the factorial function which is not tested with if statement like in the recursive problem solving, but with a control variable value (var i). If our test is false (var i is smaller or equal with the number) we simply multiply the result with the i and update the result variable. When the test is true (var i is smaller or equal with the number), the for-loop ends and we return the result.
function fibonacci(number){\n var a = 1;\n var b = 0;\n var temp;\n\n while (number >= 0){\n temp = a;\n a = a + b;\n b = temp;\n number--;\n }\n\n return b;\n}\nIn the second example, we have again Fibonacci sequence but with an iterative way. We have a number parameter and three variables on top. In the while loop again we are doing the testing with a control variable, where we check if it is true (number is greater or equal to 0) then we continue with the loop. Inside the while-loop body we update the temp variable with the value of a, which after we add a and b and update the a variable with the result, and on the next line we simply update the b variable with the value from temp which was taken from the a variable on the first step. On the last line, we are doing decrement to the number which will be tested again. If the test is false(number is not greater or equal to 0) we simply return the b variable.
\n\nNote: If you want to learn more about algorithms, I highly recommend you to read this book: Introduction to Algorithms, 3rd Edition (The MIT Press).
\n
The concepts behind the recursion and iteration is to execute a set of instructions (algorithm) repeatedly. The difference between recursion and iteration is that recursion is simply a function call in which the function is being called by itself until a certain condition is met, while iteration is when a loop is repeatedly executed until a certain condition is met. Both recursion and iteration depend on a condition to know when to stop.
\nKey differences to remember between recursion and iteration:
\nI hope you can understand how the recursion and iteration work if you find this article helpful please share it.
","frontmatter":{"path":"/javascript-solving-problems-recursive-iterative/","date":"2019-12-03T17:40:49.619Z","title":"Solving Problems in JavaScript: Recursive vs Iterative","author":"Aleksandar Vasilevski","image":"/assets/cover/problem-solving.jpg","category":"JavaScript","tags":"#javascript #algorithms #recursion #iteration","featured":false}}},{"node":{"id":"092204d1-8821-57f4-9335-28e146760afe","html":"![\"css-logo\"](\"/assets/cover/es2019.png\")
The optional catch binding is a new feature in JavaScript that was added in the ES10/2019, this feature is useful in some cases when you don't need the binding parameter in the catch clause.
\ntry {\n // do something\n} catch (error) {\n // we have error parameter to handle it\n}\nWithout optional catch binding
\ntry {\n // do something\n} catch {\n // no binding or parameter to handle it\n}\nWith optional catch binding ES10/2019
\nAs we see our examples above, in the first example you have an error parameter which was not optional before ES2019/10, wherein the second example as you can see the error parameter is not there, because it is optional in the ES2019/10. In the past it was always needed to have the parameter whatever you use it or not, this feature is very useful if you never use the variable error as you don't need for the exception object in the code that handles the exception.
\n\n\nNote: If you are new to JavaScript you can go on the following link to learn more about the try-catch-finally
\n
| Chrome | \nFirefox | \nSafari | \nIE/Edge | \nNode | \n
|---|---|---|---|---|
| 66+ | \n58+ | \n? | \n? | \n8+ | \n
I hope you understand how the optional catch binding works in JavaScript if you find this article useful please share it.
","frontmatter":{"path":"/javascript-es2019-optional-catch-binding/","date":"2019-12-02T21:30:49.619Z","title":"Optional Catch Binding in JavaScript ES10","author":"Aleksandar Vasilevski","image":"/assets/cover/es2019.png","category":"JavaScript","tags":"#javascript #es2019","featured":false}}},{"node":{"id":"19fdb961-c297-5e39-95d9-20d2bd65d70d","html":"![\"cover-photo\"](\"/assets/books-2158737_1280.jpg\")
There might be affiliate links on this page, which means we get a small commission of anything you buy. As an Amazon Associate we earn from qualifying purchases.
\nThere are a lot of great learning materials out there. This article is aimed to help developers in the search to find the best learning materials and resources to make everyday developing experience better. 33 learning materials are listed below.
\n\nClean 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.
\n\nIntroduction 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.
\n\n\nThe Art of Computer Programming by Donald Knuth with its four volumes is one of the greatest books about Computer Science ever written. Bill Gates once said, “If you think you’re a really good programmer… read Art of Computer Programming… You should definitely send me a resume if you can read the whole thing.” I still have not read this book but it is high on my priority list.
\n\n![\"hacker-rank\"](\"https://www.hackerrank.com/wp-content/uploads/2019/07/hackerrank_share-image_0_default_20190722.png\")
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.
\n\n\nDesign 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.
\n\n![\"traversy-media\"](\"/assets/other/traversy-media.jpg\")
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.
\n\n![\"academind\"](\"/assets/other/academind.jpg\")
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.
\n\n\nThe 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.
\n\n![\"freecodecamp\"](\"/assets/other/freecodecamp.jpg\")
FreeCodeCamp is a learning web platform and online community that focuses to make learning web development accessible to anyone. It has tutorials from HTML, CSS to JavaScript where students progress to project assignments that they must complete either alone or in pairs. There is also a Free Code Camp YouTube channel which is also free like the whole platform.
\n\n![\"freecodecamp\"](\"/assets/other/udacity.jpg\")
Udacity is another learning platform but it offers courses from web development, android development to machine learning. The video courses are great very good explained, especially the part with the android development I have done them when I started learning software development and they are great you cannot find better video lectures on how to learn android and they are also supported by Google. Udacity has a nanodegree that is paid but most of the lectures you can get it for free too.
\n\n\nThinking in Java by Bruce Eckel is one of the best books to get into Object-Oriented Programming and you will learn the Java programming language too. Object-Oriented Programming is still one of the most important topics that every programmer should know about. I have written a special review for this book if you want to learn more.
\n![\"you-don't-know-js\"/](\"/assets/books/you-don't-know-js.jpg\")
\nYou Don't Know Js by Kyle Simpson is not just one book, there are five books and they are one of the best way to learn JavaScript, you will read o topics like Scope, Closures, Objects, Classes, Types, Grammar, Sync, Async, ES6 and beyond. You can find all of the books on the links below on Amazon for how it is recommended to start reading them.
\n![\"css-tricks\"](\"/assets/other/css-tricks.jpg\")
CSS-Tricks is a blog where you can find great learning materials about front-end development and especially CSS. The posts are very good explained with examples of code snippets. It is one of the top blogs out there.
\n\n![\"mit-open-course-ware\"](\"https://upload.wikimedia.org/wikipedia/commons/c/c9/Ocwhp.png\")
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.
\n\n![\"syntax-fm\"](\"/assets/other/syntax-fm.jpg\")
Syntax.FM is a podcast for web developers hosted by Wes Bos and Scott Tolinski, here you can find great episodes that will make you a better programmer. You can listen to it on iTunes, Overcast, Google Podcast, etc, and you will find all of the episodes on the Syntax FM website.
\n\n\nThe Pragmatic Programmer: From Journeyman to Master by Andrew Hunt and David Thomas is a book about software engineering where does not present a systematic theory, but rather a collection of tips to improve the development process pragmatically. The Pragmatic Programmer is a very influential book in the field of programming and it is used as a textbook in a lot of university courses.
\n\n\nCracking the Coding Interview by Gayle Laakmann McDowell gives you the interview preparation that you will need it to get the best software developer jobs. This is a deeply technical book and focuses on the software engineering skills to ace your interview.
\n\n![\"derek-banas\"](\"/assets/other/derek-banas.jpg\")
Another great YouTube channel by Darek Banas, that is producing very good videos to learn to code, although it is a bit fast-paced for my taste if you like fast-paced videos it can be very useful for you.
\n\n![\"the-new-boston\"](\"/assets/other/the-new-boston.jpg\")
The New Boston Youtube channel is one of my favorites for beginner learning materials, although it is not updated a couple of years it still offers great video courses that can help a lot of entry-level programmers.
\n\n\nHead First Design Patterns by Eric Freeman, Kathy Sierra, Bert Bates, Elisabeth Robson is another book about design patterns in programming, reading this book will make design patterns much easier to understand. Head First book series is written especially yo target entry-level programmers.
\n\n\nAnother great JavaScript book the JavaScript: The Good Parts by Douglas Crockford is essential if you want to learn JavaScript programming language If I rank this book I will say You Don't Know Js is a bit better because the JavaScript evolves very fast and You Don't Know Js is more updated.
\n\n![\"david-walsh-blog\"](\"/assets/other/david-walsh-blog.jpg\")
David Walsh Blog is a popular coding blog that focuses on modern libraries, programming tutorials, and shortcuts for programming. David Walsh with his guest writers are providing daily posts to help programmers to learn how to code quicker and more efficiently
\n\n![\"stackoverflow\"](\"/assets/other/stack-overflow.jpg\")
StackOverflow is a question and answer web platform where developers help each other to solve problems. StackOverflow is maybe one of the best places where you can learn programming and at the same time, you can help other programmers but solving problems.
\n\n![\"github\"](\"/assets/other/github.jpg\")
Another giant in the coding world like the StackOverflow is the Github. Github is primary version control systems but you can find a lot of examples of code from which you can learn a lot, you cannot be a good programmer if you cannot read code written by others.
\n\n![\"the-crazy-programmer\"](\"/assets/other/the-crazy-programmer.jpg\")
TheCrazyProgrammer is another nice blog in the programming world where you will find guides, tutorials, and examples on coding topics.
\n\n\nSoft Skills: The Software Developer’s Life Manual by John Z. Sonmez is a unique guide book, offering great techniques and practices for a more satisfying life as a professional programmer. It has a wide range of important \"soft\" topics, from career and productivity to personal finance and even fitness and relationships. It's a different book that is not targeting programming itself but it is a very useful book.
\n\n\nThe Go Programming Language by Alan A. A. Donovan, Brian W. Kernighan is a book about the new kid in the town Golang programming language. The language which was completely designed by Google and is growing at a very fast pace, with great demand in the job market.
\n\n![\"head-first-java\"/](\"/assets/books/head-first-java.jpg\")
\nOne more great book, if you want to learn Java programming language, is Head First Java by Kathy Sierra, Bert Bates, especially if Java is the first language you want to learn, this book is right for you. It has a great beginner-friendly writing style with very good coding examples and exercises. Highly recommended for entry-level Java programmers.
\n![\"coursera\"](\"/assets/other/coursera.jpg\")
Coursera is an educational learning platform that offers massive open online courses (MOOCs). Coursera is great for programmers who want to achieve goals from career advancement to skills development. Coursera offers a couple of learning programs from courses, specializations, professional certificates, master-track certificate and degrees.
\n\n![\"udemy\"](\"/assets/other/udemy.jpg\")
Udemy is maybe the most famous educational learning platform which offers various video learning materials of different programming languages and frameworks. It has very high-quality video tutorials which you can get it at very cheap prices.
\n\n![\"clean-architecture\"/](\"/assets/books/clean-architecture.jpg\")
\nClean Architecture by Uncle Bob is one more great book that every programmer must-read. It will improve dramatically the way you structure and design your code, to achieve high levels of maintainability and correctness in your work.
\n\n\nThe Rust Programming Language by Steve Klabnik is the official book on Rust, an open-source, community-developed systems programming language that runs blazingly fast, prevents segfaults, and guarantees thread safety. This book is a go-to guide written by members of the Rust team.
\n\n\nProgramming Elixir: Functional |> Concurrent |> Pragmatic |> Fun by Dave Thomas will take you to another level, with this book not that you will learn the Elixir programming language but you will enter in the world of functional programming languages and will shape the way you think, making problem-solving much easier.
\n\n![\"code-spot\"](\"/assets/other/codespot.jpg\")
And lastly the CodeSpot blog, here at the CodeSpot blog you will find news, examples, tutorials and other material to learn to code. As CodeSpot starter in September 2019, it is still a very young blog but we still try to publish great content every day to help developers in solving problems.
\n\nIf you find this article helpful please share it and thanks for reading.
","frontmatter":{"path":"/materials-to-learn-software-development/","date":"2019-11-28T14:25:49.619Z","title":"33 Best Materials to Learn Software Development in 2020","author":"Aleksandar Vasilevski","image":"/assets/books-2158737_1280.jpg","category":"Tools","tags":"#tools #resources","featured":false}}},{"node":{"id":"62839458-0193-50e7-a042-3fb487df8325","html":"![\"cover-photo\"](\"/assets/cover/protocol-buffers.png\")
Protocol buffers also known as Protobuf are an efficient and flexible mechanism for serializing structured data. Protobuf works in a way where you define the data to be structured once and then with a specially generated source code you can read and write your structured data.\nProtocol buffers are language-neutral and platform-neutral, at a time when this post is written they have support for Java, Python, Objective-C, and C++, also with the new proto3 language version, you can also use them with Dart, Go, Ruby, and C#, with more languages to come.
\nWe need to specify how we want the information that we are serializing to be structured by defining Protobuf message types in .proto files. Each Protobuf message is small information that contains a series of name-value pairs. Let's see a basic example of a proto file how looks like.
message Person {\n required string name = 1;\n required int32 id = 2;\n optional string email = 3;\n\n enum PhoneType {\n MOBILE = 0;\n HOME = 1;\n WORK = 2;\n }\n\n message PhoneNumber {\n required string number = 1;\n optional PhoneType type = 2 [default = HOME];\n }\n\n repeated PhoneNumber phone = 4;\n}\nAs we can see the message format is very simple, each message type has one or more numbered fields, where each field has a name and a value type. The value types can be booleans, integer, floating-point, strings, raw bytes, or other protocol buffer message types, allowing you to structure your data hierarchically.\nWhen you finish defining the messages, you run the protocol buffer compiler for the particular application language that you are using on your proto file to generate data access classes. This will provide getters and setters for each field also methods to serialize/parse the structure to and from raw bytes.
\n\n\nNote: Protocol Buffer classes are basically just data holders, they don't make good first class citizens in an object model. If you want to add richer behaviour to a generated class, the best way to do this is to wrap the protocol buffer class in an application-specific class.
\n
Protobuf has many advantages over XML, let's see some of the pros.
\nIf we do a simple example in XML will look like:
\n<person>\n <name>John Doe</name>\n <email>jdoe@example.com</email>\n</person>\nwhile the Protobuf message (protocol buffer text format) looks like:
\n# Textual representation of a protocol buffer.\n# This is *not* the binary format used on the wire.\nperson {\n name: \"John Doe\"\n email: \"jdoe@example.com\"\n}\nWhen the above message is encoded to the Protobuf binary code format is 28 bytes long and will take around 100-200 nanoseconds to parse. For comparison, the XML version is at least 69 bytes and would take around 5,000-10,000 nanoseconds to parse.\nManipulating protocol buffer is also easier compared to XML. Let's see them both in the examples below.
\ncout << \"Name: \" << person.name() << endl;\ncout << \"E-mail: \" << person.email() << endl;\nProtobuf manipulation
\ncout << \"Name: \"\n << person.getElementsByTagName(\"name\")->item(0)->innerText()\n << endl;\ncout << \"E-mail: \"\n << person.getElementsByTagName(\"email\")->item(0)->innerText()\n << endl;\nXML manipulation
\nAs we know JSON is a subset of the JavaScript programming language. Its messages are exchanged in human-readable text format and are completely independent and supported by almost all programming languages. On the other hand protocol buffers are not only a message format. It is a set of rules and tools that define and exchange messages. Currently is restricted to only some programming languages. Also, it has more data types than JSON, like methods, enumerates, and has other functions, including RPC (Remote Procedure Calls).
\nAdvantages of Protobuf:
\nAdvantages of JSON:
\nAs Protocol buffers are a great modern method for serializing structured data they also offer some nice advantages over JSON and XML, while it is still not a full JSON replacement, protocol buffers offer its greatest advantages in terms of speed, encoding and decoding size of the data.
","frontmatter":{"path":"/protocol-buffers/","date":"2019-11-24T18:30:49.619Z","title":"Protocol Buffers an Alternate to JSON","author":"Aleksandar Vasilevski","image":"/assets/cover/protocol-buffers.png","category":"JavaScript","tags":"#protocolbuffers #protobuf #json #xml","featured":false}}},{"node":{"id":"c18cbe68-fd31-54e9-b984-8ed1e2a84d30","html":"![\"cover-photo\"](\"/assets/cover/cpu-background.jpg\")
CPU (central processing unit) or processor is electronic circuitry within a computer that is processing instructions by performing arithmetic, logic, controlling, and input/output (I/O) operations specified by the instructions. This cycle of performing operations by the CPU depends on its clock-rate, which is measured with Hz (Hertz), there are bigger units like kHz, MHz, GHz, etc.
\nA 64-bit processor is capable of processing more data than a 32-bit processor because the 64-bit processor can store more computational values, memory addresses, etc, which means that 64-bit can access over four billion times physical memory than 32-bit.
\nLet's see a simple example in C programming language where we will print some datatypes.
\n#include <stdio.h>\n#include <limits.h>\n\nint main() {\n\n printf(\"char\", sizeof(char));\n printf(\"short\", sizeof(short));\n printf(\"int\", sizeof(int));\n printf(\"int 64 t\", sizeof(int64_t));\n printf(\"float\", sizeof(float));\n printf(\"double\", sizeof(double));\n printf(\"long double\", sizeof(long double));\n\n return 0;\n}\nHere is the result that we got from running our program in C.
\ntype size in byte\nchar 1\nshort 2\nint 4\nint 64 t 8\nfloat 4\ndouble 8\nlong double 16\nThis means an int of 4 bytes on a 32-bit processor you can process a number in the range of 2^32. You can use the int64_t (which in this case the int is 8 bytes) on a 64-bit processor to use the whole range of 2^64.\nThis means the 32-bit processor can execute 4 bytes of data in one instruction cycle while 64-bit means that the processor can execute 8 bytes of data in one instruction cycle.
\nOn a computer with a 32-bit processor, you cannot have a 64-bit operating system installed, it can only run a 32-bit operating system. Where on the 64-bit processor you can have a 64-bit or 32-bit operating system, however, there is a downside of using 32-bit OS where the processor will not run at its full capability. If we talk about programs, you cannot run legacy 16-bit programs on a 64-bit processor, where many 32-bit programs are still compatible.
\nThe 64-bit CPU is much more powerful than the 32-bit CPU, and it is becoming more and more common in computers, most of the users are now using 64-bit operating systems and programs.
","frontmatter":{"path":"/32-bit-and-64-bit-cpu/","date":"2019-11-19T16:00:49.619Z","title":"Introduction to 32 Bit and 64 Bit CPU","author":"Aleksandar Vasilevski","image":"/assets/cover/cpu-background.jpg","category":"Hardware","tags":"#cpu #hardware","featured":false}}},{"node":{"id":"4600ee73-a179-542f-b94b-68eb0900c0b0","html":"![\"gatsby\"](\"/assets/gatsby-cover.jpg\")
To build a blog today has become even more easy with the new JAM Stack (JavaScript, API, and Markup). JAM Stack stands for\nA modern architecture - Create fast and secure sites and dynamic apps with JavaScript, APIs, and prerendered Markup, served without web servers.
\nGatsby 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.\nIf you don't know React js, you can buy great React books from Amazon on the links below:
\nOr if you prefer to learn to React by building an app with step by step tutorial, you can start with this article: Create React App From Scratch Series
\nFor 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.
\n![\"gatsby\"](\"/assets/gatsby-schema.png\")
\nGatsby 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.
\n\n\nNote: GraphQL is a query language.
\n
To create a blog with gatsby js, we need to do a couple of steps. Let's see in the example below.
\nnpm install -g gatsby-cli\ngatsby new gatsby-site\ncd gatsby-site\ngatsby develop\nAfter 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.
gatsby build\nWith the build command, Gatsby will perform production build for your site, which in other words means generating static HTML pages.
\ngatsby serve\nLastly, with the shell command, Gatsby will start local HTML server for testing your build site
\nWith the Gatsby site installed you will get the default project structure, which is very simple with a couple of important config files to remember.
\n|-- /.cache\n|-- /plugins\n|-- /public\n|-- /src\n |-- /pages\n |-- /templates\n |-- html.js\n|-- /static\n|-- gatsby-config.js\n|-- gatsby-node.js\n|-- gatsby-ssr.js\n|-- gatsby-browser.js\nGatsby js project structure
\nThere are four important files for gatsby site:
\nGatsby will create pages automatically from the React components in src/pages into pages with URL addresses. For example, components index.js and about.js would automatically create pages for index page (/) and about page (/about).
Gatsby js components are just React components, if you have basic React knowledge you would not have problems understanding them, let's see how does React component looks like in the next example.
\nimport React from \"react\"\nconst AboutPage = () => (\n <main>\n <h1>About the Author</h1>\n <p>Welcome to my Gatsby site.</p>\n </main>\n)\nexport default AboutPage\nGatsby js component
\nIn the example above we have a React functional component build with JSX, on the top we are importing the React, which after we have the about page with the HTML like structure inside, and at the end we are exporting the React component.
\n\n\nJSX is a syntax extension to JavaScript for producing the React components.
\n
Gatsby can use markdown files or .md for creating pages in your web site. The markdown pages should be added to the pages folder, for example /pages/posts. The naming of the markdown files is best to be with date-url or just the url with the extension .md at the end.
---\npath: /how-to-build-a-blog-with-gatsby-and-netlify/\ntitle: How To Build A Blog With Gatsby and Netlify\nimage: /assets/gatsby-cover.jpg\nauthor: Aleksandar Vasilevski\ncategory: Gatsby\ntags: '#gatsby #netlify #cms #blog #jam #javascript #react'\ndate: 2019-09-19T11:00:00.619Z\n---\n//Here we just add the content in markdown format\nMarkdown file example
\nWith Netlify CMS you can add content more easy without manually editing the markdown files. To start Sourcing from Netlify CMS you need to install the NPM package for the Netlify CMS.
\nnpm install netlify-cms\nAfter the installing of the package, you will need to add the plugin to the gatsby-config.js, if the file is not there feel free to create it.
module.exports = {\n plugins: [`gatsby-plugin-netlify-cms`],\n}\nFinally, you’ll need to add a configuration file. The plugin you just installed will take care of creating the Netlify CMS app and outputting it, so you’ll want to put the configuration file in that same directory.
\nbackend:\n name: test-repo\nmedia_folder: static/assets\npublic_folder: assets\ncollections:\n - name: blog\n label: Blog\n folder: blog\n create: true\n fields:\n - { name: path, label: Path }\n - { name: date, label: Date, widget: datetime }\n - { name: title, label: Title }\n - { name: body, label: Body, widget: markdown }\nConfiguration file located in static/admin/config.yml
\nTo save content in a Git repo, the repo should be hosted on some service like GitHub and you will need to authenticate the service so the Netlify CMS can make changes to the content. To enable basic GitHub authentication you will need:
\nAdd the following lines of code to your Netlify CMS config.yml file:
\nbackend:\nname: github\nrepo: owner-name/repo-name # Path to your GitHub repository\n\n\nNote: You can add content manually by pushing the pages to your Git repo without any CMS. To do that just add the markdown pages to your
\npagesfolder.
To deploy your Gatsby js site to Netlify, (You can find the full example here: How to Deploy A Website to Netlify) for static file hosting.
\nPros of using Netlify static file hosting:
\nOnce you’ve wired up Netlify to your repo, each push to your GitHub repository, automatically builds your website, according to the static site generator you’re using, and deploys it to production. The best part about Netlify is that it’s free. If you plan on building a small web site or blog it’s unlikely you’ll need to pay for anything.
\nIn the previous years, you would need to use technologies like WordPress, Drupal, Joomla, etc, and with that, you would be needed to pay for server costs every month. While WordPress is still very good in terms of popularity, community, ease of use of the whole platform, JAM Stack or in our case Gatsby and Netlify CMS in its native form provides some excellent features as well.\nIf you find this article helpful please share it and thanks for reading.
","frontmatter":{"path":"/how-to-build-a-blog-with-gatsby-and-netlify/","date":"2019-11-17T14:30:00.619Z","title":"How To Build A Blog With Gatsby and Netlify","author":"Aleksandar Vasilevski","image":"/assets/gatsby-cover.jpg","category":"Gatsby","tags":"#gatsby #netlify #cms #blog #jam #javascript #react","featured":false}}},{"node":{"id":"2d666736-baf0-5d52-9150-de3d1df32a1d","html":"
In JavaScript try catch finally statement is a great way for handling errors that may occur in a block of code. In this article, we will learn about all three clauses.
\ntry{\n //do some code\n}catch(e){\n //handle the exception\n}finally{\n //do some code\n}\nSimple Example of Try Catch Finally in JavaScript
\nThe try statement has a try block, which inside we can have one or more statements. The {} are used to open and close the block they must be used even for a single statement. After the end of the try block, the catch clause or finally clause must be used, which we can have three forms for the try/catch/finally statement.
The catch clause has statements that what should be done if some sort of exception (error) is thrown in the try block. In other words first, do the try block if it is not successful (throws an exception) go to the catch block and do that (handle the exception). In case when the try block doesn't throw an exception, the catch clause will be skipped.
\nThe finally clause always executes after the try block and the catch clause.
\nIf an unconditional catch clause is used, the catch block will be executed if an exception is thrown.
\ntry {\n throw 'myException'; // generates an exception\n}\ncatch (e) {\n // statements to handle any exceptions\n logMyErrors(e); // pass exception object to error handler\n}\nUnconditional Catch Clause (Source: MDN)
\nHere we simply have thrown an exception in the try block, and we got the exception in the catch block, which is passed to the error handler.
\n\n\nNote: you can use any parameter name instead of
\ne
If you want to handle specific exceptions, you can use more than one catch clauses. The try block can throw three types of exceptions: TypeError, RangeError, and EvalError. When an exception is thrown, an appropriate catch clause will be used to handle the exception. If the thrown exception is not specified, and the unconditional clause is found, then the exception will be handled there.
\ntry {\n myroutine(); // may throw three types of exceptions\n} catch (e if e instanceof TypeError) {\n // statements to handle TypeError exceptions\n} catch (e if e instanceof RangeError) {\n // statements to handle RangeError exceptions\n} catch (e if e instanceof EvalError) {\n // statements to handle EvalError exceptions\n} catch (e) {\n // statements to handle any unspecified exceptions\n logMyErrors(e); // pass exception object to error handler\n}\nNot Recommended Conditional Catch Clause
\n\n\nThis feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future - MDN.
\n
There is a great alternative where a conditional catch clause can be used. Let's see the next example.
\ntry {\n myroutine(); // may throw three types of exceptions\n} catch (e) {\n if (e instanceof TypeError) {\n // statements to handle TypeError exceptions\n } else if (e instanceof RangeError) {\n // statements to handle RangeError exceptions\n } else if (e instanceof EvalError) {\n // statements to handle EvalError exceptions\n } else {\n // statements to handle any unspecified exceptions\n logMyErrors(e); // pass exception object to error handler\n }\n}\nRecommended Conditional Catch Clause
\nHere we have a catch clause, and inside we have an if-else statement where we check for the type of the exception that is thrown.
\nThe finally clause is the last statement that will execute after the try block and catch clause.
\nopenMyFile();\ntry {\n // tie up a resource\n writeMyFile(theData);\n}\nfinally {\n closeMyFile(); // always close the resource\n}\nFinally Clause
\n\n\nNote: The finally clause will execute regardless of whether an exception is thrown
\n
| Chrome | \nFirefox | \nSafari | \nIE/Edge | \nOpera | \n
|---|---|---|---|---|
| Yes | \nYes | \nYes | \nYes | \nYes | \n
I hope now you understand how the try/catch/finally works in JavaScript if you find this article useful please share it.
","frontmatter":{"path":"/javascript-try-catch-finally/","date":"2019-11-14T12:30:49.619Z","title":"How to Use JavaScript Try Catch Finally Statement","author":"Aleksandar Vasilevski","image":"/assets/cover/javascript.png","category":"JavaScript","tags":"#javascript","featured":false}}},{"node":{"id":"19fd3cce-155c-5db7-9b3c-a300b598fb7f","html":"
JavaScript array is a data structure that can hold one or more elements. The JavaScript array is mostly used to store elements and to organize them, so the values can be sorted or searched efficiently. In JavaScript, an array can hold different types of elements (numbers, strings, etc), but it is good practice all of the elements in the array to be the same type, so we can easily organize them as we want.
\nOne of the many important things about an array in JavaScript is to sort the elements stored in the array. To do the JavaScript array sort, we need to create an array and insert some elements in it. To sort the array we will use the sort() method that returns the sorted array as default with ascending order.
Let's see how we can sort an array of strings.
\n//here we have declared and initialized an array with strings\nconst strings = [\"B\", \"A\", \"D\", \"C\"];\nstrings.sort();\nconsole.log(strings); //output: [\"A\",\"B\",\"C\",\"D\"]\nAs we see in our example above, the strings were sorted in alphabet order because the strings are sorted by comparing them in UTF-16 code units.
\n\n\nNote: UTF-16 is a character encoding format.
\n
Let's see how we can sort an array of numbers.
\n//here we have declared and initialized an array with numbers\nconst numbers = [1, 20, 5, 300, 80, 1000];\nnumbers.sort();\nconsole.log(numbers); //output: [1,1000,20,300,5,80]\nAs we see in our example above, the output is not what we have expected. Let's take a closet look at how the JavaScript array sort method is working. To sort the elements in the array, the sort() method casts every element to string and then compares the given strings to determine the correct order of the elements, and we got the output for compared string values. This way most of the time if we sort numbers using the sort method by default it is not what we want.
To compare the items as numbers we need to pass a compare function that have two arguments (a and b) and should return 1 if the first number is larger, 0 if they are equal, and -1 if the second number is larger.\nLet's create a comparison function for numbers.
\nfunction sortNumbers(a, b) {\n if (a > b) {\n return 1;\n } else if (b > a) {\n return -1;\n } else {\n return 0;\n }\n}\nNow let's call the sort method again, now with the comparison function sortNumbers() as argument.
const numbers = [1, 20, 5, 300, 80, 1000];\nnumbers.sort(sortNumbers); // output: [1,5,20,80,300,1000]\nThere is a much shorter way to write the comparison function.
\nnumbers.sort((a, b) => a - b);\nAs you see now we have sorted the numbers as we expected. To do the sorting in descending order you need just to replace the -1 with 1 and the same 1 with -1. JavaScript array sort method is a great way to sort elements, the time and complexity of the sort method depends on the implementation.
","frontmatter":{"path":"/javascript-array-sort/","date":"2019-11-12T21:00:49.619Z","title":"Guide to JavaScript Array Sort Method","author":"Aleksandar Vasilevski","image":"/assets/cover/javascript.png","category":"JavaScript","tags":"#javascript","featured":false}}},{"node":{"id":"83652500-96f0-5a88-9897-7c21a19404f0","html":"![\"cover-photo\"](\"/assets/cover/computer-motherboard-memory.jpg\")
In this article, we will see how does the Java programming language is doing memory management, we will look at registers, stack, heap, constants, non-ram memory, and the famous Java garbage collector. Let's start with the fastest storage in Java the register.
\nThe register is the fastest storage, because it exists in a different place from the other storages, in the processor. However, the number of available registers is very limited. As a developer, you don't have direct control at the registers, for comparison in C and C++ you can suggest register allocation.
\nThe stack is located in the random-access memory (RAM) with direct support from the processor via its stack pointer. The stack pointer is moving up and down when it is going down it is creating a new memory and when it is going up it is releasing memory. This process is a very fast and great way to allocate storage, just the registers are faster in comparison.
\nThe heap is the general-purpose pool of memory, it is also located in the random-access memory (RAM), the heap is the place where all Java objects live. The heap is a very flexible memory you can simply create a new object on the heap by writing the keyword new and the storage will be allocated on the heap when that code will be executed. The price for the flexibility is that the heap is generally slower than the stack, that's why it can take more time to allocate and the garbage collector to clean up the heap storage.
Constant value lives directly in the code because they never change, that's why they are called constants after all.
\nThere is a data that can live outside of our program, the two best examples are streamed objects, which are turned into the stream of bytes and sent to other machine and persistent objects, which the objects live on the disk so they hold their state even when the program is not running, and they can be resurrected into a regular random-access memory object when they are needed.
\nGarbage Collector in Java is running in the background and looks into all objects that are in the memory to find out objects that are not referenced. Every unreferenced objects that are found are deleted so the space can be allocated for other objects. Unlike other languages such as C where memory allocation and deallocation it's manually, in Java it's done automatically by default. Objects in Java can be unreferenced by nulling the reference, by assigning the reference to another or by anonymous object. Memory management in Java is a very broad topic here we are just scratching the surface.
\npublic class Memory {\n\n public static void main(String[] args) { // Line 1\n int i = 1; // Line 2\n Object obj = new Object(); // Line 3\n Memory mem = new Memory(); // Line 4\n mem.foo(obj); // Line 5\n } // Line 9\n\n private void foo(Object param) { // Line 6\n String str = param.toString(); //// Line 7\n System.out.println(str);\n } // Line 8\n\n}\nIn the image below we can see the stack and the heap with reference from the program above.
\n![\"heap-and-stack-memory\"](\"/assets/java-heap-and-stack-memory.png\")
\nJava Memory Management Schema (Source: journaldev.com)
Now let's see line by line the above Java program.
\nmain() method thread.main() method thread.foo() and a block on the top of the stack is created to be used by the foo() method, and we pass the obj.foo() stack block.foo() stack.foo() method is finished, and the memory allocated for foo() on the stack has become free.main() method is finished, and the memory allocated for main() on the stack has become free.Memory management in Java is a very interesting topic but very broad topic too, Java itself will manage the memory without major interventions by the programmer, but knowing how memory work in will give you the advantage of writing good and optimized code in terms of memory usage, finding and fixing memory leaks.
","frontmatter":{"path":"/memory-management-in-java/","date":"2019-11-08T17:00:49.619Z","title":"Memory Management in Java","author":"Aleksandar Vasilevski","image":"/assets/cover/computer-motherboard-memory.jpg","category":"Java","tags":"#java #memory","featured":false}}},{"node":{"id":"18a37e99-6f3c-5f42-9f7e-b6cbc3c34fb6","html":"![\"thinking-in-java-cover\"](\"/assets/cover/thinking-in-java.jpg\")
Thinking in Java was written in 1998 by Bruce Eckel, and the latest 4th edition was published in 2006. The book till today is one of the most popular books about the Java programming language and object-oriented programing. Thinking in Java was the first book I have read about programming, It was a recommended book by the local university for Software Engineering and Computer Science. The book introduced me to the basics of java and object-oriented programming in general.
\nThinking in Java covers almost every basic aspect of the Java programming language, if you are beginner it will give you good building blocks of the programming in general as it keeps the level to be beginner-friendly but at the same time, it delivers a deep understanding of the Java programming language and object-oriented programming in general. Every topic is very good covered with clear coding examples and a couple of challenging exercises at the end of every chapter.\nThe first quarter of the book is mostly introduction to the Java programming language and how Java is working under the hood as it coverts topics like:
\n- Primitive values, classes, and objects, operators.\n- Access control modifiers for class methods and fields.\n- Heap, stack and garbage collection.\n- Constructors.\n- Polymorphism and interfaces.\nThe next three quarters are mostly going deeper into the Java programming language and the object-oriented programming and you will read on topics like:
\n- Inner classes.\n- Exceptions.\n- Generics.\n- Java Collections (Map, Set, List, etc.).\n- Enum and Annotations.\n- Input and Output\n- Concurrency.\n- Graphical user interface.\nThe latest 4th edition of the book covers up to Java 5 version, the later versions are not covered, but it is expected as the 4th edition is published in 2006. The book is a little over 1000 pages and as it is a great learning resource also you can use it as a reference book.
\n\nThinking in Java is a must-read book, especially if you want to do programming in Java programing language or learn Object-Oriented Programming (OOP). The book is great for beginners and even experienced developers who want to gain deeper knowledge or are coming from other programming paradigms to object orientated programming.
\nYou can find and purchase Thinking in Java on the link below on Amazon
\nThinking in Java by Bruce Eckel
\n![\"javascript-logo\"](\"/assets/cover/peer-to-peer-network.jpg\")
Peer to peer or simply p2p is a decentralized network communications model where the peers are computer systems connected with each other. Interesting thing is that with peer to peer communication is done without a central system (Server), in other words, every peer in the network is a server and a client. Pros of using peer to peer (p2p) are protecting user privacy, lower server costs, etc. Torrents are an example of an anonymous p2p protocol where files are hosted for others to download them.
\nAdvantages
\nDisadvantages
\nIn a standard centralized network when a user downloads a file, the user opens a web browser, visit the URL where the file is located and downloads the file. In this case, the website acts as a server and the user computer as a client that receives the data. This is the one-way data transfer where downloaded files are transferred from point A, the server to point B, the user.
\n![\"client-server-network\"](\"https://upload.wikimedia.org/wikipedia/commons/thumb/f/fb/Server-based-network.svg/800px-Server-based-network.svg.png\")
\nA network based on the client-server model (Source: Wikipedia)
\nWhen the same file is downloaded through a peer-to-peer network, the process is handled differently. Here the user has to pre-install peer-to-peer software, which creates a virtual network of peer-to-peer users when the user downloads the file is received in bits that are transferred from other peers in the network that already has the file.\nAt the same time as the data is received, it is also sent to the other peers in the network that ask for it. This situation is different because it is a two-way data transfer.
\n![\"peer-to-peer-network\"](\"https://upload.wikimedia.org/wikipedia/commons/thumb/3/3f/P2P-network.svg/800px-P2P-network.svg.png\")
\nA peer-to-peer (P2P) network (Source: Wikipedia)
\nEvery peer in peer-to-peer network architecture has the same responsibilities, every peer is a server and a client. We can classify a peer-to-peer network in three types unstructured, structured and hybrid networks where they are between the two.
\nThe unstructured peer-to-peer networks doesn't have a particular structure on the overlay network design. They are formed by nodes randomly from connection to each other. Because there is no structure, unstructured peer-to-peer networks are easy to build but are not very efficient.
\n![\"client-server-network\"](\"https://upload.wikimedia.org/wikipedia/en/f/fa/Unstructured_peer-to-peer_network_diagram.png\")
\nOverlay network diagram for an unstructured P2P network (Source: Wikipedia)
\nIn structured peer-to-peer networks the overlay is organized, and every node can efficiently search the network for the desired data.
\n![\"client-server-network\"](\"https://upload.wikimedia.org/wikipedia/commons/7/79/Structured_%28DHT%29_peer-to-peer_network_diagram.png\")
\nOverlay network diagram for a structured P2P network (Source: Wikipedia)
\nPeer-to-peer is a technology born and based on a very simple principle, and that is decentralization. There are a lot of people for it and against it because of distributing copyrighted content unlawfully. However peer-to-peer as a concept has inspired many new philosophies in many areas of human interaction.
","frontmatter":{"path":"/introduction-to-peer-to-peer-network/","date":"2019-11-06T10:50:49.619Z","title":"Introduction to Peer to Peer (P2P) Network","author":"Aleksandar Vasilevski","image":"/assets/cover/peer-to-peer-network.jpg","category":"Network","tags":"#p2p #network","featured":false}}},{"node":{"id":"f77f8e21-0264-5f6f-93bc-7a031d18a699","html":"![\"axios-http-client\"](\"/assets/cover/web-cables.jpg\")
Axios is an HTTP client, build for communication between the front-end and the back-end, also Axios js can be used on the server-side with Node.js. There are a couple of other ways to do the communication, the most common are Fetch API, jQuery Ajax and Axios. In the past jQuery's Ajax was the most used standard for communication, but developers are moving away from it in favor of native APIs, and if you use frameworks like React Axios is more or less used in most of the cases. In this article, we will look at Axios an HTTP based client.
\nAxios is promise-based, same as the Fetch but it is much more powerful and flexible over the native Fetch API. Here are the major features of Axios:
\nTransform request and response
\nIntercept request and response
\nMake http requests from node js
\nCancel requests
\nAutomatic transforms for JSON data
\nMake XMLHttpRequests from the browser
\nSupports the Promise API
\nClient-side support for protecting against XSRF
\nGreat for web frameworks like React, React Native, etc
\nAxios js can be installed with couple of methods (Axios NPM, bower, yarn, cdn) let's see how to install Axios examples:
\nnpm:\n$ npm install axios
bower:\n$ bower install axios
yarn:\n$ yarn add axios
cdn:\n<script src=\"https://unpkg.com/axios/dist/axios.min.js\"></script>
Making an HTTP request with Axios is very easy. In its basic form, the object must have a URL property; if there is no method provided, GET will be used by default as a value. Let’s look at a simple Axios request example:
\n![](\"//ws-na.amazon-adsystem.com/widgets/q?_encoding=UTF8&MarketPlace=US&ASIN=0131872486&ServiceVersion=20070822&ID=AsinImage&WS=1&Format=_SL250_&tag=aleksandarvas-20\")
![\"\"](\"//ir-na.amazon-adsystem.com/e/ir?t=aleksandarvas-20&l=am2&o=1&a=0131872486\")
// POST request\naxios({\n method: 'post',\n url: '/signin',\n data: {\n firstName: 'John',\n lastName: 'Smith'\n }\n});\nAxios post example
\nIn the example above we are simply telling the client to send a POST request to /login with a data object of key-value pairs as its data. Axios will do the conversion of the data to JSON format and send it as the request body.\nAlso we have out of the box methods for performing different types of requests. Let's take a look at a couple of the provided methods.
axios.get
\naxios.post
\naxios.put
\naxios.patch
\naxios.delete
\nLet's modify the code of the previous example with the axios.post method.
axios.post('/signin', {\n firstName: 'John',\n lastName: 'Smith'\n});\nAxios post example
\nWe can also send custom headers with Axios. To send custom headers we simply need to pass an object with the headers as the last argument in the method.
\nconst options = {\n headers: {'X-Custom-Header': 'value'}\n};\n\naxios.post('/signin', { \n firstName: 'John',\n lastName: 'Smith'\n }, options);\nAxios post example with options
\nAs Axios is a promise-based client once the HTTP request is made Axios will return a promise that is fulfilled or rejected. We will use the Async/Await JavaScript feature (if you are not familiar with the Async/Await you can read more about it at Async JavaScript Part 3: Async/Await to handle the response, but if you are not familiar with it you can use the then() method.
signIn = async () => {\n try{\n let res = await axios.post(\"/signin\", {\n firstName: 'John',\n lastName: 'Smith'\n });\n }catch(e){\n //handle the error\n }\n};\nAxios response example
\nIf the promise is fulfilled we will get the response in the res else if it is rejected we will get the error in our catch block. The fulfilled response object from the request contains the following information:
{\n // `data` is the response that was provided by the server\n data: {},\n \n // `status` is the HTTP status code from the server response\n status: 200,\n \n // `statusText` is the HTTP status message from the server response\n statusText: 'OK',\n \n // `headers` the headers that the server responded with\n // All header names are lower cased\n headers: {},\n \n // `config` is the config that was provided to `axios` for the request\n config: {},\n \n // `request` is the request that generated this response\n // It is the last ClientRequest instance in node.js (in redirects)\n // and an XMLHttpRequest instance the browser\n request: {}\n}\nAxios Response Schema (Source: npmjs)
\nAxios automatically transforms request and responses to JSON, but in some cases, if we need to send formats like CSV or XML we can override the default behavior and define a different transformation. To change the request data before sending it to the server, we need to set the transformRequest property in the config object (this method only works for POST, PUT, PATCH).
const options = {\n method: 'post',\n url: '/signin',\n data: {\n firstName: 'John',\n lastName: 'Doe'\n },\n transformRequest: [(data, headers) => {\n // transform the data\n return data;\n }]\n};\n\n// send the request\naxios(options);\nIntercept look similar to transform, but unlike transforms, which only receive the data and headers as arguments, interceptors receive the entire response object or request config and can change the HTTP request. You can make a request interceptor in Axios like in the next example.
\n// request interceptor\naxios.interceptors.request.use(config => {\n // perform a task before the request is sent\n console.log('Request was sent');\n return config;\n}, error => {\n // handle the error\n return Promise.reject(error);\n});\n\n// send a get request\nsignIn = async () => {\n try{\n let res = await axios.get(\"/some_endpoint\");\n }catch(e){\n //handle the error\n }\n};\nAxios interceptors example
\nHere we are logging a message when a request is sent and we wait for a response from the server. With interceptors, it is no longer needed to implement tasks for each HTTP request.\nResponse interceptor is also provided, which allows us to transform the responses.
\n// response interceptor\naxios.interceptors.response.use((response) => {\n // do something with the response data\n console.log('Response was received');\n return response;\n}, error => {\n // handle the response error\n return Promise.reject(error);\n});\n\n// send a get request\nsignIn = async () => {\n try{\n let res = await axios.get(\"/some_endpoint\");\n }catch(e){\n //handle the error\n }\n};\nAxios interceptors example
\nSometimes you may want to cancel a request that is already sent, Axios allows us to cancel a request by using a cancel token.
\nconst source = axios.CancelToken.source();\n\nsomefunc = async () => {\n try{\n let res = await axios.get(\"/some_endpoint\");\n }catch(e){\n if(axios.isCancel(thrown)) {\n console.log(thrown.message);\n }else{\n //handle the error\n }\n }\n};\n\n// cancel the request (the message parameter is optional)\nsource.cancel('Request canceled.');\nAxios cancel request example
\nAxios automatically convert requests and responses to JSON, but in some cases, if we want to we can override the default transformation and define other data formats like CSV or XML. To change the default behavior of Axios we need to set the tranasformRequest property in the config (This method only works for POST, PUT and PATCH requests). Let's check the next example of how to change the default transformation in Axios.
const options = {\n method: 'post',\n url: '/signin',\n data: {\n firstName: 'John',\n lastName: 'Doe'\n },\n transformRequest: [(data, headers) => {\n // transform the data\n return data;\n }]\n};\n\n// send the request\naxios(options);\nAxios transforms example
\nTo transform the data before sending it, we can set a transformResponse property in the config.
const options = {\n method: 'post',\n url: '/signin',\n data: {\n firstName: 'John',\n lastName: 'Doe'\n },\n transformResponse: [(data) => {\n // transform the response\n\n return data;\n }]\n};\n\n// send the request\naxios(options);\nAxios transforms example
\nAxios offer good protection against XSRF (Cross-site request forgery) attacks by allowing you to add additional auth data when making requests. With this feature, the server can discover the requests that are coming from unauthorized locations. We can see how we can achieve this protection in the following example.
\nconst options = {\n method: 'post',\n url: '/signin',\n xsrfCookieName: 'XSRF-TOKEN',\n xsrfHeaderName: 'X-XSRF-TOKEN',\n};\n\n// send the request\naxios(options);\nAxios protection against XSRF example
\nAxios js has great browser support even for older browsers, you can check the browser support on the table below.
\n| Chrome | \nFirefox | \nSafari | \nIE | \nEdge | \nOpera | \n
|---|---|---|---|---|---|
| Yes | \nYes | \nYes | \n11+ | \nYes | \nYes | \n
Axios is one of the most popular HTTP clients available out there, equipped with great useful features. Axios is also great with libraries like React and for doing HTTP calls from backend with Node js. In this tutorial, we have seen just the major features of Axios js with examples. If you are interested for more info about the client, you can check the official Axios Github Page, or Axios NPM page for more info and documentation.
","frontmatter":{"path":"/axios-http-client/","date":"2019-11-02T17:15:49.619Z","title":"Guide to Axios js Http Client","author":"Aleksandar Vasilevski","image":"/assets/cover/web-cables.jpg","category":"JavaScript","tags":"#axios #http #javascript #npm","featured":false}}},{"node":{"id":"64e24019-4401-5be7-8690-74f26b73c30a","html":"
Responsive web design is a very important topic for web developers as every year there are more and more users using smartphones and tablets. To have a responsive web site, it is important to be \"Design for Mobile First\". Mobile-first means designing for mobile before designing for other devices like desktop, tablet, etc. For that purpose, it is important to know what it is and how to use media queries.\nMedia Query is a CSS feature introduced in CSS3, which allows us to specify when certain CSS rules should be used. With media queries, we can easily apply unique CSS rules to specific devices like Laptop, Tablet, Mobile, etc. Media queries are used for the following:
\n