A fictional non-profit website made for the OsloMet Innovation Camp
Auhtor: Mats Sommervold & Erik Sommer
http://student.cs.hioa.no/~s341829/Introduction%20Week%20Website/index.html
Git is a version controll system that enables possibility for remote repositories (github). This means that you can edit code and easily restore old versions of your code if you mess up anything. It also makes it easier to collaborate with others using github. Two people can work on different parts of a project and merge the changes together on github.
NB! When using git on your project you always need to be in the directory of your project folder! Use command 'cd yourDirectoryPath'. (like we did erlier)
How it works in short: You pull down any changes from the repository before you begin coding. Work on a spesific area of the project. When you are done with that task, commit your changes to git and move on ot next task. When you are done working, push the changes back up to github for the other developers to see. Next time you start working you pull down the latest changes again and do it all over.
These are the basic commands to use git:
Git branches: (more advanced git) When wokring on a spesific feature, you can work on a separat branch. This means that you do not edit the main project, but a copy of it. If you f*** it up, you can just delete the branch and you are back to normal (master). When you are done with that spesific feature you can commit the changes and merge it with the master branch or push the branch up to github and tell another developer to look over the code and merge it for you.
These are the merge commands:
Advanced git (no need to learn)
This repository comes with a lot of automation commands and packages that make your experience as a developer much better.
Commands: Remember to allways be in your project directory in git bash. And be on the branch you want to work on
gulp watch
When starting to work, run this command to automatically spin up a web server that refreshes automatically when you save a change to any file in the project. When you are done hit 'ctrl + c' to terminate the task. 'gulp watch' also compiles css and injects it into the running server without evern refreshing.
The other amazing part of 'gulp watch' is that when you stat it up you can see two url's in the command line. If you type in the "remote" url into another device that is on the same wifi network, it will display the website on that device with live changes. All the instances of the server are synced, so if you scroll down the page on your phone, it wil also do it on your computer.
gulp build-dev
When you are all done with the project and want to publish the website, use this command to build a test vesion of the website without all the extra developer tools. This will compress all the images, but not the css and javascript files. They are hard to read when compressed and not ideal for testign the build. To check if the build works, run gulp previewDev
gulp build
When you have tested the 'gulp build-dev' you can build to a produciton, publish ready version with compressed images, javascript and css for faster pageload. To test if it workes, run gulp previewProduction
Naming convension for css classes. Every element should have a class to make the connection between css and html easy to understand and avoid inheritence problems.
See more at: https://en.bem.info/methodology/quick-start/
This is a system implemented into the repository. In the ./app/assets/styles/ and ./app/assets/scripts there is a styles.css
and App.js
file. These files are simply places to include other CSS and JS modules that are placed in the modules/ folders. This way we can split up or css and javascript into several files without having to include a lot of files into our index.html file.
When gulp watch
is running and we save a css or jecascript file, the system will re-compile all the modules into one file and put that file in the ./app/temp/styles/ or ./app/temp/scripts folder and then trigger a refresh. The index.html is set up to import the files form the temp folder.
NB! Allways beginn a moduel filename with '_'
In this repository you can write ES 2015 and above since we use 'babel' to convert new javascript syntax to old syntax. See more here: https://www.w3schools.com/js/js_es5.asp
In this repository, you have the option to write some 'PostCSS'. This is a few CSS extras that makes css faster to write. These automatically compile down to normal css every time yo save a file.
CSS variables:
Define variables with values you want to reuse multiple times over in your css in the _variables.css
file in the styles/global/ folder.
Example:
$mainColor: #3456f3;
From now, when you write $mainColor anywhere in your css, it will be replaced with that color value.
Nested CSS: Enables you to write css nested.
Example:
h1 {
font-size: 30px;
a {
color: red;
}
}
The code above will compile to this:
h1 {
font-size: 30px;
}
h1 a {
color: red;
}
CSS mixins CSS mixins allows you to define a pice of reusable code, perfect for media-queries.
Example:
// Define mixin
@define-mixin atSmall {
@media (min-width: 330px) {
@mixin-content;
}
}
// Use mixin
@mixin atSmall {
a {
color: orage;
}
}
The code above will compile into:
@media (min-width: 330px) {
a {
color: orage;
}
}
Another example:
// Define mixin
@define-mixin clearfix {
&::after {
content: "";
clear: both;
display: table;
}
}
// Use mixin
@mixin clearfix;
The code above will compile into:
&::after {
content: "";
clear: both;
display: table;
}
Hidden CSS benefits:
<picture>
<source srcset="assets/images/hero--large.jpg 1920w, assets/images/hero--large-hi-dpi.jpg 3840w" media="(min-width: 1380px)" type="">
<source srcset="assets/images/hero--medium.jpg 1380w, assets/images/hero--medium-hi-dpi.jpg 2760w" media="(min-width: 990px)" type="">
<source srcset="assets/images/hero--small.jpg 990w, assets/images/hero--small-hi-dpi.jpg 1980w" media="(min-width: 640px)" type="">
<img srcset="assets/images/hero--smaller.jpg 640w, assets/images/hero--smaller-hi-dpi.jpg 1280w" alt="Costal view of ocean and mountains" class="large-hero__image">
</picture>
<img class="lazyload" sizes="(min-width: 970px) 976px, 100vw" data-srcset="assets/images/first-trip-low-res.jpg 565w, assets/images/first-trip.jpg 976w, assets/images/first-trip-hi-dpi.jpg 1952w" alt="Couple walking down a street.">
We will use this font for the website headings:
<link href="https://fonts.googleapis.com/css?family=PT+Sans+Caption&display=swap" rel="stylesheet">