How to use the progress element

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...
Read more

How to change text selection color with CSS

If your website has a lot of text, at some point or another people will more than likely want to select it to copy, or search on Google. Changing the text selection color is always a nice touch, it shows that you're paying attention to the finer details of the site. Today I'm going to share a quick tip that will allow you to achieve some different looks for your selected text. Browser support The browser support for this selector is pretty good nowadays, it's supported by all the latest versions of the most popular...
Read more

Introducing Laravel, part 2

In the first part of this introductory mini series we looked at simple routes and views and now we’ll look at how to work with controllers and models , how these two fit in the framework and how to use them. Controllers In the first part of this article I showed you how to link routes to views, but as you might have noticed we still haven't added any logic and that is where controllers come into play. Controllers contain public methods that are known as actions and a simple controller that calls a view looks...
Read more

Introducing Laravel, part 1

Laravel is a PHP Web Application framework that works with the MVC pattern, as its website states: it’s the PHP framework for web artisans. Version 1.0 of Laravel was released just a couple of years ago and this PHP framework has definitely taken the community by storm with its simplicity and maintainability. Laravel makes creating web applications simple whilst also being easy to learn. Laravel works in a very focused way, allowing you to concentrate on what’s important for your application...
Read more

How to use the Dialog element

In the last couple of years pop-ups and modal boxes have become a lot more popular, and with the HTML5 dialog element we can create easy HTML dialogs and modals without the need for any JavaScript plugins, just simple HTML and some vanilla JavaScript. Since this feature is so new it’s only available in Chrome Canary and even then you need to go to chrome://flags and turn on the Enable Experimental Web Platform Features flag in order for it to work properly. Helpfully there is also a polyfill developed...
Read more

How to customize <textarea>s

When we create textareas, we don't exercise a lot of control over how they resize. By default they can be resized vertically or horizontally and they also use the default resizing button. However, we actually have far more control than we think we do: we can define how the textarea should resize and we even have a pseudo element that allows us to control the icon. Controlling the resizing Depending on our designs, we frequently don't want our textareas to resize both vertically and horizontally because...
Read more

Reshaping the web with CSS shapes & exclusions

Today's web is built of rectangles, we can try and cheat it by creating other shapes in the browser, but the basic foundation is rectangles. That poses a problem for anyone trying to produce a more organic layout with, for example, text wrapping around a curve; or even limited within a circle. The solution to this is CSS shapes and exclusions, which allow us to create true polygons, circles and ellipses. For now this feature is only available in Chrome Canary, or by enabling experimental WebKit features;...
Read more

Voice control with Annyang

Something that's always welcome are plugins that enhance usability on websites, especially when they assist people with disabilities. Annyang is a great example of that. It's a plugin that helps you set up speech recognition on your site. It assists people with visual impairments and it's just plain cool to boot. Currently it's only supported by Chrome, but it degrades gracefully so it's usable now. Using Annyang Annyang doesn't have any dependencies, so all you need to do to get it working is to load...
Read more