Javascript & Webdesign » css http://js4design.com Les meilleures ressources Javascript pour développeurs web front-end (et quelques questions que je me pose) Wed, 04 Jan 2012 14:52:28 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 Devenez un p***** de développeur http://js4design.com/devenez-developpeur-1328 http://js4design.com/devenez-developpeur-1328#comments Wed, 04 Jan 2012 14:01:15 +0000 Bruno Bichet http://js4design.com/?p=1328

Programming, motherfucker est une communauté de développeurs humiliés depuis des années par les programmes, les méthodologies et le management, tous centrés sur les heures facturables et les tests sans intérêt. Alors que le développeur veut surtout… développer. Tiens, en parlant de développement web, voici une sacrée liste de tutoriels qui devrait faire de vous un p***** de développeur ^__^

Graphics Programming

Language Agnostic

ASP.NET MVC

Assembly Language

Bash

C / C++

C#

Clojure

ColdFusion

DB2

Delphi / Pascal

Django

Erlang

Flex

F#

Forth

Git

Grails

Haskell

HTML / CSS

Java

JavaScript

JavaScript (Node.js specific)

Latex

Linux

Lisp

Lua

Maven

Mercurial

Nemerle

.NET

NoSQL

Oberon

Objective-C

OCaml

Oracle Server

Oracle PL/SQL

Parrot / Perl 6

Perl

PHP

PowerShell

Prolog

PostgreSQL

Python

R

Ruby

Ruby on Rails

Scala

Scheme

Smalltalk

Subversion

SQL

Vim

Emacs

Merci à :

]]> http://js4design.com/devenez-developpeur-1328/feed 3 Minify — Accélérez l’affichage des pages en réduisant le nombre de requêtes HTTP http://js4design.com/minify-accelerer-affichage-pages-reduction-requetes-http-1166 http://js4design.com/minify-accelerer-affichage-pages-reduction-requetes-http-1166#comments Sat, 26 Feb 2011 15:00:52 +0000 Bruno Bichet http://js4design.com/?p=1166

Minify est un script PHP5 dont l’objectif est d’aider les webmasters à atteindre un des objectifs les plus importants des règles de hautes performances pour les sites web proposées par Yahoo! : diminuer le nombre de requêtes HTTP. Pour y parvenir, Minify combine (concatène) les fichiers CSS ou Javascript. En prime, il supprime les commentaires et les espaces en trop. Minify se charge même de l’encodage gzip tout en envoyant les bons en-têtes (headers) au navigateur.

Avant Minify

Après Minify

Ces deux images issues d’un test complet de Minify montrent comment ce script PHP élimine 5 requêtes HTTP et réduit la bande passante nécessaire aux fichiers Javascript et CSS de 70% !

Grosses cerises sur le bouquet déjà bien garni de Minify :

  • WP-Minify — Plugin pour WordPress
  • W3 Total Cache — Ce plugin indispensable pour tout site WordPress est prêt pour Minify, il ne reste plus qu’à l’activer et à spécifier les fichiers Javascript et CSS que vous voulez concaténer et minifier. Attention toutefois à bien respecter l’ordre d’apparition des différents fichiers dans votre code et l’endroit où le script affichera le lien pour le fichier généré. En cas de problème, la version autonome permet de créer des groupes de fichiers que l’on pourra placer où l’on veut dans la page : dans le head ou juste avant la fermeture de la balise body selon vos besoins.
  • Un Helper pour Zend Framework est également disponible.

 

]]> http://js4design.com/minify-accelerer-affichage-pages-reduction-requetes-http-1166/feed 2 Lightbox CSS avec tabindex et pseudo-classe :focus http://js4design.com/lightbox-css-tabindex-pseudo-classe-focus-1072 http://js4design.com/lightbox-css-tabindex-pseudo-classe-focus-1072#comments Tue, 21 Dec 2010 08:36:24 +0000 Bruno Bichet http://js4design.com/?p=1072

Lightbox sans Javascript – Les Lightbox s’affichent généralement suite à un événement click capturé par Javascript. CSS ne possède pas de pseudo-classe :click, mais cela n’a pas empêché Jérémy Barbe (@capitainemousse) de créer une Lightbox full CSS en remplaçant l’événement click par la pseudo-classe :focus et la propriété tabindex pour permettre aux images d’avoir le «focus». Voir la démonstration.

