Skip to content

The Google Chrome Development tools are very useful if you want to understand and learn about web programming.

The tools are integrated in the Chrome web browser and you can find them easily selecting the View Menu, then Developer and Developer Tools.

By default at the right side of the browser a panel will appear . For trying out some Javascript code, click on the Console tab and then clear the console.

How to use the Chrome Developer Tool console to try out Javascript code snippets.

The console allows you to enter small Javascript code snippets, just one line or a small block. When you have finished entering your command(s) behind the ">" prompt, press return on your keyboard to execute your code. If your code produces any output, it will be shown on the following line.

console.log(....) will print anything you ask it to print in between the parentheses. But methods and functions also have return values (like an output). If the function has nothing to return, it will often write "undefined", no worries if you read this message.

Often you need to get a copy of your screen or a part of it for documentation purposes. There are many different ways available with Windows 10, my two favourite tools are mentioned here, they also give you some choice on what part of the screen you want to copy.

Snipping Tool

This tool is around already for a long time. It will not show up any more as an app, so you will need to type its name in the search bar at the bottom of the screen. Then you can choose it.

How to find the Snipping Tool with the Search Bar

Click the New button to begin the screenshot process. The default snip type is a rectangular snip, but you can also take free-form, full-screen and window snips.

The Snipping Tool does not automatically save your screenshots -- you will need to manually save them in the tool before you exit -- and it does automatically copy your captures to the clipboard.

This tool maybe discontinued in the future, a message with that content will be displayed when you launch the app.

Snip & Sketch

This is a newer tool, the fastest way to launch it with the keyboard shortcut Windows key + Shift + S. You will also see the Snip & Sketch tool listed in the Start button as well as in the notification panel where it is listed as Screen snip, these are two alternative ways to start the app.

After launch, the screen will be dim and a tiny menu will open at the top of your screen. It lets you choose which type of screenshot you want to take -- rectangular, free-form, window or full-screen.

Choices for a screenshot with Snip & Sketch, displayed at the top of the screen

Once you take your screenshot, it will be saved to your clipboard. Click the notification that pops up to open the screenshot in the Snip & Sketch app to process it further in the app. You may also access the image via the notification panel.

There are other options. available with this tool, just have a look in the documentation.

Both these tools are not as powerful as some commercially available tools, but they give you the basic functionality and they are free-of-charge.

Classes are a means to structure your program and make the code more easy to follow. A class allows you to put all variables and functions that create, manipulate and interact the same type of structure in one declaration and use them afterwards throughout your program.

(more to follow ...)

Arrays are a powerful element of programming languages. They allow to store and manipulate data using one name and then accessing individual data with an index (number). You can imagine them as a container that holds many objects.

You may also imagine a postman distributing letters in one street with a certain name, distinguishing the individual addresses by the house numbers. The name of the street compares to the array name in programming, the index has the same meaning as the house number.

The image below summaries the key features of an array and also visualises how the indexing works to create, access and delete fields of an array.

You have several ways to access the elements of an array. The most common ways are ...

  1. You can use the array name with the index in brackets to set or get the content of one field, Burt also to add new items.
  2. You can use the push/pop methods to add or remove items at the end of the array.
  3. You can use the unshift/shift methods to add or remove items at the beginning of an array.

A full documentation on arrays can be found on the MDN website. It not only describes in words what the class and its methods are doing, but it also provides small editors with sample code you can modify and execute. For each method there are detailed descriptions accessible on the left side of the window (if your browser window is wide enough) with even more sample code to play with. Have a look.

MDN side for Array

Assignment

The following screenshot shows how the push and pop methods are working.

  1. Please follow the instructions given here to launch the Development Console of your Chrome browser and then do the example with the push and pop methods by yourself.
  2. Next try to figure out how the unshift and shift methods are working. You can have a look at the MDS documentation first (you find at in the array section).

We will work extensively with the Array methods for making games, so getting familiar with them will be very helpful later.

Since starting to write here, I went through a couple of iterations with my blog.

Yesterday I set up a first classroom with a student's test account. This was a really helpful exercise to understand the process and be able to explain it to the students when I resume classes.

I also realised that choosing a responsive WordPress theme is important for working at school. While I will use WordPress on computers at school, parents may just want to check their childrens' work with mobile devices. So responsive (meaning running fine on both desktop and mobile devices) is an important feature. So when selecting your blog theme (and this also applies for your students when they are setting up their theme), choose a responsive theme.

I didn't do so in the first place, so I changed my theme today. This was less troublesome than I thought because in Edublogs you can preview your content (posts, pages) with a new theme. So the more content you already have, the better you can judge how it will look like with a theme.

