week-3.md

Week 3

I'm currently using Operator Mono for my editor font.
Yes I paid the $200 for it.

— Wes Bos

Real Programmers by xkcd

Table of Contents

• Slides
• Assignments
• Hand in

Slides

• Lab-3

Assignments

Local

Research and update your personal development setup to optimize your workflow

Synopsis

• Time: 2:00h
• Due: before week 4

You can theoretically write code in about anything that will allow you to write text. That being said, your choice of tooling greatly affects your productivity. Development software comes in all shapes and sizes, from basic text-editors to full blown IDEs. Besides editors, there's numerous tools and extensions available that'll help you writing better code.

Assignment

Research the world of development tooling, and document the research in your wiki. Look into the following subjects, and describe why you think it's useful (or not) and if/how you're using it in your own work:

• Text Editors Themes (f.e. color themes, fonts)
• Text Editor Settings (f.e. settings.json)
• Text Editors Extensions (f.e. extensions marketplace)
• CLI's and configurations (f.e. prompts, aliases, colors)

Additional resources

• Syntax.fm VSCode extensions and themes

Optional: Many developers create a repo with what are known as dotfiles. An export of all their configuration files. You can try to set-up your own if you feel a bit adventurous. Here are two examples from Mathias and Danny.

---

Linting

Install additional tools to help you write consistent code

Synopsis

• Time: 4:00h
• Due: before week 4

Besides editors, there's numerous tools available that'll help you 'cleanup' your code, like linters, beautifiers, and (type-)checkers. They can be broadly categorised in two categories: linters and formatters.

• Linters; help you catch syntax errors (f.e. ESLint, Stylelint, Markdownlint)
• Formatters; helps you format you code (f.e. Prettier, Editorconfig)

💡 Configuration files like .eslint, .editorconfig etc. are usually created in the root of your repository. There is no need to put them in subfolders.

Additional resources

• Linting with EsLint by The Coding Train
• ESLint + Prettier + VS Code by Wes Bos

Assignment

Try to implement atleast one linter and one formatter in your project Additionally research what they do and document the research in your wiki.

Pro Tip™: Most linters are often available as extensions in text-editors. You install the extensions and the only thing you additionally have to do is to create a configuration file to tell the extension what rules to check for.

---

Build

Research and implement a build tool in your project

Note: This exercise is mainly for people from the zwarte piste.. It's very useful to be aware of the various build tools and how they can help your project, but it's ok if it's a bit too much for now to start using.

Synopsis

• Time: 3:00h
• Due: before week 4

Build tools are additional tooling you can use in your project and are mostly used for automating tasks or transforming code. For example the CSS preprocessor Sass which gives 'default' CSS more features and abilities. You write .scss files which get compiled to .css which can be read by a browser.

• Preprocessors: Sass, PostCSS
• Bundlers: Browserify, Rollup

Assignment

Try to implement and research atleast one build tool in your project and document in your wiki. Often times you can implement build tools by playing around with your start scripts in the package.json (concurrently or npm-run-all can help).

Pro Tip™: Build tools (or asset pipelines) can get complex very easily. When you end up using multiple build tools in the same project, you'll quickly find that you need an additional tool (e.g. Gulp, Webpack) to orchestrate all these different pieces. Don't start using these until you really have to, as they can be very overwhelming to configure properly if you're not already comfortable with the various build-tools and steps.

Concept

Continue working on your Job Story and feature you are going to build for Blok Tech.
Improve the front-end interface of your feature, spend some time on animation and interactivity etc.

Hand In

1. Push your Changes
   Commit and push any progress in your repo. Document all research you did in your wiki.

2. Create an Issue
   Mark this assignment as completed by opening an issue on our Issue Tracker. Fill in the issue template of week-3 with the correct information.

3. Feedback
   Any thoughts/feelings/concerns/opinions about these assignments? Let us know! We optimize these classes year-to-year, so your feedback is invaluable in making this course better.