Forem: tolustar

5 tips to secure your backend application

tolustar — Thu, 17 Sep 2020 09:28:16 +0000

The security of the backend is very important to a full-stack web application. A less secured backend is more vulnerable to attacks and threats. An application vulnerable to attack is setting itself up for failure in the future. Business revenues and users trust can be lost because of an unexpected breakdown of the web application due to a security attack on the backend

It is important to build the backend application with security in mind and here are 5 tips to consider while developing the backend of a web application

Validate all incoming requests
Use HTTPS
Limit the number of login attempts
Limit the number of an API request
Support blacklisting JWT tokens

1. Validate all incoming request to the Backend

The API is the entry point to the backend. It sends data to the backend application and receives a response to be consumed by the client (Browser, Mobile Application, etc). The backend application processes the data received by the API based on the business logic and sends back an output via the API. There are several reasons why incoming requests should be validated before it is consumed by the backend application and they are listed below:

To ensure the API contains the required data
The data in the API request is in the right format
The API request contains the required authorization header to send and receive data
There are no malicious data in the API request
The API does not have a request data that is larger than the required size

2. Use HTTPS

HTTPS is a combination of the HyperText Transfer Protocol and Secure Socket Layer. It is used to secure the data transfer between your backend application and the client (Browser, Mobile application, etc) by encrypting the data to prevent Man in the middle attack (MITM). For applications transmitting sensitive information/messages such as login credentials, payment information, user data, it is necessary and important that such application implements HTTPS

Advantages of using HTTPS include

Secure data transfer
Data integrity – Data can not be altered in the process of transmission
Data transmission is faster than HTTP because the encrypted data in HTTPS has a reduced size compared to HTTP

3. Limit the number of login attempts

It is important to limit the number of login attempts by IP address, this is to prevent a brute-force attack by an attacker. A brute-force attack is a process of submitting multiple passwords in the hope that one of them would be correct. Your backend application can blacklist the IP address of a user once the number of login attempts is more than the default number set in your backend application.

4. Limit the number of API requests to the Backend

In addition to limiting the number of login requests by IP address, it is also important to limit the number of API requests an IP address can make within a time-frame, this is to prevent DDOS (Distributed Denial Of Service) attack.

A DDOS attack is a malicious attempt by an attacker to disrupt the normal flow of traffic on your server by flooding it with abnormal internet traffic. In simple terms, the attacker will be making millions of requests per traffic to slow down or stop your server entirely.

Your hosting company or server engineers can put an infrastructure in place to prevent DDOS attacks on your server, but it is also important to go the extra step by implementing an API request limiter in your backend application.

5. Support blacklisting JWT tokens

JWT tokens by default do not have a mechanism to invalidate token when a token is compromised or it is being used to perform malicious operations on your backend application. Blacklisted JWT tokens can be stored on your server database or in-memory database like Redis, to ensure every API request made with a blacklisted token is not honored. The little overhead with storing blacklisted tokens is your API needs to hit the database on every request to ensure the token is not blacklisted and this renders your JWT implementation from being stateless

In conclusion, the tips shared above if well implemented can make your application more secure, do you have any security tips that you implement while developing backend applications, do not hesitate to share below.

Thank you for reading.

Cheers!!!

The post 5 tips to secure your backend application appeared first on Tolustar.

Bootstrap your express project with express api cli

tolustar — Sat, 12 Sep 2020 17:08:43 +0000

The Express framework is a popular framework in the NodeJs community. It powers many applications on the internet and it is loved by many because of its simplicity, it is less opinionated, and the ability to develop APIs quickly.

Setting up a new project for a medium-sized application could be time-consuming with the Express framework because it is a minimalist framework, but there is a new tool that can speed up the setup process of a new express project. The new tool is called express-api-cli, With the express-api-cli tool, you can start a new project with just three short words on your command line terminal and your project is immediately ready for development

Express api cli allows you to create a new project within minutes with little or no configuration. You create your project and you start developing your business logic right away.

How to get started

Ensure you have NodeJs and NPM installed on your computer
Open your command-line tool and run npm install -g express-api-cli command – this installs the express-api-cli globally on your computer.
To create a new project run exp-api create awesome-project. Replace *awesome-project * with the name of your project
Follow the instructions to select the type of project you want to create.
Voila, your project is ready for development !!!

Note:

For more express-api-cli Commands visit https://www.npmjs.com/package/express-api-cli

Features of express-api-cli

