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?

    fajarsiddiqfs
    9 days ago
    mddanishyusuf
    11 days 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
    18 days 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
    21 days 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
    a month 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
    a month 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)

    willhoag
    a month ago

    Quick React-like API for adding html to a page in plain JS

    I use this when need to quickly add some HTML to a page programmatically.

    Code is:

    function el (type, attrs, children) {
      children = children || []
      attrs = attrs || {}
      var e = document.createElement(type)
      Object.keys(attrs).forEach(function (key) {
        e.setAttribute(key, attrs[key])
      })
      children.forEach(function (child) {
        if (typeof child === 'string') {
          if (e.textContent) {
            e.textContent = child
          } else {
            e.innerHTML = child
          }
        } else {
          e.appendChild(child)
        }
      })
      return e
    }

    And usage:

    const newElement = (
      el('div', { className: 'bold' }, [
        el('p', {}, ['here is text in a paragraph'])
      ])
    )
    
    document.appendChild(newElement)
    mddanishyusuf
    a month ago

    Design an input box with search emoji

    Recently I add search input box into dailyhack.xyz and without search icon the input doesn't feel good according to UX. So, to add a icon inside input box need more element and CSS. Nowadays I'm using lots of emoji and I think why not use a little hack to design this search input box without any extra element and CSS. Here is the hack.

    <input type="text" placeholder="🔍 Let's find some tricks from past"/>

    input-with-emoji

    So, I'm adding a search emoji into placeholder of the input box.

    What you think? is this cool hack?

    FabioRosado
    a month ago

    Compile Sass files to CSS on the fly

    If you use VSCode and prefer to use sass instead of plain old css. You can install the Live Sass Compiler from the extension marketplace. After you installed the extension all you need to do is press a button on the bottom of the window of vscode and watch your sass files.

    The extension will automatically turn all your files into a single css file (this includes all the ones you import within your sass files).

    The bar looks like this:

    sass compiler

    mddanishyusuf
    a month ago

    View the password of input field

    👀 What happens some that browser auto fill the password into password field and I don;t know which password is this.

    So, I use a small hack. just change the input type from text to password

    Right click on password input field and select inspect element

    <input type="password" /> to <input type="text" />

    password-view-3