Voir aussi :

]]> http://js4design.com/lightbox-css-tabindex-pseudo-classe-focus-1072/feed 3 CSS Text Wrapper — Habiller vos textes avec des formes non rectangulaires http://js4design.com/css-text-wrapper-1010 http://js4design.com/css-text-wrapper-1010#comments Sun, 17 Oct 2010 10:12:19 +0000 Bruno Bichet http://js4design.com/?p=1010

Fini les textes rectangulaires ! CSS Text Wrapper habille votre textes HTML avec n’importe quelle forme : courbe, zig-zag ou ce que vous voulez. Suivez les instructions et copiez-collez le code généré. Parmi les options possibles, on trouve la largeur et la hauteur de la zone de texte, l’interlignage, la taille de la police de caractère, et la zone de saisie de votre texte au format HTML.

Choisissez ensuite entre les trois méthodes :

  1. CSS en ligne dans un attribut HTML `style`,
  2. HTML avec des classes CSS séparée,
  3. Javascript.

Merci à @martin1975 (Une araignée au plafond) pour le lien o/

]]> http://js4design.com/css-text-wrapper-1010/feed 2 ChangeClass — Changer de classe CSS à la volée http://js4design.com/changer-de-classe-css-a-la-volee-134 http://js4design.com/changer-de-classe-css-a-la-volee-134#comments Mon, 23 Aug 2010 10:36:49 +0000 Bruno Bichet http://www.js4design.com/?p=134

ChangeClass — Changer une classe CSS à la volée. Trouvé sur cet excellent article de Noupe sur l’utilisation de Javascript et de jQuery pour la majorité des solutions pour régler 12 problèmes courant liés aux navigateurs. Via @zeubeubeu. 

function changeClass(oldClass, newClass) {
    var elements = document.getElementsByTagName("*");
    for( i = 0; i < elements.length; i++ ) {
        if( elements[i].className == oldClass ) elements[i].className = newClass;
    }
}

]]> http://js4design.com/changer-de-classe-css-a-la-volee-134/feed 6 30 astuces et stratégies de développement avec jQuery http://js4design.com/30-astuces-et-strategies-de-developpement-avec-jquery-876 http://js4design.com/30-astuces-et-strategies-de-developpement-avec-jquery-876#comments Tue, 13 Jul 2010 15:44:55 +0000 Bruno Bichet http://js4design.com/?p=876

Nick Parsons de Webitect nous propose sur Pro Blog Design 30 bouts de codes jQuery en prêt-à-porter taillés dans les meilleurs tissus. Dans les rayons, vous trouverez de quoi habiller les longues soirées d’été :

  1. Delay with Animate() or delay(),
  2. Loop through Elements Backwards
  3. Is There Anything in the jQuery Object?
  4. Access iFrame Elements
  5. Equal Height Columns
  6. Find a Selected Phrase and Manipulate It
  7. Hack Your Titles to Prevent Widows
  8. Add Pseudo-Selector Support in IE
  9. Manage Search Box Values
  10. Create a Disappearing « Back-to-Top » Link
  11. Easily Respond to Event Data
  12. Encode HTML Entities
  13. Friendly Text Resizing
  14. Open External Links in a New Window
  15. Gracefully Degrading AJAX Navigation
  16. Create an Array of GET variables
  17. Partial Page Refresh Using load()
  18. Skin with jQuery UI
  19. Include Other Scripts
  20. Use Body Classes for Easy Styling
  21. Optimize Your Performance
  22. Adapt Your Scripts to Work Cross-Browser – The Right Way
  23. Configure jQuery to be Compatible with Other Libraries
  24. Efficiently Store Element-Specific Information with data()
  25. Extend/Modify Existing jQuery Functions
  26. Reverse Engineer before() and after()
  27. Add an isChildOf() Test
  28. Add Custom Selectors
  29. Smooth Scrolling Without Plugin
  30. Add Tabs without a Plugin

