🔥 Дайджест полезных материалов из мира Javascript за неделю
Почитать:
— Современный junior frontend developer на двух работах уровня middle с общей ЗП 400к. Реальность ли в 2023 году?
— Wolfram Language JavaScript Frontend
— «Нейрогород»: игра на знание JavaScript про фронтендерские баги
— Мои первые шаги в создании браузерных 2D игр на чистом JavaScript + Canvas. Часть 1. Прототип
— Сайд эффект реактивности и апдейта компонента во Vue 3
— Вышел Chrome 118
— Что быстрее: Animated + useNativeDriver или Reanimated?
— Как внедрить гайд по стилю кода в проект
— My #30DayCodingChallenge
— 🔄 Displaying React Components in Reverse Order
— Easily style active links in Tanstack Router
— Weekly Dev Findings 9
— 🚀 Supercharge Your Next.js App with Stunning Images! Learn the Ultimate Cloudinary Image Upload Hack 🔥
— Latest Newsletter: Exhausted (Issue #136)
— Refactoring: Enhancing Code for Better Maintainability
— Vanilla-Tilt Js
— Understanding JavaScript Collections: Arrays, Sets, Maps, and More
— Junior to Senior Web Developer Roadmap: Breakdown
Посмотреть:
🌐 How To Create The YouTube Home Page With Tailwind, React, and TypeScript (⏱ 01:49:08)
Хорошего дня!
Почитать:
— Современный junior frontend developer на двух работах уровня middle с общей ЗП 400к. Реальность ли в 2023 году?
— Wolfram Language JavaScript Frontend
— «Нейрогород»: игра на знание JavaScript про фронтендерские баги
— Мои первые шаги в создании браузерных 2D игр на чистом JavaScript + Canvas. Часть 1. Прототип
— Сайд эффект реактивности и апдейта компонента во Vue 3
— Вышел Chrome 118
— Что быстрее: Animated + useNativeDriver или Reanimated?
— Как внедрить гайд по стилю кода в проект
— My #30DayCodingChallenge
— 🔄 Displaying React Components in Reverse Order
— Easily style active links in Tanstack Router
— Weekly Dev Findings 9
— 🚀 Supercharge Your Next.js App with Stunning Images! Learn the Ultimate Cloudinary Image Upload Hack 🔥
— Latest Newsletter: Exhausted (Issue #136)
— Refactoring: Enhancing Code for Better Maintainability
— Vanilla-Tilt Js
— Understanding JavaScript Collections: Arrays, Sets, Maps, and More
— Junior to Senior Web Developer Roadmap: Breakdown
Посмотреть:
🌐 How To Create The YouTube Home Page With Tailwind, React, and TypeScript (⏱ 01:49:08)
Хорошего дня!
Данный репозиторий содержит JS-скрипт, предназначенный для удаления назойливого всплывающего окна "Блокировщик рекламы запрещен на Youtube". Для начала работы следуйте приведенным в репо инструкциям.
Проект также предлагаем незаметный способ пропускать рекламу, если вы заблокированы в видеоплеере.
• Github
@javascriptv
Please open Telegram to view this post
VIEW IN TELEGRAM
1. FlatMap
FlatMap в JavaScript — это отличная техника, с которой можно познакомиться здесь. FlatMap объединяет в себе функции map и метода массивов filter. Рекомендую использовать
flatMap()
вместо комбинации filter()
и map()
.2. Порядок использования методов массивов
Методы массивов — одни из самых важных методов, помогающих взаимодействовать с массивами. В JavaScript существует множество методов массивов.
3. Метод reduce
Я наблюдал эту проблему у многих фронтенд-разработчиков. Когда пакет типа react-charts запрашивает данные в объектоподобной структуре, а реализация react-charts запрашивает данные в формате, сгруппированном по ключу, большинство разработчиков применяют метод
.forEach()
или некорректно используют метод map()
.4. Генераторы
Генераторы и итераторы, пожалуй, относятся к элементам кода, не используемым JavaScript-разработчиками, знания которых ограничиваются вопросами для собеседования по программированию. В сценариях извлечения данных можно столкнуться с огромным объемом данных в БД/API, которые придется передавать во фронтенд. В этом случае наиболее часто используемым решением в react является бесконечная загрузка.
5. Нативные классы JavaScript
В комплект поставки JavaScript входят нативные классы, с помощью которых можно довольно легко создавать/инстанцировать такие элементы, как URL, заголовки и т. д.
Подробнее о каждом
Please open Telegram to view this post
VIEW IN TELEGRAM
This media is not supported in your browser
VIEW IN TELEGRAM
🔥 Realistic 3D Photo Cards — всплывающие изображения. Реализована с помощью CSS и JavaScript
https://codepen.io/jouanmarcel/pen/JjjZRrW
@javascriptv
https://codepen.io/jouanmarcel/pen/JjjZRrW
@javascriptv
This media is not supported in your browser
VIEW IN TELEGRAM
Frantic maze — безумный лабиринт. Реализована с помощью CSS и JavaScript
#анимация #css #javascript
https://codepen.io/Dillo/pen/jOQPWMe
@javascriptv
#анимация #css #javascript
https://codepen.io/Dillo/pen/jOQPWMe
@javascriptv
This media is not supported in your browser
VIEW IN TELEGRAM
3D Gallery - Смена карточек с 3D-эффектом, выполненная с помощью SCSS и JavaScript.
https://codepen.io/jsulpis/pen/GRMwBGR
@javascriptv
https://codepen.io/jsulpis/pen/GRMwBGR
@javascriptv
🔥 Дайджест полезных материалов из мира Javascript за неделю
Почитать:
— Fusor vs React
— JavaScript pattern CustomSwitch
— CRUD React c Redux и Saga + typescript в 2023
— Приглашаем на онлайн-митап «Гетерогенность, или Деплой JavaScript туда и обратно»
— Next JS и Nginx
— О чем расскажут на HolyJS 2023 Autumn: от архитектуры до карьеры
— Vue.js 3 — шаблоны проектирования и лучшие практики
— Небольшое React приложение со своим бекендом, запускаем с одного терминала
— PiterJS: сентябрь/октябрь
— Взаимодействие с Midjourney с использованием Discord API
— Weekly Dev Findings 10
— GraphQl Integration With React Native
— Building Accessible Web Apps
— Abstract Syntax Trees and Practical Applications in JavaScript
— Creating and Styling Forms with HTML and CSS: A Comprehensive Guide
— 7 Github Repositories to Master React 😎
— Proseso ng paggawa ng aking (dating) Website
— Cranberry: The Cure for Your URI
— JavaScript - Under the hood (Part 1 - Overview of Runtime Environment)
— 🤔My Underrated Nextjs Project 🔥
Посмотреть:
🌐 You Suck At Accessibility (But You Don't Have To) (⏱ 13:23)
🌐 This New Node Feature Is Super Convenient (⏱ 00:43)
Хорошего дня!
Почитать:
— Fusor vs React
— JavaScript pattern CustomSwitch
— CRUD React c Redux и Saga + typescript в 2023
— Приглашаем на онлайн-митап «Гетерогенность, или Деплой JavaScript туда и обратно»
— Next JS и Nginx
— О чем расскажут на HolyJS 2023 Autumn: от архитектуры до карьеры
— Vue.js 3 — шаблоны проектирования и лучшие практики
— Небольшое React приложение со своим бекендом, запускаем с одного терминала
— PiterJS: сентябрь/октябрь
— Взаимодействие с Midjourney с использованием Discord API
— Weekly Dev Findings 10
— GraphQl Integration With React Native
— Building Accessible Web Apps
— Abstract Syntax Trees and Practical Applications in JavaScript
— Creating and Styling Forms with HTML and CSS: A Comprehensive Guide
— 7 Github Repositories to Master React 😎
— Proseso ng paggawa ng aking (dating) Website
— Cranberry: The Cure for Your URI
— JavaScript - Under the hood (Part 1 - Overview of Runtime Environment)
— 🤔My Underrated Nextjs Project 🔥
Посмотреть:
🌐 You Suck At Accessibility (But You Don't Have To) (⏱ 13:23)
🌐 This New Node Feature Is Super Convenient (⏱ 00:43)
Хорошего дня!
Этот репо репо поможет новичкам начать путь во фронтенде с уверенностью и подскажет опытным разработчикам, как развиваться дальше.
В нем собраны все актуальные инструменты и технологии, репо уже набрал более 250 000 звезд.
@javascriptv
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
This media is not supported in your browser
VIEW IN TELEGRAM
#анимация #css #javascript
https://codepen.io/yexx/pen/OJzQNVN
@javascriptv
Please open Telegram to view this post
VIEW IN TELEGRAM
➯ Создайте игру 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
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
➽ 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
🔥 Дайджест полезных материалов из мира 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
Please open Telegram to view this post
VIEW IN TELEGRAM
Реализуйте метод кастомные
.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
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
This media is not supported in your browser
VIEW IN TELEGRAM
Создание отзывчивой регистрации с валидацией формы с помощью HTML, CSS и JavaScript 🚀
📌 Код
@javascriptv
📌 Код
@javascriptv
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
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