fr32c blog

Aller au contenu | Aller au menu | Aller à la recherche

Mot-clé - Brackets

Fil des billets - Fil des commentaires

samedi 16 août 2014

Date lisible en javascript

Pour les besoins d'un script After-Effects (je voulais identifier des compositions), indiquer la date est une bonne idée… à condition que cela reste lisible.

Du coup, j'ai fait ça, 2 lignes, qui me serviront plus tard, je pense.

// js javascript Date readable JJ/MM/AAAA HH:MM:SS
// uses if short notation (a=b)?doA:doB;
var d = new Date();
var readableDate = (d.getDay()<=9?"0":"")+d.getDay()+"/"+(d.getMonth()<=9?"0":"")+d.getMonth()+"/"+d.getFullYear()+" "+d.getHours()+":"+(d.getMinutes()<=9?"0":"")+d.getMinutes()+":"+(d.getSeconds()<=9?"0":"")+d.getSeconds();

Bien entendu, si vous êtes un peu maniaque/organisé, vous intervertirez AAAA/MM/JJ ce qui vous simplifiera le tri.

Et comme c'est du Javascript basique, cela fonctionne dans extendscript.

dimanche 15 juin 2014

Brackets - Multi-sélection et multi-édition.

Brackets-MultiSelection.gifJe vous ai déjà parlé de Brackets, excellent éditeur "html5" (+css+js…), qui s'enrichit de jour en jour.

Si je devais vous donner une bonne raison de l'utiliser, ce serait la multisélection, pour par exemple remplacer un mot à 15 endroits différents, sans faire de rechercher remplacer, juste, sélectionner, puis cmd (ou ctrl) sélectionner la suite, et saisir ce qui va en lieu et place.

Je rêve de ce genre de fonctions dans inDesign :)

jeudi 6 février 2014

Tableaux dans Muse

Très régulièrement, on reparle du manque de tableaux dans Muse. Et souvent les utilisateurs ne voient pas exactement les difficultés soulevées :

  • l'affichage d'un tableau (Muse se débrouille pour que la plus grande partie des sites reste visible, de façon cohérente, sur la majorité des navigateurs) ;
  • l'interface pour générer ce tableau, manipuler les textes, colonnes, lignes, éventuellement faire des calculs ;
  • le besoin d'importer les données (ouverture de fichier, copier/coller, depuis quel format initial…)

Bref, tout un tas de raisons qui font que c'est plus compliqué que ça n'en a l'air, mais il ne faut jamais désespérer.

Et comme quelqu'un sur le forum demandait une solution de contournement, je me suis dit que ça pourrait servir.

  1. Créez un document Google Spreadsheet (les tableaux dans Google Drive)
  2. Stylez-le au plus proche (possible) de vos désirs
  3. Supprimez les colonnes/lignes excédentaires
  4. Dans Fichier > Télécharger au format > Page web (.html, feuille active)
  5. Affichez le code source (depuis Chrome : cmd-alt-U)
  6. Cette page est un peu longue, mais il faut au moins ça pour faire un tableau (et encore, l'exemple donné est simple… C'est sans doute pour ça qu'on les attend toujours en natif)
  7. Sélectionner tout entre les balises <body> </body> (ici, ça démarre avec une balise <style> sur la première ligne)
  8. Copier

Mu-Go-Spreadsheet.png

Deuxième étape, dans Muse :

  1. dans Objet > Insérer du code HTML…
  2. Coller le code (ça va des balises <style> à <table>)

Mu-Go-SpreadsheetPage.png

Troisième étape, si nécessaire, utiliser Brackets ou Edge Code, ou n'importe quel éditeur web simple pour améliorer la sortie.

Voilà, ce n'est pas forcément la solution la plus propre et la plus rapide, mais elle a le mérite d'être fonctionnelle.

dimanche 20 octobre 2013

Brackets : mettre en couleur un format xml spécifique.

Note courte, à retrouver plus tard : dans Brackets, les formats et langages lus et mis en valeur se trouvent dans le fichier contents/www/language/languages.json

Si vous avez besoin de visualiser un format de fichier particulier, et que vous le savez, par exemple, architecturé comme du xml, il suffit de l'ajouter dans le code.

"xml": {
"name": "XML",
"mode": "xml",
"fileExtensions": ["svg", "xml", "wxs", "wxl", "wsdl", "rss", "atom", "rdf", "xslt", "xul", "xbl", "mathml", "config", "monFormatXML"],
"blockComment": ["<!--", "-->"]
},

jeudi 10 octobre 2013

Prévisualiser du SVG via Brackets

Si comme moi vous avez à travailler sur le format SVG, une fois sorti d'Illustrator, un éditeur de texte/code est indispensable. J'ai choisi Brackets, le grand frère de Adobe Edge Code.

Pour le SVG, @peterflynn a réalisé une petite extension qui vous créera une zone en haut de page pour voir vos fichiers. Parfait pour des icones et du statique, un peu limité pour l'interactif, qui s'exprime mieux dans le navigateur, avec des fichiers js liés.

Sauf que Brackets n'est pas capable d'envoyer votre page .svg sur Chrome comme il sait le faire avec du html.

Les plus puristes des développeurs vous diront que c'est compliqué de faire ça, pour avoir un rendu parfait et éditable en direct.

Mais comme j'avais juste besoin de pouvoir passer mon fichier de l'un à l'autre, j'ai trouvé une piste : Il suffit dans Brackets (dans vos applications, afficher le contenu du paquet, chercher ce fichier : FileUtils.js)

Et de remplacer :

var _staticHtmlFileExts = ["htm", "html"],

par

var _staticHtmlFileExts = ["htm", "html", "svg"],

Et voilà, à vous la preview en différé des svg interactifs.

dimanche 28 octobre 2012

Edge Code Preview — Visualiser la syntaxe colorée des SVG

Edge Code (pour l'instant Preview) est un éditeur de code à la fois très basique et très puissant distribué par Adobe et basé sur Brackets.

FR-EdgeCodePreview-Syntax-SVG.pngDestiné à écrire du code, le syntaxer, l'amender pour pouvoir fabriquer des sites web en html5, css et js, il est bien pratique, léger et très efficace, et surtout en évolution permanente. Or, dans les sites web aujourd'hui, avec le Responsive Web Design comme objectif, on utilise de plus en plus d'illustrations SVG.

Et le SVG, c'est bêtement un format de description de dessin vectoriel avec les instructions entre balises (Markup Language).

Sauf que par défaut, Edge Code Preview|Brackets Sprint 15 affichent le SVG comme du texte brut

Voyons ci-dessous comment faire évoluer son appli.

Lire la suite...