29203
🚀 Статьи, новости, туториалы по frontend разработке. http://jem-space.ru Admin: @jem_jem Пишу в @five_a_m Хорошие серваки от DigitalOcean: https://m.do.co/c/1351d64475ee Реклама: http://bit.ly/2NxmVDu
Межстраничные переходы в React
Как сделать анимационные переходы с помощью React-Router и View Transitions API (без сторонних библиотек для анимации)
https://javascript.plainenglish.io/73ab52c6fd7b
#разработка #стартапы
Плохие практики разработки, которые до сих пор встречаю в стартапах
Рейтинг: 97
Читать
10 советов по CSS для улучшения переходов и анимаций
https://joshcollinsworth.com/blog/great-transitions
Как заставить Vue компонент перерендериться
https://blog.logrocket.com/force-vue-component-re-render/
Применяем принципы SOLID в Vue
moein.mirkiani/solid-principles-in-vue-29ecc988f968" rel="nofollow">https://medium.com/@moein.mirkiani/solid-principles-in-vue-29ecc988f968
Знакомимся с анимацией 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/
Работа с датами в JS
После прекращения поддержки Moment.js стал актуальным вопрос о выборе библиотеки для работы с датой. Вот вам несколько альтернатив.
https://blog.openreplay.com/dealing-with-dates-and-times--alternatives-to-momentjs/
Frontend meetup (Online)
1. Быть Senior Frontend Developer в 2023: Экспертиза, карьера и общество — Александр Гузенко, IT_ONE
В докладе попробуем систематизировать средние по палате необходимые требования к Senior Frontend Developer к 2023 году. Разберем, чем синьор отличается от мидла, посмотрим на хард скилы, софт скилы, точки роста для синьора.
2. CLI для фронтендеров. Делаем лучше, а не хуже — Алексей Попков, Толока
В докладе поговорим, как превратить скриптописательство в системный подход, какие есть основные критерии качества, и как сделать инструмент, которому будет рада вся команда.
3. Обзор полезных инструментов разработчика — Павел Теренин, Juniper Square
В моем докладе инструменты разделены на две секции: инструменты для отладки верстки и стилей, и инструменты для отладки кода и оптимизации быстродействия.
➖➖➖
🗓 15 марта, начало в 19:00 мск, Среда
🌐 ОНЛАЙН
Наш канал с анонсами митапов
✅ Регистрация на мероприятие
Эффект анимации при наведении с Clip-Path
https://tympanus.net/codrops/2023/03/01/double-image-hover-effects-with-clip-path-animations/
Исходники на github
Собеседование по TypeScript: 20 вопросов и ответов
Популярные вопросы, которые стоит повторить перед собеседованием
https://habr.com/ru/company/ruvds/blog/419993/
Data Science – стремительно развивающаяся отрасль на стыке бизнеса и интернет-технологий 🧑💻
Согласно данным рекрутинговых агентств в России несколько тысяч компаний находятся в активном поиске специалистов в этой области, а заработная плата на практике не имеет верхнего предела.
Совместная магистерская онлайн-программа «Науки о данных» Университета науки и технологий МИСИС и СберОбразования даст вам актуальные знания и навыки в программировании, математике, машинном и «глубоком» обучении. Ваш образовательный процесс будет отслеживать команда методистов, преподавателей и тьюторов с опытом организации обучения в Data Science более 3 лет. Вы получите все преимущества очной формы обучения – диплом государственного образца, общежитие, проездной и др. 🔥🔥🔥
Вы реализуете ряд проектов лично и в команде – это поможет сформировать профессиональное портфолио. Студенты программы получают консультацию от карьерного коуча, проходят стажировки и в дальнейшем трудоустраиваются в ведущие IT-компании России, среди которых: Сбер, VK, Huawei, Аскон, ЦИФРА, «Гринатом», «АЛРОСА», «Альфа-Банк», «Тинькофф Банк», «Газпромнефть-Центр» и другие.
Подробнее о программе 📌
Создаем аудио и видео рекордер на 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/
