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.

DRY Code: Using IIFEs to Clean Up Code

DRY: Don’t Repeat Yourself

As you may have seen in my last post, I have some ridiculous conditional statement blocks going on to show/hide the Skycons and for switching up the background photos based on your current weather conditions.

Each of this if/else statements is essentially repeating the same couple of ideas:

if (currentIcon === "clear-day")  {
  $(“#clear-day").show();
}  else  {
  $("#clear-day").hide();
}

for the icons and:

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)");
}

for the backgrounds only repeated over and over again for different icons/pictures.

This isn’t DRY: it’s stupid.

Functions for Modularity

I decided to wrap these up in two different closure functions in the form of IIFEs or Immediately Invoked Function Expressions.

An IIFE wraps your function in parens and then adds an extra closing set of parens that invoke the function immediately when the interpreter gets to that function.

My current solution 1:

(function changeBackground(){
  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)");
  }
})();

The same for the icons.

The problem with making this even more DRY is the way Skycons are initiated:

let icons = new Skycons({ color: "#fff" });

   icons.set("clear-day", Skycons.CLEAR_DAY);
   icons.set("clear-night", Skycons.CLEAR_NIGHT);
   icons.set("partly-cloudy-day", Skycons.PARTLY_CLOUDY_DAY);
   icons.set("partly-cloudy-night", Skycons.PARTLY_CLOUDY_NIGHT);
   icons.set("cloudy", Skycons.CLOUDY);
   icons.set("rain", Skycons.RAIN);
   icons.set("sleet", Skycons.SLEET);
   icons.set("snow", Skycons.SNOW);
   icons.set("wind", Skycons.WIND);
   icons.set("fog", Skycons.FOG);

  icons.play();
   }
});

So I am looking around for solutions.


  1. This isn’t ideal either and I am currently asking around about it. 

Background Image Hacks in CSS

Yesterday 1 I found myself in a situation where the background image in my freeCodeCamp Weather App on mobile was cut off at the bottom. Needed some background image hacks in css to fix it.

For context

My code for switching up the background depending on your weather conditions is as follows:

  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)");
}


This bug had been bothering me for a week or so. I searched on Stack Overflow for an appropriate solution and found that I could use a div wrapper and add:

body {
   background-size: cover;
   background-repeat: no-repeat;
}

I added the wrapper but nothing happened.

I also already had my main content wrapped in a div:

  <body>
    <div class="wrapper">
      <div class="col-md-12">
        <header>
          <h1 class="h1-title">Local Weather App </h1>
          <h3></h3>
        </header>

Object-fit, etc

You can usually object-fit on an image with the properties: fill, cover, contain, scale-down, or none:

fill

fill

cover

cover

contain

contain

scale-down

scale-down

none

none

I tried object-fit: cover on the body. Didn’t work. Same with contain, scale-down, and fill.

I searched some more and found the answer on a Treehouse forum.

html {
   min-height: 100%;
}

I tried height: 100% on the body but that didn’t work either.

Since the html element is actually at the root of the document and body descends from the html element, applying the global style to the html element actually makes sense.

Also, because I am specifying a minimum height that happens to be a percentage, it makes it responsive because I am not specifying a fixed size in the viewport.

Now, I have a mobile app that looks like this:

Still, I need to fix the loading issue. Thats for another day.

You can find the weather app at https://twhite96.github.io/Weather_App.