Forem: Athul Anil Kumar

JavaScript Basics : How to retrieve an element from the DOM?

Athul Anil Kumar — Thu, 14 May 2020 10:17:05 +0000

JavaScript can do many wonderful things, and one of them is DOM (Document Object Model) manipulation. To manipulate a DOM element you need to access the corresponding DOM object and that is what this post is all about. Lets get right into it.

Needle in a Haystack

There are many methods to get an element from the DOM. We will go from the slowest to fastest methods based on performance.

Accessing By ID

document.getElementByID();

This is the fastest method to retrieve an object from the DOM. When an element is added to the DOM with an id, it is stored as a global variable in the document tree object. (You can find more about how that design choice happened here, it's a funny story!). This is also why DOM element IDs need to be unique. When you call this method passing the ID of the element you need as an argument it instantly refers this global store and returns the DOM object.

Accessing by Class Name or Tag Name

document.getElementsByTagName();    //using tag name
document.getElementsByClassName();  //using class name

document.getElementsByTagName takes a HTML tag name (like <p>,<a>,<span>,<div> etc) as an argument and returns elements having that HTML tag type. document.getElementsByClassName takes a classname as an argument and returns elements having that classname. As the name suggests these two functions retrieve multiple DOM elements at once and hence perform slower than document.getElementByID.

Accessing using Selectors

document.querySelector();    //returns the first element
document.querySelectorAll(); //returns all elements

These are very powerful functions to retrieve DOM elements. They take CSS selectors as an argument to retrieve the elements. This allows you to mix and match selectors to find the exact element(s) you need. document.querySelector returns the first matched element, while document.querySelectorAll returns all matched elements. As functionality and capability increases so does required time. Hence these are the slowest of the native DOM element retrieval functions.

Bonus Method : Accessing using jQuery

jQuery(selector);
jQuery.find(selector);

jQuery is a very useful library of functions which makes it easier to query the DOM and traverse elements. It has a lot of built in functions to retrieve elements and manipulate them. It has the functionality of all the native functions and more, but the major drawback is the time required for every operation. jQuery is much more slower than native JS in doing equivalent tasks. You can find more about jQuery here.

Conclusion

In this post we have seen several different methods for accessing DOM elements using ID, tagName, className, selectors and by using jQuery. Hope you liked it. Thanks for reading through. <3

Part 3 - Using Netlify

Athul Anil Kumar — Mon, 11 May 2020 11:05:46 +0000

If you have followed along with the last two posts, you should've successfully created your site, deployed it and accessed it through your browser. All of the heavy lifting like creating the repo and generating the static content was done by StackBit. And finally the site was deployed by Netlify. Now let's see what Netlify does.

What is Netlify?

Netlify is an all in one modern tool for automating web projects. It allows you to build and deploy your code. It prebuilds all static content and stores it in their edge servers. This allows for near instantaneous loading of content. Since our website is mainly composed of static pages, Netlify is the perfect match for deploying it.

Netlify allows Continuous Integration (CI/CD) on our web projects. What this means is that as soon as you make a change in your website repository on GitHub or publish a new post on DEV, it will automatically be built, rendered and deployed to the Netlify servers. All of this is done by maintaining Netlify hooks to GitHub and DEV. As soon as a git push is done on the master branch of your website repository, Netlify receives a trigger to rebuild the website. Similarly when you post on DEV, Netlify rebuilds the website with your new post. These re-built files are then deployed to the edge servers. This automation allows a seamless method to keep your website up to date and mint.

Netlify : Basics/Features

Change the URL of your website : If you have a paid domain name you can use it, else you can have something like <website-name>.netlify.app. You can change it by
- Going to Netlify Dashboard
- Clicking on your site name
- Select Settings on top tab
- Click on Domain Management on the left tab (Now you'll see your site's name)
- Click on Options next to the name and click Edit Name. Now give your preferred name and it is updated instantaneously.
Status Badge : Under General tab in left hand you can find how to add a deploy status badge. All you need to do is paste the code where you need to display the status (preferably on the README.md file in your GitHub repo.)
Snippet injection : When your static files are deployed, Netlify allows you to inject code into it. Try going to your website when you are logged in to StackBit, you'll see the StackBit control center on the top right corner. That code is injected by Netlify. For example you can also inject a Google Analytics tracker to see the analytics of your site. You can find it under Post-Processing below Build and Deploy.
Form Submissions : Your website will have a contact form for people wishing to contact you. You can find the list of active forms in the Forms tab in the top tab row.
Auto-Preview PR : When you create a Pull Request in GitHub on your site repository, Netlify auto-generates a new link to preview the changes in your PR branch right inside GitHub. You can find more details here
Hide Logs : You can hide the logs of your deployment by going to Continuous Deployment under Build and Deploy and editing the settings.

I hope these points helped you understand more about how your site is being deployed. In the next post I'll focus on what Jekyll is and how to modify your website using it. Thank You for reading through.

Part 2 : The Magic - DEV to JAMStack

Athul Anil Kumar — Sun, 10 May 2020 18:51:14 +0000

Now that we have learnt what a JAMStack site is, we shall proceed to the creation of your own blog.

How to start?

Go to the DEV Settings by clicking on your profile picture at the top-right corner of your window and select Settings. Next navigate to Integrations. Here you'll see Generate a personal blog from your DEV posts. Click it and voila, you are ready. Just kidding, magic requires more work.

The integration for converting your DEV posts to a self-hosted static site is done by StackBit. As you might have seen, posts on DEV are stored as Markdown files which use the Markdown syntax language. Even this post was written in Markdown syntax. StackBit takes these files (which are static of-course!) and uses them to build a blog website for you.

StackBit creates a JAMStack site for you using three main components.

Static Site Generator : As the name suggests this component generates the static files for your site. Some options you'll see are Jekyll, Hugo and Gatsby. I personally prefer Jekyll for it's ease of use and for the rest of this series I'll be explaining using Jekyll
Repository : This is where your site data will be stored(only meta-data, not posts) and deployed from. GitHub is where you'll be asked to create a repository.
CMS and Deployment : A content management service takes care of the storing the website and your dev posts. For deployment Stackbit gives us the option of using Netlify.

Now let's create the site. The steps for this were already published by The DEV team, so I'm not going to write them here. You can find the exact instructions here. If you want to find more technical details about the integration refer here.

TL:DR

Create website here
Select a theme for your website (Fjord is awesome!)
Select Jekyll Static Site generator
Connect DEV and GitHub accounts (Give a funky name to your repo)
Create project and connect to Netlify

And now the magic is complete! Your site is ready.

In the next post I'll explain about Netlify and some of its perks.

Part 1 : What is JAMStack?

Athul Anil Kumar — Sun, 10 May 2020 18:01:01 +0000

If you are a developer who loves writing, this post is for you. You might have already authored more than a dozen posts on DEV or you might be planning to write something (like me!). But what if you can also create a blog site of your own out of these posts. If you want to find out how, hang on tight.

The Elephant

First of all let us address the elephant in the room. JAMStack basically stands for Javascript, APIs and Markdown. But the JAM Stack is not about specific technologies. It’s a new way of building websites and apps. You may have already seen or worked on a JAM Stack site! They do not have to include all attributes of JavaScript, APIs, and Markup. They might be built using sites built by hand, or with Jekyll, Hugo, Nuxt, Next, Gatsby, or another static site generator.

The thing that they all have in common is that they don’t depend on a web server.

On a conventional website when you request a page, the request is sent from the client (your browser) to the server hosting the website. Here the server parses your request and fetches the data from the database. Then the data is processed and sent to your client. The client then renders the data into a form you can view.

On a JAMStack website the data to be served to the user is compiled at deploy time. Ergo, when a request is received by the web server, it simply sends the pre-compiled data that can be readily rendered. We save time, the performance increases because lesser resources are required, the security is increased because the surface area for attacks are reduced and it is easier to scale since only the number of static files increase (CDNs are perfect for this use case).

In conclusion, JAMStack websites work by storing the data in static files that can be readily served without further processing. For a website serving blog posts this is more than ideal, because once a post is published it is rarely edited again, it remains static. And that's why we are here.

In the next post you can find out how to create a JAMStack website using your own posts on DEV.

When using multiple JS classes which is a better way of writing code?

Athul Anil Kumar — Wed, 29 Apr 2020 08:02:26 +0000

I have multiple JS classes in my project, and some of them are dependant on the others. Is it better to export from a module and use it as import in another module (or) create an instance of the class I need and use it as required(here I have an HTML file where I've included all the scripts I need)?

Am I missing any fundamental of export/import? Please feel free to correct.

PS: I'm using Node.js

Thank You