SitePoint

Be Convincing and Win More Clients

John Tabita — Tue, 21 May 2013 13:30:03 +0000

A number of years ago, I applied for a sales position. It was the first time I’d done so. As part of the application process, I had to complete an online self- assessment. Somewhere around the eighth question, it became apparent that the sole purpose of this “assessment” was to assess whether I was an extrovert or not. Questions like “How many extra-curricular activities or clubs did you belong to in high school?” made it clear that the company believed extroverts make better sales people.

If only it were that simple. According to research conducted by RAIN Group, you to win or lose at sales because of your behavior, not your personality bent. Their study revealed that top sales people engage in three specific selling behaviors that set them apart:

They connect
They convince
They collaborate

The people at RAIN describe these as “three levels” that ought to be applied as a combination, not separately or sequentially—but caution that those who stop at Level 1 do not find themselves in the winner’s circle nearly as often.

This poses a challenge to introverted web designers and programmers faced with the need to “sell your services.” While we do well connecting and collaborating, we’re not so comfortable with convincing. In fact, I’d say we’re so uncomfortable with it that we take collaborating much too far, by giving away too much free information and writing proposals for which the client didn’t ask—hoping that these will do the convincing for us.

Instead, we’re left wondering why the client went elsewhere.

There’s no doubt that to be an effective sales person, you must possess certain social skills. In order to win, you must be able to convince the prospect that:

You can achieve the results he’s after
The return on investment is worth it
The risk is acceptable
You are the best choice among the available options

According to the RAIN Group report, even seasoned sales people are resistant to using maximum persuasion, yet …

… in our research, the winners convinced, and convinced with gusto.

Are you focusing too much effort on collaborating and not enough on convincing? It’s time to “go for the gusto” and start convincing.

Image credit

Even Better CSS3 Toggle Switches!

Craig Buckler — Mon, 20 May 2013 11:14:16 +0000

Many of you liked my previous article, How to Create a Toggle Switch in CSS3. However, a few issues were raised in the comments and on Twitter…

How do you apply toggles to radio buttons?
Can accessibility be improved?
Why doesn’t it work on older mobile Webkit browsers?

I’ve made some improvements, so please view the demonstration page and the HTML/CSS code…

Radio Button Support

An easy one to start with. Radio buttons function almost identically to checkboxes so we can simply apply a class of “switch” to every input to make it work, e.g.



first radio button



second radio button



third radio button

It’s very satisfying to see two switches alter position at the same time!

Amended Accessibility

Richard from Accessible Web Design raised a couple of concerns. First, the switches change between red and green; if you’re color-blind, it would not be easy to determine whether the switch was on or off. To remedy the problem, I’ve added a check and cross character to the background:

No additional element were required — I simply used a cross character instead of a space and positioned it on the right of the background using text-indent:

input.switch:empty ~ label:before
{
	content: '\2718';
	text-indent: 2.4em;
	color: #900;
}

When the checkbox/radio is checked, it changes to a check character and is moved to the left of the background:

input.switch:checked ~ label:before
{
  content: '\2714';
  text-indent: 0.5em;
  color: #6f6;
}

Cross-Browser CSS3 Animation
Originally, I placed the check/cross character on the white switch itself. This is complex for the browser since it must create a transition between two different characters. Firefox worked, but Chrome and IE10 take an easier route: they abandon the animation completely! It appears that Webkit and Trident will not permit animation on a pseudo element if its content is changing — even if you explicitly state that only the margin or color should be animated.

To address the issue, I applied the check/cross to the :before toggle background and removed its transition effect (the color will not smoothly change, but it’s hardly noticeable). Only the white :after switch position is animated now.

The next accessibility issue: keyboard focus. The previous toggles were difficult to use with keyboard only so I’ve applied a different label color and a box shadow to the toggle when it has focus:

input.switch:focus ~ label
{
  color: #000;
}
input.switch:focus ~ label:before
{
  box-shadow: 0 0 0 3px #999;
}

The result is possibly a little too subtle, but it’s easy to add your own effects:

The focus effect works in Firefox, IE and Opera — but fails in Chrome 26? It looks like a browser bug unless anyone knows differently?

More Webkit Woes

The final problem: the toggle switches fail in mobile browsers using older versions of Webkit such as Safari on the iPad 1.0 and the Android browser. The engine supports labels, is happy with :checkbox selectors and displays the initial state, but doesn’t want to modify pseudo elements after the initial page load. I even broke my own requirements and added a little JavaScript, but the browser laughed at my feeble attempts and wouldn’t budge.

Pseudo element animation has only been added to Webkit recently. It’s frustrating and, unlike the old IE6/7 days, it’s difficult to find workarounds which don’t adversely affect other browsers.

Anyway, assuming legacy Webkit users aren’t part of your demographic, please use the HTML/CSS code however you like. Alternatively, you’ll need to add further (real) elements or JavaScript to make it work.

Introducing the new HTML5 template Tag

Craig Buckler — Fri, 17 May 2013 17:02:34 +0000

Modern web applications use DOM manipulation to dynamically change areas of the page or insert values. A typical example is a table of figures; the initial page could return HTML column headers then initialize an Ajax request which returns several data records. The data is then appended to the table — but how? The developer has two choices:

JavaScript is used to build HTML row strings or DOM fragments which are appended to the table. That seems easy until you need to make a change and must hunt around your JavaScript for the associated HTML code. To make life simpler, developers often return whole HTML string fragments from the Ajax call, but that makes the payload more verbose and opens the potential for Cross-Site Scripting attacks.
Alternatively, you create an empty first row in the HTML page which is used as a template for all other rows. That should be easier to maintain, but you’ll need to remove it from the DOM or style it with display:none to ensure it doesn’t appear.

Neither solution is particularly elegant.

Fortunately, the W3C has introduced a new template tag which provides a mechanism to define HTML markup fragments as prototypes. (Perhaps it will also appease those upset by the demise of the hgroup element!)

In essence, a template can be used to insert fragments of HTML code into your page, e.g.

The template code can be defined almost anywhere — the head, body or even a frameset. However:

templates will not display
templates are not considered to be part of the document, i.e. using document.getElementById(“mytablerow”) will not return child nodes
templates are inactive until used, i.e. enclosed images will not download, media will not play, scripts will not run, etc.

Using templates

To use a template, it must be cloned and inserted into the DOM. For example, assuming the following HTML:




ID
name
twitter

We can clone a new row in JavaScript:

// fetch tbody and row template
var	t = document.querySelector("#mytable tbody"),
	row = document.getElementById("mytablerow");
// modify row data
var td = row.getElementsByTagName("td");
td[0].textContent = "1";
td[1].textContent = "SitePoint";
td[2].textContent = "sitepointdotcom";
// clone row and insert into table
t.appendChild(row.content.cloneNode(true));

The important question: can we use template tags?

Probably not just yet. It’s supported in the latest version of Chrome and Firefox nightlies. Opera will support the tag when it switches to Blink. No word from the IE and Safari teams yet, but a template shim has been demonstrated on JSfiddle should you wish to support all browsers.

Personally, I think the template tag is a great idea. It’s simple and standardizes templating techniques for HTML5 developers.

Crowdfunding a CSS Animation course – an experiment

Claire Sawyers — Fri, 17 May 2013 00:51:12 +0000

During Triple time at SitePoint, we give our employees 3 days to pursue projects of their choice, much like Google’s 20%. This project is an innovation born out of this… Please share your feedback and get in behind it!

Would you want to learn CSS Animation from our CSS Guru, Alex Walker? If so, would you be prepared to crowdfund to make it happen?

We are running our own experiment to see if we can crowdfund a web development course, via a system we’ve built; Launchable.

Hear Alex talk about the course he will produce if he meets his Launchable funding goal and pledge to support his project

About Launchable
There’s heaps of people out there who want to create an online course, but never find the time – mostly as there’s no way to know what your ROI will be.
What if you could find out exactly how worthwhile it would be, before you record a single thing? We think this would be a super useful service. That’s why we created and are testing Launchable with one pilot project – CSS Animation. It’s not just a test. Alex will actually make and deliver this course if the project receives $2000 in pledges. If this does well, we’ll look at making the platform open for more instructors to apply and begin pitching.

Visit Launchable today to pledge to purchase his course if you think it should be produced. Share your feedback if you think this concept rocks or we should go back to the drawing board. It’s early adopters like you who can help shape this into a reality!

Learn JavaScript Online

Ricky Onsman — Thu, 16 May 2013 14:15:19 +0000

We know that people acquire skills, adopt techniques, learn anything in different ways, and timeframes, and formats, and with wildly varying expectations.

Between SitePoint and Learnable, we’re building a network of ways you can acquire web skills as you want and need them.

Below are three ways you can learn a lot of JavaScript online. By looking at what our loyal SitePoint audience has been doing and loving, we have compiled three quick lists with options to get you learning some serious JavaScript.

Whether you’re solving an immediate problem, expanding your skill set, starting from scratch or exploring advanced techniques, here are some options:

Getting started & key concepts

For real beginners or those who feel like they’re using JavaScript without really knowing it and are ready to get to know it properly.

Tutorial: How to Create Custom Events in JavaScript
eBook: Jump Start JavaScript (PREMIUM)
Course: JavaScript Programming for the Web (PREMIUM)
Course: jQuery Fundamentals (PREMIUM)
eBook: jQuery: Novice to Ninja (PREMIUM)
Tutorial: JavaScript ‘this’ and Event Handlers

All time greatest JavaScript tutorials

For those who know the basics and want to experiment with techniques, we’ve hand picked a selection of our all time greatest JavaScript tutorials.

Join Learnable

Buy the premium items individually by following the links or get access to all of them and a lot more with a Learnable membership.

Today, Learnable members found Jump Start JavaScript right there, ready to download. It makes following the learning curve a lot easier if you have instant multi-format access to the basics when you need them and new developments as they emerge.

Does Grammar Even Matter Any More?

Georgina Laidlaw — Thu, 16 May 2013 12:02:16 +0000

The short answer: I can haz cheezburger.

The long answer: yes, more than ever. Let’s see why.

Old-skool rulez

Many of the people who argue against the web’s flaky-seeming attitude to grammar were taught language via traditional means at school—and excelled in it.

They understand the rules and they like to apply them. They feel that decent English is a reflection on the individual who produces it, and shows a respect for the person who hears or reads it. And often, but not always, they are particularly enamoured by print media.

These are the writers who argue that you can’t start a sentence with “and” or “but”; that serial commas are either the holy grail or the devil’s work; that contractions are for face-to-face conversation, not business writing.

Are they right?

New media constraints

Of course they’re right—those are (some of) the rules of English usage.

However, new media presents new constraints on language—constraints for which some flexibility is required.

