Neat little trick to remove excess whitespace from an svg. Visit this link and paste the content of your svg and hit ‘Run’, the script will run and add a viewBox attribute which removes the whitesp...
Restore a removed git branch
While doing some branch cleaning I accidentally deleted a branch I shouldn’t have deleted and apperently there is a way to restore it afterwards (phew!). Get git history: 1 $ git reflog Find row...
Use js reduce to group array of objects by key
This will create a new object with each gender grouped by key using the reduce function. Array of objects to be grouped by gender: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 2...
Add a timeout to fetch
This function returns 504 after time has passed. Instead of letting the user wait for the API to timeout which could take 60 seconds, it’s better to give the user feedback after a few seconds inste...
Increase dashed/dotted border width
The CSS property border doesn’t let us increase the width of the dots or the spacing between them, and this clever little trick is a workaround for that. 1 2 3 4 5 6 7 8 9 10 11 /*Horizontal*/ bac...
Conditionally add key/value to object
Neat little trick to conditionally add a key and value to an object: 1 2 const someBoolean = true; ...(someBoolean && {key: "value"})
Simple snippet to get query parameters
Simple snippet to get individual parameters from the url. 1 2 3 4 5 6 const getUrlParameter = (name) => { name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]'); var regex = new RegExp('...
Handle multiple checkboxes in react
This example shows one way to handle multiple checkboxes in react and populates an array with the ID of the checked checkboxes. index.js 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 2...
Simple use of react context
Simple use of react context, useful instead of passing props through multiple components AKA Prop Drilling. In this example we pass a value down from Parent.js to Child.js and send a click event ba...
Simple forwardRef example
Simple use of forwardRef 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 // EmailInput wraps an HTML `input` and adds some app-specific styling. const EmailInput = React.fo...