Forem: Devang Saklani

Create your first 3d scene with Three.js 🪄

Devang Saklani — Sat, 18 Sep 2021 01:13:40 +0000

Hi Everyone, my name is Devang Saklani and Today I'm going to teach you how you can create your first 3d scene with the help of Threejs.

First of all, What is Threejs?

Three. js is a JavaScript library used to create and run / display animated 3D graphics in a web browser using WebGL. It also acts as an Api for WebGL.
It uses <canvas> element to display the scene.

It has made displaying 3d objects in Web browsers far easy. As compared to writing native WebGL, ThreeJS is super easy as well as performant.

Setting up the Basic Environment

Our first step would be to setup a basic environment for our website. We will use ThreeJS npm package and Webpack to bundle it, but you can also use the cdn link for the package.

I won't tell you how to use Threejs with CDN in this project but you can read official installation docs to use this method

Clone this starter webpack template: Github link
and run

npm install
or
yarn

The cloned repo folder structure should be like this:

To start webpack server run npm run dev or yarn dev

Creating Basic Scene

First let's discuss what are we going to do:

Firstly we will import three from the package
Then we will initialize a new ThreeJS Scene
A new camera (for viewing the scene)
Creating a 3d cube (our 3d object)
Setting up the renderer and the animate function

It is as easy as it sounds! Let's start

Installation:

npm i three
or 
yarn add three

Now, in script.js

Import Threejs:

import  *  as THREE from  "three";

Create a new ThreeJS Scene

const scene =  new THREE.Scene();

Camera for viewing scene

const camera =  new THREE.PerspectiveCamera(
    75, // field of view
    innerWidth / innerHeight, // aspect ratio of the canvas / screen
    0.1, 500  // near and far clipping plane respectively
);
camera.position.set(0, 0, 3); // Changing the default position of the camera

To know more about these properties follow the official docs
or read this guide

Setting up our cube object

const geometry =  new THREE.BoxGeometry(); // Creating a new Geometry
const material =  new THREE.MeshBasicMaterial({ color: 0x00ff00 }); // Giving it a material
const cube =  new THREE.Mesh(geometry, material); // Combining both things

scene.add(cube); // adding it to the scene

by this time nothing will appear on the screen because nothing is rendered yet, So let's initiate a renderer

Creating a renderer

const renderer =  new THREE.WebGL1Renderer();   // Creating renderer
renderer.setSize(innerWidth, innerHeight); // Size of canvas element
renderer.setPixelRatio(devicePixelRatio); // Yes pixel-ratio of the screen
document.body.appendChild(renderer.domElement); // Adding canvas element to the html

Now comes the final step: Rendering!!

function  animate() {
renderer.render(scene, camera); // Rendering single frame
cube.rotation.x +=  0.01;       // Rotating on the x and y axis
cube.rotation.y +=  0.01;       // Adding simple animation to our object
controls.update() // Required for smooth camera movement
requestAnimationFrame(animate); // Calling this function again to repeat the process 
}
animate();

What's happening is we are creating a self-calling function that will call itself around 60 times a second (depends on the user's Screen and CPU) and will create and display a frame on each render.
In the third line we will rotate the cube to get some simple animations on the scene.

The screen should look like this:

Wanna add controls to the scene? In order to add Mouse Controls to the Scene we will use OrbitControls

import  { OrbitControls }  from  "three/examples/jsm/controls/OrbitControls";// import at the top

//  ... camera, renderer

const controls =  new  OrbitControls(camera, renderer.domElement); // Creating controls
controls.enableDamping =  true; // Enabling the smooth camera movement effect

If any error occurs just leave a comment below I'll surely try to reply ASAP.

That's it, You've finally created your first ThreeJS scene! Congratulations! 🎉

Well this was pretty basic, Now lets add something interesting!

Change MeshBasicMaterial to MeshNormalMaterial.
The screen should look like this:

Read more about materials here: Official docs or here

The final script should look like this:

Check it live here: click here