And the success of sites like icanhazcheezburger indicate that flexibility can pay off in terms of user engagement and audience growth.

Constraint #1: technology

It’s more difficult to read and comprehend digital text than print text. There, I said it.

This is one key reason why I think language has become less formal online. Since communication’s more difficult in this medium, content creators have tried to make communicating as simple as possible.

Constraint #2: Low barriers to entry

The web has much lower barriers to entry than traditional media.

This is a major advantage for those of us with something to sell—or tell—but also, it’s another reason why the web’s less formal than traditional media.

Constraint #3: User interaction

The web’s interactive, and gives us far more information about how effective our communication is than traditional media ever could.

So, for example, we all know that web users scan, and if we’re building content for them to use, we need to consider that.

But the web also entails a broader spectrum of communication than traditional media.

These factors affect everything from whether we use a sales video, to whether we use a semi-colon in the text that invites people to view it.

Striking a compromise

You only have to look at a few lolcats to realise that the web is a place where pretty much anything goes, language-wise.

Does that mean “proper” English is dead?

Well, that depends on one thing: your brand. Your brand has values—hopefully some that correlate with those of its target audience. It has a corresponding tone of voice, and that tone is communicated through your use of language.

If you choose to adhere to the strictest grammar rules, you can be sure that you’ll alienate some users. If you choose to compose your website in lolcats language, you can expect the same result (unless of course your business is a lolcats site).

The right compromise lies in the territory that exists between your brand and its customers. Speak to your audience using the aspects of their language that align with your brand and its values.

Each of us alters the way we talk depending on who we’re speaking to—and it’s that, not the medium, that should dictate how closely you stick to the English usage rules, as well as which ones you stick to, in your web copy and content.

In this context, it’s the people who know the rules of grammar, punctuation, and spelling inside-out—and therefore know when and how to break them—that are able to pitch their online message to greatest effect.

But hang on. You’re not a grammarian: you’re a developer, or a CEO, or a founder. Where does this leave you?

We’ll answer that question next week, as we look at user testing your copy to see if it’s hitting the mark.

We Talked JavaScript with the Experts – The Transcript

Sarah Hawk — Thu, 16 May 2013 02:11:44 +0000

The subject of this morning’s Talk with the Experts session was JavaScript and our expert was Ara Pehlivanian – co-author of our latest book, Jump Start JavaScript. It was a busy session and the questions varied from the basics to the advanced, making for a refreshing hour. Ara fended off the hordes admirably and even managed to have a good time doing so. Impressive.

A number of good resources came out of the session, and to save you filtering through the entire transcript, they are listed below. If you missed the session and want to see how it all went down, then you’re in luck – you’ll also find the transcript in its entirety below.

Resources:

Ara’s book – Jump Start JavaScript (you can preview the first chapter for free)
An interesting article on how to help people to learn programming.
Douglas Crockford’s awesome JavaScript resources
An interesting article on prototypes
A couple of JS linting tools: JSLint & JSHint
How to activate the browser’s console to get access to the debugger
Mozilla’s JS resource site
JavaScript resources on WebPlatform.org
Brackets – an open source code editor
jQuery on Github
YUI on Github
Backbone on Github
Underscore on Github
And finally – some JS Templating tools: Mustache JS Handlebars JS and Underscore

If you missed this session because you didn’t know about it, make sure you sign up for email notifications of future sessions here.

And lastly, next week we’re trying something a bit different. Our in-house CSS guru Alex Walker will be helping you out with any tricky CSS issues that you might be having, so don’t miss that one.

And now… the transcript. Enjoy.

[21:23] Hey everyone – we’ll be kicking off shortly. Feel free to introduce yourselves in the mean time.

[21:23] Hi, my name is Ara and I co-authored Jump Start JavaScript with Don Nguyen. :)

[21:24] My name is Chris and I love the web

[21:25] I’m Hawk, and I’m Community Manager at SitePoint – I’ll be moderating this session

[21:30] Right – so we may as well kick off

[21:30] There are only two things that you really need to know. You can @ tag people to get their attention, and you can ask questions at any time.

[21:30] If Ara is answering someone else, I’ll queue them for him

[21:31] So, the one thing I found interesting while writing the book was trying to figure out what order to explain stuff in.

[21:31] I assume everyone knows that Ara is our expert, and he is author of our latest book – JumpStart JavaScript, which launches today

[21:31] https://learnable.com/books/jsjavascript1

[21:33] A lot of things are interdependent. So, for example, when explaining arrays, there were a few instances where you could do stuff with arrays using functions, but we hadn’t covered functions yet…

[21:33] …so it was one of those, “we’ll touch on this in more detail later” situations.

[21:33] It happened a few times.

[21:33] it is tricky

[21:33] It is a good line of thinking.

[21:33] personally I want “hello world” to die in a big fire.

[21:33] lol. I love “Hello world.”

[21:33] Yeah – although there is something to be said for “Hello World”

[21:33] explaining concepts in context gets people much more excited.

[21:34] There should be a a generic ‘basics of programming’ book that is language agnostic, that everyone is required to read before reading any other programming book

[21:34] Sadly, I did use “Hello, world.” once or twice. But I think I slipped in a few “World dominations” as well.

[21:34] ;)

[21:34] Yes. One of my questions as a CS student is simply where to start with the existing libraries and APIs

[21:34] Because every book has to cover that ad infinitum

[21:34] MalCurtis, The Art of Computer Programming :P

[21:35] Learnable programming is trying to disrupt that idea. http://worrydream.com/LearnableProgramming/ and I’ve seen people get jumpstarted with this approach.

[21:35] steven JumpStart: Every Language… ever.

[21:35] I meant with the Javascript APIs. For instance, which ones are the most useful for web dev versus games.

[21:35] Velochicdunord: a lot of the core API is useful in both scenarios

[21:36] Velochicdunord: Or do you mean DOM API?

[21:37] starting with a game is dangerous. To make games work you need to cut a lot of corners and introduce a lot of concepts only applicable to a game, like the ticker and the main loop. You never need this in a “web site” or “web app” scenario.

[21:37] so is simply javascript book which was i think in 2007 has obsoleted teaching way ?

[21:37] Velochicdunord : If you’re building a game, the majority of it will be built using the core language’s logic operators, data manipulation, etc… it’s when you get to the rendering that the choice of game vs. web is made.

[21:38] Ramy Simply JavaScript is still a valid resource but as you say, it was written a while back, hence this new book

[21:38] You might choose to render your game using Canvas or you might use sprites manipulated in the DOM

[21:38] thanks HAWK for reply :)

[21:38] @Ara what about browser dependencies? isn’t it safer to use jQuery ?

[21:38] OK – so look at the DOM (which I haven’t done yet) :P

[21:39] Ramy: I wouldn’t say it’s obsolete but JavaScript has continued to evolve so we need to keep up with that evolution.

[21:39] So – which bits are best for which uses? The available libraries multiply monthly.

[21:39] brick: It’s definitely safer and a big time saver, but it’s always better to know what’s going on inside the library by having a firm grasp of native JavaScript.

[21:39] Thanks Ara :)

[21:40] To everyone else in the session – don’t wait for a gap if you have questions. Jump in and I’ll queue them.

[21:40] Velochicdunord: the DOM is basically the web page’s HTML converted into an hierarchy of objects. Working with the DOM means updating the web page.

[21:40] Just joined: One question: jQuery or plain javascript?

[21:41] JoshySav: depends on what you’re doing. More often than not you don’t want to reinvent the wheel so, jQuery. But you won’t write 100% of your code in jQuery, so that’s where native JavaScript comes in. Also, knowing what jQuery is doing is good.

[21:41] I hear an echo

[21:42] If you’re doing something simple you may want to avoid the extra weight of JQuery.

[21:42] JoshySav: Also, as JavaScript evolves, a lot of what jQuery used to do is becoming natively available in browsers. For example, for a long time, we used to code getElementsByClassName by hand. Now, libraries hand off to the native method if it exists.

[21:42] johnlacey: Yep. It’s really a decision to be made on a case by case basis.

[21:42] brick: apologies :)

[21:42] Awesome thanks :)

[21:43] @Ara — So any rookie mistakes you think beginners to Javascript should be particularly aware of?

[21:43] Also one other question, why are so many technologies on the web using JavaScript?

[21:43] A lot of jQuery was needed to plug the holes in browser support and simplify complex ways of accessing the document. This has changed. Browsers are more compliant with the standards and a lot of what we use jQuery for can be done in CSS and there it can be hardware accellerated and memory optimised by the browser for you.

[21:44] johnlacey – I’d say relying on it, considering these days so many people have it disabled ;)

[21:44] @Hawk — Absolutely. That’s my fear. lol

[21:44] johnlacey: variable scoping can be an issue. If you don’t understand variable scope, you can potentially overwrite data and cause errors. Also, understanding type coercion is another one. Not knowing the difference between == and === could potentially lead to unintended consequences.

[21:44] I haven’t totally been following. Are the authors for or against modifying JavaScript object prototypes?

[21:45] Thx codepo8.

[21:45] @HAWK well, blocking people out for not having it. You can rely on JS – if what you build is making the experience smoother. Basic functionality should always be a given. A link should point someplace, not fire a JavaScript that might be broken.

[21:45] Hi codemaestro – that hasn’t been covered. Let’s throw it to Ara

[21:45] JoshySav: JavaScript is the de facto scripting language for browsers. It used to be that you could choose between Microsoft’s Visual Basic and JavaScript, but JavaScript won. There are efforts to introduce competing scripting languages (like Google’s Dart) but JavaScript is pretty much the only choice.

[21:46] Ara Thanks :)

[21:46] Its nice to talk to people with Brains ;)

[21:47] codemaestro: It’s a touchy subject. Some libraries do it and some developers are comfortable doing it, but you have to remember that on the web, more often than not your code is going to coexist with other people’s, so if you get really fancy with native object prototypes, you might start running into conflicts with other people’s code.

[21:47] JoshySav: I assume you mean the other guests. :)

[21:47] @Ara — Given that Javascript can be disabled (as @Hawk pointed out earlier) are there certain things you should avoid using it for?

[21:47] I think he was talking about me Ara

[21:47] :)

[21:47] HAWK: :)

[21:48] To be honest, How many people have JavaScript turned off?

[21:48] Thanks Ara — so the answer is, “it depends.”

[21:48] Yeah, interesting question JoshySav. I (obviously) spend a lot of time on the SitePoint forums so my perspective is skewed – but there is a fairly large contingent of people over there that do…

[21:48] johnlacey: That depends entirely on the site/app you’re building. If it needs to be 100% accessible, then you need to look into progressive enhancement, where the site will work with and without JavaScript. But not all sites and apps have that requirement, so you can get away with a purely JavaScript application. It’s a case by case thing.

