Pseudo code

Screen Shot 2018-10-16 at 11.57.44 AM

Today in class I talked about how writing pseudo code is a good technique for solving code problems. It helps us to think algorithmically if we talk to ourselves (out loud, or silently) about the problem we are trying to solve.

Then we write out what we’re talking about. Just write out all the pieces, the parts, that will be used. Write out what must be done with the parts, how they will interact or work together.

My example: The problem to solve is getting JavaScript to play Rock, Paper, Scissors. By writing out the “ingredients” we need to work with in this problem, and how those ingredients interact with one another, we start to get a grip on what needs to be done:

Screen Shot 2018-10-16 at 12.02.09 PM

Notice how I did not use any JavaScript terms, such as variable or let, if or else if, or arrays. Pseudo code is just plain, normal English.

Continuing with more pseudo code: I am not finished yet. Now I have to reason out the things the program must do. Again, I will use just plain English to do this.

Screen Shot 2018-10-16 at 12.06.01 PM

I might have everything I need now. I will think about the game and how we play it with two people, using their hands in the normal way. Maybe I want to offer “best out of three.” If I do that, I will also need to keep score. That’s more work, more code. If I decide to do that, I will add it to my pseudo code.

Starting to write real JavaScript: We can copy the pseudo code into a file as JavaScript comments, and then write the real code directly into those comments. Here’s a live example to show what I mean.

My example isn’t finished — it doesn’t completely play Rock, Paper, Scissors yet. It does run without errors, though, and that’s another important point: We can use the pseudo code comments to write one little bit of the program at a time, test it, and after it works, move on to the next little bit.

Screen Shot 2018-10-16 at 12.22.38 PM

You can see that I moved my pseudo code around in the live example. I changed the order. That’s normal. As I figured out bit by bit how to solve each step that’s needed, I moved some of the pseudo code lower down, because I haven’t solved those parts yet.

Screen Shot 2018-10-16 at 12.27.09 PM.png

You can see that I have removed the original three lines of pseudo code about a tie. I did that because my JavaScript has already handled any kind of tie, in lines 23–25 above.

As I continue to solve this problem, to make the “game” actually work, I might continue moving and even rewriting my pseudo code. At the end, I might delete the pseudo code comment lines. But I might keep them, to remind me how I solved it all.

Using pseudo code is not only for beginners. Experienced pros use it too.

Image source: Public domain, from Publicdomainvectors.org

Advertisements

Starting JavaScript!

js

This week, you will start learning JavaScript, the programming language that lets us add interactivity and more to web pages and apps. This is a handy list of resources:

JavaScript has been around since 1995, and random Googling by a beginner is likely to end in tears. There are so many old tutorials and so much outdated advice! You most definitely can learn to use JavaScript, but keep your focus on what is taught in this course and what is asked of you in the assignments. I have tried to streamline it for you.

Note: If you use JSHint, make sure you click “Configure” at the top of the page and select “New JavaScript features (ES6).” Otherwise you will get an error every time you use the let keyword, or any template literal.

Screen Shot 2018-10-08 at 6.29.37 PM

Encourage others to code!

Screen Shot 2016-12-04 at 9.20.04 AM.png

“Hour of Code” is an international effort to get people of all ages to try coding for themselves. The official dates for the big promotion are Dec. 5–11 this year — but the Hour of Code tutorials are online (and free) year-round.

Hour of Code tutorials

You can choose by grade level (even pre-schoolers can play), subject matter (e.g. “language arts”), and length of time. Most tutorials can be completed in an hour or less.

Tip: If you get others to take a leap and try code, you might find yourself in the role of teacher. Guess what? By teaching, you learn more yourself. Give it a shot!

jQuery examples

If you want to see demonstrations of what jQuery can do — with just a few lines of code! — view these examples. These are complete files, not jsFiddles. You can copy and use any of this code. This is a GitHub repo with several nifty example pages.

In addition, here are some of my fiddles with brief jQuery examples:

Don’t forget — the perfect place to look up a jQuery function is the official jQuery site.

Creative storytelling: Example

Here is another New York Times feature story that uses all kinds of cool code tricks to add interactivity:

Greenland Is Melting Away

Note that the developers did use a framework for this page — it was Foundation, not Bootstrap. They used JavaScript to detect older versions of the IE browser.

They used a JavaScript library named FT Scroller for the scrolling interactions.

There’s a bunch of custom JavaScript to accommodate mobile, disable scrolling effects, and more.

You can even find some code you will recognize if you view source:

Source code - screen capture

What is a “full-stack” developer?

You’ll probably come across this phrase — “full-stack” developer — if you Google around for information about Web development. It’s intimidating to look at the lists of technologies a full-stack developer uses. However, I think it’s useful to look at the lists.

Why? Mainly because we see that some things are common, and others are not. For example:

  • HTML
  • CSS
  • JavaScript
  • jQuery
  • Bootstrap

These are common front-end development technologies, and you’ll see that many of the full-stack developers use them. Not everyone uses Bootstrap, of course, but it’s pretty common.

You’ll also see these a lot:

Those are back-end technologies, and so they’re not part of this course.

By noticing that there is a lot of variety in the lists of technologies used, you should take heart in knowing that there’s not just one fixed set of tools that all developers must know. The tools you choose to master often depend on the projects you have chosen to do, or the projects that you joined when others made some of the choices.

Also, not everyone needs to try to become a full-stack developer. You can focus on the front end or on the back end. I think most Web developers (not designers, but developers) have some back-end skills and way more expertise with front-end technologies.

For news apps, you don’t need the long list of skills that a full-stack developer claims.

This guy says that actually there are not that many good full-stack developers to be found.

New free resource for JavaScript

Code School has a new, free course for learning basic JavaScript:

JavaScript Road Trip

Unlike Codecademy, Code School has some very well-produced videos to help you learn. Like Codecademy, Code School offers an interactive exercise panel where you can try to answer problems, and they award you points if you get these right.

We will be using Code School for learning jQuery.

Code for journalism students

There’s a movement afoot that says everyone should learn to code. Programming should be taught in the elementary schools and high schools as a regular required subject. Why do people think this? Because learning to code is a process that makes you a better problem-solver in all kinds of situations.

Learning to code does not mean you want to become a computer programmer. I know you signed up for a major in the College of Journalism and Communications because you were good at writing, or maybe good at visual storytelling, and probably you did not like your math classes. Guess what? Neither did I.

Check out the About page and the Course Schedule and see whether you think you’re up to the challenge. Learn to code.