FreeCodeCamp’s New Look

I know I haven’t posted in a while but I’m still here! I recently got some work that is not web development related and I’ve also been participating in Inktober and preparing for NaNoWriMo which has made me pretty busy.

I decided to sit down and finish my JavaScript lessons on FreeCodeCamp recently and found I was unable to because the site was not working properly. When I tried again an hour or so later, I realized this was not just a random error and went looking for an explanation. It turns out FreeCodeCamp was overhauling their website and some features were not working (namely, being able to actually log in).

Obviously sites change over time and there is often going to be a point where a new look or functionality is required, and this may include downtime. According to freeCodeCamp, login functionality was unavailable for three days, but I feel like it was a bit longer than that. I am torn between understanding that this is a free resource which relies on donations, and thinking that a platform that teaches web development should be able to facilitate a smoother transition. I did find an article that explains what happened though, and it turns out their lack of funding was ultimately the culprit.

But anyway, the new site. I’ll be honest: I don’t like the way it looks. When I first saw it back when logging in was not working properly, I thought the CSS was just not being applied properly. But no, that’s just how it looks apparently.

I can’t say I’ve ever been in love with how the site looked, but then green is not one of my favorite colors and that was the previous theme. And again: I understand, it’s a free resource. But the old design was better. I feel the font used makes the site look messy somehow. The old design was ‘cleaner’. I think that’s the word I’m looking for.

Ultimately, the content is still there, and they have added a few new lessons. I can only tell because there are now incomplete lessons in the sections I had previously finished.

I’ll continue to use the website of course and it is still an excellent resource even compared to some paid websites. I just can’t believe they somehow managed to make the website look worse than it did before.

Udemy – The Modern JavaScript Bootcamp (2019)

So I haven’t posted here for a while. I think I actually was burning myself out a little with the amount of studying I was trying to cram into every day (including weekends). I took it easy for the last few weeks and focused on my new website instead, which can be found here if you are interested. It is based on creative writing and, more recently, my attempt at learning to draw.

I decided I really needed some more help with JavaScript. I just struggle with it more than any other programming language I’ve tried, and I also find I learn better with a structured course. So I decided to buy The Modern JavaScript Bootcamp course from Udemy, as well as a React course which I will post about when I do it. Udemy really is a great place to find cheap courses, since there is almost always a sale where you only have to pay $10-$12.

It took me a a couple of weeks to finish at the pace I went. I struggled a little but I feel I did learn a lot. Did this succeed in making JavaScript finally stick in my mind? I’m not sure yet, but I do feel my freeCodeCamp progress has been a little easier since, so maybe.

My only issues with the course are that there are a few spelling mistakes in the videos. Sometimes they’re only in comments, and ultimately this isn’t a spelling course, but things like that annoy me. Kind of like when people put apostrophes in plurals. Also, in the to do app we make as part of the course, the instructor calls the items to do ‘todos’ and they should be ‘chores’ or ‘items’ or something that’s an actual word. But if these are my only complaints then obviously this is a great course, and I would recommend it to anyone who is looking to learn JavaScript.

You will make three small JavaScript web apps throughout the course: a note taking app, a to do app and a hangman game. I really enjoy project-based learning as I feel I learn best that way.

I do think this course would be easier if you already have some basic HTML knowledge, but ultimately I think most people would get along just fine even if they don’t know anything about web development before starting.

Now, onto React!

Choosing a Programming Language

One of the main questions prospective programmers ask is ‘what language should I learn first?’ There is no right or wrong answer here, merely points you should consider to help you make the best decision for your current situation.

Most people will probably tell you that one of the easiest languages to start with is Python, and I agree. It is very high level—meaning it’s further removed from machine language and closer to English—and it just makes sense. Many people think of it as a simple scripting language but it is actually extremely versatile and is often used in data science and as the back end for websites. You can even make games with Python if you want.

But maybe you don’t feel you have time to start learning a language that may not match up with your end goals. If you want to start applying for programming jobs as soon as possible, then you should first look at what is available in your area. It may not make much sense for you to start learning PHP when there aren’t many jobs requiring that language.

You may also just want to learn a language quickly so that you can create a project you’ve been thinking of. Although programming languages are versatile and there is a lot of overlap in what they can do, there are usually some areas where certain languages excel.

Automation

Maybe you just want to automate some tasks at work to make your job easier. Python is a great language to begin with for this, and there is even a free online book available that focuses on this topic called Automate the Boring Stuff.

Web Development

If you are interested in creating websites then I suggest you first learn HTML and CSS. These are not programming languages but they are crucial to web development and they will not take you long to learn. After that, you should move on to JavaScript. This is all you really need to get started if you intend to focus on the front end.

