Category: Javascript

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

Learn about Conditional Statements in Javascript

In this Lecture we will discuss about conditional statements in javascript

  • if – else statement
  • switch statement
  • ternary operator

The code examples below are also available on Github

if…else

Syntax

if (condition) {
// code
} else {
// code
}

else if
To add more else conditions you can use else if clause

if (1<x<2) {

} else if (2<x<3) {

} else {

}

We can use conditional operators like <, >, <= etc.

if(x == ‘A’) {

}

From the documentation

Any value that is not false, undefined, null, 0, NaN, or an empty string (”) actually returns true when tested as a conditional statement, therefore you can simply use a variable name on its own to test whether it is true, or even that it exists (that is, it is not undefined.)

 

if (data) {
console.log(data);
}

Switch Case
If-else is good when we have few conditions to take care of. What if we want to add more conditions. Let us look at an example

let day = ‘Monday’
switch(day) {
case ‘Monday’:
console.log(‘Today is Monday’)
break;
case ‘Tuesday’:
console.log(‘Today is Tuesday’)
break;
case ‘Wednesday’:
console.log(‘Today is Wednesday’)
break;
default:
console.log(‘No Match’)
}

This example demonstrates how to use switch statements.

Ternary Operator
It’s a convenient way to write if-else in a compact manner.

Instead of writing

let x = 8

 

if(x>2) {
// print 3
} else {
// print 5
}

we can write

let x = 8
(x > 2) ? 3 : 5