)
}
}
)
(
}
{
)
)
(
)
(
(
{
}
)
(
)
}
)
)
{
(
(
)
)
}
)
(
}
AboutAll PostsWarningRandom

Check if HTML Tag is Valid

  1. const isTag = tag => { 
  2.   return !/Unknown/.test(document.createElement(tag) + '')
  3. }
  4.  
  5. console.log('section:', isTag('section'))
  6. console.log('div:', isTag('div'))
  7. console.log('nav:', isTag('nav'))
  8. console.log('banana:', isTag('banana'))

Check if a tagName is a valid html element.

When casting a dom node to a string, you’ll get a class name like this:

  1. document.createElement('div') + ''
  2. // '[object HTMLDivElement]'
  3.  
  4. // you can cast to a string with `toString` if 
  5. // you want things to be more readable
  6. document.createElement('section').toString()
  7. // '[object HTMLElement]'
  8.  
  9. document.createElement('input') + ''
  10. // '[object HTMLInputElement]'

When you try to create something with an unknown tagName you’ll end up with:

  1. document.createElement('banana') + ''
  2. // '[object HTMLUnknownElement]'

So, testing for the presence of the string Unknown is an easy way to check if a tagName is valid in a given browser. This is the perfect kind of thing to memoize: 

  1. const tags = {}
  2. const isTag = tag => { 
  3.   if (tags[tag] != null) {
  4.     // already calculated
  5.     console.log('loking up: ', tag, tags[tag]);
  6.     return tags[tag]
  7.   }
  8.   const result = !/Unknown/.test(document.createElement(tag) + '')
  9.   tags[tag] = result
  10.   return result
  11. }
  12.  
  13. console.log('calculator', isTag('calculator'))
  14. console.log('calculator', isTag('calculator'))
  15.  
  16. console.log('strong', isTag('strong'))
  17. console.log('strong', isTag('strong'))
// dom // html // javascript // regex // strings // tricks // ui

Get the milliseconds

  1. console.log(+new Date());
  2. console.log(Date.now());

At some point I got in the habit of doing +new Date(). Not entirely sure why, Date.now() is the clear choice. I guess maybe Date.now() is newer…

confirmed… it is new, doesn’t work in much older browsers…

// javascript // speed-coded // tricks

Merge Collection (array of objects)

  1. const collection = [
  2.   { name: 'Joe' },
  3.   { age: 31 },
  4.   { job: 'programmer' }
  5. ];
  6. const merged = Object.assign({}, ...collection);
  7. console.log(merged);

Combine (“assign”) entire array of objects.

Saw this here… figured it was worth a quick post.

// arrays // javascript // objects // tricks

Array Range from 1

  1. Object.assign(Number.prototype, {
  2.   *[Symbol.iterator]() {
  3.     for (let i = this; i--;) 
  4.       yield this - i;
  5.   }
  6. });
  7.  
  8. console.log([...3]);

I saw this on twitter a little while back. Tweet was from James Padolsey. A fun trick, the thread is pretty entertaining.

// arrays // hacks // humor // javascript // tricks

Bad/Simple UI Counter

  1. <script>
  2.   count = 0
  3. </script>
  4. <div>
  5.   <p>You clicked <span id="countEl">0</span> times</p>
  6.   <button onclick="countEl.innerHTML = ++count">Click me</button>
  7. </div>

This kind of thing is often showcased on UI Framework demo pages. I thought it would be interesting to create it in the simplest way possible while still being readable. This is the only code needed for the entire web page… the browser will figure out the rest… 😀

// javascript // tricks // ui
Older Posts
Newer Posts

Recent

Archive

RSS
snippet.zone /// {s/z}