Javascript News

Even Better CSS3 Toggle Switches!

6 hours 51 min ago

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.

<div> <input type="radio" id="radio1" name="radio" class="switch" /> <label for="radio1">first radio button</label> </div> <div> <input type="radio" id="radio2" name="radio" class="switch" checked="checked" /> <label for="radio2">second radio button</label> </div> <div> <input type="radio" id="radio3" name="radio" class="switch" /> <label for="radio3">third radio button</label> </div>

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.

#targettedEOF {width:99%;font-family:"Open Sans", Helvetica, Arial, sans-serif;border:1px dotted #47B4DC;} #targettedEOF .targettedEOFcol {float:left;padding:20px;} #targettedEOF .targettedEOFbtn {clear:both;padding:0;} #targettedEOF h2 {margin-top:10px;} #targettedEOF .sptolbCTA {border:0 none;border-bottom:2px solid #85bb41;background-color:#91c352;color:white;margin:0;padding:1em 1em;vertical-align:middle;text-align:center;font-weight:700;font-size:17px;display:inline-block;line-height:0;text-shadow:-1px -1px 1px;cursor:pointer;text-decoration:none;} #targettedEOF .sptolbCTA:hover {color:white;} #targettedEOF .targettedEOFbtn p {padding:0;margin:0;} .cat_javascript #targettedEOF h2, .cat_cloudspring #targettedEOF h2 {font-size:1.267em;line-height:1.158em;margin:1.737em 0 0.579em 0;font-weight:bold;color:#0071D8;} .cat_javascript #targettedEOF, .cat_cloudspring #targettedEOF {font-size:1.5em;line-height:1.467em;width:100%;} .cat_javascript #targettedEOF ul, .cat_cloudspring #targettedEOF ul {list-style:square;margin:0 0 1.467em 1.467em;} Learn Responsive Web Design

SitePoint's ebook: Jump Start Responsive Web Design
Responsive Web Design: Key Concepts online course
Unlimited access to SitePoint Premium Content

Join Learnable $29 Includes all SitePoint books

Introducing the new HTML5 template Tag

Fr, 2013-05-17 17:02

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:

<table id="mytable"> <thead> <tr> <td>ID</td> <td>name</td> <td>twitter</td> </tr> </thead> <tbody>  </tbody> </table>  <template id="mytablerow"> <tr> <td class="record"></td> <td></td> <td></td> </tr> </template>

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.

#targettedEOF {width:99%;font-family:"Open Sans", Helvetica, Arial, sans-serif;border:1px dotted #47B4DC;} #targettedEOF .targettedEOFcol {float:left;padding:20px;} #targettedEOF .targettedEOFbtn {clear:both;padding:0;} #targettedEOF h2 {margin-top:10px;} #targettedEOF .sptolbCTA {border:0 none;border-bottom:2px solid #85bb41;background-color:#91c352;color:white;margin:0;padding:1em 1em;vertical-align:middle;text-align:center;font-weight:700;font-size:17px;display:inline-block;line-height:0;text-shadow:-1px -1px 1px;cursor:pointer;text-decoration:none;} #targettedEOF .sptolbCTA:hover {color:white;} #targettedEOF .targettedEOFbtn p {padding:0;margin:0;} .cat_javascript #targettedEOF h2, .cat_cloudspring #targettedEOF h2 {font-size:1.267em;line-height:1.158em;margin:1.737em 0 0.579em 0;font-weight:bold;color:#0071D8;} .cat_javascript #targettedEOF, .cat_cloudspring #targettedEOF {font-size:1.5em;line-height:1.467em;width:100%;} .cat_javascript #targettedEOF ul, .cat_cloudspring #targettedEOF ul {list-style:square;margin:0 0 1.467em 1.467em;} Learn Responsive Web Design

SitePoint's ebook: Jump Start Responsive Web Design
Responsive Web Design: Key Concepts online course
Unlimited access to SitePoint Premium Content

Join Learnable $29 Includes all SitePoint books

Crowdfunding a CSS Animation course – an experiment

Fr, 2013-05-17 00:51

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!

#targettedEOF {width:99%;font-family:"Open Sans", Helvetica, Arial, sans-serif;border:1px dotted #47B4DC;} #targettedEOF .targettedEOFcol {float:left;padding:20px;} #targettedEOF .targettedEOFbtn {clear:both;padding:0;} #targettedEOF h2 {margin-top:10px;} #targettedEOF .sptolbCTA {border:0 none;border-bottom:2px solid #85bb41;background-color:#91c352;color:white;margin:0;padding:1em 1em;vertical-align:middle;text-align:center;font-weight:700;font-size:17px;display:inline-block;line-height:0;text-shadow:-1px -1px 1px;cursor:pointer;text-decoration:none;} #targettedEOF .sptolbCTA:hover {color:white;} #targettedEOF .targettedEOFbtn p {padding:0;margin:0;} .cat_javascript #targettedEOF h2, .cat_cloudspring #targettedEOF h2 {font-size:1.267em;line-height:1.158em;margin:1.737em 0 0.579em 0;font-weight:bold;color:#0071D8;} .cat_javascript #targettedEOF, .cat_cloudspring #targettedEOF {font-size:1.5em;line-height:1.467em;width:100%;} .cat_javascript #targettedEOF ul, .cat_cloudspring #targettedEOF ul {list-style:square;margin:0 0 1.467em 1.467em;} Learn Responsive Web Design

SitePoint's ebook: Jump Start Responsive Web Design
Responsive Web Design: Key Concepts online course
Unlimited access to SitePoint Premium Content

Join Learnable $29 Includes all SitePoint books

Learn JavaScript Online

Do, 2013-05-16 14:15

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.

Does Grammar Even Matter Any More?

Do, 2013-05-16 12:02

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.

#targettedEOF {width:99%;font-family:"Open Sans", Helvetica, Arial, sans-serif;border:1px dotted #47B4DC;} #targettedEOF .targettedEOFcol {float:left;padding:20px;} #targettedEOF .targettedEOFbtn {clear:both;padding:0;} #targettedEOF h2 {margin-top:10px;} #targettedEOF .sptolbCTA {border:0 none;border-bottom:2px solid #85bb41;background-color:#91c352;color:white;margin:0;padding:1em 1em;vertical-align:middle;text-align:center;font-weight:700;font-size:17px;display:inline-block;line-height:0;text-shadow:-1px -1px 1px;cursor:pointer;text-decoration:none;} #targettedEOF .sptolbCTA:hover {color:white;} #targettedEOF .targettedEOFbtn p {padding:0;margin:0;} .cat_javascript #targettedEOF h2, .cat_cloudspring #targettedEOF h2 {font-size:1.267em;line-height:1.158em;margin:1.737em 0 0.579em 0;font-weight:bold;color:#0071D8;} .cat_javascript #targettedEOF, .cat_cloudspring #targettedEOF {font-size:1.5em;line-height:1.467em;width:100%;} .cat_javascript #targettedEOF ul, .cat_cloudspring #targettedEOF ul {list-style:square;margin:0 0 1.467em 1.467em;} Learn Responsive Web Design

SitePoint's ebook: Jump Start Responsive Web Design
Responsive Web Design: Key Concepts online course
Unlimited access to SitePoint Premium Content

Join Learnable $29 Includes all SitePoint books

We Talked JavaScript with the Experts – The Transcript

Do, 2013-05-16 02:11

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] <HAWK> Hey everyone – we’ll be kicking off shortly. Feel free to introduce yourselves in the mean time.

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

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

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

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

[21:30] <HAWK> 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] <HAWK> If Ara is answering someone else, I’ll queue them for him

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

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

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

[21:33] <Ara> 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] <Ara> …so it was one of those, “we’ll touch on this in more detail later” situations.

[21:33] <Ara> It happened a few times.

[21:33] <codepo8> it is tricky

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

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

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

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

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

[21:34] <MalCurtis> 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] <Ara> Sadly, I did use “Hello, world.” once or twice. But I think I slipped in a few “World dominations” as well.

[21:34] <Ara> ;)

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

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

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

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

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

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

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

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

[21:37] <codepo8> 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] <Ramy> so is simply javascript book which was i think in 2007 has obsoleted teaching way ?

[21:37] <Ara> 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] <HAWK> Ramy Simply JavaScript is still a valid resource but as you say, it was written a while back, hence this new book

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

[21:38] <Ramy> thanks HAWK for reply :)

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

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

[21:39] <Ara> 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] <Velochicdunord> So – which bits are best for which uses? The available libraries multiply monthly.

[21:39] <Ara> 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] <Ramy> Thanks Ara :)

[21:40] <HAWK> 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] <Ara> 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] <JoshySav> Just joined: One question: jQuery or plain javascript?

[21:41] <Ara> 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] <brick> I hear an echo

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

[21:42] <Ara> 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] <Ara> johnlacey: Yep. It’s really a decision to be made on a case by case basis.

