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

CSS grid and CSS flexbox

This week we start to learn about CSS grid. Last week, we learned about CSS flex styles. There are certainly times when you will be puzzled about which of these two choices is the best one for a particular design problem you are facing.

A CSS grid layout has one huge difference from a CSS flex layout:

  1. When you choose grid, you want to arrange items in two directions, both rows and columns, inside a grid container.
  2. When you choose flex, you will work with only one row, OR one column, inside a flex container.

You will still scratch your head over this choice at times, so here are two wonderful, free resources that might help:

  • Grid by Example is a site with tons of examples of how to use grid layouts, with a handy visual arrangement that makes it easy to identify a pattern that might work for your design.
  • CSS Flexbox Examples includes a bunch of sample layouts for distinct situations, like a photo gallery.

Flex actually has far fewer options, because with flex we are only arranging one row of things, or one column of things. So check this out: A Complete Guide to Flexbox.

For fancy, artistic grid examples, see Web Design Experiments by Jen Simmons.

Colors for web apps!

Screen Shot 2018-09-17 at 12.01.39 PM.png

This article is full of amazing resources for choosing a palette for your web app. In addition to the subtle palette shown above, they show 19 more examples from “Sites of the Day” chosen by aWWWards.

And that’s not all! Below the 20 inspiring examples, the article links to a bunch of free online tools for choosing and combining colors. For example, 0 to 255 lets you enter one color and see a huge sample of lighter and darker shades of that color.

Screen Shot 2018-09-17 at 12.09.02 PM

If you’re having trouble wrapping your mind around hexadecimal codes for color, watch this 4-minute video:

Last but not least: When choosing text colors, always make sure they have enough contrast against your background color to make reading the text easy. If you have any doubt about it, you can check the level of contrast here to make sure it’s good enough.

The course is full?

There are two sections of Intro to Web Apps for fall 2018. Each is restricted to 20 students.

Students are likely to drop right up until the Drop/Add deadline on Tuesday, Aug. 28, at 11:59 p.m.

If you want to add this course, you need to watch it in ONE.UF. This is the only way to get a seat if one opens up. Only you can enroll yourself if a seat becomes available! There is no waiting list.

Only undergrad students majoring in JOU, ADV, PUR or TEL may enroll in this course.

A word of advice: It is likely that some students will drop after the first lecture on Tuesday, Aug. 28.

It would be really good if you come to the lecture that day to hear the instructions for the first week. That way if you do get in, you won’t be behind all the other students.

The lab on Aug. 22 will not meet.

Fall 2018 updates

JOU 3363 Introduction to Web Apps for Communicators is a course specifically for students in the College of Journalism and Communications, in any of our four majors. No prior experience with any kind of coding is expected. We start from zero.

Some of the past students have said this was the hardest course they took at UF. That might be true, but how do you define “hard”? If you mean you will work for hours and hours each week and not always be satisfied with your results, then yes, it is hard. But if you mean the concepts are difficult to grasp, as in physics or economics — then, no, this course is NOT hard!

The concepts and rules of writing web languages — HTML, CSS and JavaScript (not Java; that’s different) — are pretty simple and straightforward. There are rules, and you can easily learn the rules. However, making everything fit together, look good and work well takes time. Code is learned by doing, by trial and error, by writing it and testing it and failing and then trying again.

It takes a lot of time and a lot of effort. It takes attention and dedication. It requires interest and a desire to learn. This is not a course where you sit back and watch and listen. You have to work at it every week.

Labs and lecture

The lecture combines two sections in one room for one period each week. We’ll go over the most-missed questions on the weekly quiz and get tips for doing the week’s assignment. It is not a traditional lecture covering the week’s material — that material is covered in online videos. It is assumed you will watch the videos for the week before the lecture class meeting, so that you can ask questions if needed.

The lab sections are limited to 20 students each. During the lab, you’ll work on the week’s assignment. Near the end of the semester, you’ll give a presentation in lab about your final project.

This course follows a flipped-classroom model, which is why the labs are reserved for working on your assignments — you will read assigned sections in the required textbook and watch video lectures about the material before starting the assignment. If you skip the reading or the videos, you are likely to find the assignment difficult, especially after the first few weeks of the semester.

CSS Grid resources

Ryan was kind enough to give us a demo of CSS Grid in class on Nov. 21. He recommended these resources for learning to use grid layouts:

.

Using a background image

In your final project, some of you may want to use images in ways that seem awkward at first. Maybe you have forgotten that an image can be used as a background for any container-type element in HTML: a div, an article, a section, etc.

Here’s an example of the same image (one image) used to “cover” the background of three different-sized divs, with the image centered in each case. This is done with CSS. Robbins explained this where she talked about the background property in CSS.

