Tag: beginner

Getting Started

“I want to become a web/mobile developer/designer. What can I do to get started?”

There are a variety of web and mobile bootcamps across the country. For just $5,200, Big Nerd Ranch promises to get you writing iOS applications in just seven days. It looks like you should probably arrive with some programming experience, but they’ll train you in the essentials in a week. Not sure you’re ready to learn mobile development in less than 168 hours (I assume they let you sleep at the ranch)?

Coding Dojo will give you 14 weeks to learn three separate development stacks – you might choose to learn backend development with Python, front-end JavaScript development, and iOS mobile development. That would allow you a lot of flexibility to contribute in several areas within a company. Tuition for the 14-week program ranges from roughly $10,000 to $14,000 depending on the location. They also offer career support to help you find that first job – “94% of our students who complete our career services program find a job within 180 days of graduation.”

I do not have any experience with coding bootcamps. They do seem to acknowledge that there is a lot of work involved, and sites like Coding Dojo do indicate that career development is a process – they don’t seem to believe miracles happen in 14 weeks. But what can someone do if they want to switch careers and become a software developer, but they’re not ready to go back to college for a 4-year Computer Science degree?

Here are a few suggestions…

Start Learning

This one’s rather obvious, but it involves more than learning to code. You want to gather some general information about the kind of work you think you might want to pursue. If you are more interested in the visual design aspects of web development, you will want to learn HTML and CSS. You can help establish the appearance and use interaction for a website without needing all the skills associated with web development. However, if you want to build web applications, there’s some programming involved – likely some JavaScript, Python, or Ruby. In either case, there’s an important step that involves learning something about yourself as well.

Web development is not for everyone. It requires some ability to take a problem and break it down into smaller parts. To be successful, you need to see where one problem is like another problem and might share the same solution. You need to think about problems in abstract ways. You need to reason through the logical steps involved in a task to bring it to completion. Now, no one is good at all of these things right away, but some people have no interest in becoming good at these things.

You can get a quick feel for your interest in coding by finding a brief tutorial online. The Mozilla Developer Network provides some very simple HTML, CSS and JavaScript tutorials. A lot of people are fine with HTML and CSS, but find that the jump into programming with JavaScript requires another level of thinking and commitment.

If you’re interested in mobile development, Apple and Google provide resources for getting started that will include some basic tutorials. If it’s your first exposure to programming, you might need to find some basic “learn to program” tutorials first. Sites like Coursera can be helpful here – just make sure you can find something that’s geared toward someone with no prior programming knowledge.

Once you’ve determined that you want to move forward, and you have some feel for what you want to learn, you can look for more advanced tutorials to help you get a firm grasp on your subject. Some people are fully capable of doing this on their own. Others benefit from the structure provided by courses at a local community college, development bootcamp, or online training (such as Lynda.com, Pluralsight, or CodeSchool). If you can find someone to guide you through the learning process and answer questions, you’ll definitely benefit from their knowledge. If it’s just you and the internet, you can succeed, but be prepared to learn some things incorrectly along the way. (The internet is full of information – both good and bad.)

Start Practicing

As soon as you feel like you have enough knowledge to do something, start putting that knowledge to practice. Build things and throw them away. If you see something interesting on the internet or in a mobile app, figure out how to mimic it. At some point, you will need to break away from copying the steps of a tutorial to actually putting some things together on your own. This is where you can determine how much you’ve really learned. You will undoubtedly struggle to copy a lot of the things you see, but think through how you can break it down into smaller ideas that you can copy.

For the aspiring web developer, if you’re short on ideas to use for practice, visit a site like CodePen and see what other people have built. Find something that looks like it would be at your level and try to recreate it. If you get stuck, you can see how it was initially done and learn the skill of understanding someone else’s code – and this is a crucial skill to learn.

If you’re interested in mobile development, find the simplest app in the App Store or Google Play Store and create your own version of it. You don’t need to publish it, but you will learn a lot during the process of trying to duplicate it.

Of course, if you already have ideas for something you want to build, start implementing them. If you’re trying to build something you want to use yourself, you’ll be much more motivated to get it working.

Start Networking

Meet as many other people as you can in the area of development you’re pursuing. Meetup may be a helpful site to find gatherings in your area where you can learn new ideas and network with other developers. Some meetups may even provide opportunities to work with others on community-based projects for local non-profits.

