Over the last couple of years CSS has evolved more than we could ever imagined. Styling and layout are now entirely in our hands, although the best thing about CSS3 in my eyes are the Transforms, particularly the 3D ones. With transforms we can move elements through a 3D world, and today I’ll demonstrate this by creating a flip effect. Browser support ... The browser support for 3D transforms is a little lacking, but on the whole not too bad. It’s supported by all webkit browsers using the webkit prefix,...
HTML5 has brought a lot of new features to HTML and whilst we all concentrate on the big advances like canvas, and audio & video, some of the simpler improvements get overlooked. This is the case with the File Reader API, which although not glamorous, is an excellent addition to our toolbox. In terms of browser support the File Reader API is supported by everything modern with the exception of Opera Mini, so you can be confident using it right now. What this new API does is read the contents of a file on...
When you’re developing a large-scale project you always want to use some kind of task runner, in order to automate your workflow. Grunt is exactly that, a JavaScript task runner. It can prepare your code for production with one simple command. What can Grunt do ? ... Grunt is a JavaScript task runner and it’s able to compile your CoffeeScript, Less or Sass files , lint all your JavaScript, minify it or even put all of it in one file by concatenating them. Grunt is an amazing automation tool that allows...
Web developers all have different ways of working, but there’s always that set of frameworks and libraries we install on each project no matter what. With this comes the tedious work of downloading each one and placing them in our project folder; this doesn’t sound like much if done once or twice but when it’s necessary almost everyday it becomes a tedious task. If you share this opinion Yeoman is right up your alley. What is Yeoman ? ... Yeoman is a workflow, it’s not just a tool but a collection...
Bootstrap is without a doubt the most widely used front-end framework, it's thought to power 1% of all websites currently on the web and if we look at how Bootstrap is built it's easy to see why, it simply makes development so much easier for us. Now the RC2 of Bootstrap 3 is out and they have completely redone the framework from top to bottom. Let's now see what has changed to help your migration a little. The grid ... The grid is one of the biggest changes and has been completely rebuilt for a mobile-first approach...
When creating a web site we sometimes need to provide the user with feedback on the progress of a particular task , whether that be uploading a file, saving a document or even showing them how much is left until they complete filling in a form. Until now, there has never been a specific HTML element that served this purpose, but now we have the progress element that, as the name suggests, was made to represent the progress of these tasks. Using the progress element ... When it comes to using this element we have...
In recent years web pages and applications have been requiring the use of more, and increasingly complicated, JavaScript. Google Drive, for example, is a full blown desktop application which relies on JavaScript being responsive. Although JavaScript performance has improved, large, complex scripts can still slow browsers down, or even cause them to freeze. This is where Web Workers come in. They tell the browser to execute large, potentially problematic, scripts in the background so the user...
HTML5 saw the introduction of several new form input types, including range. This means that range sliders can be created in HTML itself, although initially it tended not to be used, firstly because of JavaScript alternatives already in use, and secondly because of the lack of adaptable components. In most browsers there is still no way to completely customize an input slider, but webkit browsers do provide some nice control. The demo for this article can be found here. The input ... The range input...