Learn the concept of HTML and CSS in 5 minutes

HTML

Lesson:

• We can imagine a HTML document as a series of boxes
• Inside each box, there can be text and other boxes
• There is one root box for the visual elements: the body box
• The official name for the boxes is element
• There are different types of elements, that can be used for different purposes
• See: HTML elements reference on MDN

Good to know:

• Using the elements according to their original purpose is generally a good practice and also helps with web accessibility

Exercise: explore the Elements panel of your browser's Developer tools. (Usually opens with F12, or you can reach it via "Inspect this element" from the right click menu on any page.)

CSS

Lesson:

• To style an HTML element, we can put the styling directly into the element's style attribute (this is called inline styling)
• See CSS reference on MDN for the styling possibilities
• To reuse styling across elements, we must mark elements that should be styled in the same way, and also extract the styling to a common place.
• There are multiple ways to mark an element for styling:
• for marking unique elements: provide an id attribute
• for marking non-unique elements or grouping elements together based on a common attribute: provide one or more class attributes
• for more fine-tuned styling, we can use other attributes than class (like data-*) as well to identify a certain element.
• the type of elements (like div) can also be used to identify elements for styling, but it's less flexible compared to the class attribute.
• These marks that enable selecting an element for styling are called CSS Selectors
• The common place the styling is extracted to can be within a style tag or a separate file
• To sum it up: CSS is these two things: the selectors and the styling together

Good to know:

• CSS Selectors can be used for selecting elements on a page for other purpuses as well (like testing or interactive behavior)
• Browsers provide default styling for the HTML elements
• Not all styles can be applied to all elements
• Not all styles are supported by all browsers
• In case of clashing styles:
• The style with the more specific selector for a given element will win
• The style that was loaded later will win

Best Practice:

• Consider separate classes for styling the look (eg. has no margin) and behavior (eg. primary button)
• It is not recommended to use the id attribute unless you can guarantee that there will be no other element with the same id on the whole webpage (including embedded content)
• It is not recommended to use inline styling
• It is recommended to use relative units for sizing (eg. rem instead of px)

Exercise: open your browser's Developer tools and take a look at the Styles tab (usually on the right side) on the Elements panel. Play around with adding or removing styles, and observe which selectors affect the elements of the page. Check out the Computed tab as well.

Note: Functional Interfaces in Java

 (source: Java SE 8 for the Really Impatient: Programming with Lambdas - 3.3. Choosing a Functional Interface)

Common Functional Interfaces

Functional Interface	Parameter Types	Return Type	Abstract Method Name	Description	Other Methods
Runnable	none	void	run	Runs an action without arguments or return value
Supplier<T>	none	T	get	Supplies a value of type T
Consumer<T>	T	void	accept	Consumes a value of type T	chain
BiConsumer<T, U>	T, U	void	accept	Consumes values of types T and U	chain
Function<T, R>	T	R	apply	A function with argument of type T	compose, andThen, identity
BiFunction<T, U, R>	T, U	R	apply	A function with arguments of types T and U	andThen
UnaryOperator<T>	T	T	apply	A unary operator on the type T	compose, andThen, identity
BinaryOperator<T>	T, T	T	apply	A binary operator on the type T	andThen
Predicate<T>	T	boolean	test	A Boolean-valued function	and, or, negate, isEqual
BiPredicate<T, U>	T, U	boolean	test	A Boolean-valued function with two arguments	and, or, negate

Functional Interfaces for Primitive Types

p, q is int, long, double; P, Q is Int, Long, Double

Functional Interface	Parameter Types	Return Type	Abstract Method Name
BooleanSupplier	none	boolean	getAsBoolean
PSupplier	none	p	getAsP
PConsumer	p	void	accept
ObjPConsumer<T>	T, p	void	accept
PFunction<T>	p	T	apply
PToQFunction	p	q	applyAsQ
ToPFunction<T>	T	p	applyAsP
ToPBiFunction<T, U>	T, U	p	applyAsP
PUnaryOperator	p	p	applyAsP
PBinaryOperator	p, p	p	applyAsP
PPredicate	p	boolean	test

How to update a fork from the original repository

(source)
(more info)

1. [preparation] Clone your fork to have a local copy:

git clone git@github.com:YOUR-USERNAME/YOUR-FORKED-REPO.git

2. [preparation] Add remote from original repository in your forked repository:

cd into/cloned/fork-repo
git remote add upstream git://github.com/ORIGINAL-DEV-USERNAME/REPO-YOU-FORKED-FROM.git
git fetch upstream

3. [routine] Update your (local) fork from original repo:

git pull upstream master

4. [routine] Update your fork's remote:

git push origin master

The different styles of casing

camelCase
PascalCase
snake_case
kebab-case

(source: Medium)

Idea: Search for .gitconfig in parent folders until found

I manage multiple git remote accounts on a single machine and each has a different user name and user email associated with it.

Forgetting to set the name and email in a newly pulled repo has caused me trouble quite a lot.

It would be so nice, if I could just have one .gitconfig file sitting in each folder that I use to store the repos associated with a single account, and git would just read the nearest config it finds.

Getting started with Ruby (on Rails)

Ruby language basics

• Ruby in 20 minutes
•  the Ruby REPL is irb
• expressions in a string are escaped with "#{expression}"
• print function is puts
• functions are defined like:

  def myfun(somearg = "default")
    # do something with somearg
  end

