DEV Community: Surjith S M

How to add an Estimated Reading Time to your Astro Blog with Javascript & Markdown Plugins

Surjith S M — Thu, 29 Dec 2022 14:33:08 +0000

First, create the function in any folder. Eg: ./src/utils/readingTime.js. Now add the following code.

import getReadingTime from "reading-time";
import { toString } from "mdast-util-to-string";

/** Estimated Reading time */
export function remarkReadingTime() {
  return function (tree, { data }) {
    const textOnPage = toString(tree);
    const readingTime = getReadingTime(textOnPage);
    data.astro.frontmatter.estReadingTime = readingTime.minutes;
  };
}

Next, You need to install the following packages:

npm install reading-time mdast-util-to-string
# or
pnpm add reading-time mdast-util-to-string

The above npm plugins are used to convert the markdown to string and then calculate the reading time in minutes.

Now, open the astro.config.mjs file and add the following code.

import { defineConfig } from "astro/config";

import { remarkReadingTime } from "./src/utils/readingTime";

export default defineConfig({
  markdown: {
    remarkPlugins: [remarkReadingTime],
    extendDefaultPlugins: true,
  },
});

That's it. Now each frontmatter will include an extra variable called estReadingTime which you can use later like:

---
const { frontmatter } = Astro.props;
---

<span>{frontmatter.estReadingTime} min read</span>

Done :)

Checkout the Astro & plugin documentation for more detailed instructions and options.

Creating a Dark, Light, System (Auto) Toggle Switch in Astro

Surjith S M — Tue, 27 Dec 2022 16:08:51 +0000

You can see a lot of examples with Dark & Light Toggle. But adding "system" or "auto" option along with that is bit tricky.

No time? Jump to the final code

Check out: Astroship - Free Astro Starter Template

System (Auto)

The system or auto option will switch the dark light theme based on user's system preferences. If they have "Auto" set in the system based on day/night, our site would show dark & light accordingly.

Step 1: Create the HTML

First, create themeswitch.astro file in /components folder. Then add the following HTML Code.

<select name="themeSwitch" id="themeSwitch">
  <option value="system">System</option>
  <option value="dark">Dark</option>
  <option value="light">Light</option>
</select>

Step 2: Add the CSS

Now add a style to setup the color-scheme for default HTML elements.

<style>
  :global(.dark) {
    color-scheme: dark;
  }
</style>

Step 2: Add Script

Now, add the below javascript code to the file and it will handle all of the usecase for our theme switch.

<script>
  const select = document.getElementById("themeSwitch") as HTMLSelectElement;
  const theme = localStorage.getItem("theme");
  const systemTheme = window.matchMedia("(prefers-color-scheme: dark)").matches
    ? "dark"
    : "light";

  if (theme !== null) {
    select.value = theme;
  } else {
    select.value = systemTheme;
  }

  function updateTheme(value) {
    const theme = value === "system" ? systemTheme : value;
    document.documentElement.classList.remove("light", "dark");
    document.documentElement.classList.add(theme);
    localStorage.setItem("theme", value);
  }

  updateTheme(select.value);

  select.addEventListener("change", (event: Event) => {
    const select = event.target as HTMLSelectElement;
    updateTheme(select.value);
  });
</script>

That's it. You have a working Theme Switch in Astro.build.

Final Code

I have combined everything and added some styling with tailwindcss. Here's how the page would look finally.

---
import { Icon } from "astro-icon";
---

<div class="inline-flex items-center">
  <Icon class="w-4 h-4 mr-2" name="heroicons-outline:sun" />
  <select name="themeSwitch" id="themeSwitch">
    <option value="system">System</option>
    <option value="dark">Dark</option>
    <option value="light">Light</option>
  </select>
</div>

<style>
  :global(.dark) {
    color-scheme: dark;
  }
</style>

<script>
  const select = document.getElementById("themeSwitch") as HTMLSelectElement;
  const theme = localStorage.getItem("theme");
  const systemTheme = window.matchMedia("(prefers-color-scheme: dark)").matches
    ? "dark"
    : "light";

  if (theme !== null) {
    select.value = theme;
  } else {
    select.value = systemTheme;
  }

  function updateTheme(value) {
    const theme = value === "system" ? systemTheme : value;
    document.documentElement.classList.remove("light", "dark");
    document.documentElement.classList.add(theme);
    localStorage.setItem("theme", value);
  }

  updateTheme(select.value);

  select.addEventListener("change", (event: Event) => {
    const select = event.target as HTMLSelectElement;
    updateTheme(select.value);
  });
