В Angular 21 готовят упрощение работы со стилями: директива ngStyle уходит в прошлое, её заменяет нативный атрибут style. Это часть новой миграции, которая сделает код чище и понятнее. Обновление подтянется автоматически при переходе на свежую версию.
👉 Гайды по JavaScript | дать буст
Please open Telegram to view this post
VIEW IN TELEGRAM
Если хочешь прокачать навыки в JavaScript и Angular, вот курс для тебя.
Ты будешь использовать популярные инструменты, чтобы создать шахматную игру с ИИ-противником.
Также разберёшься в динамике шахматной доски, механике игры, интеграции ИИ и многом другом.
https://freecodecamp.org/news/code-a-chess-game-with-ai-opponent/
👉 Гайды по JavaScript | дать буст
Ты будешь использовать популярные инструменты, чтобы создать шахматную игру с ИИ-противником.
Также разберёшься в динамике шахматной доски, механике игры, интеграции ИИ и многом другом.
https://freecodecamp.org/news/code-a-chess-game-with-ai-opponent/
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
Почти два года прошло, а я всё время забываю, что во Vue это можно делать:
👉 Гайды по JavaScript | дать буст
Please open Telegram to view this post
VIEW IN TELEGRAM
❤4👍3
This media is not supported in your browser
VIEW IN TELEGRAM
Топ-ресурс для изучения алгоритмов программирования. Пошагово объясняет их, с кодом и в визуальном, наглядном виде.
Более 70 алгоритмов на JavaScript, Java и C++:
http://algorithm-visualizer.org
👉 Гайды по JavaScript | дать буст
Более 70 алгоритмов на JavaScript, Java и C++:
http://algorithm-visualizer.org
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
TypeScript: оператор keyof + отображаемые типы — генерируем типобезопасную логику валидации
Смотри в деле
👉 Гайды по JavaScript | дать буст
Смотри в деле
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥2
This media is not supported in your browser
VIEW IN TELEGRAM
Как круто выглядит этот компонент заполнения информации о кредитной карте 💳
https://codepen.io/JavaScriptJunkie/pen/YzzNGeR
👉 Гайды по JavaScript | дать буст
https://codepen.io/JavaScriptJunkie/pen/YzzNGeR
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
👍1
81. Генератор PDF из формы
82. Конструктор резюме / CV
83. Генератор QR-кодов
84. Сканер штрих-кодов (через веб-камеру)
85. Редактор изображений (обрезка, поворот, фильтры)
86. Генератор цветовых палитр
87. Генератор CSS (например, box-shadow, градиенты)
88. Markdown превью
89. Форматтер / валидатор JSON
90. Конвертер CSV в JSON
91. Конвертер единиц (длина, вес, объем)
92. Таймер Помодоро
93. Таймер обратного отсчета для событий
94. Будильник
95. Таймер фокусировки с перерывами
96. Трекер бюджета с графиками
97. Генератор счетов
98. Загрузка и предпросмотр файлов
99. Drag & drop загрузчик файлов
100. Инструмент копирования/вставки в буфер обмена
Визуализация данных и графики
101. Линейный график для отображения трендов
102. Столбчатая диаграмма для сравнения
103. Круговая / пончиковая диаграмма
104. График с данными в реальном времени
105. Геокарта с наложением данных
106. Тепловая карта
107. Сетевой граф
108. Дерево / иерархическая диаграмма
109. Радиальная диаграмма для метрик
110. График цен на акции
Игры / интерактивные проекты
111. Крестики-нолики
112. Змейка
113. Сапер
114. Игра на запоминание (Memory)
115. Блэкджек или покер
116. Виселица
117. Генератор / решатель Судоку
118. Игра 2048
119. «Ударь крота»
120. Платформер (2D)
121. Космический шутер
122. Башенная защита (Tower Defense)
123. Пазл-слайдер (15-пазл)
124. Генератор + решатель лабиринта
125. Понг
126. Клон Flappy Bird
127. Клон Breakout
128. Игра Simon (запоминание паттернов)
129. Тест скорости печати
130. Тест реакции
Мобильные / PWA / оффлайн
131. PWA погоды
132. Оффлайн список дел
133. PWA заметок с синхронизацией
134. Оффлайн новостной ридер
135. Трекер бюджета с оффлайн хранением
136. PWA список покупок
137. PWA для просмотра фильмов
138. PWA трекер привычек
139. PWA фитнес-программа
140. PWA для изучения языков (карточки)
Бизнес / нишевые проекты
141. Система бронирования ресторанов
142. Фронтенд доставки еды
143. UI/UX бронирования отелей
144. Карта + бронирование для ride-sharing
145. Маркетплейс недвижимости
146. Сайт объявлений
147. Рынок аренды (авто, инструменты)
148. Платформа для репетиторов
149. Платформа фриланс-заданий
150. Аукционный сайт
Разное / эксперименты
151. Распознавание речи
152. Чат с AI / интеграция с GPT-подобным API
153. Распознавание лиц
154. Сканер QR / штрих-кодов через камеру
155. Управление жестами
156. Основы AR / VR в Web (WebXR)
157. Рисование через WebGL или Canvas
158. Визуализатор музыки
159. Синтезатор / драм-машина
160. Аудио рекордер + редактор
Полированные портфолио / капстоун проекты
161. Полный e-commerce сайт (фронт + бэк)
162. Многоарендная панель (multi-tenant)
163. MVP SaaS продукта
164. Многопользовательский чат + обмен файлами
165. LMS (Learning Management System)
166. Блог-платформа с темами и редактором
167. Соцсеть с лентой в реальном времени
168. UI видеостриминга (загрузка, воспроизведение)
169. Маркетплейс (физические или цифровые товары)
170. Приложение бронирования / расписания с оплатой
Интеграции / DevOps / API / тестирование
171. Интеграция OAuth2 (Google, GitHub)
172. Push уведомления
173. Пример использования Webhooks
174. Подписки на платежи
175. Панель аналитики (графики + метрики)
176. Автотестирование фронтенда (Jest, Mocha)
177. Настройка CI/CD для фронтенда
178. Деплой через Docker + облачный хостинг
179. Пример микро-фронтендов
180. Серверлес функции + фронтенд
Дополнительные идеи
181. Аггрегатор блогов
182. RSS ридер
183. Трекер цен (например, отслеживание изменения цен товаров)
184. Сервис уведомлений (например, при изменении чего-то)
185. Социальный вход + настройки профиля
186. Поддержка мультиязычности / i18n
187. Демонстрация доступности (клавиатурная навигация, экранный ридер)
188. Переключение тем с кастомными темами
189. Оптимизация производительности (lazy load изображений и т.д.)
190. SEO-дружелюбное JS приложение
Современные технологии / бонус
191. Библиотека веб-компонентов
192. Создание UI компонента / дизайн-система
193. Библиотека микро-анимаций
194. SSR (Next.js) фронтенд проект
195. Генератор статических сайтов на JS
196. JAMstack сайт с headless CMS
197. GraphQL API + фронтенд
198. Совместная работа в реальном времени (документы, доски)
199. Взаимодействие с блокчейном (Web3 basics)
200. Машинное обучение на JS (TensorFlow.js / Brain.js demo)
Please open Telegram to view this post
VIEW IN TELEGRAM
200 идей проектов на JavaScript, которые можно создать, чтобы набраться опыта, заполнить портфолио и начать зарабатывать как разработчик.
(Сгруппированы по сложности / сложности, чтобы помочь вам постепенно развиваться.)
(Сгруппированы по сложности / сложности, чтобы помочь вам постепенно развиваться.)
Базовый / Начальный уровень
1. Веб-страница Hello World с JS alert
2. Страница, показывающая текущую дату и время
3. Обратный отсчет
4. Цифровые часы
5. Генератор случайных цитат
6. Выбор цвета
7. Калькулятор чаевых
8. Простой список дел (добавление, удаление задач)
9. Игра угадай число
10. Камень, ножницы, бумага
11. Конвертер валют (статичный курс)
12. Конвертер температуры (Цельсий <-> Фаренгейт)
13. Калькулятор ИМТ
14. Калькулятор возраста (ввод даты рождения, показать возраст)
15. Проверка на палиндром
16. Простой калькулятор (сложение, вычитание, умножение, деление)
17. Проверка надежности пароля
18. Mad libs (заполнение пропусков в истории)
19. Валидация формы (email, обязательные поля)
20. Случайный цвет фона при нажатии кнопки
Манипуляции с DOM / UI проекты
21. Карусель изображений
22. Модальное окно
23. Компонент вкладок
24. Аккордеон меню
25. Адаптивное навигационное меню (мобильное + десктоп)
26. Кнопка прокрутки вверх
27. Прилипший заголовок при скролле
28. Бесконечная прокрутка (подгрузка контента при скролле)
29. Компонент подсказки (tooltip)
30. Переключение светлой / темной темы
31. Галерея с подсказками (при наведении на изображение показывается описание)
32. Анимация появления при скролле
33. Прогресс-бар (например, процент прокрутки страницы)
34. Список с перетаскиванием
35. Сортировка колонок таблицы
36. Фильтр / поиск по списку элементов
37. Лупа / увеличение изображения
38. Таймер обратного отсчета с прогресс-баром
39. Эффект параллакса при прокрутке
40. Фотогалерея с лайтбоксом
Проекты среднего уровня (API / данные / CRUD / Local Storage)
41. Приложение погоды (используя API погоды)
42. Новости (используя новостной API)
43. Генератор случайных профилей пользователей
44. Поиск фильмов (например, через OMDB)
45. Поиск рецептов (через API рецептов)
46. Поиск пользователей GitHub / просмотр профиля
47. Поиск изображений (например, Unsplash API)
48. Браузер данных по Покемонам
49. Страница информации о запусках SpaceX
50. Приложение цитат (через API цитат)
51. Чат-бот с простыми ответами
52. Трекер расходов (с сохранением в local storage)
53. Приложение заметок (CRUD + local storage)
54. Трекер привычек
55. Менеджер закладок
56. Список дел с категориями / виджетами
57. Приложение для покупок
58. Менеджер контактов
59. Викторина (множественный выбор)
60. Приложение с карточками для обучения
Продвинутые / Full Stack или интеграционные проекты
61. Система аутентификации (вход / регистрация)
62. Панель управления (графики, статистика)
63. Каталог продуктов + корзина для e-commerce
64. Интеграция платежного шлюза (sandbox)
65. CMS блог (создание, редактирование, удаление постов)
66. Чат в реальном времени (websockets)
67. Форум / доска сообщений
68. Социальная лента (посты, лайки, комментарии)
69. Многопользовательская доска для рисования (canvas + socket)
70. Совместный редактор документов
71. Инструмент управления проектами (канбан-доска)
72. Сайт с объявлениями недвижимости
73. Платформа вакансий
74. Система бронирования событий / билетов
75. Календарь с планировщиком событий
76. Приложение планировщика путешествий
77. Приложение для управления задачами с напоминаниями
78. Трекер фитнеса с графиками прогресса
79. Музыкальный плеер с плейлистами
80. Подкаст-плеер
Утилиты и продуктивность
В Nuxt можно использовать
Реализация устроена довольно изящно: мы создаём Promise как обычно, затем через Object.assign добавляем к нему дополнительные свойства, совпадающие по форме с ожидаемым результатом, и возвращаем этот «обогащённый» объект.
Всё это имеет смысл только в связке с реактивностью. В синхронном режиме доступно дефолтное значение, а когда Promise завершается, данные обновляются реактивно.
👉 Гайды по JavaScript | дать буст
composables для получения данных как синхронно, так и асинхронно, что даёт большую гибкость. Реализация устроена довольно изящно: мы создаём Promise как обычно, затем через Object.assign добавляем к нему дополнительные свойства, совпадающие по форме с ожидаемым результатом, и возвращаем этот «обогащённый» объект.
Всё это имеет смысл только в связке с реактивностью. В синхронном режиме доступно дефолтное значение, а когда Promise завершается, данные обновляются реактивно.
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
TypeScript: процессор событий с дженериками и исчерпывающим pattern matching
Ноль ошибок в рантайме, максимум type safety
Смотрите, как это работает
👉 Гайды по JavaScript | дать буст
Ноль ошибок в рантайме, максимум type safety
Смотрите, как это работает
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
В React скоро появится новый компонент — <Activity>. С его помощью можно будет скрывать UI, сохраняя при этом внутреннее состояние. Фича войдёт в следующий релиз, и выглядит она действительно очень полезной.
👉 Гайды по JavaScript | дать буст
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥2
Please open Telegram to view this post
VIEW IN TELEGRAM
Совет по React: если у вас есть неконтролируемый input, и вы хотите изменить его значение извне, не превращая его в контролируемый (через useState), можно выставить key равным зафиксированному значению
Таким образом React будет пересоздавать элемент при изменении key, и defaultValue применится заново.
Если же вам ближе контролируемые инпуты — это тоже отличный вариант
👉 Гайды по JavaScript | дать буст
<input
defaultValue={…}
onBlur={…}
key={value}
/>
Таким образом React будет пересоздавать элемент при изменении key, и defaultValue применится заново.
Если же вам ближе контролируемые инпуты — это тоже отличный вариант
Please open Telegram to view this post
VIEW IN TELEGRAM
❤4