Express-api-cli generated project contains packages that have been configured to ensure you don’t need to waste extra time configuring them. These packages have been carefully selected and configured to ensure that your application is robust. Express-api-cli generated project contains the following packages
1. Typescript – Typescript is a superset of javascript that adds optional static typing to javascript. During project creation, you are requested to select either Javascript or Typescript, if you select Typescript, it will be installed and configured in your project, if you don’t it will not be configured.
2. Mongoose – Mongoose is a MongoDB Object Data Modelling Library. It manages communication between your project and your MongoDB database, it also provides schema validation, etc. Mongoose provides a lot of out of the box features to ensure that communication with your database is seamless. It is also optional during installation.
3. Sequelize – Sequelize is an Object Relational Mapping framework for MySql, Postgres, SQLite, and Microsoft SQL Server. It provides seamless communication with the aforementioned databases. Note: During the creation of a new project, you either select Mongoose or Sequelize
4. Validation – Validation is readily configured in the project to validate incoming requests. Validation is made available by @hapi/joi
5. Exception Middleware – There is a centralized exception middleware to handle all forms of errors in your project.
6. Logging – Logging errors in an api application is very important, in an express-api-cli generated project all incoming requests and error exceptions are logged in a log folder. This ensures that debugging is made easy when your project goes live. Logging is made available thanks to Winston and Morgan
7. Security – With the help of Helmet and cors, your project there as an added level of security Integrated into your project
8. Authentication – Express-api-cli uses JsonWebToken to provide authentication in your project
9. Test environment – Testing suites have been packaged with the express-api-cli project and readily configured. All you just need to do is to start writing tests right away. The following make up the test suite
10. Mocha is a feature-rich javascript framework for easy testing
11. Chai is an assertion library that integrates well with mocha
12. NYC is a tool that checks for test coverage in the project
13. Supertest is a library for testing HTTP servers
14. Code Formatting – A codebase with ugly formatting is difficult to read and understand. Also working in a team with different formatting rules configured on each co-worker machine can be frustrating, because each co-worker will reformat the codebase based on the machine prettier formatting configuration. To mitigate this, express-api-cli comes with a configured eslint and prettier rules, to ensure there is uniformity in the project
Set up a new project in less than 5 minutes
Generate controller, router, service files right from the command line
Well formatted and clean code structure

Speed up your new project setup with the express-api-cli tool

Advantages of using the express-api-cli

Start a new project faster with pre-configured packages
Reduce time taken to configure your project
Express-api-cli allows you to generate different files for different parts of your project such as (controller, services, routes, test), etc

Express-api-cli is an awesome tool for every Express Developer.

When next you have a new project, set it up using the express-api-cli tool so that you don’t waste time in the configuration process

Cheers!!!

The post Bootstrap your express project with express api cli appeared first on Tolustar.

Best Practices to implement during API Design and Development

tolustar — Mon, 15 Jun 2020 19:16:11 +0000

API is an acronym for “Application Programming Interface. APIs are significantly used in the software development world to exchange data between two applications. In other words, APIs allow applications to communicate with each other by sending and receiving data through an endpoint.

As an example, many applications integrate Facebook and Google login API to ease new and existing users onboarding into their application. Another example is Uber implementing Google Maps API rather than developing a new map application for its navigation system. Besides, frontend applications communicate with the backend application with the help of APIs

Developing APIs with the right structure and best practices enable other developers to easily integrate your application without hassles and it also ensures that you don’t allow attackers to have access to your backend application.

With all that said, let’s talk about the best practices in developing your APIs for effective usage and making them secure.

Use the right HTTP verbs
Use the right status codes
Return error details in response
API versioning
Validate all requests
Validate all user input
Document your APIs
Secure your APIs

1. Use the right HTTP verbs

This include (GET, POST, PUT, PATCH, DELETE)

HTTP GET – This is used to retrieve data resources only and not to modify. In other words, a GET request should not be used to create or update a resource.

Bad example

GET /get-all-articlesGET /FetchUsers

Good Example

GET /articlesGET /users

HTTP POST – This is used to create new data resources

Bad example

POST /create-new-articleGET /add-new-user

Good Example

POST /articlesPOST /users

HTTP PUT – This is used to update or replace the content of an existing resource

Bad example

POST /update-article/:id

Good Example

PUT /articles/:id

HTTP PATCH – This is used to partially update the content of an existing resource. The difference between PUT and PATCH verb is that PUT is used when you want to completely update the resource while PATCH is used when you want to partially update a resource

Bad example

POST /update-article/:idGET /update-user/:id

Good Example

PATCH /articles/:idPATCH /users/:id

HTTP DELETE – This is used to delete resources

Bad example

GET /delete-article/:id

Good Example

DELETE /articles/:id

Using the right HTTP Verb makes the user of the API understands what the API will do. The above examples show a better representation of using the HTTP verbs in the right manner

2. Use the right status codes

The most common HTTP status codes include (200, 201, 202, 204, 400, 401, 403, 500).

200 (OK)

This indicates that the request was completed and successful. This is used when the other status codes in the 2xx series are inappropriate. Unlike the 204 status code, the 200 status code should include a response in its body.

201 (CREATED)

This is used when a resource has been fulfilled and creates new data in return.

