Funkhaus best practices

A running list of best practices. All our programmers should read this and understand each item.

This list formed the bais for a presentation at VueJS LA meetup on January 14, 2020 by Drew Baker. You can see the slides here.

Basics

1. No CSS resets
2. Be semantic - call things what they are. Name your component what the filename is, and give it a class that matches.
3. In Vue templates, use components like <component-name/> not like <ComponentName>.
4. Avoid use of element name selectors in CSS. Don't use h2, give it a .title class instead.
5. In general avoid use of CSS pseudo elements like :content, :before, :after. Except for list bullets or underlines.
6. No use of floats
7. Don’t use # ID’s unless using for JS selectors or actually need page anchors.
8. Use a central z-index location for major structural components, increment by 100’s
9. For component level z-index set top level to 0 and increment by 10
10. Use positioning sparingly. In general most people over use position:absolute.
11. If using useless markup to get a desired style, you’re doing it wrong. For example wrapping divs, centering divs.
12. Define CSS for active and hover states at the end of component, followed by breakpoints at end of file please!
13. When using SCSS if you’re going more than 2 levels deep, question yourself. Think of the top level element class as a namespace, so things in it don’t need namespaces too.
14. Never use background-images, use object-fit with src-set instead.
15. For class names use is-{state} and has-{feature} or not-{type}. Like is-active, is-opened, has-video, not-case-study, is-active.
16. Common element class names: block, grid, panel, menu, overlay, meta, title, section, section-title.
17. Margin top/bottom, padding left/right.
18. Use lodash! You’re not getting points for using map() and filter() in inventive ways!
19. Don’t fight the browser - scroll, events, URLs etc…
20. With Nuxt-Link or Router-Link use relative paths from the root (start with a /).
21. Use white spacing in your templates.
22. Order your CSS in the same order your markup is in. Top to bottom as coded.
23. A switch statement is better than a lot of if-else conditions
24. This is how you do forms in Vue.
25. 100vh doesn't work great on mobile. See this for how to do it right.
26. Don't use icon fonts, use SVGs. SVGO is a good tool for optimizing SVGs.
    1. Be sure to include the viewBox attribute.
27. This is a good clean sample component to study.
28. If your component accesses $store or $route directly, you're doing it wrong. Use props and events instead.

Important Concepts

1. We care about Chrome, Safari and Firefox in that order.
2. You can write breakpoints without needing a media query generally. Often using width and max-width is enough. Good break points will really just be font-size and reducing columns perhaps.
3. Understand collapsible margins!
4. Understand intrinsic ratio sizing!
5. Understand when to use wp-content, v-html, v-text
6. Clean up after yourself, don’t leave behind old code!

Be better at:

1. Drew to show everyone how to build top-panel/bottom-panel style fixed sliding sites
2. Really think hard about what can be a component. Makes a site so hard if you don’t use components.
3. Know what components and tools.js we have in fuxt and our haus components!
4. Don’t do things rough with the expectation of coming back to it. Do it right the first time, think it through.
5. Add head() data for SEO as you build each pages. Sucks to do this at the end.
6. Learn how to spot red flags. Long file? Deep nested CSS? Watching a lot of things? Lots of specific break points? Committing to the store a lot?
7. Organize your windows into panels of editor and browser and dev tools.
8. Use Prettier along with the linting tools built into fuxt.

Useful tools:

1. Demystifing Nth-Child in CSS
2. Flexy Boxes Playground
3. CSS Grid Generator
4. 16:9 calculator
5. Clippy
6. Facebook OG debugger

Good reading:

1. CSS Guide Lines - Best CSS guide there is
2. Vue Style Guide
3. The introduction to Reactive Programming you've been missing
4. You (Might) Don't Need jQuery
5. A Smashing Guide To The World Of Search Engine Optimization
6. Good overview of ES6 destructuring
7. A good book on how to write good CSS
8. Use console.log() like a pro

Books

1. https://github.com/thejsway/thejsway
2. https://www.oreilly.com/library/view/eloquent-javascript-3rd/9781492071198/
3. https://www.modernjsbyexample.net/
4. https://addyosmani.com/resources/essentialjsdesignpatterns/book/
5. https://martinfowler.com/articles/refactoring-2nd-ed.html
6. https://exploringjs.com/es6/index.html
7. https://leanpub.com/javascriptallongesix