[21:42] <Ara> brick: apologies :)

[21:42] <JoshySav> Awesome thanks :)

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

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

[21:43] <codepo8> 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] <HAWK> johnlacey – I’d say relying on it, considering these days so many people have it disabled ;)

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

[21:44] <Ara> 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] <codemaestro> I haven’t totally been following. Are the authors for or against modifying JavaScript object prototypes?

[21:45] <Velochicdunord> Thx codepo8.

[21:45] <codepo8> @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] <HAWK> Hi codemaestro – that hasn’t been covered. Let’s throw it to Ara

[21:45] <Ara> 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] <JoshySav> Ara Thanks :)

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

[21:47] <Ara> 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] <Ara> JoshySav: I assume you mean the other guests. :)

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

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

[21:47] <JoshySav> :)

[21:47] <Ara> HAWK: :)

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

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

[21:48] <HAWK> 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] <Ara> 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] <HAWK> The accessibility guys

[21:49] <codepo8> 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] <johnlacey> 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] <Velochicdunord> Ara – any recommended resources (besides your book, of course) regarding best practices for Javascript implementation and use? Does your book cover this?

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

[21:51] <Ara> 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] <codepo8> ^ that. I have cURL and I will use it!

[21:53] <codepo8> 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] <Ramy> 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] <HAWK> 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] <Ara> 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] <Ara> an IIFE (Immediately Invoked Function Expression) where the values for “undefined” and “window” are reinitialized.

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

[21:54] <codepo8> You lost him before?

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

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

[21:55] <Velochicdunord> 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] <HAWK> Ah – the old trout slap

[21:56] <mattevans> :-)

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

[21:57] <Ara> 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] <Ara> but is billed as being more friendly.

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

[21:58] <ralphm> 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] <Velochicdunord> Merci – yeah, found the JSLInt & Hint business. :)

[21:58] <codepo8> 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] <Ara> 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] <codepo8> @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] <Ara> 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] <Barney> to annoy someone is easily done… just say “MS Rulz!”

[22:00] <Velochicdunord> Barney:)

[22:00] <johnlacey> 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] <codepo8> 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] <ralphm> 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] <Barney> “..takes well deserved bow!”

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

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

[22:01] <johnlacey> @Ara — Thanks!

[22:02] <codepo8> 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] <Ara> and by free I mean “happy to.” :)

[22:02] <JC> 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] <codepo8> 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] <Velochicdunord> I second JC’s question.

[22:03] <codepo8> And of course sitepoint :)

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

[22:03] <codepo8> @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] <Ara> 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] <ralphm> @Ara That would be great. :-)

[22:04] <Ara> Velochicdunord ^^

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

[22:04] <Ara> Barney +1

[22:04] <codepo8> first time I see SIMPLY screamed

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

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

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

[22:05] <Ara> 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] <Barney> 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] <Velochicdunord> Any suggestions for open source to follow?

[22:05] <Ara> 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] <Barney> … is bucking for a free month!” *smiles*

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

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

[22:06] <Velochicdunord> Own a few. :)

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

[22:07] <Ara> 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] <Velochicdunord> Thx

[22:07] <Capt_Snickle_Fritz> Likewise HAWK

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

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

[22:08] <HAWK> Hehe, love it Ara

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

[22:08] <Ara> This is fun.

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

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

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

[22:09] <codepo8> http://vanillawebdiet.com

[22:09] <HAWK> 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] <Ara> codepo8: trick question, because there’s no JavaScript in it. ;)

[22:09] <codepo8> no

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

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

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

[22:10] <Ara> maybe paste it in jsfiddle?

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

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

[22:11] <ralphm> 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] <Ara> 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] <Velochicdunord> Second ralph’s question!

[22:11] <codepo8> http://jsfiddle.net/jp5PZ/

[22:11] <Velochicdunord> Thx, Ara.

[22:13] <HAWK> 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] <codepo8> this article is very good on prototype: http://dailyjs.com/2012/05/21/js101-prototype/

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

[22:14] <Ara> 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] <Velochicdunord> No – that’s good.

[22:14] <HAWK> Hey Jess

[22:14] <JC> Thank you for your answers

[22:15] <codepo8> 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] <scruggs> 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] <jessirwin> Hi HAWK

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

[22:16] <Ara> JC: my pleasure!

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

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

[22:17] <codepo8> 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] <codepo8> h being less reliable as it wasn’t supported on the hottest and newest devices (iOS)

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

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

[22:18] <Ara> Cheers, Barney!

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

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

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

[22:19] <scruggs> 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] <codepo8> 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] <codepo8> uage $x” are pretty futile.

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

[22:22] <NickY> 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] <Ara> 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] <Ara> 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] <codepo8> 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] <codepo8> (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] <Ara> 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] <Ara> 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] <HAWK> 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] <HAWK> No such thing as a dumb question when you’re learning

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

[22:26] <Ara> HAWK *boom!*

[22:26] <HAWK> hehe indeed

[22:26] <BluePandaStudios> 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] <NickY> That is a good point, but there are many functions in jquery that you still won’t even need to know that

[22:27] <johnlacey> @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] <codemaestro> Oh yeah. How many users are actually using ExtJS/Sencha Touch vs. jQuery Mobile?

[22:27] <scruggs> 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] <Ara> 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] <BluePandaStudios> Also, any feedback on libraries that you feel are “_must checkout_” (besides jQuery…)?

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

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

[22:29] <Ara> 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] <HAWK> Oh johnlacey, you’ve broken it.

[22:29] <codepo8> 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] <HAWK> Ok, I have – sorry! Fixing now.

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

[22:30] <scruggs> 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] <Ara> 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] <HAWK> Check back in an hour johnlacey – I’ll sort it straight after this session

[22:31] <codepo8> 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] <scruggs> Are there any nifty JS templating tools available?

[22:31] <Ara> 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] <HAWK> Whoa – the time has flown. We’re going to need to start wrapping things up so that I can cut Ara free

[22:32] <codepo8> 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] <HAWK> 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] <codepo8> scruggs yes – mustache.js and handlebars.js

[22:32] <johnlacey> Thanks @Ara @Hawk

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

[22:33] <Ara> 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] <HAWK> And same time next week we’re running a live CSS codefix session with Alex Walker

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

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

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

[22:33] <NickY> 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] <Ara> I hope I didn’t miss anyone’s questions. Please repeat them if I did.

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

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

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

[22:34] <Ara> 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] <HAWK> Much appreciated

[22:34] <codemaestro> @ara LOL

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

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

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

[22:36] <scruggs> 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] <Ara> 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] <NickY> HAWK – is there a way to get alerts without going to Facebook?

[22:36] <Ara> 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] <HAWK> NickY not at the moment, but you don’t need to have a Facebook account to use that form

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

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

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

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

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

#targettedEOF {width:99%;font-family:"Open Sans", Helvetica, Arial, sans-serif;border:1px dotted #47B4DC;} #targettedEOF .targettedEOFcol {float:left;padding:20px;} #targettedEOF .targettedEOFbtn {clear:both;padding:0;} #targettedEOF h2 {margin-top:10px;} #targettedEOF .sptolbCTA {border:0 none;border-bottom:2px solid #85bb41;background-color:#91c352;color:white;margin:0;padding:1em 1em;vertical-align:middle;text-align:center;font-weight:700;font-size:17px;display:inline-block;line-height:0;text-shadow:-1px -1px 1px;cursor:pointer;text-decoration:none;} #targettedEOF .sptolbCTA:hover {color:white;} #targettedEOF .targettedEOFbtn p {padding:0;margin:0;} .cat_javascript #targettedEOF h2, .cat_cloudspring #targettedEOF h2 {font-size:1.267em;line-height:1.158em;margin:1.737em 0 0.579em 0;font-weight:bold;color:#0071D8;} .cat_javascript #targettedEOF, .cat_cloudspring #targettedEOF {font-size:1.5em;line-height:1.467em;width:100%;} .cat_javascript #targettedEOF ul, .cat_cloudspring #targettedEOF ul {list-style:square;margin:0 0 1.467em 1.467em;} Learn Responsive Web Design

SitePoint's ebook: Jump Start Responsive Web Design
Responsive Web Design: Key Concepts online course
Unlimited access to SitePoint Premium Content

Join Learnable $29 Includes all SitePoint books

Randomizing Sliding Puzzle Tiles

Mi, 2013-05-15 15:10

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.

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.

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.

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.

#targettedEOF {width:99%;font-family:"Open Sans", Helvetica, Arial, sans-serif;border:1px dotted #47B4DC;} #targettedEOF .targettedEOFcol {float:left;padding:20px;} #targettedEOF .targettedEOFbtn {clear:both;padding:0;} #targettedEOF h2 {margin-top:10px;} #targettedEOF .sptolbCTA {border:0 none;border-bottom:2px solid #85bb41;background-color:#91c352;color:white;margin:0;padding:1em 1em;vertical-align:middle;text-align:center;font-weight:700;font-size:17px;display:inline-block;line-height:0;text-shadow:-1px -1px 1px;cursor:pointer;text-decoration:none;} #targettedEOF .sptolbCTA:hover {color:white;} #targettedEOF .targettedEOFbtn p {padding:0;margin:0;} .cat_javascript #targettedEOF h2, .cat_cloudspring #targettedEOF h2 {font-size:1.267em;line-height:1.158em;margin:1.737em 0 0.579em 0;font-weight:bold;color:#0071D8;} .cat_javascript #targettedEOF, .cat_cloudspring #targettedEOF {font-size:1.5em;line-height:1.467em;width:100%;} .cat_javascript #targettedEOF ul, .cat_cloudspring #targettedEOF ul {list-style:square;margin:0 0 1.467em 1.467em;} Learn Responsive Web Design

SitePoint's ebook: Jump Start Responsive Web Design
Responsive Web Design: Key Concepts online course
Unlimited access to SitePoint Premium Content

Join Learnable $29 Includes all SitePoint books

Take Your JavaScript to the Next Level with the Experts

Mi, 2013-05-15 14:29

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.

#targettedEOF {width:99%;font-family:"Open Sans", Helvetica, Arial, sans-serif;border:1px dotted #47B4DC;} #targettedEOF .targettedEOFcol {float:left;padding:20px;} #targettedEOF .targettedEOFbtn {clear:both;padding:0;} #targettedEOF h2 {margin-top:10px;} #targettedEOF .sptolbCTA {border:0 none;border-bottom:2px solid #85bb41;background-color:#91c352;color:white;margin:0;padding:1em 1em;vertical-align:middle;text-align:center;font-weight:700;font-size:17px;display:inline-block;line-height:0;text-shadow:-1px -1px 1px;cursor:pointer;text-decoration:none;} #targettedEOF .sptolbCTA:hover {color:white;} #targettedEOF .targettedEOFbtn p {padding:0;margin:0;} .cat_javascript #targettedEOF h2, .cat_cloudspring #targettedEOF h2 {font-size:1.267em;line-height:1.158em;margin:1.737em 0 0.579em 0;font-weight:bold;color:#0071D8;} .cat_javascript #targettedEOF, .cat_cloudspring #targettedEOF {font-size:1.5em;line-height:1.467em;width:100%;} .cat_javascript #targettedEOF ul, .cat_cloudspring #targettedEOF ul {list-style:square;margin:0 0 1.467em 1.467em;} Learn Responsive Web Design

SitePoint's ebook: Jump Start Responsive Web Design
Responsive Web Design: Key Concepts online course
Unlimited access to SitePoint Premium Content

Join Learnable $29 Includes all SitePoint books

What’s New in Firefox 21

Mi, 2013-05-15 10:03

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…

<main> Element Support

The HTML5 <main> 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.

<article> <p>This paragraph is the standard page color.</p> </article> <aside> <style scoped> p { color: red; } </style> <p>Only paragraphs within this aside element are red.</p> </aside>

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.

#targettedEOF {width:99%;font-family:"Open Sans", Helvetica, Arial, sans-serif;border:1px dotted #47B4DC;} #targettedEOF .targettedEOFcol {float:left;padding:20px;} #targettedEOF .targettedEOFbtn {clear:both;padding:0;} #targettedEOF h2 {margin-top:10px;} #targettedEOF .sptolbCTA {border:0 none;border-bottom:2px solid #85bb41;background-color:#91c352;color:white;margin:0;padding:1em 1em;vertical-align:middle;text-align:center;font-weight:700;font-size:17px;display:inline-block;line-height:0;text-shadow:-1px -1px 1px;cursor:pointer;text-decoration:none;} #targettedEOF .sptolbCTA:hover {color:white;} #targettedEOF .targettedEOFbtn p {padding:0;margin:0;} .cat_javascript #targettedEOF h2, .cat_cloudspring #targettedEOF h2 {font-size:1.267em;line-height:1.158em;margin:1.737em 0 0.579em 0;font-weight:bold;color:#0071D8;} .cat_javascript #targettedEOF, .cat_cloudspring #targettedEOF {font-size:1.5em;line-height:1.467em;width:100%;} .cat_javascript #targettedEOF ul, .cat_cloudspring #targettedEOF ul {list-style:square;margin:0 0 1.467em 1.467em;} Learn Responsive Web Design

SitePoint's ebook: Jump Start Responsive Web Design
Responsive Web Design: Key Concepts online course
Unlimited access to SitePoint Premium Content

Join Learnable $29 Includes all SitePoint books

Mobile Website Security

Di, 2013-05-14 15:30

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.

#targettedEOF {width:99%;font-family:"Open Sans", Helvetica, Arial, sans-serif;border:1px dotted #47B4DC;} #targettedEOF .targettedEOFcol {float:left;padding:20px;} #targettedEOF .targettedEOFbtn {clear:both;padding:0;} #targettedEOF h2 {margin-top:10px;} #targettedEOF .sptolbCTA {border:0 none;border-bottom:2px solid #85bb41;background-color:#91c352;color:white;margin:0;padding:1em 1em;vertical-align:middle;text-align:center;font-weight:700;font-size:17px;display:inline-block;line-height:0;text-shadow:-1px -1px 1px;cursor:pointer;text-decoration:none;} #targettedEOF .sptolbCTA:hover {color:white;} #targettedEOF .targettedEOFbtn p {padding:0;margin:0;} .cat_javascript #targettedEOF h2, .cat_cloudspring #targettedEOF h2 {font-size:1.267em;line-height:1.158em;margin:1.737em 0 0.579em 0;font-weight:bold;color:#0071D8;} .cat_javascript #targettedEOF, .cat_cloudspring #targettedEOF {font-size:1.5em;line-height:1.467em;width:100%;} .cat_javascript #targettedEOF ul, .cat_cloudspring #targettedEOF ul {list-style:square;margin:0 0 1.467em 1.467em;} Learn Responsive Web Design

SitePoint's ebook: Jump Start Responsive Web Design
Responsive Web Design: Key Concepts online course
Unlimited access to SitePoint Premium Content

Join Learnable $29 Includes all SitePoint books

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

Di, 2013-05-14 13:30

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

#targettedEOF {width:99%;font-family:"Open Sans", Helvetica, Arial, sans-serif;border:1px dotted #47B4DC;} #targettedEOF .targettedEOFcol {float:left;padding:20px;} #targettedEOF .targettedEOFbtn {clear:both;padding:0;} #targettedEOF h2 {margin-top:10px;} #targettedEOF .sptolbCTA {border:0 none;border-bottom:2px solid #85bb41;background-color:#91c352;color:white;margin:0;padding:1em 1em;vertical-align:middle;text-align:center;font-weight:700;font-size:17px;display:inline-block;line-height:0;text-shadow:-1px -1px 1px;cursor:pointer;text-decoration:none;} #targettedEOF .sptolbCTA:hover {color:white;} #targettedEOF .targettedEOFbtn p {padding:0;margin:0;} .cat_javascript #targettedEOF h2, .cat_cloudspring #targettedEOF h2 {font-size:1.267em;line-height:1.158em;margin:1.737em 0 0.579em 0;font-weight:bold;color:#0071D8;} .cat_javascript #targettedEOF, .cat_cloudspring #targettedEOF {font-size:1.5em;line-height:1.467em;width:100%;} .cat_javascript #targettedEOF ul, .cat_cloudspring #targettedEOF ul {list-style:square;margin:0 0 1.467em 1.467em;} Learn Responsive Web Design

SitePoint's ebook: Jump Start Responsive Web Design
Responsive Web Design: Key Concepts online course
Unlimited access to SitePoint Premium Content

Join Learnable $29 Includes all SitePoint books

CSS3 Pong: Insane Things to Do with CSS #17

Di, 2013-05-14 13:01

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 Animation1). Setting up the court

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

Here’s our starting markup:

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.

<h1>CSS PONG</h1><div id="court"> <div id="platform"> <span id="ball"></span> <span id="player1"></span> <span id="player2"></span> </div> </div> #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.

<h1>CSS PONG</h1> <div id="court"> <div id="court"> <span id="targetzone"></span> <div id="horizontal"> <span id="ball"></span> <span id="player2"></span> </div> </div> #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?