202 (ACCEPTED)

This is used when the request in a resource has been accepted for processing but it is not completed yet. The request may or may not eventually be acted upon, as it may be disallowed when processing actually takes place. there is no facility for status returns from asynchronous operations such as this.

204 (NO CONTENT)

This is an indication that the server has fulfilled the request and there is no information to send back.

400 (BAD REQUEST)

This is used when the request could not be understood by the server due to malformed syntax, invalid request message parameters, or deceptive request routing.

401 (UNAUTHORIZED)

This is an indication that the client is trying to access a resource that is protected without including the proper authorization

403 (FORBIDDEN)

This is used when the client is authenticated but isn’t authorized to perform the requested operation on the given resource.

500 (INTERNAL SERVER ERROR)

This is when the server encountered an unexpected condition which prevented the resource from fulfilling the request.

3. Return error details in response

When an API returns an error, it is not enough to return the status code nor status code with a generic error message such as (Server error – An error just occurred), it is necessary that an error returned from an API is detailed as possible. A detailed error helps the API consumer in debugging and to understand what is going on

4. API versioning

API versioning is very important in API development. It allows you to incorporate the latest changes in a new version of your API thereby still allowing users to have access to the older version of your API without breaking your users’ application.

api/v1/articlesapi/v2/articles

5. Validate All Requests

It is important that every API request is validated to ensure that the client has the authorization to access the data request. UserA should not have access to the data of UserB except UserA have the permission to access the data

6. Validate All User Input

It is necessary that APIs that contain data in its body is validated before it is being processed in the backend. For example, a user login API will include email and password in its API body, it is important that the data is validated and no other malicious or invalid data is sent along with the API.

Note that, before processing any data from your API, validate that the data is in the format you are expecting.

7. Document your APIs

Documenting your APIs is really important because it allows the users of your API

to have a basic understanding of what the APIs do,
the data to include in its request, and
the type of response to expect.

Every developer loves good documentation because it makes their work easier. Postman is a very good tool for creating documentation for your APIs

8. Secure your APIs

The security of your API is very important to your application. Having a vulnerability in your API can enable an attacker to have access to your application and perform different exploits.

Below are the following ways to protect your APIs and ensure they are well secured

Ensure you don’t store sensitive information in your Authentication tokens.
Use SSL for your APIs
Validate all inputs and requests
Ensure you encrypt all sensitive information stored in your database.
Enforce a limit to the number of API requests within a timeframe, this is called Rate Limiting or API throttling. Incorporating API throttling can protect you against Brute Force/DDoS attacks
Don’t pass sensitive data in your API, for example, https://example.com/login/username=jack&password=12345

We should all strive to develop APIs that are easy to use and integrate into applications. I hope this article has been able to help you with developing APIs that are a delight to use.

Cheers!!!

The post Best Practices to implement during API Design and Development appeared first on Tolustar.

Introduction to Sassy CSS – CSS with super powers

tolustar — Sat, 18 Apr 2020 14:19:12 +0000

Sass is a stylesheet language that gives your CSS lots of power and flexibility. CSS can be fun, but it becomes difficult to maintain when they grow large, for this reason, CSS preprocessors like Sass come into the playground to give your CSS superpowers.

We will be discussing several superpowers it can provide, and why you should use it in your current/next project

1. Sass Variables

It allows you to declare variables, in other words, you don’t have to repeat certain variables in your project. A variable allows you to store a value so that it can be used in other parts of the project.

For example, you want to build an Agricultural website with a theme of color, using traditional CSS, you will need to repeat same color string for buttons, texts, backgrounds, etc, but with the power of Sass, you declare it in one place and use it in multiple places in your code.

$primaryColor: #3cb878;
$lg-font: 16px;
$md-font: 14px;

p{ 
   color: $primaryColor; 
   font-size: $lg-font;
}

button { 
   background-color: $primaryColor; 
   font-size: $md-font;
}

As you can see, if you change the primary color variable, every element associated with the variable will be affected.

2. Sass Nesting

Here comes another superpower of Sass which is nesting. Nesting allows you to target HTML elements in a cleaner way and with lesser code.

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="/about">About</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
</nav>

nav{
  ul{
    display: flex;
    li{
      list-style: none;
      padding: 20px;
    }
    a{
      color: green;
      text-decoration: none;
    }
  }
}

If we were to rewrite the above code using traditional CSS, it will translate to this

nav ul {
  display: flex;
}
nav ul li {
  list-style: none;
  padding: 20px;
}
nav ul a {
  color: green;
  text-decoration: none;
}

We will be writing “nav” for each tag, which is redundant.

3. Mixins

We discussed the power of variables, mixins comes with an additional blast. Mixins allow you to group styles that can be reused throughout the code. Another power of mixins is that they take arguments that allow the group of styles to be customized each time a Mixin is called.

