Lakshmanan arumugam

Javascript
React

Icon system for react with webpack

In web application one of the major important is building a scalable icon system for our application. Why icon system is important? We all know now a days without a icon we not able to see any web application in the internet world. building a scalable icon system is good

beginner
chrome
extension

Build a chrome extension with modern code setup

In the previous article, I covered How to set a chrome extension base code setup. In this article, I am going to cover how to use test it and publish to chrome extension marketplace app. Once you completed the all previous article step. you will have the below folder structure

Build dynamic wallpaper on chrome

IntroductionMost of the web user uses the chrome web browser for searching things on the internet. so, here I share the dynamic wallpaper using chrome browser. but, the same concept we able to do in other browsers also, like firefox, safari...etc., Dynamic theme on chrome browserIn chrome browser, the

css
animation

Icon revealing hover animation using CSS

Create a own icon menu animation using HTML and CSS. Animation inspired by google(Sheets). let start the article. First create a HTML and the the below code. <section> <button class="nav-link icono-plus"></button> <ul class="nav-list"> <li class="nav-list-item">

Architecture
beginner

Architecture: Web app[front-end] from scratch 2021 - part 3 (final)

If you missed to read the previous version of the post. use the below link read the post. Part 1 - link Part 2 - link Finally, I am going to complete the web application architecture blogs for beginners 🎉🎉. Let's start the article. State management with cache systemUnit testsAnalytics1.State

beginner
React

Normal textbox vs Magical textbox

Last week I faced one problem in the HTML text area. it more about the user interaction with the text area component. In, this article I am going to cover the problem and solution. Magic text boxWe all know about HTML input element and behaviour. but, In the input have

Javascript
Architecture
beginner

Architecture: Web app[front-end] from scratch 2021 - part 2

Part 1 - link Coding style guideTheme customisationEs-lint and PrettierGit pre-commit hookInternationalisationCode style guidevia GIPHY Every product use multiple language and tools like SCSS, ReactJS / VueJS/ EmberJS, Handlebar, HTML5, Typescript, Javascript...etc.., Each one have some code standard. When we start building a web app front end maybe work one

Architecture
Javascript
beginner

Architecture: Web app[front-end] from scratch 2021

Currently, I work as a front-end engineer and I worked on some of the frameworks Ember, React, and Vue. during that time I learned a lot of things about the web application. some of the learning I wish to share here. IntroAt some stage, a front-end developer not only knows

Javascript

Be careful when you using an input "number" field in your web app

Recently I faced one interesting issue when I working on my web application. I thoughts it will help others. Introductionis one of the HTML tags and has some types are text, number, password..etc., So, a user able to give a value through to the input. Each input type field

beginner
Javascript

The simple tricks to change your website theme based on day and night

Hi everyone, every website have a theme options. so, a website user able to choose their preferred theme like dark, light..etc., This is existing followed approach in everyone website. how is it (we show the website theme based on the user day and night). I just tried. if you

beginner
Javascript

Design System - Icons for vue 3

Now a days every web application using svg icons for their project. because, svg give a detailed view, resolution, speed...etc., each one use different approach to load the svg icon in their project. but, I personally like this Convert all svg's into one sprite.svg approach Refer this guide