Introduction and Getting Started with GatsbyJS

JavaScript

gatsby

Introduction and Getting Started with GatsbyJS

GatsbyJS is a free, open-source React-based static site generator.  It is specifically built with performance in mind and delivers 2-3x fast results as compared to same kind of applications built using different tools.

Pre-Requisites:

Before you start working with Gatsby, it’s better to have some prior knowledge of JavaScript, ES6, React and obviously HTML and CSS.

Misconceptions about Gatsby:

It is a general misconception about Gatsby which may be due to the slogan that it’s a static site generator which makes people think, what if we have to use dynamic content? Brace yourselves, everyone, because the answer is YES! You can use dynamic content without any problem in Gatsby.

Get Started:

So now as we know what Gatsby is, let’s get started:

First of all, you should have the latest version of NodeJS installed on your system. If you don’t have Node installed, you can visit the NodeJS website (link provided at the bottom) to install Node.

Now open the terminal and install Gatsby CLI:

npm install -g gatsby-cli

This command installs Gatsby CLI globally on your system.

Gatsby CLI will help us use specific functionality like creating a new website, running development server and creating production build, etc.

Now let’s create a new project using CLI. Run the following command in terminal:

gatsby new gatsby-site-name

This command will generate a new website for us which is ready to run (no configuration required whatsoever) HURRAAAYYY!

Running Development Server:

In order to start the development server, use the following command in terminal:

gatsby develop

It will start a hot-reloading development environment on port 8000. You can access the website using URL: localhost:8000

Project Breakup:

By now you have installed and seen the running demo website. Time to explore the code doesn’t you think! Open project in your favorite text editor, I prefer Visual Studio Code, but you can choose whichever code editor you feel comfortable with.

Once you will open the project on the code editor, you will see the following project structure:

|-- / node_modules
|-- /src
    |-- / components
    |-- Images
    |-- /pages
|-- gatsby-config.js
|-- gatsby-node.js
|-- gatsby-ssr.js
|-- gatsby-browser.js
|-- package.json

Notable files/folders and their definitions:

  • node_modules — contains all of the installed modules and packages
  • gatsby-config.js — configure options for a Gatsby site, with metadata for the project title, description, plugins, etc.
  • gatsby-node.js — implement Gatsby’s Node.js APIs to customize and extend default settings affecting the build process
  • gatsby-browser.js — customize and extend default settings affecting the browser, using Gatsby’s browser APIs
  • gatsby-ssr.js — use Gatsby’s server-side rendering APIs to customize default settings affecting server-side rendering
  • src/components — this folder contains the components and some essential components that you need are created by default here like header and layout.
  • src/images — contains images for your website
  • src/pages — website pages will reside in this folder

Pages, Routing and Internal page linking:

The most important question that comes to our mind now is how pages and routing work.

When you create a new file under the src/pages folder, file name automatically becomes the path of that page. For example, if the file name is “test_page”, page route will become “localhost:8000/test_page”.

Now next question that comes to our mind is how internal page links work. Although you can use an HTML anchor tag if you have some prior knowledge of React, your answer should be a big NO.  If you will use anchor tag, it will destroy the whole purpose of Single Page Application (SPA) as it will reload the page.

Gatsby offers us a very elegant solution for page linking. It has a built-in <Link> component which enables linking internal pages and offers a performance boost by using the preloading features. This means if you are on a certain page that contains the Link tag, Gatsby will preload the page defined in that tag for a smooth user experience.

Example

import React from "react"
import { Link } from "gatsby"

const Page = () => (
<div>
    <p>
      Check out my <Link to="/blog">blog</Link>!
    </p>

    <p>
      {/* Note that external links still use `a` tags. */}
      Follow me on <a href="https://twitter.com/gatsbyjs">Twitter</a>!
    </p>
</div>
)

In the example mentioned above, you can see the basic usage of Link tag. In order to use it, you must import the Link component and in the link tag, you must define “to” attribute for the destination link. Link tag offers tons of cool features too like active link class and active link styles etc, but as the scope of this article is just an intro and is meant for beginners so we are not going to discuss them here. You can check out the official Gatsby documentation for more details.

