Front-end Developer Blog and Resources on Css3, Javascript and HTML5

Latest Article

Speed up your site load time to meet expectations of visitors and search engines

Posted 31 January 2013
0 Comments

How to speed up your site to meet the expectations of visitors and search engines. Below you will find a list of tools to help you measure your site’s speed and identify bottlenecks. We’ll also review techniques like CSS sprites, JavaScript minification, lazy loading, and CDN. Even with increasingly fast Internet access and responsive [...]

More Articles

Front-end performance for front-end developers and web designers

It’s hard, if not impossible, to deny that performance is by far one of the most critical aspects of any decent web project, be it a small portfolio site, a mobile-first web app, right through to a full-scale ecommerce project. Studies, articles and personal experience all tell us that fast is best. Performance is not only hugely [...]

Extending JavaScript – The Right Way

JavaScript comes with a lot of great functionality built in, but what if there is a function you need which is missing. How can we build them in seaminglessly in an elegant way that extends the functionality of our beloved JavaScript. The following will outline a couple methods to extend the existing functionality of JavaScript, [...]

Spritepad Drag & Drop CSS Sprites Generator

CSS sprites are great for minimizing the number of requests our websites perform by embedding multiple images in a single image and displaying the appropriate ones using background-position. However, once the images are placed on a canvas, finding the positions of each item is a time-consuming process, here comes in SpritePad as an impressive web app.

Hammer.js JavaScript library for multi-touch gestures

Hammer.js is a lightweight (only 2kb) JavaScript library for multi-touch gestures. It’s easy implementation of touch events in your website. The gestures supported by Hammer.js are: tap, double tap, hold, drag, and transform (such as pinch to zoom).

Animated Responsive Layout with CSS3 Media Queries

What Are Media Queries CSS3 brings us many new features we use for our web designs and one of the features that can help improve the web site usability is Media Queries. Media Queries Boilerplate /* Smartphones (portrait and landscape) ———– */ @media only screen and (min-width : 320px) and (max-width : 480px) { /* Styles */ [...]

Twitter’s Bootstrap ported to jQuery UI widgets

A Bootstrap-themed kickstart for jQuery UI widgets. This is an awesome resource for jQuery and Twitter Bootstrap users that combines the power of both. It is a jQuery UI theme that not only brings Bootstrap-themed widgets but also enables us to use (most) of Twitter Bootstrap side-by-wide without any components being broken visually. With this [...]

Top Responsive Layout and CSS Frameworks

Less Framework 4 The Less Framework contains 4 adaptive layouts and 3 sets of typography presets, all based on a single grid, composed of 68 px columns with 24 px gutters. The idea is to first code the Default Layout (992 px), and then use CSS3 media queries to code several child layouts: 768, 480, [...]

PanoJS3 Javascript panoramic panning and zooming widget

PanoJS3 – An interactive JavaScript widget for panning and zooming a panoramic image stitched together dynamically from smaller tiles. This widget can be used for viewing images that are much larger than the available space in the browser viewport. Examples include panoramas, maps or high resolution document scans.

Web developers go mobile by mastering new development skills (Dutch Mobile Conference)

Web developers go mobile by mastering new development skills Amsterdam, March 13, 2012 – The first Dutch Mobile Conference (DMC), June 7, 8 & 9 in Amsterdam, will help developers create their next innovative mobile web apps. The rise of web applications Back in the 90’s computers had propriety (native) software which had to be recreated for [...]

CSSdo.it – CSS Playground for Front-end Developers

Can you make Cool CSS stuff? Show us your CSS skills at CSSdo.it, The CSS Playground for Front-end Developers.

Learning HTML, CSS, and Javascript from the Ground Up

Are you looking for a basic understanding of how UIs are created on the web or who wants to brush up outdated UI development knowledge? Or maybe you’d like to learn more about the medium you’re designing for and gain basic tools for prototyping designs? Do you want a better understanding of the web and [...]

Create Pure CSS Icons using just CSS and semantic HTML

An experiment that uses pseudo-elements to create 84 simple GUI icons using CSS and semantic HTML. Shared as an exercise in creative problem solving and working within constraints. This is not a “production ready” CSS icon set. The HTML is very simple and it relies on CSS pseudo-elements rather than extraneous HTML elements. Known support: Firefox 3.5+, Safari [...]

Make your website faster with Optimizing JavaScript code

Recommended experience: Working knowledge of JavaScript Client-side scripting can make your application dynamic and active, but the browser’s interpretation of this code can itself introduce inefficiencies, and the performance of different constructs varies from client to client. Here we discuss a few tips and best practices to optimize your JavaScript code. Working with strings String [...]

Improve web standards support and accessibility in html emails

Web standards are so important for email, while working with email client developers to ensure that emails render consistently. The Email Standards Project is about working with email client developers and the design community to improve web standards support and accessibility in email. The project was formed out of frustration with the inconsistent rendering of [...]

Building native cross platform applications with JavaScript and jPath

jPath is a platform for developing cross – platform native applications using JavaScript and HTML. Project is in “pre-alpha” state, so don’t expect to see very descriptive information on this page. You can download this demo here: Demo 12-07-2011 (jPath + Ace editor)

20 Free Online CSS3 Generator Tools

CSS3 has taken web designing to a new platform. With features like css3 rounded corners and text-shadow, designers are no longer required to rely on bulky CSS hacks or graphics. However, with different browsers having their specific implementation of CSS3 it’s a load on designers to remember the syntax for each and every browser. To make [...]

15+ Web developer Tools a Front-end Developer can’t life without

IE WebDeveloper Toolbar Is a free plugin The Microsoft Internet Explorer Developer Toolbar provides a variety of tools for quickly creating, understanding, and troubleshooting Web pages. Features: Explore and modify the document object model (DOM) of a Web page. Locate and select specific elements on a Web page through a variety of techniques. Selectively disable Internet [...]

Doctype TV is the show for people who make websites.

Doctype is the show for people who make websites. Whether you’re a designer that wants to learn some coding or a developer that thinks everything they make looks like crap, Doctype is the show for you! Every episode, Nick and Jim break down the latest topics and trends in web design and web development, from [...]

CSS Zen Coding, a new fast way of writing CSS and HTML code

Zen Coding is an editor plugin for high-speed HTML, XML, XSL (or any other structured code format) coding and editing. The core of this plugin is a powerful abbreviation engine which allows you to expand expressions—similar to CSS selectors—into HTML code. For example:

Lifestream

free hit counter