mddanishyusuf
2 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
3 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
3 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
3 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
3 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)

willhoag
3 months 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
3 months 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
3 months 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
3 months 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

FabioRosado
3 months ago

Open links in new tab safely

Everyone knows that if you use target="_blank" on a link tag that link will be open in a new tab. But using just this is a security risk and could allow bad people to take control of your page by abusing the window.opener event - read more about it here

So if you need a link to open on a new tab, make sure you add rel="noopener noreferrer" to the tag as well.

So instead of using:

<a href="http://example.com" target="_blank">Link</a>

You should use: <a href="http://example.com" target="_blank" rel="noopener noreferrer">Link</a>