DEV Community: technikhil314

How to run any project with one command?

technikhil314 — Thu, 21 Jul 2022 05:06:32 +0000

Often times I like to try out new things in web development and nodejs world. But there is one problem with it.

I have tried out to create a new projects using create-react-app, create-next-app or any backend app using express or hapi, or any monorepo using lerna, turbo or nx.

But the command to start development environment or build the project changes from one to another.

viz.
create-react-app starts development environment with npm start
create-next-app starts development environment with npm run dev
and so on.

and there is no one command to rule them all.
But don't worry there is one solution to it.

You need to have zsh, oh-my-zsh installed on your system to take advantage of the solution

Here is how you can do it

Step 1: Enable dotenv plugin in zsh. Edit your ~/.zshrc

plugins=(dotenv)

Now this plugin will always automatically source your .env file everytime you cd into your project directory that contains a .env file

Step 2: Create and add following content a .env to create-react-app project

alias ns="npm start"
alias nb="npm run build"

Step 3: Create and add following content a .env to create-next-app project

alias ns="npm run dev"
alias nb="npm run build"

Step 4: For java spring boot project you can add following

alias ns="mvn org.springframework.boot:spring-boot-maven-plugin:run"

Now when you cd into create-react-app project then all you need to run ns to start project
also when you cd into create-next-app project then as well you need to run ns to start the project

Thats it its just one time configuration you have to do in your project and you are done. No more remembering project specific commands. Cheers. Enjoy.

Debounce and throttle simplified

technikhil314 — Fri, 18 Feb 2022 05:32:16 +0000

I was trying to create my own implementation of debounce and throttle. Yes just for fun.
and I came up with very simplified implementation that anyone can follow just by taking a look at the code.

You can play with the demo here

Hope you like it.

Throttle

function throttle(fun, timeduration) {
    let shouldCall = true;
    return (...args) => {
        if (shouldCall) {
            shouldCall = false;
            fun(...args);
            setTimeout(() => {
                shouldCall = true;
            }, timeduration)
        }
    }
}

Debounce

function debounce(fun, timeduration) {
    let lastTimeoutId = 0
    return (...args) => {
        if (lastTimeoutId) {
            clearTimeout(lastTimeoutId);
        }
        lastTimeoutId = setTimeout(() => {
            fun(...args);
        }, timeduration)
    }
}

How to use it

function showValue(val) {
    console.log(val)
}

const throttleInput = throttle(showValue, 500);

const debouncedInput = debounce(showValue, 500);

The unused destructuring in Javascript

technikhil314 — Thu, 17 Jun 2021 06:22:41 +0000

I was just going through MDN and ECMA specs and trying out some cool little time saving tricks with destructuring in javascript.

Destructuring array based on index

let arr = [10, 20, 30, 40, 50];
let {0: first, 3: forth, ...rest} = arr;
console.log(first) // 10
console.log(forth) // 40
console.log(rest) // {1: 20, 2: 30, 4: 50}

Ignore some values from array at a particular position

const [a, , b] = [1, 2, 3];
console.log(a); // 1
console.log(b); // 3

Using dynamic key in destructuring

let ab = {
  a: 10,
  b: 20
};
let a = 'a';
let {[a]: aVal} = ab;
console.log(aVal) //10

You can even use function call, string template etc in the dynamic key

function getDynamicKey() {
    return "a";
}

let ab = {
  a: 10,
  b: 20
};
let {[getDynamicKey()]: aVal} = ab;
console.log(aVal) //10

Importance of destructuring in react hooks

technikhil314 — Mon, 03 May 2021 13:00:50 +0000

Have you realized that we are using destructuring every where with react hooks. Take a look at this simple example

const [counter, setCounter] = useState(0);

We are using destructuring here, to get statevalue and state updater function. But why does it have to be this way always.

well here is my take on explaining why destructuring is important. Take a look at this sandbox. Its a simple counter component that updates every second.

If you check the logs on the console. They will be something like this

counter updated new value is 0 
setCounter  updated 
counter updated new value is 1 
counter updated new value is 2 
counter updated new value is 3 
counter updated new value is 4 
counter updated new value is 5 
.
.
.
.