</script>

How to activate boosted free plan from Sanity CMS (double the limits using coupons)

Surjith S M — Thu, 10 Nov 2022 12:52:29 +0000

Sanity is a popular CMS. It gives a generous free plan to get started with any project. But how about getting double the free limits? Here's how:

What does the regular Sanity free plan include?

100k API requests
500K API CDN requests
10GB Bandwidth.

What does the Sanity boosted free plan include?

200k API requests
1M API CDN requests
20GB Bandwidth.

Method 1: Using Youtube Coupon

Sanity Youtube Videos offers double free limits for their viewers. See: https://www.sanity.io/youtube

Follow the link above to create boosted plan or add the following command while creating new project.

npm install -g @sanity/cli
sanity init --coupon kapnstt

Method 2: Using Productday Coupon

Sanity provides high limits for Productday - The v3 launch. See Announcement.

# To launch a new project with the coupon
npm create sanity@latest -- --coupon productday

Method 3: Using Syntax FM Coupon

Sanity has been partnered with Syntax FM and provides double the limits. See: https://www.sanity.io/syntax

Add the following command while creating new project.

npm install -g @sanity/cli
sanity init --coupon syntaxfm2022

Method 4: Using Next.js Conf Coupon

Sanity is a sponsor of Next.js Conference. Thus they provide double the limit for Next.js Conf participants. See: https://www.sanity.io/nextjsconf

Deploy their new Sanity Starter using the following link and which will get you double the limits.

Deploy Next.js + Sanity Starter

Method 5: Using Freecodecamp Coupon

Sanity partners with freecodecamp to get double free limits for their students. See: https://www.sanity.io/freecodecamp

Follow the link above to create boosted plan or add the following command while creating new project.

npm install -g @sanity/cli
sanity init --coupon boosted-free-2021-12-08

Method 6: Using Modern Frontends Coupon

Sanity partnered with Modern Frontends double free limits for their viewers. See: https://www.sanity.io/modernfrontendslive

Follow the link above to create boosted plan or add the following command while creating new project.

npm install -g @sanity/cli
sanity init --coupon modernfrontends22

Method 7: Using Fireship Coupon

Sanity partnered with Fireship to get double free limits for their youtube viewers. See: https://www.sanity.io/fireship

Follow the link above to create boosted plan or add the following command while creating new project.

npm install -g @sanity/cli
sanity init --project-plan boosted-free-2021-12-08

Method 8: Sanity Meetups & Conference

If none of the above method works for you while you read this (it works as of now) you can still get double limits by participating on Sanity meetups and conference which happens every few months.

I definitely recommend you to use Sanity CMS. Its better than any other CMS and the developer experience is top notch.

React JS - Set State of Parent Component from Child

Surjith S M — Mon, 26 Oct 2020 14:38:21 +0000

Parent

function Parent() {
    const [value, setValue] = React.useState("");

    function handleChange(newValue) {
      setValue(newValue);
    }

    // We pass a callback to Child
    return <Child value={value} onChange={handleChange} />;
}

Child

function Child(props) {
    function handleChange(event) {
        // Here, we invoke the callback with the new value
        props.onChange(event.target.value);
    }

    return <input value={props.value} onChange={handleChange} />
}

3 Reasons why Gmail SMTP is not working with PHPMailer()

Surjith S M — Tue, 01 Sep 2020 15:03:38 +0000

If you are using Gmail as an SMTP Server, most chances are it won't work on the first try. And it would definitely won't work if you have enabled 2-factor authentication.

So here are the 3 steps you would need to complete before be able to send emails using Gmail SMTP Server.

1. Enable IMAP

This is simple, Just go to Gmail Settings and click the Enable IMAP option.

2. Allow Less Secure Apps

Now, go to the following link to Allow Less Secure Apps to Access your Gmail Account. https://myaccount.google.com/lesssecureapps

3. Unlock Other Apps

If you are using 2-Step Verification, the above step won't work. Instead you would need to visit the following link and Unlock Other Apps: https://accounts.google.com/DisplayUnlockCaptcha

Hooraay!! SMTP Form should work fine now.