Gatsby Plugins:

Gatsby is designed to be extensible so it offers tons of cool features in the form of plugins. The advantage of using Gatsby plugins is that they offer prepackaged integration into the core Gatsby APIs to save you time and energy, with minimal configuration.

You can install these plugins (https://www.gatsbyjs.org/plugins/) as node packages and add functionality to your website.

Installation and Configuration:

To install the Gatsby plugin, just run the nom install command with the name of the plugin:

npm install --save gatsby-transformer-json

In order to make the plugin work, you also have to add the plugin name in a gatsby-config.js file in plugins array.

module.exports = {

  plugins: [`gatsby-transformer-json`],

}

If the plugin takes options, you can also define them here too.

Using Third-Party Plugins:

Plugins offered by Gatsby are just an added feature, it doesn’t mean that it is mandatory only to use these plugins. If you want to install other third party plugins/packages like Axios, lodash, etc, you can install and use them too.

Generating files for deployment on the server:

Once your website is created, obviously you want to deploy it on the server. Run the following command in terminal:

gatsby build

Once done, you will find all the files required for deployment in the public directory at the root of the project.

Important Links:

https://www.gatsbyjs.org/

https://www.gatsbyjs.org/docs

https://www.gatsbyjs.org/plugins/

https://nodejs.org/en/download/

 

How to Setup Angular Project for Beginners

How to Setup Angular Project for Beginners

JavaScript

In the last couple of years, we have seen that Single Page Applications (SPAs) and UI frameworks have taken over the JavaScript world by storm. Today we have multiple frameworks and libraries options ranging from React to Angular and many more.

 So, let’s discuss how to get started with Angular, how to install it and take a quick overview of the structure of the default bootstrap project.

Angular:

Commonly referred to as “Angular 2+” or “Angular v2 and above” is a Typescript-based open-source web application framework used to develop Single Page Applications (SPAs).

Angular CLI:

Angular CLI (Command Line Interface) was introduced with Angular. As the name specifies, it is a command-line tool for creating angular applications. It is recommended to use angular CLI for creating angular applications as you don’t need to spend time installing and configuring all the required dependencies and wiring everything together. It also provides other features like building and running application etc.

Angular CLI can be installed using the following command in a command prompt:

npm install -g @angular/cli

You must have a Node Package Manager (NPM) installed to install angular CLI. If you don’t have NPM installed, it can be downloaded from the Node website for free (https://nodejs.org/en/download/).

Angular Project Setup:

To set up the angular project we will use Angular Command Line Interface (CLI). Open the command prompt and go to the location where you want to create the project. Run the following command:

ng new hello-world

Now navigate to the directory (cd hello-world), you will see that CLI has created a bootstrap project with multiple files and folders. Run the project using the following command:

ng serve

The angular project use port 4200 by default. You can see the default project by opening the following link in your browser:

http://localhost:4200/

IDE for Angular:

You can use any IDE which you like and comfortable working with. Visual Studio Code is also a very good option; it is free and gives tons of built-in options and plugins to work with Angular.

Angular Bootstrap Project Overview:

In the angular bootstrap project created by CLI, you will see multiples files and folders. Let’s take a quick overview of what these files and folders do.

  • e2e (End to end): This folder contains testing files for the high-level test of a feature.
  • node_modules: This folder contains all the modules and plugins required for your project. Any plugin you will install later using npm will also go in this folder.
  • src: This folder contains the main logic of your website. It is subdivided into folders like ‘app’ folder where all the components will be created, assets folder for your images, fonts, etc. Environment folder contains files for production and development by default. Your styles file is also placed in this folder.

Outside these folders on the root, you have your angular.json file for configuration and package.json file which contains information regarding all the installed packages.

TypeScript:

As already mentioned, Angular uses typescript, so what is typescript! Typescript is a superset of JavaScript with more features than vanilla JavaScript, it is strongly typed and provides features like Classes and Interfaces, etc. Typescript cannot run directly in the browser, it is first compiled by Angular CLI into JavaScript and then it runs in the browser.

How Angular application gets loaded:

By now you must have checked the bootstrapped angular app created using Angular CLI in your browser. Now you must be wondering how the app gets loaded. Let’s solve this mystery and see how the magic happens.

If you open the src folder, you will see Index.html file, open it in the editor and you will see following tags:

<app-root></app-root>

These tags represent the base component of our application. Logic written in this base component will be populated in these tags. Now the question is that how will this happen?

If you open the main.ts file you will see the following line:

platformBrowserDynamic().bootstrapModule(AppModule).catch(err => console.error(err));

Using this line we are letting angular know that which module you have to load when you start. This AppModule is located in app folder under src folder. Now if you open app.module.ts file you will see that we are importing AppComponent file at the top and passing it to the bootstrap array. This bootstrap array contains all the components which angular should know when it starts.

Now open app.component.ts file. Here you will see app-root selector and AppComponent class declaration which I am sure you are now familiar with.

Components:

These are the building blocks of angular application. Angular application is composed of multiple components.

When you generate a component it will give you following files:

  • Component styles file (component_name.component.css)
  • Component template file (component_name.component.html)
  • Component typescript file (component_name. component.ts)
  • Component unit test typescript file (component_name. component.spec.ts)

Component style file contains all styles specific to component, template file contains the HTML template, Typescript file contains the business logic and Unit test file contains the Unit tests.

Component TypeScript File Deep Drive:

Typically a component typescript file looks like this:

import {Component} from '@angular/core';

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})

