The previous article described what to build: one HTML file, one CSS file and one JS file to be sent to the browser when users access the app. These will be put on a server for everyone to access at http://taskfight.com. You’re reading this online, so this part is already taken care of. What’s the next step? Getting my tools ready to get coding.
Media assets aside, all of the app files are text files. In the end, making the project will come down to writing text, lots of text. The main tool needed to write TaskFight is a text editor. Not something like Word, which is meant to edit documents. Something more like Notepad, that will edit plain text files. But with a few enhancements, to facilitate the edition of the code.
Something like syntax highlighting, for example, will expose the structure of the files, making them easier to navigate. This makes it much easier to see what’s a tag and what’s the content.
<caption>Content</caption>
<caption>Content</caption>
A good search & replace feature is also a great help. There’ll be plenty of time where I’ll need to replace text across multiple files, or just find a bit of code in a long file.
Another handy feature is having something to checking what you type for mistakes. Kind of a “programming spell checker”, but more for the grammar than the spelling.
There are plenty of text editors out there. My personal pick is one named Atom.
When programming, you write instructions to a machine. It feels like you’re writing for the machine, but you’re actually writing for other humans: other developers, or just you a couple weeks/months in the future.
As the number of features grows, so does the code. For the machines, keeping things as small as possible is best:
function increment(a){return a+1;} function decrement(a){return a-1;}
For a human, however… Imagine one loooong file full of something like the above. And now it’s 3 months down the project and you need to update something in it, say update the form to enter the tasks. It’s going to be a pain to find where to edit and to write your changes in there :(
It’d be much nicer to open the AddTaskForm.js file, aptly stored in the ui folder and full of well-spaced code like this:
function increment(value) {
return value + 1;
}
function decrement(value) {
return value - 1;
}
Tools to the rescue! They’ll do the conversion between written for human code and optimized for machine code. Namely, Webpack will aggregate all the JavaScript files into on. For the CSS, it’ll be Sass that has this job.
The project is scattered into plenty of files, though. And when saving, I need a way to make sure I’m working on the same version of all the files. It wouldn’t help much to be editing the CSS file, only to realise that the HTML it’ll get applied to is the one from two months ago, missing a few edits made last week.
Saving multiple files is exactly what version control tools do. Something like Git, for example. More than just the last save, it keeps the history of all the changes it saved. Handy to undo things in case I realise a piece of code is not as useful as planned.
It can also keep track of multiple histories of saves and merge them when needed. This allows to test out a new feature without fear of ruining the main project. And when it’s done, bring it into the main version.
Last, it can also backup the saves online on services like Gitlab or Github. Not only an additional safety net, but also an easy way to share code with other developers when working as a team on a project.
All tooled up now, coding time is getting closer and closer.
Hope you enjoyed it. The journey is now over and the app will soon be released. You can subscribe to the newsletter to get notified when it'll get opened :)