DEV Community: Talha Ali

Getting started with Bun: A beginners guide

Talha Ali — Sun, 19 May 2024 11:41:14 +0000

What is Bun?

Bun is a new JavaScript runtime and package manager that focuses on speed and efficiency. It leverages the JavaScriptCore engine (the same engine used by Safari) to deliver high performance. Here are some standout features of Bun:

Performance: Bun is designed to be one of the fastest JavaScript runtimes available, with various optimizations that speed up development tasks.
Compatibility: Bun is highly compatible with Node.js and npm packages, making it easy to migrate existing projects or start new ones.
Built-in Tools: Bun includes a built-in bundler, transpiler, and task runner, reducing the need for multiple development tools.
TypeScript Support: Bun offers first-class support for TypeScript, simplifying the development process for TypeScript developers.

Why Choose Bun?

Speed: Bun's primary selling point is its speed. By leveraging the JavaScriptCore engine, Bun can execute JavaScript code more quickly than many other runtimes.

Developer Experience: Bun aims to streamline the development process with built-in tools that reduce setup time and complexity. This means less time configuring and more time coding.

Compatibility: Bun's compatibility with Node.js and npm packages ensures that developers can easily transition to using Bun without abandoning their existing workflows and libraries.

Setting Up Bun

Installation

Before you can start using Bun, you'll need to install it on your system. Here’s how to do it using npm:

npm install -g bun

and thats it. Bun is now successfully installed in your system.

Building Your First Project with Bun

Initializing first Bun project:

bun init

This command will initialize a simple bun project. A basic bun project looks like this:

my-bun-project/
├── node_modules
├── index.ts
├── .gitignore
├── README.md
├── bun.lockb
└── package.json

Running Bun project:

bun run index.ts

You can run your project using bun run command. Additionally you can append scripts object with this command in package.json.

"scripts": {
    "dev": "bun run index.ts"
}

Now if you run this command in terminal

bun dev

then you should see this in your terminal

Hello via Bun!

Voila you just created and executed your first bun project. Now lets see how we can install packages.

Installing packages using Bun

In order to install packages using bun you can run this command

bun add <package-name> # alternative of npm i

If you want to run npx scripts using Bun you can run this command:

bun x <script-name>

If you want to install all dependencies that are present in package.json like npm install, you can use this command to do this in Bun.

bun install

If you want to update all dependencies that are present in package.json like npm update, you can use this command to do this in Bun.

bun update

Using installed Packages

You can easily use installed packages by importing them in your file and use them as usual:

import express from "express";
const app = express();

These are all the essential things for a begginer to start using Bun

Conclusion

Bun is a powerful and efficient JavaScript runtime and package manager, known for its speed and developer-friendly features. It offers high compatibility with Node.js and npm packages, built-in tools like a bundler, transpiler, and task runner, and out-of-the-box TypeScript support. With simple installation and intuitive commands, Bun streamlines the development process, allowing developers to focus on coding rather than setup. Whether starting a new project or migrating an existing one, Bun provides a robust environment that enhances productivity and performance. keep growing and Happy coding!.

Additional Resources

Official Documentation: Bun Documentation
GitHub Repository: Bun GitHub
Community Links: Bun Community
Further Reading: Explore more articles and tutorials on Bun and related technologies.

Master Web Components: Create and Host Your Own

Talha Ali — Fri, 17 May 2024 11:24:47 +0000

In modern web development, creating reusable and embeddable web components is crucial for maintaining scalable and maintainable codebases. In this blog post, we'll walk you through the process of creating a reusable CreditsComponent using HTML, CSS, and JavaScript. By the end of this tutorial, you'll know how to build, customize, and host your own web components for free.

The other day, I was developing a project. After completing that project, I had to add credits manually. At that time, I thought about how we can make a reusable component in HTML, CSS, and JS. After some research, I came to know that we can achieve this by leveraging the power of class extension in JS and CDNs. So lets learn how we can create reusable web components and host them with ease.