#targettedEOF {width:99%;font-family:"Open Sans", Helvetica, Arial, sans-serif;border:1px dotted #47B4DC;} #targettedEOF .targettedEOFcol {float:left;padding:20px;} #targettedEOF .targettedEOFbtn {clear:both;padding:0;} #targettedEOF h2 {margin-top:10px;} #targettedEOF .sptolbCTA {border:0 none;border-bottom:2px solid #85bb41;background-color:#91c352;color:white;margin:0;padding:1em 1em;vertical-align:middle;text-align:center;font-weight:700;font-size:17px;display:inline-block;line-height:0;text-shadow:-1px -1px 1px;cursor:pointer;text-decoration:none;} #targettedEOF .sptolbCTA:hover {color:white;} #targettedEOF .targettedEOFbtn p {padding:0;margin:0;} .cat_javascript #targettedEOF h2, .cat_cloudspring #targettedEOF h2 {font-size:1.267em;line-height:1.158em;margin:1.737em 0 0.579em 0;font-weight:bold;color:#0071D8;} .cat_javascript #targettedEOF, .cat_cloudspring #targettedEOF {font-size:1.5em;line-height:1.467em;width:100%;} .cat_javascript #targettedEOF ul, .cat_cloudspring #targettedEOF ul {list-style:square;margin:0 0 1.467em 1.467em;} Learn Responsive Web Design

SitePoint's ebook: Jump Start Responsive Web Design
Responsive Web Design: Key Concepts online course
Unlimited access to SitePoint Premium Content

Join Learnable $29 Includes all SitePoint books

Windows 8.1: Back to Basics?

Mo, 2013-05-13 13:12

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?

#targettedEOF {width:99%;font-family:"Open Sans", Helvetica, Arial, sans-serif;border:1px dotted #47B4DC;} #targettedEOF .targettedEOFcol {float:left;padding:20px;} #targettedEOF .targettedEOFbtn {clear:both;padding:0;} #targettedEOF h2 {margin-top:10px;} #targettedEOF .sptolbCTA {border:0 none;border-bottom:2px solid #85bb41;background-color:#91c352;color:white;margin:0;padding:1em 1em;vertical-align:middle;text-align:center;font-weight:700;font-size:17px;display:inline-block;line-height:0;text-shadow:-1px -1px 1px;cursor:pointer;text-decoration:none;} #targettedEOF .sptolbCTA:hover {color:white;} #targettedEOF .targettedEOFbtn p {padding:0;margin:0;} .cat_javascript #targettedEOF h2, .cat_cloudspring #targettedEOF h2 {font-size:1.267em;line-height:1.158em;margin:1.737em 0 0.579em 0;font-weight:bold;color:#0071D8;} .cat_javascript #targettedEOF, .cat_cloudspring #targettedEOF {font-size:1.5em;line-height:1.467em;width:100%;} .cat_javascript #targettedEOF ul, .cat_cloudspring #targettedEOF ul {list-style:square;margin:0 0 1.467em 1.467em;} Learn Responsive Web Design

SitePoint's ebook: Jump Start Responsive Web Design
Responsive Web Design: Key Concepts online course
Unlimited access to SitePoint Premium Content

Join Learnable $29 Includes all SitePoint books

Happy 10th Birthday CSS Zen Garden

Fr, 2013-05-10 12:23

CSS Zen Garden is ten years old. If you started coding recently you may not have heard about the site, but Zen Garden was a defining moment in web history.

Zen’s developer, Dave Shea, had a simple objective: to illustrate why CSS should be taken seriously and inspire designers. The concept provided a static HTML page and allowed developers to apply and submit their own styles. The only restrictions were that the CSS should validate and the resulting page worked in IE5+ and Mozilla (Firefox’s predecessor).

The number of submissions increased exponentially and there was a sudden realization that CSS could do more than just apply color to H1 titles. To put it into historical context, by 2003 CSS techniques had been viable for several years but tables and spacer GIFs remained the predominant page layout methods. Tables worked in all browsers and were well understood.

Zen Garden did for CSS what Jesse James Garrett’s A New Approach to Web Applications did for Ajax a couple of years later. The technologies already existed, but it required a spark to ignite developer passion and revolutionize its application.

Zen Garden 2013

Zen Garden achieved its goal — who isn’t using CSS layouts now? To celebrate an amazing ten years, Dave Shea has re-released Zen Garden, put the code on GitHub and started work on a new HTML5 version. A lot has happened in the past decade, so the modern requirements permit:

CSS3 transitions, transformations, animations, shadows, gradients and effects. Remember to prefix properties where necessary but Webkit-only designs will be “discarded with prejudice”!
Responsive Web Designs
Web fonts
Support for IE9+, recent versions of Chrome, Firefox and Safari, and iOS/Android

New designs can be submitted now. Please send us the URLs of your groundbreaking examples or designs you like.

#targettedEOF {width:99%;font-family:"Open Sans", Helvetica, Arial, sans-serif;border:1px dotted #47B4DC;} #targettedEOF .targettedEOFcol {float:left;padding:20px;} #targettedEOF .targettedEOFbtn {clear:both;padding:0;} #targettedEOF h2 {margin-top:10px;} #targettedEOF .sptolbCTA {border:0 none;border-bottom:2px solid #85bb41;background-color:#91c352;color:white;margin:0;padding:1em 1em;vertical-align:middle;text-align:center;font-weight:700;font-size:17px;display:inline-block;line-height:0;text-shadow:-1px -1px 1px;cursor:pointer;text-decoration:none;} #targettedEOF .sptolbCTA:hover {color:white;} #targettedEOF .targettedEOFbtn p {padding:0;margin:0;} .cat_javascript #targettedEOF h2, .cat_cloudspring #targettedEOF h2 {font-size:1.267em;line-height:1.158em;margin:1.737em 0 0.579em 0;font-weight:bold;color:#0071D8;} .cat_javascript #targettedEOF, .cat_cloudspring #targettedEOF {font-size:1.5em;line-height:1.467em;width:100%;} .cat_javascript #targettedEOF ul, .cat_cloudspring #targettedEOF ul {list-style:square;margin:0 0 1.467em 1.467em;} Learn Responsive Web Design

SitePoint's ebook: Jump Start Responsive Web Design
Responsive Web Design: Key Concepts online course
Unlimited access to SitePoint Premium Content

Join Learnable $29 Includes all SitePoint books

Your Guide to the 10-Minute Homepage Copy Review

Do, 2013-05-09 14:39

Ready to take your new service to the world?

Over the last few weeks, we’ve looked at a handful of techniques you can use to communicate more clearly about your product or service as you launch it:

And we’ve seen how you can build all these into a concise but compelling launch website.

Now, you may have done all these things as well as you can. But does that mean the copy you’ve written about your new product or service is guaranteed to communicate what you want it to?

Well, no. But there are a few steps you can take to get an idea of how well your copy succeeds. The first one? A copy review.

Did you just roll your eyes? Don’t worry: the copy review is less hassle than you think.

The ten-minute review

That’s right: your review of your homepage copy need take no more than ten minutes.

After all, you don’t want your users spending half an hour wading through copy and videos and free-trial-live-tour-click-to-chat messaging before they get it. Right?

So why would it take you that long? Let’s get this done.

1. Come with fresh eyes

Don’t try to review your copy straight after you’ve written it.

Give it at least a half-day (if you’re on a super-tight timeframe), but ideally, leave a day or three in between the writing and the review.

This will make sure you’re in a different headspace—and that you have the much-touted “fresh eyes”—with which to review your copy.

Better yet, try consciously to put yourself in your customers’ shoes before you begin.

2. Print the laid-out page (1 minute)

Yes, I did just say the P word.

Why would you print your web copy? After all, your users are going to read it on-screen, so you should review it in the same environment, right?

Not quite. The reason you need to print the page is the same reason you’re reviewing the laid-out page, rather than going over your copy as you drafted it in Word or Docs.

Because you’re looking at how it communicates to customers.

You need to see the text in the context of the page layout and visuals. But to review the coherence of the messaging overall—to make sure the thing’s complete, and you’re not missing anything along the way—you need to see it all at once, in full.

Of course, you should also review your content on-screen. But the full review starts with a printed page.

3. Take it in (2 minutes)

After all the work you’ve done to create the page, you’ll know in your own mind exactly what you’re trying to communicate to readers about your brand, and your product or service.

So take the page in in its entirety. Look it over; read it over; scan; skip. Whatever you want to do to take the page in, do it.

Now, as a user, how excited would you be about responding to the page’s CTA after taking in this page?

Are the key messages you wanted to communicate being expressed clearly? Do you feel they’re coming across the right way—in a friendly tone of voice, for example, rather than as directions or instructions?

What feeling does the page give you overall? Does it say what you want to say about your brand and this product or service?

You’ve just answered a bunch of important questions about messaging and sense. Rather than trying to solve any problems you’ve uncovered, make note of them and move on.

4. Spot problems (3 minutes)

It’s time to get a bit more specific. Go over the page again, asking yourself these kinds of questions:

Does anything look weird?
Does anything sound funny?
Does anything grate on me?

The idea here is to tap into your gut feel and hunches. You’re not looking for issues at pixel level: you’re looking at issues of visual communication.

These questions can turn up all kinds of problems—from layout issues, to mismatches between the sense of copy and its accompanying images, to clumsy expression.

On the page itself, mark up those things that are bothering you. Again, you don’t have to have solutions just yet—the important thing is to note any problems.

5. Check consistency (4 minutes)

At this point, it’s time to get into the nitty gritty of the key aspects of your communication.

Check firstly that you’ve used your brand vocabulary consistently.

If you haven’t, look at why that is. It might be natural error or personal preference, or it might be that a word you’ve included in there isn’t as useful or natural as another would be, in which case, your brand vocab may need revising.

Mark up any corrections you need to make.

Next, make sure your messaging is complete. Think about the things you wanted to say when you started writing the page. Have you communicated all the benefits you want to? What about features—are they easily accessible?

Is there a logical flow to the page, and between each portion of it? What about between each sentence? Does each piece of information build on the others—and is the page scannable enough for each to succeed independently, too?

Is there anything that’s missing? Now that you’re seeing the page in its entirety, can you think of anything that customers are likely to want to know that you’ve left out?

This review will help you make the page as communicative and targeted as possible, and let you work out how to make ancillary information readily accessible if it’s not to be included within the copy of the home page.

Finally, look at your messaging and see that you’ve included links wherever they’re appropriate.

If I’m working with an unusual or specific brand vocabulary, I might link key terminology to FAQs that explain those concepts. This can be especially helpful if you’re targeting users who are new to the product category or the brand.

Make sure that your CTAs look clickable, and that the way clickable elements are presented is consistent, too.

Time’s up

That’s it: your ten-minute review is done. At this point, you should have a printed copy of your home page that’s got notes and scribbles here and there.

You’ll also have a good idea of how well you think the page communicates what different types of users want to know—and feel—before they’ll respond to your CTA.

And you might have a few things to tweak or revisit before you launch, too.

Of course, there’s one issue that we haven’t discussed in this post—an elephant in the room, if you will—and that’s spelling, punctuation and grammar.

Did you check that in your review? Are there errors you’re overlooking … and will your users pick them up and point them out?

We’ll avoid that unfortunate eventuality next week, when we see just how much the rules of language actually matter in the online context. In the meantime, let us know in the comments what issues your homepage review turns up.

#targettedEOF {width:99%;font-family:"Open Sans", Helvetica, Arial, sans-serif;border:1px dotted #47B4DC;} #targettedEOF .targettedEOFcol {float:left;padding:20px;} #targettedEOF .targettedEOFbtn {clear:both;padding:0;} #targettedEOF h2 {margin-top:10px;} #targettedEOF .sptolbCTA {border:0 none;border-bottom:2px solid #85bb41;background-color:#91c352;color:white;margin:0;padding:1em 1em;vertical-align:middle;text-align:center;font-weight:700;font-size:17px;display:inline-block;line-height:0;text-shadow:-1px -1px 1px;cursor:pointer;text-decoration:none;} #targettedEOF .sptolbCTA:hover {color:white;} #targettedEOF .targettedEOFbtn p {padding:0;margin:0;} .cat_javascript #targettedEOF h2, .cat_cloudspring #targettedEOF h2 {font-size:1.267em;line-height:1.158em;margin:1.737em 0 0.579em 0;font-weight:bold;color:#0071D8;} .cat_javascript #targettedEOF, .cat_cloudspring #targettedEOF {font-size:1.5em;line-height:1.467em;width:100%;} .cat_javascript #targettedEOF ul, .cat_cloudspring #targettedEOF ul {list-style:square;margin:0 0 1.467em 1.467em;} Learn Responsive Web Design

SitePoint's ebook: Jump Start Responsive Web Design
Responsive Web Design: Key Concepts online course
Unlimited access to SitePoint Premium Content

Join Learnable $29 Includes all SitePoint books

Backbone.js – From the Mouths of Experts

Do, 2013-05-09 02:05

Mornings are just starting to get pretty cold and nasty down here in NZ with the onset of winter, and this morning was no exception. Getting out of bed was a pleasure however, as I spent the first hour of my day hosting the lovely Andy Appleton as the latest expert in our Talk with the Experts live chat sessions. If you haven’t heard of Andy, you can check him out here in his new Learnable course, which just happens to be on Backbone…

This morning’s session was one of the quieter ones that I’ve run, but the calibre of chat was in no way a reflection of that. If you missed the session because you had something else on, fear not – you’ll find the transcript below.

Before you get into it though, here are a couple of links of note.
Keep an eye out for Andy’s upcoming course – Backbone.js App Development
You can sign up for email notifications of future Experts sessions here or view a list of upcoming sessions here.

That’s it for the admin stuff – here is the transcript:

[19:58] <HAWK> So anyway, welcome Andy – thanks for your time

[19:58] <Andy> hey, no problem!

[19:58] <HAWK> So we’ll officially kick off in a couple of minutes, but in the mean time, feel free to introduce yourselves

[19:58] <HAWK> Is anyone doing Andy’s course?

[20:00] <HAWK> https://learnable.com/courses/backbone-js-a-practical-beginner-s-guide-2742

[20:00] <Andrew> I have tinkered with Backbone a little in the past, including making an HTML5-only audio/video player with no backend. ;)

[20:00] <Jerry> Thanks Hawk

[20:01] <HAWK> No probs – if you’re a Learnable member, keep an eye out for a followup course soon - https://learnable.com/courses/backbone-js-app-development-2741

[20:01] <Andrew> (Joke that has to be made:) You’re OK Jerry. You’re OK. ;)

[20:01] <Jerry> LOL

[20:02] <Andrew> Nice Hawk, may look into that.

[20:02] <HAWK> So we may as well kick off – I’ll be moderating the session this morning (although it’s unlikely to need moderation) but the format is a bit of a free for all

[20:02] <Andrew> Not quite a beginner, not nearly a pro. ;)

[20:02] <HAWK> You throw questions at Andy and he answers them!

[20:02] <HAWK> Does anyone here already use Backbone a bit (aside from Andrew)

[20:03] <Jerry> Not even a beginner yet, so I have no questions at this point

[20:03] <HAWK> That’s cool. Lurking is a great place to start.

[20:04] <HAWK> What about the rest of you?

[20:04] <Doug> Nope.

[20:04] <BrianMann> Yes, I use Backbone and also have a tutorial series covering it’s use, www.backbonerails.com

[20:05] <BrianMann> yah, just jumped in to see what this talk with the experts was about

[20:05] <Andrew> Haha, nice. Running the gambit from beginners to pros!

[20:06] <Jerry> Cool! Thanks Brian. This looks like it may be helpful

[20:06] <Andrew> Andy what do you use for your backend?

[20:06] <Andy> depends really but I’ve used Rails and Node mainly

[20:06] <Andrew> I’ve tried a little with Rails, been wanting to try with Node.

[20:06] <HAWK> How did you hear about the session BrianMann?

[20:07] <Andy> yeah, I guess it depends what you’re more used to

[20:07] <BrianMann> I watch #Backbone topics in Twitter, so somebody tweeted about it.

[20:08] <HAWK> We run these sessions weekly on different topics

[20:09] <Andrew> Andy – One question I had was about views.

[20:09] <Andy> Andrew I saw a really nice looking JSON API framework for node recently - http://balderdashy.github.io/sails/

[20:10] <Andrew> Ooh, neat. I’ll look into that. ;)

[20:10] <Andrew> So for my SPA video/audio player I made, I had one view (named Index) that basically just called the templates for a bunch of other things.

[20:11] <Andrew> Is there a better way to structure it than 6-7 template calls to different pieces of the page?

[20:11] <Andy> yeah, I’d tend to prefer a new view for each template as a general rule

[20:12] <Andy> that way it’s easier to deal with events and re-rendering individual templates

[20:12] <Andy> so have a top level view which instantiates child views as needed

[20:13] <Andrew> Looking at my old code again. Looks like each template was for a separate ‘page’, to lay the scaffolding as it were for the other Views.

[20:13] <HAWK> Welcome Ramsay – this is a free for all so please jump in with questions if you have them

[20:13] <Andrew> I may have been trying to do too much in one module. ;)

[20:14] <Andy> sounds like it – a router is probably the place for that state management

[20:14] <Andrew> Yeah, makes sense.

[20:15] <Andy> then you can have a top level view for each page

[20:16] <Andrew> Switching gears slightly, most of the devs I work with are backend people. What should I do to convince them to do more front-end stuff, or at least the value of MVC Javascript?

[20:16] <Andy> It’s tricky because it really depends on what you’re building

[20:17] <BrianMann> In substantial applications, I’ve found using a mediator object (commonly known as a controller) helps with workflow. This object is primarily used to instantiate the views – telling them where to go, and ensures they have access to models/collections.

[20:17] <Andy> I think it’s a really good fit for application type sites but not for content heavy sites (e.g. a blog)

[20:18] <Andrew> A lot of our apps are very data heavy, but I don’t think enough weight’s being given to front-end UI/UX.

