HTML5 Zone is brought to you in partnership with:
  • submit to reddit
Phillip Haydon01/31/13
1633 views
0 replies

OAuth with NancyFX and WorldDomination.Web.Authentication

One of the biggest pains of building websites, in my opinion, is implementing OAuth providers. So PureKrome and myself decided to create WorldDomination: Web Authentication. The idea behind this framework is to keep it super simple to implement OAuth into your website, without the bloat.

Lorna Mitchell01/31/13
1319 views
0 replies

Printing PDF Bookmarks List

I used a tool called pdftk which is excellent, I've used it before for doing various other PDF-related things. To grab metadata such as bookmarks, use the dump-data command, like this:

Andrey Prikaznov01/31/13
1480 views
0 replies

Webkit Image Effects with Masks

The idea to study the masks came to me when I saw the Chrome browser logo on a Google website. I liked this effect and I wanted to understand how it works. Well, what is a mask?

Kay Hebbourn01/30/13
1532 views
0 replies

Challenge WordPress, Challenge Me!

I’m fed up with people telling me that WordPress is a platform for amateurs, or that it is not flexible or powerful enough for professionals or that it is just a blog not a website. Therefore, I am setting up this challenge. Challenge me to get my WordPress Website to do anything you want it to do. I (or someone in my team) will make it happen.

Hirvesh Munogee01/30/13
3108 views
0 replies

howler.js - A Modern Web Audio JavaScript Library

howler.js is a modern JavaScript library for web audio. The library was initially developed for an HTML5 game engine, but can also be used for web applications.

Hirvesh Munogee01/30/13
5456 views
0 replies

RoughDraft.js - A jQuery Plugin To Create & Prototype A Full Interactive HTML Mock-Up

RoughDraft. js is a jQuery plugin which allows you to create and prototype full interactive HTML mockups quickly and easily.

Allen Coin01/30/13
3663 views
0 replies

Tooling For The Modern WebApp Developer

"Tools are the enablers that help us bring an idea to fruition. Over the past year we've seen a crazy shift in how much web developers care about the tools they use." Presentation by Addy Osmani.

Paul Underwood01/29/13
1930 views
0 replies

Create A Page Template For Logged In Users

There are times that you would want a page only to be accessible for users which have logged into your the WordPress user manager. Such as if you have a members only area of your website which is only for logged in users, you need to make sure that the page can not be seen by any users who haven't logged in yet.

Raymond Camden01/29/13
2308 views
0 replies

Tip for PhoneGap Users - Modify the WWW template

Now that I've gotten comfortable with PhoneGap's command line I'm finding myself much more productive when building quick demos. By default, the new project has this fancy HTML. Luckily there is a quick fix for this.

Catalin Red01/29/13
2107 views
0 replies

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.

Scott Leberknight01/29/13
2839 views
0 replies

Scale and Crop an Image using Javascript and CSS

A common CSS problem is the need to crop and scale an image on a page. Scaling an image is easily done using the hight and width attributes of the image. Likewise cropping an image can be accomplished by using the image as a background of an element and setting the hight and width of the element.

Hirvesh Munogee01/28/13
1992 views
0 replies

Inpage SEO Checker - A JavaScript Library To Continuously Check Your SEO

Inpage SEO Checker is an interesting JavaScript library which continuously monitors your web pages for SEO factors. Whenever a page is not adhering to the proper SEO best practices, the JavaScript library produces a popup on the page which lists out the problems.

Scott Leberknight01/28/13
2740 views
0 replies

Multiple ways to draw an image using CSS, HTML and Javascript

In this post I'll go over 4 different ways you can draw images using CSS, HTML and Javascript.

Paul Underwood01/28/13
1996 views
0 replies

Fake Images Please?

The solution to dummy images is using a placeholder service like fake images please. This service allows you to create fake images at the create sizes using their API, which means you can quickly add these placeholders to your design but just typing in the image URL.

Hemanth Madhavarao01/28/13
1713 views
0 replies

Using a Grayscale Image to Indicate User is Offline

You may have noticed webapps images in Chrome going grayscale to indicate that the network is down. A simple demonstration of the same concept is shown here.

Hirvesh Munogee01/27/13
1502 views
0 replies

Tire - A JavaScript Library For DOM & Events Manipulation

Tire is a lightweight JavaScript library which allows you to perform DOM manipulations, AJAX requests and events handling.

Andrey Prikaznov01/27/13
1586 views
0 replies

Neat and Modern Main Section with CSS3

Today we look at the most basic elements of a page such as blocks and forms. I think that if we make all the blocks with the same styles – it would be boring, so (for a change), I prepared four types of blocks with custom headers and footers

Mark Needham01/27/13
1139 views
0 replies

Knapsack Problem in Haskell

I recently described two versions of the Knapsack problem written in Ruby and Python and one common thing is that I used a global cache to store the results of previous calculations. From my experience of coding in Haskell it’s not considered very idiomatic to write code like that and although I haven’t actually tried it, potentially more tricky to achieve.

Hirvesh Munogee01/26/13
1666 views
0 replies

Behave.js - A JavaScript Library To Add IDE-Style Behavior To HTML Text Areas

Behave.js is a lightweight JavaScript library which allows you to augment plain HTML text areas to have IDE-like behavior.

John Whish01/26/13
1181 views
0 replies

ColdFusion ORM Book Experimenting with CSS3 transition callbacks

I was discussing with my colleague Andy Beer about replacing some jQuery animation with CSS3 transitions so that we could make use of hardware acceleration. This lead me to start thinking about how you'd handle callbacks if you wanted to chain together animations as CSS doesn't have events.

Hirvesh Munogee01/25/13
2176 views
0 replies

Fangle - A JavaScript Library For Reactive Markdown Documents

Fangle is a JavaScript library for creating reactive Markdown documents. Your readers can interactively explore possibilities, play with parameters, and see the document update immediately.

Hirvesh Munogee01/25/13
4065 views
0 replies

HTML iOS Notifications - iOS-Style Notifications With CSS3 & JavaScript

HTML iOS Notifications is a simple JavaScript library which implements iOS style notifications with CSS3 and JavaScript. It allows you to call the notifications with a simple API and pass along a title and message parameters.

Allen Coin01/25/13
2339 views
0 replies

Brian Leroux talks WTFJS

Brian Leroux gives a presentation about "those very special irregularities, inconsistencies and just plain painfully unintuitive moments for the language of the web."

Allen Coin01/25/13
3526 views
0 replies

Unicode in Javascript

Mathias Bynens presents an interesting, in-depth look at the possibilities and limitations of unicode in JavaScript. (Like the preview image to the left, unicode U+1F4A9)

Jos Dirksen01/24/13
4759 views
0 replies

CPI Interactive index (15 years) created with Angular.js, bootstrap and d3.js

Here is a web application I created a couple of weeks ago before the holidays. If you click on the image the application will open and you can play around with the "corruption perception index" statistics from the last 15 years.