Q 7 9 & @ Z K

s X g F h k P

D r b L 6 w M

Design & Code
Discovery, Simplified.

vsads hacking co.

Make pretty things simple. Pretty simple things in CSS.


Special secret border radius.
horz & vert border-radius.
border-radius: 1em / 2em;


Get perfectly resizing headings.
font-size + view-width.
font-size: 2vw;


How Apple uses dual shadows.
box-shadow: 0 1em red, 0 -1em blue;


Borders vs shadows tricks.
box-shadow: 0 0 0 1em;
border: 1em solid;
border-radius: 2em;


Animation shortcuts via halfsteps.
@keyframes animation {
  50% { color: red; }
}


Custom italics for any font.
skew + text elements.
transform: skewX(-3deg);

Let code be your magic ✨ JavaScript tips for the magician's repertoire.

When your
functions
are getting too long ->
// wrap & organize functions with constants
const NumberFunctions = {
  add: (a, b) => a + b,
  average: (a, b, c) => {
    let total = a + b + c
    return total / 3
  }
}

fn

Break out (return) from
array forEach() loop ->
let array = [5,4,"Apples","Green"]
array.forEach(item => console.log(item))

[]

Trick JS with NaN

// (Get type info for numbers without TypeScript)

function withoutTyping(a, b) {
  return a + b
}

function withTyping(a = NaN, b = NaN) {
  return a + b
}

#

Switch statements
that are fun?
// Get type info (without TypeScript) by using returns in switches.

switch(key) {
  case 0:
    day = "Monday"
    break;

  case 1:
    day = "Tuesday"
    break;

  // ...
}

(I learned that in school, it's great 😑)

switch(key) {
  case 0: return "Monday"
  case 1: return "Tuesday"
  case 2: return "Wednesday"
  case 3: return "Thursday"
  case 4: return "Friday"
  // this is shorter & has type info 👻 ...
}

sw

{}

fn

vsads hacking co.

Pretty Sites & 100DaysOfCode WebDev
for MariSol Northwest Arkansas