Most of the design work is ready! Hurray! There might be a few adjustments here and there, but I can now focus on programming the app now. TaskFight will be a web app. It will live on a server somewhere on the internet and people will access it through their favorite browser. They’ll type in the URL in the address bar, click a link or a bookmark and… and what exactly?
First, their browser will receive an HTML document. It’s a text file that provides the content of the page, structured with tags. They’re special chunks of text starting and ending with chevrons, like <table>. The tags give the content some level of meaning: this part is a heading, this other part a list, this one a table… The list is pretty extensive.
See the Pen HTML example by Romaric Pascal (@rhumaric) on CodePen.
With only an HTML document, browsers will display the content with a generic design. Enough to make things readable and have a bit of hierarchy on the screen. But nowhere near how I want TaskFight to look.
I’ll need to provide the browser with styling instructions to let it know how each element of the app should be displayed.
These instructions will come in a separate file, a CSS file. The HTML will provide the structure of the content. But the colors of the text and background, the margins around the elements, their positioning, all this will come from the CSS. For the browser to download it, the HTML will simply contain a link to where the CSS file is.
Like HTML files, CSS files are text files. Their structure is completely different, though. They provide sets of rules describing how the HTML should be styled. Each set of rules is preceded by a selector so the browser knows which part of the HTML document the rules apply to.
See the Pen HTML & CSS example by Romaric Pascal (@rhumaric) on CodePen.
With HTML & CSS, I’ll now have something that looks as designed. Once loaded in the browser, though, there won’t be much interactivity besides clicking a link or sending a form to go to another page. I’ll need a third bit to add the app’s behavior.
As for the CSS, a separate file will contain the behavior of the app, written in a third format: JavaScript. Just like the CSS too, the HTML will point the browser to where it needs to download this file.
The JavaScript file is also a text file, and you’ll have guessed by the different name that it’ll also have a different format than HTML and CSS. More than a different format, it’s also a different way of interacting with the browser. HTML and CSS describe things to the browser, but JavaScript orders it to do things.
It interprets events happening on the page: clicks, form submissions, keyboard inputs… It then tells the browser what to do with it: crunch some numbers, send things to a server for example or also order the browser to change the HTML it is currently displaying. This will let TaskFight work without reloading the page.
See the Pen HTML, CSS & JavaScript example by Romaric Pascal (@rhumaric) on CodePen.
With all these text files, you might be wondering where images like the logo or the dotted background fit. That’s the fourth type of files you can have on a website: media assets (images, videos, sounds…). HTML and CSS files provide tags and rules to insert them into the page or use them as background & borders.
To sum up, here’s what’s going to happen when browsers load the app. After someone enters the address (or click the link to the app), their browser will contact the server, which will provide it an HTML document. The document will be pretty empty, but will contain two important pieces of information:
The browsers will download these two files, possibly images included by the CSS and boom! the app is ready to work.
Sounds like a lot of downloading? The files will be kept pretty small. And fortunately, browsers won’t be downloading the whole lot every time. The HTML, there’s (almost) no avoiding redownloading this one. For the other files, though, servers can tell browsers they can keep files for a period of time after downloading them. It’s not quite like having the app work offline, but that’ll save downloads and make things faster for returning users.
The media assets were sorted while doing the branding. Now “all I need” is to build these 3 things:
Let’s see how in the next articles, starting with which tools will help me.
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 :)