CssGalleries

When I open up a PSD file that has been “prepared for Development”

Roberto — Tue, 26 Mar 2013 20:36:24 +0000

]]>

Links of the week

Roberto — Tue, 12 Mar 2013 19:39:24 +0000

The In-Between: Breakpoints. Break. Points. Points at which things break in your design. http://bit.ly/WEDcSC

Learning the Web Form Fundamentals http://bit.ly/j4GjTB

20 Great Examples of the Flat Trend in Web Design http://bit.ly/YHIYVX

Responsible Web Design | Smashing Coding http://bit.ly/WZdM25

Designing For The Multifaceted User http://bit.ly/ZwJtjI

parallel.js is a tiny library for multi-core processing in Javascript. It was created to take full advantage of the ever-maturing web-workers API. http://bit.ly/XRHdTQ

Sprite sheet animation with steps(). http://bit.ly/ZcEkAK

Efficient Event Targeting with jQuery http://bit.ly/YzkBdd

Fun With JavaScript and jQuery Loops http://bit.ly/YYVn7l

Website Launch Checklist for Web Designers http://bit.ly/YNN8Zz

Quick Tip: Don’t Forget the Viewport Meta Tag http://bit.ly/XqXBhT

Examining Responsive Navigation: Off Canvas Patterns http://bit.ly/13HmMAh

Simple cross browser detection of text changes for input and textarea elements using a jQuery custom event plugin http://bit.ly/c4wAyd

QueryLoader2 – Preload your images with ease - Gaya Design http://bit.ly/YQZBeM

jqFloat.js – A Floating Effect with jQuery! http://bit.ly/ZlIrXR

Transit - CSS transitions and transformations for jQuery http://bit.ly/YIq29z

Grapnel.js Simple, lightweight JavaScript Router with hash-based event handling http://bit.ly/ZF01cO

Stop Writing Classes - YouTube http://bit.ly/ZF4LiL

JavaScript Style Guide • GitHub http://bit.ly/YYpA7g

Links of the week

Roberto — Fri, 01 Mar 2013 15:44:09 +0000

Ditching responsive design — GoCardless Blog http://bit.ly/WI1duq

Why You Should Work From A Coffee Shop, Even When You Have An Office | Fast Company http://bit.ly/Y7ThA0

Building tomorrow’s web experiences http://bit.ly/12q3Zso

16 Best, Online Collaborative Design Apps for Creative Feedback and Client Sign-off http://bit.ly/XSduLd

Developers and designers unite! http://bit.ly/XqLBYO

The new rules of the responsive web | Webdesigner Depot http://bit.ly/14G2Tr6

Stop Misusing Select Menus - UX Movement http://bit.ly/WwWZGX

What is the difference between a checkbox and a radio button? | Cowirrie Commentary http://bit.ly/W057ha

dropzone.js provides drag'n'drop file uploads with image previews http://bit.ly/W70Ica

Mega Drop down menu css3 http://bit.ly/VzWoCp

Back to Basics: JavaScript Hoisting http://bit.ly/14MtHad

Passing Data From Server To Javascript On Page Load http://bit.ly/XFu3Kc

Please note the security concenrs at the bottom of the article.

You Don't Need the DOM Ready Event http://bit.ly/Uo101B

Easy List Splitter Create multiple lists from a single list ordering the items vertically http://bit.ly/WR4lo7

imagesLoaded.js jQuery plugin that triggers a callback after all images have been loaded http://bit.ly/VZe6PV

perfect-scrollbar Tiny but perfect #jQuery scrollbar plugin http://bit.ly/TPn9o3

Remove an Item From an Array with JavaScript http://bit.ly/WToBCy

The Skinny on CSS Attribute Selectors http://bit.ly/YGRpAc

Multiple Attribute Values | CSS-Tricks http://bit.ly/WTqBdZ

Code Style: A standard for Unicode icons in Web fonts http://bit.ly/WTrAe4

Links for the week

