Open post
Programming By Stealth Logo

CCATP #523 – Bart Busschots on PBS 50 – Building a Web App on Video

This week Bart and I celebrate 50 episodes of Programming By Stealth. As Bart points out, we’ve been at this for two years now. I’m so happy he’s stuck with me on this and he says he’s got literally years of material yet to go. To commemorate this occasion, Bart got the crazy idea to build a web app live on video. We used a YouTube Live Hangout on Air while he shared his screen. He started with a blank canvas and when he was done we had a working web app. The video is probably a better experience but the audio is supplied for those who prefer it. We did try to narrate what was going on to help with the audio.

You can find the download of Bart’s final file at bartbusschots.ie/…

mp3 download

Open post
Programming By Stealth Logo

CCATP #522 – Bart Busschots on PBS 49B of X – Object Revision & Improving Our Cellular Automata

As promised last week, Bart Busschots brings us the second half of Programming By Stealth 49. We start by going through a lot of revision on JavaScript objects. It’s really great to have all of this all in one place, and I got to ask a few questions that have been bugging me for a long time. I understood every bit of this and really enjoyed it, but I’m not going to lie, his little 6-part test after the revision baffled me a bit. But after we slog through that part, Bart gets us back on track improving our Cellular Automata. I never realized that we didn’t actually define whether our cells are dead or alive!

Bart’s tutorial for this lesson is at bartbusschots.ie/… starting where he inserted the line, “Note: This is the point in the notes where the first podcast episode ends and the second begins.”

mp3 download

Open post
Programming By Stealth Logo

CCATP #519 – Bart Busschots on PBS 48 of x – A Closer Look at ‘this’ and ‘static’

Bart decided to take a closer look at the JavaScript keywords ‘this’ and ‘static’ and boy am I glad he did. He said it was the hardest lesson he’s put together so far. It’s a convoluted topic but he gives great explanations as always. You can find his tutorial at bartbusschots.ie/…

mp3 download

Programming by Stealth Index

