Ceci est une ancienne révision du document !
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. 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. • 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.
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. • 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.
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): /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.
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).
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.
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!