Understanding higher-order components


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

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 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.

Composition in JavaScript


JavaScript is a very expressive language and is one of the main reasons I enjoy using it. One amazing feature is the ability to create and inherit from objects without classes and class inheritance. Using compositional tactics we can piece together multiple objects to form new ones.

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.