Still not working? Comment below or ask the Gmail Community

[Solved] 2020: Pure Vanilla Javascript Smooth Scroll to Element on anchor tag click #id

Surjith S M — Wed, 26 Aug 2020 16:11:06 +0000

It took me half an hour and countless of stackoverflow pages to find a perfect solution for a smooth scroll for <a> anchor links.

So I'm adding here it as a snippet for future googlers.

document
    .querySelectorAll('.nav__item a[href^="#"]')
    .forEach(trigger => {
        trigger.onclick = function(e) {
            e.preventDefault();
            let hash = this.getAttribute('href');
            let target = document.querySelector(hash);
            let headerOffset = 100;
            let elementPosition = target.offsetTop;
            let offsetPosition = elementPosition - headerOffset;

            window.scrollTo({
                top: offsetPosition,
                behavior: "smooth"
            });
        };
    });

How to Hide Email Address from Bots yet Show it to Humans

Surjith S M — Tue, 21 Jul 2020 08:54:39 +0000

Disclaimer: We can't stop Human Spam Bots though

The Problem

We are afraid to show our email ID to our website users as we all know it definitely attracts bots.

The Broken Solution

To beat spam bots, we have used some solutions like this

email [at] example [dot] com

Even its a good idea to show it this way, There are two problems.

Bot can easily programmed to parse email from this format.
Its actually a UX pain point for users to send email.

The Real Solution

There is one way we can use to hide email address to bots but your users won't even notice it.

It is by using an Email Obsfuscator which converts your email using Character Entities. You can do this online with two clicks. Check out this online obfuscator

// Before
<a href="mailto:email@example.com">email@example.com</a>

// After
<a href='mailto&#58;ema%69&#108;&#64;%&#54;5&#120;&#37;&#54;1&#109;ple&#46;co&#109;'>email&#64;&#101;x&#97;mple&#46;co&#109;</a>

// User See
email@example.com

Yes. The code looks funny, but it works. It keeps out the bots as they are scanning the code. What I really like in the solution is it won't obfuscate all characters. Instead they leave some as normal. This makes even hard for bots to convert the entities to normal email. Pretty neat idea.

Are you using this method already? What do you think? Let me know your comments.

Unicode Character Reference

Surjith S M — Tue, 21 Jul 2020 08:26:56 +0000

Bookmark this!

Most Commonly Used Unicode Characters. ¯\_(ツ)_/¯

Name	Symbol	Alt + N	HTML
Copyright	©	Alt + 0169	©
Registered	®	Alt + 0174	®
Trademark	™	Alt + 0153	™
Left guillemet	«	Alt + 0171	«
Right guillemet	»	Alt + 0187	»
Left angle	‹	Alt + 0139	&lsaquo;
Right angle	›	Alt + 0155	&rsaquo;
Left angle bracket	〈	-	&lang;
Right angle bracket	〉	-	&rang;
En dash	–	Alt + 0150	–
Em dash	—	Alt + 0151	—
Bullet / Middot	•	Alt + 0149	•
Leftward arrow	←	Alt + 27	←
Rightward arrow	→	Alt + 26	→
Upward arrow	↑	Alt + 24	↑
Downward arrow	↓	Alt + 25	↓
Left right arrow	↔	Alt + 29	↔
Up down arrow	↕	Alt + 18	-
Black right rectangle	►	Alt + 16	►
Black left rectangle	◄	Alt + 17	◄
Black up rectangle	▲	Alt + 30	▲
Black down rectangle	▼	Alt + 31	▼
Hearts	♥	Alt + 3	&hearts;

ʘ‿ʘ

Migrating from Bootstrap 4 to 5 - Read this before you upgrade!

Surjith S M — Tue, 21 Jul 2020 08:10:34 +0000

Bootstrap 5 is in Alpha Stage and we are all excited about this news as this new update from Bootstrap ships a lot of new features as well as breaking changes from the old version. So we should be very careful when updating your Website or Application to the new version.

What’s new in Bootstrap 5
Upgrade Bootstrap 4 to 5

What’s new in Bootstrap 5

Before we talk about how we can upgrade our website to new version, first let’s checkout the new features of Bootstrap v5.

1. RIP jQuery

Yes. This is the first highlight of Bootstrap 5. It does not ship with jQuery by default. However they are not making the mistake by completely removing it. Instead Bootstrap now provides an option for users to include jQuery if they wish.