You can add more cubes, spheres, triangles as well as your Custom bleder models! in ThreeJS.

This is the most recent website I build using ThreeJS: click here and TBH it's pretty basic and easy.

If you are interested in learning ThreeJS I'd recommend reading the official docs or going to Threejs Fundamentals and if you're really interested in WebGL and ThreeJS I'd recommend you to watch this course by Bruno Simon. He is one of the finest ThreeJS developers.

Thanks for reading this post and if you got any errors, just leave a comment below or mail me.

A post by Devang Saklani. Hope my efforts were of any help.😇

Simple but Minimal Portfolio template

Devang Saklani — Tue, 14 Sep 2021 15:51:45 +0000

Simple but minimal Portfolio Website using React and GSAP

Hi everyone, my name is Devang Saklani. I'm a Front-end Developer from India and I've recently built a Simple portfolio website using React and GSAP.
Everyone can use this website and modify it in which ever way they want (no attributions necessary).

Check it out live: https://devang47.github.io/simple-portfolio/
check out the Particle-js version here: https://devang47.github.io/simple-portfolio-with-particlejs/
(Feedbacks will be appreciated)
Github repo: here

Lighthouse score:

I've also added few default themes but You can also make and add your own theme by making a simple CSS Class like:

.unique_theme {
    --bg: #0c0f0a;
    --primary: #f8f8f8;
    --secondary: #d1d1d1;
    --highlight: #41ead4;
    --card: #ffffff08;
    --icon-bg: #9e6e6e1a;
    --icon-bg-hover: #ffffff1c;
}

and then add this Class to <body> tag in index.html.

Available default themes:

Dark theme

White theme

Blue theme

Green theme

How to change themes

To change themes go to index.html file and change the class of body tag to the theme name like:

<body  class="green">

<body  class="dark">

Update

Particle JS is also now integrated in a clone of this project 🤩 and it is looking really good:
Check it out live here: here
Github repo: here

If you have any feedback please add a Comment below and Contribute in this project.

Add a 'Slider' to your Website using CSS and Javascript

Devang Saklani — Sun, 27 Jun 2021 13:38:11 +0000

In this article I will tell you several ways to add a Slider to your website and how you can use these sliders to make your website look more Attractive and more Functional.

First of all, What is meant by slider?

A slider is a term that refers to a slideshow on a website. An example of a slider can be a revolving carousel that displays products or photos.

Types of Sliders we are going to build:

With plain CSS and JS (not recommended)
Using CSS frameworks (like Bootstrap)
Using JS libraries (best way)

Slider using plain CSS and JS

In this method we will use only CSS and a little bit of JS for making a slider. This is a simple demo of it :

Codepen example: click here

You can also customize it as much as you want (if you know how to).
I won't do deeper into its working as it is already full explained by W3Schools in this article.

And a person Named Stefan Vitasovic has made a cool slider using plain CSS and JS. I would recommened you to check-out his method, If you are making it with plain JS. Check out what he made here

I would suggest not to use this method if you are a beginner as this method is most complicated. But it can be really helpful to you in some way! i.e. you will get deeper knowledge of It's working and I am sure you will learn many things from it.

Using CSS libraries (Bootstrap)

In this method we will use Bootstrap to make a Image slider.

First of all, import bootstrap CSS and JS files from any CDN network (for a quick setup).
Then go to this page to get the HTML Markup or just copy this:

<div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="https://images.unsplash.com/photo-1623646230868-48e8e88b38e4?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=720&ixlib=rb-1.2.1&q=80&w=1280" class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="https://images.unsplash.com/photo-1599636647429-8cbd70bead58?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=720&ixlib=rb-1.2.1&q=80&w=1280" class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="https://images.unsplash.com/photo-1622556474520-59904a30f654?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=720&ixlib=rb-1.2.1&q=80&w=1280" class="d-block w-100" alt="...">
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

// Bootstrap CSS and JS files 
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

Codepen example: click here

