Event Handlers in Check Yo Self

Since starting Check Yo Self a month ago, I have been at a loss as to what the logic should be, how to register click event handlers with jQuery, basically everything I learned the past two years, I drew a blank on 1.

This baffled me. How could I know so much when talking to others, when learning and watching countless tutorials, but actually draw a blank when it came time to work on the logic?

Meditation, Deep Work, and the Ability to Focus

I had a lot of ideas. A lot. I wasn’t writing them down 2. I was also suffering from the paralysis of choice and impostor syndrome. All of these ideas, everything I know, and the fear I had in building this caused a slump in production, where I focused mainly on the HTML and CSS, which is nothing 3.

I would sit there, dumbly looking at the app.js file like, what do I do? What do I do?

I took a bit of a break and thought about it. I started meditating, getting rid of distractions like Facebook 4, and really started thinking about what was happening.

Enter The Whiteboard

So as I was writing this article, I was thinking about how I was going to explain my recent thought process. My thought process is a bit scattered; lots of things to think about when shipping a product, and lots of JavaScript-y things to think about to get your app running.

I stood up to get a bite to eat, walk around, when I stood in front of the whiteboard and all the ideas came flooding back to me.

I picked up the marker and started thinking of how to register a button click, what event handlers I need after the button click, how to store the text documents, and a few other jQuery-y things.

I ended up with this:

I finally put it to good use. Mighty crooked, though.

I finally put it to good use. Mighty crooked, though.

There isn’t a whiteboard big enough to fit all my ideas on 5. I know about event handlers, jQuery, and most vanilla JavaScript.

But I have some working code and pseudocode to sift through.

I added the whiteboard picture to Evernote and will probably add it to Quiver just to make it more programmer-like.


  1. I have notes but not for everything. It probably wouldn’t have mattered anyway. 
  2. Still guilty of this. 
  3. I feel I need to quantify this: nothing for someone of my skill-level and experience though CSS is changing rapidly and I am learning as I go. 
  4. Still on it, though. I am in some really great groups. I also have a Facebook brand page for my other blog. I deleted all the apps and have a block on my mobile and desktop browsers for pretty much all day until evening, when I am most likely to browse it. 
  5. Or my apartment for that matter. 

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. 

Hacking with Java Algorithms

So I have been pretty knee deep in algorithms and Java lately.

Coming from Free Code Camp last spring, I have found that I’m finally understanding the methods, algorithms, etc, that I am currently working on in class.

One of the best parts about CS0401 is Tim Hoffman, the professor, and Tim the TA. Their explanations have cleared a lot of things up for me so that when I go to do my projects and labs, I am not staring at the blank editor trying to figure out what to do.

It helps that Tim the Dr. pretty much fills in the main method and calling logic, as well as BufferedReader, Scanner, and FileReader inputs. This helps me to not be stuck, and start working on the main logic right away.

A Fat 0 This Week

I have been a bit sick lately and haven’t had the energy to do most of my homework. Thought I’d turn it in late yesterday but I am stuck, and the places I’ve reached out to haven’t gotten back too me for help. So, I essentially got a 0 on project 3, my first 0 on a project since starting this class.

Example Algorithm

So we have been working on a set of pretty established algorithms like the speeding ticket calculator, reversing strings, and checking for palindromes.

My solution for palindromes in JavaScript:

My solutions for palindromes in Java:

Here we are using a clean string to add characters to and isLetter() to check to see if the character at the i index of the String s in the for loop is a letter. If it is a letter, we use toLowerCase to make it lowercase. We want all the letters to be lowercase. It makes it easier to check for palindromes this way. Then we add the characters we have made lowercase to the clean string, where we can then check for palindromes.

In the boolean method isPalindrome() we check to see if the the string is empty or null. If this is the case, we can’t check for palindromes as no characters exist. We then return false.

