Giter VIP home page Giter VIP logo

academy's Introduction

Developer DAO Academy

Developer DAO Academy is an open-source education platform created by the Developer DAO Foundation.

Live site is at https://academy.developerdao.com.

Find us on Twitter at https://twitter.com/devdao_academy.

Academy Homepage Screenshot

What license applies to this site's content and code?

  • All Developer DAO Academy website content © 2022 by Developer DAO Foundation licensed under Attribution-NonCommercial 4.0 International.
  • Developer DAO Academy website code © 2022 by Developer DAO Foundation licensed under MIT.

How do I get started?

Please read our CONTRIBUTING Guide to get started. We ask that you are a member of Developer DAO to contribute, since our project uses various Developer DAO planning and communication tools, such as Discord.

How to contribute code

If you're new to the project, see below for setup instructions.

Considerations as you write code

As you're working on code, some things to think about:

What should I do before submitting the PR?

  • Run yarn confirm which will make sure your files are consistently formatted, lint the code base looking for problems and then actually building the site locally to ensure no build problems
  • If you see warnings or errors please fix.
  • Also, this step runs Prettier so some files may have changed and need to be checked in.

Now you're ready to submit your PR.

Assume no one knows what your PR is about. So helpful to:

  • writing a description in the PR to explain what you're fixing/adding and how to test.
  • if your work is based on a GitHub issue, add that in the description, though make sure you use the exact words of "Closes #123" since this will automatically close the issue when the PR is merged. Using "this refers to #123" won't do that.
  • send a signal that your PR is ready for review, such as asking someone to review your PR

How do I review a PR?

It's also important that people review PRs -- a great learning experience and important for an open-source project.

Some helpful things when reviewing PRs:

  • ALWAYS download and run the code you're reviewing. Never eyeball it in the PR and approve it.
  • when you review a PR, please add yourself as a reviewer in GitHub so we know someone is reviewing
  • go through the formal GitHub review process of starting a review and then finishing with "approved" or "needs changes"

Who should merge the PR?

Once a PR is reviewed, the author of the PR should merge, and the author should run through the live site and make sure the code is performing as expected.

Project Setup

Prerequisites:

node --version 18.x

Refer to the node and npm installation with nvm guide in Lesson 2. A link to the guide can be found here:

Fork this repo, clone forked repo locally and cd into the repo:

git clone https://github.com/[YOUR GITHUB HANDLE HERE]/academy.git
cd academy/

Installation and run:

yarn install
yarn dev

This will create a local instance of the app running and can be viewed at http://localhost:3000 in your browser.

Also it's handy to install the Prettier plugin for your browser. You can then use it to automatically format files. It helps keep the code base tidy, for Typescript, MDX and Markdown files.

VSCode Remote Containers (alternative setup)

If you use VSCode for development, we already have the configuration files for you to use Remote Containers (make sure that you check the link to install the requirements to use it) to easily create an isolated development environment for your fork. After installing the minimum requirements, you can start using it following this quickstart.

For Windows Users

You may run into setup problems if using Windows Powershell. We suggest you use WSL.

Grabbing latest version of the code

Since this is a work in progress, your local version of the app can be updated with the following commands:

Stop the locally running app with:

Ctrl + C

Use git pull for the most up-to-date version:

git pull

Reinstall with yarn:

yarn install

Run the updated app:

yarn dev

Learn More

To learn more about Next.js, take a look at the following resources:

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

Storybook

This project uses Storybook. Storybook allows us to develop components in isolation from our app.

Stories are loaded from *.stories.(mdx|js|jsx|ts|tsx) files in any directory.

To use Storybook, run the storybook script:

yarn storybook

To learn more about how to write Storybook stories, check out the official Intro to Storybook tutorial.

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.

How do I add/edit contributors for a lesson?

First make sure you add your information to ./data/contributors.ts. Minimally you need a unique handle (a single lowercase name such as brianfive) which will be used to look up your information.

Then add a component in your .mdx file at the bottom like this, using various handles defined above.