[21:49] The accessibility guys

[21:49] Everybody has JavaScript turned off until the first script is loaded and executed. If something goes wrong there and your whole app relies on that, you lost a user.

[21:50] There’s a whole lot of form validation in my life that relies on Javascript… but I guess I’ll have to have PHP fallbacks just in case. lol

[21:50] Ara – any recommended resources (besides your book, of course) regarding best practices for Javascript implementation and use? Does your book cover this?

[21:50] especially in mobile environments it more likely that a user fails to load js rather than having turned of js

[21:51] johnlacey: As a rule of thumb, you should never rely on JavaScript as your only form of data validation. It should be used more as a convenience than a safeguard since people can not only turn off JavaScript but also mess with values and functions in the browser.

[21:52] ^ that. I have cURL and I will use it!

[21:53] The chrome download page was not working for half a day the other day because of a JS error: http://icant.co.uk/talks/h5/pictures/jqueryeu/chrome-download-broken.png – The big glaring mistake here was the “javascript:void(0)” link. These are crimes we should not commit in this day and age.

[21:53] is the book explaining JavaScript syntax and DOM and using it in browsers or going through now a days apps for mobile platforms ?

[21:53] I’m interested in Velochicdunord’s question: any recommended resources (besides your book, of course) regarding best practices for Javascript implementation and use?

[21:53] Velochicdunord: I cover some best practices in the book but I don’t go in depth. There are several schools of thought on best JavaScript practices. Personally, I ascribe to the Douglas Crockford (http://www.crockford.com/) way of thinking. You’ll find a lot of defensive programming techniques in the jQuery community, like encapsulating your code in

[21:53] an IIFE (Immediately Invoked Function Expression) where the values for “undefined” and “window” are reinitialized.

[21:54] I just found Doug Crockford this February. Still much to dig through.

[21:54] You lost him before?

[21:54] More specific link to Crockford on JavaScript: http://javascript.crockford.com/

[21:55] Ramy: The book explains JS syntax and the DOM but doesn’t explicitly deal with Mobile environments.

[21:55] codepo8 :) – no – as a noob, hadn’t heard of him before. Am about halfway through his lecture series on the history of Javascript.

[21:56] * mattevans slaps MalCurtis around a bit with a large trout

[21:56] Ah – the old trout slap

[21:56] :-)

[21:56] lol. I hadn’t seen the ol’ trout slap in forever.

[21:57] Velochicdunord: He’s the author of JSLint (http://www.jsliint.com). It’s a JavaScript linting tool that helps you find errors in your code. It’s in essence a distillation of the Crockford school of thought when it comes to code style. Some people differ with him and forked JSLint and created JSHint (http://www.jshint.com) which does the same thing

[21:57] but is billed as being more friendly.

[21:58] Now that things are a bit quieter – has anyone asked a question that hasn’t been answered yet?

[21:58] I’ve read a number of JS books, but when I’m on my own, I do find it hard to “think” in JavaScript. If something doesn’t work, it’s hard to know where to turn. Often JSLint and JSHint report that the code is fine, yet it doesn’t work. So then the question is, “how do I talk to the browser?” Any tips on how to take the next step, other than googling?

[21:58] Merci – yeah, found the JSLInt & Hint business. :)

[21:58] Having worked with Douglas for a while was very eye-opening. He knows his stuff, but can be very dogmatic about things. I like that. If you haven’t annoyed anyone in your life then you probably had no opinion or new thought.

[21:59] ralphm: Learn to love the debugger. I’ve found that if you set breakpoints in your code then step through it, keeping a close eye on the values being passed around, you’ll often find what’s going wrong pretty quick.

[22:00] @ralphm the developer tools in browsers will tell you in a lot of cases what is wrong. JSLINT only tells you glaring syntax problems. For example a failure of interaction or data coming in in the wrong format is not caught by it. That’s where the browser’s error console helps you.

[22:00] ralphm: All major browsers have built in debuggers now. I actually cover how to activate the browser’s console to get access to the debugger in the first chapter of the book: https://learnable.com/books/jsjavascript1/online/ch01.html#d5e162

[22:00] to annoy someone is easily done… just say “MS Rulz!”

[22:00] Barney:)

[22:00] I kind of wish I had more questions… but I am waiting for the coffee to reach my brain. I have however downloaded the book and look forward to reading it.

[22:01] also just playing with the console is fun. Type navigator. and see all the things the browser offers you and play with them. Many a time you find a feature you never heard of.

[22:01] Haven’t really got my head around debugging, other than using console.log() at various point to see where the code is up to. Problem is, if things are going wrong, it doesn’t say what else to try, and that’s where I get a bit stuck.

[22:01] “..takes well deserved bow!”

[22:01] johnlacey: feel free to hit me up with more questions any time. I’m @ara_p on Twitter

[22:01] That goes for anyone else too. I’m always free to answer questions. ^^

[22:01] @Ara — Thanks!

[22:02] then go to https://developer.mozilla.org/en-US/docs/JavaScript and learn how and why these things happen. An incredible resource maintained by a hardworking staff of experts who should be sleeping right now.

[22:02] and by free I mean “happy to.” :)

[22:02] I have a question: If one knows jQuery and basic Js syntax, what is the best way to get to really know Javascript at a pro level?

[22:02] also http://www.webplatform.org/ is the new up and coming one-stop-shop for curated web content rather than hearsay you get on w3schools or stackoverflow.

[22:02] I second JC’s question.

[22:03] And of course sitepoint :)

[22:03] ralphm: I guess I need to write a blog post on debugging. :)

[22:03] @JC dig into the source of some libraries and tools. Adobe’s Brackets is a very hot and amazingly well crafted project http://brackets.io/

[22:04] JC: open up the jQuery source code and look at what they’re doing. That will give you a lot of pro-level insight. Likewise with lots of projects on GitHub. Also, in your free time, try and code the craziest things you can think of.

[22:04] @Ara That would be great. :-)

[22:04] Velochicdunord ^^

[22:04] SIMPLY JAVASCRIPT BY KEVIN YANK & CAMERON ADAMS I just finished — good book thanks SitePoint

[22:04] Barney +1

[22:04] first time I see SIMPLY screamed

[22:04] following a mess of libraries on GitHub

[22:04] Hehe, glad to be of service Barney

[22:05] Welcome NickY – feel free to jump in with questions (if you have any) at any time

[22:05] Velochicdunord & JC: You’re probably better off following the more popular open source projects as they’ve got a lot more eyes scrutinizing the code.

[22:05] no prob, HAWK – I have some 20 books from you guys and did like 5 classes — I brag up siteP and Lean… all the time

[22:05] Any suggestions for open source to follow?

[22:05] That’s the great thing about open source projects, you can’t get away with junk–at least not if your code is popular enough to have lots of people looking at it. :)

[22:05] … is bucking for a free month!” *smiles*

[22:06] the WP bookis here are great open source guides…

[22:06] yes, being open means your successes and your failures speak for you

[22:06] Own a few. :)

[22:06] Ah Capt_Snickle_Fritz – nice to see you again

[22:07] Velochicdunord: jQuery (https://github.com/jquery/jquery), YUI (https://github.com/yui/yui3), Backbone (https://github.com/documentcloud/backbone), Underscore (https://github.com/documentcloud/underscore)

[22:07] Thx

[22:07] Likewise HAWK

[22:07] Vel, you got Anthology books?

[22:08] I guess “come at me, bro!” isn’t the best way to ask people for more questions, huh? ;)

[22:08] Hehe, love it Ara

[22:08] But yeah – if anyone has a question, jump in now while there’s a space!

[22:08] This is fun.

[22:08] You’re owning it. Nice work.

[22:09] Thanks to the guests. Great questions, folks.

[22:09] why is the following line not a JavaScript error:

[22:09] http://vanillawebdiet.com

[22:09] Hi to those of you that have just joined – jump in at any time if you have a question. You can check the full transcript later today on SitePoint.

[22:09] codepo8: trick question, because there’s no JavaScript in it. ;)

[22:09] no

[22:10] You can also check out Ara’s book here https://learnable.com/books/jsjavascript1

[22:10] try it in a script, it doesn’t fire an error

[22:10] codepo8: I wonder if the IRC client filtered out the code then ’cause all I saw was the vanillawebdiet.com URL

[22:10] maybe paste it in jsfiddle?

[22:10] No – WP Novice to Ninja was a bit of a disappointment – not enough substance. Held off purchasing additional SitePoint books after that.

[22:11] The IRC client shouldn’t do that – it should paste it as a gist

[22:11] OK, I might as well ask. No matter what I read (books and online) I can’t find a simple, conceptual answer to what a “prototype” is. E.g. Array.prototype. Can anyone offer a potted explanation?

[22:11] Velochicdunord: You can always read the first chapter for Jump Start JavaScript here, if you want a preview: https://learnable.com/books/jsjavascript1/online/ch01.html

[22:11] Second ralph’s question!

[22:11] http://jsfiddle.net/jp5PZ/

[22:11] Thx, Ara.

[22:13] I’m just going to jump in to let you know that if you want reminders of future sessions like this, sign up for the mailing list here http://www.facebook.com/sitepoint/app_115462065200508

[22:13] this article is very good on prototype: http://dailyjs.com/2012/05/21/js101-prototype/

[22:14] Thanks codepo8. Will check it out.

[22:14] ralphm & Velochicdunord: So, JavaScript’s inheritance model is prototypal. Basically what it means is, everything’s an object and objects inherit from objects so when you inherit from an object, you’re inheriting its prototype object. (Dang, I think that wasn’t clear)

[22:14] No – that’s good.

[22:14] Hey Jess

[22:14] Thank you for your answers

[22:15] Ara as to my error – pause filler – a URL like this in JS is actually a JavaScript label followed by a comment, hence no syntax error. Labels are very much not used anymore.

[22:15] Would you classify that as a limitation of the JS language itself? After all, it is only recently that tools like jQuery and Node.js has sprung popularity in the JS community again

[22:15] Hi HAWK

[22:15] codepo8: It’s odd, because in the Chrome console I get the following error: SyntaxError: Unexpected token }

[22:16] JC: my pleasure!

[22:16] scruggs: I’m not sure I follow. What would be classified as a potential limitation? (Prototypes?)

[22:17] HAWK the mail reminder is good but i wish there is another reminder for facebook beside posts like an event

[22:17] scruggs different audiences I’d say. jQuery lowered the barrier a lot and is focused on DOM access and interface element creation like widgets. It made it damn easy to reach things and change things in a document. Node got a new audience as it moved JS to the server and made it unhindered by the DOM. The main boost for JS however was HTML5 and Flas