If you think you would like to concentrate more on back end development, then after learning HTML and CSS you have a few options. It’s a good idea to learn at least some JavaScript, which is a solid choice for the back end too and a good default if you are not sure what you want. But there are many other languages that can be used here including PHP, Java, Ruby, C# and Python.

Games

I know that wanting to create your own game is a pretty big reason for learning programming. I’d like to make one myself one day. The languages that are most often used for game development are C++, C# and Java.

System Software

If you are interested in programming system software—think operating systems and web browsers—then you should learn C or C++. These are more difficult to learn, especially as a first language, but if you become competent in either then it will help you a lot when you go on to learn other languages.

Mobile Development

If you want to develop for Android, you should start by learning Java (which has no relation to JavaScript).

If you want to develop for iOS, then you should learn Objective-C followed by Swift.

In recent years other languages have released tools to develop mobile applications, such as JavaScript’s React Native, so there may be other options out there.

Data Science

Data science seems to be very popular these days. Maybe you really just want to learn programming so that you can work with data and statistics. You will likely benefit most from learning Python, which has many libraries to help analyze and visualize data. When you’re confident with your Python skills you may like to learn R too.

Conclusion

If you are still not sure, check out this infographic.

Still can’t decide? Then start with Python. As you learn, you will come to discover the kinds of projects you enjoy working on. And once you know Python, you’ll find it easier to learn another programming language.

My Text Editor of Choice: Visual Studio Code

I’ve used a few different text editors and IDEs (Integrated Development Environments) since I first began learning web development. The first text editor I used (not counting Notepad) was Notepad++. It’s what I used all throughout my first web development courses. It is very basic but I stuck with it for a while because it was what I knew, and for some reason it didn’t occur to me that there may be something better out there.

Then I began attending university, where we used a variety of different programs: BlueJ for Java, then later Visual Studio when we were learning C++. BlueJ is made for beginners and it shows, but I did like using Visual Studio for a while. Then some friends told me I should use Eclipse, and others told me I should use NetBeans, so I tried both and NetBeans became my IDE of choice for a while. I was primarily coding in Java at the time.

Now that I’m trying to focus on web development I’ve begun using Visual Studio Code, a text editor that has a lot of similar functionality to an IDE, especially when there are so many useful extensions available. I have to say that I really like it. I particularly enjoy how easy it is to push updates to Github using the integrated Git functionality. It stopped me from having to actually learn the proper commands for quite some time! (I don’t actually recommend you use these shortcuts until you are familiar with using Git via the command prompt.)

One thing I find particularly useful for web development is the fact I can use Emmet, which is already integrated into Visual Studio Code, to easily create HTML. For example, if I want to start a new HTML file, all I have to write is ! followed by the tab key. This will create the HTML boilerplate which gets tedious to type out by hand after a while. You can also create HTML tags by just writing the tag name and selecting the one you want from the drop-down list that appears. For example if I type ‘div’ I can change that into a set of div tags in this way. There are many other things you can do with Emmet but to be honest this is all I’ve been doing with it at this point. If you’re interested in reading more about Emmet then you can check out the documentation.

Extensions

I use a number of extensions, some of which I’d rather not try and code without. I use HTML, CSS, JavaScript and Python so the extensions I use are centered around them.

  • Bracket Colorizer – One of my biggest problems with JavaScript is how many sets of brackets you sometimes end up with. Bracket Colorizer makes it easy to see which sets of brackets go together by color coding them. I feel this is a must-have.
  • ESLint – This can auto format your code and will also tell you if there are any linting errors, which could be bugs or stylistic errors among other things.
  • JavaScript (ES6) Code Snippets – This makes it easier to do many things in JavaScript, and since I hate JavaScript I love using this. All you need to do it type a few letters representing the snippet you want and press tab to have it written out for you.
  • Open-In-Browser – Lets you easily view an HTML document in your browser using a shortcut.
  • Python – Obviously I have the Python extension, which provides a range of features to make coding with Python easier such as debugging and formatting.
  • Dracula Official – This definitely isn’t a must have. This is the theme I’m currently using and I just wanted to make sure everyone’s aware that there are many different themes you can apply to your editor using extensions.

These aren’t necessarily all of the best extensions, just the ones I find useful at the moment. I’m sure at some point I’ll find others I like, especially if I learn other languages or start having to actually use Git with other people.

The Odin Project – Etch A Sketch

This is the project I’ve most recently completed as part of the Odin Project’s full stack JavaScript path. It was actually fun, perhaps because it’s kind of like a game.

