5 days ago

UTC to Local time converter for AWS OpsWorks

Problem: Difficult to keep track of deployments in AWS OpsWorks as the deployment times are in UTC.

Solution: Google Chrome Extension to convert all times displayed to local time.

Screenshot 2019-08-25 at 2 26 27 PM

Link: https://github.com/danedavid/AWS-time-converter

a month ago

Turn any website into a macOS app

Flotato lets you turn any web page into a Mac app just by changing the name.

πŸ‘‰ https://flotato.com

2 months ago

Docker Basic Commands

These docker commands are that I use every single day

# show containers
docker ps

# Logging to container
docker logs -f <container_id>

# ssh to container
docker exec -it <container_id> /bin/bash

# build container
docker-compose build [container_name_on_yml]

# run container
docker-compose up [container_name_on_yml]

# run rails console on container
docker-compose run <container_name_on_yml> rails c

# remove all images
docker rmi -f $(docker images -a -q)

Please let me know your other docker's daily hacks! πŸ₯‡

2 months ago

Make Dynamic Email Template with JSON data or APIs

Dynamic Email Template

This tool will Generate Email Template Code with Dynamic Data as JSON object or API. Get the generated email template and add into Mailchimp, Sendgrid or whatever service you are using to send newsletters.

Tool Website: https://dynamic-template.xyz

How to use

Step 1 : Add your template code into "Code" with Handlebars syntax to iterate and bind dynamic data with Email Template code. Ex:

            <h2>Public APIs Weekly</h2></td>
    {{#each items}}
            <h3 style="margin: 0; padding:0">{{title}}</h3>
            <p style="margin: 0; padding:0">{{description}}</p>

Here you can get to know about Handlebars syntax https://handlebarsjs.com/

Step 2 : Add the JSON data into "Test Data" to bind with the Email Template. If you have API endpoint for the data then you can alse get data through your REST API. Just add your API and click "Get Data". Ex:

  "name": "Danish",
  "email": "mddanishyusuf@gmail.com",
  "items": [
      "title": "GitHub API",
      "description": "Information for a user's Github profile"
      "title": "Open Collective",
      "description": "Platform where communities can collect and disburse money transparently to sustain themselves and develop their activities"
      "title": "Fortnite",
      "description": "Fortnite Stats & Cosmetics"

That's all.

Get your generated Email Template from "Template".

Tool Website: https://dynamic-template.xyz

3 months ago

Reset local repository branch to be just like remote repository HEAD

Setting your branch to exactly match the remote branch can be done in two steps:

git fetch origin
git reset --hard origin/<branch>
3 months ago

CSS hack for quickly resizing images for mobile devices

Use object-fit cover on your images for a quick way to resize images without ruining proportions... @media (max-width: 540px) { img{ max-height:200px; max-width:100%; object-fit:cover; } }

Here's a demo: https://twitter.com/graeme_fulton/status/1137409649857220608

3 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: (gekri.com) image

MacOS Emoji keyboard: image

β†β†’β†‘β†“β†šβ†›β†Άβ†·β†Ίβ†»β€Ήβ€Ί ... ...


Related to #65

3 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! ✨πŸ₯°
3 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.

3 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. 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.

Load More