Showing all posts tagged: 'Web Design'

A 5-post collection

Add "copy-to-clipboard" functionality to your website

I'm currently working on releasing a nice front-end to [https://passwordutility.net](https://passwordutility.net" target="_blank). PasswordUtility.net is an OSS tool that allows users to check their passwords' strength. You can also generate strong passwords using the same tool. If you're ever stuck for a password, head over to the site and give it a go! There's also a funky API and free OSS library release as NuGet package so you don't have to re-invent the wheel. With the shameless plug out of the way, I'll get to the chase. How do you add a copy-to-clipboard …[read more]

Designing my website to use a custom Ghost theme

My new website has been in the making for some time. In fact, it's been over 10 months since I decided to do some changes and add a bit more functionality outside the conventional blog posts. My current website is built with Ghost and it runs on Node.js. A brief history I've started blogging in 2012. It was shortly after the SQLBits conference in London when I accepted a challenge that required some blogging. The challenge was simple: read 1 book per month and then blog about it. Committing to write a blog post is a great incentive to …[read more]

Importing CSV files using jQuery and HTML5

One of the cool features of HTML5 is the new File API that allows the broswer to directly interact with files on the file system. Most modern browsers that support HTML5 can use this API to perform client-side only processing without the need for a round trip to the servers or the use of ajax etc. In effect the server becomes redundant and the user experience more fluent and responsive. You can still, if you need to, perform server-side processing, but if you only want to make the file contents available to the browser then you can use the code …[read more]

Add watermark to textbox and password textbox using HTML5

If you need to add a watermark on your textboxes and wish to avoid ugly Javascript implementations, HTML5 is your friend. Simply use the placeholder attribute with any input element of type text or password, as per the examples below: <input id=”txtUsername” type=”text” placeholder=”Type your username” /> <input id=”txtPassword” type=”password” placeholder”Type your password” /></pre> This works like a treat! P.S This feature is only supported by the latest HTML5 browsers (IE10, Safari, Chrome, Firefox). Older browsers still require Javascript Happy coding… …[read more]

Tidy up your forms with horizontal sliding divs using JQuery UI

Many websites still make use of lengthy scrollable forms or numerous page post backs when requesting input from their users, e.g shopping cart check outs etc. jQuery and jQueryUI give developers the opportunity to significantly improve the overall UI experience. In this tutorial, we will look into creating sliding panels/divs that respond to user input and allow the users to navigate through the data entry process in a nice, fluid way. First we need to ensure that we reference the appropriate libraries: jQuery 1.9.0 jQueryUI 1.9.2 Then we need to create our html elements: …[read more]