29203
🚀 Статьи, новости, туториалы по frontend разработке. http://jem-space.ru Admin: @jem_jem Пишу в @five_a_m Хорошие серваки от DigitalOcean: https://m.do.co/c/1351d64475ee Реклама: http://bit.ly/2NxmVDu
Сила 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/
Преобразуем макет в разметку
Советы для начинающих по верстке макетов: разбивка на блоки, порядок верстки и семантика.
https://www.htmhell.dev/adventcalendar/2022/1/
Релиз Vite 4
Что нового и как мигрировать с Vite 3 в статье.
https://vitejs.dev/blog/announcing-vite4.html
Объясняем работу flame charts из вкладки Perfomance на примере
Неочевидные результаты отображения чартов при исследовании перфоманса.
https://calendar.perfplanet.com/2022/make-sense-of-flame-charts-in-performance-tab-by-example/
Дебажим тесты с React Testing Library и методом debug()
https://blog.logrocket.com/using-react-testing-library-debug-method/
Используем npm query для менеджмента зависимостей
CLI инструмент для аудита установленных пакетов, в том числе поиска недостающих, и определения пакетов, зависимых от других.
https://blog.logrocket.com/npm-query-better-dependency-management/
Набор CSS анимаций на все случаи жизни
Выбираете анимацию, жмете like и download и копируете сгенерированный код
https://animista.net
Полное руководство по Web Workers
Web Workers позволяют улучшать производительность приложений за счет вынесения тяжелой логики из основного потока. В статье описаны способы работы с воркерами, а также их ограничения.
https://www.sitepoint.com/developing-faster-javascript-apps-the-ultimate-guide-to-web-workers
Самый недооценённый канал для фронтендеров
Контент создаётся вместе с тимлидами с опытом работы в Вконтакте, Яндексе, 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/
Доступные front-end паттерны для отображения таблиц
Зачастую таблицы с данными не умещаются в экраны планшетов и смартфонов. Посмотрим, как решить проблему стилизации и читаемости в таких ситуациях.
https://www.smashingmagazine.com/2022/12/accessible-front-end-patterns-responsive-tables-part1
JavaScript с нуля - основы языка и практика для начинающих
Новый курс от Антона Ларичева по основам JavaScript. Этот курс является первой частью курсов по JavaScript, которая направлена на детальное изучение основ языка и его работы "под капотом". Курс подойдёт даже тем, кто не знаком с JavaScript.
В курсе мы детально изучим: основы JavaScript, функции высшего порядка, stack вызовов, контекст исполнения, scope chain, замыкания, работу с DOM, FormData, Local storage. В конце курса реализуем проект трекер привычек - полноценное web приложение на чистом JS.
До 15 декабря: Всего 1390 руб вместо 5990 руб👉 Посмотреть подробнее
Уже знаете JS? 🔥 Другие курсы для продвинутых разработчиков:
🖥 TypeScript с нуля
🖥 Docker и Ansible - deploy и управление Swarm
🖥 Node.js с нуля
🖥 React и Next.js с нуля
🦊 Nest.js с нуля
🖥 Микросервисы - паттерны и практика построения
Что разработчики должны знать о режимах экономии памяти и энергии в Chrome
https://developer.chrome.com/blog/memory-and-energy-saver-mode/
5 способов сделать ваш JS код более функциональным
https://www.sitepoint.com/make-javascript-functional/
Фронтендеры, ловите лайфхак:
Все макеты для верстки уже нашли и бесплатно выкладывают на канале Макеты Figma.
Макеты для верстки: @figma_templates
Рефакторинг на максималках
Сборник правил от Саши Беспоясова, который поможет облегчить рефакторинг кода.
https://refactor-like-a-superhero.vercel.app/ru
Frontend Vollex – здесь команда фронтендщиков из OZON обучает создавать красивые сайты и приложения, используя такие эффекты.
Канал читают как новички, так и опытные программисты. Подписывайся: @vollex_frontend
Что нового в DevTools (Chrome 108)
https://developer.chrome.com/en/blog/new-in-devtools-108/