Sign in

Front end developer. Novice photographer, speaker and player of video games.
Photo by Soundtrap on Unsplash

I’m a bit unusual in the sense that I listen to podcasts only when I work. I like the sound of people talking to me in the background, it’s kind of soothing. I tend to listen to mainly game industry and tech, front end related podcast. This year many horrific events affecting predominantly black people in the US most notably the horrific public murder of George Floyd have brought to light the injustices people of colour around the world have faced for years. To make moves to correct some of this injustice more exposure has been given to content creators…

Photo by Andrew Pons on Unsplash

React is a very open component library and there’s no specific way to layout files. This can be a good thing for small projects but a bad thing (kind of) for very large projects.

I’ve come up with what I think is a decent way to structure files for large projects, not just react ones but all kinds of front end projects. This is something that I am suggesting for my specific use case but this might not be suitable for everyone. …

Photo by CDC on Unsplash

Hooks, context, redux, these are a few of the things frontend developers who use React know of quite well. They’re tools we use to make development easier but they can sometimes be quite difficult to test. Through testing multiple sites I’ve found a few techniques that have helped me test some of these difficult things more easily.

Why Enzyme?

There are lots of testing utilities out there for React and to be honest, it doesn’t really matter which one you use. I subscribe to Kent Dodds’ mantra of testing use cases over code which boils down to testing the ‘observable effect’ the…

Photo by bradley on Unsplash

If you do a quick Google search for ‘share methods between react components’, it won’t take you long to stumble upon a stack overflow thread similar to this one which would recommend using refs. Refs in React are a way to access React elements or DOM nodes that have been created in the render method. Basically, refs give you access to all the typical DOM properties of a component (value, class, id, element…) but for a React component, it can give you access to its methods, which is pretty cool.

Typical ref usage example:

class Parent extends Component {
testMethod() {…

This post is a continuation of a previous one if you’re coming here without going to the first post I highly recommend you check that one out first.

Go to Part 1 →

If you came here straight from Part 1 you should have a list of Rick and Morty episodes in your browser, if you don’t, (or you’re not bothered to go to part 1) you can make sure your code matches the project below.

Once you’ve got everything running we’ll jump right back to coding.

Some styling

I know I mentioned in Part 1 this tutorial won’t focus on styling but we’re going to do…

If you’ve been in the React world for a decent amount of time you would have heard about Redux. Redux is cool, it’s a way of getting separate components to alter and pull data from the main application store, but it’s not easy to pick up, especially for beginners.

There are these things called reducers, actions, and action creators. There are methods like mapDispatchToProps and mapStateToProps as well as a bunch of files and folders that need to be created for conventional reasons. For just sharing and changing data it is a lot of work.

With the introduction of the…

Hook by abdul wahhab from the Noun Project

**This is part of a FREE Udemy course here**

I created a youtube video series and wrote a few posts on how to set up a React and typescript project with webpack. Back then neither Babel nor create-react-app supported TypeScript. Now they both do, and it's much easier to install the JS superset, and there’s a new way of writing components in React versions above 16.7.0 — React Hooks. This is a perfect time to update the tutorial.

This post will go through, setting up a TypeScript project with create-react-app and using the useState hook for state. This guide assumes…

“boat on sea under white clouds” by Tulen Travel on Unsplash

This is a continuation of a tutorial that was started over here. I highly recommend you go through that tutorial before coming here or none of it will make sense. With that out of the way let’s continue creating our REST API.

A slightly better server

By default whenever we make a change we have to close and restart our server which isn’t great for development so we’ll change that now.

1. Our code thus far should look like this.

2. Amend the code on line 10 to look like this:

return Application(urls, debug=True)

3. Now close and start the server, if all…

“long exposure photography of hurricane” by Nikolas Noonan on Unsplash

I’ve been a front-end developer for a pretty long time now and I’ve worked a lot with REST API endpoints before but never knew how to create one. At Octopus Labs we use Python and Tornado to create endpoints, and for my 10% project time I decided to open this black box, and it’s not as difficult as I thought it would be. I decided to create a little tutorial for other frontend people who want to have a go at doing the same or just people who want to learn how to use Tornado.

This tutorial assumes you either…

Photo by Crew from Unsplash

Possibly the longest and most specific title in a tech related Medium post I’ve written to date. I had this exact issue a while ago and couldn’t seem to find any good posts or articles covering it so I thought I’d create my own for future front end devs that might have the same problem.

The problem

Saving a pdf as base 64 in the backend makes sense, but to the user it’s just a random combination of numbers and letters. Luckily html natively supports parsing base64 pdfs to normal ones and downloading them like so.

<a href="data:application/pdf;base64,[base64]" download="file.pdf">

Which works really…

Richard Oliver Bray

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store