[22:17] h being less reliable as it wasn’t supported on the hottest and newest devices (iOS)

[22:17] Very good point Ramy – I can totally post them as events.

[22:18] Thanks for letting me join, see you all on the flipside…

[22:18] Cheers, Barney!

[22:19] the unexpected token is from jsfiddle’s wrapper around it.

[22:19] Any good books out there that focus on using JavaScript for games?

[22:19] codepo8: I didn’t get the error in jsfiddle, i got it directly in the chrome console.

[22:19] okay…maybe it’s not a limitation. I guess I am struggling to jump into the JS side of things yet…inheritance from what I have seen has been painful in many JS applications. For example, jumping into frameworks like Knockout.js and Backbone.js…it seems like the real trick is learning the frameworks and their limitations and what not

[22:21] if you want to stick to the mindset of class-based languages with full inheritance and mutation and the rest it is probably a good idea to stick to frameworks like the ones you mentioned. JavaScript will not change any time soon reliably across all the software that understands it so the attempts of “changing JavaScript so that it is more like lang

[22:21] uage $x” are pretty futile.

[22:22] That said, TypeScript and Dart allow you to do these and convert to JavaScript for you.

[22:22] I agree with you Scruggs. You do have to learn the framework. You could build applications using jquery with almost no knowledge of js itself

[22:22] scruggs: More often than not you won’t need to know inheritance to do powerful things in JavaScript. But knowing it can help you take your code to another level. That said, it isn’t always necessary. You are right though that in the realm of frameworks, it’s more about knowing their API/syntax than it is about knowing JavaScript because you’re work

[22:22] ing on an entirely different level at that point. You’re kind of abstracted away from the nuts and bolts of the language and are working with a framework’s API.

[22:23] NickY of course that comes at the cost of being reliant on a framework. If you go to town on a document with heavy jQuery that is not really taking care of caching and re-using things it accesses you’ll be very disappointed when you want to ship your app to mobile devices.

[22:24] (disclaimer: I work with a focus on FirefoxOS devices right now – low spec smartphones for a new market, so every event handler and every DOM access hurts) :)

[22:25] scruggs & NickY: regardless of the library or framework though, you still need to have a basic understanding of variables, variable types, logic operators, arrays, objects, functions… you still need to work with those things. jQuery gives you helpers to access DOM elements and iterate over objects and Backbone lets you do some great MVC stuff, bu

[22:25] t in the end you’re still writing JavaScript and passing around values and manipulating them. So you still need to know JS.

[22:25] 5 mins to go people. If you’re new to JavaScript and are worried about sounding dumb but have a question, please do ask.

[22:25] No such thing as a dumb question when you’re learning

[22:25] There’s no such thing as a dumb question :)

[22:26] HAWK *boom!*

[22:26] hehe indeed

[22:26] codepo8 / Ara: I’m late to the talk, so I apologize if this was covered, but are there frameworks you would recommend that take mobile access into account?

[22:26] That is a good point, but there are many functions in jquery that you still won’t even need to know that

[22:27] @HAWK I am pretty sure I have angered the techno-gods today… but I am on the Facebook page for email notifications for Talk with the experts… and should there be a button to click after I enter details? Because there isn’t. lol

[22:27] Oh yeah. How many users are actually using ExtJS/Sencha Touch vs. jQuery Mobile?

[22:27] ara…I think the hardest part is trying to learn how the language cooperates at times lol. I am a C# programmer by trade, but I am trying to get a strong foothold into the JS community, so I have been trying to learn all I can about knockout.js, backbone, and trying to build things with node.js

[22:27] BluePandaStudios: off the top of my head I know that jQuery has a mobile component and YUI has mobile built into it (as well as modules you can use that are mobile specific like touch controls)

[22:28] Also, any feedback on libraries that you feel are “_must checkout_” (besides jQuery…)?

[22:28] take for example $(element).is(‘:hidden’) – no need to understand any core js fundamentals there jquery does it all for you

[22:29] i love jquery but sometimes I think it makes us lazy.

[22:29] scruggs: I think it’s great that you’re learning those frameworks. But I think you’d be well served to spend some time poking around in native JavaScript, just to get a better grasp of how JS deals with things like loose typing and type coercion, or variable scoping. Those things become important as your programs get more complex.

[22:29] Oh johnlacey, you’ve broken it.

[22:29] BluePandaStudios sencha touch is good, jQuery mobile needs some brushing up, Zepto.js is a very lightweight one (for the moment). A lot is dependent on what you do. Sometimes just something like hammer.js is all you want (this one makes touch interaction simple)

[22:29] Ok, I have – sorry! Fixing now.

[22:29] @HAWK — So it would seem. lol

[22:30] Ara: I will definitely get back to the basics of JS again. Last time I used native JavaScript trying to traverse the DOM was a painful experience! :)

[22:31] NickY: jQuery is definitely more convenient than writing out what it’s doing under the hood longhand every time. That said, understanding what it’s doing can be helpful. Especially if you’re going to be coding web applications that do a lot of heavy lifting in the client but not necessary on the DOM layer.

[22:31] Check back in an hour johnlacey – I’ll sort it straight after this session

[22:31] NickY I’d argue there that if you don’t know when some element of your YUI is hidden and you need to ask the browser to tell you that (which means it needs to access the DOM and try it out) then you have not planned your UI right. The browser is there to display, not to retain display logic.

[22:31] Are there any nifty JS templating tools available?

[22:31] NickY: For example, if you were to write a JS based spreadsheet like the one in Google Docs. There’s a ton of non-library JavaScript action going on behind the scenes, I’m sure. When it comes time to render the stuff, they probably use a framework.

[22:32] Whoa – the time has flown. We’re going to need to start wrapping things up so that I can cut Ara free

[22:32] scruggs you’d be surprised how many times you don’t need to traverse the DOM if you add a CSS class to a parent element and keep this logic in your CSS.

[22:32] I’m going to call no more new questions, but I won’t be closing the room so you’re free to hang around and chat as long as you like

[22:32] scruggs yes – mustache.js and handlebars.js

[22:32] Thanks @Ara @Hawk

[22:32] Don’t forget to check out Ara’s new book https://learnable.com/books/jsjavascript1

[22:33] scruggs: Definitely. You’ve got Mustache JS (https://github.com/janl/mustache.js/), Handlebars JS (http://handlebarsjs.com/) and even Underscore has a templating system (http://underscorejs.org/#template)

[22:33] And same time next week we’re running a live CSS codefix session with Alex Walker

[22:33] This has been a real ADHD experience.

[22:33] scruggs: just off the top of my head

[22:33] codemaestro: tell me about it! :D

[22:33] I agree ara, I guess all I was really trying to say is that I believe everyone should get a strong understanding of js before turning to libraries

[22:33] I hope I didn’t miss anyone’s questions. Please repeat them if I did.

[22:34] NickY or go into the libraries with a desire to find the underlying behaviours

[22:34] I want to say a huge thanks to Ara – you’ve been an absolute legend today, handling the hoards alone

[22:34] I had a problem with $(elem).text(”) not producing the same result in two different point versions of Chrome.

[22:34] NickY: I agree. Although over the years, the hardcore engineer in me has given way a little to the business dude in me who says that sometimes, to get the job done, you can just go the route of not having to know everything. (Shhhh, don’t tell anyone I said that.) ;)

[22:34] Much appreciated

[22:34] @ara LOL

[22:34] HAWK: You’re too kind. :)

[22:35] Ara lol yes I have been getting to that point. I blame freelancing:)

[22:35] HAWK, thanks for the talk, great time!

[22:36] Thanks. I am pleased with the suggestions and that nudge forward to continue learning more about the basics of JS and the technologies that incorporate it!

[22:36] codemaestro: Yeah, i’m not sure what text() uses under the hood, but it could be that they didn’t account for changes from one Chrome release to another.

[22:36] HAWK – is there a way to get alerts without going to Facebook?

[22:36] codemaestro: I know that there are differences between IE and the rest of the browsers when it comes to innerText and textContent, so it could be something like that.

[22:37] NickY not at the moment, but you don’t need to have a Facebook account to use that form

[22:37] Oh ok sweet I will do that then

[22:37] true. eventually i discovered through trial/error/much googleing that the element needed the hasLayout property or something to be set.

[22:38] thanks to ara, hawk, and everyone. This was fun.

[22:38] I got a few more library names to scope out when I have time.

[22:39] codemaestro Ahh.. the legendary hasLayout ;)

Randomizing Sliding Puzzle Tiles

Bruce Alderman — Wed, 15 May 2013 15:10:26 +0000

In a previous tutorial, I demonstrated how to create a sliding puzzle game with HTML5 canvas.

To save time I hard-coded the starting tile positions. Game play would be better if the tiles were randomized, but doing so would have led to complications that would require a separate tutorial to explain.

This is that tutorial.

There are a number of ways to randomize the tiles. I’ll look at a few options and discuss their strengths and weaknesses, as well as the problems that arise and how to overcome them.

One simple method is to initialize the puzzle in a solved state, then repeatedly call a function to slide a random piece into the empty space.

  function initTiles() {
    var slideLoc = new Object;
    var direction = 0;
    for (var i = 0; i < 30; ++i) {
      direction = Math.floor(Math.random()*4);
      slideLoc.x = emptyLoc.x;
      slideLoc.y = emptyLoc.y;
      if (direction == 0 && slideLoc.x > 0) {
        slideLoc.x = slideLoc.x - 1;
      } else if (direction == 1 && slideLoc.y > 0) {
        slideLoc.y = slideLoc.y - 1;
      } else if (direction == 2 && slideLoc.x < (tileCount - 1)) {
        slideLoc.x = slideLoc.x + 1;
      } else if (direction == 3 && slideLoc.y < (tileCount - 1)) {
        slideLoc.y = slideLoc.y + 1;
      }
      slideTile(emptyLoc, slideLoc);
    }
  }

In this case we’re sliding 30 tiles, twice the total number of tiles in the 4×4 puzzle, and yet most of the pieces remain in their original locations. To get anything resembling randomness we would need many more iterations.

That’s not an efficient way to randomize the puzzle. Ideally, we’d like to move each piece only once. We could initialize the puzzle to a solved state, then iterate through the tiles, swapping each one with a tile chosen at random.

  function initTiles() {
    for (var i = 0; i < tileCount; ++i) {
      for (var j = 0; j < tileCount; ++j) {
        var k = Math.floor(Math.random() * tileCount);
        var l = Math.floor(Math.random() * tileCount);
        swapTiles(i, j, k, l);
      }
    }
  }
  function swapTiles(i, j, k, l) {
    var temp = new Object();
    temp = boardParts[i][j];
    boardParts[i][j] = boardParts[k][l];
    boardParts[k][l] = temp;
  }

