Learn That Language/Framework Faster!

The one thing I like more than coding and fancy tacos is dropping the kind of knowledge you can’t get in a college. Every Sunday, I put on my teaching hat and work a with a small class of students at a part time web development bootcamp. I also work as a full time web dev so Sunday’s class is usually a breeze for me… for the students, not so much.

HTML and CSS are usually the fun weeks. ‘Oh cool! Some shit appeared on a screen.’ Neato. Bootstrap adds another layer of complexity and then things get a little hairy… the moment I introduce variables, booleans and conditional statements in javascript, things go south in a hurry. That word ‘var’ just scares people. Because our class only meets once a week, I encourage students to do a lot studying on their own. I’ll admit, it can be a little frustrating watching students struggle through a basic for loop for the 30th time. Why don’t they just get it? Now, in all fairness, I work with javascript (and other languages) 8 hours a day, 5 days a week, so it’s easy for me to forget just how difficult it is learning new things. Well, now I find myself in their shoes…

You see, two weeks ago I got a job offer at a startup (of course… fuck, I am a stereotypical Bay Area dev now). Cool motherfucking beans! Now, comes the hard part: I’ve been using AngularJS, C# and .Net for the last two years and Node, React and Python at home. Well, this company uses EmberJS, Ruby on Rails and Postgres. Shit. Here I am on day 12 after I heard the news and I feel comfortable enough with Ember after studying a bit after work each day to hack together a crappy front end app. Two years ago I also didn’t know .Net, C#, or AngularJS. I’ve found a pretty decent method to learning things (well enough) to be dangerous in a relatively short amount of time. Here it is:

Mix Up Your Learning Methods

Some people need books, some need videos, and others might need a paint-by-numbers style tutorial. I need all of these and more. I will use at least three mediums to learn a new language/framework. I will scour the net for blogs, short books and of course the docs on said topic and see what I can glean. My goal here is to get some basic information and best practices and to know what I’m dealing with. I’lll usually buy a cheap Udemy course after that (usually around $10) and work my way through about half of it. The reason I rarely finish these courses is because they become more of a crutch than anything around the midway point (more on that later). Lastly, I might find a meetup, join a slack channel or listen to podcasts about this new language/framework and check out some open source work to see some good examples of it in action.

Tutorial != Understanding

I used to complete a tutorial and read a book about a language and think I’d be an expert as soon as I was done. When I needed to learn C#, I bought a book then completed a 19 hour tutorial the week before work at my new job began! I went into work that Monday at my new job and had absolutely no fucking clue how to write C#. I knew what a static void, namespace, class and other trivial shit was but that didn’t help me write production level code. While I encourage reading and tutorials to my students, I always warn them about relying too much on books or tutorials. How may times have you finished a tutorial which is essentially coding by numbers (they type then you follow) and then when you go to fire up a new project, armed with your newfound skills, you are utterly lost? I’ve been there.

Build Shit

Ok, you’ve read about this new tech and have a general understanding of how it works and some of the gotchas. Check! You completed a few video tutorials or some todo app. Double motherfucking check! Sweet. Now here’s the part where you get lost in the weeds: think of something very simple that is reasonable to build over a week. Great. Now build that shit. You will be stuck, you will be frustrated and you will be googling furiously, perhaps cursing out the inventor of said language. “Why isn’t this more like here?!” You should be cycling back to steps 1 and 2 during this stage to supplement your barebones skills and by the end you will likely have a crappy app that shouldn’t see the light of day.

Congrats, you now know more than 92% of all people who complete a Udemy course or pick up one of those ‘Dummies’ books.

TODO: Write Better JS

If you’re writing javascript these days, why not write good javascript? Duh, right? Well, a couple years ago, good javascript to me was code that did what it was supposed to do. User clicks button, function runs and no errors appear in my console. Ok, we’re done here. This is the attitude I had when I wrote my first professional web app. ‘It works!’ I said, enthusiastically.

That tangled web of javascripts did what is was supposed to do for nearly a year. Then we switched to a new framework and I was tasked with porting the app that contained all that js as well as add some new features. I stepped into the code time machine which was this app and saw the mess I’d made:

I’d wrapped up some pretty complex logic in a massive 100 line if-else statement. Ambiguous variables were everywhere: var credit, var otherCredit, var creditTransfer, var transferCredit. And the functions, oh the functions! They were long and horrendous to read through. It’s as if I wanted conserve variable names by slamming as much logic as I could into each set of curly braces.

I now see the err of my ways and hopefully you can learn from my mistakes. Some lessons I’ve taken away from that months-long refactor of my old code were:

Var Names Matter

