Инструменты управления пакетами и зависимостями JS


👉 Npm — Является системой управления пакетами для JavaScript и большим реестром программного обеспечения, насчитывающим более 475 000 модулей. Пакеты могут использоваться как для фронтенда, так и для бэкенда.

👉 Bower — Помогает управлять ресурсами, фреймворками, библиотеками и другими утилитами. Предлагает доступ к большому количеству пакетов, помогая разработчикам JavaScript оптимизировать процесс разработки и улучшить результаты.

👉 Yarn — Основное внимание в нём уделено безопасности, скорости и быстродействию. Инструмент позволяет совместно использовать код через пакеты и модули вместе с файлом, описывающим пакет.

👉 RequireJS — Загрузчик файлов, который может автоматически определять необходимые зависимости. Помогает улучшить скорость и качество кода.

👉 Browserify — Позволяет использовать стиль node.js модулей для работы в браузере. Объединяет выбранные модули в один файл, который можно добавить как script в HTML-страницу.

Повышение производительности вашего React-приложения с помощью React Profiler

https://indepth.dev/posts/1497/react-profiler

#React

Stick Hero with Canvas

Игра с использованием CSS, JavaScript и Canvas

#codepen #css #js

Подпишись👉 @codepen_1

Рисование в canvas с помощью Emscripten

https://web.dev/drawing-to-canvas-in-emscripten/

#canvas

Tilting Maze game - игра "Лабиринт", сделанная с использованием CSS и JavaScript. Поведение шариков смоделировано с использованием законов тригонометрии.

#codepen #css #js

Подпишись👉 @codepen_1

Введение в Deno: лучше ли он, чем Node.js?

https://blog.appsignal.com/2022/02/09/an-introduction-to-deno-is-it-better-than-nodejs.html

One Day Offer для фронтенд-разработчиков

25 июня Яндекс проводит One Day Offer — онлайн-встречу, на которой вы можете получить оффер от Яндекса всего за один день.

Вы JS разработчик с опытом от трех лет и хотите работать над интересными проектами в Яндексе?
Регистрируйтесь на сайте, успейте решить задачи контеста до 21 июня, а 25 июня мы встретимся на онлайн-секциях, по результатам которых лучшие участники смогут присоединиться к командам Поиска, Yandex Cloud или Директа.

Отсутствие анимаций не всегда соответствует prefers-reduced-motion

https://css-tricks.com/nuking-motion-with-prefers-reduced-motion/

Knockout - JavaScript библиотека MVVM (Model-View-View Model)

Упрощает создание интерактивных пользовательских интерфейсов для веб-сайтов и веб-приложений. Использует наблюдателей, чтобы ваш UI автоматически синхронизировался с моделью базы данных.

Особенности / преимущества:
✔️Автоматическое обновление интерфейса при изменении модели данных
✔️Просто связывать элементы DOM с данными модели
✔️Отслеживание зависимостей
✔️Быстрое создание шаблонов UI
✔️Открытый исходный код
✔️Лёгкий вес (66КБ)
✔️Простой API
✔️Поддерживает все основные браузеры (IE 6+, Firefox 3.5+, Chrome, Opera, Safari)

Сайт: https://knockoutjs.com/
GitHub: https://github.com/knockout/knockout

#js

Подборка каналов для IT специалистов 🎯

Программирование C++📌
https://yangx.top/cpp_lib Библиотека C/C++ разработчика
https://yangx.top/cpp_knigi Книги для программистов C/C++

Программирование Python 📌
https://yangx.top/pythonofff Python академия. Учи Python быстро и легко🐍
https://yangx.top/BookPython Библиотека Python разработчика
https://yangx.top/python_real Python подборки на русском и английском
https://yangx.top/python_360 Книги по Python Rus

Java разработка 📌
https://yangx.top/BookJava Библиотека Java разработчика
https://yangx.top/java_360 Книги по Java Rus

GitHub Сообщество 📌
https://yangx.top/Githublib Интересное из GitHub

CodePen 📌
https://yangx.top/codepen_1 Сообщество пользователей CodePen

Базы данных (Data Base) 📌
https://yangx.top/database_info Все про базы данных

Мобильная разработка: iOS, Android 📌
https://yangx.top/developer_mobila Мобильная разработка

Фронтенд разработка 📌
https://yangx.top/frontend_1 Подборки для frontend разработчиков

Разработка игр 📌
https://yangx.top/game_devv Все о разработке игр

Вакансии 📌
https://yangx.top/sysadmin_rabota Системный Администратор
https://yangx.top/progjob Вакансии в IT

Чат программистов📌
https://yangx.top/developers_ru

Библиотеки 📌
https://yangx.top/book_for_dev Книги для программистов Rus
https://yangx.top/programmist_of Книги по программированию
https://yangx.top/proglb Библиотека программиста
https://yangx.top/bfbook Книги для программистов

БигДата, машинное обучение 📌
https://yangx.top/bigdata_1 Data Science, Big Data, Machine Learning, Deep Learning

Программирование 📌
https://yangx.top/bookflow Лекции, видеоуроки, доклады с IT конференций
https://yangx.top/coddy_academy Полезные советы по программированию

QA, тестирование 📌
https://yangx.top/testlab_qa Библиотека тестировщика

Шутки программистов 📌
https://yangx.top/itumor Шутки программистов

Защита, взлом, безопасность 📌
https://yangx.top/thehaking Канал о кибербезопасности

Книги, статьи для дизайнеров 📌
https://yangx.top/ux_web Статьи, книги для дизайнеров
https://yangx.top/arhitekturamira World Architecture

Системное администрирование 📌
https://yangx.top/tipsysdmin Типичный Сисадмин (фото железа, было/стало)
https://yangx.top/sysadminof Книги для админов, полезные материалы
https://yangx.top/i_odmin Все для системного администратора
https://yangx.top/i_odmin_book Библиотека Системного Администратора
https://yangx.top/i_odmin_chat Чат системных администраторов
https://yangx.top/i_DevOps DevOps: Пишем о Docker, Kubernetes и др.

Английский 📌
https://yangx.top/UchuEnglish Английский с нуля

Математика 📌
https://yangx.top/Pomatematike Канал по математике

Арбитраж трафика 📌
https://yangx.top/partnerochkin CPA и арбитраж трафика

Крипта 📌
https://yangx.top/bitkoinoff Новости криптовалют

Метавселенная, GameFi, Crypto 📌
https://yangx.top/metaverse360

DeepFake 📌
https://yangx.top/deepfakenow Публикуем deepfake видео

Мир технологий 📌
https://yangx.top/mir_teh Видео из мира технологий

Excel лайфхак📌
https://yangx.top/Excel_lifehack

Aspect Ratio is Great

https://css-irl.info/aspect-ratio-is-great/

#css

Responsive <!-- No Div --> car - Анимированная сцена, сделанная без использования div, на чистом CSS

#codepen #css

Подпишись👉 @codepen_1

Create.js — набор из 4 модульных библиотек

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

👉 EaselJS — библиотека для работы с элементом HTML5 Canvas

👉 TweenJS — библиотека для анимации HTML элементов

👉 SoundJS — библиотека для работы со звуком

👉 PreloadJS — библиотека для управления загрузкой ресурсов и данных

Особенности / преимущества:
✔️Поддерживает Edge, Internet Explorer 9+, Firefox, Chrome, Safari, Opera, Cordova
✔️Подробная документация
✔️Открытый исходный код
✔️Возможность экспорта из Adobe Animate
✔️Легко интегрировать в проект

Сайт: https://createjs.com/
GitHub: https://github.com/createjs

#js

👉 @frontend_1

Interactive Skate Loading - Интерактивная моделька скейтбордиста сделана при помощи SCSS, а управление реализовано с помощью JavaScript

#codepen #scss #js

Подпишись👉 @codepen_1