Local chapters of Code for America, such as Code for KC offer opportunities to work with other volunteers who are building tools to make local government better. Attend a meeting, introduce yourself to someone, and share your career goals. You may be able to find a group of people who are willing to help you learn while also gaining experience that you can share with prospective employers in the future. I would suggest you only work on a project where there’s some genuine interest. That interest will likely go a long way if you still needs a lot of help from other team members to complete a task.

Start Publishing

At some point you’re going to want to find a job, and you’re employer is going to want to know what you’ve done. If all you can do is tell how you’ve taken some classes or attended a bootcamp, you’re going to have a very hard up-hill battle. If you can link to web pages you built or mobile apps you’ve published, an employer can have some confidence your skills are legitimate, even if they are still in the early stages of their development.

One caution here. If you’re claiming that you were responsible for something, you should be able to explain how you built it. You should expect questions – lots of questions – about any work you’ve done. Why did you choose A over B? How does that animation work? Did you run into any problems building that?

Study, Study, Study

When it’s eventually time to go through the interview process, be extremely well prepared. Expect someone to ask you to write some code to do something as part of the interview. Expect them to show you code and ask you what it does. If they don’t drill you heavily on your knowledge, having the information ready will allow you to give much better answers than you would otherwise give.

If you’re not sure where to begin, go to Google or Bing and search for interview questions (web, iOS, Android). Make sure you can answer anything you see. If you know someone already in the kind of position you’d like to have, see what you can learn from them about a typical interview process.

Once you’ve identified a company, check Glassdoor’s interview postings for that company and similar companies. You may not receive the same questions, but you will get an idea of what to expect. If you can’t answer questions you see they are asking, you may want to hold off on trying to get an interview until you’re better prepared.

Make any interview a learning experience. You want to convince a company you’re ready to work, but you also want to come away from the interview experience knowing how you can improve for the next one. If you don’t take notes during the interview, write down everything you can immediately afterward (i.e. when you get back to your car). Make sure you’re ready to answer any of the interviewers questions the next time around.

Whether your self-taught or you’ve been bootcamped or you fall somewhere in between, don’t expect the process of becoming a web/mobile developer to be easy. Assume your three months of bootcamp training is going up against a developer with a year of work experience and be prepared to work hard enough to overcome that gap.

Related Articles:

How to land a top-notch tech internship — and a tech job — while you’re still in school
I spent 3 months applying to jobs after a coding bootcamp. Here’s what I learned.

Working with Forms in Two Functions

Interacting with forms – it’s a common need in JavaScript apps. You need to gather information from the form when it’s submitted; you need to initialize a form when it’s first displayed to the user. Here’s a simple form:

<form id="user">
    <input type="text" name="first-name" />
    <input type="text" name="last-name" />
    <input type="submit" name="submit" value="Submit" />
</form>

One way to gather the information would be to retrieve each input value individually.

var elements = document.forms["user"].elements;
var firstName = elements["first-name"].value;
var lastName = elements["last-name"].value;

But that soon becomes tedious as the size of the form grows. What we really want is a function that will allow us to easily retrieve all the data from a form. Something that might be used like this:

var userData = readFormData("user");
var name = userData["first-name"] + " " +
           userData["last-name"];

In a single function call, we could have all the inputs gathered into a JavaScript object. We could also conceive of a function that would write the data from a JavaScript object back into the form.

writeFormData("user", userData);

So, how would we implement such functions?

function readFormData(formIdOrName) {
    var formData = {};
    var elements = document.forms[formIdOrName].elements;
    for (var index = 0; index < elements.length; ++index) {
        var name = elements[index].name;
        formData[name] = elements[index].value;
    }
    return formData;
}

function writeFormData(formIdOrName, formData) {
    var elements = document.forms[formIdOrName].elements;
    for (var index = 0; index < elements.length; ++index) {
        var name = elements[index].name;
        elements[index].value = formData[name];
    }
}

After calling readFormData, the userData object might look something like this:

userData = {
    "first-name": "John",
    "last-name": "Smith"
}

The name attributes from the form elements have been used as property names and the value properties from the form elements have been assigned to those property names. But what if we want to add a checkbox to the form – will our functions still work? Not yet. Checkbox inputs store their state in the element’s checked property instead of the value property, so we need to do a bit more work. A couple of additional functions will help us gather information from checkboxes, dropdown lists, etc..

