Website cheat codes

CSS, SCSS, SASS, HTML, UX, Web 2.0, RFC, Yeah you know me

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

There is a massive index of handy tools called Tiny helpers and also the Turtle design index

Theory

Icons

Maskable creates full-bleed icons in the browser. Favicon.io and Real Favicon gnerator do automated favicon design. See also imagemagicl.

Colour schemes

There are dozens and dozens of color scheme generators online which obviate the need to know colour theory nonsense. This is indeed the original what color is the bikeshed problem.

Development serving

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

webfonts helper will automate offline web fonts.

Interactive browser debugging

VisBug

  • Edit or style any page, in any state, like it’s an artboard
  • 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

Also base64 encoding etc.

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. There are many web-friendly encodings in the amusing Cryptii app and r12a >> Unicode code converter for one-off browser usage. Or, you could use curl as a urlencoder:

date | curl -Gso /dev/null -w %{url_effective} --data-urlencode @- "" | cut -c 3-

or python:

alias urldecode='python3 -c "import sys, urllib.parse as ul; \
  print(ul.unquote_plus(sys.argv[1]))"'
alias urlencode='python3 -c "import sys, urllib.parse as ul; \
  print (ul.quote_plus(sys.argv[1]))"'

Important percent-encodings:

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