Something I wish I knew 7 days ago…

Before I began migrating my Express with Pug (the template/view engine) to a server side rendered React app, I wish somebody told me this one thing:

“For anything that is going to show HTML, you are always going to make sure that React Router is in charge of making that request”

This one line of spoken word would have saved me in excess of 20 hours.

I do not regret those 20 hours that I did spend trying to essentially integrate React with Pug and somehow render React server side. Those hours were, in fact, well spent. But I was deep down a rabbit hole. It wasn’t until my mentor blocked javascript in the browser and tested my application to see if it still rendered that I fell into that hole!

Anyway, now I’m learning how to do things properly by watching this course. The main takeaway here is that you cannot server side render react components based on Express routing. It just doesn’t work. Express routes need to explicitly cover one-off routes that cover routing logic such as outside requests, API handlers, or handlers that return JSON. The rest, as they say, is React.

 

React isn’t easy to learn…

Wow… It’s been a while since I’ve posted. Anyway, now I’ve graduated and I’m running my business full time. And over the past few months I have been learning React. When I started learning, I thought it was a easy. “It’s basic, simply importing components here and there,” I said to myself. Little did I know the extent to which you can develop complex software, and the sheer flexibility it gives you. Let’s not even begin with Redux and state management. I’m still learning how to properly build with React! The more I learn, the less I know. It’s extremely flexible, I love it.

Where would I start if I could go back? I would start with React for Beginners by Wes Bos to learn the foundations, and then I’d move onto implementing it with an Express server backend.

After learning for a few months, I’ve decided to integrate it with my old abandoned project, campusxchange. This project is a fully fledged Express app with Pug as the templating engine. Now I will rebuild the shop in React and most likely the user administration panel in React too. Not sure how it’s going to go, but I’ll certainly let you know in a few weeks!

PS. I built my first React website – tay.codes – and uploaded it to Heroku. The contact form uses state to show as submitted. That’s about the only use case for state I had, but I’m sure there’ll be more when I rebuild campusxchange!

If you’re interested in building an application or a website, please do not hesitate to contact me. I am proficient in JavaScript, and am consistently learning to code whether that’s PHP, JavaScript, HTML or CSS. You can also contact my company for any digital marketing needs you may have such as social media services, Search Engine Optimisation or Google Pay Per Click.

Which is better for unit testing?

As I mentioned in my last blog post I am going to be testing my fairly big JavaScript application which is built with the Express web server framework. As with most things related to coding, there are lots of ways to go about testing your web application. The most sensible thing to do is use a testing framework or library, instead of writing them in vanilla JS which would take forever! A few that come to mind are Mocha, Chai, Jasmine and Jest (which I learnt about today). Jest is a testing suite for JavaScript applications, created by Facebook, and is the one I’ll be using. You can learn more at https://facebook.github.io/jest/

In addition to the above, there are many different types of tests I’ve heard of so far – end-to-end, logic, page, cross-page, link checking, integration, unit, etc. I’m no expert but I think unit testing is the way to go.

My journey started with Jasmine as the testing suite because that is the test suite you use on exercism.io. However, I had also read about Mocha and Chai together. Now I know Chai is not a test framework but rather a helpful library that can be integrated with a test framework of your choice. So this is definitely something I’ll be looking more into. My journey has now led me to use Jest because after lots of searching and asking questions, I never really found any good resources on how to unit test an Express app with Jasmine.

Most of the tutorials or blog posts I watched/read required that you ‘set up and teardown’ your express server before each and after each test. After running into lots of errors I decided to try a new framework – Jest, which was suggested by @zachcodes (a 10x software dev). When I found out it was Facebook’s test suite (which they use to test Facebook, obviously), I was certain it made sense. Anyway, I created a quick Gist on Github of how my test suite has begun (oh and it works! yay!)

https://gist.github.com/leafyshark/ec9e38fb06cb0624e7312dede4666bd2

The magic of Express.js

You know what I love about Node.js?  Express.js!

I’ve really been getting into Node.js lately, and I have not stopped enjoying it. I am building a fairly big application with Express.js and so far so good. Every month or two I get around to cleaning up the codebase and find myself feeling proud of it. I’m still learning more and more about Express.js, and this enables me to continuously be more organised and write cleaner code.

I get a kick out of how unopinionated it is. You structure it how you like, and that’s the beauty of it. It makes working with the backend a joy. I’ll always use Express.js and I will be an expert at it in a few years, I guarantee that.

I’d also like to put it out there that I will be learning about testing Express.js servers and about the best ways to secure your Express.js application. I will share my learnings here. More on this at a later date!

Realtime bidirectional event-based communication

Recently I’ve been developing an app using Socket.io. I had the idea when I heard about the Dot Collector app. This intrigued me and, more to the point, I thought “I could build something like that!”.

I take every project on as a learning experience primarily, and think about the business objectives later. It probably isn’t the best way to think about things but at this stage in my web development career, I just want to learn!

One of my weaknesses when it comes to starting projects is finishing them. It is something I will definitely work on in the future.

