How @FreeCodeCamp Helped Me Get a Job

Back in October 2017 I finally landed an IT job, after starting to teach myself coding in August 2013. The job I currently have is not really a developer job per se, but I do work with JavaScript and SQL and the HL7 protocol, as well as various specialized medtech systems such as Powerscribe and Mirth Connect.

My programming story begins in middle school, in the dark ages. I had already played with Algol – yes, using the old punchcards, and now I learned Basic. But sadly, I was trying to avoid being called a nerd (hey, I was a teenager) and so I drifted away from programming as time went on. In college, I majored inm Mechanical Engineering, which led to me taking classes in Quickbasic, Fortran77, and Pascal. In my MBA program, I messed a little with HTML and CSS – this was the early days of the Web – but as I said, I was a mechanical engineer, and that was where I was building a career.

In 2010, though, thanks to the crash of 2008, all that came crashing down. By 2013 I’d had enough and I started to teach myself to code. I found that I really enjoyed it – and wondered why I had ever quit at all! I took a certificate in Software Development at the local community college but it didn’t leave me much to show employers – building a portfolio isn’t part of the curriculum, although I learned quite a bit about programming. So when, in Spring of 2015, I discovered FreeCodeCamp, I was pretty excited. Here was a program with tangible lessons, a structured schedule, measurable results, and that would leave you with a batch of projects at the end for a portfolio.

And best of all, it was free!

So I began to work through the lessons, a little at a time while I worked part-time jobs to survive. A lot happened in my personal life too, most of it not so good. But I kept chipping away at the lessons and the challenges and finally in summer of 2016 I earned my front end devloper certificate, and had a nice portfolio of projects to show for it.

When I interviewed, my portfolio supplemented my resume and showed that I had the JavaScript skills needed and also showed that I could learn new things and apply myself. I wouldn’t have gotten the interview without it.

So now that I have a job, I’ve been focusing on learning the technologies used there, and in the meantime, I’ve been trying to learn React and work on the Back-End certificate. I’ve also been working through the beta for the next iteration of FreeCodeCamp, which has a lot more on CSS and SASS and so on. It’s an ongoing voyage, and I’ve really been enjoying it so far.

Update and Coming Events

I haven’t written her for awhile and the reason is quite simple: I started a new job. In addition to that I kept the part-time minimum wage job that I was also working. Throw in the fact that part of the time I am a single dad, have a house to keep up, and am still learning programming, and you end up with a lot of stuff to do. That said, my time management skills have slipped, and now I am working on getting back on board the train. I wasted time on Instagram, ridiculous political arguments on Facebook, and getting lost in the endless articles on Medium – not to mention Bullet Journal blogs and Instagrams.

Yes, I’ve fallen into the Bullet Journal craze, but to be honest, mine is as utilitarian and minimalist as it can be. No drawings, no fancy fonts, I don’t even use a ruler. But it has helped quite a bit anyway. Things that were slipping through the cracks are now getting caught. I haven’t gotten back into the full “Getting Things Done” mode that I was a few years ago, but now I find that I actually have time, for example, to…write a blog post! So at some point I’ll do a post on how my BuJo works, and how I organize and all that stuff, but for today, let’s hit some highlights.

As noted, I landed a job, in the IT field (at last). It doesn’t have as much development or writing code as I’d like, but I’m learning a lot about networks, how systems of different software work, and what it’s like to be on call pretty much all the time(!) I’ll do a post soon on how I got the job, how Free Code Camp helped, etc.

In addition, I’ve decided to build a Fintech app. Really, it’s a toy app, something for me to play around with and learn to use some new languages and technologies, as well as mock up something that could actually be used. It will involve me learning SASS, React, ArcGIS web development and Bitcoin.JS, as well as using the knowledge I have of HTML5, CSS3, JavaScript (I may even need to learn ES6), MongoDB, Node, and Express. It’s pretty ambitious, I guess, but I can do it in pieces and slowly get up to a full scale app.

Anyway, I’ll be blogging my adventures, hopefully weekly or more, and I hope you’ll jump in for the ride!

HTML Calendar Template

I maintain my church’s website here.  It is actually hosted by a higher level of the church (we call in a conference in the United Methodist Church) and they control the WordPress version updates, and things like that.  They also host any CSS files that are part of the themes we are able to use.

So what that means for me is: no custom themes, no customizing the CSS, no adding JavaScript files, and so on.  My add-ons are also somewhat limited.

So, I go back to old-school web development.  I use (horror!) inline CSS, and can put JavaScript stuff in the <body> of the document.

One thing we really wanted was to reproduce the calendar we send out in our dead-tree edition newsletter (we call it the Tidings).  There were lots of CSS options and other assorted stuff, but all required that I be able to upload files…which I couldn’t do, since that is controlled at the upper level.

So I created my own HTML template.  It takes me 10 – 15 minutes a month to update it.  I used a table format, and I use span and the CSS color property when I need color.  I make every other line have a gray background using the same inline CSS principle.  Here’s the template in case it’s useful to anyone out there, and you can see it in action here:

<table style="width:120%; table-layout: fixed" border="1" id="calendar">
<caption style="font-size: 3em; background-color: #eaeaea; text-align:center">MONTH NAME AND YEAR</caption>
<tr style="height:30px">
<tr style="height: 30px; background-color: #eaeaea">
<th>Sunday</th>
<th>Monday</th>
<th>Tuesday</th>
<th>Wednesday</th>
<th>Thursday</th>
<th>Friday</th>
<th>Saturday</th>
</tr>
<tr style="height:100px">
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr style="height:100px; background-color: #eaeaea">
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr style="height:100px">
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr style="height:100px; background-color: #eaeaea">
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr style="height:100px">
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr style="height:100px; background-color: #eaeaea">
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>

What I’m Reading – October 2016

The Winter Fortress: The Epic Mission to Sabotage Hitler’s Atomic Bomb by Neal Bascomb. So when I was a kid, Where Eagles Dare by Alistair MacLean was one of my favorite books (still is).  This is kind of like the real life version.  A commando team went into Norway during the War and took out the Nazi facilities that were racing to make their own Atomic bomb.  It doesn’t get more high-stakes than that and the fact that it’s all a true story makes it even more interesting.
25897720
Head First Mobile Web by Lyza Danger Gardner, Jason Grigsby.  I am continuing to work on my programming skills.  Mobile is an area I haven’t explored much so this is more of a way to let me see what’s involved.  It seems just figuring out what device the user has is tough, much less tailoring the experience for their specific needs!  Still, more people in the world have cell phones than working toilets, so mobile is the wave of the future.
19759436
The Rift: A New Africa Breaks Free by Alex Perry.  Speaking of those billions of cell phone users, Africa is one area where the usage of cell phones has exploeded due to the lack of infrastructure.  Most of what we see on the news is famine, war, and pestilence and yet, there is another Africa, wired and high-tech, out there.  This book tries to show both sides, using the Great Rift Valley as a metaphor of the two Africas.
30041310

Free Code Camp and Learning Express.js: What’s in Query

Next to last lesson! Note that we’re using routes here; these are very useful, and also we’ll be using them in the future quite a bit. Let’s get the Directions and Hints:

WHAT’S IN QUERY
Exercise 7 of 8

Write a route that extracts data from query string in the GET ‘/search’ URL route, e.g. ?results=recent&include_tabs=true and then outputs it back to the user in JSON format.

——————————————————————————-

## HINTS

In Express.js to extract query string parameters, we can use:

req.query.NAME

To output JSON we can use:

res.send(object)

So, we start by declaring our variables, as always:


var express = require('express');
var port = process.argv[2];
var app = express();

Next, we add the route, which is specified as “/search”. Also, we are using a get operation, per the directions. And of course, we need to listen on a port. Thus:


app.get('/search', function(req, res) {

});

app.listen(port);

In the last lesson, we used req.param.variableName to extract parameters. Here, the query string is where we want to get our parameters from. Now, I totally did it the hard way and parsed everything in my query string, then added it together and formatted it to get the answer. Oops. Anyway, to get the pieces of the query, I did this:


var results = req.query.results;
var type = req.query.type;
var page = req.query.page;

Then, using the send command in the hint, I outputted it like so:


res.send("{\"results\":\"" + results+ "\",\"type\":\"" + type +"\",\"page\":\"" + page +"\"}");

It works, and here is my final program.


var express = require('express');
var port = process.argv[2];
var app = express();

app.get('/search', function(req, res) {
var results = req.query.results;
var type = req.query.type;
var page = req.query.page;

res.send("{\"results\":\"" + results+ "\",\"type\":\"" + type +"\",\"page\":\"" + page +"\"}");
});

app.listen(port);

However, it turns out, as noted, that I did it the hard way. In the official solution, they merely retrieved the query string using


var query = req.query

And outputted it using


res.send(query)

Which is much more concise and simpler.

OFFICIAL SOLUTION:


var express = require('express')
var app = express()

app.get('/search', function(req, res){
var query = req.query
res.send(query)
})

app.listen(process.argv[2])

See you next time, for the final lesson!

Free Code Camp and Learning Express.js: Param Pam Pam

Moving right along!  We’re 3/4 of the way there now!

Let’s look at the Directions and Hints:

 PARAM PAM PAM
 Exercise 6 of 8
Create an Express.js server that processes PUT ‘/message/:id’ requests.
For instance:
    PUT /message/526aa677a8ceb64569c9d4fb
As a response to these requests, return the SHA1 hash of the current date
plus the sent ID:
    require(‘crypto’)
      .createHash(‘sha1’)
      .update(new Date().toDateString() + id)
      .digest(‘hex’)
——————————————————————————-
## HINTS
To handle PUT requests use:
    app.put(‘/path/:NAME’, function(req, res){…});
