Website cheat codes

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

December 23, 2014 — November 15, 2024

computers are awful
making things
photon choreography
UI

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.

Figure 1

1 Theory

2 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.

2.1 Bookmark icons

In particular favicons, the little iconographic representations of your site that appear in bookmark lists and tabs 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. 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.

2.2 Colour schemes

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

3 Development serving

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

webfonts helper will automate offline web fonts.

More webservers at localhost dev servers.

4 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 privileges. [sic] Extension integrations are to power a 2nd screen experience, while also providing browser-specific features to enhance the experience.

5 URL encode

Common ways of cramming extra characters into ASCII strings, or even things more restrictive than ASCII. Also base64 encoding etc.

URL encoding is necessary for many contexts — in my case, passing URLs via flaky parsers. Various languages have urlencode or urldecode functions. In particular, percent encoding crops up a lot. 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

6 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 really quick and dirty.

Placeholder for quick python internet stuff; I do not do web dev any longer.

7 Python web

7.1 FastHTML ecosystem

8 Dashboards

See dashboards.

9 Incoming

Cornify