Home » /Home » General Updates

Category: General Updates

Gauging My Progress

As I step through The Web Developer Bootcamp, I am beginning to realize just how much I’ve learned the last two years and how it is beginning to codify in my brain.

I am coming from a Humanities background but I have always had technical chops, working with circuits was a thing I liked to do; improvising is fun.

I was, a long time ago, a Computer Networking major but decided that I wanted to build computers instead of administering them. Before class started I chose Electronics Engineering Tech at my local 2 year. I did very well. I got an A in my first class, being the only black person as well, by the middle of the semester, the only female. This was the early 2000s.

I’ve always had technical chops. In fact, I taught myself electronics over the course of two years and was competent enough that my physical science professor wanted me to help her teach the electronics section. She was a physicist and my hero.

I prefer being an autodidact, if you haven’t guessed by now.

Translating Hardware Chops into Software Chops

I just played around with circuits and diagrams of those circuits with basic logic structure knowledge. I had and have the ability to learn logically complex things. The fact that it has taken me two years and 5 CS classes as well as learning on my own makes me feel really silly. I have always been the smartest person in the room. It is quite humbling to struggle with something that you feel you should get right away.

Sometimes I look at other newbies and see they struggle with simpler concepts than I did. It makes me feel better 1 but I also want to help them become competent.

The Web Developer Bootcamp and Leveling Up

I have been studying for two weeks practically non-stop. I am seeing so much progress that it encourages me to keep going. I can ask relevant questions of the material, when I get stuck instead of running to Stack Overflow or Slack/Gitter first thing, I open up Dash Docs and read the MDN, which is beginning to make a lot more sense to me.

I can write simple algorithms much more easily than just a few months ago. I don’t know what happened or what switch flipped but I am really, really happy.

Being Happy For Other Developers Success, However…

I see developers all around me getting jobs. I am happy. I am really happy for them. This isn’t a fake happy. It is how things should work. You never begrudge another’s success.

I do, however, feel a pang of longing when I see the tweets and YouTube videos. I am waiting for my turn.

The helpful thing for me right now is knowing I am about a little over a half a year from being ready to apply for developer jobs. It is the solace I need to not get discouraged.

The Code

Some of the things I worked on.

Arrays

//Print Items in an Array in reverse //

function printReverse(arr) {
  return arr.reverse();
}
printReverse([1, 2, 3, 4]);

// Refactor to print on new line
function printReverse(arr) {
  for (var i = arr.length - 1; i >= 0; i--) {
console.log(arr[i]);
  }
}
printReverse([1, 2, 3, 4]);

// isUniform //

function isUniform(array) {
  for (var i = 0; i < array.length - 1; i) {
    if (array[i] !== array[i + 1]) {
  return false;
   }
 }
  return true;
}

// sumArray //

function sumArray(arr) {
  var sum = 0;
  arr.forEach(function(element) {
    sum += element;
 });
  return sum;
}

// max //

function max(arr) {
  var maxValue = 0;
  arr.forEach(function(element) {
    if (maxValue < element) {
  maxValue = element;
    }
  });
  return maxValue;
}

Objects

//Movie database for object practice

var movies = [
  {
title: "Taxi Driver",
hasWatched: true,
rating: 5
  },
  {
title: "The Social Network",
hasWatched: true,
rating: 5
  },
  {
title: "Steve Jobs",
hasWatched: true,
rating: 4.5
  }
];

function stringBuilder(movie) {
  var result = "You have ";
  if (movie.hasWatched) {
    result += "watched";
  } else {
    result += "has not seen";
  }
  result += '"' + movie.title + '" - ';
  result += movie.rating + " stars";
}

movies.forEach(function(movie) {
  console.log(stringBuilder(movie));
});


  1. The arrogant, competitive little snot I was still peeks through sometimes. 

Making The Tedious Easy With MDL Templates

Wanting to just get the app up and running 1 , I sat down yesterday and paged through some of the Material Design Lite Docs.

For some reason I never noticed the tab that said, Templates. I about cried.

I really didn’t feel like getting into too much detail with the HTML and CSS 2 so this was a welcome addition to what I already had.

Essentially, there was a template called Text Heavy Website. Since my app is processing text mainly, I hit the jackpot.

