Website cheat codes
CSS, SCSS, SASS, HTML, UX, Web 2.0, RFC, Yeah you know me
December 24, 2014 — March 6, 2022
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
1 Theory
- bootswatch is a collection of open-source bootstrap themes.
- Font size should be 16px or greater.
2 General tools
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 taps and such. There are two parts to this
- designing a legible icon at many different sizes, which is complicated if you want it to work even on tiny things
- 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.
2.2 Colour schemes
There are dozens and dozens of color scheme generators online which obviate the need to know colour theory. See the colour page.
3 Development serving
Trying to force macOS to serve website when disconnected? Use dnsmasq.
webfonts helper will automate offline web fonts.
4 Interactive browser debugging
- 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.
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 langauges 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:
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:
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 reqlly quick and dirty.
7 Incoming
George Ho, How to Improve Your Static Site’s Typography (for code formatting)
Cornify puts unicorns, glitter and sparkles on things.
