Some of my favorite definitions of NPM

NPM is super awesome and I totes heart it. First coming into the world of Node.js and seeing the power of installing modules to add new functionality to my projects I was super excited. It also made sense when I heard or saw people call it “node package manager” since it was for loading and managing packages in Node.js.

But, I quickly learned how it was much more than that and how that definition limited how one could think about NPM. Most obvious is that even though NPM is bundled with Node.js you don’t have to use it solely in Node.js projects. It can be used to manage dependencies of a purely frontend workflow. You can also find lots of awesome CLI tools for making your shell life easier as well. I am also a huge fan of the purely silly packages that exist to bring smiles to people’s faces. I keep thinking about how I need to write more of these.

Through posts online and such I have seen that the folks who maintain NPM also feel the same way, that NPM is so much more than a Node.js package manager. On the NPM homepage you can see in the upper left corner a playful definition of what NPM stands for. It changes every time you load the page. I recently found myself refreshing the page repeatedly and taking screenshots of the ones that made me laugh the most.

So I present to you, my favorite “definitions” of NPM.

screen-shot-2016-06-22-at-8-51-47-pm

screen-shot-2016-11-05-at-3-29-24-pm

screen-shot-2016-11-05-at-3-30-35-pm

screen-shot-2016-11-05-at-3-31-04-pm

screen-shot-2016-11-05-at-3-31-18-pm

screen-shot-2016-11-05-at-3-34-36-pm

screen-shot-2016-11-05-at-3-44-59-pm

Teaching myself math from the beginning

Awhile back I read a book called Innumeracy: Mathematical Illiteracy and its Consequences by John Allen Paulos where they argue that a lack of understanding of numbers is just as detrimental as being unable to read or write. If you were to tell someone that you are illiterate they would probably be shocked and feel sorry for you. They would wonder how you get through life and probably offer help to find you a way to learn those necessary skills. But, the same isn’t true if you tell someone you aren’t good at math. “I’m not a math person” or “I’m not a numbers person” or something similar is commonly uttered by people and no one bats an eye. People often nod in acceptance or openly agree claiming the same for themselves.

But, not being good with numbers can have serious consequences on how we see the world around us. Things that are seemingly magical or special can actually prove to be statistically likely when observed mathematically. AsI have been teaching myself to write code I have begun to see things much more formulaically and I have come to see just how much I don’t understand in mathematics. Growing up I was much more into writing and other creative forms of expression. I did just enough as far as math was concerned to get by in school, so that I could move on to the next grade.

It is funny how as I have gotten older and working in code how much more I enjoy mathematical processes over creative ones. I do still think of myself as a creative person, but my creativity will likely get expressed more often within my love of technology.

Writing code has shown me how with a better understanding of math I could be much better at writing code. In some lessons I have found that it was a mathematical concept that got in my way rather than the code I was trying to write. For example, I was going through some algorithm tests and needed to write a function to produce the factorial of a number. I spent more time on learning what a factorial was than on the code that made it happen.

So, I have decided to go back and teach myself mathematics. Doing a cursory search online I have decided to go with Khan Academy as it is free and looks to have a lot of content. I am starting with their Arithmetic Essentials course. Getting a good foundation / reminder of the basics seems like the best place to start. Then I can get into the fun stuff after I remind myself of how long division actually works. Doing these courses has been humbling and eye opening to how much I rely on a calculator.

If you are interested in learning math better I would suggest checking out this article on how one person taught themselves math as an adult. It was a great starting point for me. If you have done something similar or have other resources you think I should check out I would love to hear from you. Let me know in the comments below.

Now, I should get on with my next lesson.

Writing an API about myself for my Github page

All Github users have the option to make a personal page ({username}.github.io) from a repo. I have long had one setup with no content in it whatsoever. To check it out in all of its blank white page awesomeness you can go here, if you really want. I’ve always wanted to use this page to make a simple portfolio for my projects and show off some of the things that I have done in the realm of web development. As I learn more and more about building things for the web I have come to realize that I really enjoy backend processes much more than frontend work, hence my focus on NodeJS. And since Github pages only support frontend things like Javacript, CSS, and HTML I haven’t really put much effort into designing this page.

But, I want to have something fun and interesting. The other day I had a great idea. I will write up a server that will return an object that describes me and the work that I have done. It will be a resume in a JSON object, a kind of API all about me. I can make the main endpoint return the whole thing and set other endpoints to the various sections of it. Then I can build out the page to make AJAX requests to this server. I will host it on Heroku likely, the server that is, and maybe even set a dropdown for the various endpoints with a button to send the request. Then I will display the raw object on the page. This is a project I can get behind and will actually want to build.

I will admit that I have seen this done before by others and I am no way saying that I am doing something unique here, but it will definitely be fun. One in particular I have seen and really like is one by Ashley Williams, who works at NPM. I figure this kind of project will turn out much better than if I just tried to make a fancy looking page to be flashy. I am even thinking of making it text only and I might have it display the raw object. This will speak much more to the kinds of projects I like to work on. As I have been writing this I am thinking about the various sections and how I could have them break down. One section could be for full fledged web apps and another for CLIs that I have made. This will be fun indeed.

Holy moly! I gave a talk about code I wrote!

As I have been teaching myself how to code I have been trying to go to various code meetups in the Seattle area. It is always fun to get into a room full of like minded individuals and hear people’s perspective on different web technologies. Most of them have talks of some kind where a couple people will present their idea on something in the realm of code. I have always wanted to give one and just recently got the opportunity to do it. I go to most of the BellevueJS meetups as they are usually pretty close to my work and are easy to get to after I leave the office.

A friend of mine, Matt, helps run it and after I put up my post regarding publishing my first package to NPM they asked me if I wanted to do a talk about that. I thought about it for a moment and said yes without really thinking about it. As I thought about it more the more it felt like a great idea. I have been wanting to do a talk about something and I could never really think of a topic. This would be a perfect subject for me to talk about as it is more about my getting over fears of putting code I wrote out into the world than the actual code itself.

So, I began preparing the presentation. I decided to keep it simple and had about five slides or so. Each one with a few talking points on them. I tried to keep it moving as I spoke and kept to the topics on the slides. I let the audience know that it was my first talk at the start which was more for me to get the nerves out than it was a disclaimer for them. It was a very receptive group and there was even a couple of questions for me afterwards. The group seemed to be mostly folks that are new to world of writing code, so it felt like a topic that resonated with them. At least it felt like it did to me.

I got some good feedback afterwards on the talk and on my package. Much like when I published the package it felt good to put myself out there. To be honest this was really more for myself than anything. Knowing that I could get up in front of a group of strangers and talk about code I wrote makes me feel really good about where I’m at as far as my learning in the field of web development. And also like the package, as simple as the presentation was, it felt great to get something out there. Now I can take what I’ve learned and use it for future things. I’m actually excited about the idea of speaking in front of people again. I plan on giving more talks about code and my views on it.

If you have ever wanted to give a talk about technology or really anything you feel passionate about I say do it. Take the leap and put yourself out there. It’s the only way to really know how it will make you feel.

I published my first package to NPM!

As I have been learning more and more about developing software for the web I have been wanting to be part of open source software and getting code I’ve written out in front of people. Part of that is writing about code here on this blog and another part is writing code and publishing it somewhere people can find it. I recently did a post about my plans to publish my first package to NPM and now I have done it, hooray! Just moments ago I published the package.

The package is an ExpressJS project boilerplate creator. It creates a simple directory structure along with some files to get started in creating an ExpressJS app. If you are interested in seeing it you can find the project here:

https://www.npmjs.com/package/express_project_boilerplate

I’ve done some basic testing and it works pretty well. There is on occasion errors that I have to look into, but running the package again seems to work. So, that should be fun to troubleshoot, yay!

But, really getting this project out in the world is really meant to be the catalyst for me to get over my fears of putting code I’ve written out there. It may not be the most sophisticated and it may not even be the best way to do this, but it is code I’ve written and it does the thing it is meant to do. That is pretty cool to me.

Let me know if you have any questions in the comments!

Deploying my first app to Heroku

I recently checked off a couple of goals for myself in learning web development, deploying an app to Heroku and building an app that uses the Smartsheet API. I was able to do it with one project, a Smartsheet based quiz game. It has a familiar style and game play to a certain well known and trademarked game show. I originally made this game as a simple HTML page using JQuery to hide and show the questions and answers. It worked for its purpose, but was difficult to maintain since the questions and answers were in the markup. If you wanted to edit the game you had to go into the HTML. I also didn’t have it hosted anywhere so to use it you had to share a folder and open the index.html file.

