frontendfoxes / curriculum Goto Github PK
View Code? Open in Web Editor NEWOur workshop curriculum
Home Page: https://frontendfoxes.github.io/curriculum/
License: MIT License
Our workshop curriculum
Home Page: https://frontendfoxes.github.io/curriculum/
License: MIT License
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
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).
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
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
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
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
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.
Additional information
Vuepress docs: https://vuepress.vuejs.org/guide/
vuepress config: https://github.com/FrontEndFoxes/docs/blob/master/.vuepress/config.js
Not exactly clear what to overwrite with these instructions:
Overwrite the code in the Created()... .then
cc @NataliaTepluhina <- your call :)
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
Acceptance criteria
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
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
Here are some notes for a possible Mini workshop: How to Move Code from codesandbox.io to Local Dev
npm install
npm install node-sass sass-loader
yarn dev
useEslint: false
in config/index.js.yarn dev
again.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
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!
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
).
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
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 β€οΈ
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.
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.
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)
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
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
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
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.
When changes are made in a PR, and the Netlify build actions run, it includes linting as a requirement to pass.
Acceptance criteria
I can lint my local project by running a manual lint command locally.
When I push my work to origin, the CI builds are linting my work.
Additional information
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.
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.
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.
code syntax
consistently throughout docIn 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.
<HelloWorld>
component (line 35) 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:
"counter += 1"
)"greet"
)"say('hi')"
)$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).
@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.
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.
Acceptance Criteria
Some link to github and some instruction to have or create a github account is added to the intro of Chapter 1.
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.
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.
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.
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)
yarn dev
<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.
This is going to be a huge task.
Acceptance Criteria
The workshop no longer calls for any vuetify package installs.
The workshop code examples, and instructions (for each chapter) use only semantic HTML elements with vue-bindings.
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.
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
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="{}">
Change org name from Vue Vixens to Front-End Foxes in the footer on the homepage
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.
Vuetify
in the search bar (searching for npm dependency):Vuetify
did not appear in the search resultsThe 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"
},
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!
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
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.
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.
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!)
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
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.
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."
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. πππ
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google β€οΈ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.