Sunday, February 20, 2022

Getting started with HTML+CSS at age 12

Our first Web Development session started when she had written her very first HTML page on her own using TextEdit and viewing the page in Safari. We agreed to have a little 15 minute session to have a look what she had made. I was really impressed by her enthusiam and motivation and we had a really good time for the next 1 hour or so.

We started by discussing the structure of HTML documents:

  • <head> part for meta stuff like <title> element that determines the title of the browser tab
  • <body> part for all the rest

No-one should be forced to use TextEdit, Notepad or the like for editing HTML code so before we started working on the code we installed VisualStudio Code, which is a free editor that a large part of professional developers use nowadays. It's a no-brainer, use it. Then we enabled "Format on save" from settings so that the HTML page will always be nicely indented so you can concentrate on the content.

Then we experimented with basic HTML tags like <h1>, <h2>, <ul>, <li> to get started. But quicly she wanted to have, you know, colors, fonts and other cool stuff so we discussed basic styling. I introduced two ways:

  • Use a <style> element (it's important to understand the concept of elements and that they can be nested tree-like) and include CSS style declarations within. In this option you'll use a selector like body to select where to apply style and then one or more style declarations within braces { }.
  • Use a style attibute directly in an element. This is not preferable because you'll end up with a cluttered document instead of a nice separation of style and content.

She started working on a page describing her pets (two chickens and a lizard!). 

We had such a good time that we also got to cover the topic of "how can I get my page on the Internet for reals". And for that you'll need to

  • Have your HTML placed on a server
  • The server needs to have a public IP. This is where we took a lengthy detour into networking. In home networks there's a router that has one public IP, while the local computers and devices only have a local IP and the router is doing NAT (network address translation) to allow the devices to connect to the Internet. But the problem here is that your laptop computer doesn't have a public IP and thus isn't reachable from Internet.
  • You should also have a domain name, such as blogspot.com, which then resolves into an IP address when your computer asks for the IP address from a DNS server.

Then we discussed the URL, which is on your browser's Address Bar. An "Internet URL" will look consist of

  • Protocol, such as https:// (tells the browser how to talk with the server)
  • Hostname, such as blogspot.com (resolved into IP address on DNS)
  • A path such as /images/cat.jpg or just / for the "home page" (tells the server which file should be served)

A local File URL on the other hand will look something like file:///Users/mila/Desktop/milannettisivu.html. I asked her where will the browser look for the page given that File URL. She got it right then: from your own computer.

But the best part of the session was when she told me that I'm a really good teacher. Made me so proud!





Wednesday, February 16, 2022

file:///Users/mila/Desktop/milannettisivu.html

We had a little "career discussion" with my daughter last Sunday. She already knows I'm working at a pretty cool workplace where we have, for instance, free candy and infinite amount of ice cream. So when she was pondering what could be skills that could land her nice summer jobs at an early age, I innocently suggested Web Development and starting with HTML. This escalated quickly into the following WhatsApps conversation.


So someone had actually watched a YouTube tutorial on writing an HTML page and got started. I was really proud! The URL of course had me smiling. Can you spot why its funny?

Monday, November 13, 2017

Threading: Consider it Done

Today we learned some threading. Threading is an advanced programming concept where the computer runs your code in multiple threads meaning that it actually does multiple things at the same time. It is known to cause headache to even the most advanced developers.

In our case, we learned all there's to know about threading the Husqvarna Viking Emerald 122 by watching a YouTube video.

This is how it looks when it's properly done.


I have to admit though that I would still be perfectly helpless if I had to do all by myself and would have to resort to the same YouTube video again. Luckily my daughter is up to the task now and is working on a miniature backpack for her teddy bear.

We also discussed our Unity learning project briefly and concluded that the "intermediate" roguelike tutorial is too hardcore for us and we'll have to find something a bit easier to work on. I have a feeling that it'll take a while before we'll talk about threading of the computing variety.

EDIT: You're probably dying for a great Threading Tutorial, so here's one!

Saturday, October 21, 2017

Unity: The Wrong Tutorial?!

Lately we've been going though the Unity 2D Roguelike Tutorial with my now 8-year old daughter who taught her mom to use Vim at the age of 4.

Well, it seems we picked the wrong tutorial... Not saying we're not learning though. It's just that the code that gets casually written there's like protected virtual voids:



... freaking hardcode object-oriented stuff! The kid is a brave one but come on, we're writing abstract behavior component classes that have virtual parameterized methods. Also, in some parts of the tutorial (like this one) nothing new gets added to the game, in the sense that you could actually see some results on the screen.

There are easy and fun parts too, like working with the Animator Controllers, and in these parts she gets engaged but in the hardcore coding parts we've now agreed that I do most of the work. And it's totally ok! For me, this is nice and easy, and I get to understand how Unity works. I just hope that she'll bear with me for the whole tutorial without getting totally frustrated with the protected virtual voids.

I was just about to rant that there are no easy 2D Unity Tutorials but ahem there seems to be at least this one: 2D Game Creation.

Now, should we abandon our work and switch to the easier tutorial?! Maybe I'll quickly skim through both myself and make the decision. Let see...


Tuesday, October 17, 2017

Coding in the Mediterranean

The weather in Finland at this time of year is not so nice. I wish we could transport Finland to the Mediterranean for the months of September to November. Until then, I'll have to tranport just my family there every now and then...



This is how we learn coding in the optimum learning environment, using my pretty new book Koodauspuuhat which comes with an erasable marker! Only in Finnish though, at the moment.

Sunday, September 24, 2017

Unity 4: BoardManager, Childhood, Mushrooms

Today we started on the Writing the Board Manager part of the Unity 2D tutorial. This is the first part of the video tutorial that involves actual coding. And some code there is! Defining inner classes, methods, tons of variables, nested for loops etc.

I no longer wonder why this tutorial is not Beginner but Intermediate level :) We wrote quite a bunch of code of which I understood 100% and she maybe 20% or so. But no worries, we'll keep on coding and make something fun. Understanding how it actually works comes second, hopefully.