You can add a contributor as an author, reviewer of contributor. Author(s) wrote the content, Reviewer(s) edited the content, and Contributor(s) later made updates or fixed issues.

import { ContributorFooter } from "../../../components/mdx/ContributorFooter";
<ContributorFooter
  authors={["brianfive"]}
  reviewers={["piablo", "georgemac510"]}
  contributors={[]}
/>

How do I add a specific forum link in a lesson's header?

Make sure the <LessonHeader /> component has the discussionUrl attribute like this:

<LessonHeader
  title="Lesson 4: Testing your TierNFT"
  discussionUrl="https://developerdao.peeranha.io/discussions/1372/testing-solidity-contracts"
/>

Without discussionUrl the link will default to the home page of Peeranha.

academy's People

Contributors

0xchin avatar 7i7o avatar briangershon avatar casasmartinignacio avatar danielolarte avatar elpiablo avatar exas-3 avatar frankiefab100 avatar georgemac510 avatar happys1ngh avatar markkos89 avatar mavv avatar meowyx avatar okhaimie-dev avatar omahs avatar pbillingsby avatar ropats16 avatar sanjayk0508 avatar sbelka-1703 avatar shikhar360 avatar tabascoatw avatar traversng avatar with-heart avatar wolovim avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

academy's Issues

Content can break mobile layout

Issue

I noticed Lesson 1, as well as Getting Started have issues where content breaks the design on mobile.

Some Possible Solution

  • CSS to ensure wrapping
  • shrinking content (albeit it will be easy for bug to come back)

More Details

IMG_5470

IMG_5469

Design Review

We'd like to do a holistic design review of the site.

Competency Matrix and Proof of Competence (Requirement Brainstorm)

Overview

What if there was a competency matrix on-chain that described what information a person should know for a given expertise -- and when people completed courses for those competencies, they received an NFT as Proof of Competence?

Competency Matrix

Colin: I'm still very keen on the idea of having a competency matrix defined on-chain, and then pointing an LMS towards that contract so that the modules in a course can be associated with each skill that makes up the competency. I imagine the LMS populating a dropdown with what's at the contract address.

Brian: What's an example of a competency matrix?

Colin: Here's one example: https://www.qualityze.com/build-effective-competency-matrix/ The best efforts to make this kind of data standardized have come out of DoD. The old model is SCORM, which is mostly used for making didactics and assessments more portable. The next iteration is xAPI: https://xapi.com/overview/

So like... if you're reading government solicitations or even RFPs from large orgs that already have multiple learning systems, it's pretty common to see requirements for an xAPI compliant LRS. A blockchain would be the ultimate LRS, but there are some serious considerations that should be given to privacy. Ideally, you could give someone permission to view whatever relevant portions of your transcript.

For our purposes, I would love to see a standard put forth for a JSON schema that could be used to publish a competency standard, such that an LMS could point to a contract and populate a dropdown like I described above.

The top two boxes are where the JSON object is published to a contract, and the curriculum dev points back to it

Brian: What could be the minimal prototype to prove out the concept?

Let's use our current Academy MVP content as the guinea pig.

Brainstorm of pieces/workflow:

  • minimal JSON schema based on some xAPI for our existing content. Example: "a web3 developer, working on an NFT contract, needs to be able to store the image and JSON data"
  • @chiin is working on a quiz. Quiz somehow connects with JSON schema describing what person needs to learn. So in this example, the quiz would be picking 5 random questions on "What are storage options and how do you store that data in a decentralized way?".
  • learner passes quiz
  • certificate minted for that JSON schema -- or maybe many certifications -- once for each piece of the schema (e.g. "expert in distributed storage").

I could think of a million sub-specialties:

  • an expert on web3 marketplaces and metadata; expert on royalties across marketplaces
  • expert on deploying for xyz chain
  • expert on testing solidity contracts

We want content to be real-world ready -- I like idea of a laundry list of specialities vs one NFT that says "web3 developer". Instead, I could find the person best for my project based on combo of skills.

