edX – Microsoft: DEV275x Writing Professional Code

The course DEV275x Writing Professional Code, is a very short introduction to best practices when it comes to writing code.
As usual this is only my notes I took during the course, you defiantly should check out the course for yourself at
https://courses.edx.org/courses/course-v1:Microsoft+DEV275x+2T2017/course/

Module 1: Elements of Professional Code

Source Control with Git

Source Control is one of the most important aspects of programming.

  • Backup of your Source Code
  • Ability to compare with changes done in the past
  • Restore previous versions if something goes wrong with the new version
  • Easy collaboration with other people

There are many different Software packages that enable Source Control.
Currently the two most popular systems are Git (70% of Programmers) followed by SVN (10% of Programmers) (Survey of 30k Developers)

The core difference between the two is, that for SVN you need to set up a dedicated Source Control Server, and all changes are tracked there.
With Git it is distributed, so you can use it locally and if you choose in combination with a server.

Especially Code Editors like Visual Studio Code have Git directly integrated making it really easy to set up and use Git.

Programs:
* Git

Cloud Providers
* Gitlab For Private Repos
* Github For Public Repos

Workflows
* Comparing Workflows
* GitLab Flow

Markdown

Markdown is really great because you can learn it really fast, and even if you do not convert Markdown into a HTML site or PDF the text is still formatted quite neatly and readable.

Like Git you find support for Markdown files in common editors like Visual Studio Code / Atom.
And of course in blogging software like WordPress have plugins that enable Markdown for the Posts.

Module 2: Communicate with Code

Now this chapter was rather interesting, it focused on how those smaller things like code conventions actually help to improve the codebase.
While the presenter did not use automated tools to improve the code readability it was nice to see that it is a very important aspect of coding to get the really basic elements correct.

Consistency and Naming

Code should be formatted always in the same matter. It improves the readablity and removes all personal style from the code enabling all developers to immediatly take ownership of the code instead of saying well that is the style of developer A, he should fix it.

Naming is important and greatly improves the readability of the code it does not help to say var c = 0, it is much better to say var beanCounter= 0.
You do not write code for the computer but actually for other human beings. The compiler will then convert it into machine code, but you will probably not have to debug that.

Refactor Duplicate Code

A great problem is when the code base has a lot of duplicate code. As soon as that happens and some minor change changes the way how you do things, then you would have to go back and change all the different places where that piece of code is used.

Refactoring early reduces the risk that the next developer says, well, I will just do that with copy and paste.

Simplfy

This one is rather difficult, but by keeping the code and the structures simple and readable has an much higher benefit in the maintainability of the code than some complex structure that executes a micron second faster. Of course that depends on the program you are writing.

As a rule of thumb functions should be rather short, not hundreds of lines long. (Too short is also bad.)
If you needed to add complexity then you also should document why you are adding it and what is the best approach to understand that complex structure.

Module 3: Code Confidently With Unit Tests

Well writing Unit Tests and overall having Tests for your code, allows you to a) know the use cases of your code and b) allows you to see when you change something what else may have been broken while you were developing a new feature.

package.json: Updating Fixed Versions with npm-check

One of the common problems when running a larger project is that you need to use fixed versions in your package.json file. But at the same time you need to regularly update your packages.
The most elegant way is using npm-check. The small tool allows you to select which packages should get an update and update accordingly.

Installation

npm i -g npm-check

Usage

To update the packages in your project you now simply run npm-check -u. If you want to ensure that you are installing the exact package run it with the additional optional flag -E to ensure exact-versions.

npm-check -u -E

With Space you select the packages and with Enter you install the package.

Elementary: Changing the Layout of the Window Controls

While Elementary focuses a lot on UI and is beautiful to use. It is totally mind boggling that they decided to remove the minimize button.

By changing the the value for “gsettings set org.pantheon.desktop.gala.appearance button-layout” you can adjust the button layout to your preference.
The value would be in the format of [leftElements] : [ rightElements ]