I’m definitely not qualified to write a JavaScript tutorial but I’ll give you an overview of how I completed this project. The requirements are listed here.

CSS Grid

I began by creating the grid itself. I used CSS Grid, though there are other ways it can be done according to the project page. Initially the grid was set to 16 x 16 squares. In my HTML file I made a div with the id ‘grid’. Then in my JavaScript file I put it into a variable like this:

const grid = document.querySelector("#grid");

I used CSS to set the display to ‘grid’ and set a width and height.

Then I created a function that set the gridTemplateRows and gridTemplateColumns to repeat 16 times and take up ‘1fr’ of space. ‘1fr’ here means 1 fraction of the available space. So – as far as I know – if all parts are equal to ‘1fr’ then they will always be equal no matter how many there are. I knew this would be important for later when variable rows and columns needed to be accounted for.

This function then runs a for loop for the area of the grid. This is what makes the actual grid items. Each time it runs through it creates a div, gives it the class ‘gridBox’ and adds it to the grid. The loop looks like this:

for (let i = 0; i < size * size; i++) {
    let div = document.createElement("div");
    div.classList.add("gridBox");
    grid.appendChild(div);

Adding An Event Listener

The class ‘gridBox’ is used to create an event listener for every grid square, so that whenever the mouse goes over a square, it changes the color. This is done by adding a class to the classList; this class simply sets the background color to a pretty purple/magenta gradient. Here’s my event listener code:

gridBoxes = document.querySelectorAll(".gridBox");
gridBoxes.forEach((gridBox) => {
    gridBox.addEventListener("mouseover", (e) => {
        gridBox.classList.add("active");
    });
});

I did try changing the classList.add to classList.toggle so that if you went over the same square again it would remove the color, but I decided I liked it better this way.

Finishing Touches

Once I had the 16 x 16 grid working, it was fairly simple to make the size a number chosen by the user. Upon loading the page the user is asked the number of columns/rows they would like and then this number is stored in a variable, which is used to generate the grid.

Initially I just had a reset button which asked the user how many boxes they wanted this time and cleared the grid. But then my husband was like, “why can’t you just have a reset button that clears the grid and lets you keep the same size and add another button for changing the size?” This was simple enough to do so I added the other button to appease him.

Final Project

You can view my Etch A Sketch on GitHub pages here and the code is here. It’s not fancy but it works! I should mention that I know the grid itself does not resize so if your screen is small then you may have to scroll. This was something I did play with but I was having trouble making the variable rows/columns work properly with a responsive box. It wasn’t in the project description as a requirement so I left it as it is.

I’d also advise you not to choose a crazy number for the size. I think I put in 400 once and my browser couldn’t handle it. 100 is a pretty safe upper limit.

Please don’t think this is an example of good code either; I don’t think it’s bad but it’s likely not optimal.

I’m currently still working through the freeCodeCamp JavaScript section. Soon I’ll be up to the projects and then I can post about it!

Lack of Progress

I don’t have anything super exciting to share at the moment. I’m currently working on a series of posts that break down web development concepts in a way that anyone can understand, but the first one isn’t ready yet. I’m planning on them being very thorough.

I just wanted to post so that people don’t think I’m abandoning this blog, since I’ve been pretty consistent so far and I plan on remaining that way. Of course, I also think that most of the people who ‘like’ my posts don’t actually read them because I don’t get a corresponding number of views. But just in case someone cares, I haven’t given up!

I have kind of neglected my studies these past few days. In some ways, I had an excuse. It was my birthday on Friday, and my husband bought me the Witcher III, and I played it for most of the day, with the justification that it was my birthday.

We went out on Saturday for lunch and then did a little window shopping, and when we got back I found it very hard to focus on the JavaScript calculator I was supposed to be making. It looks awesome – just like a calculator! But it doesn’t do any calculator-y things yet. And even though I don’t think of it as being particularly hard, I am finding it really hard to just do it.

I couldn’t focus much on Sunday either, and we went out for my birthday dinner so I wasn’t home in the evening – which is when I feel I get my best work done. Not that I’m complaining about going out. We went to a German restaurant and it was awesome.

What’s weird is I’ve found it pretty easy to write my stories. I posted the second chapter of my Baldur’s Gate fan fiction and I don’t see any problems continuing writing that in a reasonable time frame.

But JavaScript? Just. Can’t. Focus.

I’m thinking of just doing some Python instead. I think that, in the long run, that will probably be more beneficial. But even that isn’t something that really excites me right now. I feel I need some kind of amazing project to really push me to improve my skills, but I can’t think of what that project should be. I like games, so I think about making one, but then I worry that it would be too far removed from what I’d be doing at my potential job. I mean, surely it would have some benefit, right?

I guess I always just go back to my husband’s reaction when I told him about the Roguelike game I was starting. He seemed skeptical about its usefulness as a learning project. And I haven’t worked on it since because it makes me feel guilty, like I’m working on the wrong thing.

Oh well, I’ll at least try to get a few coding challenges done today. That’s better than nothing, right?

How Do So Many Incompetent People Get Developer Jobs?

Seriously. This is really just a whiny ‘life isn’t fair’ post rather than anything particularly useful, because I do not know the answer to this, though I wish I did.

I see people posting on Reddit saying, ‘hey, I just got my first developer job, how do I make a website without Bootstrap?’ Or ‘I just got a job making web apps, I need to learn JavaScript before I start in five days!’ I mean, I realize that some people are lucky enough to network and perhaps don’t even have to go through a proper interview. But surely that wasn’t the case for all of these people.

Additionally, I know some companies will accept someone who they know is light on knowledge, but they are prepared to teach them if they think they have the drive to learn.

These posts, however, are from people who got a developer job and literally just don’t know how to do the things they are supposed to do and now they’re freaking out on Reddit about it.

From from I’ve read, having some kind of technical element in an interview for any kind of developer position is normal – or are there really so many companies that don’t bother to make sure applicants have the skills they say they do? Surely none of these people could pass any kind of technical challenge.

And here I am, worried about the coding challenge that I know I have to take to apply for a job, despite knowing someone at the company. I’m worried that it will be something I have no idea how to do and that I’ll fail, but I know I’m more knowledgeable about Python than these people are about the things their new job requires. I’m also not stupid enough to lie about my skills and experience just to get a job, because I know it’s likely to catch up with me when I have to do something that I just cannot do within a reasonable time frame.

I’m pretty good at figuring things out when I get stuck. I have good Google skills and I genuinely like to learn. I feel like this is more important, for an entry-level position, than how good my coding skills are. Whatever I don’t know, I’ll learn, and if it’s something I’m doing every day then I’ll learn it fast.

There are also the developers who have been doing their jobs for years and still make stupid mistakes that I don’t think even I would make. I hear about these people from my husband who is an IT manager and has to deal with developers from time to time. He tells me about the stupid design choices they make in apps and websites and how he thinks some of them are idiots. To be fair, he is smarter than most people so I think he sees idiocy in places others may not.

That’s the other thing I worry about – I might get a job, and think I’m doing okay, and then turn out to be one of those people that annoys my husband so much. I don’t want that.

If I’m to become a developer I want to be a good developer. I know that being perfect would be a stretch, but I want to be as knowledgeable as possible so that I can avoid stupid mistakes.

I do often wonder if I’m cut out for this. But it’s all I really have, unless I can actually make money from my stories (if you’re interested, my other blog is for writing, though no stories are posted yet).

I do like making websites and programming, but it really does depend on what they’re about. I find it pretty boring working with algorithms and doing math type stuff. Data analysis can be interesting, sometimes, but I think it depends on what the data is. Games are my favorite, and I do enjoy making my blog website, though I’ve been neglecting it for the last few days.

Obviously, if I start working for a company I’ll have to do what they tell me to do. I do think I could handle that because I’d be getting paid for it and that is a pretty good reason to work on a project that I would not otherwise be interested in. I guess I’m just questioning my overall ability to succeed.

Well, now that that’s out of my system, perhaps I can go and be productive and work on some stupid JavaScript!

How to Write a Good Programming Tutorial

I’ve been following a lot of tutorials recently. Some were excellent, some so-so, and some so bad I couldn’t finish them. I’m not an expert, but I can tell you what I do and don’t like about all the ones I’ve looked at so far. Some of it might be subjective, but I think most is not.

1. State the Goal

Don’t just launch right into your tutorial without telling your readers what they will achieve when they’re done. If you are going to teach them to make something, show them the end product and give a brief overview of how it works.

If you’re just teaching some programming fundamentals and don’t have any main project, tell your students what they will know how to do by the time they’re finished. Maybe they’ll have a good understanding of how to implement loops in their code or they’ll know how to use classes.

2. Know Your Audience

Who is your tutorial for? Is it aimed at true beginners who’ve never programmed in their lives? Intermediate learners trying to get some projects under their belt? Work out who you’re writing for, make it clear at the start of your tutorial, and cater to them accordingly. I often find that people label their tutorials as being for beginners but fail to explain the basic elements of programming. You need to start from the beginning.

Tell them how to set up a programming environment and what their choices are concerning text editors and/or IDEs. Explain what variables and conditionals are early. If you don’t want to write all that then link to another resource that covers it. Don’t just leave it out.

You can always include a link to a section that can be skipped to if you want to accommodate both beginner and more experienced students.

3. Spelling, Punctuation and Grammar

Yeah, yeah. It’s a programming tutorial, not an English lesson, right? I can definitely forgive a typo here and there. They are hard to avoid, even if you do proofread your work. No one’s perfect, after all.

But some tutorials are full of spelling mistakes and have sentences that don’t really make sense. I think this often happens when the author is not a native English speaker. If this is you, please find someone to edit your work before your put it out there. You definitely have an excuse for not having perfect English, but it’s a big turn-off to readers when your content is so hard to read. I’ll say now that I’d be willing to proofread posts for anyone free of charge, as long as it’s content that you are posting for free.

4. Use Examples

If you are guiding people through building a specific project then you should include your code to show them what they should be typing. Showing is better than telling. I’m always frustrated when I’m following a tutorial and part of the code is missing. Most people nowadays put their example code on Github so it’s less of a problem, and I’m glad to see that.

If your tutorial is more general, then still use code examples. Maybe you’re telling someone how to build their first web page. Even if you’re intending for them to customize it to their liking, it’s still a good idea for you create an example for them to follow along with if they so choose.

If you’re teaching a programming concept such as conditionals, use a code snippet showing their use. Just explaining how they work isn’t enough.

5. Break It Up

I don’t really like giant walls of text. And I don’t just mean, ‘please use paragraphs’, though that is important too. Tell the user what the next step is and make sure it’s small enough to explain in a few lines. Show the required code whether it’s in a video, a screenshot or just typed between paragraphs. Ideally, you shouldn’t introduce a lot of new code at a time as it can be overwhelming. I personally find it’s more likely I’ll make a mistake when typing it out. (I don’t copy and paste; I find it isn’t good for learning.)

After that, tell the user what they should expect after completing that section, and show the working version of the project or exercise if applicable. Then move on to the next part.

These sections could be more general if your tutorial is aimed at more advanced learners. For example, an intermediate learner probably knows how to run their code in the command line without you telling them how, but a beginner course should explain this explicitly, at least the first few times.

6. Don’t Be Afraid of Errors

I actually like it when a tutorial has you do something which results in an error. It’s a good learning opportunity, because a big part of learning to program is learning to debug your code. I’m not necessarily saying you should be creating errors everywhere on purpose, but think of common mistakes that a student might make. Think of the mistakes you made when you were starting out.

Explain how to read the error, what it means and how to fix it. If you are writing for beginners, this may be a good time to mention how to effectively Google problems that you can’t work out how to fix yourself.

7. Explain Jargon

If you are writing a tutorial about a topic that your intended audience knows little about, it’s fair to assume that they won’t know about common terms or acronyms. Don’t just start writing about global variables or AWS without explaining what they mean or stand for first.

8. Include Date and Version Numbers

I often find it hard to find up to date tutorials because it isn’t always easy to find when they were published or what version of Python or Django they’re using. Please make sure your post is dated (easy enough to do if your tutorial is in a blog) and include the version number of everything you are using. The IT world is constantly changing, and what worked a year ago may not work today. If you aren’t explicit about the fact that you are using Django 1.9 and someone with 2.2 installed tries to follow your tutorial, they might just think it sucks, when the real problem is that the thing you’re telling them to do does not work in their version.

It’s probably also a good idea to update your tutorials as technology changes, but I realize this is often easier said than done. At the very least, be clear about your versions numbers.

9. Provide Practice Opportunities

I think it’s important to try and get people to work things out for themselves where possible. Whenever you’re about to implement another part of a project, or going to write a new script, think about whether you might have covered enough by this stage for your students to work out what to do on their own.

Tell them what the next step is and perhaps give hints that you think will help. Then explain how to do it as usual, since some people won’t get it, and others may benefit from seeing how you solve the problem since it could be different from their solution.

10. Don’t Leave People Hanging

This one is connected to the previous – don’t tell your readers to ‘do this next part on your own’ and then just assume they succeeded and move on. I hate getting stuck and being unable to continue because I was too dumb to work out how to do a certain step.

If you want to include a challenge section, that is a little different, and opinions here will probably differ, but I think it’s a good idea to at least include the answer in a Github repository. One of the things I hate the most is when I fail to do something and can’t for the life of me figure how to do it even when I search Google. Please just give us the answers!

Conclusion

I really do appreciate all the people who take the time to create awesome tutorials for people like me who are trying to learn. I plan on making some myself one day, when I feel I’m knowledgeable enough. I will of course have to be careful not to break any of my own rules!