AccueilFAQRechercherMembresGroupesS'enregistrerConnexion

Forum de graphisme, codage et game design proposant des tutoriels, astuces, libres services et commandes dans les domaines de l'infographie amateur, de l'intégration web (HTML et CSS essentiellement) ainsi que dans la conception de RPG sur forum.


    Outils pour coder

    Partagez
    avatar
    Nihil Scar Winspeare
    Messages : 4799

    le Ven 12 Sep 2014 - 21:01

    Hello,

    J'ouvre une nouvelle discussion pour savoir si vous utilisiez des outils quand vous codez sur ForumActif. Si oui, lesquels, pourquoi ? *allongez vous sur le divan et dites moi tout*

    Par exemple utilisez vous un éditeur de code ou bien faites-vous directement tout sur ForumActif ? Quand vous avez un trou de mémoire sur quelque chose en CSS ou HTML, y a-t-il un endroit où vous allez directement (autre que Google et Never Utopia bien entendu o/) ? Des sites que vous aimez bien ? Au contraire, des choses que vous avez testées, mais que vous n'avez pas du tout aimé ?

    Ça peut être l'occasion de faire de jolies découvertes (^-^)
    avatar
    Alumine
    FémininAge : 20Messages : 488

    le Ven 12 Sep 2014 - 21:55

    ...Moi dès que j'ai un doute en CSS, je me précipite sur W3School c'est très complet, mais en même temps concis, le seul problème étant que tout est en anglais ^^
    Sinon quand je suis en HTML j'utilise l'outil de forumactif pour créer des iframes, je sais plus comment ça s'appelle; et pour le JS j'utilise l'ardoise proposée par Firefox.

    Sinon un autre truc dont je me sers énormément c'est l'inspecteur/console de Firefox, il est très pratique pour retrouver les noms de classe, et comprendre quand on a des bugs dans le code; de plus je le trouve très ergonomique !

    Voilà~



    Alumine
    avatar
    A-Lice
    FémininAge : 23Messages : 4939

    le Ven 12 Sep 2014 - 22:00

    Je n'ai quasiment jamais de trou quand je code et si c'est le cas N-U les résout x) Donc je n'utilise vraiment aucun site (de toute façon ils sont tous en anglais et les rares en français je ne les aime pas .-.)

    Après je n'utilise pas d'éditeur de code non plus, j'trouve pas ça pratique puisque je n'ai jamais une vue d'ensemble de ce que je fais. Je code donc sur notepad++ (enfin son équivalent sur Linux) et je vois le résultat sur FA et je corrige d'éventuels bugs.

    J'suis pas très utile pour tes découvertes Nihil x)

    avatar
    Alumine
    FémininAge : 20Messages : 488

    le Ven 12 Sep 2014 - 22:42

    Ho ça m'intéresse ça ! Je viens de passer sous Linux et je cherchais justement un équivalent à Notepad... Comment ça s'appelle ?



    Alumine
    avatar
    Onyx
    FémininAge : 23Messages : 3047

    le Ven 12 Sep 2014 - 23:01

    Mmhh... Bonne question!

    Personnellement, je code habituellent directement sur FA en prévisualisant et en éditant mes messages. Allez savoir pourquoi, les bloc-notes et moi, on s'entend pas u_u Sinon, j'utilise presque juste N-U ou mes anciens codes pour vérifier comment faire certains trucs parfois. J'utilise surtout W3School pour vérifier les préfixes à utiliser en fait. Sinon, il y a Paletton et Color Sheme Designer pour les couleurs à utiliser dans les codages ^^

    Et puis j'abuse de l'éditeur/console de Chrome pour trouver certains trucs de FA qui n'apparaissent pas dans les templates mais qui sont quand même là ^^



    avatar
    Alzufen
    MasculinAge : 21Messages : 2103

    le Sam 13 Sep 2014 - 1:19

    Je m'incruste dans ma première discussion côté codage ! Oh Yeah !

    Vous voulez connaître les secrets du FA Slayer ? Bah en fait ce sont pratiquement les mêmes que mes VDD... Pour mieux s'y retrouver, je préfère vous faire une liste de ce que j'utilise pour le moment :

    - Notepad++ ¤ Mon fidèle ami depuis que j'ai su qu'il existait, il me sert aussi bien de remplacement à mon bloc-note de base, que "d'outil" pour y écrire mes codes autant HTML/CSS que JS ou PHP. Généralement je n'utilise que le langage "HTML/PHP" comme base et ensuite j'y intègre mon CSS/JS mais il m'arrive (comme pour mon site) de faire des dossiers séparés à chaque truc pour mieux m'y retrouver et avoir les jolies couleurs.

    - L'outil de Développement ¤ Généralement je me sers de celui de Chrome mais si le problème survient ailleurs il ne m'est pas rare de m'en servir ailleurs. Celui-ci me sers notamment pour résoudre les problèmes des gens, ou mes propres problèmes. Mais aussi, parfois, pour apporter des modifications de positionnement ou même pour faire des changements sans aller 50 fois valider ma feuille de style CSS ou mon fichier Notepad++.

    - Les pages HTML ¤ Et oui, ils me servent aussi beaucoup, à vrai dire j'ai tendance à me servir pas mal des pages HTML quand je veux tester quelque chose sans me prendre la tête à lancer Notepad++ ou juste pour le conserver provisoirement. J'aime bien aussi m'en servir comme substitue en ligne de Site Web (Un peu comme NU), ça me permet de montrer mon boulot, mes codes, ou autres sans héberger le fichier, sans héberger le site ou sans poster un screen/directement le code ^^

    - Mon forum de test ¤ Je dirais que c'est mon outil le plus utilisé pour la compatibilité FA, effectivement sans lui beaucoup de mes codes ne seraient pas compatible ForumActif, je parle notamment des messages qu'on poste. Vous n'êtes pas sans savoir les quelques soucis que peuvent causer les BR automatique des messages, et donc pour palier à ce soucis j'ai tendance à me servir des postes de mon forum de test. En plus de me servir de petit coin à code ou de teste pour d'éventuels changement via l'outil de développement ou encore pour m'amuser à démonter la CB.

    - Google ¤ Oui, tu as dit que Google ne devait pas être précisé, je tiens à le préciser. Effectivement, il me sert autant à chercher ce que j'ignore, que des choses dont j'ai un doute ou que des codes. En clair, je m'inspire facilement de code des autres, de LS, ou quoi que ce soit d'autres pour mes propres codes (non pas pour copier/coller l'idée du code mais plutôt le contenu) je me sers donc de ce qui constitue le code ou de l'effet comme aide ou base pour le mien. Cela dit, c'est assez rare que je fasse ça. Ensuite, quand je trouve une balise, une propriété, un truc que j'ignore ou simplement que j'ai envie de faire quelque chose mais que je sais pas comment, je cherche aussi et généralement je trouve. Je ne pourrais pas citer de site, il y en a bien que je retrouve mais en général j'évite ceux anglais et préfère ceux Français. De plus, étant donné que c'est juste des compléments d'infos ou pour me donner une idée de la fonction, je survole généralement le site donc plus il est simple mieux c'est ^^

    - Mes propres codes ¤ Et oui, c'est un outil. Croyez le ou non mes propres codes sont la base de 80% de mes codes. Bon j'abuse peut-être un peu sur les chiffres mais ça représente un bon pourcentage. Maintenant je fais surtout ça pour le JS, mais il n'est pas rare que je réutilise un code que j'ai déjà utilisé auparavant pour un nouveau code. Je le réadapte pour qu'il soit cohérent avec le lieux utilisé, etc. mais ça m'évite de réécrire tout ça et même de me le rappeler. De plus, j'apprends ainsi, plus je modifie légèrement un code que j'ai l'habitude de me servir, plus je vais retenir qui fais quoi et pouvoir le réécrire moi-même au final. C'est mon grand secret, je me sers des codes des autres et les réutilises plusieurs fois, les modifiant à chaque fois etc. jusqu'à retenir l'utilité de chaque partie, leur fonction et comment je peux m'en resservir. C'est d'ailleurs comme ça que j'ai appris le codage, du moins en partie.

    - Mes mains et ma tête ¤ C'est pas vraiment un outil, mais je pense que c'est le plus important dans cette histoire. Ce sont les mains et la tête qui font tout, la tête cherche les idées, comment les mettre en place, quoi utiliser etc. alors que les mains leur donne la vie, ils écrivent ce qu'il faut, ils permettent de voir le résultat, le rendu, de régler les soucis etc. En clair, ils vont de pair comme la plume et l'encre. Et comme le dit si bien plusieurs personnes que je connais, si un problème surgit, il vient généralement du codeur, et donc de ses mains et de sa tête, et non du logiciel utilisé. C'est ça qui fait tout, le reste n'est que de l'assistance ou de l'aide Wink

    (Oups, je crois que j'ai écrit un bon pavey m'enfin, c'est fait XD)



    avatar
    A-Lice
    FémininAge : 23Messages : 4939

    le Sam 13 Sep 2014 - 11:53

    Alumine il s'appelle "gedit". Pour Ubuntu tu le trouves dans la logithèque !

    avatar
    Alumine
    FémininAge : 20Messages : 488

    le Sam 13 Sep 2014 - 15:59

    Merci A-lice ! Bon j'ai Fedora mais ça ne doit pas être bien différent (=



    Alumine
    avatar
    Okhmhaka
    FémininAge : 32Messages : 31851

    le Sam 13 Sep 2014 - 18:44

    Bah ça peut paraitre un peu prétentieux mais ça me fait plaisir de lire que N-U vous aide dans la majorité de vos "trous" en codage x)

    Personnellement, et contrairement à Alzu', je ne réutilise jamais un code, ou alors faut vraiment que ce soit pour un forum RPG où je sais qu'on ne sera que 2 avec Jade pour nous détendre 5 min' et donc où j'utilise un thème que j'ai déjà fait, par exemple celui du tutoriel de réalisation d'un thème de A à Z. Sinon j'estime qu'un code fait, puis refait de zéro, puis encore refait de zéro etc... s'épure, se précise, évolue. Plus ça va plus j'ai de facilité à coder une PA avec des onglets, des transitions, etc. Alors qu'en réutilisant la même base, ben j'arriverais pas à m'en passer.
    Sinon, Notepad je ne l'utilise presque pas, ou lorsque je fais des pages html en fait, donc le site de N-U par exemple. Je code directement sur le forum, dans le message, dans la PA, le template, tout tout endroit où je veux placer mon code.
    Sinon, depuis peu je m'oblige à utiliser Firebug pour placer les blocs, au lieu de le faire à taton comme un idiot à décaler petit à petit jusqu'à ce que ce soit placé. J'ouvre Firebug, j'édite le CSS, je trouve les bonnes marges puis je les reporte dans mon CSS. C'est con, mais avant j'y pensais pas xD.
    Après, lorsqu'il s'agit de vérifier des points précis de propriétés, parce qu'il le faut, parce qu'on ne maitrise pas tous les effets de 3D ou de background-image en gradient, radius & co, bah je tape sur Google, et généralement ce qui en ressort c'est évidemment W3School, qui est une super référence, mais aussi Alsacréation par exemple, où ils sont très bons.

    D'une manière générale, je m'interdis de faire un copier coller même d'une ligne de code, même si c'est pour utiliser une propriété, je m'oblige à réécrire le code, parce que c'est comme ça que je retiens, et qu'au final je n'ai plus besoin d'ouvrir une page de soutien.

    Après y'a des exceptions aussi, par exemple une fois que j'ai trouvé un ensemble de code permettant quelque chose, je les réutilise. Le meilleur exemple c'est les codes permettant d'enlever la majorités des bordures sous phpBB2. Bah j'ai posté ces codes CSS sur N-U, quand je les ai supprimées d'un forum test et que je veux les remettre, je viens, je copie, et voilà. Mais bon, normal x).

    Sincèrement, sur FA, j'aime partir de rien, d'un thème de base. A chaque fois que je dois refaire un thème, mon premier truc c'est de tout réinitialiser. Je vire les templates, enfin j'efface mes modifs quoi^^, je vire tout le CSS (à la limite je garde juste ces foutus retraits de bordures xD), et je remets un thème de base de FA. Là je suis prêt pour bosser, et je fais tout petit à petit, étape par étape, sans rien copier-coller. D'ailleurs pour les commandes de thème c'est la même chose, je pars toujours de la base de FA.



    avatar
    Nihil Scar Winspeare
    Messages : 4799

    le Jeu 25 Déc 2014 - 18:20

    Tiens j'avais oublié cette discussion :toto: (Nihil = crédibilité 0 (¬▂¬))

    Merci tous d'avoir répondu :), j'ai pris le temps de lire un peu tout le monde, j'ai eu un petit fou rire devant un passage complètement WTF à mes yeux, mais c'est intéressant de voir comment tout le monde travail sur FA.

    Au final on retrouve beaucoup de points en commun, par exemple l'inspecteur d'élément. C'est tout bête, mais il y a pleins de gens qui ne connaissent pas et du coup luttent beaucoup, cet outil est une révolution haha x).

    Pour ce qui est de coder, personnellement je ne le fais limite jamais directement sur une page HTML ou bien un sujet, ça me fatigue de devoir valider à chaque fois... Alors qu'en partant avec Notepad++ ou Brackets je le fais en juste quelques secondes...
    Du coup là je vais expliquer un peu comment je travaille pour ma part :

    Quand je prends en charge une demande d'aide, en général j'ouvre sur Notepad++, je colle le code, comme ça j'ai toutes les fonctionnalités "de base" dont j'ai besoin "pour un truc rapide". Une fonctionnalité que j'adore aussi, c'est le système de sauvegarde des onglets ouverts, ça me permet de gérer les 150 000 codes que j'ai en même temps pour les demandes d'aides, sans pour autant tout sauvegarder sur mon ordi. Ca aide aussi quand je vois un bout de code qui m'intéresse, j'ouvre un nouvel onglet, je colle le code, et j'y reviens "plus tard" (le contenu est sauvegardé automatiquement).

    Même si pour la plupart des problèmes en codage, je fais tout sur l'inspecteur d'élément, puis j'utilise Notepad++ juste pour rajouter des commentaires, ou relire mon code à tête reposée XD.

    Par contre, dès que je fais un code par moi même (demande de LS ou bien projet perso), je passe directement sur Brackets [Alsacreations - Brackets, l'éditeur spécialisé front-end]. Je fais ma première base directement :), comme ça je profite de toutes mes petites fonctionnalités que j'adore.
    S'il s'agit d'une modification de template, je récupère ensuite le code du template et je replace mon HTML au bon endroit sur le template, puis je règle les derniers ajustements sur FA, mais je n'aime pas vraiment cette solution car pas super rapide (il faut valider, changer d'onglet, et gnagnagnagnagna xD) >-<

    Du coup, contrairement à beaucoup, j'ai une sainte horreur de coder directement sur ForumActif (•_•), je trouve ça looooooong. /BAM/
    Vous avez un sacré courage ;____;

    Pour ce qui est du travail pendant le code, je connais par cœur les propriétés CSS que j'utilise souvent, mais après effectivement pour les dégradés, je vérifie sur Google à chaque fois XD. J'utilise aussi Can I Use quand j'ai un doute sur les préfixes ou bien sur la manière dont une propriété est supportée sur certains navigateurs :)
    Les transformations en 3D avec de la perspective, je suis totalement incapable de le faire sans aide XD

    Pour ce qui est de la manière de bosser avec les templates, j'ai ma petite bible, le projet Template de FA même si j'aime bien trouver par moi même quelle variable fait quoi Very Happy

    Reprendre mes anciens codes... C'est une excellente question °^°... Je viens de réaliser que je ne le faisais presque jamais sur FA O___0. * prise de conscience *

    Si d'autres veulent partager leur manière de bosser, ou bien des outils utiles, n'hésitez pas !

    avatar
    Henrykiki
    MasculinAge : 25Messages : 576

    le Mar 30 Déc 2014 - 5:08

    Ben moi j'vais vous dire comment je travaille aussi, et les habitudes que j'ai prises durant mes 3 ans d'études en infographie...

    Je travaille principalement sur Sublime Text, même si je pense installer Brackets un de ces jours, et j'y ai des petites extensions d'installées comme CssLisible (qui me trie mon code css pour mettre les priorités css dans l'ordre idéal, + créer les tabulations etc) mais aussi Emmet, et ça c'est la vie, c'est un auto-compléteur de code... quand je créer un nouveau fichier, je fais "! tab" et hop, j'ai toute la structure de base d'une page html, idem pour tout le reste, un tableau avec 7 rangées et 20 colonnes? vous imaginez les tr et les td à foison? Ben là, "table>tr*7>td*20 tab" c'est fait !!! 3sec top chrono hein Wink

    Après j'aimerais trouver un moyen d'auto-refresh mon code... mais ça faut que je m'y penche, puis ptet que c'est déjà intégré chez brackets... (Nihil, toi qui l'utilise, tu sais me dire?)

    Donc vous l'aurez compris, la plupart du temps je code via un éditeur de texte (et non pas via FA directement) et alors ça va en effet beaucoup plus vite, que de prévisualiser sur FA... Donc le même clan que Nihil, ouais j'sais Nihil, trop bizarre...

    Après j'ai souvent photoshop qui est ouvert ici ou là, pour des pipette de peinture, des sélection de zone pour savoir des tailles, etc etc... J'ouvre aussi très souvent l'inspecteur web (et ce sur safari, google chrome, firefox) où je code directement dedans (pour voir en live ce que ça donne) puis ensuite je copie/colle les modifs sur mon propre fichier, et *.* magie *.* tout est nickels!

    Après comme la plupart d'entre vous, j'ai beaucoup d'html et de css en tête, quelques notions de JS, de PHP aussi, quelques trucs en jQuery... et pour tout le reste, je vais sur Can I Use, sur W3school, sur Google, sur Alsacréations, et voili voilou Very Happy



    Des bisous !
    avatar
    Celsius
    MasculinAge : 24Messages : 5

    le Mar 17 Fév 2015 - 8:15

    Tiens, un sujet sur lequel j'ai envie de participer. o/

    Je vais commencer par répondre à @Henrykiki (parce que j'utilise Sublime Text et qu'une bonne partie de ses méthodes sont aussi les miennes) : il est possible de trouver différentes façons d'installer un auto-refresh sur Sublime Text, à condition de travailler sur un projet local. Si tu es familier avec les Packages (LiveReload, il me semble), il te suffit d'ouvrir ton projet avec tous les fichiers nécessaires et d'utiliser la même extension sur ton navigateur.
    Il existe également d'autres façon, notamment en utilisant Prepros (un serveur local) qui est juste magnifiquement parfait pour les petits projets hors lignes. Par contre, si comme moi tu utilises le localhost pour héberger tes fichiers css/js, le LiveReload ne fonctionnera pas à distance (il faut absolument être en circuit fermé), mais bon. Je ne suis toujours pas mort à utiliser le F5 à répétition et je me suis rapidement fait à l'idée qu'il n'y avait pas d'autres solutions. :B

    Sinon, pour ma part.
    Comme beaucoup de personnes, j'ai commencé en intégrant tout directement sur ForumActif à grand coup de "valider -> changer d'onglet -> actualiser la page" pour le css ou de "envoyer -> valider le template -> changer d'onglet -> actualiser la page" pour les templates. Quand j'y repenses maintenant, je vois à quel point la perte de temps était énorme, d'autant qu'en plus, à cette époque, je n'avais pas encore l'assurance suffisante pour rédiger mon code d'un trait et de vérifier ensuite. Pour chaque petite modification, aussi insignifiante qu'inutile, je répétais ces petits réflexes de vérification pour m'assurer que tout était "correct".

    Avec le temps, la logique s'est mise en place et j'ai fini par ne plus me vérifier aussi souvent. C'est aussi à ce moment là que j'ai compris à quel point la rapidité et l'efficacité étaient deux choses importantes, et j'ai cherché un moyen d'améliorer mes méthodes : j'ai découvert Sublime Text, puis le ZenCoding, puis DropBox, WampServeur et SASS. Dernièrement j'ai commencé à utiliser Bourbon en complément.

    Tout d'abord, Sublime Text. Un éditeur de texte tout ce qu'il y a de plus sessy. Des capacités monstres pour presque rien en ressources, des thèmes trop beaux (oui, c'est important) et, surtout, une foule d'extensions très utiles qui permettent d'améliorer son environnement de travail. Avec lui, j'avais le beurre et l'argent du beurre (et le...), du coup je l'ai conservé (et j'y travaille encore, en témoigne mon petit screen).

    Par la suite, c'est un peu au hasard que j'ai découvert le ZenCoding (plus précisément Emmet, comme en parle @Henrykiki). En plus de permettre de créer une sémantique HTML en quelques secondes, il permet également la même chose en CSS (écrire "m15-10+p5" et tabuler donne respectivement margin: 15px 10px; et padding: 5px;/ écrire "tt" et tabuler donne un text-transform, etc.). THE POWER IS REAL.

    Dropbox est arrivé un peu par nécessité. Je connaissais déjà son principe sans en voir l'utilité dans ma situation (un serveur en ligne permettant d'accéder à ses fichier de n'importe où, autorisant le partage et la contribution de plusieurs personnes, etc.). Lorsque j'ai commencé à travailler à temps plein, j'ai rapidement abandonné la clef USB au profit de ce petit utilitaire, me permettant d'accéder à mes codes pendant mes pauses et/ou à transférer des fichiers aux collègues très facilement. En plus (et ça, c'est le plus important), j'assure un backup de tous mes projets : si mon PC m'explose à la gueule, je sais que j'ai pas tout perdu.

    Avec tout ça, WampServeur (maintenant Prepros) est arrivé au moment où j'ai commencé à m'intéresser au PHP et autres langages plus poussés. J'ai réussi à lier mon dossier Dropbox pour y faire interagir directement mon serveur local, de façon à pouvoir utiliser mes fichiers hors ligne directement sur un navigateur... et ÇA. Magie. \o/

    Actuellement, donc, je code absolument tout sur Sublime Text (mes templates FA, mon css, mon javascript, TOUT). Je n'ai même pas besoin de me soucier de copier/coller mon CSS ou mon JS directement sur mon forum, parce que j'utilise justement mes fichiers en serveur interne. Tout ce qu'il me faut, c'est ajouter ma feuille de style au template principal (overall-header), mettre le lien adapté ("//localhost/dossierquelconque/css/cssprincipal.css") et chaque fois que j'enregistre mon code, je n'ai qu'à actualiser ma page (ce que je fais très peu, finalement) pour y voir les modifications.
    Pour le HTML, je garde toujours un page ouverte sur mon éditeur pour y faire opérer la magie d'Emmet (ul>li*3 et j'ai une liste que je copie/colle dans mon template).

    Généralement, je commence par le HTML, j'ajoute sur mon template, je place les variables FA correctement et j'enregistre. Ensuite, il ne me reste plus qu'à ouvrir la page du forum et je n'ai plus besoin de toucher au panneau d'administration pour un moment.
    Pour le CSS, si vous avez regardé le screen de mon éditeur et que vous avez pas trop compris : j'utilise SASS. C'est un métalangage CSS qui offre un vrai gain de temps en permettant, par exemple, d'utiliser des minis fonctions CSS et des variables. Au lien d'écrire un code de couleur, par exemple, je n'ai qu'à le définir en variable ("$blue-color: #218b9b;") et utiliser cette variable n'importe où pour appeler ma couleur. Je peux également éclaircir cette couleur ("background-color: lighten($blue-color, 8%);") avec une fonction. C'est vraiment génial et avec le temps on devient vite accro (pour vous dire, maintenant je souffre quand je dois lire des "vieux" codes CSS, tellement les répétitions sont impressionnantes).
    Bourbon est un complément SASS qui me permet surtout d'appliquer tous les préfixes -webki/-moz nécessaires qui s'utilise très facilement ("@include transition(color .3s);"). Avec ça, je sais que tout fonctionnera bien sur chaque navigateur. La librairie offre beaucoup plus de choses, mais je viens tout juste de commencer à l'utiliser et je n'ai même pas pris le temps de lire sa documentation, donc... :3

    M'enfin. Sinon, j'utilise énormément l'outil développeur de Chrome (je travaille sur Chrome, donc), qui me permet d'accéder à la console (Ctrl+Shif+J) ou au HTML/CSS (Ctrl+Shif+C) en un instant. J'utilise parfois une petite extention (Live CSS Editor) qui me permet d'ajouter du CSS sur une page ouverte et de voir directement les modifications. Le plus souvent, je m'en sers lorsque je change une couleur en sachant quel sélecteur je vise (body, une classe particulière, etc.).
    Autrement, je suis beaucoup de blogs/sites qui partagent de nombreuses ressources ou astuces et je passe beaucoup de temps à mettre en favoris des outils, des frameworks, des exemples, des tutos au cas où j'aurai un jour besoin de m'y référé.

    Pour ce qui est de l'utilisation de mes codes, disons que je formate depuis récemment mes projets de la même façon en conservant toujours une convention de codes que j'utilise et améliorer à chaque fois :

    Mon CSS est classé en quatre dossiers.
    • Tools, qui contient les fonts, Bourbon et un Reset CSS.
    • Base, qui contient la structure de ma page (le layout), les couleurs utilisées (je suis très fan du framework Bootstrap, j'utilise donc, comme eux, de nombreuses classes utilitaires), un reset personnel typographique (les h1/h2/h3, small, strong, etc.). Il y a également la déclaration de toutes mes variables SASS (les couleurs de mon thème et sa largeur, la taille de ma marge principale) et les mixins que j'ai développés et/ou rassemblés avec le temps (je m'inspire beaucoup de Material Design en ce moment ; "@include shadow(z);" me donne la hauteur de l'ombre souhaitée).
    • Modules se rapportent à tous les codes qu'on utilise un peu partout (formulaires, header, modal, structure des posts administratifs, etc.). Je prends le temps de bien définir mon style principal, et après je n'ai plus qu'à utiliser mes éléments où je le veux, pour important la page ou le template.
    • Layout est spécifique à la gestion des templates FA (affichage de l'index, de la liste des sujet, du profil des membres, des messages privés, etc.).
    Bien entendu, avec SASS, tous ces segments de codes sont rassemblés en un seul et même fichier CSS. Les diviser comme ça me permet juste de mieux m'y retrouver durant le développement.

    Et puis je pense avoir fait le tour, donc voilà. o/
    THE PAVÉ IS REAL THOUGH.
    avatar
    Nihil Scar Winspeare
    Messages : 4799

    le Jeu 26 Fév 2015 - 16:28

    Moi j'utilise Brackets depuis un peu plus d'un an je crois et j'en suis très satisfaite :)
    Je n'arrive pas à m'habituer à Sublime Text... Et prochainement, il faudra que je test Atom :p

    @Henrykiki a écrit:Après j'aimerais trouver un moyen d'auto-refresh mon code... mais ça faut que je m'y penche, puis ptet que c'est déjà intégré chez brackets... (Nihil, toi qui l'utilise, tu sais me dire?)
    Oui sur Brackets c'est intégré de base (^-^). Si tu veux en savoir un peu plus : Brackets, l'éditeur spécialisé front-end et Brackets - Grafikart. Tu peux d'ailleurs y lire " Intégration native LESS / Sass (avec Liverefresh tant qu'à faire)" o/

    Concernant Emmet je l'adore *-*... Autant pour le HTML et que le CSS Very Happy ! J'ai vraiment du mal sans maintenant. x)

    Maintenant, pour le livereload, j'utilise parfois http://www.browsersync.io/

    Pour les prefixes navigateurs, j'utilise également autoprexifer parfois :)

    @Henrykiki a écrit:Après j'ai souvent photoshop qui est ouvert ici ou là, pour des pipette de peinture, des sélection de zone pour savoir des tailles
    Perso j'évite d'ouvrir Photoshop
    Quand c'est une image dans le navigateur, en général j'utilise l'extension ColorZilla pour aller plus vite, sachant qu'il y a un plugin pour ça sur Brackets aussi il me semble o/

    Sinon, tout comme Celsius j'utilise SASS (pour les "grosses" commandes, et le même genre d'organisation de mes dossiers si besoin (rarement sur forumactif puisque je ne fais plus de thème) :)
    Sinon, avec SASS j'utilise compass ou bourbon, ça dépend des projets... x) Mais une fois encore, je ne le fais pas pour les forumactif puisque je code plus grand chose dessus :p

    Contenu sponsorisé


      La date/heure actuelle est Mer 22 Nov 2017 - 12:00