Getting started with PhoneGap, part 2

The first part of this mini-series showed you what PhoneGap is, and how it can help you develop mobile applications with familiar technologies. In this second part we’ll look at some more device APIs. The geolocation API This API is used on a variety of websites to make the site (or in this case the mobile application) location aware. A simple example that would get you the user’s latitude, longitude and altitude coordinates and show them on the screen would look something like: document.addEventListener("deviceready",...
Read more

Getting started with PhoneGap

Creating Mobile applications is something a lot of web developers are keen to get into. The problem with creating these applications when coming from a web background is that new languages need to be learned. With PhoneGap that need is gone, PhoneGap allows you to build web applications with languages you are already familiar with like HTML, CSS and JavaScript. What is PhoneGap ? PhoneGap is an open source framework that aids in the development of cross-platform applications with languages familiar...
Read more

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