<div class="background">
  <p class="text">Hello world</p>
  <p class="small-text">it is a beautiful world</p>
</div>

@mixin font ($size, $weight, $family){
  font-size: $size;
  font-family: $family;
  font-weight: $weight
}

@mixin box {
  padding: 20px;
  border-radius: 2px;
  background-color: purple;
  color: white;
}

.text{
  @include font(20px, 500, Roboto)
}

.small-text{
  @include font(12px, 400, Roboto)
}

.background{
  @include box;
}

Using Mixins is a very good way of preventing code redundancy and writing cleaner codes

4. Imports

Maintaining huge CSS files with many lines of codes can become tedious and very frustrating, and also splitting your CSS files into different smaller parts isn’t advisable because you will be serving HTTP requests for each file.

Here comes another superpower, the import superpower. It allows you to create smaller Sass files that can be imported in other Sass files, meaning that you can have multiple Sass files all imported into a single file and that will be served on a single HTTP request.

Here is how to import a Sass file

// Your main Sass file
@import 'button';
@import 'text';
@import "my-custom-theme"; 

.class-name {
  // Your code
}

Simple and easy.

Finally, We have come to the end of this article discussing the superpowers of Sass and how to make your CSS sassy.

There are also other extensive Sass superpowers if you need extensive or in-depth knowledge on how to use Sass visit their documentation website

Do you like this article _ Like Comment and Share. _

Cheers!!!

The post Introduction to Sassy CSS – CSS with super powers appeared first on Tolustar.

13 Important Javascript Array Functions You Should Master

tolustar — Thu, 19 Mar 2020 16:05:52 +0000

Javascript array functions allow you to manipulate data easily with fewer lines of codes. Having a knowledge of these Javascript array functions and how to use them can reduce the number of written codes, increase the performance of your app and also make you a better developer. Enough of the story let’s delve into these array functions.

forEach()
map()
filter()
concat()
sort()
slice()
splice()
includes()
reverse()
push()
pop()
shift()
unshift()

1. forEach()

This method is used to iterate or loop through an array by executing a callback function on each array item

let numbers = [1, 2, 3, 4];
numbers.forEach(
   item => { 
      console.log(item \* 5); // output: 5 10 15 20
})

2. map()

This method is also used to loop through every item in an array, executing a callback function on each item in the array. The map function returns a new array after executing the callback on each item. The major difference between forEach() and map() is map() returns a new array after looping through all items an array while forEach() returns undefined. In other words, if you need the result of the executed callback function on each array item then map() is suited for you otherwise use forEach().

let numbers = [1, 2, 3, 4];


//map function
let mapResult = numbers.map(item => {
  console.log(item * 5); // output: 5 10 15 20
  return item * 5;
})
console.log(mapResult); //[5, 10, 15, 20]


//foreach function
let forEachResult = numbers.forEach(item => {
  console.log(item * 5); // output: 5 10 15 20
  return item * 5;
})
console.log(forEachResult); //undefined

3. filter()

This method allows you to filter through a collection of items in an array. In the filter function, you pass a callback function, the callback function is executed against every item in the array. If the callback function returns a true statement the item is added to a new array.

let cars = [
  { name: "Toyota", topSpeed: 200 },
  { name: "Ferrari", topSpeed: 350 },
  { name: "Ford", topSpeed: 300 },
  { name: "Nissan", topSpeed: 200 },
  { name: "BMW", topSpeed: 250 },
  { name: "Honda", topSpeed: 200 },
]

let fastCars = cars.filter(car => car.topSpeed > 200);

console.log(fastCars);
// [
//   { name: "Ferrari", topSpeed: 350 },
//   { name: "Ford", topSpeed: 300 },
//   { name: "BMW", topSpeed: 250 },
// ]

4. concat()

This method allows you to join multiple arrays together to form one array.

let evenNumbers = [2, 4, 6, 8, 10];
let oddNumbers = [1, 3, 5, 7, 9];
let decimalNumbers = [0.1, 0.2, 0.3, 0.4, 0.5];

let allNumbers = evenNumbers.concat(oddNumbers, decimalNumbers);

console.log(allNumbers); // [2, 4, 6, 8, 10, 1, 3, 5, 7, 9, 0.1, 0.2, 0.3, 0.4, 0.5]

5. sort()

The sort method allows you to sort items in an array either in descending or ascending order. By default without passing a callback to the sort() function, it sorts the array base on the Unicode point value, in other words, it converts each individual array item to string and sort them alphabetically with some special rules such as Capital Letters coming before Lower Letters.

let numbers = [1, 15, 2, 21, 33, 04, 03, 12, 05, 30, 400, 250];

let sortedNumbers = numbers.sort()

console.log(sortedNumbers); //[1, 12, 15, 2, 21, 250, 3, 30, 33, 4, 400, 5]