Not only does this method give us a much more random-looking configuration, it does so in fewer lines of code. This algorithm, however, has two serious flaws. The first problem is subtle. Although swapping each tile with a random location is much more efficient than simply sliding pieces into the empty slot, this still is not a truly random algorithm. Some starting positions will show up much more frequently than others.

In a 2×2 puzzle, some starting configurations will occur 87% more often than others. Add a third row and some configurations appear five times as often as others—and it continues to get worse as more tiles are added. Fortunately, there’s a way to achieve true randomness without adding extra complexity. It’s known as the Fisher-Yates algorithm.

  function initTiles() {
    var i = tileCount * tileCount - 1;
    while (i > 0) {
      var j = Math.floor(Math.random() * i);
      var xi = i % tileCount;
      var yi = Math.floor(i / tileCount);
      var xj = j % tileCount;
      var yj = Math.floor(j / tileCount);
      swapTiles(xi, yi, xj, yj);
      --i;
    }
  }

The mathematics of the Fisher-Yates are beyond the scope of this tutorial, but it does give every tile an equal chance to appear in any square. Using this algorithm, the puzzle is as random as the Math.random() function can get.

But swapping tiles randomly—with the Fisher-Yates algorithm or any other—leads to another problem. Half of all possible tile configurations give us a puzzle that can never be solved. To prevent unleashing an unsolvable puzzle on an innocent user, we need yet another algorithm.

Before I introduce this algorithm, I need to define two terms: inversion and polarity. An inversion is a pair of tiles that are in the reverse order from where they ought to be. The polarity of a puzzle is whether the total number of inversions among all tiles is even or odd. A puzzle with 10 inversions has even polarity; a puzzle with 7 inversions has odd polarity.

The solved puzzle has zero inversions (and even polarity) by definition. If we swapped two neighboring tiles from a solved puzzle, we would have one inversion.

In this game the board is configured as a two-dimensional array, each piece represented by its x/y coordinates.

But to work with inversions and polarity we’ll think of it as a one-dimensional array. We can convert each tile’s coordinates to a single number n with the formula n = y * w + x, where w is the width. Pictured as a single-dimension array the tiles are numbered like this.

Now let’s consider a randomized puzzle. It might look like this.

There are 19 inversions. Tile 6 is inverted with all six of the tiles numbered 0 through 5; 3 is inverted with 0, 1, and 2; 2 is inverted with 0 and 1; 4 is inverted with 0 and 1; 7 is inverted with 0, 1 and 5; 5 is inverted with 0 and 1; and 1 is inverted with 0.

To get this total, we need a function to count the inversions for each tile.

  function countInversions(i, j) {
    var inversions = 0;
    var tileNum = j * tileCount + i;
    var lastTile = tileCount * tileCount;
    var tileValue = boardParts[i][j].y * tileCount + boardParts[i][j].x;
    for (var q = tileNum + 1; q < lastTile; ++q) {
      var k = q % tileCount;
      var l = Math.floor(q / tileCount);
      var compValue = boardParts[k][l].y * tileCount + boardParts[k][l].x;
      if (tileValue > compValue && tileValue != (lastTile - 1)) {
        ++inversions;
      }
    }
    return inversions;
  }

Now we can iterate through the tiles and keep a running sum of the inversions.

  function sumInversions() {
    var inversions = 0;
    for (var j = 0; j < tileCount; ++j) {
      for (var i = 0; i < tileCount; ++i) {
        inversions += countInversions(i, j);
      }
    }
    return inversions;
  }

Sliding a tile sideways does not change the number of inversions; the empty square has no number, so swapping it with an adjacent tile will always leave us with the same number of inversions. However, we might change the number of inversions when sliding a tile up or down. For example, if we slide the 6 tile down, we reduce the number of inversions from 19 to 17.

The rule is that sliding a tile up or down will change its relationship with w – 1 tiles, where w is the width of the puzzle. So for the 3×3 puzzle, we are changing the tile’s relationship with two other tiles. This may result in a reduction of two inversions, an increase of two inversions, or no change. In the puzzle above, for example, sliding tile 5 up would have left us with 19 inversions, as it would gain an inversion with 4 and lose an inversion with 7.

A puzzle that starts with an even number of inversions will always have an even number of inversions; a puzzle with an odd number of inversions will always have an odd number of inversions. This is true not just for the 3×3 puzzle, but for any puzzle with an odd width. If we’re ever going to reach zero inversions, we must start with an even number.

Since we’ve already calculated the number of inversions, a simple function will tell us whether the puzzle is solvable.

  function isSolvable() {
    return (sumInversions() % 2 == 0)
  }

The example above is not solvable, since 19 is not even. But suppose the first two tiles were reversed?

Now we start with 18 inversions. The 3 and 6 are no longer inverted, but everything else remains the same. We have a solvable puzzle.

This gives us an elegant solution that preserves the puzzle’s true randomness—every unsolvable puzzle is paired with a unique solvable puzzle that differs only in the first two tiles.

  if (!isSolvable()) {
    swapTiles(0, 0, 1, 0);
    initEmpty();
  }

Unfortunately, this won’t work if one of the swapped tiles is the empty square. We’ll need special code to deal with that situation.

  if (!isSolvable()) {
    if (emptyLoc.y == 0 && emptyLoc.x <= 1) {
      swapTiles(tileCount - 2, tileCount - 1, tileCount - 1, tileCount - 1);
    } else {
      swapTiles(0, 0, 1, 0);
    }
    initEmpty();
  }

If the empty square is in one of the first two locations, we instead swap the last two tiles. This slightly skews the randomness, but we’re still much closer than any other algorithm can get us.

There’s just one problem remaining. If the width of the puzzle is an even number, sliding a tile up or down reverses the polarity. This is because, as we saw above, the tile changes its relationship with w – 1 tiles.

In order for the puzzle to be solvable, it must have an even polarity when the empty square is on the bottom row (assuming the empty square is on the bottom row when the puzzle is solved). When the empty square is on the next row up, the puzzle is solvable if the polarity is odd. So for an even-width puzzle, we must sum the inversions plus the distance between the empty row and the bottom row.

  function isSolvable(width, height, emptyRow) {
    if (width % 2 == 1) {
      return (sumInversions() % 2 == 0)
    } else {
      return ((sumInversions() + height - emptyRow) % 2 == 0)
    }
  }

Now we must edit the line that calls this function.

  if (!isSolvable(tileCount, tileCount, emptyLoc.y + 1))

There are a couple things to note here.

First, because the emptyLoc array is zero-based, we need to add one before comparing it with the height.

Second, for a square puzzle we don’t technically need two parameters for height and width; they are the same value, and we’re passing the tileCount variable to both. But separating them in the function clarifies which dimension is used in each equation. If we were to make a rectangular puzzle, we’d know where to use width and where to use height.

Randomizing a sliding puzzle turns out to be more work than creating the puzzle in the first place, but it’s worth the effort for the better game play it provides. You can see an example of a randomized puzzle here.

Take Your JavaScript to the Next Level with the Experts

Ricky Onsman — Wed, 15 May 2013 14:29:21 +0000

When Craig Buckler researched the best programming language to learn in 2013, he found that demand for JavaScript has increased faster than for any other language.

As the web evolves, JavaScript keeps raising its status as a proper programming language to be taken seriously and learned fully, rather than being just that code snippet you use without really knowing how it works, or even just that language that sits somewhere behind jQuery and other libraries.

At SitePoint, we’ve been watching this trend, listening to our readers’ feedback and plotting a flexible learning path to enhancing your JavaScript skills. Now is a perfect time for you to get comfortable with what is likely to be a key partner for HTML and CSS for some time to come.

Talk with the Experts

Today, Wednesday May 15, at 2:30pm PDT, you have our JS experts Ara Pehlivanian and Don Nguyen all to yourselves for free, to ask them any questions about JavaScript you may have. Best practices, trends, libraries, big or small challenges, anything. They will be there waiting for you. Transcripts will be available after the event. More here.

Jump Start JavaScript eBook

As our JavaScript experts, Ara and Don compiled a 150 page guide to mastering the fundamentals of JavaScript. The book steps you through an app project that provides the perfect base for anyone getting started with JavaScript or needing the context to explain what they’ve been using so far. The focus is on pragmatism and practical contexts. More here.

The JavaScript resource List

Between SitePoint and Learnable, we have amassed an impressive collection of instructional resources related to JavaScript: books, video courses, tutorial articles and screencasts by some of the most skilled exponents of JavaScript around. We’ve taken in which of those have been getting the most of your attention and positive feedback, and we’ve given thought to what content delivers the greatest benefit to web professionals, now and into the future.

The upshot is that we’re just about ready to publish a shortlist of our best JavaScript content available on SitePoint and Learnable: enough material to get anyone pumped to write the best JavaScript code ever.

So, if you’re keen to embrace JavaScript and bring it securely within your skillset, join in the Talk with the Experts session tomorrow (lurking is perfectly acceptable) and take a look at Jump Start JavaScript.

Tomorrow, we’ll publish our resource list, and you’ll be ready to take your JavaScript skills to a new level, whether that’s as a beginner or a practised scripter looking for more advanced techniques.

What’s New in Firefox 21

Craig Buckler — Wed, 15 May 2013 10:03:18 +0000

Firefox has come of age. In version numbers, that is.

Firefox 21 was released on May 14, 2013. If you’ve not received the update, click Help > About Firefox > Check for Updates. Let’s look at the new features you can expect after installation…

Element Support

The HTML5

element was introduced earlier this year and represents the main content of the body of a document or application, i.e. perhaps a wrapper for an article and aside.

It’s simply a container tag and all browsers will render it regardless. Firefox “support” probably means it defaults to a block element rather than inline, but you’ll still require display:block; for other browsers.

Scoped Stylesheets

If you’ve ever included third-party content on your page, you may find it contains CSS code which pollutes your own styles. Scoped stylesheets restricts style rules to the enclosing container without the necessity to use an iframe, e.g.


	This paragraph is the standard page color.


	
	Only paragraphs within this aside element are red.

Very useful. Unfortunately, only Firefox supports scoped CSS but IE11 and Chrome (and therefore Opera) should receive the technology soon.

Health Report

A preliminary implementation of the Health Report has been added to version 21. Non-personal Firefox data will be logged in the browser and to a central location including:

configuration details, e.g. hardware, OS, browser version, etc.
customization details, e.g. add-ons, plugins, options, etc.
performance data, e.g. timing of browser events, rendering, etc.
wear and tear data, e.g. session age, profile age, crashes, etc

Information is collated in the Health Report which allows you and Mozilla to determine performance issues. To view it, click Help > Firefox Health Report from the menu or enter about:healthreport in the address bar (wohh — I have 3,519 bookmarks … that explains a lot!)