• arguments can have default value
• functions can be called like:

  myfun
  myfun()
  myfun "some other arg"
  myfun("some other arg")

• classes are defined like:

  class MyClass
    attr_accessor :somearg
    def initialize(somearg = "default")
      @somearg = somearg
    end
    # do something with @somearg anywhere in the class
  end

• class instantiation is done with the "new" keyword:

  myclass = MyClass.new("some other arg")

• the instance variable @somearg is private
• the methods defined in the class are public by default
• the attribute accessor :somearg allows to get and set the instance variable (public). Usage: myclass.somearg and myclass.somearg= "something new"
• information about a class can be retrieved with MyClass.instance_methods(show_inherited = true)
• See more on Ruby-Doc
• iterations
• for each loop
  

  @names.each do |name|
    puts "Hello #{name}!"
  end

• conditionals
• if-else block
  

  def say_bye
    if @names.nil?
      puts "..."
    elsif @names.respond_to?("join")
      # Join the list elements with commas
      puts "Goodbye #{@names.join(", ")}.  Come back soon!"
    else
      puts "Goodbye #{@names}.  Come back soon!"
    end
  end

Some additional info:

• @/@@ vs. self
• method visibility
• variables vs constants
• ! (aka. bang) in method names means danger
• ? is indicating a boolean return type

Ruby on Rails basics

• Getting started with Ruby on Rails explains the project structure
• ActiveRecord Basics explains that
• anything that subclasses ApplicationRecord is mapped to a database table
• validations are a thing of ApplicationRecord. See more here. 
• ActiveRecord Migrations explains how database migrations are done

rspec testing framework basics

...coming up...
in the meantime here are some resources:

• https://dev.to/hanachin/how-to-minimize-rspec-describecontext-nesting-4179
• http://www.betterspecs.org/
• https://stackoverflow.com/questions/5359558/when-to-use-rspec-let

My IDE choice

• VSCode with extensions:
• Ruby
• Ruby Solargraph
• ruby-rubocop
• lourenci.go-to-spec

Developing Gitlab: Setting up a development environment with Vagrant

FYI, I abandoned the Vagrant approach in favor of a VirtualBox machine with Ubuntu.

---
Versions in use:

• Vagrant 2.2.4
• VirtualBox 6.0.8-130520
• gitlab-development-kit revision e519656ac3101770622d9451f500a6c2a08c5250

Set up GDK for the first time

1. open a CMD with "Run as Administrator" (aka. "elevated") in the gitlab-development-kit directory
2. follow instructions for Vagrant installation:

   vagrant up --provider=virtualbox --provision

   
   Troubleshooting
• needed to install vagrant-disksize plugin (provisioning failed with the error: Unknown configuration section 'disksize'.)
• needed to install vagrant-vbguest plugin (provisioning failed with an error for synching directories with rsync)
3. when ready:

   vagrant ssh

4. cd gitlab-development-kit

5. follow instructions from gdk install: Option 1 develop in fork

   gdk install gitlab_repo=https://gitlab.com/MY-FORK/gitlab-ce.git

   
   Troubleshooting
• fix line endings (because the repo was cloned on a Windows host with windows line endings, but is used on linux)
1. set the git line endings to retrieve any updates unix style for the gdk repo

   git config core.autocrlf input

2. install dos2unix on the virtual machine

   sudo apt-get install dos2unix

3. change the line endings in the support and bin directories

   cd support
   find ./ -type f -exec dos2unix {} \;
   cd ..
   cd bin
   find ./ -type f -exec dos2unix {} \;
   cd ..

6. Set up tracking of original upstream repo

   support/set-gitlab-upstream

7. run the server

   gdk run

   
   Troubleshooting
• if the run command fails, stop node manually before trying again

  pkill -f node
  gdk run
  

8. reach it from the Host on localhost:3000 and use the given credentials

There's also a Troubleshooting page, if it is needed.
Here are some more hints:

• A possible fix for recipe for target 'postgresql/data' failed
• Another possible solution: https://gitlab.com/gitlab-org/gitlab-development-kit/issues/313
• And this one: https://gitlab.com/gitlab-org/gitlab-development-kit/issues/354

Everyday commands

• vagrant up: starts the virtual machine
• vagrant ssh: connects the virtual machine
• cd gitlab-development-kit
• gdk run: starts the server
• Ctrl+C: exits the server
• Ctrl+D: exits the virtual machine
• vagrant halt: stops the virtual machine
• How to put a process into background

Restart the whole thing because something went amiss

• clean your git repos from untracked and ignored files and directories
• use git clean -ndx to see what would be deleted
• use git clean -fdx to actually do the deletion
• don't worry, repositories within a repository are not cleaned by git clean.
  there are 3 repositories in gitlab-development-kit:
• gitlab-development-kit/gitlab
• gitlab-development-kit/gitlab-workhorse/src/gitlab.com/gitlab-org/gitlab-workhorse
• gitlab-development-kit/go-gitlab-shell/src/gitlab.com/gitlab-org/gitlab-shell
• delete these directories too:
• gitlab-development-kit/gitlab-workhorse/src
• gitlab-development-kit/go-gitlab-shell
• do the "Set up GDK for the first time" part again