JavaScript

My strategy for learning a programming language quickly

by

When I first arrived at my new school, I was completely unaware of what programming language they were using to teach the students – it’s something that is prone to change over time and isn’t usually mentioned on a job spec. Many schools throughout the UK will use Python from start to finish in both a procedural and object-oriented fashion later down the line, whereas some schools are still using Visual Basic. I was alarmed to find out that the senior students use C# – a language I had very little knowledge of and experience using outside of playing with it in Unity. Or so I thought.

This article is all about how I was able to rapidly learn C# and begin adding it to my programming repertoire because I was suddenly in a position where I had to! This isn’t a situation that is unique to educators such as me; as a developer, a system architect, or whatever role you are currently in or aspire to be in, there could be times where you too are forced to rapidly learn a new language, framework, or technology in the face of new circumstances, such as a new client or acquisition, or maybe your boss was just feeling malevolent.

Tip 0) A reminder that the language acquisition overlap is huge

Chances are, what you know already in another programming language will transfer over to a new one that you’re attempting to learn. Core concepts such as variables, classes, functions, arrays, and so on are more often than not going to remain identifiable as you change technology, give or take semantic differences. This is just like how once you learn how to speak another language, you get more efficient at the language learning process.

Granted, some jumps are larger than others, like getting used to semicolons and braces when you’re from a Python background, or entire design patterns such as MVC (Model View Controller) when learning a new framework like Laravel or Rails. Chances are though, you already know more than you’re aware of!

One more thing, please don’t be afraid of admitting you don’t know something! If you’re familiar with Broadwell’s learning competence theory, this is one step closer to mastering something!

Tip 1) Learn by doing

I knew to start writing C# my best bet was to download Visual Studio and get started*, and that’s exactly what I did. I dedicated a few hours to installing the software and building basic programs and algorithms that I knew just so that I could come to understand the syntax and general workflow.

I played around with building console apps, using Winforms to build some basic desktop applications, and when I was ready I decided to start looking around at tutorials online and on YouTube to learn some more complicated functionality, such as accessing databases, accessing and writing to CSV (Comma Separated Value) files, and so on. I remember laughing to myself when I found the StringBuilder functionality was just like the implementation in Java.

You can do as much or as little of this as you want, but I truly believe this is the most effective way to learn it, more so than reading or watching alone.

* I realise that this isn’t the only way to develop in C#, especially on macOS or Linux. But this is what we do in my workplace, so it’s how I opted to learn.

Tip 2) Find a good reference guide

(If you want to suggest something to add here, please let me know in the comments!)

I don’t recommend reading textbooks or references from start to finish as an effective guide for learning programming languages. But finding a good reference that you can look at for additional insight is a great way of learning. Here are a few of my favourites for the languages I use most, and they’re completely free (unless stated otherwise):

Multiple / General Purpose

  • Codecademy (JavaScript, C#, Java, etc.)
  • freeCodeCamp (Web Development)
  • The Odin Project (JavaScript, Ruby)
  • General MOOC websites like Coursera, edX, Udemy, and FutureLearn also fall under this category

JavaScript

C Sharp

PHP

Tip 3) Learn from others

Learning from one another is a tried and tested way of aiding you on your learning journey. You’d be surprised what you can learn by sitting down with someone for half an hour when you get stuck. For me, sitting down with my colleagues and having them run through some of the aspects I was unsure about was immensely helpful.

I realise that this isn’t everyone’s cup of tea, nor is it a luxury available to everyone. As a bonus, I recommend giving fellow developers tweeting about the technology you’re learning a follow on Twitter if you use it.

Tip 4) Remember that this is an ongoing process

Don’t be discouraged. Remember, learning is something that developers and other professionals (teachers included!) never stop doing and there will always be gaps in our knowledge. We can’t possibly be experts on absolutely everything, so remember that it’s only necessary to learn what you need – you can always learn more along the way and there’s absolutely no shame in that.

In my experience, smart people are those who recognise that there are things that they themselves do not know.

The smartest people aspire to go one step further and learn what they don’t yet know.

Conclusion

In all, it took me a few days to get comfortable with working in C# and to develop my confidence where I was able to pick apart my learners’ work and debug it comfortably. I realise that I am absolutely not an expert, nor do I claim to be. But I know enough to do my job effectively, to teach it to other beginners, and to start me down the path of continuous learning and improvement in my own skills.

I hope that you enjoyed this piece of writing and that you find it useful whenever you might find yourself needing to learn something in a hurry.

Fun with Clippy.js

by

Remember Clippy? The (not very) helpful assistant that was a major part of Microsoft Office for numerous years? Sure you do!

These interactive assistants were part of the Microsoft Agent suite of technologies and were incorporated into Windows XP as well. It was also infamously used in BonziBUDDY – the fun and interactive gorilla that also happened to be… spyware.

Whilst these technologies have been long mothballed in favour of more intelligent assistants like Siri and Cortana, Clippy and friends live on in our web browsers in the form of a fun jQuery library called Clippy.js.

Should I use it?