export class AppComponent {
//logic goes here
}

Component typescript file is basically a typescript class file where all your business logic resides. We can divide it into three sections. First the Imports section where you import all the modules or packages required. Secondly the component metadata section declared using @Component where we define the component configuration logic like what will be the selector, its template path and styles path. Third is the business logic section, this is the class which contains all our logic.

Angular Modules:

You must have noticed an app.module.ts file in the app directory and must be wondering what this file do. Angular uses components to build web pages and modules to bundle these components into packages. Angular modules are defined by @NgModule decorator, like @Component decorator, typescript does not know about @NgModule decorator either. So we will import it from the @angular/core package as we imported @Component.

Angular module typically looks like this:

@NgModule({
   declarations: [AppComponent],
   imports: [BrowserModule ],
  providers: [],
   bootstrap: [AppComponent]
})

Declarations array contains the component class names and imports array contains names of other modules. Other modules can either be Angular’s built in modules or modules created by user. Modules is an advance topic so we will discuss it later in detail.

javascript

Stop Struggling with JavaScript

JavaScript

Are you a front-end developer who is struggling to truly understand JavaScript? Or maybe you are UI/UX designer working with a front-end developer who is an advanced JavaScript developer. Regardless where you are at in your professional web dev/design career, JavaScript is an important language to at least have some basic understanding of.

I have even avoided JavaScript for a portion of my web career just because I was either assigned to projects that did not require my full attention to the language or was able to work with other front end developers who were able to assist me with that portion of the project. I have even written about JavaScript and other web anxiety.

Beyond HTML, CSS, PHP and WordPress

But recently I had to put my foot down and fully indulge in the JavaScript language because I wanted to advance my career beyond HTML, CSS, PHP, and WordPress.  I have spent indulging in physical books, e-books, audiobooks, videos, and online courses. They say that “10,000 hours” in anything makes you an expert and that is what I set out to do.  Here’s what I have spent doing to truly understand the JavaScript and break any fear of the language:

JavaScript Books:

Below is a list of books that have helped me truly understanding programming and the JavaScript language, I especially recommend that You Don’t JS Series By Kyle Simpson. I personally enjoyed the hard copies of the book because I enjoy highlighted and making physical notes in the book but there are of course free digital copies on github.

JavaScript Audiobooks:

I have a long commute to and from work some days. So beyond podcasts, I enjoy audiobooks too. Now I know what you may be thinking? JavaScript audiobooks? How? Why? It’s not all about writing code, all though that is the fun part, sometimes. It’s also about understanding the overall concept of it.

These are just some of the many ways I am improving my JavaScript skills. So, whatever it’s you are afraid to learn or don’t think you can’t learn, just consume yourself in for 10,000 hours and eventually you will get it.