As you can see in the example above it sorts number 250 before number 3 which is not the desired result we want, Therefore, to get the desired result we pass a callback function to the sort() function.

let numbers = [1, 15, 2, 21, 33, 04, 03, 12, 05, 30, 400, 250];

let ascOrder = numbers.sort((a, b) => a < b ? -1 : 1); 
console.log(ascOrder); //[1, 2, 3, 4, 5, 12, 15, 21, 30, 33, 250, 400] 

let descOrder = numbers.sort((a, b) => a > b ? -1 : 1);
console.log(descOrder); //[400, 250, 33, 30, 21, 15, 12, 5, 4, 3, 2, 1]

6. slice()

This method returns selected items in an array into a new array. The function takes a start argument and an end argument. It uses this start and end arguments to select items in the array. The slice() function selects the items starting at the given start argument, and ends at, but does not include the given end argument.

let numbers = [1, 15, 2, 21, 33, 04, 03, 12, 05, 30, 400, 250];

let removedNumbers = numbers.slice(3, 7);
console.log(removedNumbers); //[21, 33, 4, 3]

7. splice()

This method is used to add or remove items into an array. It deletes zero or more items starting from the provided start argument and replaces the items with zero or more new values that are provided. The important thing to note about splice is that it modifies the initial array. For example

let numbers = [1, 2, 3, 4, 5, 6, 7, 8];
let removedNumbers = numbers.splice(3, 3, "a", "b", "c");

console.log(numbers); // [1, 2, 3, "a", "b", "c", 7, 8]
console.log(removedNumbers); //[4, 5, 6]

8. includes()

This method checks if an array consists of the item passed in the include() function. The function returns true if the item exists and false if it does not.

let numbers = [1, 2, 3, 4, 5, 6, 7, 8];

console.log(numbers.includes(3)); // true
console.log(numbers.includes(9)); // false

9. reverse()

This method reverses the order of the items of the array it is applied to.

let numbers = [1, 2, 3, 4, 5, 6, 7, 8];

console.log(numbers.reverse()); // [8, 7, 6, 5, 4, 3, 2, 1]

10. push()

This method adds the arguments given to it, in order, to the end of the array. It modifies the array directly rather than creating a new array;

let numbers = [1, 2, 3, 4, 5, 6, 7, 8];
numbers.push(9, 10)

console.log(numbers); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

11. pop()

This method removes the last item in an array and returns the item that was removed

let numbers = [1, 2, 3, 4, 5, 6, 7, 8];
let removednumber = numbers.pop()

console.log(numbers); // [1, 2, 3, 4, 5, 6, 7]
console.log(removednumber); // 8

12. shift()

This method removes the first item in an array and returns the item that was removed.

let removednumber = numbers.shift()

console.log(numbers); // [2, 3, 4, 5, 6, 7, 8]
console.log(removednumber); // 1

13. unShift()

This method adds the arguments given to it, in order, to the beginning of the array. It modifies the array directly rather than creating a new array;

let numbers = [4, 5, 6, 7, 8, 9, 10];
numbers.unshift(1, 2, 3)

console.log(numbers); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

*** For more Javascript Array Functions visit https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array

In conclusion, mastering these important Javascript array functions and knowing when to use them will make you a better developer and increase your development workflow.

Do you like this article _ Like, Comment and Share. _

Cheers!!!

The post 13 Important Javascript Array Functions You Should Master appeared first on Tolustar.

6 steps to become a Front-end Developer

tolustar — Sun, 23 Feb 2020 19:00:40 +0000

A front-end developer develops the front end of a web application by implementing visuals and interactive elements that users will engage throughout the application. The front-end developer ensures that the web application is responsive and looks the same across different web browsers and different device screens.

Becoming a front-end developer requires the following steps

Learn HTML and CSS
Learn Git and understand how it Works
Understand UX (User Experience) Design
Learn Javascript
Learn a Front-end Javascript Framework
Develop a mini-website/web app

1. Learn HTML and CSS

HTML is the acronym for Hypertext Markup Language. It is used to create web pages that can be displayed on the world wide web. HTML elements such as (Header, Image, Text etc) are the building blocks of HTML pages, and without HTML you can not create a web page while CSS is the acronym for Cascading Style Sheets. CSS is used for adding style to your HTML web pages, it also describes how elements are to be displayed in different media. Learning HTML and CSS and having a very good understanding of them is very important to be a front-end developer. Fortunately, HTML and CSS are very easy to learn, therefore within a considerable period of time, you will have a proper understanding of them and begin to build web pages for the internet.

There are very good resources on the internet that will help you learn HTML and CSS better. The resources below will give you a soft landing to learning HTML and CSS.

Youtube
W3Schools
Udemy
Udacity

Above all, don’t just read and learn about HTML and CSS but also practice. In other words, practice while learning.