This reminds me of my own learning days when I was about her age and learnt coding from the Commodore Vic 20 Manual. Like this:



There were tons of simple and progressively less simple computer programs that I just typed like they were written on the book. I had no idea what the program code meant but I just typed it anyway. And it was so exciting to finally type

    run

.. and see what happened! Then I started slightly modifiying the ready made programs and finally started to understand the code by the effect that my little changes had on the outcome.

So, I hope she can also learn that way. And I'm actually 100% sure it's all about motivation and repetion. If she has the motivaion, she'll learn.

Oh, and we found this mushroom on our backyard:



Should we eat it, yes? While driving to her football match she asked me what these mushrooms actually do to people. I told her that it does something to your brain and you'll see funny things. And if you eat too much you'll die. Immediately regretted mentioning the hallucinations. Had to make extra sure that experimentation is out of the question in case more information of the effects is needed.

Tuesday, September 19, 2017

Unity Sessions 2 & 3 - Prefabs

Our second session was successful, yet super short. We finished the animations tutorial video and managed to create something called an Animation Override Controller. It's used when you create multiple enemies which share the same state machine but have different animation frames. Cool, huh? At that point the urge to start creating cupcakes instead was unstoppable and cupcake time it was.



Today she wanted to continue the tutorials so we sped through the next tutorial video on making prefabs for game tiles like floor, walls and food. These "prefabs" are saved object that define how a tile (a static piece in the game) look and how it interacts with its environment. Like, can you walk on it or not.

The stuff we've done so far has contained lots of repetitive works (like making 8 different floor tiles in the exact same way) which is kinda tiresome for people like me, but has proven rewarding for my 8-year old who has learnt to take these steps like a pro, just by repeating them over and over again. She can now make a lot of prefabs in the blink of an eye!

At this point I guess we have now set up all the assets so that we can start programming. Can't wait! On the other hand I'm a bit concerned how she'll handle C#, which is the first object-oriented programming language she's ever touched. There's bound to be a lot of weird boilerplate around, but I hope it won't matter too much. It's all about motivation.