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

Oscillating Canvas Wave

  1. const c = document.body
  2.   .appendChild(document.createElement('canvas'))
  3.   .getContext('2d');
  4.  
  5. Object.assign(document.body.style, {
  6.   margin: 0,
  7.   height: '100%'
  8. });
  9.  
  10. Object.assign(c.canvas.style, {
  11.   position: 'absolute',
  12.   left: 0,
  13.   top: 0,
  14.   width: '100%',
  15.   height: '100%'
  16. });
  17.  
  18. let t = 0;
  19.  
  20. function resize() {
  21.   c.canvas.width = innerWidth * 2;
  22.   c.canvas.height = innerHeight * 2;
  23.   draw();
  24. }
  25. window.addEventListener('resize', resize);
  26. resize();
  27.  
  28. function draw() {
  29.   const {
  30.     canvas: { width, height }
  31.   } = c;
  32.  
  33.   c.fillStyle = 'rgba(155, 155, 155, .4)';
  34.   c.fillRect(0, 0, width, height);
  35.   c.fillStyle = '#000';
  36.  
  37.   let x = innerWidth;
  38.   let y = 0;
  39.  
  40.   t += 0.05;
  41.   for (let i = 0; i < innerHeight; i++) {
  42.     x += 2 * Math.cos(t + i * 0.1 * Math.cos(i / 200));
  43.     y += 2;
  44.     c.fillRect(x, y, 100, 1);
  45.   }
  46. }
  47.  
  48. function loop() {
  49.   draw();
  50.   window.requestAnimationFrame(loop);
  51. }
  52. loop();

Speed coded oscillating wave on canvas… Looks better in fullscreen.

// animation // canvas // javascript // speed-coded

CSS Color Picker Gradient

  1. const col = document.body.appendChild(
  2.   document.createElement('div')
  3. );
  4. Object.assign(col.style, {
  5.   position: 'absolute',
  6.   left: 0, top: 0,
  7.   width: '100%',
  8.   height: '200px',
  9.   background: 'linear-gradient(90deg, #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000)'
  10. });

CSS gradient that cycles hue – useful for a colorpicker. This is the main part of the snippet:

linear-gradient(90deg, #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000)
// color // css // dom // javascript

SVG Isometric Box

  1. const el = document.body.appendChild(
  2. document.createElement('div'));
  3.  
  4. el.innerHTML = `
  5.   <svg id="svg" width="100%" height="100%" viewBox="0 0 550 500">
  6.     ${(() => {
  7.       let str = ''
  8.       let c = 10;
  9.       let num = 200;
  10.       let colStep = 225 / num
  11.       for (let i = 0; i < num; i++) {
  12.         c += colStep;
  13.         col = `rgb(${c}, ${c}, ${c})`;
  14.         str += `<rect 
  15.           fill="${col}" 
  16.           x="0" y="0" 
  17.           width="200" height="200" 
  18.           transform="translate(275, ${250 - i}) scale(1, .5) rotate(45)" />`
  19.       }
  20.       return str
  21.     })()}
  22.   </svg>
  23.   <style>
  24.     svg, div, body, html {
  25.       overflow: visible; 
  26.       height: 100%; 
  27.       width: 100%;
  28.       margin: 0; padding: 0;
  29.       background: gray;
  30.     }
  31.   </style>
  32.   `;

Draw a shaded isometric box in SVG.

// dom // javascript // strings // svg

Speed Coded HTML Templating Thoughts

  1. const tmpl = `
  2.   main
  3.     h1 Welcome
  4.     hr
  5.     nav
  6.       button one
  7.       button two
  8.       button three
  9.     hr
  10.     p this is a test
  11.     p this is another test
  12.     textarea hello
  13.     ul 
  14.       li alpha
  15.       li beta
  16.       li zeta
  17.         ul 
  18.           li organize
  19.           li things
  20.       li and stuff
  21.   hr
  22.   footer 2022
  23. `
  24.  
  25. let htm = parse(tmpl);
  26. document.body.innerHTML += htm
  27. console.log(htm)
  28.  
  29. function isTag(tag) { 
  30.   return !/Unknown/.test(document.createElement(tag) + '')
  31. }
  32.  
  33. function parse(input) {
  34.   let lines = input.split(/\n/)
  35.   let html = []
  36.   let closeTags = []
  37.   let lastIndent = 0;
  38.  
  39.   for (let i = 1; i < lines.length; i++) {
  40.     let indent = 0;
  41.     let tag = '';
  42.     let content = ''
  43.     let line = lines[i]
  44.     let mode = 'start';
  45.  
  46.     for (let j = 0; j < line.length; j++) {
  47.       const char = line[j]
  48.       if (char == ' ' && mode === 'start') {
  49.         indent++;
  50.       } else if (char != ' ' && mode != 'content') {
  51.         mode = 'tag'
  52.         tag += char
  53.       } else {
  54.         mode = 'content'
  55.         content += char;
  56.       }
  57.     }
  58.  
  59.     if (indent <= lastIndent && closeTags.length > 0) {
  60.         let back = lastIndent
  61.         while(back >= indent) {
  62.           html.push(closeTags.pop())
  63.           back -= 2
  64.         }
  65.     }
  66.  
  67.     if (tag.length > 0) { 
  68.       let xtra = ''
  69.       let origTag = tag; 
  70.  
  71.       if (!isTag(tag)) {
  72.         tag = 'div'
  73.         xtra = ` class="${origTag}" `
  74.       }
  75.       closeTags.push(`</${tag}>`)
  76.       html.push(`<${tag + xtra}>`)
  77.       if (content.length > 0) html.push(content)
  78.     }
  79.  
  80.     lastIndent = indent;
  81.   }
  82.  
  83.   return [...html, ...closeTags.reverse()].join('')
  84. }

Parse a minimalistic html template inspired by the likes of jade, haml, pug etc… This is very speed-coded. I may revisit the same thing with a bit more of an elegant approach in the future.

// html // javascript // strings // ui

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
Older Posts
Newer Posts

Recent

Archive

RSS
snippet.zone ~ 2021-24 /// {s/z}