Compile a resource list for various topics

[Aveline-art]

Dependency

• 3636

• 1534

Overview

As a developer, I need to know what resources to follow so that I can learn the best practices when it comes to designing my code.

Action Items

• [ ] Gather a list of resources, either internal or external, pertaining to these topics:
  • [ ] Accessibility
  • [ ] CSS/SASS/SCSS
  • [ ] Documentation/Wiki
  • [ ] Design/Design System
  • [ ] GitHub Actions
  • [ ] HTML
  • [ ] Javascipt
• [ ] Add these resources to either a pre-exisitng or new Wiki article
• [ ] Possible next steps: create a new issue for a Github action/issue template that links the Wiki in the Resources/Instructions section

Resources/Instructions

None for now, but do note that these resources are intended to help developers on complex issues, such as those involving designing a webpage, and to help reviewers be better aware of what to look for when reviewing code. To get started, it might be good to ask the team on what resources they turn to when working on issues.

[Aveline-art]

For accessibility: Firefox's Accessibility Inspector

[Aveline-art]

@qiqicodes Can you take a look at this and add any resources you may have?

[Aveline-art]

@arghmatey Will mention during engineering COP meeting on Wednesday July 21st.

[macho-catt]

Some guides I use that could be helpful. CSS:

• general HTML/CSS: https://www.internetingishard.com/
• CSS Grid: https://css-tricks.com/snippets/css/complete-guide-grid/

General JS:

• https://javascript.info/

And a personal favorite of mine for writing good code:

• https://javascript.info/ninja-code

[Aveline-art]

GitHub Actions:

https://docs.github.com/en/actions/guides/storing-workflow-data-as-artifacts https://docs.github.com/en/actions/reference/workflow-syntax-for-github-actions https://docs.github.com/en/actions/reference/events-that-trigger-workflows

[abuna1985]

HTML

• 30 Days of HTML - Jen Kramer

CSS

• Learn CSS Layout
• Learn CSS Positioning - Ahmad Shadeed
• Josh Comeau CSS Articles
• Flexbox30 - Learn Flexbox with 30 Code Tidbits
• Flexbox Zombies - A Free Game to Learn Flexbox
• Learning CSS Grid
• CSS Grid Garden - A Free Game to learn CSS Grid

Sass

• Learn Sass in 15 minutes
• Sass guidelines

JavaScript

• Ultimate FREE Javascript Resources - Hulya
• JavaScript Visualized: Event Loop - Lydia Hallie
• JavaScript Visualized: Hoisting - Lydia Hallie
• JavaScript Visualized: Scope (Chain) - Lydia Hallie
• JavaScript Visualized: the JavaScript Engine - Lydia Hallie
• JavaScript Visualized: Prototypal Inheritance - Lydia Hallie
• JavaScript Visualized: Generators and Iterators - Lydia Hallie
• JavaScript Visualized: Promises & Async/Await - Lydia Hallie
• ES6 Mini Crash Course: How to Write Modern JavaScript - Chris Achard

Git

• CS Visualized: Useful Git Commands - Lydia Hallie
• A Guide to Git Interactive Rebase, with Practical Examples - Tobias Günther

Web Accessibility

• Accessibility Tips for Web Developers - Addy Osmani
• Accessibility Basics - usability.gov
• Accessibility Fundamentals with Rob Dodson - Youtube
• The Practical Value of Semantic HTML - Bruce Lawson

[Aveline-art]

LIQUID

https://shopify.dev/api/liquid

[JessicaLucindaCheng]

This issue needs to be edited by a lead to reflect our migration to the website-wiki repo. For more info, read How to Contribute to the Wiki.

[ExperimentsInHonesty]

@roslynwythe I moved this into the new issue review column because the dependency is resolved. Please add a ready for prioritization label if its ready.

[roslynwythe]

@ExperimentsInHonesty I suggest we wait until the new wiki is ready for updates.