16th

Hmmm, maybe I should start a deploy-awesome list?

8th

Lol... eslint no-use-before-define

Can be quite easily set to ["error", { "functions": true, "classes": true }], so it's absolutely fine for a const to be declared below a function that is consumed in that function... how had I ruled that out at some point?

Stop using google, use npm directly

It's surprising how I'd assumed searching google would get me the npm results I wanted. Nope. Use npm more.

Text inputs are harder than they look in react...

Especially if you want to change a value in the onChange. React then thows an ¯\_(ツ)_/¯ about where to put the cursor cause it's like "you changed it (wo)man". I couldn't actually figure this out and threw a sadface... I'd always get cursor jumping on the old element.setSelectionRange(pos, pos) with react with a 32ms render. I'll have to read libraries like react-input-enhancements more closely or just create custom text masks from text-mask but that's a heavy solution.

3rd

Object.defineProperty

Is like a single property proxy, allowing you to intercept a property get with context. That last part helped me out of a pickle.

choose your drag and drop

Litmus test: do you want a drag preview? If you just want to move something, this is probably better:

element.addEventListener('mousedown', mouseDownHandler)

mouseDownHandler = () => {
 document.addEventListener('mouseover', mouseOverHandler)
 document.addEventListener('mouseup', mouseUpHandler)
}

mouseUpHandler = () => {
 document.removeEventListener('mouseover', mouseOverHandler)
 document.removeEventListener('mouseup', mouseUpHandler)
}

mouseOverHandler = ({ clientX, clientY }) => {
   console.log(`mouse position: (${clientX}, ${clientY})`)
}

Also: clientX & clientY & drag events in Firefox not gonna happen

bits and bobs
  • String.repeat(n) is handy and '\u00A0' is a space
  • You can steal text from a page by selecting all of it copying the highlight and deselecting. user-select property. Draggable elements have it as none by default.
  • wow, a css painting recreation
a good icon lib: ionicons

May

23rd

js proxies are cool, and seemingly hard to misuse...

They allow you intercept object.key accesses and perform actions! ES2015 Proxies

22nd

today I created:

styled-as-components I had to remind myself of a bit of prototype / inheritance features of javascript which in this case was useful to avoid loops inside a factory function.

Thanks to this medium for how to publish.

21st

devtools has a colorpicker

(tweet)

the lodash of styled-components

polished

React components:
fetch accepts FormData objects as the body... very nice, even though FormData objects are non iterable and somewhat awful in that regard :D.

https://medium.com/@everdimension/how-to-handle-forms-with-just-react-ac066c48bd4f

TIR:

April

2018