There are still some things I need to add, like the sidebar that will hold the texts that the user stores on the database but most of the boilerplate is written.

Good guy Google!


  1. Actually working on it, you know. 
  2. This is just boilerplate; I have a lot of HTML and CSS to write as I add more components. 

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 

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. 

Two Years of Code Newbie in Pittsburgh

I have been writing here at Code Newbie in Pittsburgh for almost two years. It will be two years on December 26th.

I got the idea for the blog at my mom\’s house over Christmas break. I got a few iTunes Gift Cards, bought Byword and the Byword Premium upgrade to publish to WordPress and I drafted my first post on the free WordPress.com host.

I have written here every month since January of 2015. Last month there was only one post as I haven\’t done a serious amount of coding lately and anything technical or extremely technical I write over at my GitHub Page Blog.

You really need to write a lot of blog posts to get into the habit and any time off will spell atrophy and I am currently experiencing this.

This semester was easy and while I had a lot of coding to do, it wasn\’t like in previous semesters and it wasn\’t as difficult.

The winter break is just that– a break. I plan on doing some OSS work and coding so that I have at least something to write about. I will probably pick up Free Code Camp again. Lots to write about when I do that. 🙂

Semester is Over. How Did I Do?

InfoSci Class

Still waiting to take my InfoSci final. I was sick during our exam with a very ferocious sinus migraine so I am making it up today.

InfoSci was an interesting class. While I am probably going to end up with a C in this class, it isn\’t because it was anymore difficult than my Computer Science class and more because I just didn\’t schedule my classes right. Can\’t take a night class and then have to get up earlier the next day and go to a class.

I screwed myself over a couple times, one, on the mid-term, where I felt I had studied enough Binary Numbers to get an A or B on the midterm. I hadn\’t the grip on Binary numbers that I thought and my luck was such that the test\’s weight was in binary numbers. I ended up with a C.

I failed our Logic gate homework because I didn\’t associate AND, NOT, OR, XOR, and NAND gates with the logistical operators in programming. Had I made that connection, I would have aced it. I didn\’t put two and two together until the following class, and by then it was too late.

CS Class

I aced this class. I seriously did. The lowest grade I got was on a quiz and that was a C. I got an A on everything else. This was an intro web dev class. I am taking the intermediate web dev class this coming semester as well as and intermediate programming with Java class.

Trello Board

Here is the Trello board for my grades:

What Will the Next Two Years Hold?

I will hopefully be graduated by the time two more years is up. I will probably be actively seeking employment in the \’burgh and then, after experience is gained, moving out west. I wonder what I will call this blog then? 😉

Working on the E-commerce Site for Class

\"commerce-min\"

 

I am going to be making a mock ecommerce site for my Web Development class final project.

It consists of two parts:

  1. The foundation with HTML and CSS, CSS animations, Bootstrap, etc., and
  2. The final project, with some meatier stuff, like JavaScript and jQuery.

I started a mockup of a Bootstrap site, which is inspired by w3layouts.

\"iPhone

Finding a Place to Serve and Host Static Files

When I got the assignment, I decided on using Heroku, much like our instructor did, to serve our static class website. I searched all over and found that you would need to have a php file, index.php with some very basic code that would point to your home.html file in order to serve up your site.

This worked and would have served me well. But I was talking to my pal Alex Gwartneyon Skype and I mentioned what I was working on and how I served up assets over Heroku with PHP. He told me you could do the same thing with an Express server and Node.

So we set off to get it set up. It was not easy.

Getting the Site Set Up

Alex and I spent two whole hours troubleshooting this. I knew from previous experience that you needed to have a Procfile and some npm dependencies. Alex helped me get a package.json file up by using npm init which I may have used once or twice but totally forgot about.

I installed Express into that directory, etc. I did not include a Procfile immediately, though I should have.

We worked on it for a while. He had trouble getting the Express server up on his end to show me what it could do. He got his end set up, then we worked on getting my site up on Heroku.

Two Hours Later…

Everything came up roses. There were certain things in the Procfile that needed to be added. Opening ports in the Express server for Heroku to look for was a pain, but all in all, it was successful.

Just in case you’re wondering how, here are a few gists. Edit them for what you need.

 

My site is The Lens Cap which is just a text file for now.

