I Am Now Doing This Thing For Real

I have recently joined the The Practical Dev as an apprentice software developer.

Remember when I said that good things were happening? That was one of the things.

Ben reached out in a Twitter DM and it kicked off.

I filled out the required application. We had a video conference yesterday and today they made the offer.

I can’t tell you how excited I am to be joining the team 1. This transcends just being in tech or having a career.

There is so much I would like to day, to be quite honest. There are some things I can’t or don’t want to explain but.

I have lived a miserable existence, from the day I popped out of my mom’s womb. She was an addict. I was adopted but that drug use left me with some residual side effects.

I spent my youth and teenage years in a very bad state. Emotionally I was a mess. I was a bright kid, a great student. Things came super easy to me. But because of trauma and emotional issues, I couldn’t really go to college after high school. I eventually went as a 24 year old. But, as it was, emotional issues, depression, angst. All that prevented my from being successful.

When I was 22 my grandmother died. She was my rock. She was in my corner, even when I was a little shit. She was there. She protected me.

I was in a place where I could remain safe when I was in my early 20s. I was poor and out of it. She died and I felt like I let her down; I wasn’t much of anything. I was just another listless 20 something black girl from the hood drifting in and out of placements and falling through the cracks. I always felt like I let her down. I couldn’t help it, but the guilt has followed me.

I didn’t start feeling like I had something to live for until I was 28. I had been through hell and back, an emotionally violent relationship, I had been through the ringer. But something came around for me as a 28 year old young woman starting to realize that yeah, life is shit. It really is. But you literally crawled out from the jaws of death and now what are you going to do with your life?

30 Something…

I went back to school when I turned 30. I was a humanities major. I was still pretty poor. Making ends meet was hard.

I went to school, making good grades for a while. I decided that tech was where I wanted to work. As much as I liked to write, I liked tweaking my sites even more. I also knew that I would remain poor as a humanities major because I didn’t want to teach.

I got a Mac in 2014, a code editor, and I was off to the races.

I went to Pitt from 2015-2017 as a CS major. You may remember it.

Starting the University of Pittsburgh

Had a breakdown in the middle of those two years.

I couldn’t go back to school this year and instead dove head first into every project on my GitHub that isn’t for school.

I’ve built some pretty cool things that I am proud of and am working on even more things.

But now I get to do it for real.

Whew

I have not been eating much. That is how bad it has gotten for me. I am not complaining though. I have good friends and family. They have helped me through the rough times I have been having. I have been really coding for my life, not just for a cushy job. It means so much more to me because of that.

I have been searching for a couple months now. I was using a little Chrome extension called Streak CRM to track the process. Rejections would come in. Now, I have a CRM with an offer that I accepted.

Mom

My mom is 71. She told me she would like to stick around long enough to see me be something. She qualified that with, “Well, you are already something but. Still. You know.”

I knew what she meant. We haven’t always been on good terms. But I love her and I, too, wanted her to see this. I didn’t want another regret of letting another important woman to me see me floundering.

I bought my mom a little something from Amazon and added a note and gift bag that said:

“Mom, I did it. From now on Xmas for you will be special. I’m grateful for your support. Love you. Tiffany”

Makes me feel good.

Thanks, Ben and Peter

I mean, really. You two have taken a chance on an old lady who doesn’t have a degree but has a fire in her belly to actually learn and grow as a developer. I can’t thank you two enough. Truly. Thank you.

Well

Everyone has a story. I am glad mine is ending up like this. I hope for happiness and success for anyone who is on the outside looking in in tech. You got this. ???


  1. I am old. I am the oldest person on the team. Haha. I am young at heart though. Goes to show someone pushing 40 can break into the industry if they work their asses off. 

Update: Lots of Things Happening

I thought I’d post a short update about why I haven’t been blogging as much.

These past two months have been a whirlwind for me. I am looking for jobs and I have gotten some interest. I can’t say too much right now, but things are looking up.

The tweets that started it:

It was during a #DevDiscuss Twitter chat. Initially, Pablo Rivera tweeted to Stephanie Hurlburt about getting me a job. She tweeted back to tweet to her my portfolio, resume, etc and that I am looking for work. She would then retweet it to her large following of potential employers and companies.

