Showing posts with label html. Show all posts
Showing posts with label html. Show all posts

Saturday, May 16, 2015

What's the Difference Between Image and Figure Tags in HTML5?

Difference Between Image and Figure Tags

Writing semantic code should be every web developer's goal. With the addition of dozens of new HTML5 tags, it can suddenly be confusing as to which tags you should use, especially since you might have originally learned a different way.

Tuesday, July 29, 2014

HTML Imports: Import HTML Files Into Another HTML Files

HTML Imports

Most of us are familiar with <script src> which we use in loading JavaScript, <link rel="stylesheet"> for CSS, <img> for images, <video> for videos, and <audio> for audios. But we don't have a more declarative way to load HTML. Whilst It's possible to load HTML with iframes element or the JavaScript method XMLHttpRequest(). HTML imports provide a much cleaner way to load self-contained components into web pages.

Sunday, July 20, 2014

How to Create Your Own HTML Elements With Web Components

Web Components
Web Components are currently and excitedly being talked about as an upcoming "tectonic shift for web development" with the promise of permanently reshaping the web design landscape. Big players are moving forward to bring web components into reality. Both Google and Mozilla are already gradually rolling out native browser support.

What are web components you ask? In a nutshell, web components give you a way to create your own custom HTML elements which can do just about anything you need them to. Instead of loading up your sites with verbose markup, long scripts and repetitive code, you wrap everything up into nice, neat little custom HTML elements.

Saturday, April 26, 2014

How to Create Custom HTML Elements

Custom HTML Elements
Photo by Kenny Louie / Flickr

An exciting feature of the HTML specification that's been getting a bit of hype recently is custom HTML elements. These allow you to create your own HTML elements along with their own JavaScript API. This can be useful when building interfaces with components that are reused throughout an application.

Saturday, April 19, 2014

New HTML5 Attributes for Hyperlinks: download, media, and ping

New HTML5 Attributes for Hyperlinks
Hyperlinks have been around since the dawn of the Web. But with the dawn of HTML5, three new attributes have been added to the humble <a> tag to keep existing attributes like href, rel and others company.

The new attributes are: download, media and ping. In this article, we'll take a quick look at what these new attributes are and how they can be used once browser support improves.

The download Attribute

The download attribute is new in HTML5. It supplements the existing href attribute by telling the browser that the resource the href points to should be downloaded directly, instead of visited (which could happen with a file that the browser can open, like a PDF). The value of the download attribute is used for the name of the file that is downloaded.

Sunday, March 23, 2014

How to Use the Details and Summary Elements in HTML5

How to Use the Details and Summary Elements in HTML5
A number of new interactive elements were introduced with HTML5 that provide native implementations of common UI widgets like dialogs and modals. Among these new additions are the <details> and <summary> elements. These elements allow developers to create collapsable UI widgets the user can click to show or hide content.

Tuesday, March 11, 2014

Flexbox Bar Navigation Demo

Someone wrote in to me asking how to create a simple bar navigation with icons. This is a pretty simple layout thing that could be accomplished loads of different ways. List items as inline-block probably makes the most sense in general.

Tuesday, March 11, 2014

To Close Or Not To Close

HTML Tags

Have you ever wondered if it's better to "close" a br or input tag like <br /> or if it's better to just write <br> in HTML5? Or why it's not correct to write <script src="script.js" />? Well so have I and my findings on the subject were a lot more interesting than I anticipated (if for some strange reason you find stuff like this interesting).

Monday, March 03, 2014

10 HTML5 APIs Worth Looking Into

10 HTML5 APIs

The tools available to create powerful applications on the web platform are getting better with each passing year. The HTML5 specification has added a number of useful features in new APIs that you may not have delved into yet, likely because of the lack of browser support.

Monday, January 27, 2014

Validation and Exception Handling: From the UI to the Backend

Sooner or later in your programming career you will be faced with the dilemma of validation and exception handling. This was the case with me and my team also. A couple or so years ago we reached a point when we had to take architectural actions to accommodate all the exceptional cases our quite large software project needed to handle. Below is a list of practices we came to value and apply when it comes to validation and exception handling.