So the default Elmentary setting would be:

gsettings set org.pantheon.desktop.gala.appearance button-layout close:maximize

While the Windows Layout would be

gsettings set org.pantheon.desktop.gala.appearance button-layout :minimize,maximize,close

Sadly the official Elementary Apps do not support this setting, so a program like VSCode would have its Icons on the correct side, while the Pantheon-files still has the same button Layout as before. But well it is a good start.

Disable the package-lock.json file

With NPM 5, npm has started to create a “package-lock.json” file.
It ensures that some dependency tree is identical on every developers environment. Official Documentation.

Now, that may be important on some projects. In my personal projects I do not really care. And in the professional projects I did not have any issues how things were done before.

Actually with the new way of doing things, you must first remove the package-lock.json file and then run “npm update” to install newer versions of stuff. Then again, this can cause problems as when some other person also creates the package-lock file, or a merge conflict occurs etc. In the end totally defeating the purpose of the file.

Disabling the Package Lock File for a Project

  1. Create a file called .npmrc
  2. Open the file and add the line package-lock=false

Global Disable

If you currently want to disable the behavior on all projects run

npm config set package-lock false

In the future the feature may be more easy to use. For now I at least will stick to the old way of how to do things.

Notes on Course: Microsoft – Advanced CSS Concepts

My notes on the great course Microsoft – Advanced CSS Concepts on edx.

Lesson 01

Responsive Layout

Covers the basics of Responsive Layout.
In essence you use the @media query to figure out what
the width, height, page orientation and resolution of the device is.
Then based on that information you use a different CSS Rule.

To create a consistent Layout you should always design for the smallest device screen – then expand it to the bigger devices.
(Mobile First Strategy).

Base CSS

In General you should use a Style guide to create a consistent look
across your application. They are usually created by the graphic designer.

Typically a website should be suitable for all different types of browsers.
However the CSS implementation and the default styles are different across browsers.
To avoid this problem, you can include a CSS Reset – to ensure a consistent style.

A front end Style guide should help define
* Code standardization of CSS, and HTML
* Consistency of code and design
* More efficient workflow
* Documenting of code practices
* An easy-to-access reference for code and design for new team members

Your style guide will be comprised of:

  • A template: The template contains the basic elements that serve as the foundation for your web page, such as color palette, fonts, headers, footers, body text, navigation, widgets, and grid layouts.
  • Patterns: The patterns for your web page include buttons, logos, images, the font icon library, and form styles.
  • Documentation: The documentation is a record of the style and development pattern of your web page. You can add comments in your code that serve as the style guide or use interactive modals or tool tips.

Media Queries

The most commonly used media queries are:

  • min-width Rules applied for any browser width over the value defined in the query
  • max-width Rules applied for any browser width below the value defined in the query
  • min-height Rules applied for any browser height over the value defined in the query
  • max-height Rules applied for any browser height below the value defined in the query
  • orientation:portrait Rules applied for any browser where the height is greater than or equal to the width
  • orientation:landscape Rules for any browser where the width is greater than the height

The Query information is then used to define breakpoints, points where the layout switches from one size to another.
Example of a set of major device breakpoints:

/* Extra small devices (phones, up to 480px) */
@media screen and (max-width: 767px) {…}

/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) and (max-width: 991px) {…}

/* tablets/desktops and up */
@media (min-width: 992px) and (max-width: 1199px) {…}

/* large like desktops and up */
@media screen and (min-width: 1200px) {…}

Units

Historically the “px” Unit was used, however to incorporate various resolutions it is better to use the “rem” unit.

Going forward

  • Optimize the text for reading
  • Use major device breakpoints, and address content with minor breakpoints
  • Treat your website’s layout as an enhancement
  • Use relative units like rem or em;

Working with images

Images should be resampled to three different media sizes

Note: The alt tag must be set to correctly validate.

Lesson 02

Modular CSS

Modular CSS is:

  • A guideline based approach for breaking down pages into generic reusable CSS code.
  • Based on classes and consistent naming conventions.
  • Easy to read and maintain by teams.