To extract parameters from within the request handlers, use:

    req.params.NAME

This one was pretty frustrating.  At one point, I had the correct answer and it didn’t work.  I ended up deleting everything and typing it all in again, and then it worked.  I figure there must have been a hidden character or something that was keeping it from working.  Who knows?  Anyway, here’s the explanation:

First, we declare the variables.  We require express, get the port from process.argv, and then set app to express() just like we have in the previous lessons in this tutorial:

var express = require('express');
var port = process.argv[2];
var app = express();

Next, we get the app.put function and set the port to listen:

var express = require('express');
var port = process.argv[2];
var app = express();


app.put('/message/:id', function(req, res){

});

app.listen(port);

 

Now, we turn to the rest of the hints, which aren’t that clear, like all the rest of the hints inall the node.js tutorials.

 

Okay, if we look at the require(‘crypto’) statement up there, you’ll see that the line that begins update() has a “+ id” in it.  We’re also supposed to return, along with the date, the SHA1 hash of the plus the sent ID.  Finally, we are told that our server will “process PUT ‘/message/:id’ requests.”.  The request comes in the form “PUT /message/526aa677a8ceb64569c9d4fb”.  Putting the clues together tells is that “id” is equal to the long string of letters and numbers “526aa677a8ceb64569c9d4fb”.

We need to pull that string of letters and numbers out and we do that with the other hint they gave us, req.params.NAME, except that obviously NAME is id.  So, we’ll call the result of that id and we have:

      var id = req.params.id;

So, now we’ll finally use the crypto statement and set it equal to a variable:

      var str = require('crypto')
            .createHash('sha1')
            .update(new Date().toDateString() + id)
            .digest('hex');

 

We defined id, of course, so now we’re good.

We still need to return this new string we created, so we’ll do that with res.send().  And then, we pass!

Here’s the final program:

var express = require('express');
var port = process.argv[2];
var app = express();


app.put('/message/:id', function(req, res){
      var id = req.params.id;
      var str = require('crypto')
            .createHash('sha1')
            .update(new Date().toDateString() + id)
            .digest('hex');
      res.send(str);
});

app.listen(port);

 

See you next time!

Free Code Camp and Learning Express.js: Stylish CSS

So we’re coming up on the end of the FreeCodeCamp ExpressJS tutorial.  This one is simple, almost too easy!

 

Here’s the directions and hints:

STYLISH CSS
 Exercise 5 of 8
Style your HTML from previous example with some Stylus middleware.
Your solution must listen on the port number supplied by process.argv[2].
The path containing the HTML and Stylus files is provided in process.argv[3] (they are in the same directory). You can create your own folder and use these:
The main.styl file:
    p
      color red
The index.html file:
    <html>
      <head>
        <title>expressworks</title>
        <link rel=”stylesheet” type=”text/css” href=”/main.css”/>
      </head>
      <body>
        <p>I am red!</p>
      </body>
    </html>
——————————————————————————-
## HINTS
To plug-in stylus someone can use this middleware:
app.use(require(‘stylus’).middleware(__dirname + ‘/public’));
Remember that you need also to serve static files.
## NOTE
For your own projects, Stylus requires to be installed like any other dependency:

    npm install stylus

Okay, let’s start by installing the stylus package.

$ npm install stylus
npm WARN package.json chat-example@0.0.0 No repository field.
npm WARN package.json chat-example@0.0.0 No license field.
stylus@0.54.5 node_modules/stylus
├── css-parse@1.7.0
├── debug@2.2.0 (ms@0.7.1)
├── mkdirp@0.5.1 (minimist@0.0.8)
├── sax@0.5.8
├── source-map@0.1.43 (amdefine@1.0.0)

└── glob@7.0.3 (path-is-absolute@1.0.0, inherits@2.0.1, inflight@1.0.5, once@1.3.3, minimatch@3.0.0)

We want to use this package to ‘style’ the HTML file we are serving.  Stylus is middleware, which I talked about here.  Let’s set up the outline of an express app:

var express = require('express');

var port = process.argv[2];
var filePath = process.argv[3];

var app = express();

app.listen(port);

Remember that they gave us the port and the filePath in the hints.

We are going to need to access the HTML file, and the stylus file.  This is a static HTML file, and we’ll serve it using a command we’ve seen before:

app.use(express.static(filePath||path.join(__dirname, 'public')));


Note that since we're using path.join here, we'll need to add a require statement for it:
<div>
var path = require('path');

Next, we want to take the line they gave us in the hints to get the stylus file:

app.use(require('stylus').middleware(__dirname + '/public'));

And that's really it!  Here's our final program:

var express = require('express');
var path = require('path');
var port = process.argv[2];
var filePath = process.argv[3];

var app = express();
app.use(express.static(filePath||path.join(__dirname, 'public')));
app.use(require('stylus').middleware(__dirname + '/public'));
app.listen(port);

See you next time!