I started to think how it would be a great project for an app hosted somewhere that could have some kind of database of questions and answers to create a new game board each time you played it. Naturally, I thought it would be great if that collection of questions could be stored in a sheet in Smartsheet. At the time there wasn’t a method to use the Smartsheet API with JavaScript, but I found out that a JavaScript SDK was being built using NodeJS. So, I patiently waited and once it was available started working out ideas for how the app could work.

I took some time to get to know the Smartsheet API and how to work with it in Node. Once I felt comfortable I began working on the app. During this time I also worked on learning how to build apps in Express which I used in the project. It is an Express app built on top of Node with Jade, or I guess I should say Pug now, for the view templates. As I’ve been working on my learning to write code I have come to really enjoy working on back end development work over front end. The more I learn about HTTP requests and piping data into streams the less I am interested in writing click events or the hex values of colors. The process to pull the data from Smartsheet and randomly build the object for the game board was a really fun logic problem to solve.

But, I guess you can’t call yourself a full stack developer if you can’t write some CSS to go along with your POST requests. Once I had the project done and functioning it was time for the fun part of deployment. I chose to put my app up on Heroku. I had a little experience with deploying apps there before, but nothing I built myself, only apps from tutorials. It is really simple to deploy to Heroku as they make it really easy. I published the app and visited the url to see the dreaded “Application Error.” I should note that I attempted to do this deployment on a morning before work. I finished up the functionality and layout of the app the night before. I thought about publishing it then, but in the interest of getting a good night of sleep I chose to not do it. I woke up the next morning with it still on my mind and had the great idea of deploying the app over breakfast. I started troubleshooting the errors and almost forgot to go to work as I got so involved in research. I ended up bringing my laptop to work to finish it up in my free time.

Looking at the app I realized I hadn’t updated my port to the environment variable so that it loads to the assigned port. Instead it was still going to port 3000, which I was using for testing. I adjusted my app.js file and updated the app on Heroku, but still got the error. Looking at some support docs I found some mention of supported versions of Node and since 6.0.0 had just come out my version of 5.x didn’t look to be supported anymore. I updated my version of Node and the app still worked locally, so I pushed that change to Heroku. This allowed me to load the first page, but the game board failed with the same error.

Looking at the app logs I saw it wasn’t finding needed environment variables. I remembered that I am using dotenv to set some environment variables so that I can connect to the Smartsheet API, but keep them out of the files I am pushing up to Github. Call me crazy, but publicly displaying my API access tokens seems like a bad idea. Next, I looked up how to set the environment variables for the server for my access token and everything started working! Once the server could connect to Smartsheet for the data it was able to do everything it needed.

Now the game is up and running. It is awesome to think about how an application I built and designed end to end is on the internet. I definitely learned a lot in regards to Node, Express, and especially Pug (Jade?) since it was my first time using a template language to build out a front end. It also gives me a great idea of where I want to go next in my learning. Now that I’ve got a good understanding of Node and Express I’m looking to start learning Mongo and Angular to complete the rest of the MEAN stack. I’ve joked around with the idea of making apps that work with Smartsheet are like SEAN apps(Smartsheet-Express-Angular-Node). It would be awesome if that became a thing.

If you want to check out the Smartsheet quiz game app you can find it here:

https://smartsheet-quiz-game.herokuapp.com/

And the Github repo is here:

https://github.com/daveskull81/smartsheetQuizGame

I’d totally be interested in any feedback or ideas. I have a list of a few things to add for a next version, but it would be cool to hear what others have to say. Let me know in the comments! 🙂

Building my first NPM package

As I teach myself to write code I’m trying more and more to get involved with open source projects and to contribute my own code to the greater JavaScript ecosystem. NPM is an awesome resource I have used quite a bit in my own projects to find helpful packages and it’s time I start paying the community back with my own code.

Last Fall I decided I wanted to create my own package as a learning process, but I couldn’t really think of anything to build. I mulled over the idea and nothing exciting came to mind. I chose to not force the issue and worked on other things. I thought to myself that I should just work on other projects and as I work I should think about the processes I’m going through. If there is something I’m doing often by hand it could be a great idea to automate it with a package and if it is something I find useful others might find it useful as well. That would make a great idea for something to publish to NPM.

A few weeks ago I had an idea. I really like working with Express to build Node apps. It makes routing super easy and it’s simple to get something up and running. In the Express documentation there is mention of a project generator. I’ve tried it out and it definitely does what it advertises, but after working with it a few times I found I was editing the folder structure pretty extensively to have it the way I like working.

