Voyeur.js
Voyeur is a tiny Javascript library that lets you traverse and manipulate the DOM the way it should have been. Voyeur.min.js (1.2kb)
Rechercher dans JMag
Rechercher dans cet espace
OA
LB
CB
LB
JB
MB
FB
PC
RD
RD
ND
SF
DG
EG
MH
SI
AL
TL
CL
JM
VT
GT
DZ
Actualités
Responsive Design: The Picture Element Comes of Age ∙ An A List Apart Blog Post
Big news! The Filament Group has released a new version of Picturefill that will make the real picture element work in existing browsers, which means you can start using picture today.
Rethinking Mobile Tutorials: Which Patterns Really Work? | Smashing Magazine
In this post, we'll look at why many common tutorial patterns are ineffective and how you can leverage game design principles to increase user engagement.
Mobile Navigation: Image Grids or Text Lists?
For mobile navigation, image grids should be saved for deeper IA levels where visual differentiation between menu items is critical.
Prism JS : Syntax highlighter
Prism is a lightweight, extensible syntax highlighter, built with modern web standards in mind. It’s a spin-off from Dabblet and is tested there daily by thousands.
Tips for Mobile Design by @lukew (avec images, tweets) · bombayhustle · Storify
From the venerable Luke Wroblewski (@lukew)
Mobile first versus Responsive Web Design | Le bloc-notes ; ergonomie & UX
Deux sujets à la mode dans un même titre, si avec ça je ne fais pas péter le compteur de visites, je n’ai plus qu’a me tourner vers le porno ! Alors oui, c’est deux sujets à la mode mais qui me paraissent mal compris, individuellement d’une part et ensemble d’une autre part. J’ai déjà évoqué la problématique du Responsive Web Design (RWD en abrégé pour la suite.) dans cet article. Je ne vais donc pas revenir en détail dessus. (Lisez-le pour suivre ce que je vais raconter par la suite.). Ce qu’il faut retenir c’est que cette méthode d’adaptation des sites Web en fonction du support a des limites liées aux usages et aux conditions techniques.
Dropzone.js
DropzoneJS is an open source library that provides drag'n'drop file uploads with image previews
Focal Point: Intelligent Cropping of Responsive Images | Design Shack
Focal Point is a GitHub project and CSS framework created by Adam Bradley. As you know, the concept of responsive images requires that any images on your page resize and reflow to achieve optimal layout for the current viewport size. Focal Point takes this idea a step further though and not only resizes your images, but crops them as well.
Creating Style Guides
A style guide, also referred to as a pattern library, is a living document that details the front-end code for all the elements and modules of a website or application. It also documents the site's visual language, from header styles to color palettes. In short, a proper style guide is a one-stop guide that the entire team can reference when considering site changes and iterations. Susan Robertson shows us how to build and maintain a style guide that helps everyone from product owners and producers to designers and developers keep an ever-changing site on brand and on target.
IE11's Enterprise Mode (basically IT-managed IE8-frame)
Enterprise Mode for Internet Explorer 11, [...] provides better compatibility for older versions of Internet Explorer and tools to manage which Web apps use it. Businesses can benefit from the modern web standards, better performance, and increased security of our latest browser, while extending existing investments in legacy web apps. [...] Businesses can benefit from the modern Web standards, better performance, and increased security of our latest browser, while extending existing investments in legacy Web apps. http://blogs.msdn.com/b/ie/archive/2014/04/02/stay-up-to-date-with-enterprise-mode-for-internet-explorer-11.aspx
jQuery Circliful Plugin - Documentation
Circliful is a jQuery plugin for showing circle statistics. Based on HTML5 canvas, it do not use any images.
jQuery URLive by Mark Serbol
jQuery URLive, URL live preview plugin
Resumable.js, JavaScript magic for simultaneous, stable and resumable uploads
A JavaScript library providing multiple simultaneous, stable and resumable uploads via the HTML5 File API
jQuery CollagePlus - an image gallery plugin by Ed Lea
This plugin for jQuery will arrange your images to fit exactly within a container. You can define the padding between images, give the images css borders and define a target row height.
Form Label Design – David Bushell – Web Design & Front-end Development
It's impossible to tell if an input field is empty with CSS selectors (the :empty pseudo-class represents any element that has no children). My experiment abuses :valid and because the input field has a required attribute it becomes invalid when empty. For this reason the technique only works as expected on <input type="text">. With more complex validation requirements, like an email, the floating label won't appear immediately.
A Better Fluid Responsive Table - CodePen
Based on previous work by [Geoff Yuen](http://codepen.io/geoffyuen/details/FCBEg/), improved with JavaScript and semantic markup.
flexbox in 5 minutes
The Flexbox Layout module currently a W3C Candidate Recommandation aims at providing a more efficient way to lay out, align and distribute space among items in a container, even when their size is unknown and/or dynamic. The main idea behind the flex layout is to give the container the ability to alter its items’ width/height to best fill the available space. They work well for pages, they lack flexibility to support large or complex applications especially when it comes to orientation changing, resizing, stretching, shrinking, etc. Flexbox in 5 minutes is an interactive tour of all the major features of the new CSS property: flexbox. It’s built using Knockout.js. Read more at http://www.webappers.com/2014/04/07/learn-flexbox-in-5-minutes-with-interactive-tour/#mFkH3cEx42mDr0Pe.99
iHover
iHover is an impressive hover effects collection, powered by pure CSS3, no dependency, work well with Bootstrap 3!
A List of Foundational JavaScript Tools
In our boot camps, students are introduced to several tools and libraries to expand the abilities of their code. Kalina, one of our current JavaScript students, compiled a list of these tools and wanted to share it with other Code Fellows.
