Setup Guide

Code editor & extensions

While you can use any text editor to write code, we recommend using Visual Studio Code, a free, lightweight, and extensible code editor with built-in support for debugging, embedded Git control, syntax highlighting, intelligent code completion, snippets, and code refactoring.

Install Visual Studio Code from the visual studio code website and follow the instructions for your platform.

To catch errors and simplify the development process, I'd recommend installing the following extensions:

  • Prettier: Formats code on save for consistent spacing and quotes.
  • Live Server: Opens a local preview that auto-refreshes when files change.
  • Auto Rename Tag: Keeps opening/closing tags in sync to avoid syntax errors.

Browsers

While developing, we recomend using Google Chrome or Firefox. They both offer useful developer tools and are easy to use. You can simulate mobile devices by using the Chrome DevTools and Firefox Developer Tools to reproduce touch interactions.

Safari, although not suited for developement, should still be used for testing both on desktop and mobile, since some features behave defferently or worse on Safari.

These are only the browser we'd recommend using for web developement. If your are concerned with privacy on the web, we'd recommend using Brave or Firefox for privacy-conscious web browsing.

FTP clients

An FTP client (file transfer protocol) is required to upload files to the server. Many hosting providers offer their own FTP client, including Infomaniak, but you can also use a third-party FTP clients. We recommend using:

  • Cyberduck – free and open-source FTP client.
  • Transmit – faster than Cyberduck, paid FTP client (45$).

Additional software and tools

Preparing media files

To prepare media files for use on the web, you can use ImageOptim, which is a free and open-source tool for optimizing images. It can also be used to convert images to WebP format, which is a lossless format that can be used on the web.

To optimise videos, you can use HandBrake, which is a free and open-source video converter. It can also be used to convert videos to WebM format, which is a lossless format that can be used on the web.

Converting fonts

To convert fonts to WOFF2 format, you can use Transfonter or Font Squirrel, which are both free and open-source tools for converting fonts to WOFF and WOFF2 formats, the most commonly used format for web fonts.

Github Desktop (optional)

Git is a version control system that allows you to track changes to your code. It is used by many developers to collaborate on projects and share code. GitHub is a web-based Git repository hosting service, which allows you to store your code online and collaborate with others.

To install GitHub Desktop, visit the GitHub Desktop website and download the installer for your operating system.