Programming By Stealth

CCATP #507 for October 29, 2017, and I'm your host, Allison Sheridan. It is also a Programming By Stealth, installment 42 of X with Bart Busschots. It's finally time to tie all the bits and pieces we've learned together and create our first web app. Armed with our HTML, CSS, jQuery and JavaScript knowledge, and our Cellular Automata Prototype, Bart walks us through how to bring the Game of Life...to Life! It's a lot of fun and I understood a great deal of it (I'm not gonna lie, it wasn't 100% this time.) As always Bart's amazing tutorial for this episode is available at: bartbusschots.ie/

In this episode of Programming By Stealth, Bart ties up the last of the loose ends related to web forms. He teaches us about form events, which are critical to making our web forms not only accessible to screen readers but to allow our users to tab around to the different fields and interact with them without using a mouse. We learn about the keypress event and learn what it means for 31 to be the space key.

In a shocking turn of events, I actually followed all of Programming By Stealth this week! Bart walked us through his solution to last week's HTML5 Forms Validation homework, and in so doing highlighted some especially clever things he did. I was pretty pleased with my own version of the homework, and in fact Bart gave me a gold star for one thing I did. Bart also explains how he used CSS to make his form even more readable. In the second half of the episode he shows how to use jQuery to improve the forms even more. He demonstrates how certain requirements cannot be met with the built-in forms validation and how we can use jQuery instead. I loved this episode because it tied in our knowledg of jQuery back to HTML forms. Bart's most excellent written tutorial can be found at PBS 40 of x – HTML5 Custom Validations with jQuery on bartb.ie.

This week Bart Busschots joins us to talk about HTML Form Validation. We'll get back to our Cellular Automata next week. Bart has also decided that we're going to get our feet a little bit yet by using GitHub where we'll be getting the challenges and solutions from now on. You can see Bart's awesome tutorial at bartbusschots.ie/...

We finally reached 500 episodes of Chit Chat Across the Pond (episode 499 will be next week) so who better to have on the show than Bart Busschots who started it all? In our first Programming By Stealth after our summer vacation, Bart decided to do a retrospective on what we've learned to date from HTML to CSS to JavaScript. I thought it was a great episode because it refreshed my memory on so much that we've done. He even put together a set of quiz questions for each section and shockinglyI didn't do too badly at them! It was a lot of fun and I hope you enjoy this refresher episode as much as I did. Of course Bart's fabulous written tutorial is available at bartbusschots.ie/...

I've been asking Bart a lot of questions in the back channel as I struggle to understand the documentation he has provided in our latest few sessions of homework assignments. He had an epiphany last week that he had never explained the documentation methods itself, which was certainly adding to my confusion. He decided to take a step back and explain step by step using video. He created a video screencast of the entire process of creating documentation using JSDoc. Then during the audio recording you'll hear in the podcast, he walked through it again while I asked him (lots of) questions. Hopefully it will be as eye opening to you as it was to me. He also demonstrates his favorite tools for the process. You can find Bart's blog post with the embedded video screencast at bartbusschots.ie/...

Chit Chat Across the Pond this week is another episode of Programming By Stealth with Bart Busschots. I'm very proud of the fact that I completed my homework, writing a program from scratch that passed all of the tests written by Bart. It took me 12 hours, and nearly 4 hours of Dorothy's time helping me do it, but I got 'er done. In this installment, 36 of x, we learn some more HTML, specifically about all the cool things the input tag can do, like creating invisible forms which is just weird but also very cool. The challenge this week is a flip on last week. This week Bart has written the next bit of code for us and we have to create the tests. It's as challenging as all the rest but it's just as fun. And of course you can find Bart's fabulous tutorial show notes at bartbusschots.ie/...

In this installment, Bart walks us through a little bit of how he wrote his Test Driven Development with QUnit for the Bartificer Link Toolkit. Bart even explains how it helped him find a couple of pretty major bugs in his own code, proving how important this is. Then we make a start on text input in HTML forms, and we move on to formatted sub-stets of tea like numbers, email addresses and so on. Finally, we make a start on what will be an on-going project. The idea is to combine our understanding of HTML, CSS, JavaScript, jQuery, and QUnit to implement a zero-player with a really cool computer science back-story.

In this installment of Bart’s Programming By Stealth series, we review our test code using QUnit, and then learn how to use QUnit to test our code within a real browser page. We do that using the API we built together, the Bartificer Link Toolkit that identifies external links on a web page, makes them open in new tabs, adds the tag rel=noopener, and adds a cute icon to identify them as external links. As always Bart’s terrific written tutorials and downloadable examples are available at pbs.bartificer.net/...

In this installment of Programming By Stealth, Bart FINALLY lets us start learning Test Driven development, or TDD. He shows us how to use a free and open source tool called QUnit, made by the fine developers of jQuery, to analyze our test code. It’s something I’ve been itching to learn more about, ever since listener Jill tipped us off to the concept. It’s a really fun episode where everything kind of comes together. Hope you enjoy it as much as I did. As always, Bart’s excellent written tutorial for the episode can be found at pbs.bartificer.net/...

