One of the biggest headaches you’re likely to encounter as a developer is cramming a designer’s gigantic menu onto a mobile screen. There are options open to you: you could repurpose the menu for mobile, you could compact it with JavaScript, you could even reposition it with CSS. But thanks to the amazing jQuery community, you probably don’t need to. There are dozens of jQuery mobile navigation solutions available, all of which have been designed to solve the problem of menus that don’t fit...
The most amazing part of all the technologies that came with HTML5 is how easily they can be used to create little apps that make our lives a lot easier. It’s surprisingly simple to combine them to create something practical and simple. Today we will be using geolocation and the Weather Underground API to create a simple Weather App that will determine where you are and tell you the current weather for your location. To work with the Weather Underground API you will need an API key but don’t worry...
Let’s face it, the parts of CSS3 that first caught our attention were the animations and transitions. They’re something we never had before without the inclusion of JavaScript. And just because it’s CSS, doesn't mean there aren’t libraries out there to help you. One of them being Animate.css. What is Animate.css? ... Animate.css is a library that comes with dozens of cross-browser fun animations built-in that you can use in your project very easily. It’s the same idea as some of the JavaScript...
At the WWDC 2014 Apple introduced a brand new programming language called Swift,. It's a language that has been created by Apple from the ground up to be both very efficient and very beautiful. Swift uses the same API's as C but in my opinion is easier to learn and get a grasp if you come from a web development background like me. If you are just as exited about this language as I am, then this is the article for you. Variables and constants ... Declaring variables in Swift, if you come from a Javascript background,...
You have to love the developer network. Whilst HTML5 remains a relatively new standard, there are plenty of open source and paid for resources available to help you work with HTML5 using JavaScript. JavaScript is necessary for many HTML5 elements such as <canvas>, <audio> and WebGL. However, as I said, there are tools, libraries and framework resources to help you, so let’s get started looking at some of them. 1) HTML5 Boilerplate ... It’s likely that if you’re already working...
All the websites we build should be responsive; not just to browser speed, but to network condition. In this article I'll introduce the Network Information API, that helps us detect a device’s current bandwidth and allows us to modify our site if the speed is slower than we need. Browser support ... We usually can’t expect support for experimental APIs and in this case, the only two browsers that support it are Firefox and Chrome. In both cases, you need browser prefixes. How to use the Network Information...
Today we have mobile devices that come equipped with everything from cameras to geolocation, and we have little computers in our hands that can do pretty much anything we do with our desktop. One of the key APIs that functions with mobile devices is the Device Orientation API. The Device Orientation API helps us as developers detect the orientation of the user's screen and make the necessary changes to our layout. For example, on YouTube, if you are watching a video and you tilt your phone, the video goes...
Whether you're new to jQuery or have been using it for a while, the chances are you might not be making full use of the selector syntax. Rather than simply listing the possible selectors, in this tutorial we will work through a practical example in which we create an interactive page component, introducing the basics if you're a beginner. After that we will run through some of the other selector options you can choose from. Create a page ... Create a new HTML5 page: <!DOCTYPE html> <html> <head>...