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 [...]
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 [...]
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 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).
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 */ [...]
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 [...]
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 – 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 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 [...]
Can you make Cool CSS stuff? Show us your CSS skills at CSSdo.it, The CSS Playground for Front-end Developers.
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 [...]
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 [...]
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 [...]
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 [...]
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)
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 [...]
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 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 [...]
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:
I recently came across a solution on CSSPlay for a JavaScript free lightbox that uses invalid markup. So, being a sucker for a challenge, I set myself the task of creating one with valid markup and I eventually succeeded. Note: This article assumes you have a basic understanding of (X)HTML and CSS. Source: Think Vitamin
Powered by 
