Brett DeWoody's Picture

Brett DeWoody

Hi, I'm Brett DeWoody, a slow nomad, code craftsman, part-time bike explorer, music addict, mountain jogger, Frontend Engineer at Theorem and Technical Expert at Thinkful.

Aberfeldy, Scotland

49 posts

Accessing Component Methods and State from Outside React

Most React apps I build are self-contained - the entirety of the app lives within a root component, and is responsible for rendering the full web page/app. And the app doesn't need to communicate with other JavaScript or elements on the page. But in some cases the React app is a page/app add-on, responsible for rendering only a small part of a web page/app. Some examples - widgets, forms, maps. In many cases these widgetized apps are self-contained and don't need to communicate with the rest of the web page or app. But occasionally they do... and some setups require the state and methods within a React component to be accessed from outside React. Is this possible? And if so, how? How To

Read more

Asynchronous Actions with Redux Thunk

If you've been working with React and Redux you're undoubtly familiar with Actions - used to send information from your application to the state. By default, Redux Actions are synchronous - for every Action dispatched, the state is immediately updated. Modern web applications, however, often involve asynchronous events, most commonly in the form of network requests like API calls. In these cases the Actions can't immediately update the application's state because the request is asynchronous. In other words, the application's state can't be updated until the request returns (or fails) at some unknown point in the future. This means our Actions need to be Asynchronous, instead of Synchronous. With Asynchronous Actions common in many React/Redux applications there are several React/Redux packages to aid in

Read more

Updating CNN's Loading Animation

The other day I opened CNN.com and was immediately greeted with the following loading animation. That's the actual animation, not a low-res screen grab. Two visuals immediately caught my eye: Jagged, pixelated edges Abysmal, low frame rate I opened Chrome's Dev Tools to inspect the element. Turns out the loading icon is nothing more than a low-quality animated GIF, coming in at ~2kb. As a CSS-fan I know there are more-performant, better-looking solutions to this GIF. So I set out to build an alternative. Turns Out, It's Really Simple Here's what we'll be building: .center { display: -webkit-box; display: -ms-flexbox; display: flex; height: 100px; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .cnn-loader-stage { position: relative; -webkit-perspective: 100px; perspective: 100px; -webkit-transform-style: preserve-3d; transform-style:

Read more

Using Chrome's Cubic Bezier Editor

Did you know Chrome Dev Tools has a cubic-bezier editor? Me neither. In case 'cubic-bezier' is a new term to you - cubic-bezier is one of possible keywords you can use when defining a CSS transition or animation timing function. For example: transition-timing-function: linear; transition-timing-function: ease-in; transition-timing-function: cubic-bezier(n,n,n,n); animation-timing-function: linear; animation-timing-function: ease-in; animation-timing-function: cubic-bezier(n,n,n,n); Each of the values above (linear, ease-in, and cubic-bezier()) control the timing of the transition or animation. The first, linear results in a constant transition/animation speed from start to finish. The second, ease-in results in a transition/animation speed that starts slow and speeds up as it finishes. And the third, cubic-bezier, accepts 4 parameters allowing complete control of the timing function to

Read more

My Podcast Playlist: Coding Edition

I'm a relatively late adopter to podcasts. Prior to this year I'd listen to one-offs but I was never a weekly, or even monthly, listener. But recently I find myself listening to podcasts while coding. Mostly code and web podcasts, and occasionally other topics. Can't say I listen intently, but I do pickup on various topics, libraries, and ideas, and look into them. Here's my current playlist of JavaScript and web development podcasts, in no particular order: Codepen Radio JavaScript Jabber ShopTalk Show The Stack Overflow Podcast 5 Minutes of React NodeUp The Big Web Show The Web Ahead CTRL+CLICK Cast

Read more