🖥 Cinematic Animation — красивая кинематографическая анимация. Реализована с помощью CSS и JavaScript

https://codepen.io/team/keyframers/pen/LYRmXBX

@javascriptv

🖥 Flipping Neon - Анимированная сцена, выполненная на чистом CSS, без использования JavaScript

https://codepen.io/danwilson/pen/abqGjVp

@javascriptv

🖥 Remove the Adblock Popup from YOUTUBE

Данный репозиторий содержит JS-скрипт, предназначенный для удаления назойливого всплывающего окна "Блокировщик рекламы запрещен на Youtube". Для начала работы следуйте приведенным в репо инструкциям.

Проект также предлагаем незаметный способ пропускать рекламу, если вы заблокированы в видеоплеере.

• Github

@javascriptv

🖥 5 недооцененных возможностей JavaScript

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, заголовки и т. д.

Подробнее о каждом

⚡️ List Styles — список. Реализована с помощью CSS и JavaScript

#анимация #css #javascript

https://codepen.io/yexx/pen/OJzQNVN

@javascriptv

🖥 Идеи для проектов JavaScript:


➯ Создайте игру Flappy Bird.
https://youtube.com/watch?v=Ltg1fl4Obgg

➯ Игра "Хэнгмэн"
https://youtube.com/watch?v=hSSdc8vKP1I

➯ Слайдер изображений -
https://youtube.com/watch?v=PsNaoDhzQm0

➯ Переключение светлой/темной темы -
https://youtube.com/watch?v=CUEJkJ9HDbY

➯ Цифровые часы
https://youtube.com/watch?v=lsoCv8Agg6E

➯ Создание музыкального проигрывателя -
https://youtube.com/watch?v=oscPp3KghS8

➯ Список дел
https://youtube.com/watch?v=kzHmtmCMUwk

➯ Тетрис
https://youtube.com/watch?v=ZTHjT3bm-64

➯ Создание 15 проектов на JavaScript -
https://youtube.com/watch?v=3PHXvlpOkf4

@javascriptv

🖥 Сайты вы найдете сниппеты кода Javascript:

➽ javascripting - https://javascripting.com

➽ codepen - https://codepen.io

➽ codemyui - https://codemyui.com

➽ jsfiddle - https://jsfiddle.net

➽ jsbin - https://jsbin.com

➽ 30secondsofcode - https://30secondsofcode.org/js/p/1/

➽ freefrontend - https://freefrontend.com

➽ snippit - https://snippit.io

➽ codesandbox - https://codesandbox.io

➽ glitch - https://glitch.com

➽ tabnine - https://tabnine.com

➽ github - https://github.com

@javascriptv

🖥 Освойте Javascript бесплатно

✔ Курс Code academy JavaScript.

✔ Полный курс JavaScript для начинающих.

✔ Краткий курс JavaScript Dom.

✔ Краткий курс по JavaScript Oops.

✔ Продвинутые учебники по JavaScript.

✔ Учебники JavaScript "Все в одном".

✔ Основы JavaScript 11 часов.

@javascriptv

❓Распространенный вопрос на собеседовании по JavaScript:

Реализуйте метод кастомные .map():

[1,2,3].myMap((x) => x * x) // должно получиться [1,4,9].

Проверяется ваше понимание:
1⃣Prototypes
2⃣ this ключевое слово
3⃣Functional концепции программирования

Если вы понимаете, как работает обычная .map(), то реализовать собственную функциию несложно:

1. .map() - это метод массива
2. Он возвращает новый массив (не модифицирует существующий)
3. В качестве параметра принимает функцию
4. Выполняет эту функцию над каждым элементом массива
5. Результат функции помещается в новый массив, а затем возвращается.

Легко, правда?

Базовая реализация в изображении.