All of their components are now powered with Pure Vanilla Javascript. Thanks to the modern front-end development tools and browser support. Here’s what their creators said about dropping jQuery as a dependency.

Personally, I’m forever grateful for the empowerment and support it gave me to continue writing front-end code. it’s forever changed JavaScript itself. Thank you to every jQuery contributor who made that possible for folks like me.

@mdo & team

2. CSS Variables

Since they dropped the support for Internet Explorer, It was easy for them to implement the new CSS Custom Properties that everyone wished for. The distance between SASS and CSS are now reducing day by day.

No more complex installation and compilation just to store some color variables. Yay!!! Here’s how it looks like:

    :root {
      --bs-blue: #0d6efd;
      --bs-indigo: #6610f2;
      --bs-purple: #6f42c1;
      --bs-pink: #d63384;
      --bs-red: #dc3545;
      --bs-orange: #fd7e14;
      --bs-yellow: #ffc107;
      ...

3. Improved Docs

That’s where we spend most of our time. And new Bootstrap 5 has an improved docs. More explanation and new Customize section.

4. Color Palettes

v4 shipped with limited colors. We had to manually create colors for our project because the stock one didn’t fit most of our use cases. But Bootstrap v5 comes with a lot of colors. Really a lot*. 100+* color variations are now available to choose from in the new Boostrap 5.

5. Updated Forms

Another revamped area is the form section. It has now new styled components and form controls. Checkboxes are radio boxes are now custom by default. No more .custom- classes needed.

6. Utilities API

Since the popularity of Tailwind CSS, Bootstrap 4 is also giving more options to create utilities. They have built a brand new Utility API to the new version.

7. Grid System

Yes. its still flex based and they have not implemented the CSS Grid yet, but as per their announcement they plan to do so in the future. Since it will be a breaking change. They are very careful about this.

CSS Grid Lovers have to wait longer 😊

8. Bootstrap Icons

Even its not related to the new version, but Bootstap has now their own open sourceIcons library called “Bootstrap Icons“. Be sure to check them out .

9. Coming Soon

At the time of the writing v5 is still in the Alpha Stage. As per their announcement, there are more to come. Features like Official RTL Support (finally!!!), Offcanvas and more are in the pipeline. Be sure to checkout their Github page for more info.

Upgrade Bootstrap 4 to 5

We will list main changes in the bootstrap v5 and then we will show you how you can modify & update it to make it compatible with new Bootstrap 5 version.

Dropped .media Object

This is a breaking change as Bootstrap 5 does not ship with .media object. However it can be easily converted to bootstrap 5 using the utility classes. See the code below.

    <!-- // Bootstrap 4 -->

    <div class="media">
      <img src="..." class="mr-3" alt="...">
      <div class="media-body">
        <h5 class="mt-0">Media heading</h5>
        Media Content ...
      </div>

    <!-- // Bootstrap 5 -->

    <div class="d-flex">
      <img src="..." width="144" height="144" class="flex-shrink-0 mr-3" alt="...">
      <div>
        <h5 class="mt-0">Media heading</h5>
        Media Content ...
      </div>
    </div>

Custom Checkboxes and Radio

Previously in Boostrap 4, there were two options for checkboxes. Default and Custom. In v5, they merged in to one.

    <!-- // Bootstrap 4 -->

    <div class="custom-control custom-checkbox">
      <input type="checkbox" class="custom-control-input" id="customCheck1">
      <label class="custom-control-label" for="customCheck1">Custom checkbox</label>
    </div>

    <!-- // Bootstrap 5 -->

    <div class="form-check">
      <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
      <label class="form-check-label" for="flexCheckDefault">
        Default checkbox
      </label>
    </div>

File Browser

Updated file input component with the same overall design, but improved HTML. Refactored .form-file markup to resolve some visual bugs while allowing translation and button text changes via HTML instead of CSS.

Dropped native .form-control-file and .form-control-range components entirely. Renamed .custom-file to .form-file (including variables).

    <!-- // Bootstrap 4 -->

    <div class="custom-file">
      <input type="file" class="custom-file-input" id="customFile">
      <label class="custom-file-label" for="customFile">Choose file</label>
    </div>

    <!-- // Bootstrap 5 -->

    <div class="form-file">
      <input type="file" class="form-file-input" id="customFile">
      <label class="form-file-label" for="customFile">
        <span class="form-file-text">Choose file...</span>
        <span class="form-file-button">Browse</span>
      </label>
    </div>

Dropped .form-group

Form group class .form-group has been removed in bootstrap 5 in favor of margin utilities. This is one of the the most used bootstrap class. So make sure to change it as per the code below.

    <!-- // Bootstrap 4 -->

    <div class="form-group">
        <label for="email">Email address</label>
        <input type="email" class="form-control" id="email" placeholder="...">
    </div>

    <!-- // Bootstrap 5 -->

    <div class="mb-3">
    <label for="email" class="form-label">Email address</label>
    <input type="email" class="form-control" id="email" placeholder="...">
    </div>

Dropped .input-group-append & prepend

Dropped .input-group-append and .input-group-prepend. You can now just add buttons and .input-group-text as direct children of the input groups.

    <!-- // Bootstrap 4 -->

    <div class="input-group mb-3">
      <div class="input-group-prepend">
        <span class="input-group-text">$</span>
      </div>
      <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
      <div class="input-group-append">
        <span class="input-group-text">.00</span>
      </div>
    </div>

    <!-- // Bootstrap 5 -->

    <div class="input-group mb-3">
      <span class="input-group-text">$</span>
      <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
      <span class="input-group-text">.00</span>
    </div>

Dropped Card Columns & Deck

Removed the card columns in favor of a Masonry grid. Removed card decks in favor of the grid which adds more flexibility over responsive behavior.

👉 Example of new Card Columns with Masonry.

See Below: Example Code for Card Deck v4 / Card Group v5

    <!-- // Bootstrap 4 -->

    <div class="card-deck">
      <div class="card">
        <img src="..." class="card-img-top" alt="...">
        <div class="card-body">
          <h5 class="card-title">Card title</h5>
          <p class="card-text">This is a longer card...</p>
          <p class="card-text"><small class="text-muted">3 mins ago</small></p>
        </div>
      </div>
      <div class="card">
        ...
      </div>
      <div class="card">
       ...
      </div>
    </div>

    <!-- // -------------------------------------------------------- // -->
    <!-- // Bootstrap 5 -->

    <div class="card-group">
      <div class="card">
        <img src="..." class="card-img-top" alt="...">
        <div class="card-body">
          <h5 class="card-title">Card title</h5>
          <p class="card-text">This is a wider card...</p>
          <p class="card-text"><small class="text-muted">3 mins ago</small></p>
        </div>
      </div>
      <div class="card">
        ...
      </div>
      <div class="card">
        ...
      </div>
    </div>

Dropped .jumbotron

The jumbotron component is removed in favor of utility classes like .bg-light for the background color and .p-* classes to control padding.

    <!-- // Bootstrap 4 -->

    <div class="jumbotron">
      <div class="container">
        <h1 class="display-4">Jumbotron</h1>
        <p class="lead">This is a modified jumbotron...</p>
      </div>
    </div>

    <!-- // Bootstrap 5 -->

    <div class="bg-light p-3">
      <div class="container">
        <h1 class="display-4">Jumbotron</h1>
        <p class="lead">This is a modified jumbotron...</p>
      </div>
    </div>

Navbar needs .container

From Bootstrap 5, All navbars now require a container within. This drastically simplifies spacing requirements and removes the need for extensive CSS overrides we added for responsive containers in v4.

    <!-- // Bootstrap 4 -->

    <nav class="navbar navbar-light bg-light">
      <a class="navbar-brand" href="#">Navbar</a>
    </nav>

    <!-- // Bootstrap 5 -->

    <nav class="navbar navbar-light bg-light">
      <div class="container-fluid">
        <a class="navbar-brand" href="#">Navbar</a>
      </div>
    </nav>

There are more Changes

We have only highlighted Main Changes which will break your layout. However there are lot of other changes you need to checkout before Upgrading or Migrating to Bootstrap 5.

👉 Check out the Official Migration Docs for More Info

Conclusion

I hope you are able now to easily convert your old Bootstrap 4 project to Bootstrap 5 with this help. If yes. Please share it to your peers who might also need some help. If you have any suggestions, comments or any errors, please let me know in the comments.

Peace ✌

My Learnings from using Git along with VSCode

Surjith S M — Thu, 04 Jun 2020 09:24:41 +0000

I decided to start with Git & Github for one of my existing project.

I started with creating a Github Repo with my account.

Mistake #1

I initiated the repo with Readme & .gitignore. Since I already have a project to publish to github, you should keep it blank or otherwise you will get error asking to pull first and that pulling will also fail due to history unmatch error, same as me :)

