Что будет, если взять известную игру сапëр и изменить игровой процесс на обратный?
Автор статьи задался таким вопросом и создал необычный пет-проект с игрой «Минёр». В отличие «Сапёра» здесь игроку доступна сразу вся информация об игровом поле.
Не баг, а фича, получается. А ещё отличный проект, чтобы потренироваться в разработке на JavaScript.
В статье подробнее о процессе разработке: https://habr.com/ru/articles/408169/
Исходники есть на гитхабе: github.com/schibir/mineslitter
А здесь небольшая демка, чтобы поиграться: schibir.github.io/mineslitter
#gamedev #javascript #веб
Автор статьи задался таким вопросом и создал необычный пет-проект с игрой «Минёр». В отличие «Сапёра» здесь игроку доступна сразу вся информация об игровом поле.
Не баг, а фича, получается. А ещё отличный проект, чтобы потренироваться в разработке на JavaScript.
В статье подробнее о процессе разработке: https://habr.com/ru/articles/408169/
Исходники есть на гитхабе: github.com/schibir/mineslitter
А здесь небольшая демка, чтобы поиграться: schibir.github.io/mineslitter
#gamedev #javascript #веб
Forwarded from Типичный программист
Код, написанный на JavaScript, обрабатывается движком. Но как именно это происходит «под капотом» и какие процессы в этом задействованы?
В общих чертах и с очень наглядными анимациями
А если решили погрузиться серьёзно, вот огромный цикл статей, которые раскроют внутреннее устройство Java Script лучше любой книги:
1. Обзор движка, механизмов времени выполнения, стека вызовов
2. О внутреннем устройстве V8 и оптимизации кода
3. Управление памятью, четыре вида утечек памяти и борьба с ними
4. Цикл событий, асинхронность и пять способов улучшения кода с помощью async/await
5. WebSocket и HTTP/2+SSE — что выбрать
6. Особенности и сфера применения WebAssembly
7. Веб-воркеры и пять сценариев их использования
8. Сервис-воркеры
9. Веб push-уведомления
10. Отслеживание изменений в DOM с помощью MutationObserver
11. Движки рендеринга веб-страниц и советы по оптимизации их производительности
12. Сетевая подсистема браузеров, оптимизация её производительности и безопасности
13. Анимация средствами CSS и JavaScript
14. Абстрактные синтаксические деревья, парсинг и его оптимизация
15. Классы и наследование, транспиляция в Babel и TypeScript
16. Системы хранения данных
17. Технология Shadow DOM и веб-компоненты
18. WebRTC и механизмы P2P-коммуникаций
19. Пользовательские элементы
20. Паттерны и анти-паттерны
21. JavaScript ES8 и переход на async/await
#javascript #веб
В общих чертах и с очень наглядными анимациями
А если решили погрузиться серьёзно, вот огромный цикл статей, которые раскроют внутреннее устройство Java Script лучше любой книги:
1. Обзор движка, механизмов времени выполнения, стека вызовов
2. О внутреннем устройстве V8 и оптимизации кода
3. Управление памятью, четыре вида утечек памяти и борьба с ними
4. Цикл событий, асинхронность и пять способов улучшения кода с помощью async/await
5. WebSocket и HTTP/2+SSE — что выбрать
6. Особенности и сфера применения WebAssembly
7. Веб-воркеры и пять сценариев их использования
8. Сервис-воркеры
9. Веб push-уведомления
10. Отслеживание изменений в DOM с помощью MutationObserver
11. Движки рендеринга веб-страниц и советы по оптимизации их производительности
12. Сетевая подсистема браузеров, оптимизация её производительности и безопасности
13. Анимация средствами CSS и JavaScript
14. Абстрактные синтаксические деревья, парсинг и его оптимизация
15. Классы и наследование, транспиляция в Babel и TypeScript
16. Системы хранения данных
17. Технология Shadow DOM и веб-компоненты
18. WebRTC и механизмы P2P-коммуникаций
19. Пользовательские элементы
20. Паттерны и анти-паттерны
21. JavaScript ES8 и переход на async/await
#javascript #веб
Пользовательские директивы во Vue
Во Vue директивы представляют собой специальные html-атрибуты, позволяющие манипулировать DOM-элементами. Все директивы обычно начинаются с буквы v, а затем через дефис идет название директивы.
Помимо встроенных директив (таких как
#js #vue #веб #фронтенд
Во Vue директивы представляют собой специальные html-атрибуты, позволяющие манипулировать DOM-элементами. Все директивы обычно начинаются с буквы v, а затем через дефис идет название директивы.
Помимо встроенных директив (таких как
v-model и v-show), Vue также позволяет регистрировать ваши собственные пользовательские директивы. Подробнее о том, как можно создать свои директивы, вы сможете узнать в этом подробном уроке.#js #vue #веб #фронтенд
YouTube
Vue. Пользовательские директивы (custom directives)
#javascript #typescript #vuejs
code: https://github.com/easydevgit/vue-custom-directives/blob/master/src/directives/tooltip.ts
code: https://github.com/easydevgit/vue-custom-directives/blob/master/src/directives/tooltip.ts
Интерактивный курс по JavaScript
На этом ресурсе вы не только найдёте короткие, но ёмкие обучающие материалы по JS, но и сразу сможете попрактиковаться на специальном автоматизированном тренажёре. Каждая глава и каждая тема — небольшая статья с подробным объяснением для начинающих и с примерами кода.
Такой подход к обучению — отличный вариант для тех, кто ещё не сталкивался с программированием и хочет натренировать руки.
@prog_point #javascript
На этом ресурсе вы не только найдёте короткие, но ёмкие обучающие материалы по JS, но и сразу сможете попрактиковаться на специальном автоматизированном тренажёре. Каждая глава и каждая тема — небольшая статья с подробным объяснением для начинающих и с примерами кода.
Такой подход к обучению — отличный вариант для тех, кто ещё не сталкивался с программированием и хочет натренировать руки.
@prog_point #javascript
Челлендж-тренажёр нативного JavaScript
Если вы уже прошли какие-то курсы по JS, но вам не хватает мотивации попрактиковаться, то держите решение.
Это 30-дневный челледж, в котором вам предстоит ежедневно разрабатывать небольшие проекты на чистом JS. Вместе с заданием идёт и видео, где показывается реализация задания. Так что если зайдёте в тупик — не беда. Среди заданий: простые игры, звуковые синтезаторы, визуальные эффекты и многое другое.
@prog_point #javascript #web
Если вы уже прошли какие-то курсы по JS, но вам не хватает мотивации попрактиковаться, то держите решение.
Это 30-дневный челледж, в котором вам предстоит ежедневно разрабатывать небольшие проекты на чистом JS. Вместе с заданием идёт и видео, где показывается реализация задания. Так что если зайдёте в тупик — не беда. Среди заданий: простые игры, звуковые синтезаторы, визуальные эффекты и многое другое.
@prog_point #javascript #web
ООП в JavaScript на примерах с Фредди Меркьюри
ООП в JavaScript можно представить как конструктор LEGO. Вы создаете кучу кубиков (объектов), каждый со своими специальными функциями и свойствами. А знание ООП помогает вам строить более крепкие и крутые конструкции, используя эти кубики как основные блоки.
Держите простую статью, которая наконец поможет разобраться в основных концепциях ООП на примере с Фредди Меркьюри. Всё с подробными объяснениями и примерами кода.
@prog_point #oop #javascript #теория
ООП в JavaScript можно представить как конструктор LEGO. Вы создаете кучу кубиков (объектов), каждый со своими специальными функциями и свойствами. А знание ООП помогает вам строить более крепкие и крутые конструкции, используя эти кубики как основные блоки.
Держите простую статью, которая наконец поможет разобраться в основных концепциях ООП на примере с Фредди Меркьюри. Всё с подробными объяснениями и примерами кода.
@prog_point #oop #javascript #теория
NPM для новичков — что такое и зачем это знать?
NPM (Node Package Manager) — это инструмент для управления пакетами в JavaScript. Он помогает разработчикам легко находить, устанавливать и обновлять библиотеки и инструменты, необходимые для создания приложений.
Представьте себе большой магазин, где есть много полезных модулей, которые можно добавить в ваш проект, чтобы не писать весь код с нуля — это и есть NPM. Он нужен всем, кто работает с JavaScript, особенно если используется платформа Node.js.
В этом ролике автор познакомит вас с NPM, расскажет про его установку, базовые команды и структуру. Этого уже хватит, чтобы начать пользоваться инструментом.
@prog_point #web #javascript
NPM (Node Package Manager) — это инструмент для управления пакетами в JavaScript. Он помогает разработчикам легко находить, устанавливать и обновлять библиотеки и инструменты, необходимые для создания приложений.
Представьте себе большой магазин, где есть много полезных модулей, которые можно добавить в ваш проект, чтобы не писать весь код с нуля — это и есть NPM. Он нужен всем, кто работает с JavaScript, особенно если используется платформа Node.js.
В этом ролике автор познакомит вас с NPM, расскажет про его установку, базовые команды и структуру. Этого уже хватит, чтобы начать пользоваться инструментом.
@prog_point #web #javascript
YouTube
Полный гайд по NPM для новичков | Как установить, обновить удалить пакеты - настройка NPM для работы
Шпаргалка по командам NPM:
https://boosty.to/codequest/posts/e434518f-a073-46aa-80d0-b4b8ae9a113a?share=post_link
Подписывайся на альтернативные каналы:
— https://vk.com/codequest
— https://t.iss.one/codequest
Это полный гайд для начинающих о том, как использовать…
https://boosty.to/codequest/posts/e434518f-a073-46aa-80d0-b4b8ae9a113a?share=post_link
Подписывайся на альтернативные каналы:
— https://vk.com/codequest
— https://t.iss.one/codequest
Это полный гайд для начинающих о том, как использовать…
Быстрый курс по Node.js для начинающих
Первая отрасль, приходящая на ум, когда говорим о JavaScript — это фронтенд. Но с таким же успехом его можно использовать и на бэкенде, т.е. писать серверную часть. Для этого понадобится специальный инструмент, о котором уже могли слышать — Node.js.
Он отлично справляется с обработкой множества запросов одновременно, что делает его идеальным для создания современных веб-приложений. К тому же, с его помощью можно легко подключать различные библиотеки и модули, что делает разработку проекта ещё эффективней.
Держите ролик, в котором автор за час рассказывают всю базу по node.js. После неё вы сможете создавать свои первые сервера и переходить к более сложным темам:
https://youtu.be/3aGSqasVPsI?si=qBs0ERgcGd_YWy8O
@prog_point #web #backend #nodejs #javascript
Первая отрасль, приходящая на ум, когда говорим о JavaScript — это фронтенд. Но с таким же успехом его можно использовать и на бэкенде, т.е. писать серверную часть. Для этого понадобится специальный инструмент, о котором уже могли слышать — Node.js.
Он отлично справляется с обработкой множества запросов одновременно, что делает его идеальным для создания современных веб-приложений. К тому же, с его помощью можно легко подключать различные библиотеки и модули, что делает разработку проекта ещё эффективней.
Держите ролик, в котором автор за час рассказывают всю базу по node.js. После неё вы сможете создавать свои первые сервера и переходить к более сложным темам:
https://youtu.be/3aGSqasVPsI?si=qBs0ERgcGd_YWy8O
@prog_point #web #backend #nodejs #javascript
YouTube
Node JS – Быстрый Курс за 1 час
Telegram: https://t.iss.one/js_by_vladilen
Instagram: https://instagram.com/vladilen.minin
Node JS За 1 час. Вся теория включена в один ролик!
Исходный код:
https://github.com/vladilenm/node-youtube-cc
NodeJS - Быстрый курс за 1 час. Стандартные модули, создание…
Instagram: https://instagram.com/vladilen.minin
Node JS За 1 час. Вся теория включена в один ролик!
Исходный код:
https://github.com/vladilenm/node-youtube-cc
NodeJS - Быстрый курс за 1 час. Стандартные модули, создание…
Большой вводный курс по Vue.js
Vue.js — одна из самых популярных JS-библиотек для создания пользовательских интерфейсов.
Забирайте на вечерний просмотр отличный вводный курс, где в одном видео разберут и познакомят со всеми аспектами этой библиотеки и расскажут, как с ней работать:
https://youtu.be/6wYu4_6hcDY?si=8NtjdhNADwnzkYzL
@prog_point #web #frontend #vue #javascript
Vue.js — одна из самых популярных JS-библиотек для создания пользовательских интерфейсов.
Забирайте на вечерний просмотр отличный вводный курс, где в одном видео разберут и познакомят со всеми аспектами этой библиотеки и расскажут, как с ней работать:
https://youtu.be/6wYu4_6hcDY?si=8NtjdhNADwnzkYzL
@prog_point #web #frontend #vue #javascript
YouTube
Vue.js. Полный курс
#YauhenK #webDev #vue #vuejs
Всех приветствую в курсе «Vue.js».
В данном видео-курсе мы с вами рассмотрим работу с JavaScript фрэймовком Vue.js 2-й версии. А так же разберём все необходимые темы и понятия, которые нужны для того что бы начать разрабатывать…
Всех приветствую в курсе «Vue.js».
В данном видео-курсе мы с вами рассмотрим работу с JavaScript фрэймовком Vue.js 2-й версии. А так же разберём все необходимые темы и понятия, которые нужны для того что бы начать разрабатывать…
Детальный справочник для веб-разработчиков от А до Я
Если вы искали ресурс, где в одном месте собрано всё, что нужно знать по фронтенд-разработке, то рекомендуем вам Дока. Здесь собрана информация как по основам вёрстки, так и по фреймворкам, JS и TS. Абсолютно бесплатно!
https://doka.guide/
#шпаргалка #веб #javascript #html #css
Если вы искали ресурс, где в одном месте собрано всё, что нужно знать по фронтенд-разработке, то рекомендуем вам Дока. Здесь собрана информация как по основам вёрстки, так и по фреймворкам, JS и TS. Абсолютно бесплатно!
https://doka.guide/
#шпаргалка #веб #javascript #html #css
Делаем просто калькулятор на JavaScript за 25 минут
Это видео позволит вам получить начальные навыки вёрстки и программирования на JS, а также создать свой первый законченный проект для портфолио всего за полчаса. Смотрим и повторяем:
https://youtu.be/WA3EFIB8-wU
#видео #javascript
Это видео позволит вам получить начальные навыки вёрстки и программирования на JS, а также создать свой первый законченный проект для портфолио всего за полчаса. Смотрим и повторяем:
https://youtu.be/WA3EFIB8-wU
#видео #javascript
Media is too big
VIEW IN TELEGRAM
ASMR программирование: делаем приложение для погоды на JavaScript
Это необычный формат видео туториала. Здесь не будет подробных объяснений, индийского английского и прочего.
Вместо этого вы можете под звуки хорошей механической клавиатуры наблюдать за пошаговым созданием приложения без лишних слов. Или даже повторят за автором.
Так как с YouTube сейчас могут быть проблемы, мы загрузили видео сюда. Если нужен оригинал, то он доступен по ссылке: https://youtu.be/iILFBGm_I9M
#видео #javascript
Это необычный формат видео туториала. Здесь не будет подробных объяснений, индийского английского и прочего.
Вместо этого вы можете под звуки хорошей механической клавиатуры наблюдать за пошаговым созданием приложения без лишних слов. Или даже повторят за автором.
Так как с YouTube сейчас могут быть проблемы, мы загрузили видео сюда. Если нужен оригинал, то он доступен по ссылке: https://youtu.be/iILFBGm_I9M
#видео #javascript
8 советов работы с JavaScript, которые повысят ценность вашего кода
В разных компаниях могут быть разные правила оформления кода, работы с ним. В начале вашего пути в качестве программиста это совсем неважно. Другое дело, что есть моменты, которые следует соблюдать хотя бы для того, чтобы вы могли быстрее осваивать новый язык, лучше разбираться в написанном и проще возвращаться к ранее созданным проектам.
Об этих моментах в статье:
https://nuancesprog.ru/p/15712/
#советы #javascript
В разных компаниях могут быть разные правила оформления кода, работы с ним. В начале вашего пути в качестве программиста это совсем неважно. Другое дело, что есть моменты, которые следует соблюдать хотя бы для того, чтобы вы могли быстрее осваивать новый язык, лучше разбираться в написанном и проще возвращаться к ранее созданным проектам.
Об этих моментах в статье:
https://nuancesprog.ru/p/15712/
#советы #javascript
8 неэффективных практик JavaScript, которых лучше избегать
Самая большая ответственность каждого программиста заключается в том, чтобы написанный им код был легко тестируемым и сохранял работоспособность с течением времени.
Чтобы этого добиться, стоит следовать определённым правил и избегать заведомо плохих практик. О восьми из них можно узнать в этой статье.
#javascript #веб
Самая большая ответственность каждого программиста заключается в том, чтобы написанный им код был легко тестируемым и сохранял работоспособность с течением времени.
Чтобы этого добиться, стоит следовать определённым правил и избегать заведомо плохих практик. О восьми из них можно узнать в этой статье.
#javascript #веб
Как создать настольное приложение с помощью Electron. Руководство для начинающих
Эта статья в первую очередь будет полезна веб-разработчикам. Electron позволяет превращать проекты, написанные с помощью HTML, CSS и JavaScript в полноценные приложения для разных платформ. Многие такие приложения вы знаете: Skype, Discord, ваш любимый VS Code и так далее.
Как создать такое же приложение, вы можете узнать в этом руководстве.
#javascript #electron #руководство
Эта статья в первую очередь будет полезна веб-разработчикам. Electron позволяет превращать проекты, написанные с помощью HTML, CSS и JavaScript в полноценные приложения для разных платформ. Многие такие приложения вы знаете: Skype, Discord, ваш любимый VS Code и так далее.
Как создать такое же приложение, вы можете узнать в этом руководстве.
#javascript #electron #руководство
Object.freeze и Object.seal в JavaScript
При работе с объектами важно сохранять полный контроль над ними, ограничивая от ненужного и допуская необходимое. В JavaScript для этого есть два метода:
Подробнее можно узнать в этой статье. После неё вы будете лучше понимать, где это можно использовать, а главное, зачем.
#javascript
При работе с объектами важно сохранять полный контроль над ними, ограничивая от ненужного и допуская необходимое. В JavaScript для этого есть два метода:
Object.freeze предотвращает любые изменения объекта, а Object.seal позволяет вам запечатать объект, что предотвращает добавление или удаление свойств, но не мешает изменению значений существующих свойств.Подробнее можно узнать в этой статье. После неё вы будете лучше понимать, где это можно использовать, а главное, зачем.
#javascript
Как создать приложение Todo на React
Полезный туториал для фронтенд-разработчиков, в котором вы с нуля создадите приложение для ведения дел. Вы научитесь использовать хуки, а также продвинутые функции JavaScript.
Стартуем здесь.
#фронтенд #javascript #react
Полезный туториал для фронтенд-разработчиков, в котором вы с нуля создадите приложение для ведения дел. Вы научитесь использовать хуки, а также продвинутые функции JavaScript.
Стартуем здесь.
#фронтенд #javascript #react
Media is too big
VIEW IN TELEGRAM
Основы программирования на JS для новичков
Небольшой, но полезный курс для тех, кто только начинает вкатываться во фронтенд и JavaScript.
Чтобы вам было проще ориентироваться, мы добавили тайм-коды:
00:00 - зачем и кому нужно это видео?
00:57 - что общего у программистов и поваров?
02:26 - понятие "Алгоритм"
03:46 - понятие "Блок-схема"
05:43 - понятие "Программа"
09:33 - ПРАКТИКА, задание на подумать
12:07 - разбор Мышления Программиста
16:35 - основные элементы мышления программиста
21:57 - Как развить мышление программиста?
26:41 - Создадим блок-схему калькулятора
37:00 - ПРАКТИКА с кодом!
49:10 - пишем калькулятор
1:00:42 - что такое и как работают ФУНКЦИИ?
1:09:00 - Домашнее задание!
1:09:45 - моя реализация домашки
1:15:25 - АНОНС следующего курса по JS!
Нужны ли вам вообще тайм-коды к таким постам? Поставьте ❤, если оставляем формат и 😐, если только мешает.
#курс #javascript
Небольшой, но полезный курс для тех, кто только начинает вкатываться во фронтенд и JavaScript.
Чтобы вам было проще ориентироваться, мы добавили тайм-коды:
00:00 - зачем и кому нужно это видео?
00:57 - что общего у программистов и поваров?
02:26 - понятие "Алгоритм"
03:46 - понятие "Блок-схема"
05:43 - понятие "Программа"
09:33 - ПРАКТИКА, задание на подумать
12:07 - разбор Мышления Программиста
16:35 - основные элементы мышления программиста
21:57 - Как развить мышление программиста?
26:41 - Создадим блок-схему калькулятора
37:00 - ПРАКТИКА с кодом!
49:10 - пишем калькулятор
1:00:42 - что такое и как работают ФУНКЦИИ?
1:09:00 - Домашнее задание!
1:09:45 - моя реализация домашки
1:15:25 - АНОНС следующего курса по JS!
Нужны ли вам вообще тайм-коды к таким постам? Поставьте ❤, если оставляем формат и 😐, если только мешает.
#курс #javascript
Делаем форму обратного звонка: лендинг, Go и SMS-уведомления
Классный туториал от Екатерины Саяпиной для вашего портфолио. Форма обратного звонка довольно часто используется на сайтах, поэтому умение делать её крайне полезно и может быть отмечено при трудоустройстве.
В этом руководстве вы научитесь не просто верстать блок обратной связи, но и делать бэкенд-часть на Go, работать с Callback и SMS API. Отдельный плюс — для этого вам не нужны сложные фреймворки — только HTML, Go и чуть-чуть JavaScript.
Старт по ссылке: https://habr.com/ru/companies/ru_mts/articles/856232/
#туториал #golang #javascript #html
Классный туториал от Екатерины Саяпиной для вашего портфолио. Форма обратного звонка довольно часто используется на сайтах, поэтому умение делать её крайне полезно и может быть отмечено при трудоустройстве.
В этом руководстве вы научитесь не просто верстать блок обратной связи, но и делать бэкенд-часть на Go, работать с Callback и SMS API. Отдельный плюс — для этого вам не нужны сложные фреймворки — только HTML, Go и чуть-чуть JavaScript.
Старт по ссылке: https://habr.com/ru/companies/ru_mts/articles/856232/
#туториал #golang #javascript #html
Media is too big
VIEW IN TELEGRAM
Платформер в жанре rogue-like размеров в 13KB
Продолжаем тему ультралёгких игр. На этот раз возьмём игру потяжелее (если так можно сказать про 13KB), но зато гораздо сложнее, чем змейка.
Space Huggers — это проект, созданный в рамках популярного соревнования JS13K Games, где люди соревнуются в создании игр, чей размер не превышает 13 килобайт. Эта игра представляет собой платформер, объединяющий сразу два жанра — roguelike и run and gun. В этой статье рассказана история создания игры, движка для неё и который стал самостоятельной библиотекой.
Рекомендуем к прочтению, если хотите вдохновиться или просто интересно провести время.
#gamdev #javascript
Продолжаем тему ультралёгких игр. На этот раз возьмём игру потяжелее (если так можно сказать про 13KB), но зато гораздо сложнее, чем змейка.
Space Huggers — это проект, созданный в рамках популярного соревнования JS13K Games, где люди соревнуются в создании игр, чей размер не превышает 13 килобайт. Эта игра представляет собой платформер, объединяющий сразу два жанра — roguelike и run and gun. В этой статье рассказана история создания игры, движка для неё и который стал самостоятельной библиотекой.
Рекомендуем к прочтению, если хотите вдохновиться или просто интересно провести время.
#gamdev #javascript