A Community of Makers and Geeks

It's a place where people share there daily hack they use in their developments. So, Do you have any hack?

    a month 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

    2 months 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

    3 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! πŸ₯‡

    3 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

    4 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>
    4 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

    4 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

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

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