Backlinks
[Web](id:c44cb88d-e082-429c-8045-6a4ad57d95d4)
Thoughts on the current state of the web and taking action to make it
more ethical.
The modern web often forces all developers to adhere to more and more
specifications (have you seen how long and convoluted the RFC manual
is?), and lives in a world where only the companies that create the
standards can practically adhere to them.
This is bad abstraction! This process is no different from forcing
everyone who **uses** a technology to add specific components to their
work rather than taking on this responsibility as the browser.
Of course, information like a robots.txt, a webpage title and these
sorts of things should be standardized and mandated by the user – but
there are lots of sensible defaults, like keyboard-navigable websites,
that could be applied and later overridden by the user if they don't
like these defaults.
# Resource Usage
## Resources
- [Website Carbon Calculator](https://www.websitecarbon.com/)
- [This Website is killing the
planet](https://visitmy.website/2020/07/13/this-website-is-killing-the-planet/)
- [go green with local
fonts](https://kevq.uk/how-local-fonts-can-save-the-environment)
- [no, your clean code won't save the
planet](https://buttondown.email/hillelwayne/archive/no-your-clean-code-wont-save-the-planet/)
- [energy consumption measurement of a
studio](https://joanielemercier.com/energy-consumption/ ). may not be
the best place for this
- [low tech mag: the printed
website](https://www.notechmagazine.com/low-tech-magazine-the-printed-website)
- [Web Design and Carbon Impact – Carl MH Barenbrug – Minimalissimo –
Minimalism Life](https://cmhb.de/web-design-and-carbon-impact)
# Thinkpieces
[Stop pushing the web forward -
QuirksBlog](https://www.quirksmode.org/blog/archives/2015/07/stop_pushing_th.html)
[Replacing
JavaScript](http://ankarstrom.se/~john/articles/replacing-javascript/)
[The reckless, infinite scope of web
browsers](https://drewdevault.com/2020/03/18/Reckless-limitless-scope.html)
# Web Minimalism
## Size Compression
There are transpilers and minifying tools, but to best optimize for
small websites you might as well roll your own static site generator.
I've been using Python's Jinja2 template engine but I'm sure there are
better options.
Lots of resources suggest that your site, or its critical resources at
the least, should fit in the first ten packets:
-
-
-
There are obvious performance improvements to some actions as well:
-
-
[writing css with accessibility in
mind](https://www.matuzo.at/blog/writing-even-more-css-with-accessibility-in-mind-user-preferences/)
# Behavior
[Stop breaking links with
javascript](https://blog.matsu.io/stop-breaking-links-with-javascript)
:: the web app should act exactly as one would expect a typical website
to do. Back buttons should be reproduced to have consistent behavior at
the last!
# Accessibility
## Resources
- REact ESLint Plugin
- [Picking friendly colors for error messages for
Pyret](https://blog.brownplt.org/2018/06/11/philogenic-colors.html)
- Axe-core (+Storybook a11y addon): checks rendered HTML for
accessibility; browser extensions and react integrations are both
available
- [Spectrum](https://chrome.google.com/webstore/detail/spectrum/ofclemegkcmilinpcimpjkfhjfgmhieb/related):
browser extension to examine how those with different color vision
deficiencies will view the application
- Tab through you application! Make sure that the tab key proceeds in an
order that makes sense. A 'skip navigation' link should appear the
first time the 'Tab' key is pressed (a la GitHub) to enable users to
tab through the relevant content rather than the heading.
- Always try to zoom to 200%; many users use the web this way! The size
should behave in exactly the same way.
- Use a screen reader to browse. This will ensure that your semantic
markup, interactive elements and other utilities are up to spec.
- Open content in browser reading mode; ensure that the minimum viable
amount of content is available.
## WCAG Standard
### Text
- All non-text content must have a visible text alternative.
- Any prerecorded audio and video media must have alternatives
completely presented via text. Captions and descriptions for these
mediums must always be provided.
- Sign language interpretation is provided for all prerecorded audio
content on synchronized media.
- Information, structure and relationships can be programmatically
determined via text. Tags, aria labels and semantic elements should be
used to strictly define navigable websites.
- The purpose of an element must always be determined independent of the
component, icon or region (use names and text everywhere).
- Content does not restrict its viewing to a specific display
orientation.
- Never use color as the only means of conveying information.
- Contrast ratio is very important, and text should be resized 200%+
without loss of content or functionality.
- No loss of content functionality occurs from:
- Line height 1.5x
- Spacing 2x
- Letter spacing 0.12x
- Word spacing 0.16x
- hover on focus: can dismiss without focus
### Keyboard navigable
- No keyboard trap; all available through keyboard shortcuts, always
remap or turn shortcut off
- No more than three flashes in one second period
- Any animation motion can be disabled
- Bypass repeated blocks of content
- Focus order preserves meaning
- Link purpose can be determined by link text alone
- More than one way to locate a web page
- Focus always visible
- Pointer gestures very important! Target at least 44x44 CSS pixels
### Understandable
- Identify specific definitions used in an unusual way, jargon, idioms
- Definitions provided for all abbreviations
- Changing the setting does not change context
- Navigational mechanisms are repeated in many web pages
- Error location is identified and error described to user in text
- Labels & instructions provided for all user input
- Error prevention: legal, financial:
- Submissions are reversible
- Data is always checked and validated
- Method for reviewing, confirming and correcting information before
finalizing
- Context sensitive help is always available to the user. (What does
this mean?)
### Robustness in Context
- Parseable: properly nested, unique IDs, no duplicate attributes
- Name and role can be programmatically determined
- Status messages can be determined programmatically for assistive tech
## Tips
- Episodic memory can be hard. Introduce product features gradually.
- Never divide screen into multiple actions.
- Provide clear feedback on progress or completion
- Provide reminders and alerts for habitual actions
- Do not assume anything; abbreviations, acronyms, scrolling, search,
back button
- Long-form text is okay as long as attention is focused
- Font size of **at least** 16px.
- Always pair icons and symbols with text.
- Avoid using blue for colors and never use color to convey a message.
- Reduce the distance between sequential interface elements. Buttons
should be at least 9.6mm diagonally for ages up to 70.
- Interface elements to be clicked with a mouse should be at least 11mm
diagonally.
- Clear, bold headings to gravitate to are vital to navigation.
- Standard treatments for links should be used as they're familiar.
- Buttons and links should all be clearly labeled and show that they've
been clicked; some graphic buttons can be distracting rather than
informative, and here text is better.
- Use static menus – leading to another apge on click - rather than
walking menus – exposing a sub menu. Sub menus should be on click
rather than hover.
- Do error pages provide a robust description to the user?
- Is there a clear site map available from every page that provides an
overview of the entire site?
- Can the page be skimmed? Is there an easy starting point? If pages are
dense is it grouped?
- Is there an obvious way to increase the font size?
- Is the content written in the active voice?
## Sources
[Designing user interfaces for an aging
population](https://www.uxmatters.com/mt/archives/2017/04/designing-user-interfaces-for-an-aging-population.php)
[W3C WCAG: Web Content Accessibility
Guidelines](https://www.w3.org/WAI/standards-guidelines/wcag/)
- [Suggested Accessibility
Techniques](https://www.w3.org/TR/2016/NOTE-WCAG20-TECHS-20160317/)
[Designing for the
elderly](https://uxplanet.org/accessible-design-designing-for-the-elderly-41704a375b5d)
[same
thing](https://www.smashingmagazine.com/2015/02/designing-digital-technology-for-the-elderly/)
[AARP Site
Accessibility](http://assets.aarp.org/www.aarp.org_/articles/research/oww/AARP-50Sites.pdf)
[ISO: Accessing the World](https://www.iso.org/accessing-my-world.html)
[A myriad of accessibility testing tips, links,
resources](https://blog.sapegin.me/all/accessibility-testing/) [humane-tech.com](https://humane-tech.com)
# Organizations
[Disroot](https://disroot.org/en): an organization that stands for
internet freedom and provides free services for git, hosting, mail and
many others. : open source alternatives to
your favorite tools (Primarily web-based!) [The evolution of
HTTP](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Evolution_of_HTTP)
# web hostility
[article](https://neustadt.fr/essays/against-a-user-hostile-web/)
"Facebook is at odds with the open web that I love and defend…" Netscape
Navigator (small internet) -\> big internet! The modern web is being
destroyed – personalized content, growth hacking, social media
activation, CMS and user experience. These websites are not built to
appreciate the visitor – they are constructed to make the user a
customer. Cookies bad! Small blogging good! [what is wrong with
ads?](https://shouldiblockads.com/#ha)
# today's js
article The modern web is painful. Interfacing with js and node results
in conflicts between es and js versions, node incompatibilities,
different import syntax in different circumstances, etc. it's painful.
How do you import with node? without node? \