I haven't been following Eden project, wonder how they're solving this? (since they're trying to map interests to projects)

Colin: Yeah that's basically it. The learner record is made up of any number of xAPI statements, some subset of which may count towards a credential.

Initial brainstorms from Discord (2022/11/08)

@georgemac510: Is there any way to design assessment checkpoints? It might fold well into issuance of a POAP after passing a particular assessment. Only labor intensive part of it is a manual grading of the assessment on the team’s part.

@briangershon: It'll be hard to scale manual confirmations.

Some brainstorms for "checkpoints":

  • we trust user to manually click a button that says "I completed this" checkpoint
  • we verify automatically. Maybe each lesson has 5 questions, and they have to answer them all. Or they have to submit a final project, and we verify (scrape the site?) and see something running (completion of a whole track) -- or ping a contract on the blockchain they deployed to validate it works. They can all be cheated, but it sets some sort of minimal bar.
  • or we just count impressions (website analytics) and the metric becomes "500 people saw the lesson"

POAPs for checkpoints could be a lower bar, but if we want to offer NFT certifications of completion, that seems a higher bar.

@georgemac510: Any chance to tighten assessment checkpoints where there is an assessment after each step of n? i.e. #1 - what is your output after ‘npx hardhat node”?

I know this will make lessons incredibly long, but seems that learners need a medial self-assessment to keep moving forward and gain confidence.

@briangershon: Almost like a REPL sort of system that could respond after each line.

Another approach that could work -- we supply intentionally failing unit tests -- and when they complete an exercise correctly, the tests will then all run. It's good exposure to automated testing culture -- which is a very useful skill as well. Could be automated too -- they paste their code in and we run unit tests in the cloud.

@georgemac510: I’m just concerned about building confidence through success. Students kick ass on assessments and they feel empowered to move forward.

@briangershon: Another idea -- say the first few lessons in a track are based on trust -- they get something running and feel confidence in their skills, and earn POAPs. Then later lessons in the track they can apply those skills to a bit more of a challenge (say through unit tests or questions or deploying something) and they get official credit for the track upon completion.

...

@briangershon: Ok, here’s [a brainstorm of] our first version of automated evaluation. User logs on with MetaMask. They deploy their contract at end of lesson. Our server then verifies they own the new contract, then exercises the contract via some method calls and POOF we mint them a POAP!

We'll have to flush out more, but maybe after they deploy, they could just submit the address of their new contract to our site.

We could then have a cloud service that calls methods on the contract, say mint or a custom one like retrieveGeneratedArt (depending on what the contract does). Methods that change the blockchain would cost us gas -- albeit DevDAO could fund through partnerships.

Pick domain for production site

Create a poll to decide:

  • Subdomain of developerdao.com and if yes, then schoolofcode.developerdao.com?
  • Or a new domain, and if yes, which one?

Marketing Plan for Launch (Sep 20th, 2022)

September 20th Launch

Our call to actions via our "Getting Started" page on site -- we want feedback on content, explain how people can contribute to project. (Future bounties)

Tasks:

MVP Launch High Priority

  • @briangershon -- Production site #56 (4pm UTC) - https://academy.developerdao.com
  • Seeking volunteer to write the paragraph @K41R0N. Dev DAO newsletter post (single paragraph) / Headliner in Newsletter on 9/19 (day before launch) -- @wolovim
  • @ropats16 -- can provide GIF with new name and new launch date. Plus short snippet description of project. @elPiablo could write a sentence! @ropats16 has draft.
  • Tweet and amplify (include link to site in all tweets) -- suggestions: ask questions about what people want to see content-wise, suggest places for people to look for content they're interested in. Retweets. Emphasis our calls-to-action -- which we'll also include in Getting Started. Pairing with Derrek, who will also be tweeting. @ropats16 will open a thread. @kempsterrrr can help suggest.
  • Post link on Developer DAO website -- @kempsterrrr

Post MVP

  • Friend of the DAO to help amplify?
  • Partner amplification? Wait until we're using some of those protocols first?
  • Twitter Space (4pm UTC) with @ropats16, Derrek (co-host), Scott from Gitcoin, @kempsterrrr -- see thread in #school-of-code
  • Derrek from ETHDenver (Twitter)

[chore] - update readme to fork rather than clone

Hello folks. In pursuit of a more sucure and scabale setup for the Developer DAO Github, we've (my self and @mhmulford0) remove the channel for folks getting added to the Github Org as this was giving everyone permission to open repos and also required folks to manually add people to the org.

Moving foward, we're going to ask projects to move a typical open source model whereby folks are asked to Fork repos and open PRs from their forked repo so they are not required to be added to the org to participate in projects. The eventual plan will be to reduce Github org membership to people playing core roles on projects and thus need elevated access.

When you get a chance would you please mind updating your readme to reflect this pattern so folks looking to contriubte fork rather than clone? Feel free to hit me back with any questions ❤️

Define and document the Lesson feedback process

Make sure our feedback process is defined -- one idea I had was to add a short form at the bottom of the lesson to ask "How was the lesson? What can we do to improve it?" -- minimally this could point to our new Github Bug Form, or could be more exotic.

Add Top Navigation

  • add consistent nav bar for all pages
  • Hook up logo to go "Home"
  • Add "Home" and "Tracks" as top nav (works for both desktop and mobile) -- also see #38
  • Highlight active menu item based on route
  • Support hamburger menu for mobile navigation

Design Quick Wins for Lesson and Getting Started pages

Background and Nav Design Changes

  • Leave purple background and yellow text on home page

Use white background instead of purple for all lessons and Getting Started pages, which includes:

  • Top navigation will need to be black on white (instead of yellow on purple)
  • There may be other design adjustments for components when background goes to white

Other changes

  • Reduce font-size on lesson pages

Hero CTA button only navigates on text click

When I click on the ‘Get Started’ button on the Hero/home page, the only time it navigates to /getting-started is when I target the text.

Would the expected result be that when I click anywhere inside the buttons borders I am directed to that path?

Build "Getting Started" page

Development

  • Add new "Getting Started" page and route with "lessons" list on the bottom
  • Hook it up from "Getting Started" button on home page
  • Add "Getting Started" to top navigation
  • Move Feedback and link to lessons to the top, then ease into roadmap, etc.
  • How to get involved in the project - get people excited about writing content too

Content

A great example of a Getting Started page is here: https://www.30daysofweb3.xyz/curriculum/1-getting-started/0-overview

  • About project / goals of project
  • Where to give feedback (e.g. point to our Github Issues and our new bug report form) -- See also #50
  • Project Roadmap

As our content and lessons grow, we'll split these items out to separate pages.

Hamburger menu background has old purple color

The background of the site used to be purple, and hence the background of the mobile hamburger menu is purple.

To Reproduce Steps to reproduce the behavior:

  1. Shrink windows to see hamburger menu
  2. Click on hamburger menu

Expected behavior A clear and concise description of what you expected to
happen.

Should probably be black now.

Screenshots If applicable, add screenshots to help explain your problem.
Screen Shot 2022-08-17 at 7 15 47 AM

Add navigation between lessons

Currently there is no way to navigate between lessons from each lesson page.

This issue is for adding forward and back navigation icons.

Write Lesson 4 -- Intro to Automated Testing

Lesson 4 is to introduce writing automated tests for contracts.

The contract to test will be from Lesson 3's Tiered contract: #102 which can be previewed here: https://school-of-code-git-lesson-3-tiernfts-developdao.vercel.app/lessons/3

In Prep for Writing Lesson 4

Lesson 3 Setup

  • The intro to "tier" concept has an image that talks about Netflix Subscriptions, but then the contract talks about tiers called NOOB, DEV and HACKER. Should the tiers continue on the theme of Netflix subscriptions? If not, intro image should be changed.
  • Do we have a sample project for Lesson 3? Otherwise lesson creator writing tests will need to run through everything to get the initial project running

Lesson Outline

Introduction

  • Why write tests?
  • When to write tests?

Add Test framework

Write tests

  • Write tests for lesson 3
  • Introduce each test?

Here are some example tests: https://github.com/Developer-DAO/ukraine-donation-nft/tree/main/contract/test

Conclusion

  • Conclusion, what did we learn?

Add cookie consent banner

With FullStory being initialized on load and tracking, we need to add a cookie consent banner that gives the User the ability to opt out.

Add Storybook

Storybook allows us to build components in isolation from the rest of the app.

This will enable us to focus on building effective components first before worrying about integrating them into the layout and greater structure of the app.

Pomodoro Timer

What is Pomodoro?

One of this project's 3-month goals is to add a Pomodoro Timer feature:

image

In case you're not familiar with the Pomodoro Technique, here's an overview:

image

You can also visit https://pomofocus.io/ to try out a timer!

This method of working is effective for a few reasons:

  • listing your tasks helps you remain focused on the things you're trying to accomplish
  • the timer encourages you to just start and oftentimes just starting creates the motivation and clarity needed to keep going
  • the timer encourages a consistent rhythm of breaks which is a healthy habit
  • coming back from a break forces you to think about what you'll try to accomplish with the next session, adding a little bit more mindfulness to your working process

What are we building?

Since we know we want to have this as a feature but we don't know how we'll use it exactly, this issue is for creating a minimal component that exists only in Storybook (see #18) for the time being. This allows us to focus on building a solid foundation for the component which we can build on top of once we better understand where we'll use it, how it should look, and what other features we want it to have.

That minimal component is essentially number 2 from the above image: a timer for handling loops of 25 minutes study -> 5 minutes break

That might not seem like enough to justify the effort of putting together this detailed issue, but there's actually quite a bit of complexity hidden in here. For example, here are the different states this component might be in:

image

Each of those buttons leads us to a different state:

image

And some of these states might even have some special behaviors we need to add too:

image

Acceptance Criteria

In order to know when this issue can be considered done, I've created a list of acceptance criteria to define the specific behaviors of this component. Before we get to that, let's define a few terms:

  • "full timer" refers to the timer before it has started counting down. For a study session this is 25:00 and for a break session, this is 05:00
  • "active timer" refers to a timer that is counting down second by second to 0
  • "paused timer" refers to a running timer that has been paused, meaning the timer remains at the current remaining time until it is resumed
  • "empty timer" refers to a timer that has counted all the way down to 0. An empty timer should never go into the negative, meaning that it stops counting down at 00:00.

With those terms out of the way, here are the acceptance criteria for this component:

  • The timer starts in the idle state
  • An idle timer displays a full timer for a study session (25:00) and allows the user to start a study session
  • A full study session timer begins at 25:00
  • An active study session timer counts down second by second to 00:00
  • An active study session timer can be paused
  • An active study session timer can be reset back to the idle state
  • A paused study session timer can be resumed
  • A paused study session can be reset back to the idle state
  • An empty study session timer can begin a break session
  • A full break session timer begins at 05:00
  • An active break timer can be skipped which returns the timer to the idle state
  • An empty break timer allows the user to start a new study session timer
  • Times are always displayed in the "MM:SS" format (examples: "25:00", "24:59", "09:59", "00:00")

README.md needs to be updated and react-query error

The README.md should probably include:

Prerequisites:

      node --version 16.x

Refer to the node and npm installation with nvm guide in Lesson 2. A link to the guide can be found here:
https://www.notion.so/How-to-install-node-js-and-npm-67b2ab1f76f148f49f547b9156aeaf28

Clone and cd into the repo:

       git clone https://github.com/Developer-DAO/school-of-code.git
       cd school-of-code/

Installation and run:

       yarn install 

       yarn dev

This will create a local instance of the app running and can be viewed at http://localhost:3000 in your browser.


Since this is a work in progress, your local version of the app can be updated with the following commands:

Stop the app with:

       Ctrl + C

Use git pull for the most up-to-date version:

       git pull https://github.com/Developer-DAO/school-of-code.git

Reinstall with yarn:

       yarn install

Run the updated app:

       yarn dev 

Measuring Season 1 Goals

Two goals of Season 1 are to:

  • successfully onboard 250 members to the platform
  • and ensure 50 members complete 100% of track

How are these metrics defined, and how do we measure them?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.