I did:

And awesome…things…started…happening.

That’s all I can really say but I have honestly just been trying to process what is happening and how, when it comes together and tries, the tech community is the best there is…

Finishing YelpCamp and Lessons Learned

So I have finished The Web Developer Bootcamp and the final project, YelpCamp, a full-stack Yelp clone built with Node, Express, Mongo, Mongoose, Passport.js, and Bootstrap.

It took me four months and some change to completely go through the 45 hour course and finish YelpCamp. Here are some of my thoughts on the process.

Reviewing the Basics

A lot of what I learned in the beginning was a refresher on topics I have already learned. I did it anyway, just to make sure I was completely solid on my understanding of the basics.

I thought this was a very important step: there were some things I wasn’t exactly clear on, like DOM manipulation and CSS classes, etc, things I should have mastered before taking the course. It was evident right from the beginning I should continue to go over these introductory parts, as I really needed it.

Meat and Potatoes

Eventually we started going over things like Node, Express, etc. I found that, while these are intermediate topics, these libraries make working with JavaScript much, much easier. They abstract away so much of tediousness of writing JavaScript that I wished I had learned them first which is never a good idea 1.

These sections were the longest and the most hastily explained. For newcomers, this might be a turnoff but Colt has one of the highest rated courses on Udemy 2 so I am sure newcomers won’t be too scared of these sections.

Building YelpCamp

First, let me say: I am somewhat happy with it. It is my first full-stack app, I built it right alongside Colt. I have recently added modifications and with Ian Schroover, I am going to add even more modifications. It is also helping me in my other full-stack app, Check Yo Self as I can apply what I learned in YelpCamp to that app.

The problem is, the course came out almost three years ago. Web dev changes at a breakneck pace. Everything was out of date. Take this snippet for example:

//INDEX - show all campgrounds
router.get("/", function(req, res) {
  if (req.query.search && req.xhr) {
    const regex = new RegExp(escapeRegex(req.query.search), 'gi');
    // Get all campgrounds from DB
    Campground.find({
      name: regex
    }, function(err, allCampgrounds) {
      if (err) {
        console.log(err);
      } else {
        res.status(200).json(allCampgrounds);
      }
    });
  } else {
    // Get all campgrounds from DB
    Campground.find({}, function(err, allCampgrounds) {
      if (err) {
        console.log(err);
      } else {
        if (req.xhr) {
          res.json(allCampgrounds);
        } else {
          res.render("campgrounds/index", {
            campgrounds: allCampgrounds,
            page: 'campgrounds'
          });
        }
      }
    });
  }
});

This is a mess of callback hell that doesn’t 3 exist anymore in 2017. There are promises in ES6, and async/await in ES7. I am sure Colt knows this now and has references to these features in his new course. However, this app is probably over a thousand lines of JavaScript over several modules. I don’t have the time, or the want, to refactor this. I didn’t come up with this idea but it does look good on my portfolio.

End Game

My mission in all this was to learn the basics of full-stack web dev in a pace and learning style I could be successful in. I have done that. Now, it is taking what I learned and working it into Check Yo Self. Pop on over to YelpCamp and give it a look. Tell me what you think.


  1. Some people think you can learn libraries right away without learning the basics. This is erroneous thinking. If you are a junior, like I am, learning the basics will get you hired. There are concepts you need to fully understand before calling yourself a professional JavaScript developer. It’s that simple. 
  2. His newest course, The Advanced Web Developer Bootcamp has a similarly high rating though it isn’t as well-thought out, and it shows in ratings from his previous course’s students. The course uses several teachers but is more up to date and uses React, ES6 and so much more. I plan on buying it when it is on sale again. 
  3. And shouldn’t 

My First Interview: A Love Story

Okay, so not really a love story, but a good one nevertheless.

A while back, maybe a month and a half ago, I was in the Code & Supply Slack, a local code meetup in Pittsburgh, perhaps the largest one here. Listless, I went to the #jobs channel.