1. What are Web Components?

Web components are a set of web platform APIs that allow you to create new, reusable, and encapsulated HTML tags to use in web pages and web apps. They consist of three main technologies:

Custom Elements: Define new HTML elements.
Shadow DOM: Encapsulate styles and markup.
HTML Templates: Define reusable HTML fragments.

2. Setting Up the Environment.

Before we begin, ensure you have a text editor (like VSCode) and a basic understanding of HTML, CSS, and JavaScript. Additionally, use a modern browser that supports web components. (Most of popular browsers supports this feature).

3. Creating the `CreditsComponent`

We'll start by defining a class for our custom element and setting up its Shadow DOM.

Step 1: Define the class and constructor

# credit-component.js
class CreditsComponent extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: "open" });

Create a new credit-component.js file. Here, we extend HTMLElement to create a custom element and use the constructor to initialize the component. (You don't need to fully understand this code. Just copy and paste).

Step 2: Attaching the Shadow DOM

this.attachShadow({ mode: "open" });

The Shadow DOM provides encapsulation, ensuring styles and markup within the component don’t affect the rest of the page.

Step 3: Adding Styles

const style = document.createElement("style");
style.textContent = `
  .Credits {
    min-height: 10vh;
    box-shadow: 10px 10px 30px black;
    background-color: white;
    border-radius: 50px;
    display: flex;
    align-items: center;
    padding: 0 20px;
    justify-content: space-between;
    margin: 2rem 4rem;
  }
  .links {
    display: flex;
  }
  .links > a {
    text-decoration: none;
    color: black;
    font-size: 20px;
    margin: 0 4.5px;
  }
`;
this.shadowRoot.append(style);

This CSS styles the component, ensuring it looks consistent regardless of where it’s used, and appends it to shadow DOM.

Step 4: Creating the HTML Template

const container = document.createElement("div");
container.classList.add("Credits");
container.innerHTML = `
  <h1>Made by GrowWithTalha 💜</h1>
  <div class="links">
    <a href="https://growwithtalha.vercel.app/">Portfolio</a>
    <a href="https://github.com/GrowWidTalha">Github</a>
    <a href="https://www.linkedin.com/in/growwithtalha-webdeveloper">Linkedin</a>
    <a href="https://twitter.com/GrowWithTalha">Twitter</a>
    <a href="mailto:growwithtalha@outlook.com">Contact</a>
  </div>
`;
this.shadowRoot.append(container);

This creates a simple HTML structure within the component. You can always change the styles and HTML structure according to your needs.

4. Adding Dynamic Content with Attributes

To make our component more flexible, we'll use the connectedCallback method to handle dynamic content.

connectedCallback() {
  const credits = this.getAttribute("credits") || "";
  const creditsArray = credits.split(",");
  const creditsList = this.shadowRoot.querySelector(".Credits .links");

  creditsArray.forEach((credit) => {
    const listItem = document.createElement("a");
    listItem.href = "#";
    listItem.textContent = credit.trim();
    creditsList.appendChild(listItem);
  });
}

This method allows the component to accept a credits attribute and dynamically add links based on its value.

5. Registering the Custom Element

Finally, we need to register our custom element.

customElements.define("credits-component", CreditsComponent);

This makes our component available for use in any HTML document.

6. Using the CreditsComponent in Your Project

To use the CreditsComponent, simply link the credit-component.js file in your HTML document and include this in your HTML:

<credits-component credits="Blog, Tutorials, Contact"></credits-component>

This will render the component with additional dynamic links.
NOTE: The credits attribute is totally optional and you don't have to add them.

Full code for `credits-component.js`

class CreditsComponent extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: "open" });

    // Styles
    const style = document.createElement("style");
    style.textContent = `
      .Credits {
        min-height: 10vh;
        box-shadow: 10px 10px 30px black;
        background-color: white;
        border-radius: 50px;
        display: flex;
        align-items: center;
        padding: 0 20px;
        justify-content: space-between;
        margin: 2rem 4rem;
      }
      .links {
        display: flex;
      }
      .links > a {
        text-decoration: none;
        color: black;
        font-size: 20px;
        margin: 0 4.5px;
      }
    `;

    // HTML Template
    const container = document.createElement("div");
    container.classList.add("Credits");
    container.innerHTML = `
      <h1>Made by GrowWithTalha 💜</h1>
      <div class="links">
        <a href="https://growwithtalha.vercel.app/">Portfolio</a>
        <a href="https://github.com/GrowWidTalha">Github</a>
        <a href="https://www.linkedin.com/in/growwithtalha-webdeveloper">Linkedin</a>
        <a href="https://twitter.com/GrowWithTalha">Twitter</a>
        <a href="mailto:growwithtalha@outlook.com">Contact</a>
      </div>
    `;

    // Append styles and container to the shadow DOM
    this.shadowRoot.append(style, container);
  }

  connectedCallback() {
    const credits = this.getAttribute("credits") || "";
    const creditsArray = credits.split(",");
    const creditsList = this.shadowRoot.querySelector(".Credits .links");

    creditsArray.forEach((credit) => {
      const listItem = document.createElement("a");
      listItem.href = "#";
      listItem.textContent = credit.trim();
      creditsList.appendChild(listItem);
    });
  }
}