Understanding Hoisting in JavaScript

\"\"

 

With all this talk about ES6 and block scoping with let and const, I thought it would be a good idea to talk about hoisting in JavaScript.

This won’t be a thorough exposition. You can find a great deal of information on GitHub. What I want to do is give the basics.

The JavaScript Interpreter

There are parts to the JavaScript compiler you’d need to understand to get a grip on what happens when a variable is hoisted or lifted to the top of a scope.

There are three parts to the compiler:

  • The Engine
  • Compiler
  • Scope

Looking at this statement: var b = 10, you’re probably assuming this is one statement, and that the JavaScript interpreter sees it the same way. It doesn’t.

The interpreter takes this statement and breaks it up into what are called tokens. To the interpreter, this statement and its tokens are var, b, =, and 10.

The engine part of the interpreter will compile these tokens into an array and subsequent tree of nested elements to execute. The code is compiled right before it is executed.

What is Meant by Hoisting?

I am assuming here that you know what scope is, as I have talked about block scoping before with the same assumption. If you don’t, I’ll cover it in more detail another time. For now, I am just going to focus on hoisting.

Dictionary.com definition of hoist:

verb (used with object)

1.

to raise or lift, especially by some mechanical appliance:

to hoist a flag; to hoist the mainsail.

You can think of hoisting a variable as lifting it to the top of whatever scope it is in.

The difference here is that JavaScript hoists declarations and leaves the initializations at the bottom of the scope.

Example:

[javascript]

console.log(foo);

var foo = 3;

[/javascript]

Take this statement:

var foo = 3;

JavaScript looks at this and sees:

var foo; and foo = 3;

The first part of the statement is compiled, the second part is executed. It is then compiled as:

[javascript]

var foo;

console.log(foo);

foo = 3;

[/javascript]

As you can see, the declaration in this scope is the only thing that was “raised” to the top of the scope. The initialization remains at the bottom.

Just the Basics

I encourage you to check out the link I linked to above. Kyle Simpson is an amazing teacher and I’ve learned so much from the YDKJS series. You can find the free version on GitHub.

Function vs. Block Level Scoping with let and const

This is an exposè on the difference between function and block level scope using let and const in JavaScript. The following explanation is how I’ve come to understand them so far 1.

Function or Lexical Scope

Take this code:

[javascript]

function foo(a) {

var b = 2;

// some code

function bar() {

// …

}

// more code

var c = 3;

}

[/javascript]

Here we have a function foo that sits in the global scope. Nested within this scope is the function bar() and nested inside foo. Also within foo, we have the variable declaration var b = 2; and var c = 3;. Each of these belong to scope— foo to the global scope, var b, var b, and var c all scope to foo. Each of these scopes have access to functions and identifiers of the scopes outside them. None of these functions or identifiers are accessible outside of the function scope foo.

Disadvantages of Function Scopes

  • Hoisting by the interpreter

    The first pass the interpreter does on var processes it and lifts it to the top of the scope. It then processes the function declarations as uninitialized variables. 2

    An example of hoisting:

    [javascript]

    function bar() {

    if (!foo) {

    var foo = 10;
    }

    alert(foo);
    }

    bar(); // alerts 10 instead of reference error

    [/javascript]

  • Having to use an IIFE 3

    For beginners like me, this is confusing syntax. I see all IIFE as closures and I am sure that’s not the case. For instance:

    [javascript]

    (function(){

    // all your code here

    var foo = function() {};

    window.onload = foo;

    // …

    })();

    // foo is unreachable here (it’s undefined)

    [/javascript]

    In this example, the parentheses before function turn this block of code into a function expression. The final (); calls the function immediately after it is created. This creates a block scope for foo because it is nested within the function expression and invoked immediately. The syntax is hard to understand and thus remember.

Creating Block Scopes with let and const

You can easily create block scopes with let. It is a new keyword in ES6 that makes it stylistically easier to create a block scope in some block of code (between {...}). The variable cannot be accessed in the global scope. Take this code for example:

[javascript]

if (a) {

b = a * 2;

let a = 5;

}

console.log(b); // Reference Error! a is not defined.

[/javascript]

The error here is because cosole.log() can’t access the a variable as let scopes it to the if block.

