Tag: programming

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. 

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. 

CRUD: My New App, Check Yo Self

I have taken a bit of a break from the coding/learning thing as I suffer from a bit of depression every now and again, outside of the usual. It’s a woman’s thing, as they say.

So while I was a bit down and cantankerous I took a break to tweak a few of my sites and read some documentation. After the bout of depression subsided, I dove into SQL.

Create, Read, Update, Delete: CRUD

I asked around in the Code Newbie Slack and asked my buddy Alex if I could use localStorage to store the markdown documents.

Let me backtrack.

When I was designing the app, I got the idea of having the markdown documents collect on the side of the app, sort of like the design template I was using. I knew I’d need to store those documents and really didn’t want to dive into databases.

I thought about using localStorage. Alex told me that localStorage has a capacity limit. I really don’t know how many texts someone would store and come back to, and while text files are minuscule, I don’t want to risk it.

I could go the I Need a Resume route and use setSessionCookie which would require less overhead. But if the user clears their cookies, all their texts would be wiped out.

I still plan to use setSessionCookie but I am not sure how I am going to work it in with storing the texts in the database.

CRUD is a SQL thing. 1.

ORMs and JavaScript May Save Me, Big Time

While learning SQL at Treehouse, Andrew Chalkley, the teacher, explained ORMs, or Object Relational Mapping software that helps you interface with a database in different languages. For instance, ActiveRecord for Ruby and Hibernate for Java.I was having a hard time understanding how to store the texts the users input, store the texts, and retrieve the texts up until that point in the course. Everything we did in the course was hard coded and I definitely understood I could not do that. ORMs to the rescue. Searched for an ORM for JavaScript and there are many, either through npm or other means, there are plenty. Still researching. Since I am using Postgres on Heroku, it needs to play nice with it and I found one called sequelize.js that looks like it will do the trick:


var Sequelize = require('sequelize');
var sequelize = new Sequelize('database', 'username', 'password');

var User = sequelize.define('user', {
  username: Sequelize.STRING,
  birthday: Sequelize.DATE
});

sequelize.sync().then(function() {
  return User.create({
    username: 'janedoe',
    birthday: new Date(1980, 6, 20)
  });
}).then(function(jane) {
  console.log(jane.get({
    plain: true
  }));
});

This snippet seems quite easy to grasp and will make interfacing with Heroku’s Postgres addon even easier. 2.

Coding Again

I plan on scanning more docs and getting the HTML up and going. I felt overwhelmed with the amount of stuff I needed to code. This is one area that hinders me still: not breaking big projects up into little pieces. I decided I have been at this enough that I should actually take Russ’s 3 and break that shit down. I fired up Drafts app on my iPhone and wrote down every task I needed and wanted to complete. Then I shifted those over to OmniFocus and Taskpaper. There are more tasks to add but I feel a sense of relief knowing that the ideas are down, and that I should work on one small bit of code at a time.

Thoughts?

I never know how to end these things. Let me know what you’re hacking on in the comments. Or not. It’s all good. ????


  1. Create: INSERT INTO, Read:, SELECT * FROM, Update: UPDATE SET, and, Delete: DELETE FROM. So that’s why they call database apps that are simple CRUD apps, which I understand finally. 
  2. Check out sequelize.js 
  3. Code Newbie field general, 1000XP 

Hacking on a Project: Getting Out of the Tutorial Loop

For a long time now, I have been increasingly bothered by my lack of Open Source contributions on GitHub 1 and of real world projects to put on my portfolio and resume.

Everyday, practically, for the past two months, I have been irritated, by my lack of production. I have the skill to build projects but all I was doing, am doing, is learning, being stuck in the tutorial loop my buddy Alex Gwartney and Nick Queen talked about on Developer Soup 2.

Forcing Ideas

Thinking about building projects, having ideas, for those projects, or coming up with ideas is the hardest part of the whole thing.

For weeks I have been researching a library to build to open source, but I really couldn’t think of much. An XML to JSON parser? Been done. Opening up a new terminal with Node on macOS? Meh.

I took to Code Newbie Slack to ask around. Someone gave a suggestion but he said he personally tries to not force things like that.

That made a lot of sense to me. The block I was in was because I was looking for things to code that I didn’t need or was just forcing the idea just to have an open source project to my name. That isn’t a great idea.

Good Programmers Scratch Their Own Itch

I was sitting down to write an article in Ulysses, which I always do, because of the markdown features. I am often frustrated my editing and finding grammatical errors and such because apps like Grammarly and Hemingway get upset when you paste in Markdown.

I came up with the idea of tapping into an API for checking the grammar of markdown documents.

It’s something I need. It’s something people have done in a way but at the command line and now in a broader scope. So I’ve found my project.

Coding the Thing

I am using Material Design Lite for the UI.