If you’re reading this, you’re likely new to the world of JS. Maybe you’re writing variables like var x or var y. Don’t do that. Take the time to give your variables meaningful, unique names. This can seem trivial at first, maybe there are only a handful of vars in your app in the first place. Well, that’s what I thought too, until the scope of my project increased tenfold over its duration. I was also wary of using variables with names that were too long. I regret this. Better to have a descriptive, long name for a variable (ex: catWithBlackHair) than a short ambiguous one (ex: cat). A variable should yield no surprises. If the name of var or function ever makes you scratch your head a little, it will make you want to pull your hair out six months from then, when you’re knee deep in a refactor.

Your Functions Should Be Shorter

That twenty line js function you wrote that takes in a user’s input, does some UI update, makes an ajax request and then does another update… well, you may want to change that up. I know it works now but think ahead, far ahead. When your PM, you or some external force causes you to change the logic in that function. Well, now you’re in a game of code jenga, where refactoring part of that massive function may break the rest. Keep your functions small. How small? They should really just do one thing. ‘Doesn’t this mean I will have a lot of functions?’ Well, yeah, but that can be OK. You will greatly increase the readability of your code by abstracting logic into small functions and you will also decrease the potential for duplicating the same code when you have many small functions. Do two different ajax requests update the UI? Great, have a function they can share to do this rather than duplicating those lines within each request.

Comment that Shit

A year is a long time. Reading through my old code was like reading a novel written by a drunk version of myself. I mean, I vaguely remembered writing it, but it seemed so foreign, so incomprehensible, so dumb… A wiser me would have left a trail of breadcrumbs explaining some of the more difficult parts of the code and why I was doing what I was doing where I was doing it. Short and sweet functions and descriptive var names would have greatly enhanced the readability as well but I was batting 0 for 3 here. If you follow the first two pieces of advice here you shouldn’t need to rely on comments for another dev to follow what’s going on in the story you’re weaving through code, but good comments, especially those explaining things that may provide insight to the business logic or why an odd choice was made will be invaluable in the future and probably prevent you from having one of those ‘Oh, so that’s why she left that function in the code’ moments, after a deployment blows up in your face.

I’m surprised by how many of these n00b mistakes I’ve seen in more senior developers’ code over the years. When we begin writing javascript, we’re often so caught up in just getting it to work at first, that we neglect to pore over our code and really analyze its structure, readability and longevity. Will future me, hate current me for writing this? The response to that question is the answer to whether you should reconsider the style of javascript you are writing and maybe use some of the advice from above.

If you want to take a deep dive into writing good, clean code, check out this book.


Why is that you rarely (meaning never) stumble across a tutorial for <–insert js framework here–> that makes use of one of the most widely used databases available? It’s MERN (Mongo, Express, React, Node) this or MEAN (Mongo, Express, Angular, Node) that. Has everyone unanimously given SQL the finger in favor of using Mongo?

I use SQL every day at work and have come to really enjoy it. Perhaps not as much as after embarking on a project making extensive use of Mongo. What’s the difference you ask? Mongo is a key-value store that stores data as JSON, has its own query language and is lightning fast at retrieving info. Mongo, like Firebase, another key-value store (that I highly recommend for start-up/weekend/light data projects), are NOSQL databases, meaning the data is not relational, or table-based.

SQL on the other hand is, well, a SQL database that holds data that is relational, or tabluar. If you’re not familiar with SQL, imagine Excel for coders. That’s really what it equates to. SQL is great for storing relational information in tables, like a table with users for your app, a table for their passwords, and another for messages they’ve posted. All three of these tables are related by the user name or id and the data types are unlikely to change. SQL makes use of data types, so you once you’ve defined a column and datatype, it’s set in stone, which has its pros and cons. PRO: your data maintains integrity and you can expect certain datatypes being returned. CON: In today’s JS-centric world, we’re used to receiving JSON and if you’re unsure of how your data will be structured or the types you will allow, SQL may pigeon-hole you too early in the game.

Rather than thoughtfully choosing a database based on the type of application I was building, I decided to be like the cool kids and jumped headfirst into Mongo although my data would likely have been easier to wrangle in a SQL type structure… oops. Being a SQL guy, I incorporated Mongoose (a library for Mongo) to create a schema for my json data that allows you to define data types and things like length and whether a field is required or not. Basically, I was trying to SQL-ify my Mongo instance.

