❓Распространенный вопрос на собеседовании по 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. Результат функции помещается в новый массив, а затем возвращается.

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

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

🖥 Slider — красивый слайдер с различными блюдами. Реализована с помощью CSS и JavaScript

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

https://codepen.io/kristen17/pen/BaGOOMm

@javascriptv

🖥 Anime.js V4.

Новый способ эффективного управления повторяющимися анимациями без лишних вызовов animate() или utils.set().

Идеально подходит для эффектов отслеживания мыши!
Подробности об API ниже 👇

https://libraries.io/npm/animejs-beta

@javascriptv

🖥 Shopping UI - красивый каталог товаров и корзина, сделанные при помощи JS библиотеки - Vue.js

https://codepen.io/mo-ro/pen/jObjGJm

#код #css #javascript

@javascriptv

🖥 Дизайн - это непросто.

Вот мои любимые места в Интернете для вдохновения при работе над дизайном:

http://curated.design → каталог
http://land-book.com → веб-сайты
http://refero.design → исследования в области дизайна
http://mobbin.com → мобильные и веб-приложения
http://saaslandingpage.com → целевые страницы saas

@javascriptv

🖥 Button pushed inside style — изящная анимация иконок при наведении курсора. Реализована с помощью CSS и JavaScript

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

https://codepen.io/Juxtopposed/pen/jOKqXMJ

@javascriptv

🖥 Сразу две кнопки - изящно анимированные кнопки с интересным интерактивом. Сделано на CSS и JavaScript.

https://codepen.io/Juxtopposed/pen/abQLxmj

@javascriptv

Компиляция TypeScript в нативный код

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

📌 Читать

🎮 Interactive Super Mario - анимация Super Mario, выполненный с помощью SCSS и JavaScript. Управление осуществляется с помощью клавиатуры

https://codepen.io/merchedev/pen/BaYqyNx

@javascriptv

🖥 MatryoshBox (CSS) - полноценная анимированная сцена, сделанная с помощью SCSS без использования JavaScript

https://codepen.io/amit_sheen/pen/WNEOPQa

@javascriptv