Next, in the for loop, we split the string in half and then loop through each half. Then we check if the character at the end of the sting doesn’t match the character at the beginning. If it doesn’t, we need to return false, as that is not a palindrome. If it does, we return true.

Just Explained That. Feels Good

I honestly wasn’t sure I could explain that after not looking at it for a week or so. It took about 10 minutes but I felt like I explained it pretty well. I am patting myself on the back. Ha.

There’s still gaps in my knowledge and a long way to go for total understanding of basic programming concepts, but the comprehension is coming faster, and I am grateful Definitely a bonus of Free Code Camp’s model of teaching.

100 Days of Code, Day 10: 30 October 2016

Today’s Progress:
This is for yesterday.

I worked on my “Captivating Contacts App”. I added the navbar plus some other pages. I played around with some of the bootstrap elements that I couldn’t get to work. I did it for an hour, maybe two.

Thoughts:
Since I am done with The Lens Cap, I needed something to work on. Working on the Captivating Contacts App gives me some busy work until the end of the semester, as I won’t be coding very much for class.

I have a small framework going for the script file. I am watching a few YouTube tutorials on building contacts apps using local storage instead of having a database. And since I know how to do a basic enough search with js, I will probably add that as well.

Link to work:
My code is up on GitHub as the site on Heroku isn’t live.

100 Days of Code Day 9

Day 9: 27 October 2016

Today’s Progress:
It’s been a while! I programmed quite a bit but didn’t write anything. So it\’s 100 Days of Code Day 9 for me.

I whipped up some cool JavaScript from CSS-Tricks website to help with the search on the Pricing page. This is handy, because it is something I can look at and go over for my Contacts app. I was wondering how to have search functionality without having a database. I eventually want to have some sort of database or maybe an API from Google for their contacts service to help enhance my offering.

In any case, I didn’t code today but I did sporadically for the past week or so.

Thoughts:
I have never been more in the zone in anything than when I was building this site. I want to start HackerRank challenges and CodeWars challenges to get better with algorithms. My thinking is much better but I think my algorithm muscles are getting flabby.

Link to work:
All the code is on GitHub and the site is up at The Lens Cap

ES6 and Lambdas

I am taking the JavaScript ES6 course on Treehouse. I should have waited a bit, as I am still learning ES5. Eric Elliott made the case that newbies should be learning ES6 right now as it is the current standard. So I am diving in.

One of the things that has me excited are lambda functions. JavaScript calls them Arrow functions, but I like the traditional name better. So for this article, I will call them lambda functions.

Here is an example of a lambda function being used in ES6:

[javascript]
‘use strict’
var Person = function (data) {
for (var key in data) {
this[key] = data[key];
}
this.getKeys = () => {
return Object.keys(this);
}
}

var Alena = new Person({ name: ‘Alena’, role: ‘Teacher’ });

console.log(‘Alena\’s Keys:’, Alena.getKeys()); // ‘this’ refers to ‘Alena’

var getKeys = Alena.getKeys;

console.log(getKeys()); // ‘this’ refers to the node process
[/javascript]

Here in the is a Person constructor object with a function that takes the parameter data. On this constructor is a method called getKeys that returns the object’s keys using a lambda function.

Below that, a new Person object is instantiated and we log the keys for the Alena object to the console.

The lambda function binds the function to the object, no matter where it is called.

If we were to take a look at the code before the writing the lambda function, it would look like this:

[javascript]
‘use strict’
var Person = function (data) {
for (var key in data) {
this[key] = data[key];
}
this.getKeys = function () {
return Object.keys(this);
}
}

var Alena = new Person({ name: ‘Alena’, role: ‘Teacher’ });

console.log(‘Alena\’s Keys:’, Alena.getKeys()); // ‘this’ refers to ‘Alena’

var getKeys = Alena.getKeys;

console.log(getKeys()); // ‘this’ refers to the node process
[/javascript]

This code will throw an exception because we are calling the getKeys method outside of the Person constructor code block. This means it is out of scope.

