When Facing Challenges While Learning Tech

It happens to every one of us. You are writing some code, minding your own business, then… you get stuck. You don’t understand something about the technology you are using, it doesn’t understand you, or there is a syntax landmine somewhere in your code that blew up 💣.

No matter the case, in this post I will challenge you to reflect on how you handle this situation. I will also challenge you to view this situation differently.

Ready, Set, Stuck!

I have been coding and getting stuck for over three years now. I wish I could say the my frequency for getting stuck has lessened, but that isn’t the case. Even as I get better at coding, I take on progressively harder concepts and technologies, so I get stuck in new fantastic ways. Getting stuck is just the price of admission for coding.

So what to do about it? Reflect on past experiences and identify behaviors that led to you solving problems. You are going to keep getting stuck, so you might as well get better at getting unstuck.

My Reflection

When I get stuck while learning some tech or coding, I have a bad habit of digging in, being stubborn and not taking a break. I so badly want to make progress and really believe the solution is moments away. The problem with this is I spend a regrettable amount of time moments away from a solution.

The funny thing is, stopping coding is usually what leads me to getting unstuck. I will be doing a completely different activity when I have a thought about how I can solve a specific problem. I guess my brain just needs some time to continue working on the problem in the background, while I use less of my mental faculties.

I have noticed that I have a harmful response to getting stuck and a positive response to getting stuck. The hard part will be doing more of the latter and less of the former.

Different Way of Viewing This Issue

Getting Stuck Is Making You Smarter. I am not just trying to make you feel better about the fact that you will continue to get stuck.  I believe getting stuck will make you smarter and will build your confidence. Each challenge you face is an opportunity to learn something new. And, when you overcome the challenge, you can add the situation to a long list of instances where you were a victorious learned computer scientist.

In sum..

Everyone get’s stuck coding. I am writing this post because I have been getting stuck all day while custom styling with Material UI. I challenge you to learn how you typically solve a problem after getting stuck and develop a plan to replicate this behavior. Also, I challenge you to reflect on many of the problems you have solved, it’s not a bad idea to cheer yourself on every once in a while.

– The Coding Hotdog

Endless Bad Design Iterations

Pretty much how I would describe my frontend web development until recently. In more detail the process would go like:

1. 1. Get excited about building 
   some website.
   2. Choose a tech stack & 
   get started.
   3. Build site structure & 
   start styling the home page.
   4. Keep styling until I'm 
   happy with how it looks.
   5. Never become happy - 
   CHASE MY TAIL - get nowhere.

   Does this happen to you? My issue was that I was unwilling to make bad sites, but that is all I kept doing…soul crushing.

   

Salvation From a Youtube Video 🙏

No I am not preaching (although I do know Jesus lol). My favorite web dev’ YouTuber, Brad Traversy, hosted a web designer in a video teaching web design basics for developers. I knew the guy was speaking my language when he used used a Javascript function to teach design.

goodDesign(color_contrast, 
white_space, scale, 
visual_hierarchy,typography) {
}

Just applying these principles helped me make way better looking sites. Best of all though, I finally got my tail. I am going to go over these principles in the following paragraphs, but I won’t get my feelings hurt if you just go watch the video. It’s pretty great.

color_contrast

The purpose of a website is to communicate information right? So why make your text barely visible. This is obvious, but it is soooo easy to mess this up. So, let’s be decent humans: put light text against dark backgrounds and dark text against light backgrounds.

white_space

Do you like feeling like you are crammed in an elevator (pre-covid) with max occupancy? No… yea I don’t either. When you don’t allow for space between elements on a page, this is how your make a site user feel. Notice on this post, I make sure to properly use headings so there is consistent space throughout the post. The effect is my post is more readable. To make my final point, just look at this site. Take a deep breath before you go there, though.

scale

Does the size of the element make sense? Is it too big or small? If it is, it’s just gonna look bad. You kinda have to eyeball this one. One thing that helps is thinking about the size of an object in relation to other objects (I think that is the definition of scale 🤣). Is the button bigger than the text asking you to press it?

visual_hierarchy

Back to the point of a website’s purpose. Yes, it’s all about communicating info, but some information is just more important. Here is an unnecessary example to demonstrate my point.

Someone walks into a room and only stays for 10 seconds. You are there and you are selling paper to them (at or near Dunder Mifflin). With such little time, you need to be precise with the information you give them. You can’t go on a tirade about Bears. Beats. Battlestar Galactica. No, you’d probably mention a discount.

Visual hierarchy is all about using the size of elements to communicate importance. That doesn’t mean just making the important things huge. You make some elements smaller TO HELP EMPHASIZE OTHERS 👀. If a user is going to only see three things on the site, encourage them to see the stuff you want by being precise with sizing.

typography

Some fonts just look good. Design is concerned about making things look good, and if you have read this far, it’s fair to say you care about design (and making things look good). The tips I learned were to avoid overused fonts like Times New Roman, sticking closer to Sans-serif, and to be consistent with font types.

Yay, we done.

In conclusion, you can do it. I made some pretty laughable sites before learning these principles but I have gotten pretty decent at design now. And, I really only internalized three of the principles I went over – white space, visual hierarchy, and scale. Take care.

– The Coding Hotdog

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

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?

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

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