29396
🚀 Статьи, новости, туториалы по frontend разработке. http://jem-space.ru Admin: @jem_jem Пишу в @five_a_m Хорошие серваки от DigitalOcean: https://m.do.co/c/1351d64475ee Реклама: http://bit.ly/2NxmVDu
Аналитическая сводка про веб за 2022
Статистика по технологиям, сервисам, инструментам и тп.
https://css-tricks.com/2022-roundup-of-web-research/
5 API современных браузеров для анализа производительности
▫️Performance Timeline API
▫️Resource Timing API
▫️Navigation Timing API
▫️User Timing API
▫️PerformanceObserver API
https://blog.logrocket.com/top-5-web-apis-performance-based-analysis/
Оптимизируем загрузку данных с React Query
Что может React Query:
▫️Кеширование
▫️Перезагрузка данных при изменении условий
▫️Pre-fetching
и не только
Подробнее в статье
https://christopherkade.com/posts/react-query
Marsy - сервис альтернатива Avocode и Zeplin
Что может Marsy:
🔹Инспектировать дизайн, подготовленный в Photoshop или Sketch
🔹Экспортировать ресурсные файлы для любых элементов
🔹Получать все необходимые элементы дизайна.
🔹Работает прямо из браузера.
Сервис можно оплатить картами Российских банков.
https://markupeasy.com/adv/
Однажды у нас будет полностью настраиваемый select
Элемент selectmenu - новый HTML элемент, который еще не попал в спецификацию, но который уже можно потестить в Chrome.
https://habr.com/ru/post/707498/
Погружение в Rematch
Работа с библиотекой для управления состоянием в React приложениях
https://blog.openreplay.com/a-deep-dive-into-rematch--state-management-for-react/
Для этого не нужна ARIA
Случаи, когда уменьшение числа ARIA атрибутов повышает доступность
https://habr.com/ru/post/706674/
30 способов улучшить CSS перфоманс сайта
От банальных до изощренных.
https://blog.openreplay.com/30-ways-to-improve-website-performance-with-css/
Самый недооценённый канал для фронтендеров
Контент создаётся вместе с тимлидами с опытом работы в Вконтакте, Яндексе, Telegram Open Network и Frogly! Собрали подборку полезных статей и видео оттуда, читайте и подписывайтесь:
▫️ Как пройти behavioral interview в зарубежную компанию: личный опыт и полезные материалы
▫️ Что такое куки и как использовать их в веб-разработке
▫️ Как отлаживать код методами консоли
▫️ Бесплатный курс по Docker
▫️ Какие технологии лучше всего использовать для стилизации в 2023 году
▫️ Как подготовиться к собеседованию
Ещё у сообщества есть чат, в котором можно задать любой вопрос по фронтенд-разработке.
Канал: @karpovdev
Доступные таблицы - часть 2
Примеры визуализации и хорошего UX для разного рода таблиц.
https://www.smashingmagazine.com/2022/12/accessible-front-end-patterns-responsive-tables-part2/
Креш курс по TypeScript для React разработки (и не только)
https://profy.dev/article/react-typescript
Бесплатная школа программирования от Сбера — «Школа 21» открыла набор заявок на обучение в Сургуте!
Школа даёт возможность любым кандидатам от 18 лет, успешно прошедшим отборочные этапы, бесплатно получить востребованное образование в сфере ИТ.
Чтобы поступить в Школу совершенно неважно, какие у тебя были предыдущие знания, результаты ЕГЭ, опыт работы, умение программировать и наличие дипломов.
В «Школе 21» можно изучать цифровые технологии самых разных направлений и сфер: от алгоритмов и графики до мобильной разработки, Big Data и многое другое. В основе обучения лежит уникальная методика «равный равному»: без менторов, лекций и оценок — только индивидуальная и коллективная работа над проектами.
Сейчас кампусы есть уже в трех городах — Москве, Казани, Новосибирске и в начале 2023 года откроется в Сургуте. Уже сейчас можно подать заявку на обучение в «Школе 21» в Сургуте по ссылке
Как собрать, покрыть тестами и опубликовать TypeScript-пакет в npm в 2022 году
https://habr.com/ru/company/otus/blog/704398/
4 самых популярных запроса о Vue.js 3 на StackOverflow
https://javascript.plainenglish.io/4-top-rated-queries-about-vue-js-3-on-stackoverflow-90beaff3b285
Интегрируем recaptcha в React приложение
https://blog.openreplay.com/implementing-recaptcha-in-react/
☃️ Бесплатно освойте профессию дизайнера с нуля. Вместе сделаем вам портфолио из 4+ работ с личной поддержкой от наставника.
Что вы получите?
— Фидбэк (мощный разбор всех ДЗ от куратора)
— Тусовка (личный кабинет с уроками + живой чат)
— Портфолио и экзамен (упакуем по урокам и проверим)
— Мастер-класс "как заработать на дизайне" и найти клиента
🔥 Будем делать: веб-дизайн, графический дизайн, анимацию интерфейсов.
→ Начать обучение бесплатно
Программа бесплатного курса:
— Обучение по Figma с нуля и 4+ дз с личным разбором
— Изучение основ дизайна (контент, сетки, композиция т.д.)
— Создание анимации интерфейса
— Все о профессии и доходе дизайнера (как найти клиентов и сколько можно заработать)
👉 Первый урок уже сегодня, кликайте сюда и забирайте все бонусы
Разбираемся с новыми API React Router
Данные роута, навигация и обработка ошибок.
https://blog.logrocket.com/react-router-data-navigation-error-handling-apis/
4 способа улучшить вашу форму с CSS селектором :has()
https://austingil.com/css-has-with-html-forms/
Топ 5 альтернатив Webpack
▫️Browserify
▫️ESBuild
▫️Parcel
▫️Rollup.js
▫️Vite.js
Основные концепции и базовая конфигурация каждого из них.
https://blog.openreplay.com/top-five-alternatives-to-webpack/
Как работать со строками в JS
Советы по эффективной конкатенации строк.
https://www.freecodecamp.org/news/efficient-string-building-in-javascript/
Мы не будем говорить в этой рекламе о том, что программисты получают хорошие деньги и не скажем, что обучаться программированию — сложно. Тебе это и так известно.
Вместо этого, мы расскажем, что обучаться на Frontend-developer’a можно без денег.
Чтобы научиться работать с одним из самых популярных языков программирования, не заплатив во время обучения ни копейки, поступайте в Kata Academy. Они не только на отлично обучат тебя JavaScript, но и помогут устроиться на работу с гарантированной ЗП от 80к в месяц. Да, это прописано у них в договоре.
А если ты внезапно не тянешь программу или не смог устроиться на работу с указанной выше зарплатой — ты ничего не платишь. Вообще. Зато если все ОК, платишь 17% с зарплаты уже после трудоустройства.
Нравится такой подход — переходи по ссылке и оставляй заявку: https://clck.ru/3342ai
Бесконечный 3D слайдер на CSS
https://css-tricks.com/css-infinite-3d-sliders/
Сила CSS колонок
О возможностях и удобстве использования свойства columns в CSS
https://medium.com/codex/the-true-power-of-css-columns-2e620ad66282
Новые единицы измерения для viewport
https://12daysofweb.dev/2022/new-viewport-units/
Просим ChatGPT создать ToDo App
Может мы уже наконец встретились с заменой программистов на AI?
https://blog.bitsrc.io/ad347ad74c51
Настройка Webpack 5
Пошаговое руководство по настройке сборщика Webpack 5 для совместной работы с такими инструментами как Pug, Sass, JS, React и Markdown.
https://habr.com/ru/post/701724/
React: работа с 3D-графикой
Рендерим модели и объекты с React Three Fiber, React Three Drei и Three.js
https://habr.com/ru/company/timeweb/blog/704024/
Практическое руководство по CSS media queries
Синтаксис, использование media через CSS, HTML, JS, основные правила.
https://stackdiary.com/css-media-queries/
Освоить веб-разработку с нуля за 10 месяцев — реально, если правильно выстроить программу и усердно заниматься. Упорство зависит от вас, а о программе позаботился Яндекс Практикум.
▫️ Программа основана на реальных требованиях работодателей к младшим специалистам.
▫️ Интерактивный тренажёр помогает освоить теорию и закрепить её в тестах.
▫️ Практика идёт на учебных проектах для портфолио.
А ещё на курсе много работы с опытными специалистами:
— наставники-разработчики разбирают сложные темы на живых вебинарах.
— команда поддержки отвечает на вопросы.
— код-ревьюеры проверяют проекты и подсказывают, как их улучшить.
— кураторы помогают с организацией и расписанием.
— карьерный центр учит работать с резюме, мотивационными письмами, портфолио и собеседованиями.
Наших выпускники находят работу в новой сфере. Они берут проекты на фрилансе, устраиваются в стартапы и крупные компании — Яндекс, ВТБ, МТС, Перекрёсток, Playrix, Сбер и другие.
Протестируйте формат курса бесплатно →
Используем псевдо-селектор :modal
О работе с псево-элементами и псевдо-селекторами и конкретно с селектором :modal
https://blog.logrocket.com/css-modal-pseudo-selector/