Roberto — Fri, 01 Mar 2013 15:41:24 +0000

Designing In The Transition To A Multi-Device World http://bit.ly/V9z9lX

Carousel Interaction Stats http://bit.ly/UewzcE

Character Codes -- HTML Codes, Hexadecimal Codes & HTML Names http://bit.ly/VUxBHk

Why Responsive Web Design Has To Win Out http://bit.ly/XP1JW9

Improving Your Responsive Workflow with Style Guides http://bit.ly/XKsP2E

Offsetting an HTML element in a flexible container http://bit.ly/12pKzEc

Adding Network Functionality To Any .Net Application in 3 Lines of Code http://bit.ly/WYl0TT

How Do You Structure JavaScript? The Module Pattern Edition http://bit.ly/XzYC2u

All you need to know about CSS Transitions http://bit.ly/15ce2kL

5 APIs that will transform the Web in 2013 http://bit.ly/11GiNnG

A JavaScript Security Flaw | Alex MacCaw http://bit.ly/WIUFwD

Revisiting JavaScript Objects http://bit.ly/Yr9CA3

jQuery custom content scroller http://bit.ly/VfQCa2

Resize flash dynamically with javascript and actionscript http://bit.ly/UeBRFd

Write another jQuery plug-in, kill a unicorn http://bit.ly/12EGdoj

Parsley.js Javascript forms validation.Powerful, UX aware & Dead simple. http://bit.ly/WqD0rJ

10 of the best polyfills http://bit.ly/XdLtNp

Links for the week

Roberto — Fri, 01 Mar 2013 15:39:30 +0000

Sketch VS Photoshop http://bit.ly/13mdOUt

When Infinite Scroll Doesn't Work · UsabilityPost http://bit.ly/157b0gy

A new responsive design process | Feature | .net magazine http://bit.ly/UMesLI

BEM: “Block”, “Element”, “Modifier”

The Evolution Of The BEM Methodology http://bit.ly/YHOU0a
Part 1: A New Front-End Methodology: BEM http://bit.ly/R1L0uy
Part 2: A New Front-End Methodology: BEM (Blocks Reiteration) http://bit.ly/Xu9pMD
Part 3: A New Front-End Methodology: BEM (File System Representation For A Block) http://bit.ly/YhJYRr

Front end standards http://bit.ly/U47BqM

Beyond jQuery http://bit.ly/Y3AeJg

Selectors: Select This! http://bit.ly/TUvRAs

Using White Space For Readability In HTML And CSS | Smashing Coding http://bit.ly/XnhZ2L

AutoCompleteJS » Home http://bit.ly/XOAZ6l

Navi.js Content Switcher for developers http://bit.ly/YE45r9

numerizer Parse numbers in natural language from strings http://bit.ly/13moeU1

w2ui New JavaScript UI Library http://bit.ly/Zuc9iZ

HTML5 2D renderer pixi.js revealed http://bit.ly/11ZID65

Links for the week

Roberto — Fri, 01 Mar 2013 15:36:41 +0000

Maintain Consistency With a Website Style Guide http://bit.ly/ZvbEBm

30 Beautiful Landing Pages Optimized for Converting Visitors into Users http://bit.ly/WmMt1n

Pixelapse Is Where Your Designs Live Version Control + Backup + Collaboration http://bit.ly/15KLmzw

Build responsive emails http://bit.ly/15N6Goa

Spacebar bug in Adobe Photoshop http://bit.ly/XDAmgR

Upcoming Web Design Events Mid 2013 http://bit.ly/ZLyqcg

What Should You Know About Content Before You Design? http://bit.ly/ZLyVmG

The Five Elements Of Modular And Adaptive Content http://bit.ly/XIzc3K

Collie - High Performance Animation Library for Javascript http://bit.ly/YRERFC

JustGage is a handy JavaScript plugin for generating and animating nice & clean gauges. http://bit.ly/ZETS2A

JavaScript Events And Responding To The User http://bit.ly/O76KYi