let also signals to another developer that the identifier you’re using will be mutated at some point along the way, at least according to Eric Elliott. This is why he suggests using const for immutable identifiers.

const

This creates block scope but allows for the data the identifier holds to be quasi immutable. The data can be mutated. const only is immutable in the sense that it binds the data to the identifier, and thus should be used when only when you want to treat a value as non-reassignable. In this instance, const is not like CONST in Java and other languages.

You can actually make a const value immutable by adding object.freeze() to it.

So let or const?

If you took a minute to read the article I linked to by Eric Elliott, you’ll see his strong opinion in favor of const. He also stated that var is the weakest link in ES6. But Kyle Simpson had something interesting to say about it

let improves scoping options in JS, not replaces. var is still a useful signal for variables that are used throughout the function. Having both, and using both, means scoping intent is clearer to understand and maintain and enforce. That’s a big win!

Thoughts

I am still not sure which is the right one to use and when. I am sticking with let for now, whenever I need block scopes. It is important to note you don’t have to use block scopes all the time. A mixture of function or static scopes and block scopes are fine in the same document.

What do you think? Are you taking advantage of ES6’s let and const?

  1. StackOverflow ftw
  2. An aside: In JavaScript, the interpreter will hoist variable declarations but not initializations.
  3. Immediately Invoked Function Expression

Leveling Up as a Programmer

\"laptop-cellphone\"

I’ve noticed something these past couple days:

I am leveling up as a programmer.

My understanding of certain concepts is increasing. I talk about simpler concepts with clarity and authority.

Building the Random Quote Generator and having to Google everything and get feedback from different places helped me not only grok the simple and some intermediate stuff, it boosted my confidence as well. I wasn’t lacking for confidence, because if I was, I wouldn’t have approached the Pitt alum for that project that fell through. But I digress.

Looking Over Old Assignments

I was trying to figure out which projects to showcase on my GitHub. I learned how to host my front-end projects on GitHub Project Pages and now have a place to point people to other than CodePen.

So while I was in my GitHub I went through my CS 0401 assignments repo that I had made private as requested by the professor (I am showcasing it now so I made it public again). I looked at the Bookcase project and instantly knew what I could have done better. For instance take this code:

import java.util.Scanner;

public class Bookstore {

    Scanner keyboard;

    public Bookstore() {
        // initialise my scanner
        this.keyboard = new Scanner(System.in);
    }

    public static void main(String[] args) {
        // I create a new point of sale
        Bookstore b = new Bookstore();
        // start selling things
        
        boolean customer;
        
            // 1 - Create a new cart
         Cart cart = new Cart();
            
         customer = b.moreCustomers();
            
         b.showInventory();
         b.chooseFromMenu();
         
         while(b.moreCustomers()) {
            
              cart.addABook();
              cart.removeABook();
              cart.addBookmarks();
              cart.removeBookmarks();
              cart.addPaintings();
              cart.removeAPainting();
        }
    }

Absolutely heinous.

I should not have named the constructor the same as the class. The constructor is a type in the Java namespace and the method is a different part of the Java naming convention altogether. It also isn’t allowed because I used public Bookstore() instead of public void Bookstore() which the void return type means it will not return a value. However if you look at it, I am expecting the constructor to return a value because I omitted the void return type. You cannot call a constructor with the same name as a class with it returning a value. That’s not how Java works.

I also didn’t call the methods I created inside of main. I don’t know why, but I didn’t finish it so maybe that has something to do with it. I think I did finish it but didn’t get it to run.

Debugging is Easier

I had to troubleshoot a couple problems with hosting my projects on GitHub Project Pages, one being mixed content when serving up the page over https. I didn’t know why my project was insecure. It kept getting blocked in every browser I tried. It took an hour to figure out what that error meant: I was serving up a mixture of https and http scripts in the same document. I changed the API call to https and my Random Quote Generator project became secure again.

Thoughts

I still have a long way to go. I am warming up to Java as JavaScript’s ES6 syntax mimics a lot of the OOP naming conventions in Java which makes switching back and forth between them as an intermediate programmer easy enough, even though JavaScript isn’t technically OOP and the class keyword isn’t the same as in Java. I am really excited right now. I am growing and it feels good after a year and a half of learning.