2024-11-19 13:49:39 +01:00
|
|
|
|
|
|
|
|
:PROPERTIES:
|
|
|
|
|
:ID: 291a3211-3d94-463c-b9ac-15f9de195a66
|
|
|
|
|
:END:
|
|
|
|
|
|
|
|
|
|
#+title: zen-coding
|
|
|
|
|
#+post_ID: 251
|
|
|
|
|
#+post_slug: zen-coding
|
|
|
|
|
#+post_url: https://www.ciperbliss.com/2014/zen-coding
|
|
|
|
|
#+post_title: Zen coding
|
2024-11-19 23:50:42 +01:00
|
|
|
#+post_tags:
|
2024-11-19 13:49:39 +01:00
|
|
|
#+post_type: post
|
|
|
|
|
#+post_mime_types:
|
|
|
|
|
#+post_guid: undefined
|
|
|
|
|
#+post_status: publish
|
|
|
|
|
#+post_date_published: <2014-02-12T08:28:47>
|
|
|
|
|
#+post_date_modified: <2014-02-12T08:29:18>
|
|
|
|
|
#+post_index_page_roam_id: fa7f2a8c-2b94-4e42-bb4c-25c026ed7ff9
|
|
|
|
|
#+retrieved_from_db_at: <2024-11-18 16:25:08>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
* Zen coding
|
|
|
|
|
:PROPERTIES:
|
|
|
|
|
:CUSTOM_ID: zen-coding
|
|
|
|
|
:END:
|
|
|
|
|
|
|
|
|
|
[[http://th07.deviantart.net/fs51/300W/i/2009/280/f/a/Bouddha_and_the_Lotus_by_Altayr.jpg]]ô
|
|
|
|
|
développeur qui cherche à optimiser son temps, si tu aimes faire du HTML
|
|
|
|
|
mais que son écriture, pour faire de l'intégration par exemple te semble
|
|
|
|
|
fort fastidieuse et verbeuse, j'ai un truc 'achement bien pour toi nommé
|
|
|
|
|
Zen coding. ça n'a rien à voir avec coder avez le nez pour des djeunz.
|
2024-11-19 23:50:42 +01:00
|
|
|
|
2024-11-19 13:49:39 +01:00
|
|
|
Il s'agit d'écrire un sélecteur css, de sélectionner notre sélecteur,
|
|
|
|
|
puis de l'étendre avec un raccourci clavier.J'utilise Netbeans comme
|
|
|
|
|
IDE, le plugin zen coding a de base un raccourci *ctrl+alt+N*.
|
|
|
|
|
|
|
|
|
|
|
2024-11-19 23:50:42 +01:00
|
|
|
|
2024-11-19 13:49:39 +01:00
|
|
|
Tous [[https://code.google.com/p/zen-coding/wiki/ZenHTMLSelectorsEn][les
|
|
|
|
|
exemples de syntaxe zen coding sont disponibles sur google code]].
|
|
|
|
|
|
|
|
|
|
|
2024-11-19 23:50:42 +01:00
|
|
|
|
2024-11-19 13:49:39 +01:00
|
|
|
Petite astuce si vous utilisez un framework css comme twitter bootstrap
|
|
|
|
|
(ce qui est fort pratique), vous aurez souvent besoin de div avec des
|
|
|
|
|
classes. hébien vous n'êtes même pas obligés de marquer div pour faire
|
|
|
|
|
une /div/ de classe /maClasse/. Il suffit d'écrire .maClasse et Zen
|
|
|
|
|
coding assumera qu'il s'agit d'une div. Pareil pour les #id.
|
|
|
|
|
|
|
|
|
|
|
2024-11-19 23:50:42 +01:00
|
|
|
|
2024-11-19 13:49:39 +01:00
|
|
|
On peut aussi se créer des palettes de code, comme une palette de
|
|
|
|
|
peinture. Sauf qu'au lieu de piocher des couleurs on piocherait des
|
|
|
|
|
blocks de code, par exemple des composants de twitter bootstrap comme un
|
|
|
|
|
panel accordéon dépliable, ou un carroussel.
|
|
|
|
|
|
|
|
|
|
|
2024-11-19 23:50:42 +01:00
|
|
|
|
2024-11-19 13:49:39 +01:00
|
|
|
Autre petite astuce pour avoir un code bien indenté, le raccourci de
|
|
|
|
|
formattage: *ctrl + maj +F*. Les subtilités de reformatage sont
|
|
|
|
|
disponibles dans les options d'édition de texte de votre IDE.
|
|
|
|
|
|
|
|
|
|
|
2024-11-19 23:50:42 +01:00
|
|
|
|
2024-11-19 13:49:39 +01:00
|
|
|
Wouala, que le zen soit avec
|
|
|
|
|
vous![[http://th07.deviantart.net/fs51/300W/i/2009/280/f/a/Bouddha_and_the_Lotus_by_Altayr.jpg][image]]
|
|
|
|
|
|
|
|
|
|
|
