frontendfoxes / curriculum Goto Github PK

Context

Now that we are teaching online, we need to designate where we break out into Zoom breakout rooms to work together to help students debug their code.

Expected Behavior

Add an emoji callout that is visually arresting to "stop! breakout!" - but make it cute :)

Acceptance criteria

Add about four of these to Mini 1, as is appropriate for the flow of the content.

Acceptance criteria
Add a file to explain how to contribute to this repo

Documentation
Vuepress docs to figure it out: https://vuepress.vuejs.org/guide/

An example of a good contributing guide: https://github.com/facebook/jest/blob/master/CONTRIBUTING.md

Acceptance Criteria
The links at the beginning of each chapter of the Full Day workshop (beginning in Chapter 2) link to the appropriate repo URL, for example: https://github.com/FrontEndFoxes/docs/blob/master/workshops/vue/full-day/ch2.md

☝️ this links to https://github.com/FrontEndFoxes/projects/tree/master/chapter-1-end which is no longer a valid URL, it should link to https://github.com/FrontEndFoxes/projects/tree/main/chapter-1-end

In https://vuevixens.github.io/docs/workshop/ch2.html#refactor-the-template-create-a-prop
import Dog from '../components/Dog.vue';

In https://github.com/VueVixens/projects/blob/master/chapter-2-end/src/views/Pets.vue
and subsequent chapters:
import Dog from '../components/Dog';

Context

This repo is down to a single security vulnerability, let's get to zero!

Upgrade kind-of to version 6.0.3 or later. For example:

kind-of@^6.0.3:
version "6.0.3"

Expected Behavior
After upgrading this package locally and installing locally, the vuepress project still builds and runs correctly.

Acceptance criteria
A resolution or package upgrade is created to address the vulnerable version of the kind-of library that is a deep dependency of the vuepress package.

Steps to recreate the issue (for bugs)
Issue can only be seen in the security alerts tab for this Repo which may not be accessible to non-owners, so Repo owners will need to verify these changes.

Additional information
Open to other suggestions for resolving the kind-of package besides a direct resolution (could resolve a parent package instead).

Context

When I set up this repo, I mistakenly called it 'docs' and not a proper name like 'curriculum'. Since its inner folder is called 'workshops' let's rename this 'curriculum'.

Expected Behavior

We will need to reconfigure the build script and the Netlify deployment.

Hi team,
Firstly, thanks for making your workshop material open-source! I learned about Vue Vixens from a friend and just tried to get started with CH1 of the workshop material. However, I've encountered an issue with Adding Vuetify as a dependency on Codesandbox. I tried to Google/ check Vuetify issues on Github / twitter but couldn't find any relevant posts on this problem, have you come across this? If yes, do you have any suggestion for fixes?

Codesandbox link: https://codesandbox.io/s/mq9kxkqr88

Problem:
I'm getting errors after adding Vuetify as a dependency in the starter project on Codesandbox.

1. Following the tutorial, I clicked the "Add Dependency" button on Sandbox and typed Vuetify in the search bar (searching for npm dependency):

• Vuetify did not appear in the search results

2. After pressing enter, Vuetify was added as a dependency with unspecified version #. Instead, the version just state "latest"

The browser tab shows the following error:

Error
Could not fetch dependencies, please try again in a couple seconds: Could not fetch version for Vuetify@latest: 404 Not Found: Vuetify@latest

In package.json:

"dependencies": {
    "Vuetify": "latest",
    "vue": "^2.5.22"
  },

3. I edited Vuetify version manually in the depencies to 1.2.9, but the browser still shows an error:

Error
Could not fetch dependencies, please try again in a couple seconds: Could not fetch version for [email protected]: 404 Not Found: [email protected]

Thanks in advance for your help on this issue!

Context

Currently our workshops are done in Vue, as per our normal flow and initial mission, but now that we have rebranded and expanded our scope, we need our workshops to follow suit and help React devs onboard.

Steps:

Take a look at mini-1, which is our flagship workshop, and follow its lead to be rewritten in React. https://github.com/FrontEndFoxes/curriculum/blob/main/workshops/vue/minis/mini1.md

The new workshop can live in the /react folder

Preliminary tries have been made on this topic: https://github.com/FrontEndFoxes/curriculum/tree/main/workshops/react/minis

However I would like us to prioritize classes, and have callouts to hooks in boxes, so that the workshop is combined to handle teaching about classes AND hooks.

The first step would be to create a Code Sandbox for this mini and workback from there, explaining the code step b step, following the pattern of the Vue mini-1.

I'm very picky about our workshop texts so we will probably have some editing sessions :)

Note: we don't want to introduce a material design package such as Vuetify, but instead use CSS-grid like thus: https://codesandbox.io/s/epic-bird-t9dm6