Interact.js — библиотека для работы с drag & drop, ресайзингом и жестами.

Добавляет возможность изменять размер, цвет, перетаскивать и вращать элементы на странице.

Особенности / преимущества:
✔️Доступен для Chrome, Firefox, Opera и Internet Explorer 9+
✔️Открытый исходный код
✔️Не зависит от сторонник библиотек
✔️Поддержка SVG
✔️Мощный API
✔️Поддерживает мобильные устройства

Сайт: https://interactjs.io/
GitHub: https://github.com/taye/interact.js

#js

👉 @frontend_1

Реальный пример работы startTransition

Ricky Hanlon показал подробный пример работы API startTransition из React 18, с объяснением работы API и того, как работает приложение в perfomance профиле.   

В примере показан слайдер и компонент с «тяжелыми вычислениями», который занимает много времени для рендера, особенно на слабых устройствах. После изменения значения слайдера происходил ререндер тяжелого компонента. Самый оптимальный вариант рендера тяжелого компонента в React 17 через debounce, т.е. откладывая рендер на изменения слайдера. 

В React 18 изменение значения слайдера достаточно обернуть в startTransition, и React уже сам выполнит эффективный рендер компонента. После рендера изменения значения слайдера, React рендерит transition результатов. Так как в этом изменение включен параллельный рендеринг, React делает три новые вещи:
- Yielding: каждые 5 мс React ставит работу рендера на паузу, чтобы дать браузеру сделать другую работу, например запустить промисы. 
- Прерывание: React ставит рендер на паузу, если необходимо отрендерить более приоритетный компонент, например ползунок слайдера из примера.
- Отбрасывание старых результатов: когда React начинает рендерить после прерывания, то он отбрасывает старый компонент и рендерит новый.

https://github.com/reactwg/react-18/discussions/65

✍️ @React_lib

Инструменты безопасности JavaScript

👉 Snyk — Инструмент для обнаружения и предотвращения уязвимостей в приложениях на JavaScript, Java и Ruby. Имеет собственную базу данных уязвимостей и берёт данные из NSP и NIST NVD.

👉 RetireJS — Средство проверки зависимостей с открытым исходным кодом. Включает различные компоненты, такие как сканер командной строки, плагин Grunt, расширения Firefox и Chrome, плагины Burp и OWASP ZAP. Информацию об уязвимостях собирает из NIST NVD и других источников.

👉 OSSIndex — Собирает информацию об уязвимостях из NVD и отзывов. Также обрабатывает информацию от членов сообщества. поддерживает Java, JavaScript и .NET / C # и множество платформ, (NuGet, npm, Bower, Chocolatey, Maven, Composer, Drupal и MSI).


👉 OWASP Dependency Check – Сканер собирает все используемые в приложении компоненты с открытым исходным кодом и показывает имеющиеся в них уязвимости. Доступен для Node.js, Java, .NET, Ruby (gemspec), PHP (composer) и т.д.

👉 @frontend_1

CountUp.js — библиотека для создания анимации прокрутки чисел

Позволяет быстро создать и настроить анимацию прокрутки числа.

Особенности / преимущества:
✔️Широкие возможности настройки
✔️Маленький вес (5kB)
✔️Поддержка современных и старых браузеров
✔️Не зависит от сторонник библиотек

Сайт: http://inorganik.github.io/countUp.js/
GitHub: https://github.com/inorganik/CountUp.js

#js #TypeScript #HTML

👉 @frontend_1

One Day Offer уже скоро!

Друзья, осталось всего несколько дней, чтобы решить задачи контеста и принять участие в One Day Offer для фронтенд-разработчиков!

Напоминаем, что задачи доступны до 21 июня включительно, а 25 июня мы проводим онлайн-секции и раздаем офферы лучшим участникам.

От вас мы ждем опыт в JS-разработке не менее трех лет, взамен предлагаем интересные задачи в командах Поиска, Yandex Cloud или Директа 🔥

Зарегистрироваться можно здесь 👇