Skip to content

Instantly share code, notes, and snippets.

@jaydenseric
Last active October 4, 2023 18:43
Show Gist options
  • Save jaydenseric/33ec421629b4a15f7712 to your computer and use it in GitHub Desktop.
Save jaydenseric/33ec421629b4a15f7712 to your computer and use it in GitHub Desktop.
Front end development methodology

Front end development methodology

Philosophy

  • All public-facing content crawlable at page load.
  • All page content pieces linkable, and linkable cross-device.
  • Semantics trumps aesthetics.
  • All content to all users. Never show or hide content based on device.
  • Device agnostic design and UX. Mobile and widescreen should look and feel similar; basically less media-queries = more device agnostic.
  • Consider viewport height as much as width.
  • As resolution-independent as possible. Vector > raster.
  • Embrace native. Scroll, inputs, etc. Never disable pinch/zoom.
  • Either do it well, or push back with a suggestion.

Approach

  • Support evergreen browsers and IE 9+.
  • < 5MB initial page load.
  • Optimize the shit out of media assets (we have a process for SVG, JPG, PNG and video).
  • Mobile first (min-width media queries).
  • In context media queries, not grouped at the end of the stylesheet.
  • No front end frameworks such as Bootstrap or Foundation.
  • No globally-scopped CSS selectors!!!! Always scope styles to a component id/class.
  • Semantic, layout-agnostic classnames only (“.intro” instead of .left-column”).
  • SCSS.
  • CSS selectors leverage the semantic markup (no BEM).
  • Vanilla JS.
  • JS as modular components, documented inline with JSDoc.
  • Gulp not Grunt. Gulp 4.0+, used locally in projects (no global install).
  • Always document project meta, setup and deployments in a readme.
  • Git.
  • Preference NPM dev dependencies over gems, etc.
  • Validate the document outline with the HTML5 algorithm.
  • Validate markup.

Articles

Code

Future

  • Full component based project structure. All component assets (HTML template, CSS, JS, images) stored togeather.
  • Drop SCSS for standard CSS Level 4 (variables, etc) via PostCSS plugins.
  • Drop font icons for SVG.
  • Drop Base64 font embedding in anticipation of HTTP/2 and to benefit from WOFF 2.0.

The ultimate future is isomorphic React builds on Node, e.g. http://fluxible.io.

@panda113
Copy link

qrwerwre

Copy link

ghost commented Aug 7, 2018

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment