29203
🚀 Статьи, новости, туториалы по frontend разработке. http://jem-space.ru Admin: @jem_jem Пишу в @five_a_m Хорошие серваки от DigitalOcean: https://m.do.co/c/1351d64475ee Реклама: http://bit.ly/2NxmVDu
Используем псевдо-селектор :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
Как создать свой первый сайт на JavaScript: бесплатный курс
На бесплатном курсе Нетологии вы познакомитесь с разработкой на JavaScript и сами попробуете написать код — создадите сайт по персонажам вселенной Marvel. Курс подойдёт тем, у кого нет опыта в разработке. Вы оцените JavaScript-разработку изнутри и узнаете, как сделать первые шаги в новую профессию.
Зарегистрироваться: https://netolo.gy/lhP
Друзья!
По итогам розыгрыша рандомным образом билет уходит @ShotMeow 🎉🎉🎉
Остальным желаю удачи в следующих розыгрышах и хороших выходных! ✌️
Создаем физический движок в 2D с нуля на JS
https://ailef.tech/2022/11/12/creating-a-2d-physics-engine-from-scratch-in-javascript/
Альтернативы Create React App
От создания React проекта с нуля до Gatsby и React Starter Kit.
https://blog.openreplay.com/top-alternatives-to-create-react-app/
6 генераторов фона
Подборка инструментов для генерации красивого заднего фона.
https://blog.logrocket.com/best-css-background-generators/
Использование CSS filter, mask-image, mix-blend-mode.
Несколько экспериментов с CSS фильтрами и масками, которые позволяют достичь интересных эффектов.
http://jlzych.com/2022/11/17/experimenting-with-layering-filtering-and-masking-in-css/
👥 Уникальное предложение для Frontend, Go и Python-разработчиков
Друзья, уже в эти выходные, 26–27 ноября, состоится Weekend Offer в VK WorkSpace — единую экосистему из пяти сервисов, которая помогает бизнесу на каждом этапе работы. Не упустите шанс поработать над интересными проектами, креативить и экспериментировать и постоянно прокачивать свои навыки в сфере IT вместе с командой VK WorkSpace.
👉 Узнайте больше о проведении Weekend Offer и отправляйте заявку на участие здесь.
Доступные 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/
Анимируем React компоненты с помощью AutoAnimate
https://blog.logrocket.com/animate-react-components-single-line-using-autoanimate/
DOM - введение для начинающих
Руководство по расположению и геометрии элементов внутри DOM.
https://www.smashingmagazine.com/2022/11/document-object-model-geometry-guide/
Привет! На связи Podlodka Crew. Приглашаем на юбилейный сезон Podlodka Frontend Crew 5 декабря и разыгрываем 1 билет.
В программе — браузерные API и интересные кейсы. Проведи начало зимы с пользой и лови вдохновение на следующий год!
Новые подробности сезона:
❄️ Разработчики из Microsoft и Альфа Онлайн на круглом столе обсудят, почему проекты приходят к PWA, какие с ним бывают проблемы и можно ли с его помощью решить проблемы блокировок нативных мобильных приложений в сторах.
❄️ Разберём API для безопасности и криптографии, использование ключей и узнаем, зачем генерировать, хранить и использовать криптоключи в браузере.
❄️ Научимся безопасно использовать Service Worker API с учётом ограничений и требований.
❄️ Узнаем, как улучшать диалоги с помощью нативных элементов.
👉 забирай билет на сайте
🎁 По традиции разыгрываем билет среди подписчиков. Для участия в розыгрыше заполняй форму, результаты объявим через пару дней!
Интерактивное руководство по Flexbox
https://www.joshwcomeau.com/css/interactive-guide-to-flexbox/
Руководство по CSS анимации
Синтаксис и примеры реализации.
https://blog.openreplay.com/all-about-css-animations/
Как я в десять раз ускорил работу таблицы Google одной строкой CSS
https://habr.com/ru/company/timeweb/blog/593003/
Скролим к фрагменту текста через url параметры
https://blog.jim-nielsen.com/2022/scroll-to-text-fragments/