PBS Index
Topic PBS URL
anchors PBS 5 of X – Images & Links
API case study linkToolkit PBS 25 of x – A Case Study (bartificer.linkToolkit.js)
ARIA roles and fieldsets PBS 31 of x – JS Static Functions | Checkboxes & Radio Buttons
asides PBS 8 of X – CSS Positioning
backgrounds PBS 7 of X – More CSS
Bart’s farm PBS 47 of x – ES6 Polymorphism
block quotes PBS 3 of X – HTML Block Elements
borders PBS 7 of X – More CSS
boxes, positioned PBS 8 of X – CSS Positioning
browser development tools PBS 7 of X – More CSS
browser event model PBS 22 of X – jQuery Events
Bubbling or propagation PBS 41 of x – Form Events
classes PBS 7 of X – More CSS
code tag PBS 4 of X – HTML In-line Elements
comments in HTML PBS 2 of X – Introducing HTML
Convert this to jQuery object PBS 40 of x – HTML 5 Custom Validations
CSS documentation links PBS 38 of x – Taking Stock
CSS fonts PBS 6 of X – Introducing CSS
CSS overview PBS 6 of X – Introducing CSS
CSS Review PBS 38 of x – Taking Stock
CSS selectors PBS 6 of X – Introducing CSS
CSS selectors review PBS 21 of X – jQuery Basics
CSS style declarations PBS 6 of X – Introducing CSS
CSS stylesheet, external PBS 6 of X – Introducing CSS
CSS stylesheet, internal PBS 6 of X – Introducing CSS
CSS syntax, basic PBS 6 of X – Introducing CSS
CSS text formatting PBS 6 of X – Introducing CSS
display property PBS 9 of X – More CSS Positioning
Document Object Model (DOM) PBS 20 of X – JS in the Browser
Embedding Javascript in Web Pages PBS 22 of X – jQuery Events
figures PBS 8 of X – CSS Positioning
flex boxes PBS 9 of X – More CSS Positioning
floats PBS 8 of X – CSS Positioning
following selector PBS 10 of X – Yet More CSS
Form events PBS 41 of x – Form Events
Form validation, HTML5 PBS 39 of x – HTML 5 Form Validation
grouping PBS 8 of X – CSS Positioning
headings PBS 3 of X – HTML Block Elements
HTML documentation links PBS 38 of x – Taking Stock
HTML forms, checkboxes PBS 31 of x – JS Static Functions | Checkboxes & Radio Buttons
HTML forms, radio buttons PBS 31 of x – JS Static Functions | Checkboxes & Radio Buttons
HTML forms, selects (pull-downs) PBS 32 of x – JS Error Handling Revision | HTML Selects
HTML Review PBS 38 of x – Taking Stock
IDs, HTML tags PBS 7 of X – More CSS
images in HTML PBS 5 of X – Images & Links
JavaScript documentation links PBS 38 of x – Taking Stock
Javascript ES6 (introduction) PBS 43 of x – Introducing JavaScript ES6
Javascript prototype algorithm PBS 31 of x – JS Static Functions | Checkboxes & Radio Buttons
JavaScript Review PBS 38 of x – Taking Stock
Javascript, .apply function PBS 48 of x – A Closer Look at ‘this’ and ‘static’
Javascript, .call function PBS 48 of x – A Closer Look at ‘this’ and ‘static’
Javascript, API development PBS 24 of x – Creating a JavaScript API
Javascript, argument variable PBS 17 of X – JS Objects
Javascript, arguments variable 2 PBS 18 of X – JS Miscellany
Javascript, array functions PBS 18 of X – JS Miscellany
Javascript, array slice function PBS 33 of x – JS Testing with QUnit
Javascript, Array-like object conversion (ES6) PBS 45 of x – ES6 Arrays & Strings
Javascript, Array.from (ES6) PBS 45 of x – ES6 Arrays & Strings
Javascript, arrays PBS 14 of X – JS Loops & Arrays
Javascript, arrays with callbacks PBS 16 of X – JS Callbacks
Javascript, arrow functions (ES6) PBS 46 of x – ES6 Spread Operator Arrow Functions & Classes
Javascript, basics PBS 12 of X – Introducing JavaScript
Javascript, Boolean function PBS 12 of X – Introducing JavaScript
Javascript, building a div in CSS PBS 47 of x – ES6 Polymorphism
Javascript, catch PBS 18 of X – JS Miscellany
Javascript, catch PBS 32 of x – JS Error Handling Revision | HTML Selects
Javascript, cellular automata improvements PBS 49 of x – Improving Our Cellular Automata
Javascript, charAt function PBS 18 of X – JS Miscellany
Javascript, cheat sheet PBS 17 of X – JS Objects
Javascript, class inheritance (ES6) PBS 47 of x – ES6 Polymorphism
Javascript, classes, intro PBS 46 of x – ES6 Spread Operator Arrow Functions & Classes
Javascript, clearInterval function PBS 22 of X – jQuery Events
Javascript, clones definition PBS 29 of x – JS Prototype Revision | Glyph Icons
Javascript, closure PBS 24 of x – Creating a JavaScript API
Javascript, comparisons PBS 13 of X – JS Conditionals
Javascript, console PBS 20 of X – JS in the Browser
Javascript, const (ES6) PBS 43 of x – Introducing JavaScript ES6
Javascript, creating is-a relationship PBS 47 of x – ES6 Polymorphism
Javascript, data attributes PBS 26 of x – HTML Data Attributes with jQuery
Javascript, email input type PBS 36 of x – More HTML Text Input | More Cellular Automata
Javascript, error handling PBS 18 of X – JS Miscellany
Javascript, error handling 2 PBS 32 of x – JS Error Handling Revision | HTML Selects
Javascript, event, keypress PBS 41 of x – Form Events
Javascript, events, click PBS 22 of X – jQuery Events
Javascript, events, document ready PBS 22 of X – jQuery Events
Javascript, Font Awesome PBS 29 of x – JS Prototype Revision | Glyph Icons
Javascript, for loop PBS 14 of X – JS Loops & Arrays
Javascript, for…in , when to use PBS 49 of x – Improving Our Cellular Automata
Javascript, for…in (ES6) PBS 44 of x – ES6 Arguments & Objects
Javascript, for…of , when to use PBS 49 of x – Improving Our Cellular Automata
Javascript, for…of (ES6) PBS 45 of x – ES6 Arrays & Strings
Javascript, forms, text areas PBS 35 of x – HTML Text Input and Introducing Life
Javascript, forms, text boxes PBS 35 of x – HTML Text Input and Introducing Life
Javascript, function arguments (ES6) PBS 44 of x – ES6 Arguments & Objects
Javascript, function constructor invocation PBS 48 of x – A Closer Look at ‘this’ and ‘static’
Javascript, function direct invocations PBS 48 of x – A Closer Look at ‘this’ and ‘static’
Javascript, function indirect invocation PBS 48 of x – A Closer Look at ‘this’ and ‘static’
Javascript, function programmatic invocation PBS 48 of x – A Closer Look at ‘this’ and ‘static’
Javascript, functions as arguments/objects PBS 16 of X – JS Callbacks
Javascript, functions intro PBS 15 of X – JS Functions
Javascript, functions, instance PBS 31 of x – JS Static Functions | Checkboxes & Radio Buttons
Javascript, functions, optional arguments PBS 16 of X – JS Callbacks
Javascript, functions, self-executing anonymous PBS 24 of x – Creating a JavaScript API
Javascript, functions, static PBS 31 of x – JS Static Functions | Checkboxes & Radio Buttons
Javascript, hidden input PBS 36 of x – More HTML Text Input | More Cellular Automata
Javascript, HTML glyph icons PBS 29 of x – JS Prototype Revision | Glyph Icons
Javascript, if statement PBS 13 of X – JS Conditionals
Javascript, instance functions (ES6) PBS 47 of x – ES6 Polymorphism
Javascript, instance properties (ES6) PBS 47 of x – ES6 Polymorphism
Javascript, Instance vs static properties (ES6) PBS 44 of x – ES6 Arguments & Objects
Javascript, intro PBS 12 of X – Introducing JavaScript
Javascript, isNan function PBS 13 of X – JS Conditionals
Javascript, join array function PBS 18 of X – JS Miscellany
Javascript, length function PBS 18 of X – JS Miscellany
Javascript, let (ES6) PBS 43 of x – Introducing JavaScript ES6
Javascript, let vs const (when to use) PBS 45 of x – ES6 Arrays & Strings
Javascript, logical operators PBS 13 of X – JS Conditionals
Javascript, Math abs (absolute value) function PBS 18 of X – JS Miscellany
Javascript, Math ceiling function PBS 18 of X – JS Miscellany
Javascript, Math floor function PBS 18 of X – JS Miscellany
Javascript, math functions PBS 18 of X – JS Miscellany
Javascript, Math object PBS 18 of X – JS Miscellany
Javascript, Math random function PBS 18 of X – JS Miscellany
Javascript, Math round function PBS 18 of X – JS Miscellany
Javascript, Math sqrt (square root) function PBS 18 of X – JS Miscellany
Javascript, Math trig functions PBS 18 of X – JS Miscellany
Javascript, name of a class PBS 48 of x – A Closer Look at ‘this’ and ‘static’
Javascript, name of a function PBS 48 of x – A Closer Look at ‘this’ and ‘static’
Javascript, name of an instance’s class PBS 48 of x – A Closer Look at ‘this’ and ‘static’
Javascript, number input type PBS 36 of x – More HTML Text Input | More Cellular Automata
Javascript, number input type PBS 36 of x – More HTML Text Input | More Cellular Automata
Javascript, object keys function PBS 17 of X – JS Objects
Javascript, objects PBS 17 of X – JS Objects
Javascript, objects and JSON PBS 17 of X – JS Objects
Javascript, objects revisited PBS 49 of x – Improving Our Cellular Automata
Javascript, objects, prototyped PBS 17 of X – JS Objects
Javascript, obscured input PBS 36 of x – More HTML Text Input | More Cellular Automata
Javascript, overriding a function PBS 47 of x – ES6 Polymorphism
Javascript, parseFloat function PBS 12 of X – Introducing JavaScript
Javascript, parseInt function PBS 12 of X – Introducing JavaScript
Javascript, password input type PBS 36 of x – More HTML Text Input | More Cellular Automata
Javascript, polymorphism (ES6) PBS 47 of x – ES6 Polymorphism
Javascript, prototype revision PBS 28 of x – JS Prototype Revision | CSS Attribute Selectors & Buttons
Javascript, prototype revision 2 PBS 29 of x – JS Prototype Revision | Glyph Icons
Javascript, push function PBS 18 of X – JS Miscellany
Javascript, range input type PBS 36 of x – More HTML Text Input | More Cellular Automata
Javascript, recipe for namespacing PBS 24 of x – Creating a JavaScript API
Javascript, recursion PBS 15 of X – JS Functions
Javascript, RegExp function PBS 18 of X – JS Miscellany
Javascript, regular exp exec function PBS 18 of X – JS Miscellany
Javascript, regular exp match function PBS 18 of X – JS Miscellany
Javascript, regular exp test function PBS 18 of X – JS Miscellany
Javascript, regular expressions PBS 18 of X – JS Miscellany
Javascript, reverse array function PBS 18 of X – JS Miscellany
Javascript, setInterval function PBS 22 of X – jQuery Events
Javascript, shift function PBS 18 of X – JS Miscellany
Javascript, sort array function PBS 18 of X – JS Miscellany
Javascript, split function PBS 18 of X – JS Miscellany
Javascript, spread operator (ES6) PBS 46 of x – ES6 Spread Operator Arrow Functions & Classes
Javascript, static functions (ES6) PBS 47 of x – ES6 Polymorphism
Javascript, static properties (ES6) PBS 47 of x – ES6 Polymorphism
Javascript, static, a closer look PBS 48 of x – A Closer Look at ‘this’ and ‘static’
Javascript, String function PBS 12 of X – Introducing JavaScript
Javascript, string functions PBS 18 of X – JS Miscellany
Javascript, switch example PBS 44 of x – ES6 Arguments & Objects
Javascript, telephone input type PBS 36 of x – More HTML Text Input | More Cellular Automata
Javascript, Template literals (ES6) PBS 45 of x – ES6 Arrays & Strings
Javascript, ternary operator PBS 12 of X – Introducing JavaScript
Javascript, this object PBS 17 of X – JS Objects
Javascript, this, a closer look PBS 48 of x – A Closer Look at ‘this’ and ‘static’
Javascript, this, determining the value PBS 48 of x – A Closer Look at ‘this’ and ‘static’
Javascript, throw PBS 18 of X – JS Miscellany
Javascript, throw PBS 32 of x – JS Error Handling Revision | HTML Selects
Javascript, timers PBS 22 of X – jQuery Events
Javascript, toLowerCase function PBS 18 of X – JS Miscellany
Javascript, toUpperCase function PBS 18 of X – JS Miscellany
Javascript, try PBS 18 of X – JS Miscellany
Javascript, try PBS 32 of x – JS Error Handling Revision | HTML Selects
Javascript, typeof operator PBS 18 of X – JS Miscellany
Javascript, undefined intro PBS 12 of X – Introducing JavaScript
Javascript, unshift function PBS 18 of X – JS Miscellany
Javascript, URL input type PBS 36 of x – More HTML Text Input | More Cellular Automata
Javascript, variables PBS 12 of X – Introducing JavaScript
Javascript, variadic arguments (ES6) PBS 44 of x – ES6 Arguments & Objects
Javascript, while loop PBS 14 of X – JS Loops & Arrays
jQuery and CSS PBS 21 of X – jQuery Basics
jQuery and HTML Element Attributes PBS 21 of X – jQuery Basics
Jquery documentation links PBS 38 of x – Taking Stock
JQuery Event handlers in Forms PBS 40 of x – HTML 5 Custom Validations
jQuery, .on function PBS 40 of x – HTML 5 Custom Validations
jQuery, .validate (plugin) PBS 41 of x – Form Events
jQuery, after function PBS 23 of x – Creating Elements with jQuery
jQuery, append function PBS 23 of x – Creating Elements with jQuery
jQuery, before function PBS 23 of x – Creating Elements with jQuery
jQuery, change function PBS 40 of x – HTML 5 Custom Validations
jQuery, checkboxes PBS 31 of x – JS Static Functions | Checkboxes & Radio Buttons
jQuery, click function PBS 40 of x – HTML 5 Custom Validations
jQuery, creating elements PBS 23 of x – Creating Elements with jQuery
jQuery, data function PBS 26 of x – HTML Data Attributes with jQuery
jQuery, data URLs PBS 23 of x – Creating Elements with jQuery
jQuery, event objects PBS 41 of x – Form Events
jQuery, event property, which PBS 41 of x – Form Events
jQuery, event, reset PBS 41 of x – Form Events
jQuery, events PBS 22 of X – jQuery Events
jQuery, first function PBS 40 of x – HTML 5 Custom Validations
jQuery, function chaining PBS 21 of X – jQuery Basics
jQuery, get function PBS 40 of x – HTML 5 Custom Validations
jQuery, intro PBS 20 of X – JS in the Browser
jQuery, is function PBS 21 of X – jQuery Basics
jQuery, keyup function PBS 40 of x – HTML 5 Custom Validations
jQuery, looping through an object PBS 23 of x – Creating Elements with jQuery
jQuery, prepend function PBS 23 of x – Creating Elements with jQuery
jQuery, selecting elements PBS 21 of X – jQuery Basics
jQuery, submit function PBS 40 of x – HTML 5 Custom Validations
JQuery, text inputs PBS 35 of x – HTML Text Input and Introducing Life
JSDoc PBS 24 of x – Creating a JavaScript API
JSDoc, how to use in detail PBS 37 of x – JSDoc Demo
Life game Automaton code PBS 36 of x – More HTML Text Input | More Cellular Automata
Life game Cell code PBS 35 of x – HTML Text Input and Introducing Life
Life game finished PBS 42 of x – Playing the Game of Life
Life game intro PBS 35 of x – HTML Text Input and Introducing Life
links PBS 5 of X – Images & Links
Links to useful development tools PBS 37 of x – JSDoc Demo
lists PBS 3 of X – HTML Block Elements
lists, bulleted PBS 3 of X – HTML Block Elements
lists, definition PBS 3 of X – HTML Block Elements
lists, nested PBS 3 of X – HTML Block Elements
lists, numbered PBS 3 of X – HTML Block Elements
Making the cursor be a pointer PBS 36 of x – More HTML Text Input | More Cellular Automata
MAMP, how to run PBS 1 of X – Introduction
margins & padding PBS 7 of X – More CSS
noscript tag PBS 22 of X – jQuery Events
optional CSS pseudo-class PBS 39 of x – HTML 5 Form Validation
page structure, HTML PBS 2 of X – Introducing HTML
paragraphs PBS 3 of X – HTML Block Elements
precedes selector PBS 10 of X – Yet More CSS
Programming Editor PBS 1 of X – Introduction
pseudo-classes PBS 10 of X – Yet More CSS
QUnit intro PBS 33 of x – JS Testing with QUnit
QUnit, callbacks PBS 34 of x – More JS Testing with QUnit
QUnit, clone test PBS 34 of x – More JS Testing with QUnit
Qunit, deepEqual function PBS 33 of x – JS Testing with QUnit
Qunit, equal function PBS 33 of x – JS Testing with QUnit
QUnit, grouping tests PBS 33 of x – JS Testing with QUnit
QUnit, hooks PBS 34 of x – More JS Testing with QUnit
Qunit, strictEqual function PBS 33 of x – JS Testing with QUnit
QUnit, todo PBS 35 of x – HTML Text Input and Introducing Life
required CSS pseudo-class PBS 39 of x – HTML 5 Form Validation
Sample data entry form (by Bart!) PBS 40 of x – HTML 5 Custom Validations
sections PBS 8 of X – CSS Positioning
selector, directly contained > PBS 10 of X – Yet More CSS
setCustomValidity function PBS 40 of x – HTML 5 Custom Validations
special characters in urls PBS 5 of X – Images & Links
style PBS 6 of X – Introducing CSS
styling lists PBS 10 of X – Yet More CSS
tabindex PBS 41 of x – Form Events
tables PBS 11 of X – Tables
tag attributes PBS 5 of X – Images & Links
tags, HTML, intro PBS 2 of X – Introducing HTML
Test Driven Development (TDD) PBS 33 of x – JS Testing with QUnit
URI.js PBS 23 of x – Creating Elements with jQuery
url, absolute PBS 5 of X – Images & Links
url, relative PBS 5 of X – Images & Links
valid/invalid CSS pseudo-classes PBS 39 of x – HTML 5 Form Validation
WAI-ARIA intro PBS 30 of x – Comparing JS Objects | Introducing WAI-ARIA
WAI-ARIA roles PBS 30 of x – Comparing JS Objects | Introducing WAI-ARIA
Web forms PBS 27 of x – JS Prototype Revision | HTML Forms