[20:19] <HAWK> FYI I’ll be posting a transcript of this session up on sitepoint.com later today

[20:19] <HAWK> If anyone has any useful resources, then please throw them in

[20:20] <thomfoolery> is there a presentation to along with this? or is this just an open chat forum?

[20:20] <Andy> yeah there’s a course at https://learnable.com/courses/backbone-js-a-practical-beginner-s-guide-2742

[20:21] <HAWK> No presentation, it’s just an open chat – an opportunity to ask any questions, raise any issues etc

[20:21] <Andy> and a sample app too - https://github.com/mrappleton/localgram

[20:23] <thomfoolery> So I understand MVC, and I understand Backbone.js is an MV library/framework does this mean that one creates their own controllers, how ever way they wish?

[20:24] <Andy> it’s something people take different approaches to

[20:24] <thomfoolery> or that control should be delegated to events handled within each View?

[20:24] <Andy> the router object is kind of like a controller

[20:24] <thomfoolery> actually events seem to also be able to be handled by models as well

[20:24] <Andy> well you can use events to send messages between anything – models, views, collections or routers

[20:24] <thomfoolery> I see that, but lets say in the case of business logic. Should this be applied to the event handlers

[20:25] <Andy> yeah I see

[20:25] <thomfoolery> or should you create your own control structures to handle things like this

[20:25] <Andy> personally I’d make that a method on the View object

[20:25] <Andy> which then interacts with a model when necessary

[20:26] <thomfoolery> yeah, I’ve done that, but I feel like the view then become these “hybrid” things

[20:26] <thomfoolery> view+controllers

[20:26] <Andy> yeah I know what you mean

[20:26] <Andy> you end up with really fat views[20:26] <thomfoolery> yeah

[20:26] <BrianMann> going with a bona fide controller keeps the logic decoupled from your views, and your views then only manage view state, they react to DOM level events and bubble those up to controllers, who then decide on application workflow

[20:27] <thomfoolery> I really like the seperation that a true MVC pardigm makes

[20:27] <thomfoolery> yeah, so I have often opted for creating my own control structures

[20:27] <BrianMann> Having an object mediate the multiple events views emit allows you to orchestrate the state of your application at a higher level

[20:28] <Andy> I haven’t used it but I think http://marionettejs.com/ has that concept

[20:28] <Andy> https://github.com/marionettejs/backbone.marionette/blob/master/docs/marionette.controller.md

[20:28] <thomfoolery> yeah, allow the view to capture UI events, let the model capture data events, and then just pass these along to your own controllers when need be

[20:28] <Andrew> Brian’s used it.

[20:29] <BrianMann> Oh yes I am a huge Marionette fan. I wouldn’t code Backbone without it :P

[20:29] <thomfoolery> I haven’t moved up to marionette yet, seems like it has to many dependacies to begin with

[20:29] <BrianMann> It offers all the infrastructure pieces Backbone doesn’t have.

[20:29] <BrianMann> Marionette doesn’t have any dependencies, it’s actually comprised of many smaller independently functioning parts

[20:30] <thomfoolery> I see

[20:30] <BrianMann> you can choose to use one or more pieces, or the whole thing

[20:30] <thomfoolery> oh, the site said “

[20:30] <thomfoolery> Prerequisites

[20:30] <thomfoolery> Marionette relies on Underscore, Backbone, jQuery, and various other libraries as it’s foundation.”

[20:30] <Andy> maybe the thing to do is pull in the controller object as it seems to sole your specific pain and then go from there

[20:30] <BrianMann> right, its the same thing Backbone depends on, not any more

[20:31] <Andrew> I’ve wondered if it would make sense to become more familiar with vanilla Backbone before moving to Marionette?

[20:31] <thomfoolery> oh, I didnt understand the “various other libraries” part

[20:31] <thomfoolery> yeah, I’ve played with backbone and I like it

[20:31] <thomfoolery> I just havent moved up to marionette yet

[20:31] <BrianMann> Andrew it always helps understanding what parts of Backbone that Marionette is helping you out with

[20:31] <Warrdnez> how well does backbone.js with CMS’s?

[20:31] <Andrew> Or is it worth it to become accustomed to using “Backbone+” from the get go?

[20:32] <Warrdnez> drupal or wordpress

[20:32] <thomfoolery> backbone, is a front-end frameowrk that works well with REST webservices

[20:32] <Andy> Warrdnez I suppose it depends how/if the CMS can present a JSON API

[20:33] <BrianMann> thomfoolery Andrew I authored some free screencasts that walk you through typical Backbone workflows, and then applying Marionette into the mix, how it reduces boilerplate, and enhances development

[20:33] <thomfoolery> yeah, backbone allows one to sync front-end data models, with it’s backend coutnerparts

[20:33] <Andy> if you can make the CMS present its data in a restful way then it should work

[20:33] <BrianMann> Marionette is really a series of best practices and patterns working with Backbone over a long period of time, wrapped up in a well documented package, at the end of the day it stays out of your way and paves the way for building really awesome backbone apps

[20:33] <Marcin> What is the best pattern to authorize user-session by backbone? I mean by RESTful backend

[20:33] <thomfoolery> it wouldnt really make sense with wordpress or a blog unless you were creating some dynamic blogging applicaiton

[20:34] <thomfoolery> Oauth?

[20:35] <Andy> I quite like having a separate page for login which drops a session cookie which the actual JS app can use

[20:35] <Andrew> Andy – I noticed in your Localgram example app, you have an app.js file that basically doesn’t do much beyond require the router.js file. What’s the reason for separating out?

[20:35] <Andy> I’ve found managing all of the auth and session logic in one page means dealing with an awful lot of stuff for not much benefit

[20:36] <Andy> rather than just defining the router in app.js you mean?

[20:36] <Andrew> right.

[20:36] <Andy> a larger app might have more config and bootstrapping to do which could start to get messy

[20:37] <Andy> then you’re mixing the router module with all of that stuff

[20:37] <Andrew> Ah, so you have configuration in the app.js and separate the routing unto itself.

[20:37] <Andy> yeah

[20:40] <Andrew> I looked at the Sails page you linked earlier (http://balderdashy.github.io/sails/)

[20:40] <Marcin> that is the case – authorization by session cookie can not be enough secure, sa Oauth is worth checking

[20:40] <Andrew> I like the free JSON API’s they give you.

[20:40] <Andy> yeah it looks nice

[20:41] <Andy> I’ve also used Rails API at work which is pretty good https://github.com/rails-api/rails-api

[20:41] <Andy> (though I’d pick something Node based given the choice ;)

[20:41] <Andrew> Preferred DB when using Node?

[20:42] <Andrew> I’ve looked at MongoDB and ElasticSearch. Mongo seems to intermittently have data loss issues.

[20:42] <Andy> Mongo or Postgres depending on what it’s for

[20:43] <Andrew> Thanks for your time Andy. I’m out for today folks. :)

[20:43] <Andy> DBs aren’t my specialty but at GoCardless we use Postgres for our app data, mongo for data that we’ll be analysing a lot and ElasticSearch for searching big sets quickly

[20:43] <thomfoolery> Anyone used Elastic Search with Node, I’ve heard it’s frighteningly fast

[20:43] <Andrew> We use it with Rails via Tire currently.

[20:43] <Andy> bye Andrew

[20:43] <Andrew> It’s nice. :)

[20:43] <Andrew> Bye!

[20:44] <Andy> same here – it’s mega quick but it’s not really meant as a general purpose DB as far as I can tell

[20:47] <BrianMann> is this chat using websockets?

[20:47] <BrianMann> haha it’s using Backbone i see

[20:47] <thomfoolery> niiiice

[20:47] * Andy opens web inspector

[20:47] <BrianMann> 0.9.2 though, hah

[20:48] <HAWK> To be fair, this is only it’s second run. Slated for more work next week.

[20:48] <HAWK> I’m pretty happy with it though.

[20:48] <Andy> seems to work nicely

[20:48] <BrianMann> yah can’t complain, i’ve done some real time with Pusher

[20:49] <BrianMann> it’s been really easy to work into an existing app

[20:54] <HAWK> Has anyone got any further Backbone questions?

[20:54] <Andy> wow, the time has flown!

[20:55] <HAWK> It always does

[20:56] <HAWK> And if no one else wants to jump in with anything then I’ll cut you loose Andy, so you can get on with your evening

[20:56] <BrianMann> oh the good ol’ days of IRC

[20:56] <HAWK> indeed

[20:59] <BrianMann> Alright bye all

[20:59] <HAWK> See ya BrianMann – thanks for dropping in

[20:59] <HAWK> Hey Andy – thanks so much for your time

[20:59] <Jerry> Thanks Andy, Brian, and Hawk

[21:00] <HAWK> Sorry the session was a bit on the quiet side, but it looks like it was beneficial for a few people

[21:00] <Andy> no problem, catch you all later!

