If you use a task runner in your workflow you’ll know why they are so useful in coding; they improve our workflow and allow us to focus on problem solving rather than repetitive data entry. Gulp is one such application and it has a lot of benefits to it. There’s a really simple syntax, no messy JavaScript files, a simple API and a wide variety of plugins. Installing Gulp ... As you’ll suspect if you’ve used a utility like this before, you need to have NodeJS and npm installed on your system, once you...
Test driven development is now widely accepted as a JavaScript workflow, and it’s something we should all embrace because it saves us a great deal of time when coding. In this article I’ll introduce you to QUnit, a testing framework that will help you spot errors and bugs in your code. Why use test driven development? ... At first, this process may seem complex and tedious. Creating a test for all of your functions does take some time, but it will save you hours of debugging at the end of the project cycle....
A look we’ve seen utilized on a lot of sites recently is the sticky sidebar. That’s a sidebar that scrolls normally until it reaches the top of the screen, at which point it attaches itself to top of the viewport until you scroll back up the page. It’s an interesting piece of usability because it keeps the user in contact with a particular piece of navigation (often social media buttons). So today, we’re going to have a look at building a sticky sidebar using some simple jQuery and CSS. The HTML ......
Nowadays websites rely more and more on JavaScript to create dynamic interfaces, for some sites you may only need something like jQuery that works wonders when it comes to DOM manipulation but other times a template system may be more suitable, especially if your page will be constantly updating its data. Handlebars helps you with that by dynamically generating your HTML. It helps you get into using the View/Controller pattern while keeping your code cleaner and more maintainable. Using Handlebars...
Instagram is widely used, with literally millions of people constantly uploading pictures. It makes sense, with such a large user base, to create an API. Today we’ll be looking into how to use it. Authentication ... The first thing you need to do is to register as a developer with Instagram. You’ll need to register your application name, a description, your website and a redirect URL. After you’ve done this you’ll receive your Client ID and Client Secret, but this is where it gets a little tricky;...
In the last couple of months we’ve seen API after API being released, many of which make life easier. Today we’re going to focus on the Speech Synthesis API, which uses system libraries to speak, whatever you want, making the Web considerably more accessible. Browser support ... This API is fairly new, so not widely supported. Currently only Chrome Canary and Safari support it. (Safari supports it on desktop and mobile.) So, we can play with the API, but it’s not production ready unless we have...
With the introduction of CSS3 we’ve seen huge advancements in web technology, and the last few years have felt like golden ones for anyone working on the Web. One great addition that hasn’t been talked up enough is viewport units. They’re anew kind of CSS3 unit that allow you to size elements relative to the viewport. Browser support ... The browser support for viewport units is surprisingly good. There’s full support in all the latest desktop browsers. IE has had full support since IE9 (although...
As a developer, you want to provide a superb service to your clients, and one of the best ways to do that is to base your designs around an existing template; it speeds up the process, keeps costs to a minimum and covers all bases. Everybody wins! The better the template, the easier the job. So, we’re delighted that our sister-site, MightyDeals.com, has been able to arrange a huge deal on this bundle of one-page parallax templates built by the team at GT3Themes. Coded using the popular Bootstrap 3.0...