Parallax Effects Don’t Have To Be Annoying

Note: This is part one is a series where we will go from idea and hacky code to a generalised abstraction that we will publish as an open source library on NPM

I’m not gonna lie, parallax websites don’t have the best reputation in certain circles, and rightly so. Too often the parallax effect is achieved through some kind of hijacking of the user’s scroll position on the page. This just leads to an awful experience that makes many hate the concept. However, there are plenty of good examples of this effect all over the internet.

The key to a good parallax website is a website where the user controls the scroll entirely but the scroll position directly informs what should be on the page. In other words, what is displayed on the UI is a pure function of the scroll position. Then the experience feels good. Almost as if scrolling through the page is like scrubbing through a video timeline. The website becomes a canvas for an interactive video type of experience. …


Debug() — The Death Of Ctrl+f

If you are anything like me, you have wasted countless hours of your life using ctrl+f to find functions inside your code. If you only have one file, ctrl+f is still going to be your best bet. But as soon as you start dealing with many files, the debug() method becomes a life saver!

This post will be continuing with my Javascript debugging series. If this is the first one you are seeing, you may be interested in some of the others as well.

This isn’t going to be a long one today. …


Little Known But Powerful Tool — console.trace()

A while ago I released a post and a video about using console.table as part of your JavaScript debugging arsenal. I got a great reception from it and many people said they where shocked it wasn’t more well known. So now I shall continue that with console.trace.

This post is part of my series going over some more of the powerful tools at your disposal — check out another one about console.table

Starting off, I just created a simple HTML structure that will allow us to call a JavaScript file. This isn’t interesting, but I’ll show you the code anyway.

<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>Console.Trace</title>
</head>
<body>
<h1>Experimenting With console.trace()</h1>

<script src="script.js"></script> …

Just In Time — Console.time

I have seen some amazing ways of timing how long JavaScript code takes to run. Taking timestamps and comparing them is a common way. But console.time is method in the console API that allows you to do exactly that with not other hassle.

This isn’t the first JavaScript debugging tip I have given. You can check out console.table and console.trace, if you haven’t already.

Starting off, here is the very boring HTML that I started with.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Console.Time</title>
</head>
<body>
<h1>Experimenting With console.time()</h1>

<script src="script.js"></script>

</body>
</html>

Let’s Take Our Time

If we want to time how long a bit of code takes to run, we will probably want some code that takes a bit of time to run in the first place. No point timing how long it takes to add two numbers together. …


Is console.log The Only Option?

Like me, many of you probably use console.log() to debug your JavaScript code a lot of the time. The problem isn’t big enough to require the setting of breakpoints but you don’t want something intrusive like alert().

Console.log() is great for that. But is it always the best solution?

Let’s Put Everything On The Table

Some of you may already know about console.log()’s lesser known brother, console.table(). Although, I would take a guess that many of you have never heard of it. I certainly hadn’t heard of it until relatively recently.

I don’t really know why it is such an obscure thing because it is extremely useful. …


This is part 4 of a 4 part series on building an API in Express I posted over on my website.

MongoDB to the rescue

So we have our API routes and we have our data. Next step is to add in the database to actually store our data. In this tutorial we will be adding MongoDB to the project.

MongoDB is just one database we could choose from. There are many different types. Another Popular one is MySQL. In this case I have chosen Mongo purely because of the easy with which we can set it up and get going with it. Something like MySQL is actually a better choice in a lot of cases but it is notoriously hard to set up. For our little application, MongoDB is perfect. …


This was originally posted on my website: Serving Data With ExpressJS

Getting our data on

In the original AngularJS quiz app tutorial I just pasted the data we used for the facts and quiz into the data service. This series is obviously dealing with the creation of an API to serve that data. That would involve storing the data in a database and fetching it when the user requests it.

The database is something we will cover in the next part of this series. For now I am going to take the same data we had in the data service and paste it into a file on the server that we can pull from and serve via an API route. …


This is part 2 of a 4 part series where we create an API in express. It was originally published over on my website: Using ExpressJS Router

I don’t want one long file

Some of you may be thinking that things may get pretty messy if we have to put all of the app.get and other request handler code into a single file. What if we have an api with 1000s of routes? That is going to get real messy real quick.

Fortunately, the wonderful people that develop express understand this and gave us something called Express Router. In a nutshell express router allows us to create self contained sections of code that deal with request handling for certain routes and then mount that self contained chunk of code into the app in whatever way we see fit. …


This is part one of a series originally published on my website where we build an express JS API

Getting Started With Express JS

A while ago (probably too long, i’m sorry) I made a tutorial that showed you how to make a quiz app in AngularJS. That tutorial was entirely focused on the front end and hardcoded the data. This time we will take that data and build it into an API for the quiz app to consume.

While I will be using the data from the quiz app, no prior knowledge of the app is required to complete this tutorial, so even if you haven’t seen that tutorial feel free to continue with building this API. …

About

Adrian Henry

Lead engineer by day. Indie hacker and tinkerer by night. Occasional teacher on hungryturtlecode.com

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