Scrolling through all the positions I found one that intrigued me: a JavaScript developer position. Great!, I thought. Just what I want.

The job posting was by a company I found three years ago 1 when I wanted to be UX girl. I remembered their unique logo and branding and dug into their site back then. I wasn’t ready for a job yet but I did remember them.

I applied right away.

The application process was simple. Upload your resume, tell us why you want to work for us, drop your links in this box. I did all that. Up until I applied I had gotten 3 rejections for positions I’d applied for. I knew I had a shot at getting an interview with this company.

Emails Sometimes Get Lost…

I have a habit of checking my email too much. After discovering important emails were ending up “All Mail” in my G Suite account, I would go in there daily to see what I had missed.

Unfortunately, I didn’t see the initial email asking for a video chat by the company. And it just so happened, two weeks later, I popped into All Mail and the HR person’s email was at the top, asking if I had received the email and that they really wanted to chat with me.

WTF? Is this real life?

I responded, perhaps a bit too enthusiastically. We set up a time within the next couple of days.

That day after I received that email, I literally could have run around my neighborhood 2. I could hardly sleep.

The Day of The Interview

I went to bed at 7 PM after taking three melatonin for sleep 3. The next day, I showered, got dressed up and sat in front of the webcam 10 minutes early. I was pumped and nervous.

They came on and introduced themselves. Asked me to tell them something about me. I mentioned I was originally an English major. They were both English majors in college.. We talked about my projects. The tech lead said he saw that I was coding a markdown grammar checker and hoped it would be named, Check Yo Self and it was.

I mean, you can’t start an interview better than this.

The tech lead didn’t get too technical with me, just asking about my projects, mentioning that Check Yo Self is a big undertaking. I was happy he felt that way. I need that.

He mentioned testing, and a few other things. I don’t have any testing experience. There were things I didn’t know. And I let them know it.

After the Interview

They let me know they would contact me in a couple days to let me know if I moved on to round 2. There were four or five rounds. The second round was meeting with more technical people. The third was meeting the bosses. Fourth round was meeting in their headquarters with that team. And the fifth was meeting with the team in Pittsburgh.

I felt like I had a great shot at the second round, the interview went so damn well. They have in their emails that they are committed to diversity and inclusion and if you didn’t have access to video equipment they would accommodate you. This is so rare. So so rare. I felt extremely lucky to have an interview with such a great company with these great people.

I didn’t do anything at all that night except bask in the fact that I had nailed that interview. It was catharsis for me. I have spent the past three years learning and that interview was validation that people have seen I am working hard and know what I am doing. It felt like a weight had been lifted and now I could have more confidence.

I also wasn’t stupid. I knew I needed to apply elsewhere because nothing is guaranteed.

The Follow-up

The next day I received this email:

Hi Tiffany,

Thank you so much for taking the time to chat with [redacted] and me yesterday to discuss the JavaScript position at [redacted].

While we enjoyed chatting with you and were impressed with your personality and passion for web development, we will not be moving forward with your application. This particular role will require a broad perspective and professional experience for building for the web, so we need to ensure that the person we hire is ready to hit the ground running in those ways on our larger projects. We’d encourage you to continue on the road you’re already on and to consider applying again in the future! You’re incredibly smart and capable, so we’re excited to see you continue building on your web development knowledge base.

Don’t hesitate to reach out if you have questions of any kind!

Thanks and best wishes!

I read that email five times in a row. It stung but that email was so…I don’t know. It is rare to get an email like that from a company that isn’t going to hire you, with feedback, etc. They really liked me, thought I was incredibly smart and wanted me to apply again when I gained more experience. I may not have gotten the job but I can’t be mad. I’d been validated, even in rejection.

What’s Next

I’ve decided to take some time to learn testing and React, as well as user auth with Passport.js, as well as Locomotive, an MVC framework built on top of Express. I will start applying again after the holidays.

I want a more solid foundation and breadth of knowledge before diving in again.

