JavaScript30 – One Month Pure JS Challenge Chinese Guide
JavaScipt30 is a 30-day challenge launched by Wes Bos. The project provides 30 video tutorials, 30 challenges starting documentation and 30 challenge solutions source code for free. The purpose is to help people write things in pure JavaScript without using frameworks and libraries, nor using compilers and references
/soyaine/JavaScript30
Chinese Guide Author:Soyaine
JavaScript30Tutorial Author:Wes Bos
The complete guide inGitHub, please Star if you like♪(^∇^*)
What is JavaScript30?
JavaScipt30 is a 30-day challenge launched by Wes Bos. The project provides 30 video tutorials, 30 challenges starting documentation and 30 challenge solutions source code for free. The purpose is to help people write things in pure JavaScript without using frameworks and libraries, nor using compilers and references.
The official website slogan is as follows:
Build 30 things in 30 days with 30 tutorial No Frameworks × No Compilers × No Libraries × No Boilerplate
About "JavaScript30 Chinese Guide"
The word used in English to describe pure JavaScript is vanilla JavaScript. vanilla has an ordinary meaning and also has the meaning of vanilla. This word is beautiful, but unfortunately I can't find the appropriate Chinese to translate it. When I started the front-end, I used pure JavaScript to write things and blog. I was very happy when I saw this challenge. I felt that it was rare for someone to return to the most authentic place when various frameworks in the front-end community were lively.
Of course, it is undeniable that new tools can help us improve productivity, but the most primitive JavaScript must be the missing part of many people's knowledge structure. If you also want to explore the details, please follow this guide and visit the original world of JavaScript.
Another reason for writing this Chinese guide is to read the Guides written by Nitish Dayal, and I decided to follow him, sort out his ideas and organize them and form a guide while taking notes. I believe that while Learn by Use, I also believe that teaching is the best learning. Hopefully this guide will help people who want to practice, especially those who want to get started.
This guide is still being updated. Welcome to supervise me. If you want to get new articles in time, you can use GitHub Star/Fork My Repo.
How to participate in the challenge
The following are documents that can be borrowed from completing the JavaScript30 challenge of Wes Bos. The specific usage suggestions for each document are as follows:
- JavaScript30 official website: After registering on the official website, you can watch and download all tutorial videos. Wes Bos also uploaded the video to Baidu Cloud, and you can find the link by entering the official website and directly pulling it to the bottom of the page.
- English Guide by Nitish Dayal: This is an unofficial text-based guide and the main factor that inspired me to write this series of articles.
-
Challenge the initial documentation: This is the code involved in this tutorial by Wes Bos, you can directly Clone or download it locally and start your 30-day challenge journey. The document has 30 folders in total, each with at least two files.
- : It is the initial document provided to us, which is convenient for us to focus on the writing of JavaScript. This document has written the basic HTML and CSS parts. We only need to write JavaScript code on this basis to implement specific functions.
- : Documents that have achieved the final effect, you can view the effects and implementation ideas.
- Source code of Chinese guide I wrote: The document structure is the same as provided by Wes Bos. Enter each folder to view the current challenge guide (). The file I created when I completed the challenge is , which contains Chinese comments on the core code. If you find any problems during reading, pleaseIssue here. If you like, remember Star ~♪(^∇^*), encourage me to write better articles.
Table of contents
- JavaScript Drum Kit Guide | Pure JS simulated drumming effect
- JS + CSS Clock Guide | Pure JavaScript+CSS clock effect
- CSS Variables Guide | Use CSS variables to achieve drag control parameters
- Array Cardio, Day 1 Guide | Example of basic operation method of array
- Flex Panel Gallery Guide | Retractable picture wall online effect
- Type Ahead Guide | Quickly match the online effect of verses based on keywords
- Array Cardio, Day 2 Guide | Example 2 of basic operation method of array
- Fun with HTML5 Canvas Guide | Rainbow brush painting board online effect
- Dev Tools Domination Guide | Console debugging skills online examples
- Hold Shift and Checkboxes Guide | Shift batch selection of online effects
- Custom Video Player Guide
- Key Sequence Detection Guide | Online effects
- Slide in on Scroll Guide | The online effect of the picture sliding in and out as the screen scrolls
- JavaScript References vs. Copying
- LocalStorage
- Mouse Move Shadow
- Sort Without Articles
- Adding Up Times with Reduce
- Webcam Fun
- Speech Detection
- Geolocation
- Follow Along Link Highlighter
- Speech Synthesis
- Sticky Nav
- Event Capture, Propagation, Bubbling, and Once
- Stripe Follow Along Nav
- Click and Drag
- Video Speed Controller
- Countdown Timer
- Whack A Mole
Participating in the challenge does not require you to pay fees or join an organization, nor will anyone urge you to do anything. You just need to turn on the computer, then start thinking and typing on the keyboard. Believe in the power of internal motivation. I have given some suggestions and experiences here. The most suitable method for you still needs to be explored by yourself.
List of contributors in this Chinese guide
- @DrakeXiang
- @zzh466
- @Xing Liu
- @六六六六六六六六六六六六六六六六六六六六六六六六六六六六六六六六六六六六六六六六六六