Articles by Sue Smith

Sue Smith works as a Web/ software developer and technical writer based in the UK: see benormal.info for details. Sue has written for various clients including Smashing Magazine and Mobiletuts+. She also does a little Android development and some comedy writing.

Create a User Note-Keeping Utility For Your Site With IndexedDB: Part 4

In this series we have been building the elements of a user note-keeping utility for Web pages, using the IndexedDB API. So far we have built the database, created an object store to save the user's notes and handled adding and deleting notes. In this last part of the series we will bring these elements together by querying the note database, presenting the user notes within the page markup so that they can see them on returning to the page. This is the final part in a series of four tutorials: Setup and opening...

Create a User Note-Keeping Utility For Your Site With IndexedDB: Part 3

In this series on creating a user note-keeping utility, we are using IndexedDB to store user notes on a Web page. In the first two parts of the series we created the IndexedDB database and object store, as well as the initial visible HTML elements in the Web page. In this part we will implement allowing the user to add and delete notes to and from the data store. In the final part of the series we will query the notes and display them within the page. This is part 3 in a series of 4: Setup and opening the note database...

Create a User Note-Keeping Utility For Your Site With IndexedDB: Part 2

In this series we are using the IndexedDB API to create a basic note-keeping utility within a Web page. In the first part of the series we setup the HTML5 page elements and started IndexedDB processing by attempting to open the database. In this part we will be working on creating the object store, which is how we define the structure of the note database. In the final two parts of the series we will handle inserting, deleting and querying notes. This is part 2 in a series of 4 tutorials: Setup and opening the...

Create a User Note-Keeping Utility For Your Site With IndexedDB: Part 1

Indexed Database (IndexedDB) is an API for storing data at client side and a proposed standard, still in the relatively early stages of development. With the IndexedDB API, developers can store data objects within the user's browser. In this tutorial series we will explore the basics of this emerging technology by building a simple note-keeping facility for a Web page or site. Users will be able to add and delete notes, with past notes automatically displaying when the user revisits. The notes are...
CSS

Animating Buttons with CSS3

Many of the emerging techniques in CSS3 are particularly well suited to interactive Web page elements such as buttons. In this tutorial we will explore using CSS3 properties including transforms, transitions, box shadows, backgrounds and rounded corners. We will be working with an anchor element, animating the button when it is in hover state. Most modern browsers support the bulk of the properties we will be using, but users with non-supporting browsers will still be able to see and interact with...

Displaying the Progress of Tasks with HTML5

With the progress element, HTML5 pages can display the progress of a task, for example a download or background activity. In this tutorial we will demonstrate how to use the progress element in your pages, with a simple JavaScript function updating the element as the task executes. At the moment the progress element is only really supported in Firefox, Chrome and Opera, with support developing in Internet Explorer and Safari, so you can't rely on it just yet. For demonstration, we are simply going to...
CSS

Using CSS3 Attribute Selectors

Since CSS2 developers have been able to use HTML element attribute values to identify Web page items for styling properties. With CSS3, this is extended significantly with the addition of substring matching within attribute selection. This allows you to define styling rules in a more dynamic and efficient way than before, by identifying elements with one or more chained substrings defined in your CSS code. In this tutorial we will outline how to use these new substring matching attribute selectors....

Creating a Slider Control with the HTML5 Range Input

HTML5 introduces a range of new form elements and functions, including the range input type. With the range input element, you can create sliding controls for your site users. There are a number of options to choose from in terms of configuring your range inputs, such as defining the range values and steps. With a little JavaScript, you can capture and respond to user interaction with the range slider control. In this tutorial we will create a basic HTML5 range input slider to resize an image, with a JavaScript...
Load more
Home CSS Deals DesignBombs HTML HTML5 JavaScript jQuery Miscellaneous Mobile MySQL News PHP Resources Security Snippet Tools Tutorial Web Development Web Services WordPress