On the Edublogs course for teachers it is also suggested to set up blogging rules for your group of students. While you can simply copy some of the excellent suggestions made on the blog, you should just take them as a starting point and then add additional things that are important for you or your school. It is worth it, here are my rules

I also decided to separate this blog aiming only at my students and their parents more clearly from what I want to share with other educators and interested folks. So while right now I will continue to blog about my reflections here on the "student's blog", I will later copy the content to my other site. These blog entries will also help my students to better understand on how the blog was set up, but the same input will hopefully help you to set up your sites.

One last remark, depending on the theme you are choosing, you will need to get your pages appear. The easiest way is with widgets, but nicer is using the menus. Have a look at the documentation of WordPress.

When you decide to make your contact form with Formidable, first create your form. The plugin has changed compared to what is shown in the Edublog Teacher's Course, but the new documentation is helpful. Then you can either add the Formidable widget to show your contact information. Better is to create a new page "Contact Me" and then add only the Formidable shortcode Please select a valid form. You find the .. , a number, when opening the Formidable plugin, see the image just below this paragraph. The contact form will then be a page like the others and can be displayed the same way.

Formidable main view with forms and their shortcakes

The About, Blogging Rules and the Contact form are now all up and running, so please feel free to give me any feedback you want to share.

Thank you for following me on my journey so far.

Michael

What are the first blog entries here all about?

The following blog entries describe my voyage to set up my Edublog. As such it contains also a lot of reflections about what worked out and which pitfalls I ran into. In the coming weeks, I will set up this site for blogging with one of my classes following the edublogs Teacher Challenge.

What do I want to achieve with my blog after the setup stage?

I will use it for my ICT after school activities to provide basic information, links to supportive material as well as assignments. Furthermore, I plan to open up blogs for the students to describe what they are doing, reflecting on their work, commenting and also getting feedback from parents.

What am I going to write about here?

Today I will focus on how code can be represented in WordPress, comparing in particular handling and display of code with the old "Classic Editor" versus the new "Gutenberg Editor". For me there are two ways how to give my students access to code:

Sometimes I want that the students go through typing and debugging code by themselves. I want to avoid that they are just copying and pasting code snippets and make them run without thinking what they have done. In these cases it is best just to post an image of the code in jpg format, something they can not simply copy and paste into their IDE.

Other times, code here may serve as starter code, then it is great if they can copy and paste lines and add their own parts to it. Making code available here is a quick way to cater for this scenario. An even better way may be GitHub Classroom, once I have run the first classes with this tool, I will share my experiences here.

In the following I will share my experiences on how to handle the second scenario best.

Displaying Code Snippets

Today I have played a bit around with the possibilities to format code snippets. I have another site hosted on WordPress.com. The Premium package I have subscribed to gives you ample storage space, and most important good exposure to search engines. On the downside, that package does not allow for any plugins to be installed. So a lot of helpful add-ons are not available.

Edublogs on the contrary allows you to install at least from a selection of plugins.

For coding in particular, the SyntaxHighligher Evolved is really useful to format code with keyword highlighting for various programming languages, indentation and line numbering. You also get "copy & paste" ready code snippets. This tool for syntax highlighting is available for the "old" Classic Editor in WordPress.

As I decided to go with Gutenberg, the new WordPress editor, you only get plain vanilla code snippets. But with a bit of work you can still select the Classic Editor for individual blocks, do some editing in HTML mode and then get the code nicely formatted.

Here is the famous "Hello World" in C++, first with the old syntax highlighter written in the Classic Editor, next with the new Gutenberg code block. Compare for yourself.

 
#include <iostream> 
using namespace std; 
int main() { 
    cout << " Hello World!\n"; 
    return 0; } 
#include <iostream> 
using namespace std;

int main() {
    cout << " Hello World!\n"; 
    return 0; 
}

Both examples are nicely formatted, all the indentations are there. But the second snippet misses the colour highlighting of keywords as well as the line numbering. For the moment I will mostly use the new editor, sooner or later a similar plugin will be available here on Edublogs for Gutenberg, they are already out there for self-run WordPress sites. In the meantime when required, I will fall back to a classic code within Gutenberg.

Two more sites to check out ...

I also run two more ICT related sites, www.code2run.com and www.mikefromd.github.io. The later will only come live in the coming weeks. I will use it with GitHub Classroom for my students to provide sample code to remix and code fragments to start with, I mentioned this earlier. The other site code2run has examples and descriptions on how to use various educational platforms as Alice 3, Arduino, p5js (a Javascript Library with IDE derived from Processing). Have a look at those sites if these subjects are interesting for you.

Skip to toolbar