More Lambdas

When code gets messy like this:

[javascript]
‘use strict’;

var Teacher = function (data) {
this.name = data.name;
this.greet = function (studentCnt) {
let promise = new Promise(function (resolve, reject) {
if (studentCnt === 0) {
reject(‘Zero students in class’);
} else {
resolve(Hello to ${studentCnt} of my favorite students!);
}
});
return promise;
}
}

var Classroom = function (data) {
this.subject = data.name;
this.teacher = data.teacher;
this.students = [];
this.addStudent = function (data) {
this.students.push(data);
this.greet();
}
this.greet = () => {
this.teacher.greet(this.students.length).then(
(function (classroom) {
return function (greeting) {
console.log(${classroom.teacher.name} says:, greeting);
}
})(this),
function (err) {
console.log(err);
})
}
}

var myTeacher = new Teacher({ name: ‘James’ });
var myClassroom = new Classroom({ name: ‘The Future of JavaScript’, teacher: myTeacher });

myClassroom.addStudent({ name: ‘Dave’ });
[/javascript]

it is a good idea to scrap the spaghetti code and write something with lambda or arrow functions, and use JavaScript Promises:

[javascript]
‘use strict’;

var Teacher = function (data) {
this.name = data.name;
this.greet = function (studentCnt) {
let promise = new Promise(function (resolve, reject) {
if (studentCnt === 0) {
reject(‘Zero students in class’);
} else {
resolve(Hello to ${studentCnt} of my favorite students!);
}
});
return promise;
}
}

