Sunday, December 6, 2020

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
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)
  • 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

Friday, May 8, 2020

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