2. Learn Git and understand how it works

Git is a distributed version control system for tracking changes in your source code. It is very important you understand git in the early stages of learning to be a front-end developer because firstly it gives you the power to undo changes to code written in the past, secondly many companies use git because it fosters and helps in the collaboration of many developers working on a project. After that get familiar with any online git repository and create a repository, install git on your machine and start storing your codes on your preferred online git repository. Here are some recommended online git repository

Github
Bitbucket
Gitlab

In addition, study your preferred online git repository documentation to learn basic git commands and have a proper understanding of the repository.

3. Understand UX (User Experience) Design

User experience design is the design process of creating products that provide meaningful and relevant experience to users. User experience design is all about having your users in mind while you create the front end of a web app. If users have bad experiences while using your application, they stop using the application. Therefore it renders the web app useless. Good user experience design in your application makes the users keep using your web app.

As a front-end developer it is important you think like your users, this will help you develop functional and usable front end for your web apps, as a result, make users remain longer on your app and always come back to it.

4. Learn Javascript

Now that you have a proper understanding of HTML and CSS, how to use git, and the concept of good User Experience design, it is time to learn Javascript.

Javascript is a scripting language that allows you to build interactive web apps. It allows you to add more functionality to your web app such as image sliders, popups, form validation, animations, etc.

Javascript might have a steep learning curve but it is worth it in the end. If you face any problems during development Stack Overflow and W3Schools are at your disposal.

Here are some resources that will help you learn and understand Javascript faster.

W3Schools
Youtube
Udemy

5. Learn a Front-end Javascript Framework

Building web apps is like building a house when a builder sets out to build a house, the builder can decide to create the tools and building materials from scratch then start building the house, but that approach is time-consuming and doesn’t make sense. But it is more likely the builder would purchase pre-manufactured tools and building materials, then use them to build the house. In the same way, Javascript Framework is a set of tools that allows you to build single-page apps and advanced web apps. When you set out to code a complex web app, you can code every aspect of the site such as routing to different pages, creating re-usable components, etc – but that is time-consuming and this is where learning a Javascript Framework becomes very important.

Therefore, the next question that comes to your mind is – Which Javascript Framework should I learn?

There are currently three popular Javascript Frameworks which are Angular, React and Vue. Research on the three frameworks and select the framework you feel you will be most comfortable with. Also, you can select a framework of your choice based on the market demand in your locality.

6. Develop a mini-website/web app

How else can you let the world know you are now a front-end developer? The answer is showing them what you have built.

Now it is time to put together everything you have learned and practiced in the above steps. Therefore, develop a mini-website using HTML, CSS, and Javascript in conjunction with a Javascript Framework. Also, ensure you integrate GIT into your project, commit regularly especially when you add a new feature to your web app. Once the app is completed upload it on any front end hosting service such as Github Pages, Netlify, etc.

Examples of mini web apps you can build

A weight tracker app
A calculator
A recipe app
An expense tracker
Simple online store
A Quiz app

In conclusion, to become a front-end developer requires that you follow the above steps with consistency and grit. It is very important you are always willing to learn more and also get better in front-end development. Therefore, you can better by working on more projects, reading front-end development articles and discussions, watch more front-end development videos, participate in front-end development discussions – sooner you will become a professional front-end developer.

Do you love this article – drop a comment, like, share

Cheers!!!

5 things to consider before developing a web application

tolustar — Tue, 18 Feb 2020 14:29:31 +0000

Before you begin developing that great web application, there are certain things you must consider in ensuring your application does not suddenly fail in the future.

Database
Performance
Security
Hosting Provider
User Experience

1. Database

Choosing the right database can be very critical to the success of your app, it is a long term decision and making any changes later in the future can be quite difficult and expensive, you can not afford to get it wrong at the beginning stages of your application development. Here are some benefits of choosing the right database for your application.

It will be easy to maintain
Your application will be fast and it will have a good overall performance
You will write fewer codes as opposed to choosing the wrong database
You will save cost

There are two types of databases commonly used - SQL Databases (MySQL, SQLite, PostgreSQL) and NoSQL Databases (MongoDB, Cassandra DB, CouchDB). Before using any database for your web application you need to ask certain questions that will guide you in selecting the right database for your application.

Would your data have a definite structure
How often would your database schemas change as your application grows
Would I need to make multiple and complex relationships in my database
How many users do you expect to handle simultaneously when your application becomes really popular?
Would your application process big data.

Answering the above questions will give you a cue to know which database type is best for you

2. Performance

The performance of your web application is very critical to the success of your web application. No one will like to use your web application if it takes over a minute to load a page or portion of your web application. Every user wants a fast responsive web application and can still be accessible when their network is really poor. Ways to improve the performance of your web application