Tuesday, January 14, 2014

When To Use The Button Element

When To Use The Button Element
You use it when, uhm, you want a button on your page that users can click, right? Well, unfortunately it's a bit more complicated than that. It's not too bad though, let's figure it out.

It looks like this:

<button>
  Do Something
</button>

What's the most common result of clicking something on a website? Moving to a new URL, like you would clicking a link (an <a href="/example/"></a>) element).

The <button> element, by itself, can't do that. There have been various conversations about allowing "href anywhere" over the years, but nothing has came of it.

Clicking on a button does do something though, when used in its natural environment...

Button is a Form Element

Web forms have submit buttons. You might think of that like this:

<form action="/" method="post">
  <input type="submit" value="Submit">
</form>

A <button> element in a <form>, by default, behaves identically to that submit input above.

<form action="/" method="post">
  <button>Submit</button>
</form>

However gross the UX, forms can have reset buttons as well. You can duplicate that behavior by changing the default submit type to reset.

<form action="/" method="post">
  <button type="reset">Reset</button>
</form>

Clicking that button will clear all the other inputs (and textareas) with the parent <form>.

Buttons can have content

The primary reason for using a <button> is that it has both and opening and closing (</button>) tag. Which means there can be stuff inside. A common use case would be something like:

<button>
  <img src="tiny_birthday_cake.png" alt="">
  Submit
</button>

While an input can be <input type="image">, this mixed content would be hard to pull off.

As far as I can tell, there is no limit to what kind of content you can put in a button, so feel free to get real weird with it. Pseudo elements can be used too.

Let's leave styling <button>s for another day, but different browsers generally have a special style they apply to buttons. You'll want to either leave that alone so the default comes through, or remove it thoroughly so your new styling can be consistent across browsers.

Let's consider: "if a button doesn't have a meaningful href, it's a <button>"
I said recently that I enjoyed that sentiment. That's what kicked off this article for me. At the time, I was thinking of how I enjoyed the semantics of it. As in:

<a href="#0">
  I'm kinda sick of doing this for buttons.
</a>

There is no meaningful href there. The 0 is just there so it doesn't jump the page, because ID's can't start with a number.

Chances are, HTML like the above means: I'm going to make clicking that do something with JavaScript. Somehow that feels better than a <div> whatever, because you get the cursor change and whatever else default styles.

If you don't like those meaningless href's, a <button> can seem like a nice alternative. But unfortunately outside of the context of a <form>, a <button> is equally meaningless.

<button>
  Outside of a <form>, I'm just as useless.
</button>

But <button> feels better anyway

Even if a <button> doesn't do anything outside of a form without the help of JavaScript, it still feels better for things you can click that do stuff other than change pages. A bogus href link definitely doesn't feel right.

Alright. Let's insert it with JavaScript then

That's probably the best solution. If JavaScript is required for the clickable-thing to do anything at all, it might as well not even be there at all unless JavaScript runs. We can do:

// 1. Create the button
var button = document.createElement("button");
button.innerHTML = "Do Something";

// 2. Append somewhere
var body = document.getElementsByTagName("body")[0];
body.appendChild(button);

// 3. Add event handler
button.addEventListener ("click", function() {
  alert("did something");
});

You could easily have "button adding" be a part of your JavaScript workflow.

When links make more sense

If there is any kind of href you could put on that link that makes sense, by all means, use an anchor. Even if you override that behavior with JavaScript. That's progressive enhancement at it's finest. For instance:

  • A search button normally triggers a type-ahead ajax-search thingy - but the href could just point to a /search/ page.
  • A publish button triggers the the next stage of publishing something a user built - but the href could just point to a /publish/ page.
  • A thumbnail button opens a lightbox with a larger version - but the href could just point to the URL of that larger version.

If nothing makes sense, insert the button with JavaScript.

Accessibility concerns

Let's say using an anchor link does make sense. After you give yourself a nice little back-pat for being good at progressive enhancement, there is accessibility to consider as well.

You might be like, I got this!