However, this application I’m building at the moment is going well and I do think I’ll finish it. One thing I did differently this time was, instead of designing it first, I went straight in to getting the functionality down first. The app looks terrible, but it works. Eventually, when I’m done with all the functionality, I’ll start designing it.

Understanding the prototype chain in JavaScript

I’ve been trying to solve a challenging problem on exercism.io all evening. This “grade-school” challenge is a tough one.

Given students’ names along with the grade that they are in, create a roster for the school.
So in the end you return an object with keys 1-7 and with each persons name under their grade. The idea here is to save data on the fly, which can get a bit fiddly. First of all I had to figure out how to save data on the fly, and researching that on Stack Overflow wasn’t giving me much good information. I now understand that arrays are the only JavaScript variable that are special and can hold more than one value at a time.

Now, this isn’t simple, because on each method call i.e. school.add('Blair', 2) I had to save this information in an array and then convert the completed array into an object that only contains keys 1-7.

So, for example, how would I convert:

var array = ['Blair', 1, 'James', 2, 'Paul', 1, 'Bob', 3, 'Jane', 2, 'Sam', 1]

into:

{
1: ['Blair', 'Paul', 'Sam'],
2: ['James', 'Jane'],
3: ['Bob']

}

Furthermore, how do I call school.roster() to return the above object when school.add() is the method that saves the values into the array?

I’ll explain how… But to do so, I first need to show you how my code was initially when I thought I had to create a function like this:

function School() {
this.add = function(student, grade) {
// code my heart out
this.roster([student, grade] || {grade: student})
}

this.roster = function(value) {
// somehow pass the array or object from this.add to this.roster? Bad move
return value // ??
}
}

However, this would always return undefined because the values stored in the array would only be saved on the fly within the School function. Instead, the proper way to do it (I figured out) is to add these methods to the prototype chain as follows:

var School = function() {
this.arr = [];
}

School.prototype.add = function(student, grade) {
this.arr.push([student, grade]); // for example
}
School.prototype.roster = function() {
console.log(this.arr);
}

now when I do the following:

var school = new School; // create a new object with the this variable pointing towards it
school.add('Blair', 2);

It actually saves the information on the School object so I can access it anywhere on the prototype chain on the fly like so:

school.roster() // ['Blair', 2]

Still haven’t finished the challenge so I’m gonna crack on and will upload a link to it when I revisit this post.

Oh wow… ⌥

In VS Code, you can highlight some code and hold down the ⌥ option key and press up or down. This is one of the simplest and most powerful techniques I’ve learnt in a long time. Wow.

A boilerplate for app development

Check out my GitHub page to find all the code I’ve been working on over the last few months.

I’m giving you a link to my latest boilerplate for building a web app.

Ideally you need to have an understanding of Gulp, PostCSS, Pug, Express, Model View Controller (MVC), maybe some JavaScript and Webpack.

For those of you who are familiar with pug (formerly known as jade), express.js and node.js and are interested in building your own application, then here is a build for you to start with. Simply pull the repository or download it to your local machine, enter into the main project directory within the terminal and type ‘npm install’ and wait for the packages to install. Then type ‘gulp watch’ and boom! You’re set to start coding.

You’ll be synced with the browser, so the browser will refresh and all files will be compiled upon saving.

All of the directories you’d need to edit yourself are in the ‘public’ folder.

Enjoy 😊

The importance of reflective thinking, writing and learning

I’m going to be focusing heavily on reflective practices alongside psychometric testing over the next 6 months as I transition into full-time employment for a second time. I am currently in the process of writing a continuous professional development plan and this will be accompanied by lots of reflective writing on selfauthoring.com.

I will critically analyse psychometric tests as I go.

My goal is to become more clear as to what it is that I truly desire in life and career.

Who is Jordan Peterson?

My friend recently told me about a website called selfauthoring.com – it’s essentially a website where you can journal about your past, present and future in great detail based on some questions. I am yet to take the self-examination but look forward to doing so.

The creator is a guy named Jordan Peterson. He is currently the professor of psychology at the University of Toronto in Canada. Peterson is highly academic and his background makes him a credible source. You can check out his background and education here. Along with the self-authoring suite you gain access to a journal written by Peterson. Here is an excerpt I found particularly interesting:

The first time I heard of Peterson was on Joe Rogan’s podcast (JRE), although I didn’t think much of him because usually I just listen to Rogan’s podcast for entertainment rather than education.

Once my friend had bought the self authoring examination for the both of us, I was curious to find out more about the creator. I watched his ted talk where he talks about human potential and the importance of having interests and meaning in our lives. It blew my mind. It was one of those refreshing ted talks. It’s one I’ll watch again from time to time.

Peterson is very opinionated. He recently caused an outcry in the LBGTQ community because he slammed the idea of gender neutral pronouns. Aside from that, he seems like a pretty awesome person. I’d recommend having a look at his videos. I think he’s a great storyteller and definitely wouldn’t call him ‘boring’.