Styled Components

Using React? Using Styled Components? “Yes” - ok you can skip this article. Im gonna assume you already know what styled components are if you have gotten this far. Maybe you’re on the fence of whether to use or just use CSS, PostCSS, SCSS or whatever else makes sense for you. Having used all the above, I can say that using the styled component paradigm in building react web apps is the best approach. Ease in including Wanna start to use styled components, easy jump right in! yarn or npm install them and away you go. No need to hook...

this.props.children for Loading

This is a pretty simple approach and a very common pattern in React, but when using it to halt the loading of an app it becomes a powerful tool. Working with some pretty great devs in the last years has introduced me to some great React patterns, this has become a standard go to for all of my apps that require some async activity before the app is loaded. This pattern is made up of two components <AppStartup/> and <AppReadyWaiter/>. class AppStartup extends React.PureComponent { componentDidMount() { this.props.initApp(); } render() { return null; } } const mapDispatchToProps = dispatch =>...

Spread Operator

... There is it, the three dots known as the spread operator. Object.assign just got thrown to the side of the road like a verbose hitchhiker taking up way too many keystrokes. Whats it good for you ask!? What isn’t it good for!? Spread introduction to JS is the knife thats spreading butter on our functional fun toast. OK, OK… enough with the analogies. When first coming across spread in code it can be quite tricky to understand without having used it before, however after some simple use you wonder how you dealt with functional JS before. const x =...

Array.flat vs Array.reduce

Lets check out my new favorite method for flattening array in array strucutres we commonly run across in functional programming. What method is that you ask!? Well, Array.flat() I say! Its the fastfood version of flattening arrays, vs the restaurant version of reduce, so lets examine. const nestedArray = [['someJuicyData'], ['anotherPieceofJuicyData']]; //Desired Outcome => ['someJuicyData', 'anotherPieceofJuicyData']; const flattenedArrayWithReduce = nestedArray.reduce((memo, nest) => memo.concat(nest), []); const flattenedArrayWithFlat = nestedArray.flat(); So as you can see in the code we handle the flattening with reduce by starting with an empty array and concating the inner array in the outter array we are working...

Dynamic Image/Video Placeholders

There are quite some cool ways out there to do dynamic image plaeholders. That basically being a way to reserve some space on the layout for an image that will be downloaded and shown. For example if you use a img tag with 100% width it will eventually snap into position and look good. However to start with it will seem like the grid is being filled with nothing and then something - which is not the nicest UI. Components to the rescue! But first like I mentioned above some cool solutions out there. My favorite is the ‘blur up’...
pow wow!