HTML

Uploading files - a simple approach

Here’s a nice way of getting images to your server using a little bit of Javascript and HTML. We’ll be using the FileReader API that comes with Javascript and is supported in all major browsers.

For this example we’ll need some HTML from which we can select files and show a preview:

<div>
    <input id="fileInput" type="file" />
    <button id="clearFile">Clear</button>
    <button id="uploadFile">Upload</button>
</div>
<div>
    <label>Preview</label>
    <div>
        <img id="preview" />
    </div>
</div>

We have an input element set to type="file" to select the file(s) we want to upload. Two buttons for submitting and clearing our inputs and an img where we can show a preview. This demo only depends on jQuery, which is only used to make performing a POST to the webserver so much simpler. Feel free to substitute that with whatever you like best.

Simple dialogs with AngularJS and TypeScript

While working an Angular (1) web app I ran into the age-old problem of showing the user notifications when certain conditions are met. Show them a little pop-up, in simple terms.

So what does it take to show a popup? We know the dialog element exists but cannot be used in this case due to browser requirements. The easiest way I could think of is adding a fixed positioned div the the user on top of all other content. Add some CSS in there to make it look nice and we have dialogs.

The dialog element

I was grinding my teeth on a z-index problem today. I needed to cover the entire webpage to show something was happening and nothing else was to interrupt. Some elements (for whatever reasons) were poking through the overlay and nothing seemed to fix my problem with the plain old position: fixed element I was using to cover the page.

So after getting fed up with looking for possible fixes I spent a bit of time looking for alternatives and came across the <dialog> element.

Creating a toggle switch with HTML and CSS

My current project involves an interface that is 100% touch driven (no keyboard and mouse) and I was asked to turn a regular old checkbox into a toggle switch.

Initially I assumed it would be very easy but as with many things browser related, it was not. Let’s take a look at some of the things browsers do to checkboxes using this quick example:

<html>
	<head>
		<title>Test</title>
		<style>
			input {
				border: 1px solid red;
				background-color: green;
				width: 50px;
				height: 50px;
			}
		</style>
	</head>
<body>
	<div>
		<input type="text" />
		<input type="checkbox" />
	</div>
</body>
</html>

Browsers pls

Another simple loading indicator

Here is another loading indicator for when your webpage is busy waiting for a server request to come back with an answer. It’s a bar at the very top of the page this time.

Let’s look at a demo before we dive in:

Press the button to do some imaginary tasks that simulates a workload. A rolling bar will appear at the top of the demo to show that something is happening in the background. So how does it work?

Animations and transforms

Every employee at ITQ has their own little mini-me in the form of a little character based on your appearance. Here is mine:

MiniMe

So I have this image sitting in a folder on my Ondrive for whenever I might need it. Queue a boring evening with not much else to do, I figured, lets animate some life into the little guy using CSS. Here is the result.

The simplest loading indicator

I had a brainwave and dove into codepen for a little bit to doodle around and when I emerged I had this simple little loading indicator. Very simple in terms of markup and CSS (LESS in this case).

Have a look see :-)