You can do many customizations like: add Controls, Indicators, Captions, Custom Transition effects etc. by reading their documentation here.

All I have to say about this is that this is a really easy and fast way to add/make a slider in your Website without compromising anything.

Using Javascript library to add a slider

This is (according to me) the best way to add a Image/Normal Slider with good Animations in your website.

In this we will use a JS library called SwiperJS. You can use others too, but this one is maintained and really popular among developers. Also the things and customizations you can do with it are just Amazing.

Also, This library has support for Swipe gestures (which is a really difficult thing to make with plain JS). Check example here

But, How to make it work?

First of all import it's CSS and JS files from any CDN network, or just copy these links:

// Both are same (import any one)
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.css" />
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />

// Same here (import any one)
<script src="https://unpkg.com/swiper/swiper-bundle.js"></script>
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>

Basic HTML markup:

<div class="swiper-container">
  <!-- Additional required wrapper -->
  <div class="swiper-wrapper">
    <!-- Slides -->
    <div class="swiper-slide">  <img src="https://images.unsplash.com/photo-1623646230868-48e8e88b38e4?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=720&ixlib=rb-1.2.1&q=80&w=1280" style="width:100%"></div>
    <div class="swiper-slide">  <img src="https://images.unsplash.com/photo-1599636647429-8cbd70bead58?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=720&ixlib=rb-1.2.1&q=80&w=1280" style="width:100%"></div>
    <div class="swiper-slide">  <img src="https://images.unsplash.com/photo-1622556474520-59904a30f654?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=720&ixlib=rb-1.2.1&q=80&w=1280" style="width:100%"></div>
    ...
  </div>
  <!-- If we need pagination -->
  <div class="swiper-pagination"></div>

  <!-- If we need navigation buttons -->
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>

  <!-- If we need scrollbar -->
  <div class="swiper-scrollbar"></div>
</div>

These images in <img> are placeholders, you can change these.

Basic CSS:


.swiper-container {
  width: calc(1280px/2);
  height: calc(720px/2);
}


//buttons
.swiper-button-next, .swiper-container-rtl .swiper-button-prev {
  color: white;
}
.swiper-button-prev, .swiper-container-rtl .swiper-button-next{
  color: white;
}

//swiper bullets
.swiper-pagination-bullet-active{
  background-color: white;
}

Basic JS:

const swiper = new Swiper('.swiper-container', {
  // Optional parameters
  direction: 'horizontal',
  loop: true,

  // If we need pagination
  pagination: {
    el: '.swiper-pagination',
  },

  // Navigation arrows
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },

  // And if we need scrollbar
  scrollbar: {
    el: '.swiper-scrollbar',
  },
});

This is really Easy to setup and it is highly maintained library. You can do many customizations in this library such as:

turn off Preloading Images to get Lazyload
use swiper.activeIndex in JS to get current index of frame
Add a slider inside a Slider and many more

I would recommened you to read their Official Documentation here or Check out some Examples here to get more information about this Library.

How to Implement these Sliders for better UI/UX:

TBH I don't know much about Design, so I would recommened you to read these articles to get proper information about Where/How to use Sliders for better UI and UX :

A post by Devang. Hope it helps!

Making a URL Shortener website using Axios

Devang Saklani — Thu, 24 Jun 2021 08:17:14 +0000

In this article I will tell you how I made and you can also make a URL shortener Website. Check out the result of what we are gonna make: here.

Overview

First we will talk about the requirements and dependencies of this project.
In this project we will use Axios to make a HTTP request (you can also use XML request for Fetch api to do the same), and Hint.css for hints (not necessary).

Well basically no library mentioned above was necessary for this project, they are here just cause they will make our work easier and will save a lot of time.

Logic/Working:
We will add a input tag in which the user will be able to paste his link and a 'Shorten' button. On click of that button a AXIOS request will be fired and then we will pass the response to the output box. However this seems easy and it is! for a person who knows how to handle API'S response, JSON data and manage errors for multiple cases.
As a beginner you don't have to worry I have covered each and every step mentioned above with good examples.

