background preloader

Brackets, l'éditeur spécialisé front-end

Brackets, l'éditeur spécialisé front-end
Brackets est un éditeur de code open-source nouvelle génération, multi-plateformes, et tout particulièrement adapté au profil d'intégrateur et de webdesigner. L'interface de Brackets est avant tout conçue pour être agréable et ergonomique. Nul besoin d'aller fouiller dans la console ou des fichiers XML pour modifier la configuration ou installer des plugins. Principaux avantages Les éditeurs récents, notamment SublimeText, Atom et Brackets, s'adaptent de plus en plus aux nouvelles contraintes du front-end et apportent des fonctionnalités toujours plus riches. Brackets est clairement moins orienté PHP et back-end que certains concurrents mais compense largement ce déficit dans le domaine du webdesign. Jugez par vous-même : Live refresh Brackets propose par défaut un aperçu en direct dans le navigateur très pratique car il intègre la possibilité de mettre en exergue les éléments HTML et CSS ciblés dans le document au fur et à mesure de la frappe. Édition rapide Mais aussi Du côté des extensions

Project Parfait Project Parfait, est une expérimentation d'Adobe visant à proposer dans le navigateur une petite application (mais néanmoins très puissante) qui décompose les fichiers PSD envoyés, pour : extraire les codes couleurs extraire du code CSS copier-coller le texte exporter les calques dans des formats optimisés (gif, jpg, png) obtenir les dimensions des éléments ou les distances entre calques Bref, c'est un outil relativement léger et pratique lorsqu'il s'agit de faire de la découpe/intégration de page HTML et CSS à partir de maquettes Photoshop, et qu'on n'a rien d'autre sous la main. Par contre, il n'est pas encore idéal : en situation réelle, le code CSS produit est loin d'être... parfait (il est vrai qu'on ne peut pas faire de magie à partir d'une maquette graphique pure). La fonction de calcul de distance entre deux calques est néanmoins bien conçue : sélection d'un calque maintenir shift enfoncé sélectionner un autre calque Consultez aussi le sujet relatif sur le forum.

Dareboost Dareboost se présente comme un site d'analyse et conseil en performance et qualité web. C'est un outil d'audit en ligne comme il en existe d'autres, mis à part que celui-ci dispose de nombreux atouts qui le différencient de ses confrères, notamment en regard de son périmètre très large : Performances d'affichage Validation / Compatibilité navigateurs Accessibilité Bonnes pratiques SEO Bonnes pratiques jQuery / JavaScript Conseils côté serveur et durée de cache etc. Et surtout : l'outil est gratuit (et le restera) et il est français ! Certains conseils et certaines évaluations méritent encore toutefois d'être un peu plus explicites pour le commun des mortels, mais dans l'ensemble il s'agit d'un très bon point de départ pour dégrossir les principaux points de progrès de votre site web.

VorlonJS VorlonJS est un puissant outil d'inspection, debug et test JavaScript. Il est construit sur node.js et socket.io. Vous allez dire : oui mais les navigateurs actuels disposent tous d'outils relativement complets et puissants. L'approche est ici différente. Conférence KiwiParty 2015 Retrouvez une belle démonstration dans cette vidéo de la KiwiParty Usage L'installation de Vorlon est relativement simple grâce à npm, et décrite sur le site officiel mais je ne résiste pas à la tentation de la transcrire ici : npm i -g vorlon Puis on lance la commande vorlon vorlon À partir de ce moment, un serveur tourne sur votre poste local à l'adresse La dernière étape est de rajouter une balise <script> dans les documents HTML à analyser. Le tour est joué : chaque client (navigateur, application) utilisant cette page sera "raccordé" au debug et pourra être inspecté à distance, quelle que soit sa nature.

Yellow Lab Tools Faire un beau site web, c’est gratifiant. Mais faire un site rapide, c’est indispensable. Voici un outil open-source, gratuit (et développé par un petit Français !) qui pourrait bien sauver votre peau de développeur web. Yellow Lab Tools est un analyseur de performance open-source. Saisissez une URL, lancez un test et patientez une petite minute. L’outil teste certains points cruciaux comme l’optimisation des images, le lazyloading, la minification, la durée du cache, la complexité du JS, la lourdeur du CSS... De quoi vous aider à obtenir un site rapide. Découvrez l'inspecteur d'élément responsive de Google Chrome Google vient de sortir la version 38 de son navigateur Chrome il y a quelques jours et celle-ci s'annonce déjà palpitante pour nos intégrations responsives : outre les supports de <picture> et du couple "srcset + sizes", son inspecteur d'élément fait un énorme pas en avant et se dépasse à présent les fonctionnalités offertes par la vue responsive de Mozilla Firefox. Activation Il suffit d'activer l'Inspecteur d'élément de Google Chrome de la façon habituelle (touche F12 ou clic droit + "inspecter l'élément"), puis de cliquer sur le bouton "Toggle device mode", juste à côté du bouton "Elements". Cette action déclenche la vue responsive de Chrome avec toutes ses nouvelles fonctionnalités bien pratiques. Fonctionnalités La liste des fonctionnalités offertes par cette nouvelle mouture de l'inspecteur d'éléments est vraiment intéressante. Throttle (vitesse de connexion) Choix du device Media Queries Throttle Il est même possible de tester ses pages en mode offline. Choix du device Media Queries

