8 months ago

Use Emoji instead of font icon

Are you lazy to install font icons such as font awesome or feather icons to your web project? Use the power of emojis!!!

Use case of my current project: ( image

MacOS Emoji keyboard: image

←→↑↓↚↛↶↷↺↻‹› ... ...


Related to #65

8 months ago

Pick hex colors on Mac with ease!

macOS has a hidden color selector you can use to quickly grab the hex color of anything on screen! 🎨

  1. Open "Digital Color Meter"
  2. Set "display values" as "hexadecimal"
  3. Shift-Command-C to copy colors! ✨🥰
8 months ago

Snippets are awesome. Creating one is painful. This saves time.

We sometimes write the same code multiple times. For example Configs (related to webpack bable, prettier, eslint etc), frequently used react component code and other boiler plate code.

Some of us store them in GitHub's Gists, but have to copy paste it when required. Snippets are handy shortcuts to generate code for us. For example if you type imp in VS Code's JavaScript file, it automatically creates import <some space> from '<cursor shows here>'. You can type the package name and then press tab to automatically move cursor to another step. Just try it yourself.

We can create our own custom snippets for frequently written code to increase productivity. However writing it is painful. So here is a handy tool that creates snippet for you.

This tool works for sublime, atom and VS Code. However I like VS Code so this one is mostly about it.

Just copy paste your code on left side. Add $1 for first tab, $2 for second tab and so on. On the right side you will see snippets generated automatically for you.

After that Go to 'Preferences' > 'User snippets' and select the correct type, then paste in the copied code. Discover more from the VS Code snippets docs.

8 months ago

Easily change state of HTML elements using Class names.

Use CSS class names to easily change stuff on your websites. It keeps code cleaner and builds your CSS-vocabulary over time. For example toggling display of an element:-


d-none : {
display: none !important;

d-block : {
display: block !important;


<div id="error-msg">
This is may be some error message on your form.


$('#error-msg').toggleClass('d-none d-block');


Here is a code pen to make popular collapsing navbar. Toggle between class names .collapse and .collapsing using jQuery.

Additional Uses

  • toggle states between .active and .in-active class names.
  • change opacity using .hide and .show class names.
  • change <button> style using .btn-outline-dark and .btn-outline-light class names.

so many possibilities, it helped me a lot. I picked this convention from bootstrap.

9 months ago

How to get your SSH Keys from GitHub

Get your public SSH keys from GitHub

Replace "username" with actual GitHub username Source

9 months ago

Download video/gif in any tweet

Awesome Trick: Wanna download video or gif from twitter tweets? it's easy just mention and twitter handle.



9 months ago


  1. create emoji by typing :

  2. you can thread by click +

9 months ago

🛠️ Build Simple JSON API

Last week I build an tool to make quick JSON API for quick use and host them on GitHub Repository.

Here is the tool:

Tool Demo

📢 Good New is it's open source project:

10 months ago

Make ascii tables super easy with terminaltables

How to make ASCII tables with a simple Python library.

Like this:


Use this Pythin Library:

Suggested by @sergio

10 months ago

If-None-Match Header config saved my day

I'm building an small project with GitHub APIs and by default this is the config Cache-Control: public, max-age=60, s-maxage=60

Means GitHub APIs will be cache for next 60 sec of the call. I can't wait for that So, I google to find a solution and I found this

Just use a basic config 'If-None-Match': '' in header and that's all.

Like this.

axios.get(url, {header: {'If-None-Match': ''}})