Getting started

First of all what we need is a Good Design so that it will also look good. I have already designed a Website for this project here it is:

(However I am not a designer so sorry if the design is bad)
In this design there is a heading, a sub-heading, a input tag for pasting link, a convert button and three boxes for displaying result.
I've used button tags for displaying output (You can also use Input tag).

If you want, you can make the whole website from starting or if you want to follow along or save some time start with this codepen (for basic HTML and CSS) :

Adding onclick event

First of all we will add a event to 'convert' button i.e. onclick and pass a function which will execute when the button is clicked:

// function name is 'shorten'
<button type="submit" class="shorten-button font-2" onclick="shorten()">
    Convert
</button>

Then we will define this function in JS:

const shorten = () => {
    console.log('button clicked')
}

Don't forget to link the JS file if you are editing outside of codepen.
Then when the button is clicked a message should appear on console.

Making a request with Axios

Now we will work on the Axios request when the button is clicked.
Don't know Axios here's a quick intro:

Axios is a popular, promise-based HTTP client that sports an easy-to-use API and can be used in both the browser and Node.
- It's syntax is super simple and beginner friendly.

Basic Axios syntax:

axios.get('API url')
.then((response) => {
    // if the request was Sucessful and no errors were caught
    console.log(response)
})
.catch((error) => {
    // if errors were there.
    console.log(error)
})

Before using Axios don't forget to link the Axios package to your HTML file

<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.21.1/axios.min.js" integrity="sha512-bZS47S7sPOxkjU/4Bt0zrhEtWx0y0CRkhEp8IckzK+ltifIIE9EMIMTuT/mEzoIMewUINruDBIR/jJnbguonqQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

Making API call

For the URL shortening we will use a free URl shortening api provider SHRTCODE. You can visit the website and read the docs for more info.

This is the main link for calling the API:

https://api.shrtco.de/v2/shorten?url=YOUR_URL

Now we will just add the link to our Axios request in the 'get' method:

let longUrl = 'https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals'

axios
.get(`https://api.shrtco.de/v2/shorten?url=${longUrl}`)
.then((responseData) => {
    console.log(responseData);
})
.catch((err)=> {
    alert('Error check your connectivity or link')
})

Here I am using template strings to add the URL to the get method so that we will be able to change it later.
As this api is free it will take some time to give the response (5 - 10sec), just wait until then. Here is a Codepen Example of a working API call.

After some time we will have the response in the form of JSON data, we will store it in a variable for later use or if a Error is caught we will simply alert 'Error check your connectivity or link'.

However we will not give the same link everytime or will change the JS everytime we have a new link, so we fetch the link from the input tag by value attribute.

let  longUrl  =  document.querySelector("#url-box").value;
// we will also declare a variable for later storage of processed url
let shortUrl;

Till now we have the full URL, working JSON request, and processed data.
Now we will get the main Information from that JSON data which is something like this:

The processed URL is full_short_link which is inside result which is inside of data.

Well, how to get this URL?
We will simple do resdata.data.result.full_short_link to get Processed link inside of then. Here resdata is response data from API.
for ex:

axios .get(`https://api.shrtco.de/v2/shorten?url=${longUrl}`)
    .then((resdata) => {
        //storing Processed URL in already declared variable
        shortUrl  =  resdata.data.result.full_short_link;
        console.log(shortUrl)
        //check console for Processed URL or errors
    })
    .catch((err) => {
        alert("Error check your connectivity or link");
    });

Now half of the work is Done! Congratulations.

Adding URL display box to HTML

What is left is we have to display it to screen which is not a big deal.

First of all Logic:
We will make a function which will create a element (a div tag) and store it in a variable then through .innerHtml property, We will pass this Markup (as a string) and pass variables (longUrl , shortUrl) using template strings:

` <div class="item">
    <div class="long-url">
        <div class="title font-1">
            Long URL
        </div>
        <button id="long-url" class="font-2">
            ${longUrl} 
         </button>
    </div>
    <div class="short-url">
        <div class="title font-1">
            Short URL
        </div> 

        // providing shortUrl variable in value attribute for the copy function⏬
        <button id="short-url" class="font-2" value='${shortUrl}' onclick='copyLink(this)'>
            ${shortUrl}
        </button>
    </div>
</div> `

// compressed version (spaces and tabs removed) because JS will
// give errors on 'tab' and 'enter'

<div class="item"><div class="long-url"><div class="title font-1">Long URL</div> <button id="long-url" class="font-2"> ${longUrl} </button></div><div class="short-url"><div class="title font-1">Short URL</div> <button id="short-url" class="font-2 hint--bottom" aria-label="Click link to Copy" onclick='copy(this)' value='${shortUrl}' onclick='copyLink(this)'>${shortUrl}</button></div></div>

and then finally this tag will append to the Parent link container. I know this is kinda complicated but this will help you get clear:

//Final working:
function  addResult(longUrl, shortUrl) {
    let parentEle = document.querySelector("#shortened-links");
    let data = `<div class="item"><div class="long-url"><div class="title font-1">Long URL</div> <button id="long-url" class="font-2"> ${longUrl} </button></div><div class="short-url"><div class="title font-1">Short URL</div> <button id="short-url" class="font-2" value='${shortUrl}' onclick='copyLink(this)'>${shortUrl}</button></div></div>`;

    let  newEle  =  document.createElement("div");
    newEle.innerHTML  =  data;
    parentEle.appendChild(newEle);
}

We will pass longUrl and shortUrl as parameters.

Now we will pass this function in then method, which will execute when data is Fetched from API:

.then((resdata) => {
    shortUrl  =  resdata.data.result.full_short_link;
    addResult(longUrl, shortUrl);
})

and What will happen is this markup will be added to the Html when the data is fetched and as we have already styled their 'class' attributes in CSS, the markup will execute and a processed item will show up on the screen.

CopyLink function

The copyLink function will execute when the short Url box is clicked i.e.

The function will be:

function  copyLink(tag){
    let  text  =  tag.value;
    // copy link to clipboard
    navigator.clipboard.writeText(text);
}

The parameter of this function will be the Tag and the argument will be this keyword. for ex:

// usage of this function:
onclick='copyLink(this)'

this keyword will pass the full button tag through an argument so that we will later be able to use value property in CopyLink func.
Thats why i've used Button tags for displaying Output and added value attribute to shortUrl tag.
(you can use input tag also)

Now the Basic working is done and till now this much is done: here
I have added a Hint using Hint.css (just read the documentation it's pretty easy).

Now about Error Handling and Animations

Now it is upto you how much animations you want to add in this site.
As for error handling we can suppose certain situations in which a Error will occour like
'What if the input tag is empty and button is clicked' :

// we can do something like this:
if (longUrl){
    //if their is value in input tag then only Axios request is sent 
    axios.get()....
}else{
    alert('Enter some data first!!')
}

Now If you want to do more customizations in this project that is totally upto you.

If you have any questions ask them in the Comment section and don't forget to leave a like If this post helped you.😊

A post by Devang. Hope it helps!

The master guide to smooth, realistic shadows in CSS

Devang Saklani — Tue, 22 Jun 2021 12:06:02 +0000

In this article you will get to know about smooth CSS Shadows and a easy way to use them. But first of all

What are shadows?
When light falls upon an object shadow is formed. The shadows we see around us works on the same principle but they are really complex and realistic as they are not in a specific shape or length or size. They can take any shape and can fall in any direction. In order to create shadows in websites using CSS we use box-shadow property.

for ex. box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);

But if you are trying to create real shadows through box-shadow property, well, You can't.

Why?
In order to know 'Why?' you have to understand how box-shadow property works.
box-shadow property simply produces a blurred silhouette of an object. You can change its length, color, blur, spread and offset nothing more. Then there's probably no way to create the Natural Super complex real Shadows through box-shadow property.