I’m excited for my future in this field.


  1. I got my first Mac three years ago with my first Mac bundle: a code editor and several learn to code courses. Up until that point I was a techie who wanted to write for a living and code on the side. After going through a few courses and falling in love with OS X, I decided programming was for me. The rest is history. 
  2. Except I am really out of shape and live in a bad area and it was 9 PM. 
  3. Because of some faulty brain wiring, I need medication and it helps me fall asleep. Usually. If not I suffer from crippling insomnia and because I was so excited, I knew sleep was not in the cards. 

ES6 Modules

ES6 modules allows us to have reusable code, in separate files. We do this to eliminate initially massive js files, like app.js in a Node and Express project. Modules allow us to spread code over relevant files.

Take this students.js file

const students = [‘Peter’, ‘Paul’, ‘Mary’];

export const students = [‘Peter’, ‘Paul’, ‘Mary’];

Export allows us to export functions, objects, and primitive values into another files.

In app.js we import those values as modules into the main js file:

import { students } from ‘./students’;

…where ./students represents the file stored in the same directory as app,js.

Importing More than One Value

You can import more than one value from a module. Take students.js:

export const total = 42;

We can import this variable into app.js along with the students array:

import { students, total } from ‘./students’;

Export Data and Functions Between Files

You can export functions between files, such as in this calc.js file:

const add = (x, y) => {
  return x + y;
}

const divide = (x, y) => {
  return x / y;
}

export { add, divide };

To import this module into app.js:

import { add, divide } from ‘./calc’;

Exports are not just limited to primitive data types.

Export Fallbacks with Default

What if we wanted a function to be the main function for our module?

We can add a default keyword to have a fallback:

export { add, divide };
export default multiply;

This will allow the module to fallback on a function if another fails.

Watch for this Pitfall

It may be tempting to do something like this:

export default const add = (x, y) => {
  return x + y;
}

This will result in a TypeError.

Why?

The default keyword creates a variable called default. Adding default and const simultaneously, JavaScript will try to declare two different variables, which is not allowed in most programming languages.

More to Come

ES6 is the standard now and so I am learning it, as quickly as possible. Let me know some of your favorite features of ES6.

Productivity for Devs

While perusing The Practical Dev for new posts, I came across a post that intrigued me: Instant +100% command line productivity boost. Productivity for devs is something I’ve been meaning to write about. Now I have the impetus to do so.

I thought installing oh-my-szh and using aliases made me a badass. Unfortunately for me, that wasn’t the case.

This post is going to talk about productivity for developers, much like on the Syntax.fm show on the topic.

Getting Sh*t Done

I find, first and foremost, that a great task manager is essential to remembering what you need to do. I use OmniFocus for my main task manager, on all my devices 1. OmniFocus may seem rigid in its attempt at GTD but it is pretty flexible: use what you want.

Trello for Project Management

I use Trello to manage my projects and it does a fantastic job at that. Needing a high level and visual overview of what I need to get done, I reach for the Trello Mac app every time.

Dev Tools

For my shell I use iTerm 2 which is in its 3rd iteration 2 and zsh shell.

Wes Bos has a great theme for all the things, a fork of the Sublime Text Cobalt2 theme and it is what I am using on iTerm as well as Visual Studio Code 3 which is faster than Atom though it lacks multiple projects in one window.

With the theme and the powerline fonts which show your git statuses and which directory you’re in, it makes for a great looking terminal.

iTerm has the ability to have separate profiles for whatever you want. For instance, I have a Check Yo Self profile that I can switch to whenever I want to work on that particular app.

Command Line Tools

Zsh Syntax Highlighting

Knowing if you have a typo in an alias or command is crucial to not screwing everything up. One of the ways to tell what you’re typing is by using zsh-syntax-highlighting. You can customize the color of the highlights by looking at the highlighter docs.

Z – Jump Around

z is a utility that allows you to jump to different directories by typing z and then the directory. You’ll have to cd around in directories for a bit to “train” it but once you do, it’s pretty easy to skip around in directories. It is a “frecent” tool: frequent and recent directories.

Exa: ls replacement

Another cool command line utility is exa, which replaces ls with some nifty features like syntax highlighting and a ton of other commands. Just type exa and it will list the contents of your directory. You can get directory permissions, print each item on one line with the -1 flag, and much more.