CSS Modules are:

  • Generic, self-contained, and reusable.
  • Modifiable, combinable, and scalable.
  • Can contain or be contained by other modules but stay independent.

What are some common modules?

You will often come across modules such as these:

Example Module

What are the Results of a Module Based Approach?

  • Faster development
  • Flexible and scalable code
  • Code reuse
  • Organized and easy to read code
  • Easier to maintain
  • Team efficiency
  • Decoupled HTML and CSS

Guidlines

  1. OOCSS (Object Oriented CSS) | http://oocss.org/
  2. SMACSS (Scalable and Modular Architecture for CSS) | https://smacss.com/
  3. BEM (Block, Element, Modifier) http://getbem.com/
  4. DRY (Don’t Repeat Yourself CSS)

Font Awesome

A popular set of icon fonts is Font Awesome (http://fontawesome.io/)

Example for a like button

Git: Hooks run “npm install” on checkout

When working on a project you usually install various packages from npm.
Of course these packages are maintained and updated, adding more features and security fixes, and stability patches.

One person on your team should run npm outdated once per week to see what all has been updated and test if you can integrate the packages into your project.
Thus the package.json is updated and causes a grand problem for all other developers on the project. If a package has major breaking changes the code will need to be adjusted, however that code will not run on the other develoepers environment. The other developers working on the project they have to run npm update to install the missing / outdated packages in their environment.

The solution to this problem are “git hooks”, essentially git can execute code on specific events, like before commiting your code, or pre push etc.
git hooks. For my use case I would like to run npm update after a developer checks out from the git repository, this is the event “post-checkout”.

Native Git Hooks

To create a git hook you need to add a file in your project called .git/hooks/post-checkout (On linux add the executable bit with chmod +x)

You will test this and say, yes this works as intended – lets commit it to the repository. – Now you will discover that you cannot commit files in .git to the repository.
In fact git does not allow you to do this, due to security concerns as git hooks can execute any shell script.

The work around for this issue is to simply add it into a folder called git-hooks/ and tell the developers to copy the file when they set up their dev environment.

Husky

As always if there is a Problem for development with javascript there is a npm package to solve the problem.
Husky uses the package.json to define the scripts that are executed via git hooks.
Simply Install Husky
npm install husky -D

Then edit the package.json:

The Husky solution would also allow you to execute your own js file, maybe also doing some cleanup of files or running tests etc.

Web Tooling and Automatisation using gulp 4

Now working with Gulp you will discover that you run into a couple of minor problems. Especially in sequencing the different types of tasks.
Lets take a simple clean task, it should run before all of the other tasks. However Gulp will run all tasks in parallel.

The team that is working on Gulp has been working on a solution for this problem and in Gulp 4.0 we will get gulp.series() and gulp.parallel(); to distinguish between these two types of operations.

Sadly it looks like that currently the release of Gulp 4.0 is delayed. However you can use the current Alpha version prior to its release.

Installing Gulp 4

You can simply install the next version of Gulp with NPM (A git client is required, as the package is not in the npm repository and will be cloned from Github)

Updating the gulpfile.js

The syntax for tasks has changed, so we need to rewrite parts of the file:
Our exisiting Gulp 3 task

Needs to be rewritten with gulp parallel as such:

However we should not stop there and improve upon this task, by running the clean task before all of the other tasks. To ensure that it runs before the other tasks we use gulp.series().

Improving on the production flag

With gulp.series() we now can stop using the –production flag. We simply define a production task.

As first operation we pass in a function that simply sets the production boolean to true:

The function uses “done” to signal gulp that the function has completed.

Hiding Tasks

Another improvement of Gulp 4.0 is that you can pass functions, as well as tasks to gulp.series and gulp.parallel.

This in turn lets you write normal functions that are hidden from the command line, ensuring that everybody on the project runs the default build task instead of only the html task.

Here is now our improved Gulpfile.js:

Package.json