In Defense of Tutorial Hell (and How to Escape It)

Ahhhhhhhhhhhhh!

Tutorial hell! It’s a terrifying, terrifying place to be as a developer

Or…is it?

I am on the fence on if being in tutorial hell is really as bad as the internet makes it out to be.

What Is Tutorial Hell?

“Tutorial hell” means participating in tutorial-based content to create projects or apps. Most of your time is spent building what other people are telling you to build, instead of new, original concepts.

Now, I’ll dive into my thoughts on the good and bad aspects of tutorial hell

The Good

As someone who is mostly a self-taught developer, I 100% get the appeal of tutorials. They are a good instructional device to learn or get familiar with a new framework or programming language.

An example I like is the tic-tac-toe game as part of the Intro to React documentation. The tutorial says, it well, in why you should rethink skipping the tutorial.

We will build a small game during this tutorial. You might be tempted to skip it because you’re not building games — but give it a chance. The techniques you’ll learn in the tutorial are fundamental to building any React app, and mastering it will give you a deep understanding of React.

Yes to learning the fundamentals before diving into the more complex aspects of React! Since tic-tac-toe is a relatively easy game to play, and most people know how to play it, it’s a good reference for building on the fundamentals of React (or whichever framework, language, etc you are trying to learn). Someone going through this tutorial can focus on “how do I pass props again?” instead of having to come up with a brand new concept (which is like having to learn two things at once).

Another point I would like to make is that tutorials (like building a simple game) are great for people to learn concepts better by doing, as opposed to reading documentation. I’m one of those people and have no problems going through a tutorial to help solidify core concept when I feel like am lacking in that area.

The Bad

From my perspective, there are two less-than-ideal aspects of doing too many tutorials

  1. You are jumping around to too many things / not going deep in a topic
  2. You end up with a lot of small projects that look very similar to everyone else

Jumping Around

I’ll start this off with a positive note. Doing multiple tutorials in multiple frameworks/languages/etc is fine. You’re allowed to try different things, to change your mind, to find a tutorial that helps you learn what you want to learn.

Where the problem tends to pop up, is that tutorials are—usually, but not always—aimed at a beginner/novice skillset. Again a tutorial as a learning tool is great. But you’ll get to a point where you’ve learned that all you can from tutorials and need to start deepening your programming knowledge.

Again, as a mostly self-taught person who codes, I’ve done a lot of tutorials. I love them. Sometimes I do them for fun. But for the longest time, I felt like I stuck in learning the “100 levels” concepts, but did not know how to move to the “200 and 300 level” concepts.

Your Project List Looks Like Everyone Else’s

There are strong opinions on either side if it’s ok to showcase tutorial apps or projects in your portfolio. On one hand, showing that you know how to code a thing in insert-cool-framework is great, especially if you are getting started or trying to break into tech. I’d argue that some work to show is better than no work to show.

At the same time, yes you can code a thing, but employers or hiring managers may not feel the same way. Without supporting context, it can be difficult to tell how much code was provided as part of the tutorial versus how much you coded.

And if you did code it. What does that mean? Did you type it line for line as it was explained in the tutorial? Or did you go off a prompt—like, create a function that returns a random integer—and figure out your own solution?

Think about it this way. Do you understand the fundamentals of what each line of code does and why it works? Or just that it does work and you can’t articulate how it works?

Escape From Tutorial Hell

I’ve talked a lot about the ehh and ok aspects of doing tutorials. If you’ve come to the conclusion that you are trapped in tutorial hell, but aren’t sure how to escape from it, here are things to think about.

Update: 11/21/2020

The list of ideas on what to add to your tutorial projects was getting log, so I’ve broken it out into its own blog post. Planning Your Escape from Tutorial Hell

Queer Eye Text Effect in HTML & CSS

There’s never enough episodes of Queer Eye.

😭

To hold me over until the next season airs, I wanted to revisit the logo and see if I could recreate it in HTML and CSS.

The Logo

The logo effect has a couple of different elements that I need to figure out.

  • Matching the font
  • Picking the colors
  • Offsetting the colors

Fonts

The font used is likely, a custom, sans-serif font. What makes it interesting is that the e is stylistically a lowercase e and the Q is uppercase. Yet, visually have the same weight, stroke thickness, etc. Finding a free font that matches that may be difficult, so for now, I’ll focus on finding a typeface that has the same vibe.

Kumbh Sans in Google Fonts has the modern look that I’m going for, so we’ll roll with it and fix the e later if I can. With our “QE” in an <h1> tag, our CSS will look something like this.

h1 {
            font-family: 'Kumbh Sans', sans-serif;
            font-weight: 300;
        }

Which renders something like this.

Colors

Looking at the logo above, it seems to be made of blue, pink, yellow and black, which the yellow and blue having some transparency to make a bright green. Let’s set up our color variables.

 :root {
            --blue: rgb(0, 191, 255);
            --pink: rgb(255, 20, 147);
            --yellow: rgb(255, 255, 0);
            --black: rgb(0,0,0);
 }

With color variables, we can reference them like this color: --var(yellow).

Offsetting The Colors

The fun part!

Each of the colors is offset a little from the main text, but only to the left and right. We can get this effect by using a text-shadow. Let’s do the first color.

text-shadow: 5vw 0 var(--pink);

Now, for the other colors. You can specify multiple text-shadow effects at once, by separating them with a comma. Let’s add the rest of our colors and see how it looks.

text-shadow: 
     5vw 0 var(--pink), 
     10vw 0 var(--blue), 
     15vw 0 var(--yellow);

Trippy.

Not quite the effect we are going for, but it’s getting close. I’ll make some adjustments to the text-shadow arguments, so that they shift to the left and right of the black text, without straying so far away.

By default, the first value of, the X-coordinate, how far to the right the text-shadow starts. A negative value can be used so that the shadow starts to the left.

And since most of our colors overlaps, rearranging the order of the text-shadow properties, allows all the colors to show through.

text-shadow: 
            2vw 0 var(--pink),
            -2vw 0 var(--blue),
            -5vw 0 var(--yellow);

Nice!

At this point, we’re only missing some green, created by a semi-transparent blue and yellow blending together. The opacity may take some tweaking, so I’ll add that as a variable that I can then reference in the --blue variable.

:root {
    --opacity: .75;
    --blue: rgb(0, 191, 255, var(--opacity));
    --pink: rgb(255, 20, 147);
    --yellow: rgb(255, 255, 0);
    --black: rgb(0,0,0);
}

Putting it all Together

And our end result looks like this.

See the Pen Queer Eye Text Effect by Shannon Crabill (@scrabill) on CodePen.

Yasss!

Antoni, Tan, Karamo, Bobby, and Johathan would be proud.

Resources

Switching from Sqlite3 to Postgres

Let me tell you, I had been avoiding making this update for months. It seemed hard and scary and I was afraid I would break something. But you know what?

It was kind of a mess, but not as much of a mess as I thought it would be.

There are a lot of tutorials on switching your Ruby on Rails (Rails) database from sqlite3 to postgres. However, I did run into problems that were not covered in the tutorial I was reading at the time and have to find another one or a one-off solution.

There may be others who run into issues like I have, so I wanted to document the issues I had and possible fixes.

Postgres just won’t install

🤷🏾‍♀️

The first step in most tutorials I followed was to remove the sqlite3 from the Gemfile in your backend and replace it with Postgres.

In my Gemfile, it looked like this. 

gem 'sqlite3', '~> 1.4'

I’d replace it with this.

gem 'pg'

Then run bundle install to install the gem.

Except, it just wouldn’t install. I kept getting a wall or red or yellow console logs, starting with something like this.

Failed to build native extensions...

Yikes.

I tried doing a global install of the gem, but got a similar error.

After several months of avoiding trying to find a solution for this, I asked for help and got a link to a Stackoverflow question that echoed the same issue I was having.

Installing PG gem on OS X – failure to build native extension

And the most upvoted answer to install postgres with homebrew worked for me!

Here are the steps.

  • Install another build of Xcode Tools (typing brew update in the terminal will prompt you to update the Xcode build tools)
  • brew update
  • brew install postgresql

After that, running bundle install ran successfully. 

Bundle complete! 13 Gemfile dependencies, 58 gems now installed.

Web Page Redirects with .htaccess and Apache

When I’m presenting at a conference, or sharing a project on social media, I like to have a short, easy to remember URL to share. 

While it may not be the easiest way, what works for me is creating a URL redirect with whatever short, easy to remember the link I want, to the long-form blog post, landing page, etc. 

For example, back when conferences were held in the physical space, I would host the slides for my talk, related resources, sample code, etc as a blog post on my website.

The slug or full URL for the blog post was usually the title of the talk plus the name of the conference or year. While this was a good idea from an SEO perspective, it sometimes made for a long URL that is difficult to fit onto a presentation slide. 

Instead, using a web page redirect, I could use shannoncrabill.com/conference-name in my presentation which would direct viewers to the full blog post or resource.

Here’s how I did it. 

Setting up the Redirect

With my current set up, I have access to the root directory where my personal website is hosted. This is where a .htaccess file will live, which allows the Apache webserver to do the work for us. 

The dot . at the front of the .htaccess file may mean you may have to turn on show hidden files in your FTP client. If one does not exist, you can create one. If you already have one, you can add new redirects to the same file. 

Creating the redirect has three parts. 

  1. The keyword Redirect and HTTP status code (301 in our case)
  2. The URL or domain that you want to redirect from
  3. The URL, domain, subdomain, folder, etc you want to redirect to

Let’s say, I wanted the URL shannoncrabill.com/poodle to redirect to a blog post with the URL shannoncrabill.com/why-poodles-are-the-best-and-worst-dogs-ever, I’d add a line to my .htaccess file that looks like this. 

Redirect 301 /poodle https://shannoncrabill.com/blog/why-poodles-are-the-best-and-worst-dogs-ever/

The HTTP status 301 signals to that the requested webpage has been moved permanently. It would be suitable to use if your entire site was moving from one domain to another or in this case if we want to redirect to a specific page.

Once the .htaccess has the updates you want, push it live to your webserver, and give it a test. 

What I like about this approach is that it gives me control over the URL’s that are getting shortened as opposed to using an external service.