➯ Создайте игру Flappy Bird.
http://youtube.com/watch?v=Ltg1fl4Obgg
➯ Игра "Хэнгмэн"
http://youtube.com/watch?v=hSSdc8vKP1I
➯ Слайдер изображений -
http://youtube.com/watch?v=PsNaoDhzQm0
➯ Переключение светлой/темной темы -
http://youtube.com/watch?v=CUEJkJ9HDbY
➯ Цифровые часы
http://youtube.com/watch?v=lsoCv8Agg6E
➯ Создание музыкального проигрывателя -
http://youtube.com/watch?v=oscPp3KghS8
➯ Список дел
http://youtube.com/watch?v=kzHmtmCMUwk
➯ Тетрис
http://youtube.com/watch?v=ZTHjT3bm-64
➯ Создание 15 проектов на JavaScript -
http://youtube.com/watch?v=3PHXvlpOkf4
@javascriptv
Please open Telegram to view this post
VIEW IN TELEGRAM
👍17🔥5❤1
This media is not supported in your browser
VIEW IN TELEGRAM
🚀 Work scroll — изящная реализация прокрутки страницы. Реализована с помощью CSS и JavaScript
#анимация #css #javascript
https://codepen.io/Zuraavl/pen/jOQEmzM
@javascriptv
#анимация #css #javascript
https://codepen.io/Zuraavl/pen/jOQEmzM
@javascriptv
❤11👍3👎1🔥1
➽ javascripting - http://javascripting.com
➽ codepen - http://codepen.io
➽ codemyui - http://codemyui.com
➽ jsfiddle - http://jsfiddle.net
➽ jsbin - http://jsbin.com
➽ 30secondsofcode - http://30secondsofcode.org/js/p/1/
➽ freefrontend - http://freefrontend.com
➽ snippit - http://snippit.io
➽ codesandbox - http://codesandbox.io
➽ glitch - http://glitch.com
➽ tabnine - http://tabnine.com
➽ github - http://github.com
@javascriptv
Please open Telegram to view this post
VIEW IN TELEGRAM
👍12🔥2❤1
🔥 Дайджест полезных материалов из мира Javascript за неделю
Почитать:
— Как мы заинжектили кнопку на Behance
— Гайд по микрофронтендам на single-spa, или Как уже наконец-то уйти от монолита во фронтенде
— Как можно использовать .NET из Javascript (React) в 2023 году
— Простой пример ИИ для управления роботом. TensorFlow + Node Js
— 8 углубленных вопросов на собеседованиях на роль сеньора в JavaScript
— React vs Vue vs Angular. Часть 3
— Как выстроить удобные процессы в работе с монорепой
— 9 алгоритмов сортировки и поиска для JS, о которых вас спросят на собеседовании
— Особенности кодировки строк в Base64 в JavaScript
— Service Workers против медленного интернета: Кэширование и улучшение UX
— 15 Reasons to Learn JavaScript: Unlocking the Power of the Web
— Basic Pattern - Javascript Interview
— Stylized Castle WebGL demo
— why learn web (javascript) ML(machine learning) 2024
— Score High in AWS SAA-C03 Dumps with Premium Quality Dumps
— Latest Newsletter: Embarrassed to be Human (Issue #138)
— Announcing the First Ever State of React Survey
— Performing CRUD Operations in a React-Express-MongoDB Application
— Pollyfill - PROMISE. ALL
— React Search Using-Debounce
Посмотреть:
🌐 Did Josh Make A Mistake? (⏱ 06:58)
🌐 This Experimental Chrome Accessibility Feature Is A Game Changer (⏱ 00:48)
Хорошего дня!
@javascriptv
Почитать:
— Как мы заинжектили кнопку на Behance
— Гайд по микрофронтендам на single-spa, или Как уже наконец-то уйти от монолита во фронтенде
— Как можно использовать .NET из Javascript (React) в 2023 году
— Простой пример ИИ для управления роботом. TensorFlow + Node Js
— 8 углубленных вопросов на собеседованиях на роль сеньора в JavaScript
— React vs Vue vs Angular. Часть 3
— Как выстроить удобные процессы в работе с монорепой
— 9 алгоритмов сортировки и поиска для JS, о которых вас спросят на собеседовании
— Особенности кодировки строк в Base64 в JavaScript
— Service Workers против медленного интернета: Кэширование и улучшение UX
— 15 Reasons to Learn JavaScript: Unlocking the Power of the Web
— Basic Pattern - Javascript Interview
— Stylized Castle WebGL demo
— why learn web (javascript) ML(machine learning) 2024
— Score High in AWS SAA-C03 Dumps with Premium Quality Dumps
— Latest Newsletter: Embarrassed to be Human (Issue #138)
— Announcing the First Ever State of React Survey
— Performing CRUD Operations in a React-Express-MongoDB Application
— Pollyfill - PROMISE. ALL
— React Search Using-Debounce
Посмотреть:
🌐 Did Josh Make A Mistake? (⏱ 06:58)
🌐 This Experimental Chrome Accessibility Feature Is A Game Changer (⏱ 00:48)
Хорошего дня!
@javascriptv
👍6❤3🔥1
Реализуйте метод кастомные
.map(): [1,2,3].myMap((x) => x * x) // должно получиться [1,4,9].
Проверяется ваше понимание:
1⃣Prototypes
2⃣
this ключевое слово3⃣Functional концепции программирования
Если вы понимаете, как работает обычная
.map(), то реализовать собственную функциию несложно:1.
.map() - это метод массива2. Он возвращает новый массив (не модифицирует существующий)
3. В качестве параметра принимает функцию
4. Выполняет эту функцию над каждым элементом массива
5. Результат функции помещается в новый массив, а затем возвращается.
Легко, правда?
Базовая реализация в изображении.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍36❤4🔥3🤔2
This media is not supported in your browser
VIEW IN TELEGRAM
Представляем Material Web 1.0, библиотеку компонентов Google, которая работает везде, где есть рабочий HTML. 🌐
Подробный гайд о том, как начать работу с компонентами Material здесь → https://m3.material.io/develop/web
@javascriptv
Подробный гайд о том, как начать работу с компонентами Material здесь → https://m3.material.io/develop/web
@javascriptv
❤13👍10🔥4
This media is not supported in your browser
VIEW IN TELEGRAM
Создание отзывчивой регистрации с валидацией формы с помощью HTML, CSS и JavaScript 🚀
📌 Код
@javascriptv
📌 Код
@javascriptv
❤15👍8😁3
This media is not supported in your browser
VIEW IN TELEGRAM
#анимация #css #javascript
https://codepen.io/kristen17/pen/BaGOOMm
@javascriptv
Please open Telegram to view this post
VIEW IN TELEGRAM
👍15🤔3❤2🔥1
This media is not supported in your browser
VIEW IN TELEGRAM
Новый способ эффективного управления повторяющимися анимациями без лишних вызовов
animate() или utils.set(). Идеально подходит для эффектов отслеживания мыши!
Подробности об API ниже 👇
https://libraries.io/npm/animejs-beta
@javascriptv
Please open Telegram to view this post
VIEW IN TELEGRAM
👍18❤4🤯3🔥1👏1
⚡Легкий способ получать свежие обновлении и следить за трендами в разработке на вашем языке. Находите свой стек и подписывайтесь:
Машинное обучение: t.me/ai_machinelearning_big_data
Go: t.me/Golang_google
Базы данных: t.me/sqlhub
C++/ t.me/cpluspluc
Data Science: t.me/data_analysis_ml
Python: t.me/pythonl
Хакинг: t.me/linuxkalii
Devops: t.me/devOPSitsec
C#: t.me/csharp_ci
Java: t.me/javatg
Linux: t.me/+A8jY79rcyKJlYWY6
Мобильная разработка: t.me/mobdevelop
Docker: t.me/+0WdB4uvOwCY0Mjdi
Rust: t.me/rust_code
Javascript: t.me/about_javascript
React: t.me/react_tg
PHP: t.me/phpshka
Android: t.me/android_its
Big Data: t.me/bigdatai
Тестирование:https://t.me/+F9jPLmMFqq1kNTMy
Аналитика данных: https://t.me/+mAXY9ppJwitkMDBi
😆ИТ-Мемы: t.me/memes_prog
🇬🇧Английский: t.me/english_forprogrammers
📕Ит-книги бесплатно: https://t.me/addlist/BkskQciUW_FhNjEy
ИИ: t.me/vistehno
Книги по искусственному интеллекту
💼 Папка Go разработчика: t.me/addlist/MUtJEeJSxeY2YTFi
Папка Python разработчика: t.me/addlist/eEPya-HF6mkxMGIy
Папка ML: https://t.me/addlist/2Ls-snqEeytkMDgy
Папка Java разработчика: https://t.me/addlist/ZM3J6oFNAnRlNWU6
Папка с вакансиями: t.me/addlist/_zyy_jQ_QUsyM2Vi
Машинное обучение: t.me/ai_machinelearning_big_data
Go: t.me/Golang_google
Базы данных: t.me/sqlhub
C++/ t.me/cpluspluc
Data Science: t.me/data_analysis_ml
Python: t.me/pythonl
Хакинг: t.me/linuxkalii
Devops: t.me/devOPSitsec
C#: t.me/csharp_ci
Java: t.me/javatg
Linux: t.me/+A8jY79rcyKJlYWY6
Мобильная разработка: t.me/mobdevelop
Docker: t.me/+0WdB4uvOwCY0Mjdi
Rust: t.me/rust_code
Javascript: t.me/about_javascript
React: t.me/react_tg
PHP: t.me/phpshka
Android: t.me/android_its
Big Data: t.me/bigdatai
Тестирование:https://t.me/+F9jPLmMFqq1kNTMy
Аналитика данных: https://t.me/+mAXY9ppJwitkMDBi
😆ИТ-Мемы: t.me/memes_prog
🇬🇧Английский: t.me/english_forprogrammers
📕Ит-книги бесплатно: https://t.me/addlist/BkskQciUW_FhNjEy
ИИ: t.me/vistehno
Книги по искусственному интеллекту
💼 Папка Go разработчика: t.me/addlist/MUtJEeJSxeY2YTFi
Папка Python разработчика: t.me/addlist/eEPya-HF6mkxMGIy
Папка ML: https://t.me/addlist/2Ls-snqEeytkMDgy
Папка Java разработчика: https://t.me/addlist/ZM3J6oFNAnRlNWU6
Папка с вакансиями: t.me/addlist/_zyy_jQ_QUsyM2Vi
👍7❤2
This media is not supported in your browser
VIEW IN TELEGRAM
https://codepen.io/mo-ro/pen/jObjGJm
#код #css #javascript
@javascriptv
Please open Telegram to view this post
VIEW IN TELEGRAM
👍14🔥5❤4👏1
This media is not supported in your browser
VIEW IN TELEGRAM
Вот мои любимые места в Интернете для вдохновения при работе над дизайном:
http://curated.design → каталог
http://land-book.com → веб-сайты
http://refero.design → исследования в области дизайна
http://mobbin.com → мобильные и веб-приложения
http://saaslandingpage.com → целевые страницы saas
@javascriptv
Please open Telegram to view this post
VIEW IN TELEGRAM
👍13🔥3❤1
Изучайте Javascript бесплатно!
❒ Полный курс JavaScript 2023 — от новичка до профессионала / машинный перевод яндекса
https://www.youtube.com/watch?v=JEgp6AHZu9A&pp=ygUYamF2YXNjcmlwdCDQutGD0YDRgSAyMDIz
❒ JavaScript для начинающих 2023. Полный курс за 6 часов. Уроки. Теория + практика
https://www.youtube.com/watch?v=maPRR_jjyOE&pp=ygUYamF2YXNjcmlwdCDQutGD0YDRgSAyMDIz
Полный курс ❒ JavaScript за 4 часа.
http://youtu.be/ZYhGSfSfzeI
❒ Изучите JavaScript за 8 часов.
http://youtu.be/hNYzV87wocY
❒ Курс Code academy JavaScript.
http://youtu.be/_ixUdG1FFtM
❒ Полный курс JavaScript для начинающих.
http://youtu.be/EfAl9bwzVZk
❒ JavaScript Dom Crash Course.
http://youtu.be/0ik6X4DJKCc
❒ JavaScript Oops Crash Course.
http://youtu.be/vDJpGenyHaA
❒ Продвинутые учебники JavaScript.
http://youtu.be/IljVmcDDrOg
❒ JavaScript All in One Tutorials.
http://youtu.be/9M4XKi25I2M
❒ Основы JavaScript 11 часов.
http://youtu.be/2Ji-clqUYnA
@javascriptv
❒ Полный курс JavaScript 2023 — от новичка до профессионала / машинный перевод яндекса
https://www.youtube.com/watch?v=JEgp6AHZu9A&pp=ygUYamF2YXNjcmlwdCDQutGD0YDRgSAyMDIz
❒ JavaScript для начинающих 2023. Полный курс за 6 часов. Уроки. Теория + практика
https://www.youtube.com/watch?v=maPRR_jjyOE&pp=ygUYamF2YXNjcmlwdCDQutGD0YDRgSAyMDIz
Полный курс ❒ JavaScript за 4 часа.
http://youtu.be/ZYhGSfSfzeI
❒ Изучите JavaScript за 8 часов.
http://youtu.be/hNYzV87wocY
❒ Курс Code academy JavaScript.
http://youtu.be/_ixUdG1FFtM
❒ Полный курс JavaScript для начинающих.
http://youtu.be/EfAl9bwzVZk
❒ JavaScript Dom Crash Course.
http://youtu.be/0ik6X4DJKCc
❒ JavaScript Oops Crash Course.
http://youtu.be/vDJpGenyHaA
❒ Продвинутые учебники JavaScript.
http://youtu.be/IljVmcDDrOg
❒ JavaScript All in One Tutorials.
http://youtu.be/9M4XKi25I2M
❒ Основы JavaScript 11 часов.
http://youtu.be/2Ji-clqUYnA
@javascriptv
❤13👍6🔥3
This media is not supported in your browser
VIEW IN TELEGRAM
#анимация #css #javascript
https://codepen.io/Juxtopposed/pen/jOKqXMJ
@javascriptv
Please open Telegram to view this post
VIEW IN TELEGRAM
👍16🔥4❤1
This media is not supported in your browser
VIEW IN TELEGRAM
Card Hover Interaction - красивые карточки с всплывающей информацией при наведении. Реализованы с помощью CSS.
https://codepen.io/dev_loop/pen/PoqLGvV
@javascriptv
https://codepen.io/dev_loop/pen/PoqLGvV
@javascriptv
👍16❤5🔥2👏2
🔥 Дайджест полезных материалов из мира Javascript за неделю
Почитать:
— Разбор задачи B (Больше, чем музыка) фронтенд — Yandex Cup 2023 квалификация
— Путешествие JavaScript-кода через движок V8
— Использование Content-Security-Policy вместе с React & Emotion
— Какие неочевидные темы вспомнить перед собеседованием на Frontend разработчика
— Что такое деление по модулю в JavaScript?
— Почему я не буду использовать Next.js
— Redux-toolkit и переиспользование кода
— Разработка браузерных игр с использованием Phaser3, React, Typescript
— Два frontend фреймворка. Два подхода
— Как не программист, вероятно, написал самую быструю библиотеку в мире
— Navigating the Web with is.browser and is.not_browser in JavaScript: Your Go-To Tools for Browser Checks
— Phấn Phủ Canmake
— [Discussion] What's the new big thing in web dev in the past 2 years?
— Delving into open source territory with Google: An Investigation
— Delving into open source territory with Google: PR #3
— Delving into open source territory with Google: PR #2
— Delving into open source territory with Google: PR #1
— Creating Chess Board SVGs, PNGs, and GIFs
— The 2000 line framework challenge: How to split state when using global stores with no extra dependencies beyond Modulo.js
— VueJS part 11: Sending data from component to parent
Посмотреть:
🌐 Why Signals Are Better Than React Hooks (⏱ 16:30)
🌐 Node Just Released This Amazing Feature! (⏱ 00:44)
🌐 This Is One Of My Favorite TypeScript Features (⏱ 05:22)
🌐 NEW TypeScript Simplified Course Announcement! (⏱ 00:49)
Хорошего дня!
@javascript
Почитать:
— Разбор задачи B (Больше, чем музыка) фронтенд — Yandex Cup 2023 квалификация
— Путешествие JavaScript-кода через движок V8
— Использование Content-Security-Policy вместе с React & Emotion
— Какие неочевидные темы вспомнить перед собеседованием на Frontend разработчика
— Что такое деление по модулю в JavaScript?
— Почему я не буду использовать Next.js
— Redux-toolkit и переиспользование кода
— Разработка браузерных игр с использованием Phaser3, React, Typescript
— Два frontend фреймворка. Два подхода
— Как не программист, вероятно, написал самую быструю библиотеку в мире
— Navigating the Web with is.browser and is.not_browser in JavaScript: Your Go-To Tools for Browser Checks
— Phấn Phủ Canmake
— [Discussion] What's the new big thing in web dev in the past 2 years?
— Delving into open source territory with Google: An Investigation
— Delving into open source territory with Google: PR #3
— Delving into open source territory with Google: PR #2
— Delving into open source territory with Google: PR #1
— Creating Chess Board SVGs, PNGs, and GIFs
— The 2000 line framework challenge: How to split state when using global stores with no extra dependencies beyond Modulo.js
— VueJS part 11: Sending data from component to parent
Посмотреть:
🌐 Why Signals Are Better Than React Hooks (⏱ 16:30)
🌐 Node Just Released This Amazing Feature! (⏱ 00:44)
🌐 This Is One Of My Favorite TypeScript Features (⏱ 05:22)
🌐 NEW TypeScript Simplified Course Announcement! (⏱ 00:49)
Хорошего дня!
@javascript
👍8🔥3❤1
This media is not supported in your browser
VIEW IN TELEGRAM
https://codepen.io/Juxtopposed/pen/abQLxmj
@javascriptv
Please open Telegram to view this post
VIEW IN TELEGRAM
👍15❤5🔥2
Компиляция TypeScript в нативный код
Static Hermes (shermes), следующая итерация JavaScript-движка hermes, добавляет поддержку компиляции TypeScript/flow в нативный код. Хотя shermes еще не выпущен, код доступен в репозитории на GitHub.
В этой статье я скомпилирую простую программу на языке TypeScript в код на языке C.
Компиляция shermes
На момент написания статьи для static hermes невозможно получить собранные двоичные файлы. Для компиляции из исходника на macos выполните следующие действия.
Получите исходник из репозитория GitHub и переключитесь на ветку static_h.
Убедитесь, что у вас есть указанные здесь зависимости для сборки. Затем в папке hermes_workspace выполните приведенные ниже команды для сборки. Обратите внимание, что эти команды выполняют сборку hermes в режиме отладки, который работает медленнее. Инструкции по сборке в режиме релиза приведены в конце статьи.
Теперь в каталоге
Компиляция файла TypeScript в C
📌 Читать
Static Hermes (shermes), следующая итерация JavaScript-движка hermes, добавляет поддержку компиляции TypeScript/flow в нативный код. Хотя shermes еще не выпущен, код доступен в репозитории на GitHub.
В этой статье я скомпилирую простую программу на языке TypeScript в код на языке C.
Компиляция shermes
На момент написания статьи для static hermes невозможно получить собранные двоичные файлы. Для компиляции из исходника на macos выполните следующие действия.
Получите исходник из репозитория GitHub и переключитесь на ветку static_h.
mkdir hermes_workspace
cd hermes_workspace
git clone git@github.com:facebook/hermes.git
cd hermes
git checkout static_h
cd ..Убедитесь, что у вас есть указанные здесь зависимости для сборки. Затем в папке hermes_workspace выполните приведенные ниже команды для сборки. Обратите внимание, что эти команды выполняют сборку hermes в режиме отладки, который работает медленнее. Инструкции по сборке в режиме релиза приведены в конце статьи.
cmake -S hermes -B build -G Ninja
cmake --build ./buildТеперь в каталоге
hermes_workspace/build/bin должен находиться двоичный файл shermes.Компиляция файла TypeScript в C
Please open Telegram to view this post
VIEW IN TELEGRAM
👍10❤3🔥2
🔥 Дайджест полезных материалов из мира Javascript за неделю
Почитать:
— Удобные формы для Vue 3
— Глубокий JS. В память о типах и данных
— React + Three.js. Создаём собственный 3D шутер. Часть 2
— Лучшие ресурсы чтобы выучить Git и Github
— Поиск удобных мест для жизни в Москве на GitHub Pages с помощью DuckDB в браузере
— Добавление WebAuthn в веб-приложение
— Уроки рисования красных квадратов
— Интерактивный парсер web страниц
— Webpack vs esbuild — уже можно использовать в production?
— Latest Newsletter: Surrounded by Bears (Issue #141)
— Enhancing UX: Leveraging Nextjs Router Events for Form Manipulation
— 10 Essential React Hooks You Should Know
— "Finanz Faible: Expert Finanzberater für umfassenden finanziellen Rat"
— Configuring Jest for Typescript Unit Tests
— "Pro Digital Era: Leading Advertising & Digital Marketing in Lahore, Pakistan"
— Gpen Demystified: Expert Insights from Dumpsarena
— 1. Explore basic types of typescript
— Phanatik — Multipage blog theme
— Optimizing JavaScript with Memoization: A Deep Dive into Boosting Performance:
Посмотреть:
🌐 How Is This Code Safe? (⏱ 06:31)
🌐 NEW TypeScript Simplified Course - 24 Hour Sale (⏱ 07:18)
🌐 I Can’t Believe Chrome Hides This From You (⏱ 01:00)
Хорошего дня!
#digest #js
@javascriptv
Почитать:
— Удобные формы для Vue 3
— Глубокий JS. В память о типах и данных
— React + Three.js. Создаём собственный 3D шутер. Часть 2
— Лучшие ресурсы чтобы выучить Git и Github
— Поиск удобных мест для жизни в Москве на GitHub Pages с помощью DuckDB в браузере
— Добавление WebAuthn в веб-приложение
— Уроки рисования красных квадратов
— Интерактивный парсер web страниц
— Webpack vs esbuild — уже можно использовать в production?
— Latest Newsletter: Surrounded by Bears (Issue #141)
— Enhancing UX: Leveraging Nextjs Router Events for Form Manipulation
— 10 Essential React Hooks You Should Know
— "Finanz Faible: Expert Finanzberater für umfassenden finanziellen Rat"
— Configuring Jest for Typescript Unit Tests
— "Pro Digital Era: Leading Advertising & Digital Marketing in Lahore, Pakistan"
— Gpen Demystified: Expert Insights from Dumpsarena
— 1. Explore basic types of typescript
— Phanatik — Multipage blog theme
— Optimizing JavaScript with Memoization: A Deep Dive into Boosting Performance:
Посмотреть:
🌐 How Is This Code Safe? (⏱ 06:31)
🌐 NEW TypeScript Simplified Course - 24 Hour Sale (⏱ 07:18)
🌐 I Can’t Believe Chrome Hides This From You (⏱ 01:00)
Хорошего дня!
#digest #js
@javascriptv
👍9❤2🥰1