Lire 30 Pro jQuery Tips, Tricks and Strategies

]]> http://js4design.com/30-astuces-et-strategies-de-developpement-avec-jquery-876/feed 1 Étendre la zone cliquable d’un lien à l’élément parent avec jQuery http://js4design.com/etendre-la-zone-cliquable-des-liens-aux-elements-parents-avec-jquery-864 http://js4design.com/etendre-la-zone-cliquable-des-liens-aux-elements-parents-avec-jquery-864#comments Tue, 22 Jun 2010 13:01:43 +0000 Bruno Bichet http://js4design.com/?p=864

Pour étendre la surface cliquable d’un lien les CSS sont bien utiles : il suffit d’augmenter le padding de l’ancre concernée. Mais ne serait-il pas judicieux de rendre cliquable l’élément parent d’un lien ? C’est ce que propose Eroan Boyer dans son billet Étendre la portée d’un lien avec Jquery : 

<script type="text/javascript">
    $(function(){
        $(".zonecliquable").mouseover(function(){
            $(this).css("cursor","pointer").find("a").css("text-decoration","underline");
        }).mouseout(function(){
        $(this).find("a").css("text-decoration","none");}).click(function(e){
            document.location.href = $(this).find("a").attr("href");
            e.preventDefault();
        });
    });
</script>
Notons toutefois que HTML5 permet à la balise a de contenir d’autres éléments, comme le suggère le W3C Working Draft : 
<a href="http://ad.example.com/?adid=1929&amp;pubid=1422">
    <section>
        <h1>Mellblomatic 9000!</h1>
        <p>Turn all your widgets into mellbloms!</p>
        <p>Only $9.99 plus shipping and handling.</p>
    </section>
</a>

]]> http://js4design.com/etendre-la-zone-cliquable-des-liens-aux-elements-parents-avec-jquery-864/feed 5 Modernizr — Détection des fonctionnalités CSS3 et HTML5 http://js4design.com/modernizr-detection-des-fonctionnalites-css3-et-html5-690 http://js4design.com/modernizr-detection-des-fonctionnalites-css3-et-html5-690#comments Thu, 01 Apr 2010 13:26:53 +0000 Bruno Bichet http://js4design.com/?p=690

Modernizr est une petite bibliothèque Javascript qui détecte la prise en charge (ou non) des fonctionnalités CSS3 et HTML5 comme @font-face, canvas, video, rgba(), border-radius, les fonds multiples, CSS Columns, etc. Modernizr teste plus de 20 fonctionnalités en quelques millisecondes pour ajouter des classes spécifiques dans la balise html indiquant indiquer la prise en charge (ou non) des propriétés testés par le navigateur.

Voici un exemple assez parlant. Si le navigateur accepte les images de fond multiples, la classe .multiplebgs est ajoutée à l’élément html, sinon c’est la classe .no-multiplebgs qui s’inscrit, ce qui simplifie la mise en place de fallbacks. 

.multiplebgs div p {
    /* properties for browsers that
    support multiple backgrounds /
}
.no-multiplebgs div p {
    / optional fallback properties
    for browsers that don't */
}

]]> http://js4design.com/modernizr-detection-des-fonctionnalites-css3-et-html5-690/feed 3 Carrousel fonctionnel sans Javascript http://js4design.com/carrousel-fonctionnel-sans-javascript-593 http://js4design.com/carrousel-fonctionnel-sans-javascript-593#comments Tue, 02 Mar 2010 12:13:55 +0000 Bruno Bichet http://www.js4design.com/?p=593

Content Switcher — Bel exemple de mise en place d’un système permettant de passer d’un contenu à un autre via un menu en utilisant les concepts de l’amélioration progressive et du Javascript non intrusif. Ce Carrousel est d’abord pensé pour fonctionner en HTML et CSS et peut bénéficier des améliorations apportées par Javascript (en l’occurrence jQuery) pour avoir des transitions plus funky entre les contenus. Via JPV.

]]> http://js4design.com/carrousel-fonctionnel-sans-javascript-593/feed 2 Implémentation jQuery du module CSS3 Template Layout http://js4design.com/implementation-jquery-du-module-css3-template-layout-503 http://js4design.com/implementation-jquery-du-module-css3-template-layout-503#comments Thu, 04 Feb 2010 07:50:23 +0000 Bruno Bichet http://www.js4design.com/?p=503