Use a Content Delivery Network (CDN) for your static files - A CDN is a worldwide network of servers that allows you to duplicate and store your site’s static elements/files (e.g. CSS, Javascript, images, documents, videos, etc.). These elements are then delivered to visitors from a server closer to their physical location.
Optimize your images
Minify your Javascript and CSS files
Combine CSS and JavaScript files to reduce HTTP requests
Improve your database queries - Database queries with long response time will affect the performance of your web application. Indexing your database tables, refactoring and optimizing your database queries will boost the performance of your web application

3. Security

Having a data breach is detrimental to the growth of your application and company, and it can cost you more in user loss of trust in your product, loss of revenues and possible lawsuits, so it is very important you consider the security of your application at every development stage. The Open Web Application Security Project has written top 10 web application security risks and how you can prevent them read more

4. Hosting Provider

Having the right hosting provider can play a huge role in the growth of your company and web application. A good hosting provider must be fast, secure, have good support, and provides the ability to scale up when there is an influx of users on your application due to certain events. There are so many factors involved in selecting the right hosting provider and it can be overwhelming. Here are a few points to go through before you pick up your new web hosting provider.

Know your hosting needs
How secure is the hosting provider
Reliability and Availability
Essential hosting features
How effective is their customer service
Do they provide interval backups
Scalability

5. User Experience

User experience is how your users feel about every interaction with your web application at the moment they are using it. If you develop a web application that’s ugly, hard to use, and that doesn’t help your users achieve their goals, they’re going to leave feeling frustrated and probably angry. After all, by developing an awful site, you just wasted their time. UX is about creating a user interface that is intuitive and so well designed that users don’t even have to think, they just touch, read, scroll, and otherwise interact until they reach the conversion. Here are some benefits of good user experience

User loyalty - If a user had a bad experience while using your web application, the chances of the user returning to your application are slim. On the other hand, if your web application wows your audience, you’ll begin to breed loyalty with just the first few site interactions. The longer you keep visitors on-site with UX best practices, the more loyal your customers will become, which represents the best-case scenario for long term business success.
Return on Investment - The longer you keep a user on your web application the higher the chances of them making a purchase
Happy users

Do you love this article? comment below, like and share. Cheers !!!

Important Tools To Improve Your Web Development Workflow

tolustar — Thu, 30 Jan 2020 09:41:29 +0000

Developing well-functional web applications could be time-consuming and requires lots of planning, but having the right development tools in your arsenal can improve your web development workflow and speed up some parts of your processes whether you are working in a team or you are working alone. Here is a list of tools that every developer should get familiar with. Let us get started

Git
CI/CD
Postman
Trello

1. Git

According to Wikipedia

Git is a distributed version-control system for tracking changes in source code during software development. It is designed for coordinating work among programmers, but it can be used to track changes in any set of files. Its goals include speed, data integrity, and support for distributed, non-linear workflows.

Mastering how to use Git improves your development workflow. Here are some reasons why git is important

It is easy to revert your mistakes. Git has a feature called commit. Whenever you commit your code project, Git saves a snapshot of your project containing the necessary metadata such as (your name, timestamp, etc). It is synonymous to a save history with the power to revert back or view your code history
With the power of Git Branches, you and your team can work on simultaneously on a project without any hiccups.
As a solo developer working on a beautiful project and you want to implement a new feature that can/might break a lot of things in your project, rather than duplicating your project to isolate, build and test the feature which is time-consuming, Git gives you the power to branch out of your main branch to implement your new feature and ensure everything is tested and works well before merging it back into the main branch.

Note: it is important you always have a copy of your git repositories online. You can use one of the reputable git repositories online such as Github, Bitbucket, Gitlab.

2. CI/CD

CI/CD stands for Continuous Integration and Continuous Deployment which is a process that allows developers to deliver code changes frequently and reliable Continuous Integration (CI) is a development practice where developers deliver code into a repository frequently, preferably several times a day. Each integration is then verified by an automated build and tests to ensure everything is working fine. The important benefit of integrating regularly is that it helps you detect errors in your code quickly and also locate them more easily because each change introduced into the code repository is small, detecting the specific change that introduced the errors. Continuous Delivery is an extension of Continuous Integration which is the process of keeping your codes deployable to the production at any point in time Continuous Deployment is the development practice of deploying your codes automatically to the production server after all build phases and tests have been passed. Advantages of CI/CD in your project

It ensures that you have less bug in your production server
Releasing your product to the production server becomes easier
Releases are less risky and easier to fix in case of any problem as you deploy small batches of changes.
You can release your product more often thus accelerating the feedback loop with your customers.

There are many CI/CD tools out there that you can use in your projects such as Buddy.works, Travis Ci, Circle Ci, Bitbucket Pipelines, etc.

3. Postman

Postman is a Google Chrome app for interacting and testing APIs. It saves you times testing your API calls by presenting you with a friendly GUI for constructing requests and reading responses. Advantages of using postman

