Frontender Libs - обзор библиотек JS / CSS

Elastic Accordion GSAP Аккордеон для изображений с эластичным эффектом на GSAP.js. 👉 @sWebDev

JS Framework qooxdoo Фреймворк Qooxdoo подходит для создания кроссбраузерных, многофункциональных приложений. По словам разработчиков для этого не понадобится знание CSS, HTML, DOM. Фреймворк имеет объектно-ориентированную архитектуру. Работает со всеми современными браузерами. 👉 @sWebDev

Snowing Outside Window Проект с новогодней анимацией, выполненной на GSAP.js. 👉 @sWebDev

React: работа с 3D-графикой В данном туториале рассмотрим простой и быстрый, хотя и не очень оптимальный с точки зрения размера сборки, способ рендеринга 3D-объектов и моделей в React. 👉 @sWebDev

Сложная анимация Angular Под сложной анимацией в Angular понимается одновременная или последовательная работа нескольких простых анимаций. Например, она позволяет сделать анимированным появление/исчезание последовательности элементов. Реализуется подобное с помощью следующих функций: query() - находит один и более дочерних HTML-элементов по заданному критерию в пределах элемента, к которому применяется анимация, и применяет ее к каждому из них; stagger() - устанавливает задержку для найденных функцией query() элементов; group() - запускает все составляющие анимации параллельно; sequence() - запускает все составляющие последовательно. 👉 @sWebDev

Как правильно использовать useContext в React? 12.12 мы рассматривали хук useContext, который принимает объект контекста (значение, возвращённое из React.createContext) и возвращает текущее значение контекста. Как правильно его использовать? Если забыли, то вернитесь к нашему посту. Вариант 1: useContext(MyContext.Consumer) Вариант 2: useContext(MyContext) Вариант 3: useContext(MyContext.Provider) 👉 @sWebDev

Yeti 404 Sayfası Забавное оформление 404-ошибки с использованием GSAP.js 👉 @sWebDev

Приглашаем JavaScript фронтенд и бэкенд-разработчиков прокачать навыки на вебинаре в OTUS! 🟡 22 декабря в 20:00 пройдет открытый урок «Pinia vs Vuex: Является ли Pinia хорошей заменой Vuex?» в рамках онлайн-курса «Vue.js разработчик». На занятии мы разберем 1. Проведём сравнение между Pinia и Vuex. 2. Проанализируем настройку и сильные стороны: сообщества и производительность обоих стейт менеджеров. 3. Рассмотрим новые изменения в Vuex 5 по сравнению с Pinia 2. Не упустите возможность протестировать курс и пообщаться с Михаилом Кузнецовым, fullstack разработчиком в международной финансовой корпорации ING. ✍️ Для регистрации на вебинар пройдите вступительный тест https://otus.pw/j6po/

Parsley Parsley — это библиотека JavaScript, которая используется для валидации форм прямо во фронтенде. Это делает приложение более мощным, быстрым и простым в использовании. Особенности: интегрированный интуитивно понятный DOM API; фокус на пользовательском опыте с динамической проверкой формы; большое количество встроенных подтверждений. 👉 @sWebDev