css-template-layout est la transcription Javascript du module CSS Template Layout Module. Ce mécanisme prévu par CSS3 permet de faire une grille de mise en page indépendante de la position des éléments dans le flux, sous la forme de déclarations CSS.

Par exemple, une mise en page de type : 1 en-tête, 2 colonnes et 1 pied de page peut être représenté de la manière suivante : 

body {
    display : "aa"
"bc"
"dd";
}
#header    { position : a; }
#footer    { position : d; }
#content   { position : b; }
#sidebar   { position : c; }
Voir les différentes possibilités de mise en page sur CSS Template Layout demos.

Via les Professionnels francophones du développement web.

]]> http://js4design.com/implementation-jquery-du-module-css3-template-layout-503/feed 2 jqTransform — Stylez vos formulaires avec jQuery et CSS http://js4design.com/jqtransform-stylez-vos-formulaires-avec-jquery-et-css-499 http://js4design.com/jqtransform-stylez-vos-formulaires-avec-jquery-et-css-499#comments Wed, 03 Feb 2010 17:48:06 +0000 Bruno Bichet http://www.js4design.com/?p=499

jqTransform est un plugin jQuery qui améliore légèrement — mais sûrement — l’apparence des formulaires web en gardant l’essentiel : les formulaires ressemblent toujours à des formulaires ! Les champs text voient leurs coins légèrement arrondis, ainsi que les case à cocher avec une coche du plus bel effet. Les boutons radio et les menus select sont eux aussi légèrement stylés.

]]> http://js4design.com/jqtransform-stylez-vos-formulaires-avec-jquery-et-css-499/feed 4 Menus déroulants et autres fantaisies avec :hover :focus :active :target pour IE6 http://js4design.com/menus-deroulants-et-autres-fantaisies-avec-hover-focus-active-target-pour-ie6-118 http://js4design.com/menus-deroulants-et-autres-fantaisies-avec-hover-focus-active-target-pour-ie6-118#comments Mon, 21 Dec 2009 15:40:46 +0000 Bruno Bichet http://www.js4design.com/?p=118

Menu déroulant Suckerfish — réécriture du très populaire Suckerfish Dropdown pour implémenter des menus déroulants sur plusieurs niveaux. Ce script de 12 lignes crée une classe sfHover sur un élément li pour émuler la pseudo-classe :hover pour Internet Explorer qui ne l’applique que sur les ancres a, notamment. Ce script est léger, accessible, basé sur les feuilles de styles et non-intrusif (à part dans la feuille de style puisqu’il faut doubler le sélecteur li:hover avec la classeli.sfHover).

Suckerfish Shoal — Si le script précédent vous a plu, vous êtes mûrs pour passer la vitesse supérieure avec ce jeu de fonctions dérivées de Suckerfish pour émuler les pseudo-classes :hover, :focus, :active et :target sur l’élément HTML que vous voulez :

  • `suckerfish(sfHover, « LI », « nav »);` pour appliquer `:hover` sur un élément `li` placé dans `#nav`.
  • `suckerfish(sfFocus, « INPUT »);` pour donner le `focus` aux éléments `input`.

Superfish — Menu déroulant avec des morceaux d’accessibilité (délais avant l’ouverture, navigation avec la touche tab). Vous pouvez voir ce menu déroulant en action sur css 4 design.

]]> http://js4design.com/menus-deroulants-et-autres-fantaisies-avec-hover-focus-active-target-pour-ie6-118/feed 4 Sélectionner les éléments par leur classe avec getElementsByClassName http://js4design.com/selectionner-les-elements-par-leur-classe-avec-getelementsbyclassname-111 http://js4design.com/selectionner-les-elements-par-leur-classe-avec-getelementsbyclassname-111#comments Wed, 16 Dec 2009 09:02:10 +0000 Bruno Bichet http://www.js4design.com/?p=111