CCATP #509 – Bart Busschots on PBS 43 – Introducing JavaScript ES6

In this installment of Programming By Stealth, Bart spends most of the time talking through his solution to the previous challenge, where we added start and stop buttons to our Game of Life. In his solution, he actually modifies the prototype to accommodate the ability to add these buttons. He explains his process and his decisions along the way. I’m not going to lie, this one confused me quite a bit in the middle but we both hope it’s because we’ve been away from the hard-core JavaScript for quite a while.

Once we have that under our belts, he starts explaining some of the cool, new features in JavaScript ES6 where we abandon var and replace it with let and const. He explains the value of these new terms (and the problems they solve!)

Bart’s full tutorial is available as always at bartbusschots.ie/…

mp3 download

CCATP #505 – Bart Busschots on PBS 41 – Form Events

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.

Bart’s excellent tutorial is at over at bartbusschots.ie/…

mp3 download

CCATP #501 Bart Busschots – PBS 39 of x – HTML5 Form Validation

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/…


mp3 download

CCATP #487 – Bart Busschots PBS 35 of x – HTML Text Input | Introducing ‘Life’

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’ll move on to formatted sub-sets of text 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.

And as always Bart’s full written tutorial is available over at bartbusschots.ie/…


mp3 download

Three Chit Chat Feeds are Better Than One

3 chit chat logos12 years ago, on May 13th, 2005, I decided to start the NosillaCast. Somewhere along the lines I met the wonderful Bart Busschots and he started to be a regular on the show, in a segment we affectionately called Chit Chat Across the Pond. Bart and I talked about photography and security and Macs and just about everything geeky that interested us.

Eventually we started doing Chit Chat Across the Pond together every other week and on the opposite weeks I’d have other tech guests on the show. Bart started his own shows, Let’s Talk Apple and Let’s Talk Photography.

In April of 2013, Bart decided to start a sub-series of Chit Chat Across the Pond called Taming the Terminal. This was the beginning of what we like to call our “propeller beanie” shows, where we get real geeky and learn how to conquer some of the harder tech topics.

Continue reading “Three Chit Chat Feeds are Better Than One”

CCATP #484 – Bart Busschots PBS 34 of x – More JS Testing with QUnit

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 bartbusschots.ie/….

itunes
mp3 download

Posts navigation

1 2 3
Scroll to top