What is the next step when learning a new skill?

stairsGetting started with a new skill is hard, but the steps are clear. You’re completing a course or a tutorial , and someone else laid out a list of exercises you have to master as a beginner. But what can do after you’ve finished that first application to keep learning? How can you improve on that new skill instead of letting it gather digital dust?

There is often no clear progression after those first steps, and it’s easy to get discouraged and fall off. A lot of the material you’ll find is focused on the somewhat experienced developer learning a new framework, and not on learning what’s required to become an expert. There is a gap at this point that you need to fill yourself so you have new material to learn when you’re ready to continue.

You have to trust that you can build your own path at this point. Nobody can tell you everything you must learn, because you need to learn from your own experiences. At this point, you’ll deliberately seek out information that may not be directly related to the subject, but that you can integrate with what you already know.

For example, if you’ve learned AngularJS, you can learn more about HTTP, JavaScript, or the design patterns that were used to build the framework. Both theory and practice are important: you need to understand how things are done, but be able to use that knowledge in your own projects.

You also have to challenge yourself and deliberately focus on learning hard things and growing if you don’t want to stay stuck or give up on your new skill. The default is to fall back on your existing knowledge and habits, but those will end up being a crutch. Try out new ways to do things, or explore another language to gain some perspective.

If you’re always working in the same environment, growth can be harder to find. Stay curious and investigate when you encounter something you don’t understand. You can also take advantage of the occasion to improve your soft skills such as writing clear code and comments, or coaching another member of your team. There are many ways to learn, but you have to look for them and plan to learn instead of leaving it to chance.

Subscribe now to receive my 5 Hacks to Learn New Skills email course directly in your inbox. You’ll also receive weekly updates about learning and growing as a software developer.

Simple code is beautiful

Despite the large number of languages and tools that will get thrown at you if you mention web development (Ruby! React! Node.js! AngularJS! Gulp! Python!), the simplest web application you can create includes HTML, CSS and a bit of JavaScript for the interactivity. You don’t even need to setup a web server: just open it in your browser or host it with any cheap shared hosting and it just works.

Anyone can maintain this application with just a text editor, a web browser and some experimentation. It’s a great way to learn how the web works, and it is a good solution for a few pages showing static information or a little JavaScript calculator.

Unfortunately, it all goes downhill from there as soon as you need to save the state of the application or introduce some other form of server-side logic. Also, your application will soon turn into an unmanageable mess if you have to update many pages every time there is a small change.

Once you get started on this path and have chosen a web development stack, you’ll end up depending on many tools, technologies and frameworks for your developments process. In many cases, you HAVE to do this: most stacks don’t include everything, and you have to choose libraries according to the needs of your project. Unfortunately, every new bit that you add needs to be updated and can break on you. You need to find a balance between the time saved now by using a tool or automating a process, and the time waster further down the road if it breaks.

It’s easy to add dependencies, but you have to make sure it’s worth it for your project (see the left-pad debacle): a good dependency is something that doesn’t make sense to code yourself. You should never trust logic that is core to your application and that cannot easily be replaced to a third-party tool. That means that using a framework for two-way data binding or even just for handling AJAX calls is the proper thing to do, but a chat application that would outsource the chatting part is taking on a lot of risk.

The same goes for the code itself. When you’re thinking of trying out a fancy new language feature, you need to ask yourself if the immediate productivity gain is worth it. Will it make maintenance and readability harder for everyone working with the code (including you in 6 months)?

You don’t need to use each and every feature of a language. If you come up with a new way to do things at every possible occasion, it’s going to be very hard to introduce new people to your project. Using a small subset of the language makes it easier to understand what’s going on, even if it’s boring. You can experiment in your own learning projects, not in code meant for production.

Likewise, I like to keep my IDE as simple as possible, and work with a small number of tools. Many plugins are a great boost to productivity, but you don’t want to depend on all of them working perfectly to be able to do something. Also, if you deviate too much from the standard working environment for your technology or at your organization, it’s a lot harder to collaborate with other people. A simple environment meant you’re able to start working quickly, without spending hours reinstalling software to setup your environment.

If you’re just working on projects for a few months and handing them off to someone else to maintain, or if you’re just doing small projects to learn, it may not be as obvious, but those are all things that can come back and bite you. Your code will most likely be around for many years, and your tools must last that long or you’ll find yourself scrambling to find an alternative quickly.

Basic JavaScript arrays reminder

I’m pretty bad when it comes to remembering syntax details for languages I don’t use every day, especially since I work with a few languages that use C-syntax and not just JavaScript. Also, it’s not the kind of details I want to spend a lot of time studying since this information can easily be found.

In most cases, it’s easy to look up how something is done in the project you’re working on, since you’ll want to follow existing patterns anyway. But since I’m working on refreshing my JavaScript knowledge and trying new patterns, I’m often faced with a blank .js file. Arrays are always one of the first things that comes up when trying to solve a problem, so I thought a quick reminder could be useful.

A standard JavaScript array is most often initialized with the bracket notation. There is also an Array object, but using the Array() constructor is not totally identical to using the bracket notation since it’s an object in that case. To keep things simple I won’t be using the object since standard arrays are a lot more common.

var fruitsArray = [];

Inserting new items at the end of an existing array is done using the push() method. The array will resize to accommodate the new items. An array can also contain any items: it is not limited to one type.

fruitsArray.push("Tomato");
fruitsArray.push("Squash");
fruitsArray.push("Potato");
fruitsArray.push("Carrot");

Removing the last item at the end of an array is done using the pop() method. In the example, the “Carrot” item will be removed.

fruitsArray.pop();

Sorting an array is done using the sort() method. By default, the items are sorted as strings, so it works for the example. For more complex cases, a sort function can be passed as a parameter to the method.

fruitsArray.sort();

Looping in an array from the start to the end using the for loop, getting the items and printing them to the console. The example also shows the length property to get the current size of the array.

for (i = 0; i < fruitsArray.length; i++) { 
   console.log(i, fruitsArray[i]);
}

Checking if a variable is an array, printing the result to the console. This condition is useful when you can’t be sure about the type of a variable, for example because you received it as a parameter.

if (fruitsArray instanceof Array)
   console.log("fruitsArray is an array");
else
   console.log("fruitsArray is not an array");

Finding an item in an array using the indexOf() method. This method returns the index of the item in the array, or -1 if the item doesn’t exist.

var itemIndex = fruitsArray.indexOf("Carrot"); // Contains -1
itemIndex = fruitsArray.indexOf("Potato");     // Now contains 0

Finally, here are all the examples in one code snippet so you execute them and try for yourself :

var fruitsArray = [];

// Inserting items
fruitsArray.push("Tomato");
fruitsArray.push("Squash");
fruitsArray.push("Potato");
fruitsArray.push("Carrot")
console.log(fruitsArray); // ["Tomato", "Squash", "Potato", "Carrot"]

// Removing an item at the end of the array
fruitsArray.pop();
console.log(fruitsArray); // ["Tomato", "Squash", "Potato"]

// Sort the array as string
fruitsArray.sort();
console.log(fruitsArray); // ["Potato", "Squash", "Tomato"]

// Length of the array
console.log(fruitsArray.length); // 3

// Looping in an array, getting the items
for (i = 0; i < fruitsArray.length; i++) { 
   console.log(i, fruitsArray[i]);
}

// Check if a variable is an array
if (fruitsArray instanceof Array)
   console.log("fruitsArray is an array");
else
   console.log("fruitsArray is not an array");

// Search for an item in an array (returns the index)
console.log(fruitsArray.indexOf("Carrot")); // -1
console.log(fruitsArray.indexOf("Potato")); // 0