Vous le savez sans doute, mais si le DOM propose une fonction pour sélectionner un élément par son id ou son nom, ce n’est pas (encore) le cas pour sélectionner les éléments qui partagent une ou plusieurs classes. C’est là qu’intervient The Ultimate GetElementsByClassName déjà évoqué dans Utillisez le DOM et Javascript comme un chef pour redéfinir le comportement des balises HTML.

Quelques exemples d’utilisation :

  • getElementsByClassName("info-links"); — tous les éléments avec la classe info-links,
  • getElementsByClassName("col", "div", document.getElementById("container")); — tous les éléments div contenus dans #container et possédant la classe col,
  • getElementsByClassName("pince-me pince-moi"); — tous les éléments avec les classes pince-me et pince-moi.
]]> http://js4design.com/selectionner-les-elements-par-leur-classe-avec-getelementsbyclassname-111/feed 2 Excargot — Une mine de liens sur Javascript vient de rouvrir ! http://js4design.com/excargot-une-mine-de-liens-sur-javascript-vient-de-rouvrir-278 http://js4design.com/excargot-une-mine-de-liens-sur-javascript-vient-de-rouvrir-278#comments Fri, 11 Dec 2009 12:48:29 +0000 Bruno Bichet http://www.js4design.com/?p=278

Marie Neff est de retour à la barre d’Excargot qui propose depuis plus de 4 ans des ressources sur Javascript, CSS et le Webdesign en général. Faites chauffer les aggrégateurs et restez connectés ;)

]]> http://js4design.com/excargot-une-mine-de-liens-sur-javascript-vient-de-rouvrir-278/feed 1 cssQuery — accédez au DOM http://js4design.com/cssquery-accedez-au-dom-113 http://js4design.com/cssquery-accedez-au-dom-113#comments Wed, 09 Dec 2009 06:35:27 +0000 Bruno Bichet http://www.js4design.com/?p=113

cssQuery — Interroge le DOM via les sélecteurs CSS 1, CSS 2 et une partie de CSS 3. Alternative à jQuery et autres frameworks Javascript pour accéder aux éléments constitutifs du DOM quelque soit le navigateur pour environ 7 KB !

Quelques exemples d’utilisation :

  • var tags = cssQuery("body > div"); sélectionne toutes les balises div descendants directement de body,
  • var images = cssQuery("img", tags); donne la liste des balises img présentes dans la variable tags vue plus haut,
  • Devinez-donc ce que donne var argh = "p>a:first-child+input[type=text]~span";
]]> http://js4design.com/cssquery-accedez-au-dom-113/feed 0 dLite — une librairie Javascript « petit mais costaud » http://js4design.com/dlite-une-librairie-javascript-petit-mais-costaud-151 http://js4design.com/dlite-une-librairie-javascript-petit-mais-costaud-151#comments Tue, 01 Dec 2009 06:52:39 +0000 Bruno Bichet http://www.js4design.com/?p=151

dLite — Cette bibliothèque propose des fondations pour faciliter vos développements : trouver les éléments avec le même identifiant ou la même classe ; lancer une fonction lorsque le DOM est prêt ; ajouter ou enlever une classe à un élément ; ajouter ou enlever un gestionnaire d’événement (addEvent), etc. Tout ça, pour 4 ko seulement en version compressée, parce qu’il n’y a pas que jQuery dans la vie !

]]> http://js4design.com/dlite-une-librairie-javascript-petit-mais-costaud-151/feed 2 Changement de design «on the fly» avec jQuery http://js4design.com/changement-de-design-on-the-fly-avec-jquery-179 http://js4design.com/changement-de-design-on-the-fly-avec-jquery-179#comments Wed, 25 Nov 2009 08:26:17 +0000 Bruno Bichet http://www.js4design.com/?p=179

Je vous recommande ce tutoriel clair et didactique qui reprend pas à pas les étapes permettant de permuter deux maquettes sur un clic. L’idée est de changer une classe CSS à la volée et d’arranger le design en fonction des éléments que l’on veut voir apparaitre ou non. Dans un cas, on aura une liste avec une miniature et une description, dans l’autre, les images seront plus grandes et le texte aura disparu.

]]> http://js4design.com/changement-de-design-on-the-fly-avec-jquery-179/feed 0