In a real-world project, probably not. It’s out-of-date and requires the use of jQuery. It also loads agent data and sounds across the Internet from an Amazon S3 store. But is it fun? Yes!

By the way, if you’re looking for ways to use Microsoft Agent in your .NET applications, you should look into DoubleAgent instead.

As far as I’m aware, there is a version that has been imported to vanilla JavaScript ES6, but I haven’t experimented with it so far.

Installing and embedding Clippy.js

You can clone or download Clippy.js from its GitHub repository, here. You’ll want to pull the minified JavaScript file and CSS stylesheet from the build directory.

As for jQuery, you can choose to download that also (from their website) but I recommend using their official CDN, or content delivery network. The current version at this time of writing is 3.5.1, and including the minified version reduces the amount of data needed to be downloaded by your web browser.

Don’t use out-of-date versions of jQuery unless you absolutely have to.

First, include the CSS stylesheet and necessary JavaScript files into the <head> tag of your webpage:

<head>

<!-- Include the Clippy.js stylesheet, assuming locally -->
<link rel="stylesheet" type="text/css" href="clippy.css" media="all">

<!-- jQuery -->
<script 
        src="https://code.jquery.com/jquery-3.5.1.min.js" 
        integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" 
        crossorigin="anonymous" 
        defer
></script>

<!-- Clippy.js, assuming locally -->
<script src="clippy.min.js" defer></script>

</head>

If you don’t include the defer attribute on your scripts, then you should insert them into the footer of the webpage to ensure that they only begin loading once your page has finished loading – it’s also important that you include Clippy.js after jQuery.

Usage

You can write your jQuery for playing with your agent in-line or in an external file, but for our examples, let’s keep everything within a <script> tag.

First, you should note that you have a choice of multiple agents that Clippy.js supports, including but not limited to:

  • Clippy – obviously
  • Peedy, the parrot
  • Rover, the dog from Windows XP
  • Bonzi, the purple gorilla

Let’s use Clippy and get it to appear.

<script>
  clippy.load('Clippy', function(agent) {
    agent.show();
    agent.speak('Hello World!');
  });
</script>

With any luck, it should appear and greet us! You can find a full list of available action actions from its aforementioned GitHub repository.

Building a very basic action generator

See the Pen Clippy.js by Oliver Earl (@oliverearl) on CodePen.

We’re going to build a very basic program that constructs an agent and has them go through each of their animations, one by one. You can follow along or take a look at the above CodePen. If it isn’t appearing for you, you can click here to get it.

Let’s add a heading and a paragraph element to our webpage. The paragraph will have an ID that we can target with jQuery later. You can use whatever CSS styling you want – I’ve just replaced the default text font with sans-serif for now.

<main>
  <h1>Current animation:</h1>
  <p id="state">None</p>
</main>

Let’s declare a new function that will take two parameters – an agent and the agent’s animations. I’m assuming absolute basic JavaScript knowledge, so I’ll keep things as simple as I can. Add this underneath the }); of the last block of code, but still before </script>.

In the block before it, let’s use the JavaScript function setTimeout() to call this new function after a few seconds have passed – we will pass our initialised agent and its available animations as arguments, and set a time of 8000 milliseconds – 8 seconds. It should look like this:

<script>
  clippy.load('Clippy', function(agent) {
    agent.show();
    agent.speak('Hello World!');

    setTimeout(animate(agent, agent.animations()), 8000);
  });

  function animate(agent, animations) {
    // Code will go here
  }
</script>

Let’s consider what we need to do by decomposing the problem, we want to:

  • Loop through all of the available animations
  • Have Clippy perform that animation
  • Print out what animation Clippy is performing to the paragraph tag.

In our new function, we can use a jQuery element selector to store our paragraph HTML element in a variable. jQuery variables are typically denoted by a $ sign. We can put this before our loop so that it doesn’t get redeclared on each iteration.

let $currentAnimation = $("#state");

Now let’s consider the loop. We can use a basic For loop to iterate through the animations, as we know exactly how many times we need to loop through (by measuring the length of animations). Within the loop, we can have Clippy perform said animation, and use jQuery to update our paragraph using its built-in text() function.

function animate(agent, animations) {
  let $currentAnimation = $("#state");

  for (let i = 0; i < animations.length; i++) {
    agent.play(animations[i];
    $currentAnimation.text(animations[i]);
  }
}

It looks good! But there’s a problem. Can you work out what it is?

Computers are fast, and Clippy.js uses a queue system to asynchronously perform animations, meaning that the text will update to the very last entry whilst Clippy performs each animation in its queue. We need to slow down this execution using the setTimeout() function that we used earlier:

function animate(agent, animations) {
  let $currentAnimation = $("#state");

  for (let i = 0; i < animations.length; i++) {
    setTimeout(function () {
      agent.play(animations[i]);
      $currentAnimation.text(animations[i]);
    }, i * 8000);
  }
}

Conclusion

And that’s it! I hope that you’ve had a little bit of fun with Clippy.js. Please feel free to fork the CodePen and build something uniquely your own. I hear other developers have managed to embed their own agents inside React or Electron apps, which is both impressive and uniquely horrifying.

Until next time!