dcyoung-dev

CSS Rules for Harmonious Living

Sizing

• Prefer to use em/rem rather than px
  • rem is the browser's default size - usually equal to 16px
  • em is relative to it's parent's sizing
• Consider which sizing makes most sense - should the sizing increase if the parent's increases (em) or should it remain constant (rem).

Colours

• Always move colours into a separate file and reference through CSS variables var()

dcyoung-dev

#!/bin/bash
pbpaste |  sort | uniq

dcyoung-dev

Switching from bash to zsh

0. Install zsh using brew brew install zsh
1. Set ZSH as default shell chsh -s /bin/zsh
2. Copy bash profile cat ~/.bash_profile >> ~/.zshrc

dcyoung-dev

<h1>Product Records</h1>

<div *ngFor="let record of productRecords | async">
  {{record.itemNumber}}
</div>

dcyoung-dev

const routes: Routes = [
  {
    path: 'old-lazy',
    loadChildren: './old-lazy/old-lazy.module#OldLazyModule'
  },
  {
    path: 'new-lazy',
    loadChildren: () => import('./new-lazy/new-lazy.module')
      .then(m => m.NewLazyModule)
  }

dcyoung-dev

`npx -p <package-name> <command>`

eg.

Create new Angular project
`npx -p @angular/cli ng new new-project-name`

Create new NextJS project
`npx -p @nextjs/cli next new new-project-name`

dcyoung-dev

<div id="map">
  <h4>From map</h4>
</div>

<div id="loc_details">
  <h4>Current Location</h4>
  <p>
    Lat : {{geoLoc.lat }}
  </p>
  <p>

dcyoung-dev

@mixin for-size($range) {
  $phone-upper-boundary: 37.5rem;
  $tablet-portrait-upper-boundary: 56.25rem;
  $tablet-landscape-upper-boundary: 75rem;
  $desktop-upper-boundary: 112.5rem;

  @if $range == phone-only {
    @media (max-width: #{$phone-upper-boundary - 1}) { @content; }
  } @else if $range == tablet-portrait-up {
    @media (min-width: $phone-upper-boundary) { @content; }