function getElementData(element) {
    // Special handling for <select> elements
    if (element.tagName === "SELECT") {
        return getElementSelections(element);
    }
    // Special handling for checkboxes and radio buttons
    if ((element.type === "checkbox") ||
        (element.type === "radio")) {
        return element.checked;
    }
    return element.value;
}

function getElementSelections(element)
{
    // Look at all the <option> elements and return the
    // selected options.
    var values = [];
    for (var index = 0; index < element.options.length;
         ++index)
    {
       if (element.options[index].selected) {
           if (element.multiple) {
               // Multiple selections are returned in
               // an array.
               values.push(element.options[index].value);
           } else {
               // Single selections are just returned as
               // a string.
               return element.options[index].value;
           }
       }
    }
    return values;
}

function setElementData(element, data) {
    if (element.tagName === "SELECT") {
        return setElementSelections(element, data);
    }
    if ((element.type === "checkbox") ||
        (element.type === "radio")) {
        element.checked = data;
    }
    element.value = (data === undefined) ? "" : data;
}

function setElementSelections(element, data)
{
    // If the data isn't submitted as an array, we can
    // create an array of one element to simplify the
    // selection logic.
    if (!(data instanceof Array)) {
        data = [data];
    }
    for (var index = 0; index < element.options.length;
         ++index)
    {
      if(data.indexOf(element.options[index].value) >= 0) {
        element.options[index].selected = true;
      }
    }
}

Now, with a couple of tweaks to our read and write functions, we can easily transfer data between a form and a JavaScript object.

function readFormData(formIdOrName) {
    var formData = {};
    var elements = document.forms[formIdOrName].elements;
    for (var index = 0; index < elements.length; ++index) {
        var name = elements[index].name;
        formData[name] = getElementData(elements[index]);
    }
    return formData;
}

function writeFormData(formIdOrName, formData) {
    var elements = document.forms[formIdOrName].elements;
    for (var index = 0; index < elements.length; ++index) {
        var name = elements[index].name;
        setElementData(elements[index], formData[name]);
    }
}

Combined with JSON.parse, JSON.stringify, and some AJAX calls, readFormData and writeFormData can be used to easily send and receive form data between the browser and a web server. We can even package everything up into a nicely wrapped object to look something like this:

function FormData(formIdOrName) {
    this.form = document.forms[formIdOrName];
}

FormData.prototype.readData = function () {
  ...
}

FormData.prototype.writeData = function (data) {
  ...
}

var userFormData = new FormData("user");
var userData = userFormData.readData();

Hopefully, this will simplify some of your work with forms in JavaScript. You can experiment with the final sample code on CodePen.

The (Proto)Typical JavaScript Function

We’ve seen that constructor functions can be used to initialize JavaScript objects in a consistent manner. The constructor can be used to ensure that an object is always initialized with a known set of properties and default values for those properties. But it’s also possible to assign functions to object properties from within a constructor function.

function Neighbor(firstName, lastName) {
    this.firstName = firstName;
    this.lastName = lastName;
    this.fullName = function () {
        return this.firstName + " " + this.lastName;
    }
}

var friend = new Neighbor("Tom", "Smith");
var name = friend.fullName();

Assigning a function to the fullName property provides a convenient way to access a Neighbor's full name. However, using an anonymous function is an inefficient way to add this functionality. If I create another Neighbor instance, JavaScript will create another instance of this anonymous function.

var friend1 = new Neighbor("Tom", "Smith");
var name1 = friend1.fullName();

var friend2 = new Neighbor("Sally", "Jones");
var name2 = friend2.fullName();

The sample code runs as expected, but if we compare instances of the fullName property, we can see they do not reference the same function. Every time we execute our constructor function, JavaScript creates a new instance of the anonymous function and assigns it to the fullName property.

if (friend1.fullName !== friend2.fullName) {
    alert("The fullName properties are NOT identical.");
}

Creating one extra instance of this anonymous function may not be a big deal, but what if our object has a half-dozen functions and we have hundreds of Neighbor instances? Each instance needs to be created, which requires some amount of time and memory.

One solution would be to simply define a named function outside of our constructor function.

function Neighbor(firstName, lastName) {
    this.firstName = firstName;
    this.lastName = lastName;
    this.fullName = concatenateFullName;
}

function concatenateFullName() {
    return this.firstName + " " + this.lastName;
}