How They Did It: Inception Explained and Mailchimp’s 2012 Year in Review http://bit.ly/VKKp6b

The Problem Of CSS Form Elements http://bit.ly/XGa8u3

SIDEWAYS – jQuery fullscreen image gallery http://bit.ly/15l8bbR

Media Query Snippets - list of media queries even by devices http://bit.ly/Z0pHwK

Fixes for Mobile Safari Zoom-Orientation bug http://bit.ly/YDvQAj

Lea Verou, "More CSS Secrets: Another 10 things you may not know about CSS" at W3Conf 2013 http://bit.ly/Wk6VFz

Lunr.js is a small, full-text search library for use in the browser. It indexes JSON documents and provides a simple search interface for retrieving documents that best match text queries. http://bit.ly/12goVmL

Links for the week

Roberto — Thu, 27 Dec 2012 22:31:52 +0000

Traversty — headache-free DOM collection management and traversal http://bit.ly/UfxR2C

Using Underscore.js's debounce() to filter double-clicks http://bit.ly/Z0xmku

jQuery.Deferred is the most important client-side tool you have http://bit.ly/TV8aYD

Zynga Scroller Accelerated panning and zooming for DOM and Canvas http://bit.ly/TVdlYy Very Cool.

jQuery.signalRamp.js is a lightweight jQuery plugin that synchronizes UIs across all subscribed clients. Leveraging SignalR and SignalGrr as a SignalR proxy server, http://bit.ly/VWO6aE

How To Write Maintainable jQuery Applications - Intelligible Babble - Leland Richardson http://bit.ly/WpPyia

Conditionizr: the conditional free legacy, retina, script and style loader http://bit.ly/VaS4tU

Solving vs. Fixing Bugs http://bit.ly/10n32jI

Choose the right PHP framework | Feature | .net magazine http://bit.ly/TBWeg4

ScrobMaster allows you to attach events to scroll points based off registered DOM elements. http://bit.ly/U2vYrE

Asynchronous JS: Callbacks, Listeners, Control Flow Libs and Promises - Sebastian's Blog http://bit.ly/V6SWNX

A scalable real-time backend for your web app http://bit.ly/TCpCTm

The goal of Meteor is to provide a simple and fast way to develop web applications. Let's see if it is as good as it seems. http://bit.ly/10ntedZ

Analytics.js The hassle-free way to integrate analytics into any web application. http://bit.ly/12Ij5YI

enchant.js JavaScript Game Engine http://bit.ly/12IjqLb

Top JavaScript Frameworks for your next Mobile Project http://bit.ly/Uors80

IE7 and inline-block

Roberto — Mon, 10 Sep 2012 19:36:11 +0000

1. use Modernizr.

2. Add 2 rules:

#foo{
   display:inline-block;

}

.lt-ie8 #foo{
   display:inline;

}
Done.

Links of the week

Roberto — Wed, 29 Aug 2012 21:18:19 +0000

Plunk - An easy way to test clicks on a mobile phone. http://bit.ly/SUrBw2

Separate Mobile Website Vs. Responsive Website | Smashing Mobile http://bit.ly/RDLNav

Creative Background Styles and Trends in Web Design http://bit.ly/Rqwtfh

Inject Energy Into Your Mobile Design with Light Effects http://bit.ly/NUrlkb

Beyond Wireframing: The Real-Life UX Design Process http://bit.ly/STYDiP

10 Responsive Navigation Solutions and Tutorials http://bit.ly/N069rJ

Twitter Cards | Twitter Developers http://bit.ly/NX43Ku

Twitter cards make it possible for you to attach media experiences to Tweets that link to your content. Simply add a few lines of HTML to your webpages, and users who Tweet links to your content will have a "card" added to the Tweet that’s visible to all of their followers.

JavaScript Events And Responding To The User http://bit.ly/O76KYi

Standardista » CSS Specificity http://bit.ly/SUzfXk

Chirp.js — Tweets on your website, simply. http://bit.ly/MQvEeT