Now suppose we don't use destructuring for useState hook and accept it as array in which state[0] is our counter value and state[1] is counter updater function. Check the sandbox

and check the logs on console too

counter updated new value is 0 
setCounter  updated 
counter updated new value is 1 
setCounter  updated 
counter updated new value is 2 
setCounter  updated 
counter updated new value is 3 
setCounter  updated 
counter updated new value is 4 
setCounter  updated
.
.
.
.

What does this mean. It means following set of conclusions

Any hook gets called during rerender too
The return value of hook on each rerender is not referentially the same (except if you are returning primitive values from hook)
Always destructure values from hook for sake of simplicity in the code.
useEffect dependancy are shallow checked for equality.

I hope you like or understood what I am trying to explain here. If you have any suggestion please comment it down below.

Creating live coding videos right from your browser

technikhil314 — Thu, 22 Apr 2021 14:54:05 +0000

For those who are lazy in reading my motivation behind creating this small tool just go here and try it out

All this time I was thinking of starting my own youtube channel where I would be share my learnings frequently.

But when I asked a few of my colleagues they told me to use OBS studio to create videos where I had to learn about how to setup OBS studio effectively for better audio quality, video quality. And I immediately got frustrated of trying out different settings.

But then I thought of trying out to create a web based live coding video creator. To my surprise I created whole video recorder (screen and webcam both) just in browser. It leverages latest browser features like MediaRecorder, Picture-in-Picture, Media access and also uses modern machine learning libraries like tensforflow.js and bodypix model.

I have developed the application using next.js and tailwind.css and have deployed to vercel. You can try it here. The code is available to contribute and play around here

Uses of CSS conic gradients

technikhil314 — Wed, 14 Oct 2020 15:31:49 +0000

With conic gradient landing up in firefox 83. It will now have good support. Removing dependancy on SVG for some simple usecases progress ring is one of them.

Here is how I have achieved it with conic gradient, custom css properties and eight lines of javascript.

Check it out here

What more can we achieve with conic gradients:

You can create pie charts like this

or some awesome checkerboard background patterns like this

or something like this

or some fancy borders like these

or a hue color wheel

References:

There is nice article already by Jeremias Menichelli about creating progress rings using svg here
Use of CSS custom properties inspired from this talk by Lea Verou

Adding badges to your open source project in 2 seconds

technikhil314 — Mon, 05 Oct 2020 11:04:06 +0000

Are you a open sourcer or maintainer for open source project?? Have you automated adding badges to your repo?? Let me know how you do it.

Adding badges to your readme file is such a pathetic and robotic feel job. I have seen people doing following

Everytime go to shields.io or badgen.net
Search for your badge by name e.g. travis
Copy the url paste to your readme
and format it to add links to proper destination etc etc

damn it took 45 seconds for me to type the process and may be 15 seconds for you to read all the steps. Imagine how much time it will take to add 10 badges.

I thought there must be some tool out there to do this but I did not find one (Please comment if you know of any such tool)

But I decided to created one such tool which will

See for all files through your current working directory
and add badges accordingly

Here is the demo of it running

How can you use it

npm i -g git-auto-badger
add a placeholder in your readme to tell where to add badges check the repo for more info
run auto-badger

Done. All the necessary badges for any OSS project are addeddto your markdown. Commit and push. Njoy.

By necessary badges I mean following

Build status, Code coverage, NPM package version, Dependancies monitor, all contributors count, star on github, fork on github

visit https://github.com/technikhil314/auto-badger for more details. Feel free to give feedback or leave comment.

Making forms by getting most out of HTML and CSS

technikhil314 — Wed, 23 Sep 2020 14:03:01 +0000

With placeholder-shown now supporting as much as 95% browsers

I thought I can use it in production but before that I wanted to be sure of it and to check whether I can really use it in production.

My target was

to not use any javascript for simple form validation like required, min length, max length, min value, max value etc.
And see how many capabilities can I add to html form.

I was able to achieve following