The API can continue to be the dog-ceo API as we used in mini-1 for Vue

Issue
In order to satisfy the All Contributors specifications, we need to show a table with the contributors. The .all-contributorsrc file is present, but is not being shown on the README file.

Idea
Let's use the docs at All Contributors to add the table. We may want to use the bot or the CLI to do this.

Acceptance criteria

1. In the workshop intro, add links and info about GitHub to the Tools you'll need section.
   See changes here: https://github.com/FrontEndFoxes/docs/pull/135/files

2. At the ending of the workshop, add a section with instructions for uploading project to personal Github account. See changes here: https://github.com/FrontEndFoxes/docs/pull/136/files

Acceptance Criteria

1. Some link to github and some instruction to have or create a github account is added to the intro of Chapter 1.

2. Add an appendix item at the end of the workshop to instruct students how to push their codesandbox work up to their own github account/repo.

Context
Sometimes when contributors are writing PRs for this repo, they have default linting in their IDEs that makes more syntax changes in their PRs than we want. Let's have an eslint file in this repo that sets linting rules that will stop those default linters from changing too much code.

Expected Behavior

1. When a contributor is running their forked copy of the app in localhost, they have a command that they can run manually to lint-check their files before committing or generating a Pull Request.

2. When changes are made in a PR, and the Netlify build actions run, it includes linting as a requirement to pass.

Acceptance criteria

1. I can lint my local project by running a manual lint command locally.

2. When I push my work to origin, the CI builds are linting my work.

Additional information

Getting Started with ESLint

What build tools can do for you

@FarhiaM has contributed to this repository and shows up on the GitHub Contributors page but we still can't assign issues to her in the repo. We need to figure out why that is.

With current Vuetify version (2.x) the bootstrapping process of Vuetify has changed. Please change instructions respectively or mention that we're going to use a previous Vuetify version.

Currently, as a temporary solution I've pushed a mention that attendees should use v.1.5.18. Sorry for the master push but it was an urgent fix.

Update the contributors list that compiles to this view: https://workshops.vuevixens.org/workshops/TEAM.html

Using the allcontributors bot integration: https://allcontributors.org/

Context

In the mini6.md file there is a <HelloWorld> tag that wasn't in backticks and was throwing a warning (in the dev console) when I ran yarn dev.

Expected Behavior

The site should run without warnings.

Acceptance criteria
The <Hello World> should be written within backticks.

Steps to recreate the issue (for bugs)

If the issue is a bug, please describe the steps needed to reproduce it. (Remove this part of the template is this issue is not a bug)

1. Run yarn dev
2. In the browser, open the inspector and click into the dev console.
3. See the warning about <Hello World> tag.

Screenshots

If you have screenshots, please include them here.

Additional information

Here, you can provide any additional information or documentation you have.

All our workshops could stand to have a solid QA pass to make sure all the steps still work. This is a core issue - please open a new PR referencing the QA testing you did for each separate workshop.

Hi team,

As I work through the workshop material, I'll like to suggest some improvements that will help newcomers (like myself) to understand the material better. I'll update this issue as I go through each chapter.

Chapter 1: Introducing the My Pet Shop Web App

• Adding Vuetify as a dependency (line211)

Refer to issue #65 , I had some issues with adding Vuetify as a dependency in Codesandbox. I was able to debug and fix this once I changed the dependency to lowercase vuetify. This should be corrected in CH1 tutorial.

• Vue class bindings (line 306)

It will be helpful to give some context prior to introducing data binding as a new concept. For example, including an edited paragraph from VueJS guides in Class and Style Bindings:

A common need for data binding is manipulating an element’s class list and its inline styles. Since they are both attributes, we can use v-bind to handle them.

And link out to both VueJS guide and v-bind API doc for reference. Additionally, I only learned that :class is the shorthand for v-bind:class after searching through the guides. It will be helpful to introduce both syntaxes since learners may see both styles used in the wild.

• Using code syntax consistently throughout doc

In addition to the above point on v-bind, it will be helpful to review the docs for consistent use of code syntax:

• v-bind on line 306

• : shorthand on line 306

• Standardizing component names, e.g.

  • 'home' component (line33)
  • <HelloWorld> component (line 35)
  • HelloWorld.vue component (line 332)

• v-on directive for click event listener (line 354)

Similar to v-bind above, it will be helpful to link out to the VueJS guide on v-bind shorthand and API docs, and to note that the shorthand for v-on is @.

Reading through the VueJS guides on event handling, the guide walks through 4 examples of how v-on can be used:

• simple inline JavaScript statement (e.g. "counter += 1")
• binding to a method name (e.g. "greet")
• use methods in inline JavaScript statement (e.g. "say('hi')")
• use $event variable to access DOM elements ("warn('Form cannot be submitted yet.', $event)")

