A -post collection

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

Adding SSL to Ghost on DigitalOcean

This morning I went through the unexpectedly pleasant experience of adding an SSL certification to this site. Turned out to be much easier than I planned on, and there was only one small hiccup I was able to resolve quickly. I opted to go with a free Let's Encrypt SSL/TLS Certificate and use the automated installation from certbot. The certbot instructions were straightforward and only took a few minutes to complete, but did result in one issue, so here's a quick tutorial on how to add an SSL cert to your Ghost site quickly. First, a few specifics about my current setup: Ubuntu 14.04 (trusty) Nginx 1.4.6 Ghost 0.11.10 Hosted on DigitalOcean Install the necessary packages sudo apt-get update sudo

Read more

Modifying Body Attributes in React

Quick tutorial on how to add attributes to the <body> element within a React app. There are many use cases for this - the primary being to add a class (e.i. <body class="some--class">, and it works for any other attribute. The reason this is needed is because the <body> lies 'outside' most React apps. The recommended setup for React is to add a <div> within a page's <body> where your root component will be rendered, like this: <html> <head> </head> <body> <div id="root"> <!-- Root Component --> </div> </body> </html> Add

Read more

PunkAPI Javascript Wrapper

This weekend I created a Javascript wrapper for the PunkAPI - an unofficial API for querying beers from the BrewDog DIY catalog. Even if you're a developer some of that might not have made sense. BrewDog is a brewery, started in 2005 in Aberdeen, Scotland, who now operates dozens of beer bars around the world. They recently broke into the U.S. market with a brewery in my hometown of Columbus, Ohio. They produce great beers and make the recipes for past brews available through the DIY Dog website. There's no official API for the DIY catalog so @samjbmason and others scraped the info from the DIY website and created an unofficial API. Their API is accessible via HTTPS and is CORS-enabled, meaning it will work

Read more