29396
🚀 Статьи, новости, туториалы по frontend разработке. http://jem-space.ru Admin: @jem_jem Пишу в @five_a_m Хорошие серваки от DigitalOcean: https://m.do.co/c/1351d64475ee Реклама: http://bit.ly/2NxmVDu
Знакомимся с анимацией GSAP в React приложении
Пошаговый туториал по работе с библиотекой GSAP для анимации.
https://dev.to/franklin030601/animations-with-gsap-react-1nok
Frontend-разработчики, Сбер приглашает вас познакомиться и пройти все этапы отбора в команду на One Day Offer, который состоится 5 марта ⚡️
Если вы уже больше двух лет занимаетесь коммерческой разработкой, знаете React и получили профильное образование — не упустите возможность стать частью команды и получить оффер всего за один день.
👉 После успешного прохождения технического интервью вы будете поддерживать и развивать официальный сайт СберБанка — онлайн-витрину сервисов и продуктов банка, а также его экосистемы.
Команда фронтенда в Сбере состоит из 100+ крутых специалистов топ-компаний мира и использует в своей работе автоматизированную инфраструктуру разработки и самый современный стек: React, TypeScript, NodeJS, Webpack, PostCSS и др.
Если вы хотите стать частью команды — переходите по ссылке, регистрируйтесь на One Day Offer и готовьтесь к собеседованию 😉
Асинхронное поведение в JS
О том, как JS обрабатывает асинхронный код и почему это важно знать для разработки.
https://blog.bitsrc.io/javascript-101-all-about-async-behavior-9b2a3a693f7a
Создаем менеджер задач на React + Hygraph
Пример приложения, который использует headless CMS Hygraph в качестве бэкенда.
https://code.pieces.app/blog/build-crud-task-manager-react-hygraph
Когда и как использовать свойство CSS will-change
Расскажем о том, что за свойство will-change и когда оно может быть полезным.
https://blog.logrocket.com/when-how-use-css-will-change/
В Тинькофф большая финтех-команда, это факт. Еще один факт — у них есть свой телеграм-канал, где ребята пишут о:
— подкастах, кейсах и полезных статьях на Хабре;
— развитии ИТ-коммьюнити, а также проводят митапы и конференции;
— главном в еженедельный дайджест;
— лучших мемах индустрии.
Только полезное и интересное от разработчиков и для разработчиков. Подписывайтесь на IT’s Tinkoff.
Интегрируем Cache API с Service Workers
Простой способ кешировать статику с помощью Service Workers.
https://blog.openreplay.com/integrating-the-cache-api-with-service-workers/
📌 Бесплатно освойте профессию дизайнера с нуля. Вместе сделаем вам портфолио из 4+ работ с личной поддержкой от наставника.
Что вы получите?
— Фидбэк (мощный разбор всех ДЗ от куратора)
— Тусовка (личный кабинет с уроками + живой чат)
— Портфолио и экзамен (упакуем по урокам и проверим)
— Мастер-класс "как заработать на дизайне" и найти клиента
🔥 Будем делать: веб-дизайн, графический дизайн, анимацию интерфейсов.
→ Начать обучение бесплатно
Программа бесплатного курса:
— Обучение по Figma с нуля и 4+ дз с личным разбором
— Изучение основ дизайна (контент, сетки, композиция т.д.)
— Создание анимации интерфейса
— Все о профессии и доходе дизайнера (как найти клиентов и сколько можно заработать)
👉 Первый урок уже сегодня, кликайте сюда и забирайте все бонусы
Тестируем Vue компоненты
Советы по тестированию Vue компонентов с Vitest и Vue Test Utils.
https://betterprogramming.pub/testing-vue-components-the-right-way-a5a0dfb819a2
Задумывались ли вы, насколько ваш продукт доступен для незрячих? А для слабовидящих или тех, у кого нет рук?
Если вы разработчик (web, iOS и android), дизайнер, исследователь, зовём учиться делать продукт доступным вместе!
С 13 марта по 28 мая на курсе "Цифровая доступность" вместе с кураторами из Yandex, Dodo, Yandex Go, Сбер, SpurIT, Miro будем разбирать теорию и практику доступности, геймдизайн, информационную архитектуру, дизайн-системы и многое другое.
Наш курс для тех, кому важно:
😎 обеспечить доступность своего сайта или приложения для любого, включая незрячего и парализованного человека
👨🦯 прокачаться в создании дружелюбных интерфейсов
💪 повысить свою конкурентоспособность на зарубежном и российском рынке
✍️ систематизировать знания по инклюзивной разработке
🧠 стать частью сообщества продвинутых профессионалов
Приходите: accessibilityunity.com/
Создаем эффект двигающегося заднего фона
https://css-tricks.com/moving-backgrounds/
Время относительной стабильности закончилось. JS и CSS активно развиваются. Новые фрейморки и фичи заставляют многих пересмотреть подход к написанию кода. Об этом говорят долгожданные результаты опросов State of JS 2022 и State of CSS 2022.
Какие выводы из них можно сделать? И, главное, что ждёт нас в 2023 году?
Обсудим на бесплатном вебинаре, который проведут тимлиды из ВКонтакте, Telegram Open Network и Frogly (Chrome Extension)
Вы поймёте, что нужно знать, чтобы оставаться востребованным специалистом в этом году: какие фреймворки и фичи использовать, а от каких стоит отказаться.
Встречаемся уже завтра, 9 февраля в 19:00 (по Москве) в прямом эфире.
Регистрируйтесь по ссылке
Как работать с App Directory Architecture
О новой стратегии роутинга и рендеринга компонентов в Next.js.
https://www.smashingmagazine.com/2023/02/understanding-app-directory-architecture-next-js/
Оптимизируем TTFB (Time to First Byte)
О способах ускорения загрузки веб приложений.
https://web.dev/optimize-ttfb/
#javascript #google-chrome
Js, трюки, наблюдения, бенчмарки и как Лиса уничтожает Хром. Я протестировал всё, что вам было лень
Рейтинг: 96
https://habr.com/ru/post/712386
Создаем аудио и видео рекордер на React
https://blog.logrocket.com/how-to-create-video-audio-recorder-react/
Feature Sliced архитектура
Обзор Feature Sliced архитектуры, ее достоинств и недостатков, а также сравнение с модульной архитектурой.
https://blog.bitsrc.io/understand-the-most-reliable-frontend-architecture-c8578e3166b
Используем MutationObserver API для работы с элементами, которых пока нет.
О работе с интерфейсом, позволяющим отслеживать изменения в DOM и работать с новыми элементами.
https://www.macarthur.me/posts/use-mutation-observer-to-handle-nodes-that-dont-exist-yet
#google-chrome #devtools
Что нового завезли в DevTools (Chrome 111)
Совсем недавно вышел Chrome 111 и принёс не только исправление старых ошибок, но и добавление новых, а также приятные фичи в DevTools, о которых мы с вами сейчас и узнаем.
Рейтинг: 20
Читать
Создаем зернистый фон с SVG фильтрами
https://www.freecodecamp.org/news/grainy-css-backgrounds-using-svg-filters/
CSS цвета высокого разрешения
Обзор цветовых моделей CSS, а также советы и тонкости при работе с цветами в Chrome.
https://developer.chrome.com/articles/high-definition-css-color-guide/
Реактивность с Vue 3 Composition API: ref() и reactive()
https://blog.logrocket.com/reactivity-vue-3-composition-api-ref-reactive/
Аудиоплеер на React
Подробный туториал по созданию веб плеера
https://blog.logrocket.com/building-audio-player-react/
Графики и чарты на React c использованием Recharts
О возможностях библиотеки Recharts для визуализации данных.
https://blog.openreplay.com/charting-and-graphing-in-react-with-recharts/
Создание и валидация форм на React с Informed и Yup
https://blog.logrocket.com/build-powerful-react-forms-with-informed/
Валидация форм с помощью Zod
Один из вариантов валидации React форм, используя сочетание react hooks и Zod.
https://blog.bitsrc.io/react-form-validation-5aa06193bec4
Полное руководство по обработке ошибок в JS
https://www.sitepoint.com/javascript-error-handling/
Интерактивные SVG
Туториал по созданию SVG изображений на примере квинтового круга.
https://blog.logrocket.com/interactive-svg-circle-of-fifths/
Оптимальные изображения в вашем HTML
Оптимизируем разметку для улучшения загрузки изображений.
https://www.builder.io/blog/fast-images
Краткий обзор Bun — новой среды выполнения JavaScript
https://habr.com/ru/company/timeweb/blog/710202/