24 ways

I learned a lot from and like http://24ways.org. Highly recommend scanning through their articles for things that interest you, especially ones on prototyping without Photoshop.

> I recommend reading about [vertical rhythm](https://24ways.org/2006/compose-to-a-vertical-rhythm), which turns a lot of imprecise choice to exactly correct sizes. I've no problem using it as a decent rule of thumb, but what's the evidence this is the one correct way to do things?

You're conflating web site and web app which I specifically called out. If you're building the new great gig delivery app, using the same API for a mobile app and web app isn't a big deal. My issue, and I think a serious issue with the web today, is all of the essentially static content treated like it has the same needs as some web app. Your gig delivery app needs to represent the instantaneous state of the database back end. Your blog post does not. JavaScript-based "sites" are often little better than the Flash sites they've replaced. They're often inaccessible, opaque to search engines, break linking, and are also opaque to microbrowsers [0]. For every site that relies on JavaScript but doesn't have those problems there's dozens that do. [0] https://24ways.org/2019/microbrowsers-are-everywhere/

It's a pretty common thing to call something "Advent of x" or "x Advent calendar" nowadays, if it involves something happening once each day between 1st and 25th of December. For example: https://24ways.org/ More here: https://www.creativebloq.com/web-design/advent-calendars-designers-dev…

Some more: - http://webaim.org/resources/contrastchecker/ (great tool) - https://24ways.org/2012/colour-accessibility/ - https://www.viget.com/articles/color-contrast

It's a very understandable worry :) Writing rules that when they fail just go into server error logs is sub-optimal at best. The real solution would be Google allowing per-site AMP de-registration, but that's a fantasy I bet. This is a good article on Apache URL rewriting, if you want to go down that path: https://24ways.org/2013/url-rewriting-for-the-fearful/ I believe in your use case you want to transform `all/urls/of/any/sort/that/end/in/amp/` and simply redirect to everything minus the `/amp/`, so the rewrite rule shouldn't be too bad to write (and test). I wouldn't use the "might work" in my comment since I wrote it without even seeing if the regex works, but if you get an Apache test domain running off your blog you can test the redirect rules in isolation before putting them on your blog.

Perhaps I'm being nostalgic, but 24 Ways is sacred to me. It's a yearly list featuring the best-of-the-best sharing insight in to their specific areas of expertise. Christian Heilmann on localStorage (http://24ways.org/2010/html5-local-storage/), for example. This article feels way below the bar; at least, the bar I have set for the site in my own head.

I reckon they got the idea from http://www.24ways.org, which in turn is inspired by the advent calendar (http://en.wikipedia.org/wiki/Advent_calendar). "The traditional [advent] calendar consists of two pieces of card stock on top of each other. Twenty-four doors are cut out in the top layer, with a number ranging from one to twenty-four on each. Beginning on the first day of December, one door is opened each day [containing a chocolate and/or showing an illustration related to Christmas], counting down the days remaining until Christmas Eve, from one to twenty-four where the 24th door often holds an extra surprise like an extra large piece of chocolate."

> if everything was high contrast, everything would be SCREAMING AT YOU FOR ATTENTION Simply not true. There's many more factors besides contrast that determine attention focus. See this excellent series on gestalt principles of design: http://www.andyrutledge.com/gestalt-principles-1-figure-ground-relatio… (it's five parts you need to click to get to the other 4) Also see http://24ways.org/2007/typesetting-tables which shows a very nice way of adding structure to a table using contrast, instead of making everything scream for attention equally. (Additionally, the site used a different layout when this article was written in 2007, and currently it seems 24ways is a good example of low-contrast crappy readability :) )

Andy Clarke's article on progressive enhancement from last year is also great. Can't wait 24ways to start again in an few more days. http://24ways.org/2009/ignorance-is-bliss Elliot Jay Stocks also wrote a good one on side projects: http://24ways.org/2009/a-pet-project-is-for-life-not-just-for-christma…

Links to another 24ways post about using RGBA, which I wasn't especially familiar with - worth checking out: http://24ways.org/2009/working-with-rgba-colour

I love where this is going. One thing that I would like to see included, which is absolutely essential for the way I design website is line-height: it is the core structure of my design and layout. (Read more about line-heights and vertical rhythms here: http://24ways.org/2006/compose-to-a-vertical-rhythm) At this moment in time I feel trapped using Adobe products to produce my layouts. If jMockups solves the following problems in priority, I will make the switch! 1. Render fonts accurately 2. Render line-heights accurately 3. Better drawing path tools

Google Web Fonts or @font-face are great leap towards better web typography but sadly that's not the only piece of puzzle that needs to be solved. Every OS, and every browser on that OS renders text differently. Read this for more on that: http://24ways.org/2009/real-fonts-and-rendering I recently wrote a silly article, mainly to see how the typography will shape the whole feel of the webpage at http://www.sushaantu.com/moustache.html It looks awesome to me on my Ubuntu Chromium 7 but sucks on Firefox 3 of Windows and OSX. Google Font Directory is indeed a great thing to make web little more beautiful but we need support from OS and browsers as well which are making steady pace.

Fun! But a heavy emphasis on doing things by eye. Personally I prefer the results of following stricter rules extracted from print typesetting. A few examples: - I recommend reading about [vertical rhythm](https://24ways.org/2006/compose-to-a-vertical-rhythm), which turns a lot of imprecise choice to exactly correct sizes. - I've never heard of there being a rule for how much space goes above a paragraph (this is a funny thing about web typography, since in print you indent the paragraph so there's no additional space). But I guess I'd consider it correct from a vertical rhythm standpoint to either use the line height or half of it. - Regarding vertical space between lines, what I've heard is you want to make the spacing between lines visually appear greater than the space between words. As far as I know this is just done by eye. (I.e., so the rule is to choose a leading that makes your space between lines appear larger than the space between words.) - I think there are exact header sizes that are better than picking an arbitrary font size that seems to look big enough. The trick I use here is to take the [traditional point scale](https://markboulton.co.uk/journal/five-simple-steps-to-better-typograp… and convert it to a ratio relative to 12 point. This is a way to bake historically refined font ratios into your design. - Personally, when choosing margins I'd use a [grid system](https://practicaltypography.com/grids.html), which will give you an exact gutter…

I've been experimenting with SQLite FTS as a way of adding search to an otherwise static site. The big advantage of SQLite FTS is that it's really cheap to run. The index is a single static file on disk, then you add a Python process (I'm using https://github.com/simonw/datasette ) to run queries against it. Much less resource intensive than running Solr or Elasticsearch. It also works surprisingly well - I've run FTS queries against tables that are up to around 10GB on disk and performance is great. It's no way near as featureful as Lucene, but for small to medium sized projects it's easily good enough. As for deployment: if the SQLite .db index file is small enough you can bundle it up as part of a static deployment, e.g. bundled in a Docker container. I've done this using Heroku, Google Cloud Run, https://fly.io/ and Zeit Now (aka Vercel). If the content lives in a git repository you can hook up CI (or a GitHub Action) to build and publish a new copy of the SQLite index on every change. I've started thinking of this pattern as a kind of static-dynamic site: there's dynamic server-side code but it's running in read-only containers, so you can scale it up by running more copies and if anything goes wrong you just restart the container. https://til.simonwillison.net/ is my most recent site to use this pattern, see https://github.com/simonw/til for how it works. I also wrote this tutorial describing the pattern a while ago:…

"Vertical Rhythm" => keeping ALL text aligned vertically, regardless of where it is on the page or the element type. All text is anchored to integer multiples of a basic vertical distance unit, which (If I remember correctly) is the distance between the baselines of the smallest font-size that to be used. "baseline" => The line the text 'sits' on, which defines the "origin" of the letters vertically. (at least in the greater Latin-based family of languages). The lowercase letters generally span the distance (of one "x-height" or "ex" in CSS) between the "baseline" and the "median". Some letters (including most capitals) extend higher to a hight higher than the median, and some letters have "descenders" that extend below the baseline. The point is that the baseline is the fixed point of reference we use when drawing the letters (i.e. cursive handwriting, which usually returns to the baseline between letter. The idea of using these concepts in page layout is based on the idea that the pattern-matching our brain does to parse our vision is always trying to find signal everywhere. Therefor, if we help it a bit by putting EVERYTHING - as measured from the anchors the brain uses - into a simple pattern, it will be recognized faster. To accomplish this you have make it so interval between the baselines of the normal body-text continues (perhaps as a multiple of that interval) into the h[1-6], li, custom divs, everything. You should be able to lay hypothetical ruled paper over…

You know you’re old when you still reflexively flinch just a bit when you see PNGs mentioned, as you have battle scars from working with PNG-24 files in IE6. https://24ways.org/2007/supersleight-transparent-png-in-ie6

I have found this works a charm, if I want to present a clean repo (for things like tutorials and classes): https://24ways.org/2013/keeping-parts-of-your-codebase-private-on-gith… But basically, I let things "all hang out." Tools shouldn't really be running the show.

For a blog/static website, Tipue Search [1], or maybe Datasette [2]. There are Pelican [3]/Jekyll [4] plugins for the former. [1] http://www.tipue.com/search/ [2] https://24ways.org/2018/fast-autocomplete-search-for-your-website/ [3] https://github.com/getpelican/pelican-plugins/tree/master/tipue_search [4] https://github.com/jekylltools/jekyll-tipue-search

Also, there's a neat technique to make the text color either black or white depending on what has more contrast against the background color. https://24ways.org/2010/calculating-color-contrast

There sure is something to be said... They're horrible keyboards. We're going to give more kids RSI. http://looknohands.me/ http://24ways.org/2014/dont-push-through-the-pain/ http://markmcb.com/2014/10/13/severe-hand-rsi-pain-and-recovery/ We need more wireless ergonomic keyboards. https://h4labs.wordpress.com/2015/07/16/the-model-01-an-heirloom-grade…

I can't claim to be a Gulp expert, but it's always shocking to me how tools like Gulp and Grunt become so pervasive without strong tutorials. I ignored Grunt for years, always implementing my own hackneyed systems in Python, until I eventually discovered this tutorial[1], which at least got me a good introductory "this is how you use this thing that everybody else already knows how to use, dummy" lesson. [1] - http://24ways.org/2013/grunt-is-not-weird-and-hard/

You can definitely create github pages for each repo, using your own html/css/js. You just need to create a gh-pages branch [1]. If you just want to host a new static site, you can even create a new repo just for that, create a gh-pages branch, then make it the default branch and delete the master branch, leaving you with only the gh-pages content [2]. [1] https://help.github.com/articles/creating-project-pages-manually/ [2] http://24ways.org/2013/get-started-with-github-pages/

Looks like different browsers behave differently. http://24ways.org/2010/using-the-webfont-loader-to-make-browsers-behav… (edited)

Setting -webkit-perspective can also trigger aliasing on transformed elements. 24 ways has a good intro to 3D transforms: http://24ways.org/2010/intro-to-css-3d-transforms/

Also have a look at the discussion reg. server-side vs client-side adaptive images hacks at: http://24ways.org/2011/adaptive-images-for-responsive-designs-again

"""For example, any website I've built I can surely make with just a text editor but I'll lay it out with ps first. That way I can go back and check what colors / gradients / dimensions I used to speed up the process.""" You may be a bit behind the times: http://37signals.com/svn/posts/1061-why-we-skip-photoshop http://24ways.org/2009/make-your-mockup-in-markup

http://24ways.org/2009/spruce-it-up Also see related ways on how to tackle FOUT.

Webkit based browsers don't show the text before the @font-face font is loaded. You can achieve the same effect in Firefox and Opera by using WebFont Loader: http://24ways.org/2010/using-the-webfont-loader-to-make-browsers-behav…

You can definitely skip photoshop. http://24ways.org/2009/make-your-mockup-in-markup QED