​Ищем будущих Java-разработчиков. Обучение и трудоустройство берём на себя. От Вас: — Желание стать востребованным IT-специалистом и зарабатывать от 100 000 руб/мес (по данным сайта HeadHunter). — Наличие компьютера или ноутбука. — Возможность уделять от 4 до 6 часов в неделю на обучение и немного упорства. От нас: — Знания, навыки и компетенции, которых, достаточно для позиции Middle-разработчика. — Сильный преподавательский состав экспертов-практиков в IT-секторе. — Стажировка в GeekBrains и трудоустройство после обучения. Что нужно будет делать: Java-разработчики занимаются разработкой высоконагруженных систем, веб-сервисов, банковских и корпоративных приложений, которыми пользуются люди по всему миру. Освоить все необходимые навыки и стать востребованным Javistom уровня — middle вы можете на курсе «Факультет Java-разработки» с гарантированным трудоустройством от GeekBrains. Курс идеально подойдёт, как для новичков, так и для разработчиков с опытом. За 12 месяцев вы с нуля: — Научитесь программировать на Java — Освоите один из самых востребованных фреймворков для веб-разработки — Spring Framework — Научитесь создавать приложения с помощью Spring Framework — Освоите базовые знания верстки: HTML, CSS, Bootstrap — Научитесь работать с базами данных SQL, PostgreSQL — Получите навыки автоматизированного тестирования кода – Получите знания по алгоритмам и структуре данных По итогу обучения вы сможете создавать сетевые чаты, приложения, мобильные игры и другие сервисы. И это ещё не всё! Мы дарим подарки всем студентам: — Изучение английского языка с Kespa — Ключ от продуктов JetBrains – Kaspersky Internet Security бесплатно на 90 дней Пока вы читаете этот пост, кто-то уже записался на онлайн-курс «ФакультетJava-разработки». Переходите по ссылке и оставляйте заявку

Tricky Loop Animation Проект анимации загрузки, выполненный на GSAP.js. 👉 @sWebDev

Как создавать 3D-сцены, используя React Three Fiber? React Three Fiber позволяет создавать продвинутые 3D-сцены. В статье пошагово изучим создание анимаций: настройку сцен, создание геометрии, освещение и эффекты постобработки. 👉 @sWebDev

Out-of-Bounds Генерация теннисных мячей по клику. Выполнено на Three.js и Cannon.js. 👉 @sWebDev

Remotion Видеоредакторы не нужны. Для создания видео вы можете использовать Remotion - библиотеку, работающую в связке с React. Благодаря ей можно создавать видео в формате MP4. Полный функционал и особенности библиотеки доступны по ссылке. 👉 @sWebDev

React vs Vue.js: что лучше для разработки мобильных и веб-приложений? Когда дело доходит до создания мобильного или веб-приложения, то наступает время выбора нужной JavaScript библиотеки. Как правильно выбрать исходя из ваших целей и задач узнаем в статье. Рассмотрим моменты, которые стоит учитывать при выборе нужного фреймворка. 👉 @sWebDev

Представляем refine — open-source headless React-фреймворк (6.1K ⭐️ на GitHub) для CRUD-приложений. С ним вы можете быстро создать админку или дашбоард, при этом код останется гибким для изменений.✨ refine бесшовно связывается с UI-фреймворками и поставляется с готовыми интеграциями для Ant Design System, Material UI, Mantine и Chakra UI 🚀

Beat Burger Проект барабанной установки, выполненный в виде бургера. Вы можете управлять установкой, используя клавиатуру или мышь. Реализовано с использованием библиотеки GSAP. 👉 @sWebDev

❓ Хотите выучить html с нуля? Тогда этот бесплатный справочник по html то, что вам нужно. 🎁 Оставьте заявку на тест-драйв курса специализация «Fullstack developer» и получите: - справочник по html; - приглашение на бесплатные уроки курса по html, css, javascript 📌 Не упустите свой шанс освоить профессию «Fullstack Developer» со скидкой 36800₽ Для получения подарка нужно быть авторизованным в Вк. 👉 https://vk.cc/cjC8ec

useContext React Рассмотрим хук React useContext, который принимает объект контекста (значение, возвращённое из React.createContext) и возвращает текущее значение контекста. Текущее значение контекста определяется значением ближайшего <MyContext.Provider> над вызывающим компонентом в дереве. Когда ближайший <MyContext.Provider> над компонентом обновляется, этот хук вызовет повторный рендер с последним значением контекста, переданным этому провайдеру MyContext. Запомните, аргумент для useContext должен быть непосредственно сам объект контекста: Правильно: useContext(MyContext) Неправильно: useContext(MyContext.Consumer) Неправильно: useContext(MyContext.Provider) 👉 @sWebDev