[21:00] <thomfoolery> thanks!

How to Create a Toggle Switch in CSS3

Mi, 2013-05-08 14:59

You’ll find mobile-interface-like toggle switches in various places around the web but I wanted to improve existing examples.

Specifically, I wanted a solution which:

progressively enhanced standard checkboxes
did not use superfluous HTML tags or attributes
supported input labels
used only CSS without images or JavaScript
used relative units so the controls are resizable/responsive
had some slick animation
ideally worked in a range of mobile browsers, and
degraded gracefully so it remained usable in all browsers

View the demonstration page and the HTML/CSS code…

The HTML

We require a input checkbox and a label:

<div> <input type="checkbox" id="switch1" name="switch1" class="switch" /> <label for="switch1">first switch</label> </div>

The input has a class of “switch” assigned. This ensures we can retain normal checkboxes should we need them.

HTML purists will be horrified to see a wrapper div but it’s only necessary if you require two or more toggle switches — you cannot have more than one switch (or further labels) in the the same parent container. Besides, you’ll probably need div wrappers to separate form elements anyway.

The HTML will render well in most browsers with minimal styling. IE6, 7 and 8 users will see this:

The CSS

Now for the interesting part. First, we’ll hide the input box using a negative margin — this can be preferable to display:none which often disables it on mobile devices:

input.switch:empty { margin-left: -999px; }

You may have seen the :empty selector used in my recent post, How to Create a Responsive Centered Image in CSS3. It only matches elements which have no children but, since it’s not supported in IE8 and below, those browsers won’t attempt to apply the styles.

Next, we’ll style the sibling labels of the input checkbox:

input.switch:empty ~ label { position: relative; float: left; line-height: 1.6em; text-indent: 4em; margin: 0.2em 0; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }

The main properties to note are position:relative, the text-indent which provides room for our switch, and the line-height which defines its height.

The toggle itself is created using :before and :after pseudo-elements for the colored background and the white switch accordingly:

both elements are absolutely positioned at the left-hand edge of our label
the white switch is set to a smaller size and has a left margin applied to align it on the background
a border-radius and inset box-shadow is applied to give some depth, and
a transition is defined for the animation.

