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

General tools

Webflow:

Prototyping in Webflow brings your design team’s thinking in line with the natural constraints — and benefits — of HTML and CSS, but without requiring your team to learn code. With design and engineering on the same page, your whole process is streamlined.

Bookmark icons

In particular favicons, the little iconographic representations of your site that appear in bookmark lists and taps and such. There are two parts to this

  1. designing a legible icon at many different sizes, which is complicated if you want it to work even on tiny things
  2. specifying it in your HTML, which is complicated because android, windows, macOS etc all support different standards

For part 1, there is a minimalist favicon script for imagemagick. Online and more sophisticated, Maskable creates full-bleed icons in the browser is a start. Logo crunch will even use some machine vision tricks to keep text legible at as many resolutions as possible.

Full-feature system providing all the HTML markup and resized icons, Real Favicon generator. Favicon.io is even lazier - it will create an icon from emoji or text or even integrate logo automation. I used the former for this blog.

Colour schemes

There are dozens and dozens of color scheme generators online which obviate the need to know colour theory. See the colour page.

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

UI icons

Buttons and widgets for user interface. A popular choice here is fontawesome which is a bunch of vector icons for various things you might need on your site (logos, buttons etc). Despite the name it is not necessarily based on a font – that depends on the configuration. FAIcons is a handy script to extract particular icons reqlly quick and dirty.