But unexpectedly there's a way!
If we will use a simple technique, we will be able to get more controls and expand our range of options. This technique is using 'layered shadows'. We can define multiple shadows in a simple box-shadow property by using commas and gradually increasing the blur-radius, offset to make shadows more realistic. Here's an example:

Normal box-shadow⏬

Layered box-shadow⏬

As you can see the difference in shadows. You can customize it more to generate more variants of shadows i.e. Sharp shadows, Dreamy shadows, long shadows etc.


/* Normal box-shadow */
.box {
    box-shadow: 0 3px 3px rgba(0,0,0,0.2);
}

/* Layered Box-shadow */
box-shadow:
     0 3.9px 4.6px rgba(0, 0, 0, 0.08),
     0 12.3px 8.4px rgba(0, 0, 0, 0.056),
     0 18.8px 19.2px rgba(0, 0, 0, 0.037),
     0 22px 40px rgba(0, 0, 0, 0.019)
;

More Layers == More Customization == More Realistic shadows

You can also generate Sharp shadows by gradually decreasing the alpha values (opacity) and increasing the blur strength to create Sharp shadows. You can use the same principle to create Diffused shadows.

Sharp shadow⏬

Diffused shadow⏬

We can also create Short as well as long shadows by just playing with opacity and spread. To create long shadows we can gradually increase the y-offset values.

Short shadow⏬

Long shadow⏬

However creating these kind of shadows is a real mess for some people, specifically for those people and for making our life more easy there is website which can help them in Creating realistic shadows i.e. https://shadows.brumm.af/ by Philipp.

Through this website you can create as many layers as you want and edit them in real time, Saving a lot of time and efforts.

A post by Devang. Hope it helps!
Check out my portfolio: here

New Javascript (AnimeJS) spinners for website (examples & source code)

Devang Saklani — Mon, 21 Jun 2021 03:13:41 +0000

Hello everyone

My name is Devang Saklani and I am a freelance Front-end Web developer from INDIA. I like creating things like websites, animations and writing blogs (however this is my first blog let's see how it goes😅).

I have been learning JS from few months and in first sight i loved it it's syntax, power and it's uses. Then I got into touch with JS libraries for extra functionality like ReactJS and then I came across AnimeJS. I was amazed at first by it's syntax and it's power, it's a amazing animation library through which you can do simple as well as super complex animations.

Don't know Anime JS? here's a quick intro!

What is AnimeJS?

Anime.js is a small, lightweight JavaScript library with a simple and small powerful API.
It works with the DOM element, CSS, and JavaScript object.
and the final thing is It's really Underrated.

How to use AnimeJS?

First of all Install it. The installation steps are quite simple as we can use either a CDN network to use it or can directly install it through NPM. See official installation details here.

Basic usage:

I would recommend you to go to the official documentation for instructions because it is Super simple and Super interactive.

Now what I made using it:

I have made Some loading spinners using AnimeJS. These are some images/gifs:

This one is a really viral animation called B&W loading animation 9 by Lilian Tedone:⏬

Check out these animations live at this website.

Features (highlights):

Easy to use (simply copy & paste).
Source code is already minified.
Awesome animations.
2 themes till now (stroked and filled) and a theme switch button.
A automation theme save feature which saves your theme even after page reload.
A Slider for better UX and keyboard compatible (use arrow keys to navigate).

Known issues

I know these animations are sick but this seriously needs some improvement and optimizations.. That's why I need your help in solving these bugs* and make some performance improvements.

Known bugs:

Sometimes the code source viewer does'nt shows anything.
The CPU also gets 100% used when using a old computer and causing frame drops 😥.
and Many other small bugs that haven't discovered yet.

This is the Github URL of this repo. You can help me by contributing here also If you want to contact me this is my email (devangsaklani@gmail.com) I'll surely reply you.

Thanks for reading and I would love to read your thoughts on this in comment section😁.