In CH1 tutorial, it will be helpful to note that the example is using @click with a simple inline JavaScript statement "themeSwitched = !themeSwitched" but there are other options available (link out to VueJS guide).

Context

There is deprecated markup in the Vuetify instructions: v-content should be replaced by v-main in Mini 1 (cross languages). This is a quick fix to the code only in the instructions.

Also, change the instructions on v-flex to stop errors:

edit to be:

Expected Behavior

no errors in Code Sandbox console

Acceptance criteria

no errors in Code Sandbox console, all languages edited

Steps to recreate the issue (for bugs)

using the latest Vuetify dependency, watch the console for a note about the use of v-content and how it's deprecated

This is going to be a huge task.

Acceptance Criteria

1. The workshop no longer calls for any vuetify package installs.

2. The workshop code examples, and instructions (for each chapter) use only semantic HTML elements with vue-bindings.

3. A new stylesheet is included in the workshop that includes good design principles, responsive layout & text, and has been thoroughly tested for the workshop - all chapters.

4. Workshop instructions have been updated in both the English and German language versions.

This can be tackled by more than one developer at a time, including multiple PRs

Change org name from Vue Vixens to Front-End Foxes in the footer on the homepage

Context

Right now, Vuepress uses README.md as its homepage. This means that when we visit Github, we see the same content as on the workshops homepage. We want to have these separate, so that users who go to github can be introduced to the repository and how to contribute.

Expected Behavior

I expect to see a different README presented on Github, versus on the workshops homepage.

Acceptance criteria

The workshops homepage should contain different information than the Github readme.

Additional information

There was a PR to allow Vuepress to use index.md instead of readme.md. However, this PR does not seem to work in practice. In the comments on the PR, one person presents a workaround, which we will try here (using readme.markdown in the hopes that Github will prefer it over readme.md).

• idea, in the navigation we can put the length of time for each of the minis to help a student select which one to take
• also, is the second mini workshop a one-hour one, or longer with the supplements?
• final idea, we could add a 'challenge' for faster students - add an animation to make the dog card do something before disappearing when the user clicks the trash icon

cc @NataliaTepluhina <- your call :)

Context

Right now, in the workshops, we tell folks to use a background images that is pulling from the VueVixens repo on 'master' - edit this everywhere to be the FrontEndFoxes repo with 'main' as the branch.

Context

We need to have a Vue 3 workshop in place, so let's start with https://workshops.vuevixens.org/workshops/vue/minis/mini1.html, our short classic. We need to create a very vanilla workshop that focuses only on Vue. I recommend using Skeleton.css instead of Vuetify for this as Vuetify is not yet Vue 3 compatible.

Expected Behavior

Let's teach the exact same content but with Vue 3 explained.

Acceptance criteria

The workshop needs to be deployed on /dev in our Docs repo and thoroughly tested.

Context

Create a Full-Day Vue Workshop translation set for Spanish

Expected Behavior

The entire Full-Day Vue Workshop is available to read & teach in Spanish

Acceptance criteria

The translation has been reviewed and/or QA'd

Additional information

@dalvarez131 is already working on this Full Day Workshop translation, should collaborate with Flor ❤️

I've definitely asked this before (and I apologise for forgetting the answer!), but what level of complexity are we aiming for with the early workshops? Compared to some others I've seen, I feel like we're starting at a fairly high level with the aim of quickly producing content, which is cool, but I fear might be a little overwhelming (too much "magic" and copy-pasting etc.). This might be my own naivety to the learning process though 😇

Would you be open to some earlier chapters? For example, perhaps a more basic project before the pet shop project, with 2 or 3 chapters that explains a little more about what's going on; walks people through the CSS they are adding, what npm is when they add modules, etc.

The explanation in the last section of Chapter 3 leaves me confused. For instance, what is ...res

It would be helpful throughout this chapter if each description of complex code were very detailed. For instance, rather than language like The forEach() method executes a provided function it would be helpful to have
The forEach() method executes a provided function. The function is .... In essence, link descriptions of code behavior to the specific part of the code being described.

Context
This PR: #136 created an appendix_2.md file for the Full Day workshop. However the appendix page it is supposed to create does not show up in the compiled website at https://workshops.vuevixens.org/workshops/vue/ (it should be visibly linked in the sidebar).

Expected Behavior
There is a link to the appendix_2 file in the sidebar at https://workshops.vuevixens.org/workshops/vue/ and the appendix_2 file is displaying properly when the link is clicked.

Acceptance criteria
Update the vuepress config to make this Appendix 2 build with vuepress.

Screenshots

Additional information
Vuepress docs: https://vuepress.vuejs.org/guide/
vuepress config: https://github.com/FrontEndFoxes/docs/blob/master/.vuepress/config.js

