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. 

Check Yo Self Update: Eliminating Dev Dependencies

I worked like a fiend over the weekend on Check Yo Self, reading documentation, implementing features, and taking some away.

Going over the write-good issues on GitHub to see how if it could parse extra characters 1.

I saw an issue where a guy implemented using his GitHub Project Page to host a React implementation of a write-good app.

Went to the app, put in some markdown, and it gave me suggestions. Nice.

No Need for Natural

I was going to use the natural natural language tokenizers to parse out the markdown but I don’t need it. One less dev dependency is a good thing.

Also, No Need for Heroku or Postgres

I researched localStorage web API. Each browser has a set limit of how much data can be stored in the browser. I found this little utility to check how many MBs of storage I had to work with. 5 MBs in Chrome 2. From what I understand, Firefox has a limit of 10 MB but I could be wrong.

After this, I filled a markdown document with 2000 words, just to see the size of the document. It was 9 kbs. I decided to limit the amount of words per document to 2000 and the amount of documents that could be stored to 200.

Working With and Testing Local Storage

I found some gold in the MDN docs and their GitHub repo for MDN. You can test the localStorage on a client with the following code:

function storageAvailable(type) {
  'use strict'
    try {
    var storage = window[type], x = "__storage_test__";
    storage.setItem(x, x);
    storage.removeItem(x);
    return true;
    } catch (e) {
      return (
      e instanceof DOMException && // everything except Firefox
      (e.code === 22 || // Firefox
      e.code === 1014 || // test name field too, because code might not be present // everything except Firefox
      e.name === "QuotaExceededError" || // Firefox
        e.name === "NS_ERROR_DOM_QUOTA_REACHED") && // acknowledge QuotaExceededError only if there's something already stored
      storage.length !== 0
    );
    }
}

console.log(storageAvailable());

I am not certain of everything that is happening here but it tests for storage on the client’s browser. If not you can log an exception.

I am probably going to alert the user somehow if they have exceeded the localStorage limit 3.

Logic So Far

So far I’ve got some broken spaghetti code I am looking to fix.

I need a refresher on jQuery so I’ve visited Treehouse. I also know some of what I need to do.

What I have so far:

/* App Starts Here */
$('#texts').val('New Text');
$('#texts').trigger('autoresize');
var writeGood = require('write-good');
var suggestions = writeGood(userInput, {weasel: false});

suggestions: [{

}];

Material Design Lite Woes

The Material Design Lite docs are good but I was having some trouble understanding everything, as components are really verbose and seem to overlap some.

I was deep into the html when I found I couldn’t grok something and went looking for a solution.

Enter: Materalize.css.

The guys are from Pittsburgh 4 and attend one of the premier Computer Science schools in the world, Carnegie Mellon. They came up with a way to add Material Design Lite to your site, stripping away the verbosity, and leaving you with customizable components that resemble a bit of a mix of Bootstrap and MDL.

Currently I have this bit of Materialize.css in my markup:

<main class="mdl-layout__content">
      <div class="mdl-layout__tab-panel is-active" id="overview">
        <section class="section--center mdl-grid mdl-grid--no-spacing mdl-shadow--2dp">
          <div class="mdl-card mdl-cell mdl-cell--12-col">
            <div class="mdl-card__supporting-text">
              <h4>Texts</h4>
              This is where your markdown files live. You can add up to 200 markdown files at 2000 words a piece.
              <div class="row">
                <form class="col s12">
                  <div class="row">
                    <div class="input-field col s12">
                      <i class="material-icons prefix grey-text">mode_edit</i>
                      <textarea id="texts" class="materialize-textarea grey-text"></textarea>
                      <label for="texts" class="grey-text">Add your markdown here...</label>
                    </div>
                  </form>
                </div>
                <div class="fixed-action-btn vertical">
                  <a class="btn-floating btn-large pink">
                    <i class="large material-icons">add</i>
                  </a>
                  <ul>
                    <li class="btn-floating green"><a href="#!"><i class="material-icons">mode_edit</i></a></li>
                    <li class="btn-floating purple"><a href="#!"><i class="material-icons">undo</i></a></li>
                    <li class="btn-floating blue"><a href="#!"><i class="material-icons">redo</i></a></li>
                  </ul>
                </div>
              </div>
            </div>
          </section>
        </div>
      </main>

Some MDL proper mixed in but I will take it out soon enough.

Vertical Fabs and Getting Them to Work

I am trying to understand how to get input from a click on a fab. As you can see from my logic, I am using a click event to try to trigger an input but it isn’t working. I am looking for a fix.

Here is a nifty video of my getting the vertical fabs working.


  1. Those lovely markdown characters. I ❤️ markdown. 
  2. This utility crashed someone’s browser so be careful. 
  3. There are some users who really don’t pay attention or care. 
  4. Steel City? Not much anymore. More like, up-and-coming tech hub. 

Open Source and GitHub Stars

When open sourcing a piece of software, you are taking risks. It’s true for everyone open sourcing a project, even more so for PoC and women 1, though this isn’t going to touch on that.

You could get trolled hard by bros who think what you’re working on is silly or, worse yet, stupid. They could ignore the code of ethics set down by GitHub, Gitlab, whomever. You really don’t know what to expect.

The open source community can be welcoming and crazy intimidating and cruel at the same time.

I am writing an app, Check Yo Self, that I have decided to open source using other open source modules, and MDL templates, etc. I am still a junior, though a much better programmer than a year ago. If my project gets popular 2, I’m a prime target of the dark side of the GitHub open source community. Taking that chance is something that the rewards outweigh the risks 3.

So I Made a Shout Out and Got Stars

The Practical Dev has a Twitter chat every Tuesday at 9 PM EST called #DevDiscuss. During last Tuesday’s chat Ben asked us to share what we were hacking on. I shared my project, Check Yo Self. I wasn’t expecting much. It got a lot of retweets and favorites. And then I looked at the project:

It started out with 5 stars, then 8, then 9 and 1 fork and one extra watcher.

This may not seem like a big deal. But to me, who has had a few projects with no attention whatsoever, this makes me feel really good. It is something I can feature on my GitHub pinned repos 4, add to my portfolio and resume.

Incentive

I have now, with these stars, incentive to keep going and updating the app. Last night, my allergies were super bad 5 and I just wanted to read or play Super Mario Bros. Run. I sat down at the desk, pissed off that I needed to work on one module at a time on this app, starting with the HTML template. But I did it. For an hour. I wanted to get the database set up, some of the logic, but I forced myself to work on one thing at a time. It was a big step for me to force myself to code when I am really tired and not feeling well. Those stars mean a lot to me and I feel a responsibility to make the best piece of software I can.


  1. I tend to not tread much in this category, though it effects me. I am a keen observer of behaviors and adjust my expectations according to the situation at hand. 
  2. It won’t. Pretty sure of that. 
  3. At least for me, as someone trying to build a portfolio and trying to get a job. 
  4. I pinned the tweet to my profile. 
  5. With my sleep apnea and allergies, it makes me really tired, more so than if I just didn’t have a good night’s sleep.