Sunday, March 30, 2014

Rotated Table Column Headers

Rotated Table Column Headers

Say you have a table header (i.e. <th>) of "Number of Howler Monkey Species by Country" and the data in the corresponding <td> is like "3". That's an awkward mismatch of width.

Sunday, March 23, 2014

Style External Links Differently

Style External Links Differently
When you are writing content on your website there will be times when you want to refer to other content on the internet, this can be to either your own articles or to external sources for other people's content.

When you link to external content it's common practice to open this content up in a new tab, this way the reader won't be taken away from there place in the article.

To open your links in a new window you can use the target="_blank" attribute.

<a href="url" target="_blank">External Link</a>

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

CSS 3D Folding List With Social Buttons

CSS 3D Folding List With Social Buttons

CSS 3D transforms are just awesome. I've seen before some cool and inspiring implementations in the wild and still I can't believe I didn't had the chance to write an article on this topic 'til now.

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).

Tuesday, March 11, 2014

Simple Stack Effects

Simple Stack Effects

Today we'd like to share some inspiration for simple stack effects with you. You have certainly seen these kind of effects, mostly used in image galleries, but also on single items on a page: one item is shown initially and then, with some trigger, more items are revealed, normally as decoration.

Sunday, March 09, 2014

Why You Should Care About Web Components

Web Components
Since there is no standard way to define a component, every framework has to invent its own and JavaScript is a flexible enough language to allow that. Unfortunately, this results in fragmentation: components built using different frameworks do not interoperate with each other. Web components are a set of specifications solving this problem.

Two Date Pickers

Let's take a simple component that you are likely to see in pretty much any application - the date picker component.

Sunday, March 09, 2014

A responsive approach to image scaling with CSS

A responsive approach to image scaling with CSS

There was a popular article written a few weeks ago called "Vertical align anything with just 3 lines of CSS". This approach to vertically aligning things with top and translateY is something we've used recently, but in a little different context. We had to fit images into responsive containers that had fluid widths and set heights and all we knew were the widths of the images.

Wednesday, March 05, 2014

Uploading Files with AJAX

Uploading Files with AJAX

The introduction of AJAX marked a huge leap forward in the history of the web. The ability to communicate with a web server without reloading the page has revolutionised how web applications are built. The primary technology that enables AJAX (XMLHttpRequests) has evolved significantly since the initial conception of dynamic websites.

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, March 03, 2014

Create Different Styles of Hover Effects with CSS3 Only

Create Different Styles of Hover Effects with CSS3 Only

We started to see a lot of CSS3 animations around the web nowadays. Pure CSS3 animation such as flashing, fading, spinning, zooming, moving and a serial of complicated animations are emerging. What seems to be impossible to achieve with CSS only are now achievable fairly easily.

Sunday, March 02, 2014

Designing for Performance

Designing for Performance

Web performance is user experience.

Sunday, March 02, 2014

Making Embedded Content Work In Responsive Design

Making Embedded Content Work In Responsive Design

A few HTML elements don't play nice with responsive layouts. One of these is the good ol' iframe, which you may need to use when embedding content from external sources such as YouTube.

Sunday, March 02, 2014

Symfony 2: The Basics

Symfony 2: The Basics

In this first introduction video (of a new series), I'll show you the basics of working with the Symfony 2, PHP framework.

Sunday, March 02, 2014

Create a carousel out of nothing but CSS

Create a carousel out of nothing but CSS

You don't need JavaScript to build a carousel any more, Ben Schwarz introduces a CSS library that does the job.