29203
🚀 Статьи, новости, туториалы по frontend разработке. http://jem-space.ru Admin: @jem_jem Пишу в @five_a_m Хорошие серваки от DigitalOcean: https://m.do.co/c/1351d64475ee Реклама: http://bit.ly/2NxmVDu
Большое событие для фронтенд-сообщества — конференция «Я💛Фронтенд 2024».
Встречаемся 23 марта в Москве и онлайн!
В один день в одном месте соберутся ведущие специалисты в области разработки, чтобы поделиться последними новостями веба, узнать много интересного от крутых экспертов своей области, и, конечно, пообщаться с другими участниками сообщества.
Узнайте больше информации о программе и спикерах конференции на сайте.Реклама. ООО "Яндекс". ИНН 7736207543
Разбираемся с StyleX — одним из новых подходов к написанию стилей.
Обзор различных техник по работе с CSS и как StyleX может быть полезен на вашем проекте.
https://blog.logrocket.com/exploring-stylex-new-generation-styling-libraries/
Capo.js: улучшаем перформанс вашего приложения за 5 минут
Capo.js — инструмент, который проверяет разметку в head и сортирует элементы для улучшения скорости загрузки приложения.
Конечно, не стоит доверять ему на 100%, но, как минимум, покажет вам возможные варианты для оптимизации.
https://frontendmasters.com/blog/capo-js-a-five-minute-web-performance-boost/
React + SignalDB
Как работает SignalDB и как интегрировать реактивную клиентскую базу данных с React.
https://blog.logrocket.com/using-signaldb-react/
Играемся с бесконечностью в CSS
О том, как можно использовать значение infinity и в какие максимальные значения его интерпретируют браузеры.
https://codersblock.com/blog/playing-with-infinity-in-css/
Чистая архитектура React приложения
Одна из возможных реализаций подхода чистой архитектуры для React + Redux приложения. Данный подход позволяет изменять/заменять любые модули с минимальными затратами, однако требует дополнительной работы при реализации.
https://github.com/eduardomoroni/react-clean-architecture
Лучший способ отцентровать div
Обзор методик центрирования элементов на странице.
https://www.joshwcomeau.com/css/center-a-div/
Итак, вы думаете, что знаете Git? Часть вторая: новое в Git
О новых фичах в Git и их применении.
https://habr.com/ru/articles/794252/
Продвинутое использование селектора :is()
https://www.bram.us/2023/01/17/using-is-in-complex-selectors-selects-more-than-you-might-initially-think/
Как отобразить радар-чарты в вебе
Создаем удобные и переиспользуемые компоненты для отображения данных в виде радар-чартов.
https://www.smashingmagazine.com/2024/02/draw-radar-charts-web/
Появление WebGL изображений при скролле
Эффект обратной пикселизации изображений при скролле с использованием WebGL и GSAP
https://tympanus.net/codrops/2024/02/07/on-scroll-revealing-webgl-image-explorations/
Демо | GitHub
Оборачиваем в Docker ваше NextJs приложение с помощью Github Actions
Пошаговый туториал с конфигами, позволяющий настроить билд приложения с Github Actions.
https://mxd.codes/articles/docker-ci-cd-for-nextjs-with-github-actions
От множества к единому - переводим наши проекты в монорепозиторий
В каких случаях стоит хранить проекты в монорепе, и как слить все проекты в один, не потеряв при этом историю комитов.
https://www.aha.io/engineering/articles/monorepo
#css #accessibility
HTML и CSS ошибки, влияющие на доступность. Мой опыт и моего незрячего знакомого Ильи. Часть 5
⭐️⭐️◽️◽️◽️
📖 Читать
Изучаем доступность
Полный туториал по a11y познакомит вас с основами доступности, аспектами разаботки веб приложений с учетом нюансов доступности, и почему это важно.
https://www.youtube.com/watch?v=e2nkq3h1P68
А вы не задумывались, почему пакет is-number в npm имеет большое число скачиваний?
Немного аналитики, или почему не стоит доверять большим цифрам на страницах npm для принятия решения об установке того или иного пакета.
https://shubhamjain.co/2024/02/29/why-is-number-package-have-59m-downloads/
Начните карьеру в ИТ с гранта на обучение до 100% в Центральном университете!
Грант можно получить на одно из направлений бакалавриата по искусственному интеллекту, разработке и бизнес-аналитике. Помимо диплома и практико-ориентированного образования студенты получат:
- Персонализацию учебной траектории;
- Стажировку в одной из лучших ИТ-компании страны;
- Личного ментора на все время обучения;
- Доступ к современному кампусу в центре Москвы.
Получить полную информацию и оставить заявку можно здесь.erid:2VtzqwpPJzv
Реклама. АО "Тинькофф Банк", ИНН 7710140679, лицензия ЦБ РФ № 2673
JavaScript по запросу: как Qwik отличается от React Hydration
Различные подходы в решении проблемы доставки JS приложений: Qwik vs React Hydration
https://thenewstack.io/javascript-on-demand-how-qwik-differs-from-react-hydration/
HTML streaming
Особенности реализации, на которые стоит обратить внимание, для того, чтобы использовать все преимущества данной технологии.
https://aralroca.com/blog/html-node-streaming
Привет, меня зовут Артемий.
Я фронтенд-разработчик в Merk Team, работаю в креативной лаборатории, где мы обкатываем новейшие технологии на закрытых внутренних проектах, чтобы потом применять их в коммерческих.
На этой неделе я веду телеграм-канал компании, где работаю, от своего имени. Там я делюсь своими мыслями о фронтенд-разработке, кроссплатформе, нетворкинге и расскажу, как мы разрабатываем собственную 3D-игру в вебе.
Подписывайтесь, чтобы читать и приходите общаться в комментариях: /channel/merkteam
Работе с селектором :has
Интерактивное руководство от Ахмада Шадида.
https://ishadeed.com/article/css-has-guide/
Front-End Architecture 101 - Nir Kaufman @ ReactNYC
Доклад про архитектуру front end проектов: о том, с чего стоит начинать разработку и почему библиотеки и технологии не так важны при реализации.
https://www.youtube.com/watch?v=o8THlN8hgcw
Скажите что-то на карьерном
Тинькофф в поиске крутых ИТ-спецов. С компании — профессиональный рост, интересные финтех-задачи, решение бытовых забот и работа там, где вы живете. С вас — выбрать вакансию и откликнуться тутАО «Тинькофф Банк», ИНН 7710140679
Что такое CSS Motion Path
Как анимировать элементы по траектории с CSS Motion Path.
https://www.letsbuildui.dev/articles/what-is-css-motion-path/
ХОЧЕШЬ ПОВЫШЕНИЕ В 2024 ГОДУ? 😎🔥
Согласно опросу, проведенному компанией Solo.io в 2022 году, на текущий момент 85% организаций переводят свои IT-системы на микросервисную архитектуру.
Но специалистов, которые глубоко понимают все тонкости и нюансы микросервисной архитектуры не так-то много.
Самое время разобраться в микросервисной архитектуре и стать более востребованным специалистом.
🚀 Стартуем 26 февраля.
Курс ведет действующий архитектор Кирилл Ветчинкин. Он успешно реализовал проекты с применением микросервисов для Мегафона, Теле2, ВСS Brокer, СберМаркет. Постоянный спикер крупных IT-конференций.
На курсе вы:
📌 Изучите и отработаете более 20 паттернов микросервисной архитектуры
📌 Познакомитесь c Domain Driven Design
📌 Научитесь декомпозировать систему на микросервисы с помощью Event Storming и DDD
Полная программа ТУТ
А самое главное — будет поддержка от эксперта, чат с одногруппниками и интересное практическое задание. Сертификат об участии по итогам прохождения курса.
Курс ориентирован на системных аналитиков и разработчиков, которые хотят больше погрузиться в архитектуру современных IT систем.
👉 Узнай больше о курсе Реклама. ИП Ветчинкин К.Е. ИНН: 773376451099 Erid: 2VtzqwsLbJh
Иммутабельные изменения массивов с Array.prototype.with
Заметка о том, как with поможет с модификацией массивов, создавая новую копию с изменениями.
https://web.dev/blog/array-with?hl=en
‼️Всем кодерам посвящается‼️
Code ready — лучшие подборки эффектов, анимаций и многое другое для твоих проектов, сразу с готовым кодом и примером их использования.
🪩 Расставь приоритеты, добавь лёгкости в свою работу и становись лучше с @code_ready
За гранью пикселей и rems в CSS - относительные единицы измерения основанные на viewport
Частые ловушки, в которые попадают разрабочики при использовании относительных единиц измерения в CSS.
https://techhub.iodigital.com/articles/going-beyond-pixels-and-rems-in-css/relative-length-units-based-on-the-viewport
Разбираемся с Interaction to Next Paint
О чем говорит новая метрика Core Web Vital и как ее можно оптимизировать.
https://blog.logrocket.com/exploring-interaction-next-paint-new-core-web-vital/
Как получить реальный опыт во фронтенд-разработке за 7 дней?
А именно:
- Сверстать веб-сайт на HTML + CSS;
- Реализовать функционал на JavaScript;
- Пощупать фронтенд-фреймворк Angular;
- Подключить Backend и загрузить сайт на хостинг.
В итоге своими руками разработаешь качественный сайт, который не стыдно добавить в портфолио или продать.
Такой опыт можно получить на бесплатном практикуме от Айтилогии с поддержкой от опытных разработчиков на каждом этапе.
👉 Приходи на бесплатное обучение и зови с собой друзей
Бонусом получишь гайд для поиска работы и заказов на фронтенд-разработку.