Miscellaneous Tools

Alfred

I use Alfred app for navigating pretty much everything. The workflows make it, where I can create gists out of files, search Stack Overflow, add Trello cards to different boards, and make OmniFocus tasks out of Chrome tabs, and much more.

Getting things done or...wasting time?

Getting things done or…wasting time?

I also use Wes Bos’s Cobalt2 Alfred theme for this.

Go Fucking Work

Go Fucking Work is a Chrome extension. It’s similar to Stay Focused but a lot harsher…as the name suggests.

I swear like a sailor when I am around people I know and so I appreciate this extension for what it is and its customizability. There are alternatives of course, if sweary things aren’t your jam.


  1. Currently Omnigroup only makes Apple apps and don’t have a web interface for OmniFocus. A web interface may be coming soon. On Android, there is an app that interfaces with OmniFocus using the Omnigroup’s API called Focus GTD
  2. Shouldn’t it be called iTerm 3
  3. This is the new hotness. I tried it when it first came out and used it exclusively but went back to Atom because of the plugins. Everyone seems to be talking about it now so I gave it another shot. 

Open Source Goals and the Year in Review

Una Kravets is one of my favorite designers/developers even though I just discovered who she was, and by accident.

I was doing a little GitHub dumpster diving, scrolling through who I was following. Found a guy who I wanted to keep an eye on who hadn’t posted in a while. I went through his repos and found a personal goals repo. It was a fork. I went to the source and found it was Una Kravets repo.

Open Sourcing Your Goals Makes You More Productive

Accountability is a thing that most humans need 1. Open sourcing my goals has made me pay attention to what I am doing and when. This past week I didn’t get much done, and hesitated sharing it to my personal goals repo. But I did. And it looks pretty bad.

Goals for the Year and Year in Review Posts

Una posts her Goals for the Year and Year in Review on her blog and I decided I’d do the same thing on this one.

I had my goals on my other blog. Since it is no longer a Apple productivity blog I’ll do it here. It makes more sense here than there.

What Do You Think

I thought this was a great idea immediately. What do you think? Will you try it? Two weeks in and I am hooked.


  1. Especially if you procrastinate and get off schedule on weekends like I do. 

Map: Another Higher Order Function

Map is another higher order function that goes through an array and doesn’t discard it but instead transforms/mutates it.

Here, I’d like to get an array of all the names of the animals.

const animals = [
  { name: ‘Catticus Finch’,  species: ‘cat’ },
  { name: ‘Peaches’,         species: ‘fish’ },
  { name: ‘Bobby’,           species: ‘dog’ },
  { name: ‘Lucifer’,         species: ‘cat’ },
  { name: ‘Beatrix’,         species: ‘rabbit’ },
  { name: ‘Cerulean’,        species: ‘fish’ }
];

Here’s how we would accomplish this with a for loop:

var names = [];

for (var i = 0; i < animals.length i+) {
  names.push(animals[i].name); 
}

The function .filter expects a boolean, but .map expects a callback function to return a transformed object it will push into a new array.

To return the names of each of the animals in code:

In ES5:

var names = animals.map(function() {
  return animal.name;
});

In ES6:

const names = animals.map(animal => animal.name);

You can use .map to return a subset of an array. Since it expects a callback to return an object, we can make new objects.

In ES5

var names = animals.map(function(animal) {
  return animal.name + ‘ is a ‘ + animal.species;
});

In ES6

const names = animals.map(animal => animal.name + ‘is a ‘ + animal.species);

Easier Array Manipulation with Higher Order Functions

.map() and .filter() are just a couple of higher order functions you can use to manipulate and iterate over arrays.

You can check out this link for further reading.

Functional Programming in JavaScript? Yes Please.

One of the hot topics right now in the web development world is functional programming in the language of the web, JavaScript.

Functional programming encompasses a whole host of mathematical properties and phenomena that is beyond this post, but what I am going to address here is how to write a a few functions with nominal functional programming.