input.switch:empty ~ label:before, input.switch:empty ~ label:after { position: absolute; display: block; top: 0; bottom: 0; left: 0; content: ' '; width: 3.6em; background-color: #c33; border-radius: 0.3em; box-shadow: inset 0 0.2em 0 rgba(0,0,0,0.3); -webkit-transition: all 100ms ease-in; transition: all 100ms ease-in; } input.switch:empty ~ label:after { width: 1.4em; top: 0.1em; bottom: 0.1em; margin-left: 0.1em; background-color: #fff; border-radius: 0.15em; box-shadow: inset 0 -0.2em 0 rgba(0,0,0,0.2); }

Finally, when the checkbox is checked, we move the switch to the right-hand edge and change the background color:

input.switch:checked ~ label:before { background-color: #393; } input.switch:checked ~ label:after { margin-left: 2em; }

View the demonstration page and the HTML/CSS code…

Everyone likes a toggle switch! Please use the code however you like. A link back to this article or a “hey Craig, that’s awesome/awful” tweet is appreciated.

How to Fail at Prospecting

Di, 2013-05-07 23:00

In last week’s article, What’s a “Gatekeeper” and Why Do I Need to “Get Past” Them?, I outlined a strategy designed to enlist the gatekeeper’s cooperation and get you to the decision-maker. It goes like this:

Since gatekeepers can’t make marketing decisions, but they can say “no” to those selling it, give them something to which they can’t say “no”—such as more customers and increased revenue— or reveal a problem they didn’t know existed, in order to get them thinking: “Perhaps my boss needs to know about this …”

One commentator (“a gatekeeper”) said my example wouldn’t work on them—and proceeded to explain why. Yet, in reality, if I’d walked into that person’s business the day before, there’s a 60 percent chance it would have worked. Why am I so sure? Because one “Big Box” SEO company actually measured a number of different approaches to determine which was most effective. Their research revealed that this one in particular landed an appointment with the decision-maker six out of ten times.

One sure way to fail at prospecting is to believe anecdotal evidence as fact. Anecdotal evidence can come in the form of one person’s opinion—as in the example above—or as your own. Just because you think a particular approach will work or not doesn’t mean it will.

Regardless of how effective an approach is, no “technique” is 100 percent successful. Yet, we’d all like to think we’re the exception, that we’re not as readily persuaded or manipulated as the next guy (or gal). In his book, Influence: Science and Practice, psychology professor Robert Cialdini discovered there’s a huge disconnect between how people say they would react when someone was attempting to influence their behavior, and how people actually react.

For example, one control group was asked if they’d allow someone who requested to cut in front of them in line to do so simply based on their looks. Overwhelming, people denied that they’d make a decision on the other person’s attractiveness, or lack thereof.

But in a blind study using people of average looks and ones with “super model” good looks, the super models were allowed to cut far more often than the average-looking individuals. Other similar studies have shown that good-looking individuals obtained help more readily than the average-looking men and women. Clearly, the majority of people aren’t even aware of the factors that influence and persuade them. The truth is, each of us is more susceptible to being persuaded or manipulated than we’d like to believe.

People will always offer anecdotal evidence why a particular prospecting method doesn’t work. There’s even an entire industry that’s sprung up around the myth that “cold-calling is dead.” Yet, most of these voices have either a bias or an agenda. (And what better way to sell your “new and improved” prospecting sales program than to convince your audience that the “old way” no longer works.)

The only way to know what truly does and doesn’t work is by obtaining objective proof. And that requires testing your approach enough times to demonstrate whether it’s successful or not. There are many who scoff at tried-and-true sales and prospecting methods. But as one of the wiser members of SitePoint’s forums recently said, “Trivialize the value of sales at your own risk.”

Image credit

Strengthen User Authentication and Preserve User Experience

Di, 2013-05-07 09:25

Alphanumeric passwords have long been the primary method of authentication and access control on the Web. In recent years, however, relying on passwords as the sole method of authentication has proven to be unsustainable and not secure.

Research shows that authentication-based attacks were used in the majority of major data breaches in 2012. Simply moving beyond passwords to implement stronger forms of user authentication would prevent nearly 80 per cent of hacking attacks on companies.

Because people often use the same password on multiple websites, a large-scale password leak at one site creates a domino effect that harms security for many other websites and applications. When 1.5 million user credentials were leaked from Gawker Media Group, spammers and hackers immediately used those credentials to access user accounts on other websites. Hundreds of thousands of accounts on Twitter were compromised and used to spread spam and malicious links. Amazon and LinkedIn had to enforce password resets for their entire user communities.

Such debacles harm not only the individual users whose accounts are compromised; they also harm the organization, website or application itself. The negative repercussions of a data breach can include legal liability, fines, loss of customers, damage to brand reputation, plus the cost of fixing security and IT systems amidst a crisis.

When hackers stole more than 8 million user passwords from LinkedIn and eHarmony accounts in 2012, LinkedIn estimated it spent more than $1 million to clean up the breach and would need to spend another $2-$3 million for additional security upgrades. In 2011 Sony was forced to spend more than $170 million to remedy the fallout from a data breach that leaked more than 100 million PlayStation passwords.

Mobile developers must also consider better authentication methods. The majority of smartphone and tablet owners do not password protect their devices, despite having them connected to sensitive applications including work networks and banking applications. Users do that because typing passwords to log into mobile apps is too cumbersome. Experts at the CTIA Wireless conference even stated that growth of mobile commerce will be stunted until new, easier-to-use authentication methods are developed.

To achieve effective, strong user authentication on websites and applications, developers must balance security with usability. Do this by evaluating the security needs of the business as well as the characteristics of the user population. Is the user base comprised of employees, business partners, or the general public? This will help determine risk level and how stringent the authentication requirements should be.

Recommendations For Strong AuthenticationMake sure the basics are covered

Since most websites and applications will likely choose to continue using a password as the first layer of authentication, make sure these basic security measures covered:

Enforce a dictionary check to ensure that users cannot choose common words for their password.
Require a strong username that includes a numeric character. Often the username is the easiest portion of the login credentials for a hacker to guess. Do not use the user’s email address as their username.
Limit the number of failed login attempts to three and temporarily suspend account access unless the user can authenticate through other means.
If the login fails, don’t identify which portion of the credentials was incorrect. Stating that the ‘password is incorrect’ or the ‘username doesn’t exist’ enables hackers to harvest account information. A general statement such as “Incorrect login, please try again” helps prevent account harvesting.
Use SSL to create an encrypted link between your server and the user’s web browser during account enrolment, the login process and the password reset process.
Provide users with advice on how to choose a strong username and password. Research shows that users do choose better passwords when given advice on how to do so. One option is to have a password strength meter built into the page.
Hash user passwords using bcrypt, scrypt, or other hash algorithms specifically designed to store passwords. Do not use SHA1, MD5 or other algorithms that were not designed for hashing passwords, as they are not secure.
Use Salt. Use a unique salt for each user account/password and store that salt with the password. An additional layer of system wide salt that is not stored with the password can also add extra strength if the database is stolen because it is not stored with the passwords but is known to you.

These steps may seem rudimentary to some readers, but a study conducted by researchers at Cambridge University showed that most websites did not even enforce these minimum standards.[i]

SaaS solutions for generating one-time passwords

With the growth of Software-as-a-Service (SaaS) providers, it’s easier than ever to adopt authentication solutions that generate one-time passwords for users without any hardware investment or significant integration efforts. While one-time passwords will not stop a sophisticated man-in-the-middle threat, they do protect against the most common security threats: users choosing weak passwords, reusing the same password or having their passwords stolen using keystroke-logging malware.

By generating one-time passwords for users each time authentication is needed, organizations can ensure strong passwords are used and that previously stolen or leaked passwords cannot be used to access accounts.

The growing number of user devices with touchscreens enables new approaches to SaaS authentication schemes, including image-based and graphical approaches. Increasingly users are asked to draw a pattern, touch points on a picture or identify a series of secret images to authenticate. When evaluating such approaches, it’s important to make sure the solution generates one-time passwords and is not simply a static pattern or image. User’s fingerprints and smudges on the touchscreen can reveal their secret pattern or touch points if it is a static approach.

One way to generate one-time passwords using an image-based approach is to have the user choose a few secret categories of things – such as dogs, flowers and cars. Each time authentication is needed the user is presented with a series of pictures on the touchscreen and must tap the ones that fit his previously chosen categories. The specific images are different every time and displayed in a different location on the screen every time, but the user will always look for his same categories. As the user clicks or taps on the pictures that fit his categories, a one-time password is generated behind the scenes and submitted to the server for verification.

Graphical authentication approaches are easier for users to remember than complex passwords and they are faster for users to perform on smartphones and tablets than typing an alphanumeric password. For this reason, they are a good method for adding a layer of security or a one-time password without inconveniencing users.

Risk-based authentication

Organizations requiring even stronger security should consider integrating a risk engine with their authentication solutions. Using behavioral and contextual risk profiling, risk engines can dynamically trigger additional layers of authentication only when needed. This increases security without inconveniencing users because users will rarely encounter the additional steps. Risk-based authentication solutions should identify device reputation, and evaluate the geolocation of the user’s IP address and time of day they are accessing the site.

Also examine the frequency of the login attempts, which could indicate a brute force attack. If a high-risk or suspicious situation is identified, require an additional authentication step from the user. The additional authentication step could simply be second layer of authentication, or it could be a second factor of authentication.

Multifactor Authentication

Organizations whose websites or applications could be a high-profile target for hackers should adopt out-of-band, multifactor authentication. Multifactor authentication involves at least two of the following authentication factors:

Something you know (i.e. a password, secret image categories or other shared secret)
Something you have (i.e. a mobile phone or authentication token)
Something you are (i.e. biometrics such as a fingerprint)

Multifactor authentication solutions that rely on the mobile phone as the second factor are increasingly popular. The most common approach involves sending an authentication code to the user’s phone via an SMS text message and having the user type the code into the web page to authenticate. Knowing that banks often use this approach, cybercriminals are increasingly targeting the SMS channel for attack. Using malicious software they are able to compromise a user’s online account, intercept and reroute the authentication text messages to their own phones, then use the code to gain access to the user’s account.

A more secure approach is to adopt a multi-layered, multifactor authentication solution that remains completely out-of-band from the web session on the PC. Organizations can use push technology to send an authentication challenge to users’ smartphones. Users must solve the authentication challenge on their phone and send back their response/approval via push technology, which uses a server-to-server communication channel and is more secure than SMS.

For example, using the image-based authentication approach described earlier, when a user logs into their online bank account on the PC they enter their username and password. Using push technology, the bank sends an image-based authentication challenge to the user’s smartphone. The user must tap the images that fit his secret categories and tap a submit button to send his selection back to the bank for verification. The process remains entirely out-of-band from the web session because there is no data to type into the web page on the PC.

In addition to being out-of-band, the process is multi-layered and multi-factor. The user must have possession of the registered second factor device (their phone) but also apply a shared secret (knowledge of their secret categories) on the phone. Even if someone else had possession of the user’s mobile phone or intercepted the delivery of the out-of-band authentication challenge, they would not be able to complete the process because they would not know which images to identify.

When evaluating multifactor authentication solutions that rely on the user’s mobile phone as the second factor, look for solutions that remain completely out-of-band from the web session on the PC and those that use push technology rather than plain text SMS.

Biometrics and Behavioral Biometrics

Biometrics and behavioral biometrics are also increasingly viable authentication options. Most laptops, smartphones and tablets now come with built-in video cameras that can be used for facial recognition, and fingerprint scanners are quite common in mobile and desktop environments. Smartphone applications can be used for voice recognition. However, drawbacks of biometric authentication include the need to maintain the equipment and ‘body parts’ to get accurate readings; biometric ID data must also be stored in databases and is therefore susceptible to theft and forgery.

Depending upon the type of organization or account being accessed, users may not be willing to provide biometric data for authentication. For example, users may be willing to use a fingerprint scanner to authenticate for their bank account, but not for a social networking or shopping site.

Behavioral biometrics are technologies that tracks the user’s behavioral patterns such as keystroke speed and mouse movements. These and other behavioral profiling techniques can help to successfully identify individual users, especially when used in conjunction with another authentication factor. Behavioral biometrics are usually analyzed behind the scenes, unnoticed by the user, so they do not inconvenience the user, which helps improve the usability of security.

Conclusion

Authentication standards on most websites and applications are woefully lacking. Relying solely on passwords puts the organization, its users and its data at risk. Not every website needs multifactor authentication, but most can benefit from using multiple layers of authentication or one-time passwords. User education is also critical for improving authentication. Unless the user clearly understands the reasons for additional authentication requirements, they will find ways to circumvent the policies.

Finally, it’s important to remember that ‘security’ is a process–organizations must continually re-evaluate security needs, identify areas for improvement and make a security roadmap for future improvements. A website or application can never be completely secure, but developers and security professionals should aim to strengthen security to the point where it will deter most attackers while maintaining ease of use for end-users.

[i] “The password thicket: technical and market failures in human authentication on the web” by Joseph Bonneau and Sören Preibusch

Vote for Craig!

Di, 2013-05-07 09:20

The Urban Dictionary defines “codeversation” as “A conversation revolving around code, or coding standards. This can often get heated and involved, if you’re passionate enough about code.”

The folks at codetogether.org thought this description tied in nicely with their aim of recognizing the people who start and manage great conversations about code. To do this, they started a contest to find the most Creative Codeversationalist of 2013.

It will surprise absolutely nobody that one of the six nominees is our own Lead Writer Craig Buckler.

A chap by the name of Ben nominated Craig, because:

I subscribe to a lot of blogs and typically skim most of them, but I tend to linger on Craig Buckler’s articles on SitePoint. They are usually fairly straight to the point and more relevant to my interests in HTML5 and responsive design than many others that I tend to gloss over.

Good call, Ben!

My own experience is that Craig consistently chooses topics to cover that are right at the edge of what we know and want to know about code, that he covers the gamut of ways in which code influences how we manage our web work, that his articles consistently achieve among our highest pageviews, that he generates comment-based conversations that not only attract the most participants but elicit the most interesting comments and that he draws attention to aspects of working with code that otherwise might get no attention at all.

If, like me, you’re a fan of Craig’s work on SitePoint – and elsewhere – then head on over and cast your vote. The deadline is May 10, so there’s only a few days to ensure Craig earns his rightful title as Creative Codeversationalist of 2013.

Even Better CSS3 Toggle Switches!

Introducing the new HTML5 template Tag

Crowdfunding a CSS Animation course – an experiment

Learn JavaScript Online

Does Grammar Even Matter Any More?

We Talked JavaScript with the Experts – The Transcript

Randomizing Sliding Puzzle Tiles

Take Your JavaScript to the Next Level with the Experts

What’s New in Firefox 21

Mobile Website Security

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

CSS3 Pong: Insane Things to Do with CSS #17

Windows 8.1: Back to Basics?

Happy 10th Birthday CSS Zen Garden

Your Guide to the 10-Minute Homepage Copy Review

Backbone.js – From the Mouths of Experts

How to Create a Toggle Switch in CSS3

How to Fail at Prospecting

Strengthen User Authentication and Preserve User Experience

Vote for Craig!

Navigation

Netzwerk

Random image

Bookmarks

Benutzeranmeldung

CCC-News

Ignaz Blog

MySQL High Performance

Ruby / RoR

Javascript News

Telepolis