Category: Javascript

What is Blitzjs and Why you should use it?

Introduction
BlitzJS is a full stack framework. In simple terms it’s NextJS with additional features to make a developers life easy.

Quick Recap of NextJS (a Full Stack framework)

  1. Server side rendering feature – good for SEO.
  2. Page based Routing
  3. Lets you create backend API’s.

Why Blitz then?

But when you create a new NextJS app it’s totally bare-bones. You need to spend time adding basic stuff like eslint, prettier etc.

This is where Blitzjs shines. It makes building a web application fun and easy.

Key features

  1. No APIs needed
    You can import server side code to frontend directly, no API’s needed. Blitz does all the hard work for you. Alternatively you can continue using REST or GraphQL API’s to fetch data.
  2. Authentication
    When you create a new application with Blitz you get Authentication feature out of the box. Features like Login, Signup and Forgot Password. This can save you lot of time as setting up authentication is not only time consuming but also tricky.
  3. Code Scaffolding
    The initial code is scaffolded for you but doesnt limit you. This can save you tons of time. That said you are free to change it the way you like.
    To add additional modules there are recipes. Like if you want to add tailwind or material-ui it’s just one command away.

In the next article I will share steps to create a simple application using Blitzjs.

What is Astro and why you should consider using it to build your website

Astro is one of the most notable projects of the year. Astro is a tool to build web sites that load faster because they ship less JavaScript.

Risingstars

How can you build a faster website?

To build a faster website you need to ship less code. Astro is a kind of static site builder that delivers lightning-fast performance with a modern developer experience.

With Astro you can build your site using your own framework like React, Vue or just HTML and JavaScript. Astro then renders the entire page to static HTML, removing all JavaScript from your final build by default.

If there is a real need for some Javscript component, Astro loads it when it’s visible.

It supports all the npm packages, CSS modules etc and is SEO enabled.

How it works?

Astro works like a static site generator which means it will generate a static HTML site for you during build, with almost no Javascript. It’s pretty obvious that this will be much faster compared to a site with Javascript.

When a component, like add to cart or carousel, needs some JavaScript, it loads that component. The rest of your site continues to exist as static, lightweight HTML. This new approach to web architecture is called islands architecture.

Sample project is available at Github – https://github.com/ankur-srivastava/astro-blog

Gentle Introduction to HTMX

Htmx is a library that allows you to access modern browser features directly from HTML, rather than using javascript. It’s actually built using javascript.

“The concept is, let’s use the original model of the web for building web apps, but let’s make HTML more powerful.”
– Carson Gross, creator of htmx

Gross also thinks that HTMX can reduce the complexity for many websites. There is a lot of Javascript code that is written, and with HTMX we can reduce that considerably.

It extends the core idea of HTML so that you can do much more with it. When used on server side you typically send back HTML and not JSON.

Frontend developers do not need to write JavaScript, when using HTMX. They can use additional attributes in HTML tags to achieve dynamic content and updates.

It’s backend agnostic, so you can use your choice of programming language for backend like Java, Python, PHP etc.

Lets take an example

<a href="/about">About</a>

When clicked this anchor tag will take you to the “About” page. It will issue an HTTP GET request and display the response.

Now consider

<button hx-post="/clicked"
       hx-trigger="click"
       hx-target="#parent-div"
       hx-swap="outerHTML">
    Click Me!
</button>

This tells htmx:

“When a user clicks on this button, issue an HTTP POST request to ‘/clicked’ and use the content from the response to replace the element with the id parent-div in the DOM”

The project documentation says that now

  • Any element, not just anchors and forms, can issue an HTTP request.
  • Any event, not just clicks or form submissions, can trigger requests.
  • Any HTTP verb, not just GET and POST, can be used
  • Any element, not just the entire window, can be the target for update by the request.

Understand the what, why and how of Promises in Javascript

What are Promises? Why to use them?

Say you are a celebrity blogger and people are waiting for your next blog. You promise to notify them once the blog is ready. You take their emails and once your blog is done notify them via email.

A promise in Javascript works similarly. If you have an asynchronous operation you can use a promise to let the consumer know about its outcome.

It’s a placeholder for an asynchronous operation outcome. It’s an object which has a state and a value.

let promise = new Promise(function (resolve, reject) {
  // DB call
  if(call was success) {
    resolve(value)
  }
  reject(error)
})

Promise has an executor function with two parameters – resolve and reject. These parameters are predefined by the javascript engine.

Promise object has a state and a result. State can be pending, fulfilled or rejected. Value can be undefined, value or error.

Problem with Promises – a chain of promises makes the code complex.

Gentle introduction to Callbacks in Javascript

What are callbacks and what is a callback hell. In this short video I provide a simple explanation to callbacks.

A Callback is a function that is passed to another function.

Callbacks in Javascript
/*
Three ways to work with asynchronous operations in Javascript
1. Callbacks
2. Promises
3. async / await
*/

/*
Callback is a function that is passed to another function
*/

setTimeout(function () {
  console.log('Done')
}, 3000)

function myFunction(param1, callback) {
  // some operations
  console.log(param1)
  callback()
}

function myCallbackFunction() {
  console.log('Ankur')
}

myFunction(123, myCallbackFunction)

What is ‘this’ in Javascript world?

In this short video tutorial I explain the basics of this keyword in Javascript. It’s a confusing concept for those starting out with Javascript.

-- QUICK INTRODUCTION TO this KEYWORD

-- If a function has a this reference in it, it points to an object. The object it points to depends on how the function was invoked.
-- It does not refer to the function itself.

function simpleFn() {
  console.log(this) // this points to an object
}

simpleFn() // -- window

let myObject = {
  myFunctionTwo: simpleFn,
  name: 'Ankur',
  age: 36
}

myObject.myFunctionTwo()

// strict KEYWORD
// .call(obj2)

What is Lexical Scoping in Javascript

In this short video tutorial I explain what is meant by Lexical Scoping.

Sample code snippet used for explaining.

// Lexical Scope
// Code in one scope can access variables in same scope or any scope outside // of it.

// Global variables
let x = 2

// function with an inner function
function outerFn() {
let y = 9
// can access x, y

function innerFn () {
let z = 44
// can access x,y,z
console.log(x, y, z)
}
}

Introduction to HTML

If you are wondering how to build websites or web applications then this Lecture will be helpful for you.

In this Lecture I will discuss

1. Technologies needed to build Websites or Web Applications
2. Introduction to HTML

Code is available on Github

Technologies needed to build Websites or Web Applications
The basic technologies required to create a website are HTML, CSS and Javascript.
We will explore HTML in this Lecture. CSS and Javascript are topics for coming lectures.

What is HTML?
Hyper Text Markup Language can be used to structure a web page. It is a Markup Language.

HTML Elements
You can use the following elements to build your Page.

  • Paragraph
  • Headings
  • Images
  • Lists