var Classroom = function (data) {
this.subject = data.name;
this.teacher = data.teacher;
this.students = [];
this.addStudent = function (data) {
this.students.push(data);
this.greet();
}
this.greet = () => {
this.teacher.greet(this.students.length).then(
greeting => console.log(${this.teacher.name} says:, greeting);
err => console.log(err);
}
}

var myTeacher = new Teacher({ name: ‘James’ });
var myClassroom = new Classroom({ name: ‘The Future of JavaScript’, teacher: myTeacher });

myClassroom.addStudent({ name: ‘Dave’ });
[/javascript]

You use Promises asynchronously with callback functions, handing those functions off to another scope. You must be careful that the promise can access its original scope, or it will throw an exception.

Web Dev CS 0134

I really want to see what the web development course has in store for me this semester. I wonder if we will use ES6. I doubt it, but I am hopeful.

Day 8: HTML Tables and The DOM

\"DOM

The DOM

So today was basically going over HTML tables. Easy. Then we went through MDN JavaScript Web API to learn about the DOM.

Went inside Chrome Dev Tools to look at what the

window.document

was.

So the window is the entire window opened in your browser. You can get information from the window, call methods on it and functions. Usually you don’t write

window.document

to access the document, (which is part of the DOM or Document Object Model).

The DOM is basically the HTML document, arranged in a tree, with nodes that you can manipulate with JavaScript and jQuery.

HTML Tables

Self-explanatory really. So you have a few

&lt;table&gt;&lt;/table&gt;

tags under which you can have this:

&lt;table&gt;

  &lt;thead&gt;

   &lt;tbody&gt;

   &lt;tfoot&gt;

     &lt;tr&gt;

      &lt;td&gt;&lt;/td&gt;

     &lt;/tr&gt;

   &lt;/tbody&gt;

  &lt;/tfoot&gt;

 &lt;/thead&gt;

&lt;/table&gt;

\"wpid-Screenshot-2015-08-20.jpg\" \"wpid-Screenshot-2015-08-20-1.jpg\"

Day 7: Drawing App

\"Day_7\"

We used more HTML5 and JavaScript in this exercise. We had an HTML5

<canvas></canvas>

element which we have to use JavaScript interactivity to; we can’t use pure jQuery to make this app work so if JavaScript is disabled, the app won’t work.

We used new event handlers like

$canvas.mousedown(function(e) {
 lastEvent = e;
 mouseDown = true;
}).mousemove(function(e) {
}).mouseup(function() {
}).mouseleave(function() {
});

Obviously this code doesn’t work in its current state, but I digress. So drawing the line in the app consists of

.mousedown() .mousemove() .mouseup() .mouseleave()

so when you click initally, mousedown, move the mouse, mousemove, release the button on the mouse, mouseup, and when the mouse leaves the DOM element it was bound to, mouseleave, which won’t make an awkward line when the mouse comes back into the DOM element.

Learned new methods like

.siblings()

which will access the siblings in a child element and execute an event handler or another method.

We learned JavaScript specific ways to make the canvas interactive. The code looks like this:

$canvas.mousedown(function(e) {
 lastEvent = e;
 mouseDown = true;
}).mousemove(function(e) {
 if(mouseDown) {
 context.beginPath();
 context.moveTo(lastEvent.offsetX, lastEvent.offsetY);
 context.lineTo(e.offsetX, e.offsetY);
 context.strokeStyle = color;
 context.stroke();
 lastEvent = e;
 }
}).mouseup(function() {
 mouseDown = false;
}).mouseleave(function() {
 $canvas.mouseup
});
context.beginPath()

and such are the ways in which you can implement drawing interactivity to your app. The full thing is on CodePen or just work with it here:

[codepen_embed height=\”800\” theme_id=\”0\” slug_hash=\”bdPrvw\” default_tab=\”result\” user=\”twhite96\”]See the Pen <a href=\’http://codepen.io/twhite96/pen/bdPrvw/\’>bdPrvw</a> by Tiffany White (<a href=\’http://codepen.io/twhite96\’>@twhite96</a>) on <a href=\’http://codepen.io\’>CodePen</a>.[/codepen_embed]

Day 6: Password Forms & Tooltips

\"Day_6_badge\"

Here we just iterated on what we learned previously with:

.prop() .hide() .show() .val()

We learned two new methods,

.focus()

and

.keyup()

in relation to making it so the tooltips showed up when we clicked in the form’s password box, the tool tip being “password needs to be greater than 8 characters”. Once the 8 characters were put in, the tool tip disappeared.

The code looked something like this:

//Problem: Hints are shown even when form is valid
//Solution: Hide and show them at appropriate times
var $password = $("#password");
var $confirmPassword = $("#confirm_password");

//Hide hints
$("form span").hide();

function isPasswordValid() {
 return $password.val().length < 8;
}

function arePasswordsMatching() {
 return $password.val() === $confirmPassword.val();
}

function canSubmit() {
 return isPasswordValid() && arePasswordsMatching() && isUsernamePresent();
}

function passwordEvent(){
 //Find out if password is valid
 if(isPasswordValid()) {
 //Hide hint if valid
 $password.next().hide();
 } else {
 //else show hint
 $password.next().show();
 }
}

We practiced DRY programming by wrapping our resued methods, variables, etc in functions.

Day 5: Mobile Dropdown Menu

\"Day_5\"

We went over more of the same but learned some new methods and event handlers.

We learned about GET methods like

.prop()

which manipulates the DOM to get the property value of the first element in the set.

We learned about the

.change()

event handler with an anonymous function that we used to change the function of the dropdown menu. Before we had a Go button but what good is that? You would select the dropdown and the link to say, an FAQ, and then press \”Go\”. Well what about just going to that page when you touch or click on the dropdown menu link for that page? That is what we did by changing the whole behavior of the dropdown, and eliminating the appended Go button. Here is the code:

$select.change(function() {
 //Go to select\'s locaiton
 window.location = $select.val();
});

The

.val()

gets the select input without passing any arguments. Which is just clicking on a link that we specified in the HTML and the class we referenced in the jQuery that holds that link.

jQuery isn’t at all bad. And I have two more things to go to complete that part of the Front End Web Dev Track.