This is going to be a series. I am currently researching these topics as I go along and what I find excites me. I will be digging into these topics, each array method bit by bit. You can find some more of this on Steve Smith’s blog Funky Javascript.

Important Concept: Higher Order Functions

One of the best and worst parts about JavaScript is that you can pass functions into other functions. This can lead to beautifully expressive code and sometimes bugs.

Why can we do this? Because, like in most functional programming languages 1, functions are values just like any other value in JavaScript.

Take this code:

// Named function or
// function declaration
function double(x) {
  return x * 2;
}

// Anonymous function or
// Function expression
let double = function(x) {
  return x * 2;
}

let cat = double;
// Function call
cat(60);

// returns 120, obviously

Here we have named function called double. It takes an argument, x and when you call it, it returns whatever the value of x is that you specify in the function call and returns it.

What’s different about JavaScript is that you can pass it into a variable and call the function from that variable. This is because, well, functions are values.

Higher order functions are good for composition to take smaller functions and make them into bigger functions. More on this in a minute.

Enter .filter()

The .filter() function is an array function that takes a callback that it uses to create a new filtered version of an array.

Take this array of objects:

let animals = [
  { name: ‘Catticus Finch’, species: ‘cat’ },
  { name: ‘Peaches’ species: ‘fish’ },
  { name: ‘Bobby’, species: ‘dog’ },
  { name: ‘Lucifer’, species: ‘cat’ },
  { name: ‘Beatrix’, species: ‘rabbit’ },
  { name: ‘Cerulean’ species: ‘fish’ }
];

Say I wanted to filter out all this cats in this array. We could use the trusty for loop:

let cats = []

for (let i = 0; i < animals.length; i++) {
  if (animals[i].species === ‘cat’) {
    cats.push(animals[i]);
  }
}

We are essentially just looping through the array and for every cat the for loop finds, it pushes it into the empty cat array.

Now, we can filter.

Filter accepts a callback and loops through each item in the array and passes it back to the callback function. .filter() expects a boolean and then returns the filtered array.

In ES5:

let cats = animals.filter(function(animal) {
  return animal.species === ‘cat’;
});

In ES6

let cats = animals.filter(animal => animal.species === ‘cat’);

Here, if the value of the species property in the animals array is a cat it will return the names of those cats in a filtered array.

We could also write an anonymous function and add a filter function inside of it, much like this:

let isCat = function(animal){
  return animal.species === ‘cats’;
});

let cats = animals.filter(isCat);

How Cool is This?

Writing small functions allows composition which we can reuse. In the for loop, we are pushing cats into the array but filter handles this natively.

Filter and the callback are composed as they are meshed into each other. Not only is it syntactically pleasing, but it is less lines of code which is always a good thing.

Next Up

Next I want to tackle the .map() function and get back to my Chrome DevTools series.


  1. Though JavaScript isn’t a purely functional programming language. 

Mission DRY: Accomplished

When working with multiple levels of conditionals, it helps to DRY things up a bit: not repeating yourself can give performance gains as well as make your code more readable and elegant.

Here is one of the monstrosities I had before:

if (currentIcon === "clear-day")   {
  $("body").css("background-image", "url(https://i.imgur.com/voece1h.jpg)");
  }   else if (currentIcon === "partly-cloudy-night")   {
  $("body").css("background-image", "url(https://i.imgur.com/r8haFIj.jpg)");
  }   else if (currentIcon === "clear-night")   {
  $("body").css("background-image", "url(https://i.imgur.com/K6Bazrl.jpg)");
  }   else if (currentIcon === "partly-cloudy-day").  {
  $("body").css("background-image", "url(https://i.imgur.com/dUS9u9b.jpg)");
  }   else if (currentIcon === "cloudy")   {
  $("body").css("background-image", "url(https://i.imgur.com/Kx3ku27.jpg)");
  }   else if (currentIcon === "rain")   {
  $("body").css("background-image", "url(https://i.imgur.com/g4afvja.jpg)");
  }   else if (currentIcon === sleet)   {
  $("body").css("background-image", "url(https://i.imgur.com/pjq3VPO.jpg)");
  }   else if (currentIcon === snow)   {
  $("body").css("background-image", "url(https://i.imgur.com/vH9cyKD.jpg)");
  }   else if (currentIcon === wind)   {
  $("body").css("background-image", "url(https://i.imgur.com/ZtSl66b.jpg)");
  }   else if (currentIcon === fog)   {
  $("body").css("background-image", "url(https://i.imgur.com/5z0CXkZ.jpg)");
}

Really gross, right?

Consulting LinkedIn and Slack proved to be fruitful.

Changing if/else Chains Into Map Objects

A hash map is an object that you can iterate over like an array. The definition of a Map object can be found on the MDN.

Adam Recvlohe, a fellow freeCodeCamp Camper on LinkedIn recommended I use a Map for changing the background of my freeCodeCamp Weather App dynamically. He showed me some code and I eventually settled on this:

const iconMap = {
  "clear-day": "url(https://s3.us-east-2.amazonaws.com/weatherappfcc/sunny.jpg)",
  "partly-cloudy-night": "url(https://s3.us-east-2.amazonaws.com/weatherappfcc/fineas-anton-136459+copy.jpg)",
  "clear-night": "url(https://s3.us-east-2.amazonaws.com/weatherappfcc/sam-mcjunkin-38078.jpg)",
  "partly-cloudy-day": "url(https://s3.us-east-2.amazonaws.com/weatherappfcc/jeff-nafura-294909.jpg)",
 "cloudy": "url(https://s3.us-east-2.amazonaws.com/weatherappfcc/jonatan-pie-260835.jpg)",
 "rain": "url(https://s3.us-east-2.amazonaws.com/weatherappfcc/3opt\_rain.jpeg)",
 "sleet": "url(https://s3.us-east-2.amazonaws.com/weatherappfcc/jonatan-pie-190398.jpg)",
 "snow": "url(https://s3.us-east-2.amazonaws.com/weatherappfcc/snow.jpg)",
 "wind": "url(https://s3.us-east-2.amazonaws.com/weatherappfcc/jon-flobrant-2845.jpg)",
 "fog": "url(https://s3.us-east-2.amazonaws.com/weatherappfcc/elaine-li-416.jpg)"
};

(function() {
  $("body").css("background-image", iconMap[currentIcon]);
})();

Here, we take a Map object and use an anonymous function calls the .css jQuery method on the body which will change the background image by injecting that css into the body. Also as an argument to the css method is an iteration over the iconMap Map object that maps each image to the currently displayed Skycon.

Next: Cleaning Up The if/else Mess of an Icon Display

Up above you probably observed my conditional hell. It was the same for the icons where I called the jQuery show()/hide() methods in if/else statements for every. Icon. Pure insanity.

I went to the Code Newbie Slack and asked Joseph Rex for help as he has been guiding me through a few of the Express and other JavaScript problems I have been having. After some bugs and error handling we came up with a nifty ES6 solution that is much cleaner, using Template Literals to clean up the constant calls to each icon.

// Write a function that takes two parameters
let iconDisplay = (iconName, current) => {
   //Assign a template literal to a constant that will
//represent each icon
   const jqObj = $(`#${iconName}`);
   // Use the ternary operator to determine with the //iconName is the current icon being shown for the condition
//and based on that, show or hide the appropriate icon
   iconName === current ? jqObj.show() : jqObj.hide();
};

 // call the function and compare it to the Skycon for each 
 // Weather condition.
 iconDisplay("clear-day", currentIcon);
 iconDisplay("clear-night", currentIcon);
 iconDisplay("partly-cloudy-day", currentIcon);
 iconDisplay("partly-cloudy-night", currentIcon);
 iconDisplay("cloudy", currentIcon);
 iconDisplay("fog", currentIcon);
 iconDisplay("rain", currentIcon);
 iconDisplay("sleet", currentIcon);
 iconDisplay("snow", currentIcon);
 iconDisplay("wind", currentIcon);

Pretty cool.

Learning Express with The Web Developer Bootcamp

Pretty soon I’ll be diving deep into how much I am learning about Express with The Web Developer Bootcamp. To get a sense of where I was a couple days ago, read this.