Things were going great at first and I really enjoyed Mongo’s query language and the fact they have their own query editor (Robo 3T) which made designing my queries all the easier. Things began getting hairy however, when I wanted to do things like join documents like you would with relational tables. My queries were getting more complicated to try to force some relation between documents in an inherently non-relational database. You see, in a SQL world, I would have created a users table and a messages table, with the messages table storing messages from a user, the user id, the time created and who they were sent to, then easily joined that table to my user table. Easy fucking breezy. With Mongo, I created a users document and a messages document but joining these documents and maintaining their order has proven hairier than I anticipated.

I’m glad I joined the cult of Mongo however, as I’ve really come to enjoy its flexibility; decided you don’t want to include user id anymore? Fuck it, just don’t use that property anymore in your new entries, meanwhile, try dropping a column in SQL that another table depends on, or just changing up a datatype for a column or storing different datatypes in the same column (you just forget about that you sick bastard!).

I’m gonna see this MERN project through and get a nice break from my day to day SQL queries but I think I may have to pioneer the SERN/SEAN stack next.

If you’re thinking of using Mongo for your next project, I recommend using Mlab which offers a free tier that hosts your mongo database and Mongoose if you want to add some rules for your datatypes and schema.

Angular Vs. AngularJS

In my advanced age, I’ve discovered I like change less and less, which may explain why it took me so long to come around to love enjoy React. If you’ve followed this blog at all, you’re no doubt familiar with my love/hate/love relationship with ReactJS. While I love a lot of what React offers in the way of component based architecture, re-usable elements and advances in making the framework more accessible through create-react-app, there’s still the issue of the state.

Ahh, the state of state in React. So, you got a few options: mobx, flux or the crowd-favorite Redux. Though Redux and React go together like SQL and .NET, they are two completely different frameworks. The only real state management React offers out of the box is passing props around which can get hairy. Using Redux made me pine for Angular’s sweet, sweet factories and services which allow you to communicate between controllers (why do they have both factories && services…. who knows, they basically do the same thing). A service in Angular is a module, composed of an object which usually returns functions which can be injected into other components as a dependency. You know what’s even better about factories and services? They’re built right the fuck in there. Yeah.

