I’ve always been a strong believer in the phrase “work smarter, not harder”. I’m perfectly happy to invest a few extra hours at once in order to make my life easier in the future. This applies particularly to programming and web development tasks. This is why this month’s issue will be dedicated to some useful productivity tips to help you to be as efficient as possible when working. Disclaimer: These are all things that work for me - but depending on your preferences or approach to working, you may have your own methods. Feel free to stick with them, or to share them with me.
J'ai toujours été un grand supporter de la phrase « Travaillez plus malin, pas plus dur ». Je suis parfaitement content d'investir quelques heures supplémentaires d'un coup pour rendre ma vie plus facile à l'avenir. Ceci s'applique particulièrement aux tâches de programmation et de développement Web. C'est pourquoi l'article de ce mois-ci sera dédié à quelques conseils utiles pour la productivité, pour vous aider à être aussi efficace que possible dans votre travail.
Avertissement : Toutes ces choses fonctionnent pour moi, mais, suivant vos préférences ou votre approche du travail, vous pourriez avoir vos propres méthodes. N'hésitez pas à les appliquer ou à les partager avec moi.
Web Development I am a freelance web developer, and, as such, this is the type of project I most frequently have to spin up and work on. I’ve split the below tips into the different stages of development. Creation • Using something like Yeoman allows me to easily save and create project structures that I can easily re-create. This is terrific for the most popular CMS that I have to work with, or for my prototyping stage. For one-off projects or uncommon environments, the effort to write a generator is not worth it. That being said, if there’s a suitable 3rd party generator, I will sometimes give it a shot and tweak from there. For a long time, I simply had a repository with pre-structured project folders and files. I’d then copy them and edit the files. It worked, but using a generator can help to avoid manually editing the files.
Développement Web
Je suis un développeur Web en freelance, et, comme tel, c'est le type de projet que j'ai le plus fréquemment à faire tourner et sur lequel travailler. J'ai organisé les astuces ci-dessous par les différentes étapes du développement.
Création
• L'utilisation de quelque chose comme Yeoman me permet de sauvegarder et de créer des structures de projet que je peux facilement recréer. C'est formidable pour les CMS les plus populaires sur lesquels je dois travailler, ou pour mon étape de prototypage. Pour les projets uniques ou aux environnements inhabituels, faire l'effort d'écrire un générateur ne vaut pas la peine. Cela étant dit, s'il y a un générateur tiers qui convient, je lui donnerai quelquefois sa chance en y faisant des ajustements. Pendant longtemps, j'ai eu un dépôt avec des dossiers et des fichiers d'un projet pré-structuré. Je les copiais ensuite et modifiais les fichiers. Ça marchait, mais l'utilisation d'un générateur peut aider à éviter la modification des fichiers à la main.
• Docker is one of the most useful tools I employ. It does take some time to get comfortable with it (and to find/create images suitable for your work). However, the benefits of being able to easily virtualize an environment for a particular project is immeasurable. Previously, I used to run everything in a single LAMP installation, and that would often run into odd versioning problems as each site would depend on something different, or, by giving each host a subdirectory, it would require extra tweaks you would later just need to remove. I eventually moved to Vagrant, and now to Docker. This way, I can replicate the target server without interfering with any other development projects, and can ignore other working projects when trying to debug. • Any local web server - like those supplied with static site generators, or the Web Server for Chrome app. These are terrific because they are easy to fire up, and run on a separate port, avoiding problems with other apps running. I use these largely for static site generators, or for prototypes I have to fire up quickly and whose target server is irrelevant.
• Docker est l'un des outils les plus utiles que j'emploie. Il demande un peu de temps pour s'y habituer (et pour trouver/créer des images qui conviennent pour votre travail). Cependant, le bénéfice de pouvoir virtualiser facilement un environnement pour un projet particulier est inestimable. Précédemment, j'avais l'habitude de tout faire tourner dans un seul environnement LAMP et je rencontrais souvent des problèmes de versions car chaque site dépendait de quelque chose de différent, ou, en donnant à chaque hôte un sous-répertoire, des réglages supplémentaires étaient nécessaires que je devrais enlever plus tard. J'ai changé finalement pour Vagrant et, maintenant, pour Docker. De cette façon, je peux répliquer le serveur cible sans interférences avec d'autres projets de développement et je peux ignorer les autres projets actifs pendant que je débogue. • Tous les serveurs Web locaux - comme ceux fournis avec les générateurs de site statiques, ou le serveur Web de l'appli Chrome. Ils sont formidables, car ils sont faciles à démarrer et tournent sur un port séparé, évitant des problèmes avec les autres applis en fonctionnement. Je les utilise en grande partie pour les générateurs de sites statiques, ou pour les prototypes que je dois lancer rapidement et dont le serveur cible est hors sujet.
Development • WebPack is something I switched to from Grunt almost immediately. Not because Grunt was bad, but because of its approach. Being able to use it on those projects where ReactJS is needed makes my life easier, and having to create and manage only a single configuration file is terrific. For almost all projects, I use it to minify, concatenate, and run postcss on my stylesheets. I also find the structure of the webpack.config.js file to be more understandable than Grunt. • BrowserSync. For those who don’t know of this tool, it essentially spins up a local web server, and then watches the files for changes. This means it can automatically reload your browser when you make changes. I use this primarily for prototyping, because it allows me to edit and work on the files without interrupting the flow to check a browser (which is open and unfocused). • ImageMagick (or GraphicsMagick these days). This is my go-to solution for batch processing of images, or even just to optimize some files as I develop. I will typically run an extra optimizer for a particular file type (i.e. svgo or jpegoptim) before going live, but while the website is in a state of flux, I’ll stick with simple mogrify or convert commands.
Développement
• Je suis passé de Grunt à WebPack presque immédiatement. Non pas parce que Grunt est mauvais, mais à cause de son approche. Le fait de pouvoir utiliser WebPack sur des projets où ReactJS est nécessaire m'a facilité la vie et le fait de n'avoir qu'un seul fichier de configuration à créer et à gérer est formidable. Pour la plupart des autres projets, je l'utilise pour réduire, concaténer et lancer postcss sur les feuilles de style. J'ai aussi trouvé que la structure du fichier webpack.config.js est plus facile à comprendre que celui de Grunt. • Browsersync. Pour ceux qui ne connaissent pas cet outil, essentiellement, il monte un serveur Web local et, ensuite, il surveille les modifications dans les fichiers. Ça signifie qu'il peut recharger automatiquement votre navigateur quand vous faites des changements. Je l'utilise d'abord pour le prototypage, car il me permet de modifier et de travailler sur les fichiers sans interruption du flux de vérification d'un navigateur (qui est ouvert et en arrière-plan). • ImageMagick (ou GraphicsMagick maintenant). C'est ma solution incontournable pour le traitement par lot des images, ou même simplement pour optimiser certains fichiers pendant que je fais du développement. Je lancerai généralement un optimiseur supplémentaire pour un type particulier de fichier (par ex., svgo ou jpegoptim) avant la mise en production, mais, pendant que le site Web est dans un certain état du flux, je me débrouillerai avec de simples commandes mogrify ou convert.
• Visual Studio Code. My first reaction wasn’t that favourable when this app was released - mainly because I remembered using other Visual Studio apps years ago. However, I eventually gave it a shot and found it to be very similar to Atom (my editor at the time). The major difference I found between Code and Atom was their speed at opening files - Code would load much faster on my machine than Atom. It’s still being improved, but their selection of plugins has covered everything I’ve ever needed. • dnsmasq is something I’ve set up on most of my local development machines. I configure it as a DNS where all requests go to the google DNS servers, with the exception of any *.home.lan URLs, which get redirected to my local machine. This is the internal development URL I use. I also configure my main machine as the DNS server when testing a site on other devices. • SASS is the preprocessing language I currently use. For a long time, I liked to use Stylus, but realized that it was becoming my default approach to writing CSS. Which is a problem when you’re writing actual CSS. Instead, I switched back to SASS in order to offset the bad habits I was forming. Additionally, SASS is supported by things like sassdoc or KSS to generate a styleguide from your SASS comments.
• Visual Studio Code. Ma première réaction n'était pas très favorable quand cette appli est sortie, principalement parce que je me rappelais avoir utilisé d'autres applis Visual Studio, il y a des années. Cependant, j'y ai quand même jeté un coup d'œil et je l'ai trouvée très similaire à Atom (mon éditeur à ce moment-là). La principale différence que j'ai trouvée entre Code et Atom était leur vitesse d'ouverture des fichiers : Code chargerait plus rapidement qu'Atom sur ma machine. Il est toujours en amélioration, mais leur sélection de modules additionnels a couvert tout ce dont j'avais besoin. • dnsmasq est quelque chose que j'ai paramétré sur la plupart de mes machines de développement en local. Je le configure comme un DNS où toutes les demandes vont vers les serveurs DNS de Google, à l'exception de toutes les URL *.home.lan, qui sont redirigées vers ma machine locale. C'est l'URL interne de développement que j'utilise. Je configure aussi ma machine principale comme un serveur DNS quand je teste un site sur d'autres dispositifs. • SASS est le langage de pré-traitement que j'utilise actuellement. Pendant longtemps, j'aimais utiliser Stylus, mais j'ai réalisé qu'il était devenu mon approche par défaut pour l'écriture des CSS, ce qui est un problème quand vous écrivez des CSS actuels. En remplacement, je suis passé à SASS pour perdre mes mauvaises habitudes. En plus, SASS est supporté par des choses comme sassdoc ou KSS pour générer un guide de styles à partir de vos commentaires dans SASS.
Testing • Testing in web development can often be some of the most frustrating aspects. Not just because each browser can have slight differences, or because of Internet Explorer, but because you also need to check various devices and operating systems. This is where Synergy comes in. Synergy lets you share a single mouse and keyboard between multiple computers over the network. Combine this with a picture-by-picture monitor (or dual monitors), and you can run your tests without sliding between various desks. I used version 1 for a long time without issues. Recently, they’ve released version 2.0, and I have had a fair few issues with it in ArchLinux. I most recently got it working (2.0.6) by manually running the synergy-core command (see below, and replace <hostname> with your actual computer’s name). That being said, some distributions have had fewer issues. In any case, I highly recommend it (when it’s working):
Les tests
• Dans un développement Web, les tests peuvent souvent être l'un des aspects les plus exaspérants. Pas seulement parce que chaque navigateur a de légères différences, ou à cause d'Internet Explorer, mais parce que vous devez aussi vérifier de multiples matériels et systèmes d'exploitation. C'est là qu'arrive Synergy. Synergy vous permet de partager un seul clavier/souris entre de multiples ordinateurs à travers votre réseau. Combinez ceci avec un écran image-par-image (ou deux écrans), et vous pouvez faire tourner vos tests sans passer d'un bureau à l'autre. J'ai utilisé la version 1 pendant longtemps sans inconvénient. Ils ont sorti la version 2.0 récemment et j'ai eu pas mal de problèmes avec dans ArchLinux. Je l'ai fait fonctionner plus récemment (la 2.0.6) en lançant à la main la commande synergy-core (voir ci-dessous, en remplaçant <hostname> par le vrai nom de votre ordinateur). Cela dit, certaines distributions ont moins de problèmes. Dans mon cas, je le recommande chaudement (quand il fonctionne) :
/usr/bin/synergy-core –server -f –run-as-uid 1000 –debug DEBUG –name <hostname> –enable-drag-drop –profile-dir /var/lib/synergy –log /var/log/synergy/synergy-core.log -c /var/lib/synergy/synergy.conf –address :24800 • Lighthouse is a tool from Google that is integrated into the Chrome browser. It is geared towards Progressive Web Apps, but the information on other aspects (performance, accessibility, best practices) are relevant and useful for any website. Oftentimes, it’s similar to PageSpeed Insights, but the rate of development is higher, meaning the information is often more accurate and up to date. It also recently added SEO scoring (Chrome 65). The upside to this, compared to PageSpeed Insights, is that you can run it locally without issues, and it’s situated right in your developer tools.
/usr/bin/synergy-core –server -f –run-as-uid 1000 –debug DEBUG –name <hostname> –enable-drag-drop –profile-dir /var/lib/synergy –log /var/log/synergy/synergy-core.log -c /var/lib/synergy/synergy.conf –address :24800 • Lighthouse est un outil de Google qui est intégré au navigateur Chrome. Il est orienté ver les applis Progressive Web, mais les informations sur les autres aspects (performance, accessibilité, bonnes pratiques) sont pertinentes et utiles pour tout site Web. Sur beaucoup de points, il est similaire à PageSpeed Insights, mais la vitesse de développement est plus élevée, ce qui signifie que l'information est souvent plus précise et à jour. Il a ajouté récemment une mesure de score SEO (Chrome 65). Le bon côté de ceci, par comparaison avec PageSpeed Insights, c'est que vous pouvez le lancer sans problème en local et qu'il est bien positionné dans vos outils de développement.
Programming Some of these points may be similar to the section above, but that is simply for those readers who skipped one section or another. Creation • Similar to above, using something like Yeoman, or empty project structures, can help you get up and running quickly. Especially if you use multiple languages and have trouble keeping the recommended structures straight. • Virtualenv is python-specific, but it essentially allows you to install a specific version of python into a project which you can use (complete with separate pip installs). This is terrific when you’re running older software or something with an older dependency. Other languages also offer some ability to choose older versions (such as ruby version manager).
La programmation
Ici, certains points peuvent être similaires à la section précédente, mais c'est simplement pour les lecteurs qui sautent l'une ou l'autre des sections.
La création
• Comme au-dessus, l'utilisation de quelque chose comme Yoeman, ou des structures de projet vides, peut vous aider à être rapidement opérationnel. Surtout si vous utilisez plusieurs langages et que vous vous perdez facilement dans les structures recommandées. • Virtualenv est spécifique à Python, mais, en gros, il vous permet d'installer une version spécifique de Python dans un projet que vous pouvez utiliser (même avec des installations pip séparées). Il est formidable quand vous faites tourner des vieux logiciels ou quelque chose avec des dépendances anciennes. D'autres langages offrent aussi des possibilités de choisir des versions plus anciennes (comme le gestionnaire de version de ruby).
Development • Visual Studio Code or any other editor or IDE. The ability to debug from one application, and to offer things like code autocomplete or syntax highlighting, can be very useful to make sure you’re spending less time looking for that missing bracket, and more time coding. • Grep is something I use almost every day when I’m trying to find a particular file in a larger project, or when I’m checking for opening/closing brackets. Combined with find, you can typically locate what you’re looking for. Most editors also offer a “find in project” option, but if you’re not entirely sure where something is, find will serve you better. • Pastebin is great if you’re asking for help or want to share some form of code with another person. Especially if you’re posting a long file into a forum, it’s best to use something like pastebin.
Le développement
• Visual Studio Code ou tout autre éditeur ou IDE. La possibilité de déboguer à partir d'une application et d'offrir des choses comme l'auto-complétion du code ou le surlignement de la syntaxe, peut être très utile pour vous assurer que vous perdez moins de temps à chercher la parenthèse manquante et plus de temps à coder. • J'utilise Grep presque tous les jours quand j'essaie de trouver un fichier précis dans un grand projet, ou quand je vérifie les parenthèses ouvrantes/fermantes. En combinaison avec find, vous pouvez généralement trouver ce que vous cherchez. La plupart des éditeurs offrent aussi une option « find in project » (trouver dans le projet), mais, si vous n'êtes pas totalement sûr de l'emplacement de cette chose, find vous rendra un meilleur service. • Pastebin est super si vous demandez de l'aide ou voulez partager un bout de code avec une autre personne. Particulièrement si vous postez un long fichier sur un forum, il vaut mieux utiliser quelque chose comme pastebin.
Teaching • I use Kazam for recording my desktop when I want to either record a process for myself, or if I’m trying to explain something to a fellow coder or a client. • Carbon is a website (https://carbon.now.sh/) that allows you to upload code and generate syntax highlighted images. This is terrific for documentation, handouts, or other items that would be useful when explaining your code. Do you have other time-saving tips or tools you find make life easier? Feel free to share them with me at lswest34+fcm@gmail.com. If I get enough responses, I’ll compile them into another article so everyone can benefit. Also, if you have negative experiences with any of the tools or tips I outlined above, let me know!
L'apprentissage
• J'utilise Kazam pour enregistrer mon bureau quand je veux enregistrer un processus pour moi-même, ou si je veux expliquer quelque chose à un collègue codeur ou à un client. • Carbon est un site Web (https://carbon.now.sh/) qui vous permet de téléverser du code et de générer des images avec la syntaxe surlignée. C'est formidable pour la documentation, les polycopiés ou d'autres sujets où cela peut être utile quand vous expliquez votre code.
Auriez-vous d'autres conseils ou outils pour gagner du temps et vous rendre la vie plus facile ? N'hésitez pas à les partager avec moi à lswest34+fcm@gmail.com. Si j'obtiens assez de réponses, je les regrouperai dans un autre article pour que tout le monde en profite. De même, si vous avez des expériences négatives avec un des outils ou conseils que je viens de décrire, faites-le moi savoir !