Notice how I wrote white text over top of the image using normal HTML <p> tags.

Here’s the code (HTML and CSS only) for that example.

You’ll notice that Codepen is a site similar to jsFiddle, only more beautiful. It’s a good place for searching for solutions to tricky CSS and Bootstrap problems you need to solve. Just make sure you link to the exact Pen you used if you copy any code from Codepen! You may also embed the URL to the Pen in your CSS or JavaScript as a comment.

Do not steal code and fail to give credit to where you found it. Always include a complete URL for any copied code so that you don’t break the plagiarism rules.

Final Project Details 2017

In the week of Nov. 13–17, we will have our last quiz, and you’ll turn in your last weekly assignment.

That’s also the week when your project work begins!

The project has several deadlines. You are graded on EACH deadline, and you cannot make them up later.

  • Sun Nov 12 – Project proposal due
  • Tue Nov 28 AND Tue Dec 5 – Project presentations in class
  • Sun Nov 26 – Project Week 1 due
  • Fri Dec 1 – Project Week 2 due
  • Fri Dec 8 – Project Week 3 due
  • Mon Dec 11 (finals week) – Project Final due – posted on your own website (not GitHub)

During this time there are no quizzes or other assignments. Class continues to meet, and attendance will be taken. Friday workshop hours will be discontinued with one exception: On Friday, Dec. 8, I will be available if you tell me in advance you want to come in. Classes end on Dec. 6. Our class WILL meet on Tuesday, Dec. 5 (and we may need to move to a different room that day; I will tell you closer to that date).

Inspiration

Design examples

What is a good project?

Above all, I want you to create a web apps project that will be a great addition to your personal portfolio.

Your project must be about something, or it helps the users to do something. Before you choose the subject, imagine showing it in a job interview. The person interviewing you will probably ask WHY you built an app about this topic. Now, I can imagine two different ideas in that person’s head: (1) “Why in the world would anyone make a web app about this?” Or: (2) “Interesting! I wonder why he/she picked this?” That (1) is a pretty negative thought, and it’s not what you want that person to be thinking! So aim for (2) when you plan your app, and be able to answer the question.

Here are criteria for your project:

  1. Your project must NOT be a personal website, a website about you or a friend or a small business, or a resume or portfolio website.
  2. It must use HTML, CSS and JavaScript.
  3. All images must be fully legal to use and fully attributed and linked (if they are your own images, made by you, that fact must be explicitly stated in text that is visible on your page).
  4. Any videos, music, maps, charts, illustrations, etc., that you use must be fully attributed and linked to their sources. No copyrights can be violated. Plagiarism rules from this course’s syllabus ARE in effect.
  5. JavaScript must be included in a way that is useful. Including Highcharts charts and/or Leaflet maps qualifies as useful JavaScript, but those are not the only ways we can use JavaScript. You could create a game or a quiz from scratch. You could use a JavaScript library for animations. There are lots of possibilities. (You are not required to include Highcharts charts and/or Leaflet maps.)
  6. Interactivity is expected. Your users should not just be staring at text and images. They should be able to DO THINGS on your page.
  7. All pages are fully responsive. I will test them at very large widths and very small widths, and also for iPhone 6 in the Chrome Dev Tools.
  8. Your app may include more than one page, but many web apps today are completely contained on just one page. In fact, it is more common nowadays to see a one-page app. So I encourage you to create a one-page app that demonstrates current best practices in web design.
  9. You MAY use Bootstrap, but it is not required. If you do not use Bootstrap, you will still be held to professional standards of design, including: correct font stacks; fully responsive design; accessibility of images and form controls; page layout with thoughtful spacing and arrangement of elements.
  10. If you use Bootstrap, you MAY use a free or paid theme. Using a Bootstrap theme is NOT easy; you will learn lots of new things if you try this (just Google bootstrap themes). Once you have mastered a Bootstrap theme, you have a new and very valuable skill. Make sure any theme you use is specifically for Bootstrap 4. Whether you use a theme or not, you will be graded on correct use of Bootstrap styles.

If you have questions about the project, please post them HERE as a reply to this post.

Examples of Bootstrap apps

Building personal projects is the best way to get better at code and front-end development. Here are two personal projects I made with Bootstrap 3 (note: NOT 4 — they are older).

You’ll find a link to a complete GitHub repo at the bottom of each of those, so you can see the code if you’re interested.

The reason I chose to use Bootstrap for each of those projects was because my main aim was to work with JavaScript and handling data, so I did not want to spend a lot of time thinking out the design and writing CSS. That’s exactly the kind of project for which Bootstrap is great!

Each of the examples also has a README at GitHub if you’re curious about the why and how of it.