I’ve gathered a few snippets for elements that I’d like to use the most important one being for the modal polyfill for the <dialog> tag as most browsers don’t support it:


 (function() {
        'use strict';
        var dialog = document.querySelector('#modal-example');
        var closeButton = dialog.querySelector('button');
        var showButton = document.querySelector('#show-modal-example');
        if (! dialog.showModal) {
            dialogPolyfill.registerDialog(dialog);
        }
        var closeClickHandler = function(event) {
            dialog.close();
        };
        var showClickHandler = function(event) {
            dialog.showModal();
        };
        showButton.addEventListener('click', showClickHandler);
        closeButton.addEventListener('click', closeClickHandler);
    }());

This is just one example of the way you could use the polyfill.

Diving In = Happiness

Spent a lot of time looking at documentation and pumping out a little bit of the HTML. Still trying to wrap my head around where to go and how so I am probably going to make a mindmap in MindNode and export it to TaskPaper or OmniFocus. But either way, I need to find some structure in this to actually know how to go forward.

Building things makes me extremely happy and want to get out of bed and work. I actually got out of bed in the morning instead of mid-afternoon because I knew there was interesting work waiting for me.

It’s a good time to be alive, that’s for sure. 😀


  1. My first real pull request was closed because someone else took it up. I also went out of the scope of the issue. 
  2. Couldn’t find the episode I was on. The show is on permanent hiatus. 

From Web Development to Software Engineering

So this is a brief post about my intent for my career and prospects for myself.

I love web. But I don’t want to be about that life.

The more I do software engineering, the more I fall in love with the challenge and the languages1. Classical OOP is nice and diving into functional programming is the next logical step, with Java recently adding lambda functions and some other nice functional features.

What About The Blog Name? What About JavaScript?

Still going to work JavaScript– kind of can’t avoid it. And the blog name is changing once again2. I love JavaScript tooling and look forward to learning more about React, Node, Redux, etc. But my main focus is software engineering for now.

Will You Go Into Web At All?

As a first job? Not sure. It’s unavoidable at this point. Whether I do architecture or backend remains to be seen. I’d prefer to have some say over an interface because I like visual things, but I am not a good designer, and I don’t want to learn how to design; that would take away from my main focus, programming. So getting better at Java for now is important to me. I will be finishing out Free Code Camp because I started it and I will also finish up my cousin’s ecommerce site which uses PHP. But after that, it’s software engineering all the way.


  1. Specifically Java, C, Swift, Go, and C++. 
  2. Sorry about that. 

100 Days of Code Log, Day 2

\"\"

Day 2: 1 October 2016

Today’s Progress:I worked on the index.html file. I added a different color navbar, added some more shepherd anchors. I also am going to be using slick jQuery plugin for the image slider and will be deleting most of the CSS from the template I downloaded.

Thoughts: Finding all kinds of libraries is cool but I do want to edit them for what I need. Shepherd, the way I installed it, isn’t as customizable as I’d like it to be and I am thinking of uninstalling it and starting over, creating a source file with the library and adding the script tag.

Link to work:You can find the update on Heroku

Piecing Things Together

I am piecing together different elements from templates and libraries but I am going to be scrapping most of the premed code. I am still thinking about where this is headed.

As I said up top, that I need to recreate Shepherd functions in a separate js file. I have the source code and I want to study it. Going to customize the color and positions of the tours. I need to look at the docs some more to see how to change the color and boxes of the anchors.

Starting Day 3

I\’ll be coding on day three but I may not get too much in. There are domestic things to do and errands to run so I don’t know how much code I’ll write.

We will have a checkin in CS 0134 to see where we are in the project. I have a skeleton but I am wanting to have more.

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.

First Semester at Pitt. Not What I Wanted to End Up With.

\"GPA\"

“Failure should be our teacher, not our undertaker. Failure is delay, not defeat. It is a temporary detour, not a dead end. Failure is something we can avoid only by saying nothing, doing nothing, and being nothing.” – Denis Waitley

I failed my final project, in my first semester at Pitt.

It was very difficult. Part of my problem was not understanding the instructions. The other part was forgetting things I learned earlier and not putting in a ton of effort into reading the chapters. I thought I had to read the chapters in order to grasp everything. The chapters were long. The key points, everything I really needed to know, was on the slides.

But I digress.

I did read the chapters. I read them very quickly. Sometimes I had to read them again. Sometimes I didn’t grok what I read and had to ask about it. Sometimes I had questions about something. All of this could have been avoided, this F on the final project, by reading the chapters over.

I Can Learn From This

\"Pain\"

“If you don’t try at anything, you can’t fail… it takes back bone to lead the life you want” – Richard Yates

BigRigg, my professor, was really helpful. I cried. I got a C on my final. It all just sucked so hard. My mom said:

You’re better than pitying yourself. You’re better than a C yes but this is your first time in CS.

BigRigg helped to:

This is the first time you’re ever seeing this. You CAN do this! Don’t let an Intro class get you down!

So I stopped crying and thought about what I could do better.

BigRigg told me the day of the final she knew what my issue was. She told me to get working on Project 3 over the break and we’d sit down and work on it together next semester.

While it sucks, I am better equipped to tackle this problem. I’ll need to if I am going into CS 0401, the Intermediate Programming class at Pitt.