Initialize Git

First install git from https://git-scm.com/ and its better to install Powershell as well if not installed before. (Only for Windows users 😋)

Then open project folder in VSCode and click the third icon from the left menu called "Source Control" and click "Initialize Respository"

Terminal way.

Open VSCode and press Ctrl + ` to open integrated terminal. In my case its powershell.

Now type the following command.

> git init

Adding a Remote Server (Connect to Github)

Inside VSCode press CTRL+SHIFT+P and type "Git Origin", Select the same from the list and add your Origin URL (ie github *.git URL)

The same can be done via terminal. See below.

$ git remote add origin https://github.com/user/repo.git

Once added you can commit your changes by clicking the "Tick Icon" in Source control Tab. When you are ready to push to github, click the 3 dots ... menu and choose "Push".

This is where I did wrong. As I already have an existing project but Github is initiated with Readme, it asks to pull first. When doing that it pops another error says the history is not matching.

If you got this error, please read Mistake #1 to avoid this later. For now, you can use the below code to overwrite it.

$ git pull origin master --allow-unrelated-histories

Git Stash & POP

This is useful when there are multiple people working on same project or working on multiple branches.

What Git Stash do is to save all of our working files in a temporary storage and revert to the original state. So that we don't lose our changes. From there you can pull latest and commit using Git Stash Apply or Pop.

When do you need this?

When any other developer modified same files and you want to see / work on that updated files.
When you mistakenly worked on X feature branch but should actually be Y feature branch.

Commands


$ git stash 
// Stash current directory and revert to original

$ git stash save "message"
// save in a spearate stash (multiple stash)

$ git stash list
// See current stash

$ git stash apply
// Apply saved stash but keep the stash

$ git stash pop
// apply saved stash and delete

Then after these commands, you will be able to to pull / push as usual.

Some stackoverflow answers also mentions the use of --force or -f tag but if its in case of big project it might get messed up.

Git Checkout Branch

Branch is a powerful feature in git where you can make edits to a project without affecting the main source code.

Checkout existing branch

To checkout existing branch, use the following command


$ git checkout existing-branch-name

Creating new branch

To create a new branch, use the following command


$ git checkout -b new-branch-name

These commands will change the current working directory to your newly selected branch.

I will be adding more findings when I learn them, If you have any suggestions to improve my Git workflow, comment below.

Peace!

How to Bypass Medium.com Paywall (Upgrade) and Read Full Article?

Surjith S M — Thu, 28 May 2020 11:52:08 +0000

We loved medium, for its simplicity. But no more. They have added a paywall to read their articles. Once you read few articles, they will ask you to upgrade.

We Only able to see the first paragraph, like this:

The Solution?

1. Log out from Medium.com and refresh the page.

Yes. Just logout from your medium account.

2. Delete Cache

Sometimes, it won't still work because they store the data. For that you can just delete their site cache by opening Inspect Element => Application => Clear Site Data

3. Incognito Mode

Sometimes its easier to open the URL in an incognito mode which makes sure there is no cache involved. Also you don't need to sign-out.

3. Outline to the Rescue

Outline is a simple service which converts normal webpages to a readable format. Since this website caches content before reaching browser, Medium doesn't know if it came from human or search engine. Hence they allow full article.

Example

Medium Article: https://medium.com/..../78a0797259a6

Outline Link: https://outline.com/Ce4fv6

My First ES6 Test Code - Trying Modules without compilers (Export, Import)

Surjith S M — Thu, 28 May 2020 08:39:19 +0000

With the basic knowledge of Javascript & jQuery, I decided to step in to ES6. What excites me is the Module where I can import & export multiple JS files. Currently its hard to manage when there are lot of functions in one JS file which I used to do using jQuery.

Since all modern browser now supports ES6, I decided not to compile and see how it runs in the browser.

I started with a basic HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>Hi</h1>
    <script src="./main.js" type="module"></script>
</body>
</html>

Then I created 3 modules and one main.js to include in my HTML Page.

a.js

import { stuff } from "./b.js";
import { randhex, validURL } from "./c.js";

stuff("It works");

console.log(import.meta); 
console.log(validURL("google.com/")); 
const goolink = validURL("google.com/");

console.log(randhex(5)); 

export { validURL, goolink };

b.js

const stuff = function (text) {
  console.log(text);
};

export { stuff };

c.js

const validURL = function (str) {
  var pattern = new RegExp(
    "^(https?:\\/\\/)?" + // protocol
    "((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|" + // domain name
    "((\\d{1,3}\\.){3}\\d{1,3}))" + // OR ip (v4) address
    "(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*" + // port and path
    "(\\?[;&a-z\\d%_.~+=-]*)?" + // query string
      "(\\#[-a-z\\d_]*)?$",
    "i"
  ); // fragment locator
  return !!pattern.test(str);
};

const randhex = function (len) {
  var maxlen = 8,
    min = Math.pow(16, Math.min(len, maxlen) - 1),
    max = Math.pow(16, Math.min(len, maxlen)) - 1,
    n = Math.floor(Math.random() * (max - min + 1)) + min,
    r = n.toString(16);
  while (r.length < len) {
    r = r + randHex(len - maxlen);
  }
  return r;
};
export { randhex, validURL };

main.js

import { goolink } from "./a.js";

if (goolink) {
  console.log("yaay");
}

Result

Here's what I got in console.log It works and runs in the browser without any issues. No compilers, No Babel, No Webpack nothing. Just pure Javascript.

It works
> Object
true
yaay

What I learned

ES6 Modules will only work on a Server like localhost or web server. It won't work via file:///
While adding <script> tag to HTML, we must add type="module" attribute. Otherwise the module won't work.

Your Suggestions

Do you have any suggestions on how to improve my code? or any other stuff I should be aware of? Let me know in the comments.

DEV Community: Surjith S M

How to add an Estimated Reading Time to your Astro Blog with Javascript & Markdown Plugins

Creating a Dark, Light, System (Auto) Toggle Switch in Astro

System (Auto)

Step 1: Create the HTML

Step 2: Add the CSS

Step 2: Add Script

Final Code

How to activate boosted free plan from Sanity CMS (double the limits using coupons)

What does the regular Sanity free plan include?

What does the Sanity boosted free plan include?

Method 1: Using Youtube Coupon

Method 2: Using Productday Coupon

Method 3: Using Syntax FM Coupon

Method 4: Using Next.js Conf Coupon

Method 5: Using Freecodecamp Coupon

Method 6: Using Modern Frontends Coupon

Method 7: Using Fireship Coupon

Method 8: Sanity Meetups & Conference

React JS - Set State of Parent Component from Child

3 Reasons why Gmail SMTP is not working with PHPMailer()

1. Enable IMAP

2. Allow Less Secure Apps

3. Unlock Other Apps

[Solved] 2020: Pure Vanilla Javascript Smooth Scroll to Element on anchor tag click #id

How to Hide Email Address from Bots yet Show it to Humans

The Problem

The Broken Solution

The Real Solution

Unicode Character Reference

Migrating from Bootstrap 4 to 5 - Read this before you upgrade!

Table of Contents

What’s new in Bootstrap 5

1. RIP jQuery

2. CSS Variables

3. Improved Docs

4. Color Palettes

5. Updated Forms

6. Utilities API

7. Grid System

8. Bootstrap Icons

9. Coming Soon

Upgrade Bootstrap 4 to 5

Dropped .media Object

Custom Checkboxes and Radio

File Browser

Dropped .form-group

Dropped .input-group-append & prepend

Dropped Card Columns & Deck

Dropped .jumbotron

Navbar needs .container

There are more Changes

Conclusion

My Learnings from using Git along with VSCode

Mistake #1

Initialize Git

Terminal way.

Adding a Remote Server (Connect to Github)

Git Stash & POP

When do you need this?

Git Checkout Branch

Checkout existing branch

Creating new branch

How to Bypass Medium.com Paywall (Upgrade) and Read Full Article?

The Solution?

1. Log out from Medium.com and refresh the page.

2. Delete Cache

3. Incognito Mode

3. Outline to the Rescue

Example

My First ES6 Test Code - Trying Modules without compilers (Export, Import)

Result

What I learned

Your Suggestions