background preloader

Le guide ultime pour accélérer son développement frontend

Le guide ultime pour accélérer son développement frontend
Il existe deux types de développeurs : ceux qui développent vite (et bien) et les autres. En tant que développeur frontend vous vous êtes sûrement déjà rendu compte que certaines parties de votre travail/passion était redondantes et qu'il était souvent possible d'aller plus vite. Bref, je vais vous apprendre à passer au niveau supérieur de productivité à travers une (longue) liste de conseils et d'astuces glanées sur le web. Sommaire 1. Avant toute chose je tiens à vous faire remarquer que ce guide est le fruit de ma réflexion et de mon expérience du développement frontend. Cet article provient à l'origine d'un post sur Quora que j'ai écrit pour répondre à la question "Quelles sont les meilleurs astuces pour gagner du temps lors d'un développement front ?". 2. Pendant longtemps sur mes projets personnels j'ai pris l'habitude de toujours débuter en négligeant la phase de conception. Astuce n°1 : Ne jamais mettre la charrue avant les boeufs Définir les grandes lignes Réaliser des prototypes Related:  COURS, TUTORIELS et Co

Waves Action/Event Works fully with jQuery and JavaScript click event handlers, like Snarl Download the latest version of Waves from Github repository. <! Advanced: Waves also provide LESS, SCSS, and SASS source. Attach the effect To attach Waves's effect (or we usually called it as "the ripple") to HTML element, you can use Waves.attach() <a href="#" class="button">Click Here</a><script type="text/javascript"> Waves.attach('.button');</script> Waves.attach() comes with 2 parameters, the first is DOM element that you want to be attached (or string that represent it, like jQuery), and the second one is array of CSS classes that will be put on the element. <a href="#" class="button">Click Here</a><script type="text/javascript"> Waves.attach('.button', ['waves-button', 'waves-float']);</script> Initialize After you attach Waves to your HTML element, you can initialize Waves with Waves.init() to start the effect. Waves is designed to be flexible. Helper classes Quick Fix IE Tap highlight on Windows Phone

5 sites majeurs d'e-learning/dev, graphisme, webdesign [Total : 1 Moyenne : 5/5] Pour notre plus grand bonheur les sites proposant des tutoriels et des cours d’e-learning autour du web se multiplient. Aujourd’hui l’auto-apprentissage n’est plus une option pour celui où celle qui se veut créatif, surprenant ou simplement curieux. A l’heure où les MOOC (Massive Open Online Cours) fleurissent, il m’a semblé bon de vous proposer un listing de 5 sites d’e-learning à conserver dès maintenant dans vos marques-page. 1 – Alsacréations Domaines abordés : HTML et CSSAccessibilité, bonnes pratiques et ergonomie pour personnes déficientes ou handicapésDéveloppement PHP, MySQL, AjaxCMS : WordPress, SPIP, CMS Made SimpleJavascript et donc jQueryXMLWebdesign et graphisme Niveau de connaissance : Débutant à Avancé En résumé : Alsacréations est une agence web basée à Strasbourg en Alsace. 2 – Grafikart HTML et CSSJavascript et jQueryPHPCakePHPFlashSymfony 2PhotoshopCMS : WordPressWebdesign et graphisme

jQuery.mmenu, app look-alike menus with sliding submenus Team8 - Graphisme et Web Design Web Starter Kit — Web Fundamentals Download Web Starter Kit (beta) What is Web Starter Kit? Web Starter Kit is an opinionated boilerplate for web development. Tools for building a great experience across many devices and performance oriented. Helping you to stay productive following the best practices outlined in Google's Web Fundamentals. A solid starting point for both professionals and newcomers to the industry. Features Quickstart Download the kit or clone the repository and build on what is included in the app directory. There are two HTML starting points, from which you can choose: index.html - the default starting point, containing Material Design layout.basic.html - no layout, but still includes our minimal mobile best-practices Be sure to look over the installation docs to verify your environment is prepared to run WSK. Web Performance Web Starter Kit strives to give you a high performance starting point out of the box. Browser Support ChromeEdgeFirefoxSafariOperaInternet Explorer 9+ Troubleshooting Docs and Recipes

Developer Network Créer un sitemap - Centre d'aide Search Console Cette page explique comment créer un sitemap et l'envoyer à Google. En savoir plus sur les sitemaps Créer et envoyer un sitemap : Déterminez quelles pages de votre site nous devons explorer, ainsi que la version canonique de chaque page. Choisissez le format de sitemap que vous souhaitez utiliser. Vous pouvez créer votre sitemap manuellement. Formats de sitemaps Nous acceptons plusieurs formats de sitemaps, décrits ci-après. Tous les formats imposent la même limite aux sitemaps : 50 Mo (sitemaps non compressés) et 50 000 URL. Voici un exemple très simple de sitemap XML indiquant l'emplacement d'une URL : <? Des exemples plus complexes et une documentation complète sont disponibles sur sitemaps.org. Vous y trouverez des exemples de sitemaps spécifiant des pages alternatives et de sitemaps pour les actualités, les images ou les vidéos. Si vous possédez un blog doté d'un flux RSS ou Atom, vous pouvez envoyer l'URL du flux en tant que sitemap. Nous acceptons les flux RSS 2.0 et Atom 1.0.

Ébauche de workflow Gulp : tâches courantes, unCSS, includes HTML et critical-CSS Préambule : cet article part du principe que vous n’êtes pas totalement étranger aux notions et outils tels que LESS, NodeJS, Gulp ni à la ligne de commande, il ne s'agit d'un tutoriel de découverte de ces outils mais d'usage en environnement professionnel. Introduction Au sein de l’agence web Alsacreations.fr, nous avons instauré un processus de travail (un “workflow”) composé de langage LESS, compilé avec des tâches Gulp et saupoudré de conventions internes et de KNACSS. Le site goetter.fr est mon site personnel, mon bac à sable et mon espace de test pour moults expériences web. Cela m’a pris une journée de reprendre tout le workflow de mon site perso. L’environnement Gulp Dans la version précédente de mon site personnel, mon dossier de travail était le même que celui de production : je faisais simplement attention à ne pas mettre en prod les fichiers inutiles (CSS non minifié, images non optimisées) et j'employais le logiciel Prepros.io pour compiler mes fichiers. npm install gulp -g

Related: