Webdev

Modern CSS Fundamentals Baseline Progressive Enhancement Logical properties and values CSS Reset CSS Cascade Layers CSS Custom Properties (variables) Colors Typography Media queries and custom properties Structured custom properties Base styles Meaningful links Big picture design system Wrappers Modifiers Option 1: BEM approach Option 2: Data attributes Landmark regions Gems Resources Modern CSS Fundamentals Baseline Baseline features are ones that are supported by all the major browsers (Chrome, Edge, Safari, and Firefox). Both the MDN web docs and caniuse show when a feature has reached either the Newly available or Widely available threshold. ...

A bunch of (scattered) tips and resources as I experiment with Vue. Basics: General wisdom Anatomy Eventhandling Watchers Computed props Components: Components Props Lifecycle hooks Emitting events Slots Fetching Data: Calling APIs in hooks Unique identifiers Styling Components: Global vs scoped styles CSS modules CSS v-bind Composition API: Composition API Reactive references script setup Composables Routing and Deployment: Vue Router History Dynamic routes Deployment Advanced: Pre-processors Pinia State Management Overview What is Vue? an open-source model–view–viewmodel front end JavaScript framework for building user interfaces and single-page applications, created by Evan You Helpful resouces: Read the offical docs Examples Vue cheat sheet Awesome Vue Vue.js devtools Volar VSCode extension Built-in Directives General wisdom It’s best to stick to conventions of the web and use camelCase in your script and kebab-case in your template Don’t pass functions as props, instead emit events props couples components to each other, for broad or deep cross cutting state, level up to state management Test data sources: JSON Placeholder PokeAPI Anatomy Here is a bare bones vue app. There are literally 3 blocks for script, template (markup) and style: ...