customElements.define("credits-component", CreditsComponent);

Now we have our component setup locally. But thats not a convenient option. Now we have to host this credit-component.js file as a CDN so we can easily link it in our HTML page and use it.

7. Hosting Your Web Component

In order to host our web component we have to push our code to github and create a jsdelivr link to access it.

Step 1. Push `credits-component.js` to Github.

First step is to push your code on github. If you don't know how to do it then just go and learn. It will only take you couple of minutes to learn.

Step 2. Create a JSDelivr link:

The next step is to create a cdn link. Don't its free and you don't even have to create any account.

https://cdn.jsdelivr.net/gh/<YourUserName>/<repo-name>@master/<File-Name>

YourUserName: Replace this part with your Github user name.
repo-name: Replace this with your repo name.
file-name: Replace this part with your file name with .js extension.

After completing the above steps your URL should look like this.

https://cdn.jsdelivr.net/gh/GrowWidTalha/credit-component-cdn@master/credit-component.js

If you paste this URL in a browser you will get the contents of your credit-components.js file. Congrats you just created your first CDN.

Now use this link in your HTML documents to use your custom component.

<-- Your Other HTML code.....--!>
<credit-component></credit-component>

<script src="Your CDN link"></script>
<-- Your Other HTML code.....--!>

And voila you made a custom web component and hosted it on a CDN.

Conclusion

Building reusable web components streamlines development and improves code maintainability. You've learned to create a custom CreditsComponent using HTML, CSS, and JavaScript, enhancing modularity and flexibility in your projects. You also learned to HOST these components on the web. Experiment with customization to suit your needs and enjoy the benefits of simplified coding. Till then Keep Growing.

DEV Community: Talha Ali

Getting started with Bun: A beginners guide

What is Bun?

Why Choose Bun?

Setting Up Bun

Installation

Building Your First Project with Bun

Initializing first Bun project:

Running Bun project:

Installing packages using Bun

Using installed Packages

Conclusion

Additional Resources

Master Web Components: Create and Host Your Own

1. What are Web Components?

2. Setting Up the Environment.

3. Creating the CreditsComponent

Step 1: Define the class and constructor

Step 2: Attaching the Shadow DOM

Step 3: Adding Styles

Step 4: Creating the HTML Template

4. Adding Dynamic Content with Attributes

5. Registering the Custom Element

6. Using the CreditsComponent in Your Project

Full code for credits-component.js

7. Hosting Your Web Component

Step 1. Push credits-component.js to Github.

Step 2. Create a JSDelivr link:

Conclusion

3. Creating the `CreditsComponent`

Full code for `credits-component.js`

Step 1. Push `credits-component.js` to Github.