Mozilla are monitoring your browser software rather than your activities or visited sites but, if you have privacy concerns, it can be disabled in the Health Report itself or in Options > Advanced > Data Choices tab > Enable Firefox Health Report.

Three-State Do Not Track

“Do Not Track” (DNT) is a W3C Recommendation implemented in most browsers. A DNT field is sent with every HTTP header which, if set to 1, means the site should prevent the user’s actions being tracked across two or more domains.

Firefox 21 introduces a new “Do not tell” option:

The option removes the DNT header so a site is not aware of your preference. It’s a minor privacy improvement, but I suspect DNT isn’t being widely implemented at this time.

Social API

My heart sank when I saw this feature. Social media integration has never been successful; ask anyone who used the Flock or Rockmelt browsers. If I want to catch up with friends and colleagues, I can visit a social networking site or use an app — I don’t need Firefox to drip-feed a steady stream of inane drivel!

The Social API provides a sidebar which shows messages from Facebook. Or Cliqz, Mixi and msnNOW – yep — I’d not heard of them either?

According to Mozilla:

The Social API has endless potential for integrating social networks, e-mail, finance, music, cloud possibilities, services, to-do lists, sports, news and other applications into your Firefox experience.

I’m less convinced. Will it be different to loading a site in the sidebar? Will publishers use the feature if it’s only supported by one browser? Perhaps I’ll be proved wrong but, unless this becomes an HTML5 Recommendation, I’m cynical about its future.

Android Updates

Firefox 21 on Android has received various HTML5 updates and now scores 421 out of 500 on html5test.com.

As well as the Gecko changes detailed above, the new mobile browser also provides:

integrated support for the Charis and Open Sans fonts which Mozilla claim is “a more visually appealing and clear reading experience on the Web”
the ability to save media files with a long tap
access to the recent history via the back and forward buttons
a newly-polished interface.

Admittedly, Firefox 21 is less exciting than previous releases but Mozilla continues to evolve the browser at a pace that makes Google look sluggish. See you again in six weeks for Firefox 22.

Mobile Website Security

David Walsh — Tue, 14 May 2013 15:30:00 +0000

Are you Creating a Secured Mobile Site?

In an era when consumers are increasingly shifting all of their social media, shopping, and buying habits to their smartphones and tablet devices, many companies have deployed mobile versions of their websites in order to encourage strong sales across platforms.

This is good business sense, but it comes with a number of security-related considerations. After all, mobile devices are being used in the public space during the vast majority of purchases, and they’re bound to be transmitting data over open Wi-Fi networks, mobile data networks, and other connections that usually aren’t as private and secure as a home broadband connection.

Designers and developers have already mastered creating a robust, touch-friendly website for today’s smartphones and tablets. As ecommerce implementations rise, though, it’s time to start considering how to create a highly secure mobile site that will protect shoppers’ identities, defend against hackers and identity thieves, and compensate for the more open nature of mobile data connections and public Wi-Fi networks that these devices use most often. Protecting consumer data comes down to a few major tips and considerations.

1. Choose a Highly Secure Web Host

Web hosts have security reputations, just as websites, Wi-Fi connections, and shopping cart options do. Many hosts offer Secure Socket Layer connections, often called SSL encryption, for a small additional fee to those customers that require a highly secure connection between any consumer device and their own shopping cart software. Only those web hosts that offer such a connection should be chosen to serve mobile sites to consumers that are likely using a public network. Furthermore, SSL should be implemented for both desktop and mobile users.

It might be a good idea to contact an existing web host specifically to inquire about their security procedures both on the backend and in implementations that face a website’s users. By making sure that hackers can’t compromise the host, and can’t compromise the company’s website, greater protection against data loss and identity thief can contribute to a better mobile business.

2. Don’t Be Afraid to Implement Secure Socket Layers for Mobile Devices

SSL has long been a mainstay of desktop ecommerce websites, since the technology essentially creates a highly encrypted, very secure connection between one consumer and the website’s server. This technology’s popularity on desktops is due in no small part to its effectiveness, serving as one of the best ways to deter hackers. Mobile commerce sites, though, tend to implement SSL inconsistently.

This lack of SSL implementation for mobile buyers might be because mobile browsers were once limited in their use of SSL and “https” websites. That has all changed, though, and today’s mobile browsers are just as sophisticated as the ones used on desktops. They’re adept at handling SSL encryption and managing encrypted transactions, and developers should take advantage of this functionality right away.

3. Comply with Mobile PCI Security Standards

The Payment Card Industry CI Security Council, often abbreviated as the PCI Security Council, is the regulatory body that governs all transactions involves credit and debit carts online and off. The organization has long had a list of requirements and recommendations for developing desktop sites, but it wasn’t until recently that they got heavily involved in mobile transactions. It’s not a moment too soon, of course, with so many sites now engaging in mobile commerce.

The PCI Security Council has released a list of recommendations and guidelines for mobile websites that encourage mobile commerce and accept plastic as a form of payment. The document can be found on the organization’s website, and its implementation is the best way to gain PCI certification and consumer confidence at the same time.

4. Choose a Payment Gateway Developed for Mobile Implementation

Numerous companies have created mobile-specific payment solutions that implement the full list of PCI security standards while keeping customers engaged and encouraging them to complete a sale using their mobile device. These payment solutions involve both third-party websites and transitional web software solutions that can be deployed by the website’s owner for use locally.

In addition to PCI compliance, these systems offer another benefit that will help with deployment: because they’re designed specifically for mobile transactions, they often come with touch-friendly designs, mobile-friendly language, and an intuitive administration interface that scales well to both desktops and portable devices.

5. Create a Mobile Security Policy

Online retailers have worked hard to create robust privacy policies, but it’s now time to focus on a new type of policy. With mobile security policies, websites can clearly state which pieces of information they require from consumers, why they require it, and how it is used. Furthermore, this policy actually helps the website guide its mobile ecommerce development, since they will know exactly which user input fields to place in their mobile payment setup.

Remember that a mobile security policy should be the right balance of “short and sweet” with enough detail to guide future website developments and provide peace of mind to consumers who may be purchasing via mobile for the first time.

Clearly Defined Objectives and Industry Compliance are the Keys to Success

With a clear policy of mobile security and adherence to industry standards that govern transaction security and encryption, retailers that encourage mobile purchases will be able to safeguard themselves from malicious hackers, as well as from potential legal hurdles that might arise without a strong security policy and robust encryption. With the right policies and tools in place, consumers will feel more at ease with mobile commerce, and they’ll be more likely to buy what the company has to offer no matter where they are, or whose data connection they’re using.

What to Do with Prospects Who “Just Don’t Get It”

John Tabita — Tue, 14 May 2013 13:30:14 +0000

It makes perfect sense to you and me. If that restaurant or hair salon doesn’t have a mobile website, they’re losing customers and therefore money. Yet, surprisingly, that restaurant or salon owner can’t seem to make the connection.

When selling any type of advertising or market—be it a print ad, website, or search engine optimization—there’s an inevitable disconnect that occurs. Your prospect is unable to connect the dots and understand how what you’re selling puts more money in his pocket.

That’s because your prospect is not the end-user of what you’re selling. His customer is the one who’s going to interact with his website or advertising. So all the supposed “features and benefits” don’t benefit your prospect in the least. Hence, the disconnect.

Take a Yellow Page ad, for example. The phone directory in which that ad is placed is designed to appeal to the end-user, your customer’s customer—it’s full of information and easy-to-use. The same can be said of a website. Your customer benefits indirectly, when that consumer finds his website or print ad, and calls.

That’s why “features and benefits” don’t work when selling advertising and marketing. What needs to replace “features and benefits” is “usage and action.” How does your customer’s customer use the advertising platform and what action do they take as a result?

So going back to my Yellow Pages example, I can say the following:

Usage: 69 percent of San Francisco Bay Area residents use the Yellow Pages.
Action: 82 percent of Yellow Pages users contact a merchant, and 46 percent make a purchase.

In order to cross the chasm between product and profit, Yellow Page sales people have used a technique called “picturing the buyer.” That’s when you get your prospect to step out of advertiser mode and into consumer mode, by getting him to flip through the directory, view the ads inside, and imagine how his customer would look for and find him there.

Now, phone directories have been around for over 120 years, so there’s a good chance your prospect has used the Yellow Pages in his lifetime. But with digital marketing, not so much. Getting your prospect to grasp and understand how a consumer would search for a local business on a smartphone—when he’s never used one—is a challenge, to say the least. But unless you bridge that gap, you won’t succeed at selling your web marketing services.

In the same manner you’d get a potential Yellow Page advertiser “into the book,” you’ll need to demonstrate how a mobile consumer would conduct a local search for his business category on a smartphone (there’s also the added benefit of your prospect realizing his competitors’ listings appear above his).

Picturing the buyer is an effective method for getting your prospect to step into his customers’ shoes and understand how the average consumer uses technology to search for the products and services they need. Use it to help your prospect to “connect the dots” between what you’re selling and what puts money in his pocket—or else be forever frustrated with clients who “just don’t get it.”

Image credit

CSS3 Pong: Insane Things to Do with CSS #17

Alex Walker — Tue, 14 May 2013 13:01:09 +0000

Pop Quiz: What is this?

Before we kick things off, let’s try a quick ‘What am I?’. Is this picture..:

a). An Imperial Star Destroyer from Star Wars?

b). A Lego model of the Wankel Rotary Engine?

c). A scientific calculator?

If you answered ‘C – a calculator‘, give yourself a big smiley-face stamp! You are looking at a fully-functional, scientific calculator, built entirely within the virtual world of Minecraft.

Now, Minecraft — if you’re not familiar with it — is an online construction play-world with a very 8-bit aesthetic. Think ‘virtual Lego’.

Most Minecrafters spend their time constructing elaborate palace/fortresses. Sometimes these structures include the relatively rare ‘redstones’, which can be used as simple switches to control doors, gates and the like.

In the example above, a 16 year old (‘MaxSGB’) has wired together a virtual mountain of redstone into a stadium-sized, working calculator —complete with graphing abilities, sine, cosine, tan and square root functions.

If you’re having trouble getting your head around this, imagine a kid building his own Playstation II from Lego Mindstorm – you’re getting close.

Amazing. Crazy. Ridiculous. Tenacious. I’m not sure which is the best description.

Is this a good calculator?

No. The reality is, I had a digital watch in Grade 5 that had a better, built-in calculator than this creation.

But that’s not the point.

By pushing the boundaries, we can only guess at how much this guy has taught himself along the way — lessons in everything from architecture to engineering to programming to electronics to just raw problem-solving.

The Plan

