When I started thinking about adding animations to the slide presenter I pictured a few different types of animations – simple animations to make items appear one by one, but also animations to pan, zoom, and rotate a slide (like Prezi, which is Flash based, but really more like Impress.js, which is all script and CSS). I wanted animations to be decoupled and extensible, yet still give the slide presenter control over the animations. When an animation like "appear one by one" is in effect, then a "move forward" operation shouldn't go to the next slide, but should...

When starting into the animations I decided it was time to refactor. One problem was the little "updateState" calls floating around inside conditional logic – always a bad sign. A second problem was the sheer number of strings and CSS selectors in the code. I've become more sensitive to primitive obsession in JavaScript. Some code I see is nothing but strings and numbers. I think the obsession hurts readability and maintainability. The selectors scattered in the slide presenter code do one of three things: get all slides, get the next slide, and get the previous slide. It...

Once upon a time there was a pure JavaScript model. The model sang songs about simplicity in a land full of complexity and confusion. The model's clear and beautiful voice comforted many hearts in the land. var protagonist = { firstName: "Priscilla", lastName: "Flannery", todos: [ { description: "Kiss frogs", done: false }, { description: "Slay dragons", done: false } ], addTodo: function (description) { ...

I tried to think of everything a web developer should know about HTTP, then recorded those things into a Pluralsight course: HTTP Fundamentals. In the course you'll look at HTTP messages, message headers, cookies, caching, and authentication protocols. You'll see HTTP work from a low level TCP/IP perspective using Wireshark and System.Net.Sockets. But, you'll also see HTTP from a higher level architectural perspective and learn to think of the Web as an extension of your application's architecture. Persistent connections, proxy servers, and content negotiation – it's all there. Give it a try.

It's happened to everyone. You thought you typed "Use Ruby To Capture Screen Shot" into a slide, but somehow you hit the i key instead of the o key and didn't notice. Now the slide is presenting itself proudly in front of an  ultra-conservative Ruby programming crowd who is still amped up from drinking green tea all night. What to do? You can open a text editor, fix the HTML, and refresh the browser. The slide is fixed, but the slide show always starts from the first slide so you've lost your position in the deck. The...

Occasionally it's useful to print a slide deck onto paper, or export a slide deck to PDF using a print driver. Unfortunately, printing the slide show in it's current form will only display the single, current slide. We can fix this by adding a CSS media query at the bottom of the stylesheet. @media print{ @page { size: landscape; } section { opacity: 1; height: auto; ...

What happens if someone using an old web browser wants to view our slides? We can add the following div outside of the section elements containing the slide content. <div id="warning"> Your browser may not support the features needed to display these slides. </div>   Following a long standing tradition amongst software developers, we are not going to the trouble of specifying exactly what might be missing. Instead, we are only hinting at a potential catastrophe to create an aura of mystery and suspense. We don't want the warning to display on the...

Company A I've worked with company A on a number of interesting commercial products over the years. After months of trying to find more good engineers in the local area, they recently decided to start working with an offshore consulting company. We interviewed potential consultants for the project using screen sharing software and asked them to write code. The ones who passed started working on features for the next version of the product. They participate in daily stand up calls with the team here, and someone from here travels halfway around the world to work there every...

The current presenter will show one slide at a time, but the slides keep moving down the page since all the <section> elements are in the normal flow of the browser. The slides also appear and disappear instantly, and aren't centered in the window. We can change all of these qualities using cascading style sheets. You've probably heard of cascading style sheets. Their unofficial working slogan is: "CSS - Making The Easy Things Difficult Since 1996". Ah, but no more. Well, almost no more. First we'll address the vertical positioning of...

The slide show project currently only shows one slide. I know a number of people who can talk for 75 minutes using one slide, but fortunately they've all retired from university life and taken their overhead projectors with them. Today's speakers need to show at least one Internet meme infested slide every 30 seconds to keep an audience alert and happy. We must find a way to allow a presenter to move through slides with a keystroke, or the swipe of the finger. We'll look at touch later, and work on just the keystrokes. One way...

In this series of posts we'll iterate on an HTML slide show. When I say "HTML", I mean we'll use all the buzzwords technologies that I kept out of the title of this post to avoid attracting attention from shallow minded subscribers who would only read a post titled something like "Top 7 Ways To Use HTML 5, JavaScript, and CSS3 To Ditch PowerPoint and Build Your Own GeoLocated TwitterBook Slideshow Software". If you've made it this far, you are a sophisticated reader who can appreciate an understated title, and I welcome you here. Let's start...