So, this will be my first foray into creating a package for NPM. I’m going to make my own Express project creator. I prefer a more stripped down directory structure and this will help me automate a manual task. Most likely, only I will find it useful as it will set everything up the way I prefer to work, but maybe others wil try it and like it too.

The true point of this project is to get over the nervousness I have of creating my first package and putting myself out there in the open source community. Using a simple project to get started will help me relax. Maybe then I will have an idea that might be more community driven to solve a problem I see others facing. But, that time is not right now.

I will put up a post after I publish it. Have you published your first package to NPM recently? Or are you a seasoned pro with advice for a newbie? Let me know in the comments!

Tabs in my browser

I’m the kind of person that will have roughly a bajillion tabs in my browser open at any time, give or take. It helps me to organize things that I am working on, want to read later, or will share with people on the internets. Looking at them this morning it got me thinking that a good way to share them would be here in a list. Most of them are related to web development and my self-teaching pursuits in JavaScript and NodeJS.

  • Node for Beginners – great resource of links (a link in a list of links to a list of links?!?! Linkception!) from Raquel Vélez that covers places to learn JavaScript and NodeJS ranging from the beginner level up to advanced stuff.
  • Node Hero – a blog from RisingStack for learning NodeJS from the ground up. It is a blog series that updates weekly or sometimes bi-weekly with a new article on working in node with each topic building on the last one going the entire process of building an app.
  • Clippy.JS – this is too good to not share with everyone I know. I’ve already tweeted about it, but it deserves to be here too because it’s that good. It is a project from Smore that makes it super easy to implement everyone’s favorite digital assistant.
  • Botkit – an interesting project from Howdy to help make creating powerful Slack bots easy. My team switched to Slack as our main chat system awhile back and it got me interested in the world of Slack bots and making one for myself.
  • Meatcube – this one is technically related to code since I heard about it at a talk. I saw Ryan Lewis present on using Handlebars as a template system, which was super interesting. Ryan also mentioned that they run a small Japanese music label called Meatcube. I was immediately interested and have left it up in my browser since.
  • Make 8-bit Art – this is another one that is code related because it was made by a developer I recently followed on Twitter, Jenn Schiffer. They make all kinds of stuff, but also try to make art with code. This is one of their creations and it is a super fun site to draw and be silly with. It also makes me feel like playing Nintendo games all night, which is a pretty good feeling.

 

[UPDATED: May 2nd, 2016] – Got reached out to by someone at RisingStack on Twitter to let me know the Node Hero blog updates weekly or sometimes bi-weekly.

A decoder ring CLI for secret messages

I’ve recently been using Free Code Camp for exercises to continue my learning of JavaScript and NodeJS. Some of my favorite challenges are the algorithm scripting ones. They give you a specific process to accomplish along with expected results that your code is tested against. Once you get your code to pass all of the tests you can move on to the next one. They are super fun.

The latest one that I’ve finished challenges you to decode a set of strings using a ROT13 cipher. You have to figure out how to run through the string, taking in each character, accounting for punctuation, and then returning the appropriate letter based on the ROT13 system.

In the description of each challenge there are some tips on how to accomplish it with suggested methods to try using. But, you really are free to do it however you want. As long as the tests pass, you pass the challenge. I eventually got the challenge completed, but didn’t like my method. So, I checked out the FCC Gitter channels to see how others had accomplished it. One person had a really cool idea of creating an object to be a cipher to compare the given letters to and return the corresponding letter. I tried it out myself and was able to get my own version implemented.

This got me thinking about how it could be fun to have a little app the encodes or decodes messages using this system. It would be like a decoder ring for your terminal. This coupled with my recent discovery of VorpalJS and I had my next idea for a CLI project. Side note, I’m currently obsessed with the idea of making command line apps. It is kind of my jam.

So, I got to work on the project and it came along faster than I thought. As I was making the decode command I got to thinking about how I don’t really have to make separate functions for decoding and encoding. All I’m really doing is converting the letters from one to the other. So, I can just make a single conversion function to run for each command.

The code looks like this:

var cipher = {
"A": "N",
"B": "O",
"C": "P",
"D": "Q",
"E": "R",
"F": "S",
"G": "T",
"H": "U",
"I": "V",
"J": "W",
"K": "X",
"L": "Y",
"M": "Z",
"N": "A",
"O": "B",
"P": "C",
"Q": "D",
"R": "E",
"S": "F",
"T": "G",
"U": "H",
"V": "I",
"W": "J",
"X": "K",
"Y": "L",
"Z": "M"
};