Show error feedback when the input is invalid while user is typing in it
Show error message below the input explaining what is the error
Not showing any error message if input is blank or user had not interacted with it.
Show success feedback when input becomes valid while user is typing in it.
Keeping the accesibility of HTML form intact so that keyboard tab index, screen readers and other assistive tools will work fine with it.
Mark label associated with required input fields with asterisk * (I have leveraged flex for this)
Disable form submit button when form is invalid
Show optional fields as valid even when user has not interacted with them

Everything said above is done with just HTML and CSS.

Please check it here if you are interested to know how

Limitations:

placeholder-shown as the name suggests can be used only with those input types that allow showing placeholders. Viz. input[type="text"], input[type="number"], input[type="search"], input[type="email"], input[type="url"], input[type="tel"], input[type="number"] and textarea are the only interactive form elements that support placeholders
For others form elements you need to use either blank which has absolutely 0% browser support as of now
or use indeterminate pseudo class for which you need to add little bit of javascript. but has a good browser support but unfortunately it can be used with only radio, checkbox input types check the JS section of this codepen
For select box you need to have a non blank default selected option as it also does not support placeholder.
You can not do complex validation like confirm password with this for obvious reasons.

Conclusion

I felt we can use this in production cause anyways we tend to use custom date pickers for our custom design and custom multiselect boxes which can be used as single select boxes too. This adds a complexity to handle date pickers on touch devices seperately though.
Once we have blank selector this can be the go to thing
This can be a very good for simple form validations which can be fulfilled by just using HTML5 form controls.

Thanks for reading it till here. And Thats all. :)

Feel free to comment or feedback or correct me if I am wrong somewhere by leaving a message below.

An infinite/circular carousel with css flex and little JS

technikhil314 — Mon, 03 Aug 2020 15:43:27 +0000

Lately I have been playing a lot with css (and finally yes I get to do what I love) I was actually thinking of several applications of flex order property. Last usecase I found helps to solve a small accessibility issue in signup/NDA forms head here to see what it was.

This one tries to create a bare minimum infinite/circular carousel with as less as 70 lines of code all included HTML,CSS,JS

What do I mean by circular/infinite carousel?

Its a carousel that has n number of slides and it keeps scrolling to right side (for LTR languages) and (n+1)th chilid is again 1st child.

So lets start

I will be using css flex, flex order, scroll-snap and little bit of plain JS to make our carousel autoscroll.
This is going to be a bare minimum carousel

Lets take a look at basic HTML and css for our carousel

<div class="carouselWrapper">                
    <div class="carouselContainer">
        <div class="carouselItem">
            <img height="100px" width="100%" src="//via.placeholder.com/1000x100/FFFF00/000000/?text=Carousel+Item+21"
                alt="" />
        </div>
        <div class="carouselItem">
            <img height="100px" width="100%" src="//via.placeholder.com/1000x100/FF0000/FFFFFF/?text=Carousel+Item+22"
                alt="" />
        </div>
        <div class="carouselItem">
            <img height="100px" width="100%" src="//via.placeholder.com/1000x100/00FF00/000000?text=Carousel+Item+23"
                alt="" />
        </div>  
    </div>
</div>

and here is the css

.carouselWrapper {
  position: relative;
}

.carouselContainer {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
}
.carouselContainer .carouselItem {
  flex-grow: 0;
  flex-shrink: 0;
  max-width: 100%;
}

Check the codepen

You can get rid of that horizontal scroll bar using following css and add scroll snap to it

.carouselContainer {
  display: flex;
  flex-wrap: nowrap;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  overflow-x: auto;
  scrollbar-width: 0;
  scrollbar-color: transparent transparent;
}
.carouselContainer::-webkit-scrollbar {
  display: none;
}
.carouselContainer .carouselItem {
    flex-grow: 0;
    flex-shrink: 0;
    max-width: 100%;
    // we are telling browser to align each item centrally to 
    // screen as it scrolls into viewport
    scroll-snap-align: center;
}

We have added following property scroll-snap-type: x mandatory; to carouselContainer class

here We are telling browser to apply scroll snap on
horizontal axis and make it manadatory to scroll one item
fully to snap behaviour to kick in.
check more details here

We are also adding scroll-snap-align: center; property to carouselItem class

we are telling browser to align each item centrally to
screen as it scrolls into viewport

Now lets add little bit of javascript

let index = 0;
const speed = 5;
const numberOfSlides = 3;
const carouselContainer = document.querySelector(".carouselContainer");
const carouselItemWidth = carouselContainer.scrollWidth / numberOfSlides;
setInterval(() => {
  carouselContainer.scrollBy(carouselItemWidth, 0);
  timeoutId = setTimeout(() => {
    index = index % numberOfSlides;
    let childToMove = carouselContainer.querySelectorAll(`.carouselItem`)[
      index
    ];
    // The line below move the item to end of carousel by 
    // manipulating its flex order
    childToMove.style.order =
      childToMove.style.order && childToMove.style.order === 0
        ? 1
        : +childToMove.style.order + 1;
    index++;
    clearTimeout(timeoutId);
  }, 1000);
}, speed * 1000);

And woohoo our carousel is running

Let me know your thoughts on this.

A practical use case of web accessibility solved with CSS flexbox

technikhil314 — Sat, 27 Jun 2020 15:21:57 +0000

Some time back I was working on a talk about accessibility. And I was working with my colleague Swapneel at Thoughtworks.

It was a simple use case that combines user experience and accessibilty (using form via keyboard)

Brief about the use case

Many of us sign up/sign in at least once a week and I personally am habitual of filling in the HTML form just by using keyboard only. And almost every sign up prompts you for accepting their terms and condition.
And in almost every case it looks like this

So if you try to fill navigate and fill the form with just keyboard (using tab key to navigate between inputs/buttons/checkboxes)

Following gif shows how the tabindex is working on each tab press.

Do you see any problem in this tab indexing?

will you accept TnC without reading it? (now dont say I do although Some times I too do it) logically/ideally one will accept Tnc only after reading it. That means the link for Terms and conditions should get focused before the checkbox.

So this is a accessibility problem right?
So how can we solve it now?

Possible solutions

Move checkbox after the I accept the terms and conditions text But then that breaks the reading flow on LTR languages
Add javascript to manage tabindex and focuses based on which input is focused right now some thing which I did here
Is there a simple solution? Yes indeed flex order property comes to our rescue. but How?

Lets look at HTML first

<form class="row" action="https://www.example.com" method="POST">
  <div class="col-12">
    <div class="col-12 form-group">
      <label for="exampleInputEmail1">Email address</label>
      <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
      <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
    </div>
    <div class="col-12 form-group">
      <label for="exampleInputPassword1">Password</label>
      <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
    </div>
    <div class="col-12 form-group form-check tncWrapper">
      <input type="checkbox" id="tncCheckBox" id="exampleCheck1">
      <label class="form-check-label" for="exampleCheck1">I accept the <a id="tncLink" href="https://www.example.com">terms and conditions</a></label>
    </div>
    <div class="col-12">
      <button type="submit" class="btn btn-primary">Submit</button>
    </div>
  </div>
</form>

Now we will move the checkbox after the I accept the terms and conditions text, add some css and ta dah!! the magic of flex begins.

we will need to add some css in order to make keep the order of elements same on UI but different in code so the the only change we do in HTML is like below

<div class="col-12 form-group form-check tncWrapper">
      <label class="form-check-label" for="exampleCheck1">I accept the <a id="tncLink" href="https://www.example.com">terms and conditions</a></label>
      <input type="checkbox" id="tncCheckBox" id="exampleCheck1">
</div>

add following css

.tncWrapper {
  display: flex;
}

#tncCheckBox {
  order: -1;
}

With this we are asking the browser to render the checkbox before the I accept the terms and conditions text. But in HTML the checkbox appears after the text. And since screenreader/keyboard respect HTML and not what is being displayed/rendered in viewport we are done?
Check it out here

Try it here

So how did it work?

Since the all accessibility tools like screenreader/keyboard respect the HTML i.e DOM order and not the view port/render order, Focus first moves to the link and then to checkbox which is coded in HTML. But for users its shown as other way around just from experience point of view.

Please comment down below if you have any suggestions/queries.