With this idea of pushing things until they shudder in pain, we’re going to do something equally silly with CSS — construct a playable game – Pong (1972). No JavaScript or Flash. Just HTML, CSS and a healthy dollop of nutty professor.

Along the way we’ll:

do some interesting stuff with CSS animation
fiddle with CSS3 sibling selectors
hopefully have a chuckle about the ingenuity/insanity we employ

We’re going to be using a lot of very modern CSS3. In theory, it *should* work in Firefox, Opera and Safari but I’m only going to guarantee Chrome for this code demo.

I’m also only going to quote the official W3C version of the CSS in the examples to keep the code de-cluttered, — though real-world browsers will need their prefixes (-moz, -webkit, etc..).

Most of my demo code uses prefixfree to add the appropriate browser-specific prefixes at runtime, but you might prefer Compass, Fire, Scout, Sass, Less or even hard-coding your own hand ‘prefixerated’ CSS.

If you want to know what we’re heading towards, here’s the final demo.

Part 1 – The Animation

1). Setting up the court

First, let’s set up a court and ball to play with.

Here’s our starting markup:

CSS PONG

The outer #court DIV defines our playing court. We’ll give it a dashed green border like the original game.

We have a #ball which sits inside a wrapping DIV called #horizontal, which runs the full width of the court. This invisible DIV will become a useful platform from which to hang other screen elements later.

#court{
	margin: 30px auto;
	width: 600px;
	height: 300px;
	position: relative;
	border: 4px dotted #3f3;

Our #court needs a net. We can use a ‘:before’ pseudo element to attach it to our court.

#court:before {
	left: 50%;
	content:'';
	width: 10px;
	height: 300px;
	position: absolute;
	border-left: 4px dashed #3f3;
	}

Our ball is a simple 20px by 20px round-cornered DIV. No external image required.

#ball {
	position: absolute;
	width: 20px;
	height: 20px;
	display: block;
	background :#3f3;
	border-radius: 50%;
	transform: translate3d(10px,0,0) }

We now have our starting structure.

2). Animating the ball

Let’s back up a bit. If you’re already a CSS animation wizard, feel free to jump down page to Back to Pong. If not, we’ll dash through a few general ‘need to knows’.

First, most — but NOT ALL — CSS properties are ‘animatable’. As a general rule, if you can describe it with a number, it should be animatable.

For instance, we CAN animate:

left: 0px → left: 100px
margin-top: 10% → margin-top:90%
opacity: 0 → opacity: 1
z-index: 1 → z-index: 99

However, we CAN’T animate:

float: left → float: right
display: block → display: none
visibility: hidden → visibility: visible

You’ll notice that second group consists of discrete ‘states’. There are no inbetween states — like ‘slightly-hidden’ or ‘a little bit block’, which is why you can’t animate those properties.

Thankfully colors are always easy to animate — even when you use exotic keywords such as ‘dark orchid’ or ‘cornflower blue’ — because your browser automatically converts them into numbers.

But there’s more to consider.

Often, we’ll want to move things around on screen, and there are many ways do to that. In theory, animating any of the these properties would work:

left
right
top
bottom
margin
padding
transform:translate(x,y)
transform:translate3d(x,y,z)

While they all work, surprisingly, there are BIG differences in how browsers handle them.

Believe it or not, translate3d() is the most efficient method to move objects with CSS3 — even if you’re only animating 2d objects!

Apparently, translate3d() offloads the animation grunt-work onto the graphics processor, which speeds things up considerably. Certainly, my MacBook Pro processor stayed much cooler when I use translate3d().

The takeaway: Try to use translate3d() whenever you’re moving stuff around the screen.

Back to Pong.

Let’s take what we know about translate3d(), and give our ball a simple left-to-right-and-back bounce.

The transform:translate3D asks us for three values — X, Y and Z. Animating X moves objects left and right, while animating Y moves things up and down. We can leave the Z value at 0.

Let’s create a ‘leftright’ animation and apply it to our #ball.

@keyframes leftright {
0%,100% {transform: translate3d(10px,0,0)}
50% {transform: translate3d(570px,0,0)}
}
#ball{
 ...
 animation: leftright 2s infinite linear
 }

The ball should now bounce from left to right in our #court DIV every two seconds.

Step 1: setting up the court

Now let’s create a new animation called ‘updown’ — you can guess what that does — and apply it to our #horizontal platform.

@keyframes updown {
 0%,50%,100% {transform: translate3d(0,0,0)}
 25% {transform: translate3d(0,142px,0)}
 75% {transform: translate3d(0,-136px,0)} }
 #horizontal{
 ...
 animation: updown 2s infinite linear; }

Here’s what we have so far.

As you can see, our ball completes a perfect, diamond-shaped loop of the court, every two seconds.

Nice … but it quickly becomes boring.

What happens if we make a tiny tweak to the animation timing? Instead of 2.0 seconds, let’s set the #ball to cycle every 1.9 seconds and the #horizontal platform animation to 2.3 seconds.

Here’s the result.

As you can see, that small timing change has a large effect on the ball’s path. It’s true, this path WILL repeat, but instead of a two-second repeat cycles, it’s now on a 46 second cycle.

A much more interesting result.

Adding players

Lets add some players to the mix. We’ll pop in two new SPANs inside our platform (#player1 and #player2) and position them at either end.

CSS PONG

#player1, #player2 {
 background:#3f3;
  position:absolute;
  width:7px;
  height:44px;
  left:4px;
  margin-top:-12px;
}
#player2{right:4px}

Here’s a working demo.

As the players are contained inside our moving platform, they really CAN’T HELP but perfectly track the ball from top to bottom.

But we know that real players don’t play like that. They twitch. They lunge. They dive. They scramble.

What if we create a new ‘twitchy’ animation keyframe that makes the bats twitch erratically — relative to the platform?

@keyframes twitchy { /* make player twitch like a real player  */
  0%,
  100%{transform: translate3d(0, 0px, 0); }
  20% {transform: translate3d(0, -45px, 0); }
  44% {transform: translate3d(0, 25px, 0); }
  46% {transform: translate3d(0, -15px, 0); }
  48% {transform: translate3d(0, 15px, 0); }
  50% {transform: translate3d(0, 50px, 0); }
  70% {transform: translate3d(0, 60px, 0); }
  85% {transform: translate3d(0, -30px, 0); }
  95% {transform: translate3d(0, 30px, 0); }
}
#player1, player#2{ animation: leftright 2.3s infinite linear; }
#player1 {animation-delay:1.15s} /* delay player 2 for half a cycle */

Now, as long as we keep the bat animation on the same timing as the ‘leftright’ ball animation, they should always meet the ball between twitches.

Let’s put that into the demo (in ESPN super slo-mo!).

That’s an improvement. The bats twitch to-and-fro like a couple of 7-year olds on too much red cordial.

So, at this point we have an interesting animation example, but it’s no game.

Part 2: Making it Playable … kinda

‘Hey, wouldn’t it be cool if you could actually play it?‘

That was Casey’s first comment when he saw the animation experiment. I laughed and shrugged at the time, but it did get me thinking over the next few days.

Obviously the difference between a game and an animation is interactivity. If I’m not using JavaScript, I need a way for my CSS to interact with the user. I listed all the built-in ‘user events’ that CSS could tap into.

:hover
:active
:visited
:checked
:focus
:enabled
:disabled
:selection
:target

Maybe we could somehow piggyback on one of these events? I decided :hover was my best chance, so our cursor will become our bat.

#court {
cursor: url(/bat.gif), text;
}

Next, we need a new element that will act as our trigger for the animation. I’m going to insert a DIV called ‘#targetzone’ just before our #horizontal platform. We can lose the automated player #1 too.

CSS PONG

#targetzone {
  background: rgba(0,0,255,0.25);
  position: absolute;
  margin:-50% 0 0 -50%;
  z-index:100;
  width:800px;
  height:600px;
}

The CSS ‘sibling selectors’ — the + and the ~ — are quite powerful, yet often overlooked. In this case, we can use them to pass a :hover state from one HTML element to the element next to it. This let’s us use #targetzone to trigger our animation.

So, we’ll need to remove all of our current animations and transfer them to new ‘hover triggered’ rules like this:

#targetzone:hover{
    animation: updown 2.3s infinite linear;
}
#targetzone:hover + #horizontal{
    animation: updown  2.3s infinite linear;
}
#targetzone:hover + #horizontal #player2{
    animation: twitchy 1.9s infinite linear;
    animation-delay:0.95s;
}
#targetzone:hover + #horizontal #ball{
    animation: leftright 1.9s infinite linear;
}

Now our animation only plays when the cursor hovers over this #targetzone — I’ve made #targetzone semi-transparent blue for the demo, but it would normally be invisible to the player.

Like this. We’re getting closer.

Now, let’s think about ANY real-world game of tennis.

The funny thing about tennis is: most of the time the game doesn’t NEED you.

You can’t catch, dribble or carry the ball. For 98% of the each point, the ball is travelling (or animating) across the court, well out of your reach or direct influence.

For literally micro-seconds each rally you have a chance to either hit the ball back, or make a mistake.

So, if you broke it down into steps, our tennis logic could be written as:

1) BEGIN: ball animation.
2) ANIMATE: ball to the opponent. IGNORE player
3) ANIMATE: ball back to player. IGNORE player
4) CHECK: player’s cursor position
5) IS PLAYER BLOCKING BALL’S PATH?
5) IF: YES – GOTO: Step #2
6) IF: NO – END animation & SCORE 1 for computer.

So, if, as the ball nears the baseline, we were to quickly shrink our #targetzone trigger to the area just in front of the ball, the player would have to be on that spot for the animation to continue. We’d have some sort of very, very rudimentary CSS ‘collision detection’.

Here’s the new keyframe animation to resize the #targezone.

@keyframes targetzone {
  /* ball is in general play - targetzone is big */
  0%, 96% {
    width: 800px;
    height: 600px;
    margin: -50% 0 0 -50%;
  }
  /* ball is approaching player 1's baseline - targetzone shrinks*/
  96.1%, 100% {
    width: 150px;
    height: 100px;
    top: 0;
    left: 0;
    margin: 10% 0 0 -50px;
  }
}

Using a comma, we can add this new animation to our #targetzone trigger.

#targetzone:hover {
  animation:
    updown 2.3s infinite linear,
    targetzone 1.9s infinite linear;
}

Here’s the result.

It’s essentially working as planned, but with one issue.

The microsecond any player misses the ball (and the hover state ends), #targetzone resets and instantly re-triggers the animation to start again. You have to be paying close attention to even notice that the point ended.

We need one more animation to force a short break between points (like real tennis). This animation will play through just once (rather than loop) for each new rally, and will reshape #targetzone from height: 0 through to height: 150px.