Accessibility - To use Postman, one would just need to log-in to their own accounts making it easy to access files anytime, anywhere as long as a Postman application is installed on the computer.
Use of Collections - It lets users create collections for their API calls. Each collection can create subfolders and multiple requests. This helps in organizing your test suites.
Collaboration - Collections and environments can be imported or exported making it easy to share files. A direct link can also be used to share collections.
Creating Environments - Having multiple environments aids in less repetition of tests as one can use the same collection but for a different environment. This is where parameterization will take place which we will discuss in further lessons.
Creation of Tests - Test checkpoints such as verifying for successful HTTP response status can be added to each API call which helps ensure test coverage.

4. Trello

Trello is a cloud-based project management app designed to help individuals and teams collaborate better and keep their projects organized. Advantages of using Trello. It helps you...

plan your project
track your project tasks
keep track of who is doing what in a group
to see all of the working parts of a project together on one page (or multiple pages)

Learning how to use these tools discussed in today's article effectively will definitely improve your deployment workflow, which in turn saves you cost and time, and make your work easier while working on any web development project.

Cheers !!!

Published here first — https://wp.me/p9DCzK-5t

My Top 10 Best Visual Studio Code Extensions

tolustar — Sun, 19 Jan 2020 20:08:53 +0000

Having the right extension installed on your Visual Studio Code can speed up your productivity, make your codes readable and attractive and also foster collaboration. Here is a list of my top 10 Visual Studio Extensions that have made my life easier while developing web and mobile apps, and also made my codes attractive. These extensions are not platform-specific and can be used by any developer that uses Visual Studio Code. Let’s get started.

Gitlens
Prettier
Project Manager
All Autocomplete
Auto close tag
Auto rename tag
Settings Sync
Visual Studio Intellicode
Live share
Save as snippet

1. GitLens

https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens

GitLens is a powerful git extension that helps me glimpse into whom, why, and when a line or code block was changed. It even goes further to compare uncommitted code changes with my last commit on a particular file.

2. Prettier

https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode

Prettier is a code formatter that format codes appropriately with a consistent style. If you want to make your code attractive have prettier in your toolset.

3. Project Manager

https://marketplace.visualstudio.com/items?itemName=alefragnani.project-manager

Project manager houses all my projects in one section of my Visual Studio Code and makes me switch between my projects easily, it eliminates the stress of going through my file explorer searching for my project. If you work on multiple projects, then this extension will come in handy for you.

4. All Autocomplete

https://marketplace.visualstudio.com/items?itemName=Atishay-Jain.All-Autocomplete

Instead of retyping variables or function names that I have typed earlier, All Autocomplete provides auto completion for Visual Studio Code items, so that I don’t waste any more time

5. Auto Close Tag

https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag

Auto close tag automatically adds an HTML/XML close tag, imagine how this speeds up my time coding because my favourite code editor is assists me in writing my codes.

6. Auto Rename Tag

https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag

Just like the Auto Close Tag, the Auto Rename Tag helps me to rename the closing tag by just renaming the opening tag and vice-versa, can you see how sweet that can be especially for tags that have large content in it, I don’t need to stress myself to scroll down or up just to rename the other tag.

7. Settings Sync

https://marketplace.visualstudio.com/items?itemName=Shan.code-settings-sync

Settings sync comes in really handy when working with multiple computers, it can be a lot of stress trying to transfer/update my extensions, settings, snippets from one computer to another. Settings sync helps me to synchronise all my settings and extensions through the use of Github account without stress.

8. Visual Studio Intellicode

https://marketplace.visualstudio.com/items?itemName=VisualStudioExptTeam.vscodeintellicode

This is another time-saver extension for me, it helps with smart code completion suggestion especially when I want to access member functions – this saves me another great deal of extra typing, another icing on the cake is that it defines what the member function does if there is a definition, Javascript developers will enjoy this extension a lot.

9. Live share

https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare

This extension is very useful for collaborating, it comes in handy when I am working in a remote team and I need the help of a team member with a bug. Live share enables me to edit and debug with other team members in real-time. Live share is like a virtual conference room for developers to work together. If you work in a remote team consisting of two or three developers working on the same project, I will advice you all have this extension installed.

10. Save as snippet

Save as snippet enables me to save code blocks I repeatedly type, with a snippet, so that I don’t have to type long blocks of code over and over again.

Bonus

11. Material Theme

https://marketplace.visualstudio.com/items?itemName=Equinusocio.vsc-material-theme

Material theme makes my Visual Studio Code look beautiful and pleasing to the eye

12. Material Icon Theme

https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme

The Material Icon Theme provides lots of beautiful icons based on Material Design for Visual Studio Code.

Thank you for reading my top 10 best visual studio code extension. I would love to read your thoughts and comments. Cheers!!!