Menu Search
Jump to the content X

Posts Tagged ‘JavaScript’.

We are pleased to present below all posts tagged with ‘JavaScript’.

Lessons From A Review Of JavaScript Code

Before we start, I’d like to pose a question: when was the last time you asked someone to review your code? Reviewing code is possibly the single best technique to improve the overall quality of your solutions, and if you’re not actively taking advantage of it, then you’re missing out on identifying bugs and hearing suggestions that could make your code better.

None of us write 100% bug-free code all of the time, so don’t feel there’s a stigma attached to seeking help. Some of the most experienced developers in our industry, from framework authors to browser developers, regularly request reviews of their code from others; asking whether something could be tweaked should in no way be considered embarrassing. Reviews are a technique like any other and should be used where possible.


Survey: Essential JavaScript for New Projects

Like many developers I have a standard set of files that I simply copy into every new project I start. These include base HTML templates, useful PHP functions, Sass mixins and a number of JavaScript files that I can't live without. With the advent of great libraries like Modernizr and polyfills such as the indepensable html5shim we are becoming more reliant on these resources to help us create great web sites and applications.

I thought it would be interesting to learn more about the libraries and scripts our readers on Smashing Coding use on a daily basis.


Optimizing Long Lists Of Yes / No Values With JavaScript

Very frequently in Web development (and programming in general), you need to store a long list of boolean values (yes/no, true/false, checked/unchecked… you get the idea) into something that accepts only strings. Maybe it’s because you want to store them in localStorage or in a cookie, or send them through the body of an HTTP request. I’ve needed to do this countless times.

The last time I stumbled on such a case wasn’t with my own code. It was when Christian Heilmann showed me his then new slide deck, with a cool feature where you could toggle the visibility of individual slides in and out of the presentation. On seeing it, I was impressed. Looking more closely, though, I realized that the checkbox states did not persist after the page reloaded. So, someone could spend a long time carefully tweaking their slides, only to accidentally hit F5 or crash their browser, and then — boom! — all their work would be lost. Christian told me that he was already working on storing the checkbox states in localStorage. Then, naturally, we endlessly debated the storage format. That debate inspired me to write this article, to explore the various approaches in depth.


How To Use AJAX In WordPress

In the last few years AJAX has creeped into websites and has slowly become THE way to create dynamic, user friendly and responsive websites. AJAX is the technology that lets you update the contents of a page without actually having to reload it in a browser. For example, Google Docs utilizes this technology when saving your work every few minutes.


While there are a number of ways to use AJAX in Wordpress = and all are correct in the loose sense of the word - there is a method which you should be using since WordPress supports it, it is future proof, very logical, and gives you numerous options right out of the box.


The Developer’s Guide To Conflict-Free JavaScript And CSS In WordPress

Imagine you’re playing the latest hash-tag game on Twitter when you see this friendly tweet: "You might want to check your #WP site. It includes two copies of jQuery. Nothing’s broken, but loading time will be slower."


You check your source code, and sure enough you see this:

<script src="" type="text/javascript"></script>
<script src=""></script>

What went wrong? The first copy of jQuery is included the WordPress way, while some-plugin includes jQuery as you would on a static HTML page. A number of JavaScript frameworks are included in WordPress by default.


A Quick Look Into The Math Of Animations With JavaScript

In school, I hated math. It was a dire, dry and boring thing with stuffy old books and very theoretical problems. Even worse, a lot of the tasks were repetitive, with a simple logical change in every iteration (dividing numbers by hand, differentials, etc.). It was exactly the reason why we invented computers. Suffice it to say, a lot of my math homework was actually done by my trusty Commodore 64 and some lines of Basic, with me just copying the results later on.


These tools and the few geometry lessons I had gave me the time and inspiration to make math interesting for myself. I did this first and foremost by creating visual effects that followed mathematical rules in demos, intros and other seemingly pointless things. There is a lot of math in the visual things we do, even if we don’t realize it. If you want to make something look natural and move naturally, you need to add a bit of physics and rounding to it.


Searchable Dynamic Content With AJAX Crawling

Google Search likes simple, easy-to-crawl websites. You like dynamic websites that show off your work and that really pop. But search engines can’t run your JavaScript. That cool AJAX routine that loads your content is hurting your SEO. Google’s robots parse HTML with ease; they can pull apart Word documents, PDFs and even images from the far corners of your website. But as far as they’re concerned, AJAX content is invisible.

AJAX has revolutionized the Web, but it has also hidden its content. If you have a Twitter account, try viewing the source of your profile page. There are no tweets there — just code! Almost everything on a Twitter page is built dynamically through JavaScript, and the crawlers can’t see any of it. That’s why Google developed AJAX crawling.


Useful Node.js Tools, Tutorials And Resources

Created by Ryan Dahl in 2009, Node.js is a relatively new technology which has gained a lot of popularity among Web developers recently. However, not everyone knows what it really is. Node.js is essentially a server-side JavaScript environment that uses an asynchronous event-driven model. What this means is simple: it’s an environment which is intended for writing scalable, high performance network applications. It's like Ruby's Event Machine or Python's Twisted, but it takes the event model a bit further—it presents the event loop as a language construct instead of as a library.

The secrets of Node’s success

And that’s not all: what’s really great about Node.js is the thousands of modules available for any purpose, as well as the vibrant community behind this young project. In this round-up, you will find the most useful resources for Node.js, from handy tools to detailed tutorials, not to mention in-depth articles and resources on this promising technology. Do you use Node.js already? Let us know in the comments to this post!


Help The Community: Report Browser Bugs

You’re developing a new website and have decided to use some CSS3 and HTML5, now that many of the new specifications are gaining widespread support. As you’re coding the theme and thinking of how much easier these new technologies are making your job, you decide to stop for a while and test in other browsers, feeling a bit guilty for getting carried away and having forgotten to do so for a while. “Please work,” you whisper to your computer, while firing up all of the browsers you have installed. Browser A, check. You smile, feeling a bit relieved. Browser B, check. Your smile widens, and you start to feel better already. Browser C, “FFFFUUUUUUUUUUU…!”

Sound familiar? You might be surprised to hear that this is not necessarily your fault. With the competition in the browser market these days and the fast pace at which the new specifications are developing, browser makers are implementing new stuff in a hurry, sometimes without properly testing it. CSS3 and HTML5 are much more complex than their predecessors. The number of possible combinations of new features is huge, which leads to the most common cause of bugs: two (or more) things that weren’t tested together. As a result, developers these days stumble upon browser bugs much more frequently than they used to.


Orbit and Reveal: jQuery Plug-Ins For Image Sliders and Modal Windows

A visitor comes to your website all giddy to learn more about your product, when suddenly a snazzy slideshow loads with some snap. Impressed, they go to register and are greeted by a most elegant modal window. At this point they are finally overjoyed by the velociraptor that suddenly charges across their screen. They don't know why but they like it.

Two Useful jQuery Plug-Ins That Will Breathe Life Into Your Pages

Crafting a polished and unique experience for your users is becoming ever more critical as the Web gets more overloaded. Standing out is hard. To the rescue come frameworks such as jQuery, which offer a modular, highly customizable experience for your visitors.


↑ Back to top