But everybody left Angular right… right? Well, this last week I got taken to school on Angular at a VisualStudio Code Conference and sat down with a woman actually on the team of people working on Angular’s new features. I asked about version 1.xxx which my team is still using and she made the clear distinction between AngularJS (any version before 2) and Angular (every version after 2). You see AngularJS had a complete and total overhaul at V2 making it unrecognizable and essentially a completely different framework that leverages typescript (think JavaScript meets C#) with data types, public and private functions and variables and, oh yea, component based architecture.

My mind was blown once I saw an Angular 4 app scaffolded using their CLI and ready to be served using webpack in a few commands. While there’s many similarities between React and Angular as far as using component based architecture, use of web pack and the very familiar file structure, what sold me was when I saw they were still using services to communicate across controllers. No external libraries or insane amount of files to create a simple connection between pieces of the app, just baked in simple logic to do what should be a fairly simple task.

I honestly don’t know why everyone isn’t using Angular at this point. I’ll continue using ReactJS because it’s a lot of fun but I guarantee my next project will be using my old friend in a new way. Check out the docs
to see how easy it is to begin building an AngularJS Angular app.

Are You a Front End Dev Afraid of JS?

These days, front-end dev can cover a lot of ground: at one company it could be the guy who does web content updates and tweaks the HTML and CSS on the public facing site, while at the start up next door it could be the girl who doesn’t do as much UI as she does complex client side javascript code to manipulate and traverse the massive amount of data being retrieved from the backend, writing unit tests and doing Tuesday night deployments… either way, the mistake I see too many devs make who are looking for front-end work make(I was guilty as well) is they think they can avoid the ‘hard’ parts of javascript.

What are the hard parts, you ask? Sure, things like recursion, scoping, hoisting, closures and bumbling your way through ‘this’ are some of the conceptually difficult parts of JS but I’m talking about the ability to solve problems.

You see, this is the part of web development that’s not so easy to teach: how to solve shit. You can memorize a whole bob damn book on MVC, Routing with Express and spout off some little known facts about how `setState` works in React, and that’s great, don’t get me wrong, but can you figure out how to remove duplicate objects from an array of objects?

Well, can you? It’s easy to say ‘Yea I could figure that shit out,’ then, lulled into a false sense of JS mastery you come across a problem like this at an interview, or likely, on the job, think back to this article and punch yourself in your quinoa eating face for not attempting it.

Many new devs, especially those on the front-end of things try to forgo solving these seemingly trivial problems using JS either out of fear or they don’t see the value. I’ve been there. I tried my hardest to avoid JS beyond DOM manipulation until I was forced to do so.

As a FE dev, you’ll probably be calling lots of APIs to populate a page with some data. That data will likely be an array of JSON (or XML if you’re unlucky) and you probably won’t need all of that data or you’ll need to manipulate that funky object your neck-bearded backend team created.

One of the tools I use that has improved my JS and logical skills the most has been codewars. I believe the first problem I solved took around 3 hours or more. Still today, I may toy around with a problem for a day or two (or a whole fucking week) until I get it. While approaching many of these problems can seems overwhelming, I can guarantee that the path you take to either solve or fail at it will lead you to greatly improve your JS skills and more importantly, your ability to just solve stuff.

The best part of CodeWars is that you get to see the clever attempts other devs have made and get a glimpse at some really stellar code. For you savvy code challenge aficionados who ask why I didn’t give leetcode or hackerrank a shout out is simply because their IDE wasn’t as friendly for writing JS code (IMO).

Now go back and figure that shit out!

Web Dev Self Study Guide

Wow, let me blow the cobwebs off this blog before I get down to business. In the last couple months I began a part-time job as an instructor/developer at a local bootcamp and added another human to my family and unfortunately this blog was left in park but then something happened…

A few weeks ago, a friend of mine, looking for a bootcamp, sat in on one of my classes and was interested in joining but the price tag and uncertainty of the job market upon graduation were major concerns. As a member of one of my favorite coder’s, Laurence Bradford’s Facebook group, Newbie Coder Warehouse, I noticed this same issue was preventing many other people from joining bootcamps or online programs. Now, it may not be in my best interest to tell you, or rather write you, nah, let’s just go with tell you it sounds better… anyways, what I’m trying to tell you is that you don’t NEED a bootcamp to get a job.

Here’s what bootcamps give you that self-study won’t: motivation, peer pressure, access to a developer who will have the answers to all those gotcha questions that may take you hours to find online, and a clear and concise path to web dev super stardom. Now, the motivation and peer pressure mainly come from the high price tag most camps charge: you tell your friends you’re shelling out upwards of 15 grand for a camp and quitting your job, then you damn well better finish that assignment on CSS media queries on a Tuesday night. For many people, keeping their interest and engagement in learning is not an intrinsic process and they need an external influence to keep them on the straight and narrow… that’s not a bad thing, it just may mean you will benefit more from a traditional class enviro (I just shortened environment, let’s try and make this a thing… enviro!) than the free wheeling self study path.

Here is the email I wrote to her outlining what I think is necessary, in the Bay Area, in 2017 to become an entry level developer; there are many places where I encouraged her to write me with any questions or further explanation on what to study and that offer is open to you the reader as well (my email is at the bottom of the page and in the contact section)

I thought about what I do at work and what I see as a typical day for a junior developer and what skills are necessary to join a team as a contributing member. Here’s a rough outline of what I think you’ll need:
Take codecademy’s HTML and CSS course as well as their bootstrap course. Replicate two web pages: Google’s home page and a much more difficult page like the front page of air bnb or the home page of apple (not the functionality) just the look.
You should also be using web development tools in chrome like inspecting elements on the page and feel comfortable adjusting the css from the browser.
You should have a good concept of how to create a basic web page, ids, classes and how to use images, add links, etc.
This could take 2-3 weeks and I would watch some videos or read about what you can do with chrome browser tools, css box property, positioning elements, inline vs block style display.
More CSS:
CSS is tricky and you’ll really need to get a good hang on it before moving forward. Google ‘PSD’ (photoshop design) and pick a couple PSD’s of web pages/sites and replicate them using html and css. These projects can be used in your portfolio which you will need later.
Get a github and push some code to your repos every few days and at least once a week. You should feel comfortable creating new repos, and pushing code to them through the command line. Try to pull some other projects from people as well. Every recruiter will look at your github so keep it up to date. Git is perhaps the least friendly language you’ll come across so watch a video or reach out if it’s difficult to get started doing that.
Bootstrap and Responsive Design:
Understand Bootstrap’s grid system and make use of their components like dropdown menus, navigation menus, etc. Start using bootstrap for every site you create because nearly every company is using bootstrap or something like it. Responsive design is basically what people use to make sure their website sizes down properly when looking at it on different devices. Codecademy has a great course on Bootstrap you should take. When it comes to media queries, reach out to me after you’ve done some Googling on the subject and we can go over how to implement them.
Make a Site:
Google free bootstrap templates, get a template, and make a site for a friend or a local business. This will be your first “real” project that shows people that you can do developer stuff. BTW, using a template is not frowned upon, in real life you’ll be using a template or working with a large code base and updating features so this is more like what you’ll likely be doing than creating something from scratch.
Use codecademy’s course on Jquery to get down the basics. Learn how to make elements disappear, fadein, fadeout and change their css through button clicks. Add some jquery to your previous projects.
Once, again, use codecademy to get the basics down and maybe even buy this book. Do everything you can do with jquery with plain javascript. Make a one page quiz that tells user’s their score after completion. A random quote generator. Google fizz pop challenge and do that. Create a simple login system. Make a site that iterates over an array of objects with car info, including pics and display it on a page. Go on codewars and frustrate yourself with some challenges as well. You should be able to iterate, do for each loops, shift, pop and push into arrays and create objects.
More JS:
Learn about object constructors, object literal notation and prototypal inheritance. These are all fancy ways of constructing and replicating objects in JS.
Make http requests using Jquery’s ajax method. Search the web for API’s (todd motto has a great list) and use these API’s to retrieve information from a server and display it on a web page on a button click or allow users to enter a search term that will retrieve info. I can walk you through all this when the time comes. AJAX and using web services is how many companies accesses their databases so getting a good grip on ajax and calling web services is key to getting a job.
MongoDB is pretty hot but so is Firebase. Firebase takes only a few minutes to set up and stores your data in JSON format (just like mongodb) through an API call. It’s easy to use and will give you a nice intro to databases and hosting data outside your local machine. I’d create a simple login using Firebase and a page where users can post and retrieve messages or whatever…
Download nodejs and express through your command line and learn how to set up a server on your machine to host your files. There are about a million tutorials on this. Node allows you to write server side code in javascript like creating apis, accessing databases and other server stuff we can go over.
JS Framework:
Learn React! React is javascript but just a different way of writing it and it’s super hot in the bay area so get down the basics. By this point you should be able to pick up a framework and tinker around with it and find online resources to help you. That’s basically how you’ll pick up whatever framework is in style if you decide to get a full time dev job.
The most important thing is to code for a little bit everyday and always google stuff you’re curious about or don’t know. Create a codepen account and make fun things for POCs (proof of concept). You don’t need to know everything on this list, in fact I would begin applying once you can create a basic web page, make ajax calls and feel comfortable using javascript in a functional way.
You will learn more on your first job than any amount of studying and things change constantly so the best asset is a desire to learn and pick things up quickly. React won’t be here in five years, maybe less, but javascript will so feel comfortable with it!
As you go down this list, you should have many questions lol so always feel free to reach out and send me a link to your projects on your github account if you’d like me to check them out. If you have time, go to meetups and meet with other coders as it will allow you to see how others work and different ways of achieving the same goal.
I hope you found this email I wrote to a friend helpful and if you think I should add anything to this list, or have questions as you embark upon your path to web dev hot shot, feel free to email me: hotdevdude@aol.com brianjenney83@gmail.com

How The Hell Am I supposed to Learn Javascript?

So you made a small site or two using HTML, CSS, maybe Bootstrap and even dabbled in Jquery, but you keep hearing all the cool kids talk about JavaScript. You know you should learn it, you know if you want a job you’ll need to use it but how the hell are you supposed learn it?

What is JavaScript, you ask? Well JavaScript is the most popular programming language most commonly used on the front end of your web application to manipulate your DOM (Document Object Model AKA your html), validate input and is increasingly used in the backend (NodeJS) and spawns a new framework each month (React, Angular, etc).

You can do damn near anything with JavaScript which is what makes it so intimidating. I tried to fake my lack of JavaScript knowledge by relying on Jquery thinking no one would be the wiser. I soon found out that many jobs don’t incorporate Jquery in their code ( yeah… I know) and screen for developers who know how to write in vanilla JS.

Yeah, that’s all great you say but how in the hell are you supposed to learn this stuff? Well, you impatient bastard here’s how: build shit. I’ve met far too many people online and IRL that buy a book, or two, or three and they sit there, reading through the rich history of JavaScript, how closures really work, prototypal inheritance and hoisting, only to find themselves months or even years later still unable to produce any meaningful code.

This is not to say reading up on JavaScript won’t greatly enhance your knowledge and learning but don’t let reading about JavaScript fool you into thinking you know how to use it.

Here, fire up your text editor and make a div. Now make a button. Now make an input box. Find a way to insert your text from that input into that div onClick (that’s a hint). Once you’ve frustrated yourself with that for a while, read up on arrays, how to iterate through an array and maybe splice, push and pop that array (kinda sounds like a catchy song). Now you’re making progress. Then start building something using an array, like a button that returns a random quote from an array to your screen. Now you’re cooking.

This combo of reading about JavaScript and then putting those concepts to quick dirty use will be more valuable than a stack of half-read books.

If you got any n00b-like JS questions or want to do some peer programming, shoot me an email at brianjenney83@gmail.com.