Next.js is Great, fur real.

Love at First Site (had to)

I have always wanted a React.js framework. I love making awesome user interfaces with React and I thought a framework would make that experience better. I essentially wanted more bells and whistles and I found them. Queue Next.js.

In this post I am not explaining every aspect of Next.js, that information is here. I will talk about what gets me excited about Next.js, though.

Search Engine Optimization

You don’t know what you don’t know.’ Cringy saying right? So what I didn’t know was the downstream effects of how React renders site pages: client-side rendering. So, if a user tries to access a specific page on a React site, they will receive a minimal HTML file with Javascript files. The browser then loads the content from the Javascript files into the HTML file. Because the client only has to query the server initially, navigation between pages is fast and at no expense to the server. This makes the website feel fast, which is why I love React.

Unfortunately, I found out sending the minimal HTML file is possibly an issue for search engine optimization (SEO). Search engines index sites for rankings (first, second, third page results) with web crawling bots. For instance, a Google bot’s first pass to index a site focuses on consuming content within HTML files. So as we just talked about, with client-side rendering, they won’t be consuming anything. Although, a bot does a second pass for site indexing, and is supposed to reach the content loaded from the javascript files, it is debated if it is effective.

Pre-Rendering HTML Pages for SEO and Performance

By default, Next.js pre-renders every page. So, in advance of the client receiving an HTML file, Next has already generated it full of content. You can either statically generate the HTML file at build time or when a client makes a request to the server. Either way, the client will receive content within an HTML file, which makes it fully available to a search engine bot.

Statically generating HTML files at build time also allows for a very fast user experience. The server doesn’t need to be queried and no content needs to be loaded in the HTML file. Even if the site pages rely on external data, Next has special serverless functions that will generate the data needed at build time. It will also generate the content for dynamic paths (e.g., blog/post/1, blog/post/2) at build time as well.

You are also not tied to pre-rendering and are able to use both server-side rendering and client-side rendering. Right now I am thinking of a use case for my school project, where I would want to hybrid the rendering options. For a marketplace-like app, I would pre-render statically generated sale post pages, but client-side render sale category pages. I would do this for the category pages because a user will populate different sale posts based off of many search criteria. I can get speed and SEO for all sale pages and I get to minimize use of my server with sale category pages by having the client’s browser do the heaving lifting.

File Based System Router

How have you handled site routing for your React.js Apps? I have always used React-Router, which would end up looking something like this:

import { render } from "react-dom";
import {
  BrowserRouter,
  Routes,
  Route
} from "react-router-dom";
import App from "./App";
import Hotdogs from "./routes/hotdogs";

const rootElement = document.getElementById("root");
render(
  <BrowserRouter>
    <Routes>
      <Route path="/" element={<App />} />
      <Route path="hotdogs" element={<Hotdogs />} />
    </Routes>
  </BrowserRouter>,
  rootElement
);

https://reactrouter.com/docs/en/v6/getting-started/tutorial

Yea, Next handles all this for you. And it does it in a manner that helps you organize the structure of your code base. If you want to have a specific route to a page, you simply create a Javascript file under the pages directory that was created at project install. Inside the Javascript file you return a react component and THAT is where the magic happens 🦄.

In sum..

I had a fantastic experience creating this site with Next.js. I optimized the site for search engines, achieved an amazing performance rating, and thoroughly enjoyed the out-of-the-box routing feature. Hope this post was helpful; until next time.

– The Coding Hotdog

Let Your Dog Play Candy Crush

Dog Computer Interaction (DCI) – the future!

Okay, so a bit dramatic, sorry. I am just pretty excited to see a study focusing on improving the lives of dogs with technology. The objective of the study was to create mental stimulation in dogs, especially during aging, for better well-being! They did this by training dogs to interact with an iPad like device for a positive experience (treats!). In this post I am going to tell you about how they implemented this study, the tech behind it and the outcome.

So what did they just give dogs some iPads?

Credit: Lisa Wallis

Actually it was a whole, incredible thing. Over the span of a year, 130 dogs and their owners traveled to a lab for 30 minute weekly training sessions. Despite no financial compensation for the owners, remarkably, only 6 dogs dropped from the study. The training occurred in four phases. Let’ take a look at each of them.

Phase 1: Device Familiarization

This phase took about one to two visits. It essentially entailed introducing the dogs to the touchscreen device and the food dispenser. Once the dogs had no problem with approaching the device/feeder, they were introduced to the device software and phased up.

Phase 2: Screen Touching – Fixed Location (actually licking)

So maybe getting your dog to play Candy Crush might get messy at first. In this phase the dogs got plenty of snackies. They were brought to the device and observed an edible paste being smeared in a specific spot on the screen. When the dog licked the paste off, the machine beeped and dispensed a treat. Once the dog associated touching the screen with a treat, the dogs moved to the next phase.

Phase 3: Screen Touching – Varying Locations (with the NOSEY!)

This phase was much like two. They would smear paste on a spot on the screen and when the dog would lick it off, there would be a beep with a treat. Except, they practiced this with several spots on the screen and slowly reduced the amount of paste until the dogs just touched a stimuli on the screen without paste (with their cute noses). Once this happened they moved on to phase 4!

Phase 4: Discrimination Training

Here it is the final step, the dogs are ready for their big moments. Time for them to choose between two stimuli (I bet it was Candy Crush icons). When presented with the two choices, if the dog chose the positive stimuli, they got a nice beep and a treat. If they chose the negative stimuli, they got a red ‘time out’ screen for three seconds and a short buzz sound. Don’t worry, they immediately got another opportunity to do it right. So here we are, now the dogs are playing a game, and it went great. Of the 130 dogs, all but two passed this phase.

So Tell Me About The Tech Please!

If you are interested in a fabulous amount of detail, you can get that here. Otherwise the tech goes like this. Connected to a laptop, an infrared touchframe is attached to a computer monitor. The monitor is placed at head level for the dogs in a distraction eliminating box. Below the monitor is a treat feeder, think pellet dispense. (Note: there are instructions for excessive dog saliva making these monitors unresponsive 😂).

They employ CognitionLab (Version 1.9) software for their go/no-go experiments. This software can run on any operating system compatible with x86 architecture. CognitionLab uses a scripting language called Experimental Run-Time System (ERTS) created to document psychological reaction time experiments. It is said to be easy to use, and the code doesn’t looks so bad. Here is a sample from their site:

SCREENAREA 150 150

FONT STD Arial 6
FONT BIG Arial 10 1 bold
FONT Small Arial 4

PICTURE Inst_Title T Instruction
Instruction 
PICTURE Inst_Text Tl
Press left [SHL]-key when you see the word Left
Press right [SHR]-key when you see the word Right
...

So did the training make the dogs happy?

Oh heck yea! Well, the study found that the dogs had a positive association with the training, showing enthusiasm in anticipation of their weekly appointment. And, owners stated that the dogs would come home from the training and fall into a restful sleep, much like they would after a good exercise.  The study noted that the process of training the dogs revealed to the owners that their dogs could experience mental exercise, which prompted them to play mentally stimulating games with their dogs more. The conclusion of the study was that this type of training could improve the well-being of dogs, especially older ones, through cognitive enrichment.

So get your peanut butter and open up Candy Crush – it’s time to train your pup!

– The Coding Hotdog

Howl-o World!

Do you like dogs, hotdogs (hot…dogs?!), tech?

Cool! You are in the right spot. That’s what this blog is all about. Check out our lasted posts and hope to see ya around.

– The Coding Hotdog