jQuery + google maps + Elevation - and styling of maps jsfiddle.net/aDfGa/

Code'n'run PHP. Everywhere. Kodiak PHP: The only iPad app with offline PHP code execution. http://bit.ly/PYQ1WZ

HTML5 Boilerplate – v4.0.0 | drublic http://bit.ly/O3qGbP

In google analytic you can:
See: https://github.com/h5bp/html5-boilerplate/blob/v4.0.0/doc/extend.md

Track jQuery AJAX requests in Google Analytics

/*
* Log all jQuery AJAX requests to Google Analytics
* See: http://www.alfajango.com/blog/track-jquery-ajax-requests-in-google-analytics/
*/
if (typeof _gaq !== "undefined" && _gaq !== null) {
$(document).ajaxSend(function(event, xhr, settings){
_gaq.push(['_trackPageview', settings.url]);
});
}

Track JavaScript errors in Google Analytics

(function(window){
var undefined,
link = function (href) {
var a = window.document.createElement('a');
a.href = href;
return a;
};
window.onerror = function (message, file, row) {
var host = link(file).hostname;
_gaq.push([
'_trackEvent',
(host == window.location.hostname || host == undefined || host == '' ? '' : 'external ') + 'error',
message, file + ' LINE: ' + row, undefined, undefined, true
]);
};
}(window));

Track page scroll

$(function(){
var isDuplicateScrollEvent,
scrollTimeStart = new Date,
$window = $(window),
$document = $(document),
scrollPercent;

$window.scroll(function() {
scrollPercent = Math.round(100 * ($window.height() + $window.scrollTop())/$document.height());
if (scrollPercent > 90 && !isDuplicateScrollEvent) { //page scrolled to 90%
isDuplicateScrollEvent = 1;
_gaq.push(['_trackEvent', 'scroll',
'Window: ' + $window.height() + 'px; Document: ' + $document.height() + 'px; Time: ' + Math.round((new Date - scrollTimeStart )/1000,1) + 's',
undefined, undefined, true
]);
}
});
});

Media Queries Galore

Roberto — Mon, 27 Aug 2012 20:41:31 +0000

Responsive Web Design: What It Is and How To Use It - Smashing Magazine http://bit.ly/j7D3p1

Understanding the Elements of Responsive Web Design http://bit.ly/e86rme

The 960 Grid System Made Easy http://bit.ly/a6KyjZ

Smarter Web Designs: Responsive and Customizable http://bit.ly/jaQFey

Situational Design for the Web http://bit.ly/jiiVcN

Big vs. small: Challenges in responsive web design | Webdesigner Depot http://bit.ly/k1k0SW

Media Queries a collection of responsive web designs http://bit.ly/lilott

Counter argument for the use of Responsive web design.

CSS Media Query for Mobile is Fool’s Gold « Cloud Four http://bit.ly/m5jjG2

41 Inspirational Responsive Web Designs Using CSS3 Media Queries | DesignCrowd Blog http://bit.ly/hsLQPM

The practicalities of CSS Media Queries, lessons learned. http://bit.ly/fxHzpW

Some resources that might help out. There are some technical ones but should help.

The practicalities of CSS Media Queries, lessons learned. - Bloop http://bit.ly/iZtogk

Different Stylesheets for Differently Sized Browser Windows http://bit.ly/c8MAX1

Switchy McLayout: An Adaptive Layout Technique http://bit.ly/aHCsPP

CSS3 Media Queries http://bit.ly/dh9gnh

Fluid Images http://bit.ly/bbwCZu

A List Apart: Articles: Responsive Web Design http://bit.ly/mFpXv6

CSS Media Queries & Using Available Space | CSS-Tricks http://bit.ly/aqrkAt

Less Framework is a cross-device CSS grid system based on using inline media queries. http://bit.ly/bxAtdQ

How To Use CSS3 Media Queries To Create a Mobile Version of Your Website - Smashing Magazine http://bit.ly/lXzWlB