Async Iterators and Generators in JavaScript


Async iterators will enable JavaScript engineers to read steams like lines of text from a web service or a file. It will be worth reading my previous post understanding sync iterators first before carrying on.

It may seem plausible for a for-of loop to iterate through lines in a file but ultimately it can’t execute until it has received the whole contents.

for (const line of fetchFile(fileName)) {

Iterators and Generators in ES6 JavaScript


What is a generator in programming terms? It is a special function that can be used to control the iteration behaviour of a loop.

For an object to become an iterator it needs to know how to access values in a collection and to keep track of its position in the list. This is achieved by an object implementing a next method and returning the next value in the sequence. This method should return an object containing two properties: value and done. It must have the [Symbol.iterator] as well, as this is key to using the for..of loop.

Higher-order components vs Render Props


Higher-order components (HOC) and render props are two ways to build cross cutting code in React JS. How do you decide to use one over the other?

Using promises, async/await and testing


This post has lots of code examples showing promises, async/await and unit testing async functions. There is a coding challenge at the end to test your learning.

What do promises solve in our code?

Whenever you wanted to resolve some data asynchronously it had to be done via a callback. In complex applications this led to “callback hell”, when the first data fetch was resolved another data fetch needs to happen afterwards. This would repeat a few times, creating a “nice” sideways pyramid in your code.

Promises mostly solved that problem by chaining. Each step resolved data and passed it along to the next then function.

Understanding React JS Render Props


In this post, I will discuss the why and how to use React JS Render Props.

Why use Render Props: Promote reuse of behaviour across React components.

If you have read my post on higher-order components this may seem similar. The React community has been working hard on solving reuse across components, and one common theme is passing data to children. However, we will focus here on how to use Render Props - and discuss the differences between HOC and Render Props in another post.

Composition in JavaScript


Let’s look at using composition instead of classical inheritance in JavaScript.

JavaScript is an expressive language and is one reason I enjoy using it. An interesting feature is the ability to compose objects from simple objects without inheritance.

Recycle tests in TDD and code kata


Have you ever written a unit test and it seems to take a long time to make green?

What is a long time, you might ask? In my opinion if you spend more than 5 minutes solving the test you wrote then you are in the amber zone that you made it too complex. If greater than 10 minutes then you need to simplify the test. Which might not seem like an obvious thing to do.

This exercise is to help unblock the solving of complex tests consistently and quicker.

Understanding React JS higher-order components


In this post I will discuss why and how to use higher-order components (HOC) with React JS.

Why use HOC: Promote reuse of logic across React components.

Components are the typical element for reuse in React but sometimes features don’t fit into this standard. There might be similar methods used to fetch data but maybe the display is different. An example of this is shown later.

Understanding React Relay


As with any new tech it can be overwhelming and confusing how all the parts work together. Especially with the combo of Relay and GraphQL. Hopefully this post will help demystify some things in Relay.

What is Relay: Data driven JavaScript framework used to efficiently handle data communication between a React and a GraphQL server.

Why use it: One typical issue found in an SPA are the number of network calls made to render a page. Quickly this starts to affect your server performance because the requests made can be high. Relay is focused around efficient network calls helping to mitigate this issue. Another good feature is the queries are close to the components making it obvious the data requirements.

Redux, keeping it immutable


Redux has reducers tasked with transforming the state across the application. They are pure functions, which is a function that does not modify variables outside of its scope or depend on them. They are given the same parameters and the output should be the same every time.

A faster web Delay JavaScript loading to last


The speed of a website is important to most users especially when they are looking for specific information. They won’t wait around long for your website to load for that information and will try find it somewhere else. One way to motivate the user to stay is to get some content showing that they can consume as soon as possible to give incentive that the rest will be arriving shortly. The common blockers that cause the long wait from a blank page to all of a sudden everything shows are CSS and JavaScript files.

Stored procedures and obscure errors messages


Recently found a extremely simple way to fix a problem in one of our projects at work in MySQL stored procedures. Hopefully saving everyone else the massive amount of time spent adapting the program to work.

Regex link removal script


Need to remove links from your content? This regex patten should do the trick.

Create your twitter feed using JSON


This is carrying on from a previous post Twitter Feed using JQuery JSON. Originally, I just used JQuery JSON method to query the Twitter API which got essential bits of a user profile and their time line. It only returned the latest ten results which is sufficient enough with the nature of twitter, tweets get old quick but some are worth checking again. With the Twitter API there is no guarantee to get the exact amount of tweets you requested. What is new in this revised edition of the twitter feed is it will now take the tweets and save a local version of it. This has plenty of benefits like quicker response when querying, view older posts, improved usability and you can customise the output how ever you like. Here is a list of what is new:

Execute JavaScript after images have loaded in


I found myself needing to run a script to make minor adjustments to the page based on the size of an image, to keep things tidy. The problem I was having was using JQuery’s $(document).ready the script was executing as soon as the DOM was ready which is too early. The other option is to use $(window).load which runs only when the whole page has loaded, guaranteeing that I will get the image width and I can make my adjustments. The script below is used to make the image caption the same width as the image.

Twitter Feed using JQuery JSON


The Twitter API allows you to access tweets, profile information and more. It has a couple of return types of data, I will be using the JSON format. If you are accessing the tweets that belong to a profile you don’t need authentication unless they are protected. In the documentation it will tell you if authentication is required to access certain data.

Insert else update


Here is something that I recently found very useful. If you have a table in your MySQL database which you want to insert a record if it does not exist but update the row if it does. MySQL 5.x has a very neat piece of script to handle this with out any conditional statements.

Hiding rows in a table using JQuery without breaking table


I was writing a simple JQuery script which filters out table rows based on class name.  When I used visibility:hidden; I noticed that when it was made visible again, the table looked slightly broken. To fix this instead of using visibility:hidden use visibility:collapse; and this keeps the table format correct when it is made visible again.