function conversion(str) {
var converted = [];
var original = str.toUpperCase().split("");
for (var i = 0; i < original.length; i++) {
if (cipher[original[i]] === undefined) {
converted.push(original[i]);
} else {
converted.push(cipher[original[i]]);
}
}
return converted.join("");
}

I am pretty happy with it in its current state. Like my weather CLI I will revisit it later on and see what else I can add to it. If you want to check out the project you can find it here on my Github page.

Something I built is on the internets!

Something I built is live on the internets for all to see, OMG! It isn’t much, but dagnabit it’s true. What I am gleefully kermit flailing over is the website I built, awesomebandname.com. It is a simple site where you can click or tap on a button to be given a random selection from my personally curated list of awesome band names. For the longest time I would hear something and think how it would make a great band name. I started collecting these together into a comprehensive list of awesomeness. At one point I was posting them in a series on an old blog of mine. These posts were always the most enjoyed by my few readers. That blog is no longer with us, but I still kept up the list.

After coming to work at Smartsheet I started keeping them in a sheet as my repository of awesomeness. It is three columns for names, source, and notes. The source column is for if I heard it said by someone else and it wasn’t thought of by me directly. As of this writing there are 183 entries.

I have been teaching myself web development for a couple of years now and I am at that not a beginner, but not quite advanced point where the only advice anyone gives to continue learning is to “just build stuff.” So, this seemed like a great idea for a project. It is really just a simple website rather than a fully fledged app, but it does the thing I built it to do.

Everything is laid out on the page with Bootstrap. The well gets a randomly selected band name placed within it on page load and there is a simple JQuery click event on the button that empties the well, chooses another randomly selected band name, and places that within the well. The random selection is done via a random number selection function that I got from MDN.

The JQuery looks like this:

$(document).ready(function() {
function getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min)) + min;
}
$('.nameDisplay').append(bandNames[getRandomInt(0,bandNames.length)]);
$('.nameButton').click(function() {
$('.nameDisplay').empty().append(bandNames[getRandomInt(0,bandNames.length)]);
});
});

The entire thing is two documents, one HTML file and a JS file that is the collection of band names in an array called bandNames. Bootstrap and JQuery are brought in by CDNs. I thought about having all of the band names in the html file to make it all work in a single document, but that didn’t seem worth it and I figure it would only clutter things up. I added a tweet button to make sharing easier and a Google ad, just in case this gets tweeted by Wil Wheaton or some other viral internet craziness type event happens. I figure it couldn’t hurt to get a few ad impressions while I’m at it. I did try to install a Facebook share button as well, but that wouldn’t show up on the page. To be honest, I didn’t spend much time troubleshooting why. I will be leaving that for v2 of the project.

My favorite part of the project is how I create the JS file with the array of band names. In the interest of dogfooding I keep all of the band names in a sheet in my Smartsheet account. Originally I was going to copy and paste the names into a JS file and manually make the array, which would have worked, but would have been boring and tedious. Updating it later on would have bothersome too with the possibility that I could miss one or have double entries. To keep this from happening I employed the Smartsheet API. Recently, the Smartsheet API has been given a JavaScript SDK that is written in NodeJS which just so happens to be the thing I am teaching myself and prefer to work within.

I have already been working with the Smartsheet API for fun so that part was pretty straight forward. I ended up writing a script that pulls down the content of the sheet, stringifies all of the entries, and then concatenates all of that into a file called bandnames.js. I was especially happy when I thought of making it write out the “var bandnames = [“ at the front and ending the file with “];” to finish off the array. Now, when I update my sheet I can run this script and I get a new JS file to put up on my server for the website. No worrying about if I missed one or entered one more than once, just a nice brand new JS file.

I wouldn’t say this project is done yet, but I am proud to say it is a good v1. Next, I need to fix the Facebook share button problem and also figure out why my Google ad isn’t displaying on mobile devices. I may also play around with the layout and overall design. My original intent was to use a Bootstrap theme that makes sites look like they were built in Geocities, but I changed my mind. I may still go back to a sillier design approach to go with the humorous intent of the site.

If you feel like checking it out go to awesomebandname.com. Note, that some of the names may contain some adult language and may be a little NSFW. Enjoy!

UPDATED
This project has been moved to Github! The links in the post have been updated. If you want you can find the project here:
http://daveskull81.github.io/awesome-band-names/

Find out more about the move in the post here.