mfws-fe

About

:PROPERTIES: :CUSTOM_ID: about :END:

Website markup and style alterations for conforming closer to mfws.

See also the peers-template style sheet.

Project Goals

:PROPERTIES: :CUSTOM_ID: project-goals :END:

1. Examine various websites using lessons learned from the mfws
series.
2. Establish a set of best practices for building websites.
3. Refactor specific use cases or web page views to make examples.
4. Use the aforementioned set to apply directly to Peers project
[[https://dev.angeley.es/s/fr33domlover/p/vervis][Vervis]].
5. Iterate to make improvements.

mfws sites

:PROPERTIES: :CUSTOM_ID: mfws-sites :END:

The original [1] and followup [2, 3] websites in the series demonstrate mfws. Also note, some websites belong to the series because they provide additional commentary, counter examples, or satire, but do not necessarily practice mfws [4, 5].

Qualifications

:PROPERTIES: :CUSTOM_ID: qualifications :END:

The original text [1] gives the following values for the perfect website:

Shit's lightweight and loads fast\\

Fits on all your shitty screens\\

Looks the same in all your shitty browsers\\

The motherfucker's accessible to every asshole that visits your site\\

Shit's legible and gets your fucking point across (if you had one

instead of just 5mb pics of hipsters drinking coffee)

mfws websites must conform to most if not all of the following:

• Pages remain lightweight in order to load quickly
• Pages must fit on all screens
• Pages looks the same in all browsers
• Pages remain accessible
• Style has minimal declarations

Normally, this includes:

• Apply style to elements and scoped classes.
• Avoid using IDs or global declarations that might break existing
libraries a user might addon.
• Avoid using libraries or fonts unless necessary.

TODO Comparison to non-mfws

:PROPERTIES: :CUSTOM_ID: comparison-to-non-mfws :END:

Stub [7]

References

:PROPERTIES: :CUSTOM_ID: references :END:

• [1] http://motherfuckingwebsite.com/
• [2] http://bettermotherfuckingwebsite.com/
• [3] https://thebestmotherfucking.website/
• [4] https://thebestmotherfuckingwebsite.co/
• [5] http://everyfuckingwebsite.com/
• [6]
https://developer.mozilla.org/en-US/docs/Tools/Responsive\_Design\_Mode
• [7] http://getbem.com/introduction/