naquiuddin
5 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.

https://snippet-generator.app/

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.

Miscellaneous-Pk
5 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:-

CSS

d-none : {
display: none !important;
}

d-block : {
display: block !important;
}

HTML

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

jQuery

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

Example

Here is a code pen to make popular collapsing navbar. Toggle between class names .collapse and .collapsing using jQuery. https://codepen.io/qasim_ali/pen/wbLpPG

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.

chandrasd
6 months ago

How to get your SSH Keys from GitHub

Get your public SSH keys from GitHub

https://github.com/username.keys

Replace "username" with actual GitHub username Source

mddanishyusuf
6 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.

@GetVideoBot

image

fajarsiddiqfs
6 months ago

How to add EMOJI + TWITTER THREAD ?

  1. create emoji by typing :
    https://matthewpalmer.net/rocket

  2. you can thread by click +

mddanishyusuf
6 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: https://apiwithgithub.com

Tool Demo

📢 Good New is it's open source project: https://github.com/mddanishyusuf/json-apis-with-github

mddanishyusuf
6 months ago

Make ascii tables super easy with terminaltables

How to make ASCII tables with a simple Python library.

Like this:

image

Use this Pythin Library: https://pypi.org/project/terminaltables/

Suggested by @sergio

mddanishyusuf
6 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 https://github.com/octokit/rest.js/issues/890#issuecomment-392193948

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

Like this.

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

mddanishyusuf
7 months ago

Render JSON objects in React Component

In Angular it's easy to view JSON object just bind like this.

<pre>
{{jsonObject | json}}
</pre>

In React You have to stringify first to the JSON object.

<pre>
  <code>
    {JSON.stringify(this.state.json, null, 2)}
  </code>
</pre>

How you render JSON object in React. Comment your trick.

mddanishyusuf
7 months ago

Get GitHub Profile Pic URL

I just leanred this hack that you can get your GitHub Profile Photo URL by adding .png in the last of your github profile URL. Like this.

GitHub Profile: https://github.com/mddanihyusuf

GitHub Profile Pic URL: https://github.com/mddanishyusuf.png

Source(https://twitter.com/holman/status/1118184832637423621)