<a href="#meaningful" class="button" role="button">
  I'm good
</a>

But you aren't out of the woods yet. MDN covers it well:

Warning: Be careful when marking up links with the button role. Buttons are expected to be triggered using the Space key, while links are expected to be triggered through the Enter key. In other words, when links are used to behave like buttons, adding role="button" alone is not sufficient. It will also be necessary to add a key event handler that listens for the Space key in order to be consistent with native buttons.

Get that? You activate links and buttons with different keys, so consider that.

Go forth and uhm, make clickable things correctly.

Thursday, December 05, 2013

8 HTML Elements You’re Not Using (and Should Be)

8 HTML Elements You’re Not Using
In today's web, the word semantic gets thrown around a lot. But what does semantic mean? Why is it important?

Semantic HTML expresses the meaning of the document. It's less about how the text looks and more about what it is. Good semantic markup helps both people and machines understand the content and its context.

Semantic markup is much more accessible and easier for screen readers to interpret. It's SEO friendly. It works better with modern browsers. It reduces the amount of code needed to express the content and increases the clarity of the code for other people that have to read it.

Saturday, October 05, 2013

A preview of the new dialog element

dialog element

The <dialog> element originally entered the HTML5 scene as a way to markup conversations but it was cut from the spec back in 2009. However now it's back, and it has a brand new role.

The new <dialog> element makes it really easy for developers to create popup dialogs and modals for their web applications. Before now this required using a JavaScript plugin. However popup dialogs have become so popular that the Chrome team have decided to create a native implementation of this UI component.

Sunday, September 29, 2013

Reading files using the HTML5 FileReader API

HTML5 FileReader API

HTML5 saw the introduction of a number of new APIs that can be used to handle files in the browser. These APIs make it much easier to accomplish tasks like reading and writing files or uploading a file created using JavaScript.

Tuesday, August 20, 2013

Introduction to Animating in HTML

Animating in HTML

Over the last few years, designers have begun to use a lot of animations directly within HTML. That's kind of cool, as you don't need a plugin in order to see their work. There are several ways to make animations in HTML and in this article I will summarize a lot of examples and techniques for creating animations directly in HTML using both JavaScript and CSS.

Saturday, July 06, 2013

Designing the dreaded form: getting creative

Designing the dreaded form

In my first article "Designing the Dreaded Form" I discussed planning your forms ahead time by selecting proper UI patterns and handling the dreaded long forms. But the generic title for the article completely left out the “design” part of the form. Although planning ahead is a hugely important part of any design process — the focus on the previous article, this article aims directly at the visual design aspects of the dreaded form.

Saturday, June 08, 2013

Text-align: Justify and RWD

Text-align: Justify and RWD

Did you know that one of the most powerful tools for fluid and responsive layout has been a native feature for every browser since HTML 4?

Thursday, May 30, 2013

5 HTML5 Features you need to know

5 HTML5 Features you need to know
HTML5 has been around for a while now, it introduces lots of new and exciting new JavaScript and HTML APIs for both mobile and desktop, so in this post you will discover some HTML5 features that will enhance your web apps and will save you a lot of time.

Thursday, April 25, 2013

Customize an HTML5 Webpage using the Bootstrap Framework

Bootstrap Framework
Many web developers are familiar with Twitter Bootstrap and have seen this library on a number of projects. The Bootstrap core is fantastic when you need a CSS reset along with other common layout features. It may not be the right fit on projects where you need a whole lot of customization. But for landing pages and smaller websites I think Bootstrap has become one of the easiest resources to start using.

Thursday, April 25, 2013

Make Your UI More Responsive with HTML5 Web Workers

HTML5 Web Workers
Also read: Using Web Workers to Speed-Up Your JavaScript Applications

Argh!!... Your web application has to sort a lot of data and you get the dreaded error message... "A script on this page may be busy, or it may have stopped responding..." Or maybe you're writing some image processing code that takes forever on large images... Your UI is non-responsive. What are you going to do!!?... You could try to break up the work into small pieces and use timers to spread out the work. But what a PITA!