This week Bart and I put the finishing touches on our Date and Time prototypes, then we use those very JavaScript prototypes with HTML forms, we learn bout JavaScript error handling (including throwing and catching errors) and the we start manipulating HTML Selects with jQuery. If that sounds as fun to you as it was to me, check out Bart’s full detailed show notes at pbs.bartificer.net/...

Bart and I may have broken a record on Chit Chat Across the Pond this week. We went through so much material in Programming By Stealth that this show runs 100 minutes! The funny thing is that I wasn’t ever bored, it was all really interesting. We started by going over last time’s JavaScript challenge where I made some mistakes but node.js saved me so I didn’t realize I’d entirely missed the point. I’m still getting the hang of that object thing. The we learned one final new concept related to JavaScript prototypes: static functions. The we finished that we went over to the html side and learned how to make forms, checkboxes and radio buttons. Not nearly as mentally challenging as JavaScript to be sure, especially since you can see the changes right on screen when you mess with them. Speaking of messing with them, Bart teaches us how to use jQuery to find out what our buttons and checkboxes say and to change them. He does this all with particular attention to using ARIA to ensure our html is accessible. As al

Bart continues his current dual path of teaching. We learn how to compare JavaScript objects (spoiler, you can't use == or === to do it). After that he teaches us how using WAI-ARIA as we develop our code will make it accessible to screen readers and other assistive devices. We don't do any real coding in this section; instead he explains the foundation for what we'll be doing in the future.

I don’t want to jinx anything here, but I feel like I’m finally starting to “get” this JavaScript programming thing. In this episode of Programming By Stealth, Bart starts by talking about how we solved the challenges from last week, getting rid of “bad smells” by learning how to reuse our code. Then Bart teaches us about another bad smell, where inadvertently point two variables point the same object and he teaches us about the clone function to eradicate that problem. With that bite-sized JavaScript lesson behind us, he takes us forward into learning about Glyph Icons, a way of having scalable icons on our web pages instead of pixel-based icons. He introduces us to Font Awesome tool to get free access to (awesome) scalable glyph icons. The full tutorial is available at bartbusschots.ie/….

In this week’s installment of Programming By Stealth, Bart teaches us about how to change the look of HTML buttons using their CSS attributes. It’s great fun, but I have to confess we don’t actually get to the new stuff till over an hour into the show! We had so much fun going through the homework from last time that we lost track of time. I was so excited because I’d worked really hard on my homework this time and was able to actually conquer the first two parts (with some help from my friends) but I did struggle a bit with the third piece where I had to assemble them together. Anyway, we decided it’s ok if you skip ahead to the CSS parts if you like; it starts at an hour and six minutes in. As always the full written tutorial with examples is at bartbusschots.ie/…

On this week’s continuing series Programming By Stealth, Bart introduces us to HTML forms in order to take user input. It’s a pretty basic installment so not as head bendy as they have been lately. He also gives us some more repetitive homework to get more practice creating and using prototypes and accessor methods. The full written tutorial can be found at bartbusschots.ie/….

Bart Busschots is back with another installment of Programming By Stealth. In this week’s episode we wake Allison up from her long winter nap away from programming and continue our work on our JavaScript clock. The goal is to create a better API for our clock so that we can publish it and have it be used by others. My personal goal is to have a secure clock I can display on https://podfeet.com/live so that you know when it’s coming up on 5pm at my house and hence time for the NosillaCast Live. In order to achieve this goal, we need to learn how to add data attributes within html, and then change those attributes using jQuery. Dust off your memories of prototypes and screw your propeller beanie on tight for this one! Link to the full tutorial is available at bartbusschots.ie/…

Bart gave me another two weeks to get my homework done on Programming By Stealth and brings us a case study of how to create a JavaScript API on Github. He uses a real life example of a small, open source library he released over the weekend called barfificer.linkTookit.js. This library includes many of the bits and pieces we’ve been working on in Programming By Stealth, how to add a rel of no opener on all links with a target of _blank (the ones that open in a new tab) and adding a little icon in the url to politely tell the reader that you’ll be navigating away from the page you’re on. It’s a great lesson in the structure of how Github works and even more importantly how it automatically creates beautiful documentation from Markdown comments in the code. Tutorial shownotes are available at bartbusschots.ie/...

In this week’s installment of Programming By Stealth, Bart teaches us how to create a JavaScript API up to and including an easy way to create professional documentation in order to publish our work as a JavaScript library. In order to get there we learn how to write reusable and sharable code, how “closures” help you keep your variables out of the global scope so they don’t mess up other people’s code, we learn one Ternary Operator), and my favorite, self-executing anonymous functions. Apologies for getting the episode number wrong in the audio – I said it was #460 when it’s actually #461. You can find Bart’s tutorial we follow in this episode at bartbusschots.ie/….

In this installment of Programming By Stealth, we’re working towards our first truly practical assignment in the series – a function that finds all links on a page, and if, and only if, they lead to an external page, alters them to open in a new tab, and appends an icon indicating that fact. Bart’s amazing full on tutorial is over at bartbusschots.ie/…. I also mention a fun little jQuery Easter egg, which you can find at citymapper.com. Just follow the link and open the console on your favorite browser and you’ll find a text based adventure game!