Directus - Une interface riche et intuitive pour vos BDD MySQL Directus est une interface riche et intuitive permettant d'administrer facilement le contenu de vos tables MySQL. A la fois une alternative à phpMyAdmin mais aussi à un backoffice complexe, Directus est une interface open source gratuite permettant d'administrer vos BDD MySQL et de gérer les données. Développée sur un socle PHP 5.5+ côté back et du backbones.js côté front, l'interface s'installe facilement à l'aide d'un outil dédié: Une fois un user MySQL attribué à Directus et les droits sur les tables à administrer donnés, supprimez l'installateur directus et lancez l'URL pointant sur le répertoire apache du projet. A partir de votre compte utilisateur et vos droits d'usage spécifiques, vous aurez accès à toutes les tables de votre BDD. Cliquez sur une table et vous pourrez administrer les données, si vous en avez les droits. C'est là où Directus est fort, il permet de manipuler des données riches, telle une interface d'administration de backoffice. Site Officiel

Flarum - La plateforme de forum open source PHP nouvelle génération Flarum est une nouvelle plateforme de forums open source développée en PHP / MySQL et succédant aux forums FluxBB. La nouvelle génération de forums est arrivée ! Après le nouveau renommé Discourse, développé en Ruby, voici à présent un forum PHP 5.5 moderne pour le concurrencer: Flarum. Flarum a été développé par les deux anciens développeurs des forums esoTalk et FluxBB: Toby Zerner et Franz Liedke. Parmi les objectifs des deux créateurs: Créer un forum rapide et simple d'utilisation: Développé en PHP donc très simple à déployer grâce à son installeur (30s pour installer) et Mithril côté frontend JS.Créer une interface réussie, moderne et responsiveCréer une plateforme performante et extensible: Le système d'extension est bien pensé, une API permet d'intégrer facilement le forum dans son site web.Gratuit et open source L'interface est moderne avec une double colonne pour la liste des topics et la lecture de l'un d'entre eux. Parmi les fonctionnalités proposées on retrouve aussi:

hyhyhy: Un outil pour créer vos slides de présentation web hyhyhy est un outil permettant de créer vos slides de présentation pour vos conférences, réunions, tutoriels ... avec des technos web. Il est aujourd'hui coutume d'utiliser des outils de génération de slides de présentation en HTML / CSS / JS. hyhyhy propose un ensemble d'outils efficaces pour générer vos propres présentations avec quelque secondes grâce à des commandes intégrées: Commancez par générer l'arborescence des fichiers nécessaire pour créer vos slides, générez un build de votre présentation et affichez la en local avec la commande serve. L'outil vise un public de développeurs et d'habitués de la ligne de commande, mais il fait gagner un temps certain par rapport aux autres outils du marché. Il propose une arborescence de fichiers normée qu'il vous suffira de venir enrichir avec vos slides et plugins tiers: Côtés fonctionnalités, on retrouve entre autre: Grâce à bower et l'API JS intégrée à hyhyhy, vous pourrez enrichir vos slides de vos plugins JS préférés. Site Officiel

Lock - Une bibliothèque de gestion d'ACL pour PHP 5.4+ Lock est une bibliothèque PHP 5.4+ permettant de mettre en place un système d'ACL flexible pour vos applications web. Aujourd'hui, tous les frameworks PHP modernes embarquent un système de rôles et d'ACL pour personnaliser au mieux les droits sur chaque action et ressource. Toutefois, ces systèmes peuvent s'avérer assez complexes à mettre en place et sont finalement assez peu utilisés. Lock est une bonne alternative aux systèmes d'ACL PHP. La bibliothèque propose une gestion fine des droits et peut s'implémenter dans n'importe quel framework ou CMS maison PHP 5.4+. Il embarque des fonctionnalités d'ACL plutôt classiques: Définition de classes caller (Classes des utilisateurs)Attribution d'ACL pour différentes entitésStockage des permissions en statique ou via des driversGestion d'alias pour les actionsGestion de rôles et de groupes de rôlesSystème de conditions / assertImplémentation facilité des ACL avec des traits Côté mise en place, voici quelques exemples. 01.<? 07. return 'users'; 05. 08.

Découvrez Loguru : une nouvelle bibliothèque de journalisation simple et flexible La journalisation est une technique appréciée par tous les développeurs. Elle permet de voir ce que le programme a réussi, mais aussi d'avoir des détails sur ce qui n'a pas marché. Généralement, la journalisation se fait dans un fichier, mais peut se faire aussi sur la sortie standard. Google propose sa propre solution au problème glog. Voici ce qu'écrit glog dans le terminal : Et ce genre de résultat est très simple à avoir : il suffit de rajouter un fichier d'entête (et de lier la bibliothèque) et d'écrire : LOG(INFO) << "Mon super message de log du jour"; La bibliothèque rajoutera elle-même le temps de l'exécution et le fichier où la journalisation a été demandée. Ainsi, Loguru a été développé. Loguru est une bibliothèque sous la forme d'un simple fichier d'entête. LOG_SCOPE_F(INFO, "Iteration %d", i); L'indentation va automatiquement être annulée à la sortie du bloc. Avec Loguru, il est possible de : Finalement, Loguru est dans le domaine public. Votre opinion Source

Related: