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

gjain574
7 months ago

Tired of getting your email spammed ?

Want to subscribe to something temporarily or want to download something by giving your email ?

Save your email id from getting spammed by using https://getnada.com/ as a 'temporary' email.

AnTheMaker
7 months ago

How to reload a page using JavaScript

You can simply use location = location; or location.reload(); in your JavaScript to reload the page current page.

533 more ways how you can do it: http://www.phpied.com/files/location-location/location-location.html

KevinNTH
7 months ago

macOS: Toggle on Character Viewer to insert Emoji to anywhere!

Press ctrl + cmd + space and display Character Viewer. Go to the Emoji section and display emojis. Double click on the Emoji of your choice to insert it in your text edit area.

image

owenconti
7 months ago

5 keyboard shortcuts to navigate your code faster

Here are 5 quick keyboard shortcuts I recommend you setup to help you navigate your code faster!

  • Delete line(s): CMD + D
  • Move line(s): OPTION + UP or DOWN ARROW
  • Go to line: CMD + L
  • Go back/forward: CMD + [ or ]
  • Start/end of word: OPTION + LEFT or RIGHT ARROW

Bonus:

  • Highlight characters with start/end of word: SHIFT + OPTION + LEFT or RIGHT ARROW

Full article available here: https://owenconti.com/tips/5-keyboard-shortcuts-to-navigate-your-code-faster/

IamTregsthedev
7 months ago

Use Linux on ChromeOS

Linux can be installed On Chrome OS without removing Chrome OS!

Chrome OS has tons of dis-advantages, The apps, Extestions and How things run.
Fix this by Installing Linux on Chrome OS


STEPS

  1. Go to your settings on Chrome OS
  2. Click the search bar in the settings. and search for Linux
  3. Press Install and Keep the Chromebook on that, and Still

Affter all it's installed, It take you to a Terminal, You can install apps such as Firefox, and others

EXAMPLES

This link will help