On our full-day skulk in Zurich we got the feedback that it can be very confusing for people who just start to develop when they are asked to install Chrome Devtools for the full-day workshop, when we use Codesandbox to do our workshop and on Codesandbox the Devtools won't work.

Wouldn't it be better to remove that suggestion from the workshop content itself and maybe add a new section after the full-day workshop where we propose Devtools to be installed if they develop locally?

I could do a PR with those changes for the english & german version of the full-day workshop.

Why did this line change through the course of the lesson?

Before
<v-list-tile avatar v-for="(dog, index) in favorites" :key="index" @click="{}">

After
<v-list-tile avatar v-for="dog in favorites" :key="dog.name" @click="{}">

I'm, currently, in a workshop and many of the participants had issues with properly implementing vuetify. There is a note that your dependencies should look like this:

"dependencies": {
  "vue": "^2.5.2",
  "vuetify": "1.2.9"
},

but codesandbox.io installs the latest version of vuetify (2.0.4) which is incompatible with the code we are provided. It caused all the screens to become blank.

We had to explain that it needed to be changed, to 1.2.9, but I'm not sure if it's easier to update the code or to provide an explicit note such as "Check the versions and make sure your code looks like this."

Just for ease of contribution, it would be nice to extend the project description ("Workshop documentation and scripts") to include a link to the generated site 😃 Something like:

Workshop documentation and scripts (rendered at https://vuevixens.github.io/docs)

This is a superb workshop. Thank you.

The rule of thumb when finding a difficult error is to check your own code. All errors are difficult when you're learning a new tool. I made plenty of typos in lessons 1 to 4 which I had to fix before things worked. Thought something similar had happened in Chapter 5's validation section, but I couldn't find any errors. Doesn't mean that I didn't introduce any but I did find that if I changed the code from what was presented in Chapter 5, the problem was fixed:
"<v-btn @click="submit" :disabled="!nameRules">Submit"
didn't work. How could it when it didn't include emailRules and phoneRules?

When I changed this element as follows:
<v-btn @click="submit" :disabled="!valid">Submit"
, validation worked as expected.

Jen's title should change here! Was about to do it but I'm trying not to get distracted lulz

https://vue-vixens-workshop.netlify.com/workshop/

Acceptance criteria
Create an issue template for this repository so contributors can communicate well about what the issue is 👍

Documentation
These are the new instructions for creating issue templates, but they require using the internal editing process in github's UI: https://help.github.com/en/github/building-a-strong-community/configuring-issue-templates-for-your-repository

I'm leaning more toward the legacy method where we write our own file: https://help.github.com/en/github/building-a-strong-community/manually-creating-a-single-issue-template-for-your-repository

But I'd like to see who picks up this task and what their thoughts are!

https://github.com/VueVixens/docs/blob/master/workshop/full-day/ch5.md

In chapter 5, Form.vue, in the data export, the tutorial has the user create nameRules and add to the Name v-text field, but after that does not tell the user to replace the v-form v-btn :disabled:"!valid" with :disabled:"!nameRules".

Context
The README.md file builds with vuepress into the workshops homepage: https://workshops.vuevixens.org/

Expected Behavior
There are two mentions of the organization's twitter feeds that should link to those twitter accounts.
There should be a section that links to the Front-End Foxes Code of Conduct (https://workshops.vuevixens.org/workshops/CODE_OF_CONDUCT.html) on the homepage.

Acceptance criteria

1. Both twitter account mentions link properly to the respective twitter accounts.
2. A section for code of conduct with a proper link has been added to the homepage.

Both of these can be done by editing the README.md file here: https://github.com/FrontEndFoxes/docs/blob/master/README.md

Screenshots

Additional information

https://twitter.com/VueVixens
https://twitter.com/FrontendFoxes

Acceptance criteria
A PULL_REQUEST_TEMPLATE.md file is created in the .github directory for this repository that includes required headers for explaining the new pull request. (Bonus points for Gif requirement!)

Not exactly clear what to overwrite with these instructions:
Overwrite the code in the Created()... .then

Here are some notes for a possible Mini workshop: How to Move Code from codesandbox.io to Local Dev

1. Download and unzip the zip file from codesandbox.io.
2. cd
3. Run npm install
4. Run npm install node-sass sass-loader
5. Run yarn dev
6. Optional: fix lint errors
7. If you still have lint errors, set useEslint: false in config/index.js.
8. Run yarn dev again.
9. Visit the localhost:8080 url in your browser.
10. (Here's what I still don't know how to do, and hopefully someone can detail: Figure out which node_modules are not necessary. Coming from codesandbox, it seems to include hundreds of modules. Surely not all of these are needed? Or are they? How do we know?)

Two possible approaches:

• https://www.npmjs.com/package/cleanup-dependencies (when I did this, I got command not found, despite having npm installed it.

• yarn autoclean