It may look a bit strange, but it does work. However, our function is no longer tightly coupled to the Neighbor object, which brings us to the JavaScript prototype function. All JavaScript objects have a prototype property that allows us to attach new properties, not just to an object instance, but to a specific object type. In this case, we can associate a fullName property with the Neighbor type.

function Neighbor(firstName, lastName) {
    this.firstName = firstName;
    this.lastName = lastName;
}

Neighbor.prototype.fullName = function () {
    return this.firstName + " " + this.lastName;
}

Now, all objects created with the Neighbor constructor function will have an associated fullName property through Neighbor's prototype. If we create two Neighbor instances, they will share a common fullName function. When we reference friend.fullName, JavaScript will look for a fullName property on the friend object, but if it doesn’t exist, it will also look for a fullName property on the prototype of the Neighborconstructor function that was used to create the object.

if (friend1.fullName === friend2.fullName) {
    alert("The fullName properties are identical.");
}

Of course, prototype properties don’t have to reference functions. They can also be used to share values across object instances.

function Tank(level) {
    this.level = level;
}

function.prototype.alertLevel = 10;

function.prototype.isLevelSafe = function () {
    return this.level >= this.alertLevel;
}

var tank = new Tank(100);
var isSafe = tank.isLevelSafe(); // returns true
tank.level = 2;
isSafe = tank.isLevelSafe(); // returns false

Prototypes allow us to associate a single property instance with all instances of a particular object type, which gives us the ability to extend an object’s functionality beyond what’s simply provided within it’s constructor function.

Constructing Constructor Functions

When you are first learning JavaScript, you will be introduced to two ubiquitous language features: functions and objects. As you begin to experiment with creating objects, you may find is useful to implement a simple function to create commonly used object types. For instance, here’s a function that will create an instance of a photo object:

function createPhoto(url, date, caption) {
    return {
        url: url,
        date: date,
        caption: caption
    };
}

var photo = createPhoto("rabbits.jpg", "05/10/2015",
                       "Someone's been eating my radishes.");

Using such a function ensures that every photo object has the same set of properties, and this example provides an excellent starting point for understanding JavaScript constructor functions. What if we make a few minor changes…

function initPhoto(newPhoto, url, date, caption) {
    newPhoto.url = url,;
    newPhoto.date = date;
    newPhoto.caption = caption;
}

var photo = {};
initPhoto(photo, "rabbits.jpg", "05/10/2015",
          "Someone's been eating my radishes.");

Instead of creating the object within our function, we create the object and pass it to the function for initialization. But the end result is the same. We have a new object with all the expected properties attached. This is essentially how constructor functions work, but the syntax is slightly different.

function Photo(url, date, caption) {
    this.url = url;
    this.date = date;
    this.caption = caption;
}

var photo = new Photo("rabbits.jpg", "05/10/2015",
                      "Someone's been eating my radishes.");

When we use the new keyword, JavaScript creates a new object and passes it into the constructor function. However, instead of appearing in the function’s argument list, it’s accessed using the this keyword. By convention, constructor functions are capitalized to distinguish them from other functions.

Once you feel comfortable with how constructor functions are used to initialize new objects, you can begin to experiment with some of their other benefits – prototypes.

Two Quick Steps to JavaScript Events

If you’re just starting out with JavaScript and want to respond to an event on the page, you can keep these two simple steps in mind. For this example, we will look at responding to a click event on an anchor tag.

<a id="click-target" href="redirect.html">Click here.</a>

Including an id attribute will allow us to easily find the element within the page.

1. Listen for an event.

We first find the anchor tag, and begin listening for its click event. Listening is accomplished by calling the element’s addEventListener method and providing a callback function.

var anchor = document.getElementById("click-target");
anchor.addEventListener("click", handleClickEvent);

Or we can use the element’s onclick property to specify the event callback function.

var anchor = document.getElementById("click-target");
anchor.onclick = handleClickEvent;

2. Implement a callback function.

An event listener always receives an Event object that describes the event. For our example, we will receive this object as the first argument in the callback function, and reference it with the variable e.

function handleClickEvent(e) {
    // Respond to the click event.
    alert("Anchor was clicked!");

    // The default action when clicking an anchor tag is to
    // redirect the browser to the URL specified in the
    // href attribute. If we want to prevent the redirect,
    // we can use the Event object to prevent the default
    // behavior.
    e.preventDefault(); 
}