diff --git a/stage0.5 Bootcamp/Possible tasks.md b/stage0.5 Bootcamp/Possible tasks.md index 0ffbc8193..35a756b75 100644 --- a/stage0.5 Bootcamp/Possible tasks.md +++ b/stage0.5 Bootcamp/Possible tasks.md @@ -4,133 +4,133 @@ ## 1. Art Quiz -**Ссылка:** https://github.com/rolling-scopes-school/tasks/tree/master/tasks/art-quiz -**Недель:** 1 -**Описание:** SPA-викторина на знание картин и их авторов - 240 вопросов двух типов, генерируемых из JSON-данных, с таймером, звуком, историей раундов и страницей результатов. +**Ссылка:** https://github.com/rolling-scopes-school/tasks/tree/master/tasks/art-quiz +**Недель:** 1 +**Описание:** SPA-викторина на знание картин и их авторов - 240 вопросов двух типов, генерируемых из JSON-данных, с таймером, звуком, историей раундов и страницей результатов. **Технологии:** `OOP / ES6 Classes` · `Webpack` · `LocalStorage` · `CSS Animations` · `Async/Await` · `SPA` --- ## 2. CSS Meme Slider -**Ссылка:** https://github.com/rolling-scopes-school/tasks/tree/master/tasks/css-meme-slider -**Недель:** 1 -**Описание:** Слайдер с мемами - анимированная смена изображений и подписей реализуется исключительно средствами CSS без единой строки JavaScript. +**Ссылка:** https://github.com/rolling-scopes-school/tasks/tree/master/tasks/css-meme-slider +**Недель:** 1 +**Описание:** Слайдер с мемами - анимированная смена изображений и подписей реализуется исключительно средствами CSS без единой строки JavaScript. **Технологии:** `CSS Animations` · `CSS Grid/Flex` · `Responsive Design` · `Pure CSS (no JS)` --- ## 3. Eldritch Horror (CodeJam) -**Ссылка:** https://github.com/rolling-scopes-school/tasks/tree/master/tasks/eldritch-horror -**Недель:** 1 -**Описание:** Приложение-помощник для настольной игры «Древний Ужас» - реализует сложный алгоритм замешивания колоды мифов с учётом выбранного Древнего, уровня сложности и правил формирования этапов. +**Ссылка:** https://github.com/rolling-scopes-school/tasks/tree/master/tasks/eldritch-horror +**Недель:** 1 +**Описание:** Приложение-помощник для настольной игры «Древний Ужас» - реализует сложный алгоритм замешивания колоды мифов с учётом выбранного Древнего, уровня сложности и правил формирования этапов. **Технологии:** `DOM manipulation` · `Алгоритмы (card shuffling)` · `gh-pages` --- ## 4. JS30 -**Ссылка:** https://github.com/rolling-scopes-school/tasks/blob/master/tasks/js30/js30.md -**Недель:** 1 -**Описание:** Студент выбирает один из 30 мини-проектов (часы, слайдер, аудиоплеер и др.), воспроизводит его по видео и расширяет обязательным и дополнительным функционалом. +**Ссылка:** https://github.com/rolling-scopes-school/tasks/blob/master/tasks/js30/js30.md +**Недель:** 1 +**Описание:** Студент выбирает один из 30 мини-проектов (часы, слайдер, аудиоплеер и др.), воспроизводит его по видео и расширяет обязательным и дополнительным функционалом. **Технологии:** `DOM Events` · `Web Audio API` · `CSS Animations` · `Canvas API (опционально)` --- ## 5. Minesweeper -**Ссылка:** https://github.com/rolling-scopes-school/tasks/tree/master/tasks/minesweeper -**Недель:** 2–3 -**Описание:** Полноценный «Сапёр» с адаптивным UI - флаги, цветовая индикация, авто-открытие пустых ячеек, выбор сложности, таймер, таблица рекордов и сохранение партии. +**Ссылка:** https://github.com/rolling-scopes-school/tasks/tree/master/tasks/minesweeper +**Недель:** 2–3 +**Описание:** Полноценный «Сапёр» с адаптивным UI - флаги, цветовая индикация, авто-открытие пустых ячеек, выбор сложности, таймер, таблица рекордов и сохранение партии. **Технологии:** `DOM generation from JS` · `LocalStorage` · `Game logic` · `Adaptive UI` · `Canvas API (опционально)` --- ## 6. Nonograms -**Ссылка:** https://github.com/rolling-scopes-school/tasks/tree/master/tasks/nonograms -**Недель:** 2–3 -**Описание:** Браузерная реализация классической головоломки «нонограммы» с несколькими уровнями сложности, таймером, звуком, сохранением прогресса и таблицей рекордов. +**Ссылка:** https://github.com/rolling-scopes-school/tasks/tree/master/tasks/nonograms +**Недель:** 2–3 +**Описание:** Браузерная реализация классической головоломки «нонограммы» с несколькими уровнями сложности, таймером, звуком, сохранением прогресса и таблицей рекордов. **Технологии:** `DOM generation from JS` · `LocalStorage` · `Game logic` · `Adaptive UI` · `ESLint` · `Webpack (рекомендован)` --- ## 7. Momentum -**Ссылка:** https://github.com/rolling-scopes-school/tasks/blob/master/tasks/momentum/momentum.md -**Недель:** 1 -**Описание:** Аналог Chrome-расширения Momentum - показывает время, дату, приветствие, слайдер фоновых изображений, виджеты погоды и цитаты дня, а также встроенный аудиоплеер. +**Ссылка:** https://github.com/rolling-scopes-school/tasks/blob/master/tasks/momentum/momentum.md +**Недель:** 1 +**Описание:** Аналог Chrome-расширения Momentum - показывает время, дату, приветствие, слайдер фоновых изображений, виджеты погоды и цитаты дня, а также встроенный аудиоплеер. **Технологии:** `REST API (OpenWeatherMap)` · `Web Audio API` · `LocalStorage` · `Async/Await` · `JS Modules` --- ## 8. Podcast Player -**Ссылка:** https://github.com/rolling-scopes-school/tasks/tree/master/tasks/podcast-player -**Недель:** 1–2 -**Описание:** Веб-плеер подкастов с поиском через Podcast Index API, страницей эпизодов, аудиоплеером с прогресс-баром и плейлистом, сохраняющим позицию воспроизведения между сессиями. +**Ссылка:** https://github.com/rolling-scopes-school/tasks/tree/master/tasks/podcast-player +**Недель:** 1–2 +**Описание:** Веб-плеер подкастов с поиском через Podcast Index API, страницей эпизодов, аудиоплеером с прогресс-баром и плейлистом, сохраняющим позицию воспроизведения между сессиями. **Технологии:** `TypeScript` · `REST API (Podcast Index)` · `XML parsing` · `Web Audio API` · `LocalStorage` · `SPA` --- ## 9. Songbird -**Ссылка:** https://github.com/rolling-scopes-school/tasks/blob/master/tasks/songbird/songbird-2022q3.md -**Недель:** 1 -**Описание:** Викторина для распознавания птиц по голосам - каждый раунд воспроизводит запись птицы, игрок угадывает вид из шести вариантов, набирая очки в зависимости от числа попыток. +**Ссылка:** https://github.com/rolling-scopes-school/tasks/blob/master/tasks/songbird/songbird-2022q3.md +**Недель:** 1 +**Описание:** Викторина для распознавания птиц по голосам - каждый раунд воспроизводит запись птицы, игрок угадывает вид из шести вариантов, набирая очки в зависимости от числа попыток. **Технологии:** `Web Audio API` · `DOM generation from JS` · `Webpack` · `Adaptive layout` · `JS Modules` --- ## 10. Piskel Clone -**Ссылка:** https://github.com/rolling-scopes-school/tasks/blob/master/tasks/piskel-clone.md -**Недель:** 2–3 -**Описание:** Браузерный редактор пиксельной анимации - инструменты рисования на canvas, управление кадрами через drag-and-drop, превью анимации и экспорт в GIF/APNG. +**Ссылка:** https://github.com/rolling-scopes-school/tasks/blob/master/tasks/piskel-clone.md +**Недель:** 2–3 +**Описание:** Браузерный редактор пиксельной анимации - инструменты рисования на canvas, управление кадрами через drag-and-drop, превью анимации и экспорт в GIF/APNG. **Технологии:** `Canvas API` · `Drag & Drop` · `GIF/APNG export` · `Webpack` · `Jest (unit tests)` · `LocalStorage` · `ESLint (Airbnb)` --- ## 11. Async Race -**Ссылка:** https://github.com/rolling-scopes-school/tasks/blob/master/stage2/tasks/async-race/README.md -**Недель:** 2–3 -**Описание:** SPA для управления коллекцией автомобилей - CRUD машин, запуск/остановка двигателей через REST API, анимированные гонки на текущей странице и таблица победителей с сортировкой. +**Ссылка:** https://github.com/rolling-scopes-school/tasks/blob/master/stage2/tasks/async-race/README.md +**Недель:** 2–3 +**Описание:** SPA для управления коллекцией автомобилей - CRUD машин, запуск/остановка двигателей через REST API, анимированные гонки на текущей странице и таблица победителей с сортировкой. **Технологии:** `TypeScript` · `SPA` · `REST API (fetch)` · `CSS Animations` · `Webpack / Vite` · `ESLint (Unicorn)` --- ## 12. Not Fight Club (CodeJam) -**Ссылка:** https://github.com/rolling-scopes-school/tasks/tree/master/tasks/notFightClub -**Недель:** 1–2 -**Описание:** Пошаговая боевая игра - создание персонажа с аватаром, выбор зон атаки и защиты, механика критических ударов, лог боя и хранение статистики побед и поражений. +**Ссылка:** https://github.com/rolling-scopes-school/tasks/tree/master/tasks/notFightClub +**Недель:** 1–2 +**Описание:** Пошаговая боевая игра - создание персонажа с аватаром, выбор зон атаки и защиты, механика критических ударов, лог боя и хранение статистики побед и поражений. **Технологии:** `DOM generation from JS` · `LocalStorage` · `Game logic` · `Routing (опционально)` · `gh-pages` --- ## 13. Shelter -**Ссылка:** https://github.com/rolling-scopes-school/tasks/blob/master/tasks/shelter/shelter.md -**Недель:** 3 -**Описание:** Двухстраничный адаптивный сайт приюта для животных по макету Figma - три итерации: фиксированная вёрстка → адаптивность → интерактивность (бургер-меню, попап, карусель, пагинация). +**Ссылка:** https://github.com/rolling-scopes-school/tasks/blob/master/tasks/shelter/shelter.md +**Недель:** 3 +**Описание:** Двухстраничный адаптивный сайт приюта для животных по макету Figma - три итерации: фиксированная вёрстка → адаптивность → интерактивность (бургер-меню, попап, карусель, пагинация). **Технологии:** `Figma` · `Semantic HTML` · `Sass (CSS preprocessor)` · `Adaptive layout` · `DOM manipulation` --- ## 14. Virtual Keyboard -**Ссылка:** https://github.com/rolling-scopes-school/tasks/blob/master/tasks/virtual-keyboard/virtual-keyboard-ru.md -**Недель:** 2 -**Описание:** Экранная виртуальная клавиатура, реагирующая на физическую клавиатуру, с поддержкой двух раскладок (EN + другой язык), анимацией нажатий и выводом ввода в textarea. +**Ссылка:** https://github.com/rolling-scopes-school/tasks/blob/master/tasks/virtual-keyboard/virtual-keyboard-ru.md +**Недель:** 2 +**Описание:** Экранная виртуальная клавиатура, реагирующая на физическую клавиатуру, с поддержкой двух раскладок (EN + другой язык), анимацией нажатий и выводом ввода в textarea. **Технологии:** `Keyboard Events API` · `LocalStorage` · `ES6 Classes` · `ESLint (Airbnb)` · `CSS Animations` --- ## 15. HTML Builder -**Ссылка:** https://github.com/rolling-scopes-school/tasks/tree/master/stage1/tasks/html-builder -**Недель:** 2 -**Описание:** Консольная утилита для сборки статического сайта из HTML-компонентов и CSS-файлов - серия из пяти нарастающих по сложности задач на работу с файловой системой. +**Ссылка:** https://github.com/rolling-scopes-school/tasks/tree/master/stage1/tasks/html-builder +**Недель:** 2 +**Описание:** Консольная утилита для сборки статического сайта из HTML-компонентов и CSS-файлов - серия из пяти нарастающих по сложности задач на работу с файловой системой. **Технологии:** `Node.js` · `fs (File System)` · `Streams` · `Path module` · `Events` diff --git a/stage0.5 Bootcamp/tasks/js30/js30.md b/stage0.5 Bootcamp/tasks/js30/js30.md index 546cf5d64..b3efa8e4f 100644 --- a/stage0.5 Bootcamp/tasks/js30/js30.md +++ b/stage0.5 Bootcamp/tasks/js30/js30.md @@ -15,7 +15,7 @@ If you notice any issues or have suggestions, feel free to contact me on Discord This task is a homage to the [JavaScript30](https://javascript30.com/) course by Wes Bos - 30 small, self-contained widgets built with vanilla web technologies. Your goal is to grow your DOM and async muscles by **reproducing two real widgets from scratch**, then enriching each with your own features. -Unlike the standard school flow, this task is performed in a **shared public repository** maintained by the course curator. Every participant gets a personal subfolder and a personal branch in that repository, so the whole stream effectively builds a small widget library together. You will see your peers' branches, pull requests, and live previews - treat that as a learning resource, not as a copy/paste source. +Unlike the standard school flow, this task is performed in a **shared public repository** maintained by the course curator. Every participant works in a personal branch and a personal subfolder inside that repository, so the whole stream effectively builds a small widget library together. You will see your peers' branches, pull requests, and live previews - treat that as a learning resource, not as a copy/paste source. There are **six widgets** to choose from. Pick any **two** that excite you. There is no "part 1 / part 2" split - the order does not matter, and the two widgets are scored independently. @@ -64,12 +64,22 @@ Even if Stage 1 or Stage 2 is incomplete, you can still reach the maximum widget ## Submission -This task is delivered into a **shared public repository** owned by the course curator. The repo URL is announced in the stream chat (referred to below as ``). +This task is delivered into the shared public repository [RSS-Js-FE-BootCamp/js30-widgets](https://github.com/RSS-Js-FE-BootCamp/js30-widgets). Do not create a separate personal repository for this task. + +### Repository access + +Before you start working, you need write access to the GitHub organization repository. + +1. Create an issue in [RSS-Js-FE-BootCamp/js30-widgets/issues](https://github.com/RSS-Js-FE-BootCamp/js30-widgets/issues) and ask to be added to the repository. +2. Wait for approval. It may take several hours. +3. After approval, GitHub will send an organization invitation to the email linked to your GitHub account. +4. Open the invitation link and accept it. +5. Start working only after you can push a branch to `RSS-Js-FE-BootCamp/js30-widgets`. ### Repository layout ``` -/ +js30-widgets/ ├── students/ │ ├── / │ │ ├── drum-kit/ @@ -77,31 +87,103 @@ This task is delivered into a **shared public repository** owned by the course c │ └── / │ ├── photofilter/ │ └── whack-a-mole/ -└── index.html # course-wide gallery (added later by the curator) +└── index.html # course-wide gallery with student cards ``` -### Workflow - -1. **Fork is not used.** The curator adds you as a collaborator to `` (or you push branches via your own clone - the curator opens the PR for you). -2. From `main`, create a working branch per widget, named `/`, for example `johndoe/drum-kit`. Use lowercase letters and dashes only. -3. In your branch, create `students///` and put **all** the widget's files there (`index.html`, `style.css`, `script.js`, assets, build output if any). Each widget is a standalone static site rooted at its own folder. -4. Follow the [git commit convention](https://rs.school/docs/git-convention). Commit history should reflect the real development process - frequent, meaningful commits, not a single dump. -5. Open a Pull Request from your branch into `main`. PR title and description follow the [PR description schema](https://rs.school/docs/short-track/pull-request-requirements). **Do not merge** the PR - the curator and your reviewers need it open. -6. **Netlify Preview Bot** is configured on the repository. Within a few minutes of opening (or updating) the PR, the bot leaves a comment with a live preview URL such as `https://deploy-preview---.netlify.app/students///`. This URL is your **deploy link** - submit it in rs app → **Cross-Check: Submit** for this task. No `gh-pages` or Netlify Drop is required. -7. Repeat steps 2–6 for your second widget (separate branch, separate folder, separate PR). - -### Public repository - what it means for you - -- Other students will see your branch, your PR, your code, and your preview link. That is by design - peers, mentors, and reviewers learn from each other's solutions. +### Branch and folder rules + +- **Fork is not used.** Work directly in the shared repository after your access is approved. +- Work in one personal branch for the whole task: `-widgets`, for example `johndoe-widgets`. +- Create one personal folder: `students//`. +- Put each selected widget into its own subfolder: `students///`. +- Use these task slugs exactly: `drum-kit`, `js-clock`, `vertical-slider`, `custom-video-player`, `photofilter`, `whack-a-mole`. +- Each widget folder must be a standalone static site with its own `index.html`. Keep all related CSS, JS, assets, and build output inside that widget folder. +- Do not edit another student's folder. +- Edit the root `index.html` only to add your own student card with links to your two widgets. +- Do not edit repository configuration or course-wide assets unless the curator explicitly asks you to. +- If you need common helper code for your two widgets, place it inside `students//shared/` and import it only from your own widgets. + +### Recommended workflow + +1. Clone the shared repository: + + ```bash + git clone https://github.com/RSS-Js-FE-BootCamp/js30-widgets.git + cd js30-widgets + ``` + +2. Create your personal branch from the latest `main`: + + ```bash + git checkout -b -widgets + ``` + +3. Create `students//`. +4. Add two widget folders inside it. For example: + + ```text + students/ + johndoe/ + drum-kit/ + index.html + style.css + script.js + js-clock/ + index.html + style.css + script.js + ``` + +5. Add your student card to the root `index.html` by following the existing cards. Example: + + ```html + + ``` + +6. Commit meaningful milestones following the [git commit convention](https://rs.school/docs/git-convention). Commit history should reflect the real development process, not a single final dump. +7. Push your branch: + + ```bash + git push origin -widgets + ``` + +8. Open one Pull Request from `-widgets` into `main`. PR title and description follow the [PR description schema](https://rs.school/docs/short-track/pull-request-requirements). **Do not merge** the PR. +9. In the PR description, include: + - your GitHub login; + - the names of the two selected widgets; + - the source paths for both widgets; + - your self-evaluation for Widget 1 and Widget 2; + - browser and screen sizes used for testing. + +10. **Netlify Preview Bot** is configured on the repository. Within a few minutes of opening or updating the PR, the bot leaves a deploy-preview URL. After the bot comment appears, add both widget links to the PR description. Your widget links will look like: + +- `https://deploy-preview---.netlify.app/students///` +- `https://deploy-preview---.netlify.app/students///` + +11. Submit the PR link in rs app -> **Cross-Check: Submit**. No `gh-pages`, Netlify Drop, or personal deployment is required. + +### Working in the shared repository + +- Other students will see your branch, your PR, your code, and your preview link. That is by design - peers and reviewers learn from each other's solutions. - Browsing other people's code **after you submit** is encouraged. Browsing it **before** you submit is on your conscience; we do not police it, but you only learn by writing your own code. +- Because everyone works in one repository, keep your commits scoped. Your PR should change only `students//` and your own card in the root `index.html`. +- The root `index.html` may change often because every student adds a card there. Before opening or updating your PR, pull the latest `main` and resolve conflicts carefully. +- If two students accidentally edit the same shared file, the curator decides how to resolve it. Student widget code should not depend on changes to shared root files. ## Cross-check The task is reviewed via the [cross-check process](https://rs.school/docs/cross-check-flow). -- The reviewer opens the deploy-preview URL from the PR and verifies each scoring item against the live widget and the source in the corresponding `students///` folder of the open PR. +- The reviewer opens both deploy-preview widget URLs from the PR description and verifies each scoring item against the live widgets and the source in the corresponding `students///` folders of the open PR. - The browser-console self-evaluation (see Non-functional requirements) is treated as the author's claim; the reviewer awards or rejects each item based on what actually works in the preview. - A reviewer may also browse the diff in the PR to confirm there was no obvious copy-paste from another student's branch. +- If the PR changes files outside `students//` and the student's own card in the root `index.html`, reviewers should ignore those changes for scoring and may ask the author to clean up the PR. ### Bug penalties @@ -136,7 +218,7 @@ Each widget is scored independently. The per-widget breakdown below is applied * - No forbidden JS library/framework is used (jQuery, React, Vue, Angular, etc.) - **-65** (the whole widget is voided) - Browser-console self-evaluation is present and lists the items claimed - **-5** if missing - Commit history reflects real development (not a single dump commit) - **-10** if violated -- PR is open against `main` of the course repo, with a working Netlify preview link - **-10** if violated; if there is no working preview at all, the widget cannot be scored +- PR is open against `main` of the shared repository, with working Netlify preview links for both widgets - **-10** if violated; if there is no working preview for a widget, that widget cannot be scored ### Total