Website cheat codes

How to make your internettifying quick, for those who know enough web development to wish that they knew less.

Theory

Style and CSS stuff

Handy GUI shit for those CSS-ish compilers. Scout.app compiles stylesheets from SASS and COMPASS, two ubiquitous technologies that I cannot be arsed learning the distinction between, except to note that they are both intuitive enough for me not to bother.

A different approach is tailwind which sounds nice for non web people in the highly informed judgement of Julia Evans.

Idiot-proof offline font hosting.

bootswatch and happyhues design and showcases colour schemes.

Development serving

Trying to force macOS to serve website when when disconnected? Use dnsmasq

Interactive browser debugging

VisBug

  • Edit or style any page, in any state, like it’s an artboardhttps://facethemusic.io/menu
  • Hover inspect styles, accessibility and alignment
  • Nitpick layouts & content, in the real end environment, at any device size
  • Leverage adobe/sketch skills
  • Edit any text, replace any image (hi there copywriters, ux writers, pms)
  • Design within the chaos: use production or prototypes and the odd states they produce, as artboards and design opportunities

VisBug is a custom element on your page that intercepts interactions, selecting the item(s) instead, and then provides keyboard driven patterns to manipulate the selected DOM nodes. It can do these things on any page without the need for extension or browser priveledges. [sic] Extension integrations are to power a 2nd screen experience, while also providing browser specific features to enhance the experience.

URL encoding

URL encoding is necessary for many contexts (in my case, passing URLs via flakey parsers.) In particular, percent encoding is useful for that. Eric Meyer does it in the browser for the lazy.

Important ones:

newline
%0A or %0D or %0D%0A
space
%20
"
%22
%
%25
<
%3C
>
%3E