DOCSEARCHbyAlgolia
Submit Docs

JSKidz JavaScript Learning Platform

website·Indexed 31 days ago

https://jskidz.au

An educational resource for learning JavaScript through interactive sandboxes, coding katas, and game development projects. The platform covers core JS concepts including functions, classes, data types, and loops, alongside practical exercises on recursion, error handling, and modern JS features like optional chaining and nullish coalescing. Includes guided projects for building games such as Pacman, Breakout, and Mastermind.

Tokens
45.7K
Snippets
277
Records
340
Agent score
55%

What's inside JSKidz

  1. Use JavaScript primitive data types

    JavaScript uses three basic primitive data types to represent simple values: Numbers for numeric values, Strings for text, and Booleans for true/false logic.
    5 // Number
"Hi, I'm a string" // String
true // Boolean
false // Boolean

  2. Get started with the jsKidz coding platform

    jsKidz provides a browser-based platform for learning JavaScript that requires zero software installation, zero configuration, and zero setup cost. Students can build and create complex applications directly in the web browser to avoid environment troubleshooting and focus on problem-solving.

  3. Choose a Sparring difficulty level

    Sparring challenges are divided into three levels based on the Japanese martial arts concept of Shu-Ha-Ri, each with specific time limits and technical focuses:
    LevelTime LimitFocus
    Shu 守10 minCore JS — strings, arrays, basic logic
    Ha 破12 minIntermediate — two-pointer, hashing, sorting
    Ri 離15 minAdvanced — recursion, complex algorithms

  4. Understand Create React App package structure

    Create React App is split into two distinct packages:

    1. create-react-app: A global command-line utility used only to bootstrap new projects.
    2. react-scripts: A development dependency installed within each project that handles the build, start, and test scripts.

  5. Understand the Kata coding practice philosophy

    Kata is a training method based on martial arts where developers practice a sequence of code movements repeatedly until they become second nature. Unlike traditional problem-solving, the goal is to see the correct solution first, memorize it, and then type it from scratch to burn the pattern into muscle memory. This bridges the gap between reading code and being able to write it fluently from memory.

  6. Principles of the Simple Component Framework

    The Simple Component Framework follows these core architectural principles:

    1. Component-Based Structure: Every part of the UI is a component created as a JavaScript Class. The entire application is wrapped in a root App component.
    2. Hierarchical Grouping: Components can contain smaller child components to organize the UI.
    3. Dependency Injection for Communication: Child components receive the App instance (and potentially their parent component) as an argument in their constructor to share information and trigger global actions.
    4. Encapsulated Event Listeners: Components manage their own event listeners, which must be wrapped within the component class.
    5. Action-Based DOM Updates: DOM changes are never performed directly in logic; they are wrapped in class methods called by the component itself or by the App controller.

  7. Get started with the jsKidz browser-based platform

    jsKidz provides a browser-based platform for learning JavaScript that requires zero installation, zero configuration, and zero setup cost. Students can write and execute JavaScript code directly in the web browser to build applications and games without environment troubleshooting.

  8. Understand the Sparring timed problem-solving mode

    Sparring is a timed coding challenge mode designed to simulate the pressure of job interviews, live coding tests, and hackathons. Users must write a solution to a problem before a countdown timer expires to develop the ability to think clearly and code accurately under a deadline.

  9. Principles of the Simple Component Framework

    The Simple Component Framework follows five core architectural principles for building UI applications:

    1. Components: Every part of the page is a component represented by a JavaScript Class. The root of the application is the App component.
    2. Grouping: Components can be nested; a parent component can contain smaller child components.
    3. Communication: Components share information by injecting instances of the App or parent component into child components.
    4. Event Listeners: User actions (like clicks) must be handled by listeners wrapped within a component.
    5. Actions: DOM modifications must be wrapped in class methods called by the component or the App instance; direct DOM manipulation is avoided.

  10. Automatically prefix and minify CSS

    The project setup automatically minifies CSS and adds vendor prefixes using Autoprefixer. This ensures compatibility for features like the all property, break properties, custom properties, and media query ranges across older browsers.
    /* Input */
.App {
  display: flex;
  flex-direction: row;
  align-items: center;
}

/* Output after Autoprefixer */
.App {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

  11. Focus or exclude specific tests in Jest

    Use the following Jest function replacements to control test execution:

    • Replace it() with xit() to temporarily exclude a test from being executed.
    • Replace it() with fit() to focus on a specific test and skip all others.

  12. Reference environment variables in public/index.html

    Environment variables starting with REACT_APP_ can be injected directly into the public/index.html file using the %VARIABLE_NAME% syntax. This is performed at build time.
    <title>%REACT_APP_WEBSITE_NAME%</title>