@keyframes preparetoserve {
  /* Give targetzone no height so trigger is hidden */
  0%, 90% {
    height: 0px;
  }
  /* after a short time, resize the targetzone, ready to serve*/
  90.1%, 100% {
    height: 100px;
   }
}

We can attach it directly to #targetzone because we don’t need the player to trigger it.

#targetzone {
  ...
  animation: preparetoserve 2s 1 linear;
}

Let’s add this to the demo.

It’s taking shape!

Part 3: Keeping Score

As Oscar Wilde said, ‘Nothing succeeds like excess’ so why stop now? This puppy needs a CSS-powered scoring system, goshdarnit!

Now, rather than breaking down every line of code — it’s already a lengthy post — I’m going to talk you through the general principle and leave you to pull the demo apart if you’re interested.

Maintaining State with HTML & CSS

To update any scoreline, we need a way to use HTML/CSS to ‘maintain state’ — to keep track of what has happened so far. This is usually handled by servers and cookies.

A couple of years ago, Lea Verou wrote a really fun article on using restyled checkboxes to build a CSS-powered Tic-tac-toe game. It showed how HTML forms can record mouse clicks and how CSS can instantly respond to those clicks. She also showed that HTML form elements didn’t have to look like HTML form elements.

I thought it was super clever stuff.

So, what if:

1). I replaced my single #targetzone SPAN with a series of five HTML radio buttons — one for each scored point (1-5)? With a little CSS re-jigging, I could make our animation require that the radio button was both checked AND hovered over (i.e. input:checked:hover).

2). I also linked the scoreboard display to which of these inputs is checked? The scoreboard would tick over as soon as Player 1 clicks to serve. Yes, the sad truth is, the computer currently CAN’T lose this game — so the only real question is ‘How long will it be until Player 1 (you) misses the ball?‘.

I know, this feels unfair when you find out. It is.

Of course, for the sake of theatre, we want our player to *think* they have a chance of winning. The fact is, we can only update our radio button scoreboard when a click happens, and there are no clicks when someone misses the ball.

This means I have to update the score on the service click, but somehow not let the player SEE that new score until the point ends. Hmmm …

3). So, what if I position the new score just out of view while the hover is in place? Like jamming open an old window pane with a pencil, the window will come slamming down as soon as we pull out the pencil. In our case, removing the hover will bring our new score crashing down into place.

A CSS transition makes the new score slide into place smoothly.

I didn’t say it was pretty.

But it works.

Here’s the CSSDeck version of the final code.

Feel free to poke around in there.

Issues, Caveats, and Challenges

1). You may have already accidently discovered this. If you don’t move your cursor, the ball will be returned — EVEN IF YOU AREN’T ANYWHERE NEAR IT.

Unfortunately, this is just a fundamental property of the way browsers work and I doubt there is any way to code around it (without using JavaScript, anyway).

Essentially, every time you move your cursor — even the tiniest amount — your browser fires off the question ‘Hey, are there any new hover events happening??’ If the answer is yes, it renders some new CSS.

However, if the mouse doesn’t move, the browser simply doesn’t ask that question—even if other elements have moved in relation to the cursor. I can’t think how you could possibly change that behavior (without JavaScript).

But hey, stop cheating, and just keep the bat moving, OK?!

2). I’d love to be able to limit the movement of the player#1 bat to strictly up and down. If you can figure a way to pull it off, I bestow great glory unto you, sir or madame!

3). I have a vague idea it might be possible to allow the robot player lose sometimes. If we set a limit on the animation — let’s say 20-25 iterations — and the human player lasted that long, we could let them win.

However, scoring it correctly is the tough part. How do we tell whether someone outlasted the bot, and adjust the score accordingly? I’ve put some thought into this, but it’s hurting my brain.

If you’re inclined, feel free to fork it on CSSDeck and have a go.

Final word

So, are we at the shiny new dawn of the CSS3 Games era?

Um … no.

Just to clarify. No.

This wasn’t just a hack. It was a glittering city of hacks built on the banks of the ol’ Hack River. On the Planet Hack.

So, why bother?

The fun for me was asking CSS do something that it’s not in any way designed to do. It was quite hard to do something that would be relatively simple with other languages. It was just a fun problem to think about in my play time. Like sudoku or Rubik’s cube.

Secondly, like the Minecraft guy, there are some things you can only truly learn by pushing outside the boundaries of what you normally do. I had to force myself to really look at the CSS spec with fresh eyes for the first time in a long time.

With any luck, this article will give some people ideas about using CSS in ways that might not have occurred to them otherwise.

Also, if you made it this far, I thank you for your patience! I tried to keep this short but there was a lot to explain.

* So, what do you think?
* Got an improvement?
* Got a question?
* Got an idea for a CSS3-powered World of Warcraft?

Windows 8.1: Back to Basics?

Craig Buckler — Mon, 13 May 2013 13:12:06 +0000

Microsoft has been in the news this week. While any publicity is better than none, the headlines and statements have been particularly scathing:

Windows 8 is Microsoft’s “New Coke” fiasco
Windows 8 sales slump is killing the PC industry
users are confused by Windows 8

Windows 8 was an ambitious project. The OS attempted to merge smart phone, tablet and desktop concepts into a cohesive experience. Microsoft should be applauded for trying something new but, in reality, Windows 8 is two OSs bundled as one.

Tami Reller, head of Windows Marketing and Finance, admitted:

the learning curve is definitely real

Few would disagree. I’ve been using the OS for seven months and, while it feels comfortable now, those initial weeks without a Start button were disorientating. Metro can be — and still is — quirky on a standard desktop PC, but I rarely use Metro apps other than the media player.

If you’re in the industry, you’re paid to use technology for its own sake; learning something new is part of the course. However, for most companies, technology is a tool which helps them achieve business objectives. Unless there are clear commercial benefits, the costs associated with changing that tool and retraining staff are prohibitive.

I suspect people new to PCs actually grasp Windows 8 concepts better than older versions of the OS (clicking Start to shut down was an obvious metaphoric breakdown). Unfortunately, most people have used Windows before; they can understand evolution but revolution is a different matter. Besides, if you absolutely must learn something new, why not try Mac OS or Linux?

Windows Blue

It’s impossible to determine figures but I’d be amazed if Windows 8 sales matched those of Windows 7. Fortunately, Microsoft has listened to user criticism.

Pre-release versions of the next version of the OS, codenamed Windows Blue, were leaked on to the web recently. Microsoft won’t make any public comments, but hinted a preview release could appear in June. Version 8.1 is the most likely name but many of us old hands will think of it as Service Pack 1.

The interface looks much the same, but the leaked OS offers a number of revised features…

An optional Start button
In my Windows 8 review I speculated:

I would not be surprised to see the Start button make a triumphant return

I rarely miss the Start button now I’ve created appropriate taskbar shortcuts and use the keyboard Windows key to access the Start screen. The new logo-shaped Start button will probably do the same as the lower-left screen gesture, but having a button present will reassure many people.

Boot to desktop
Microsoft was criticized for showing the Start screen rather than the more familiar desktop after login. It’s a minor point since launching any standard application will instantly switch. That said, a new “boot to desktop” option will bring joy to many.

Configurable tile sizes
Start screen tiles are currently either “larger” or “smaller”. Even the small size doesn’t permit many icons on a desktop display so a new icon-sized tile will use a quarter of the space. Interestingly, a new super-sized option may also appear which could provide some interesting possibilities for live tiles.

New apps
Many of the existing Metro apps will be updated and a new video editing application could appear.

The OS should also include better SkyDrive integration. I’ve been impressed with Microsoft’s DropBox-like online file storage system and I suspect an increased number of applications will be SkyDrive-aware.

Internet Explorer 11
IE11 is a more exciting prospect although there’s no guarantee it’ll reach the final build. If expectations are correct, the new browser will fill the final missing gaps in IE10 — namely a few minor HTML5 features and WebGL (it’ll be interesting to hear how Microsoft engineers overcame the WebGL “security issues” they identified).

A long-overdue update to the F12 Developer Tools could also appear…

The current tools are adequate but clunky and ugly when compared with Firebug, the Webkit Inspector, Dragonfly or any other Microsoft development software. The company is enticing users back to IE but projects such as modern.IE a solid set of development tools will get developers on-side.

In summary, Windows 8 is changing but don’t expect it to revert back to Windows 7. Time will tell if the updates are enough to convince buyers.

Are you using Windows 8? Do you prefer it? Do you detest it? Do you want your Start button back? Will Windows 8.1 address your concerns?

SitePoint

Be Convincing and Win More Clients

Learn Responsive Web Design

Even Better CSS3 Toggle Switches!

Radio Button Support

Amended Accessibility

More Webkit Woes

Learn Responsive Web Design

Introducing the new HTML5 template Tag

Using templates

Learn Responsive Web Design

Crowdfunding a CSS Animation course – an experiment

Learn Responsive Web Design

Learn JavaScript Online

Getting started & key concepts

All time greatest JavaScript tutorials

Trending topics and rising stars

Join Learnable

Learn Responsive Web Design

Does Grammar Even Matter Any More?

Old-skool rulez

New media constraints

Constraint #1: technology

Constraint #2: Low barriers to entry

Constraint #3: User interaction

Striking a compromise

Learn Responsive Web Design

We Talked JavaScript with the Experts – The Transcript

Learn Responsive Web Design

Randomizing Sliding Puzzle Tiles

Learn Responsive Web Design

Take Your JavaScript to the Next Level with the Experts

Talk with the Experts

Jump Start JavaScript eBook

The JavaScript resource List

Learn Responsive Web Design

What’s New in Firefox 21

Element Support

Scoped Stylesheets

Health Report

Three-State Do Not Track

Social API

Android Updates

Learn Responsive Web Design

Mobile Website Security

Are you Creating a Secured Mobile Site?

1. Choose a Highly Secure Web Host

2. Don’t Be Afraid to Implement Secure Socket Layers for Mobile Devices

3. Comply with Mobile PCI Security Standards

4. Choose a Payment Gateway Developed for Mobile Implementation

5. Create a Mobile Security Policy

Clearly Defined Objectives and Industry Compliance are the Keys to Success

Learn Responsive Web Design

What to Do with Prospects Who “Just Don’t Get It”

Learn Responsive Web Design

CSS3 Pong: Insane Things to Do with CSS #17

The Plan

Part 1 – The Animation

1). Setting up the court

CSS PONG

2). Animating the ball

Adding players

CSS PONG

Part 2: Making it Playable … kinda

CSS PONG

Part 3: Keeping Score

Maintaining State with HTML & CSS

Issues, Caveats, and Challenges

Final word

Learn Responsive Web Design

Windows 8.1: Back to Basics?

Windows Blue

Learn Responsive Web Design