Codeca Frontend

Привет, друзья! С вами Маша 😊 Совсем скоро Новый год, а это значит, время перемен! 🎄 Как вы знаете, этот канал был частью проекта Codeca Frontend. Мы вместе с Настей и Олей создавали образовательный и развлекательный контент о программировании тут и на других площадках. Но все меняется, и наш тандем тоже. Теперь каждая из нас отправляется в свое свободное плавание. Хотя вместе вы нас тоже еще обязательно увидите! 😉 Этот канал продолжит жить, и в новом году здесь буду с вами я. Мы продолжим говорить про программирование, фронтенд и IT в целом! Настю и Олю вы можете найти на их площадках: Настя в Telegram: t.me/...dev Настя в TikTok: www.tiktok.com/...dev Настя в YouTube: www.youtube.com/...dev Оля в YouTube: www.youtube.com/...des Оля в Instagram: www.instagram.com/...des Это было непростое решение, но есть и отличная новость: теперь у вас будет в три раза больше интересного и разностороннего контента про программирование! 🚀 Вот такие предновогодние изменения. С наступающим! 🥂

А вы знали, что какое-то время назад в CSS появилась функциональность для каскадных слоев? Все мы знаем принцип каскада в CSS. Но вот в CSS добавили новый механизм для работы с ним, основанный на каскадных слоях. Такие слои в теории могут помочь в управлении порядком применения стилей. Вы можете объявлять стили в одном или нескольких слоях, и они будут применяться в зависимости от порядка этих слоев. При этом стили вне слоев все еще будут в приоритете над остальными. На картинке представлен небольшой пример, как это работает. С одной стороны, такая возможность звучит многообещающе. Но лично я пока не вижу, как ее можно использовать в текущих проектах, разве что для переопределения стилей из импортируемых библиотек, примерно вот так: @import url("https://cdn.com/bootstrap.min.css") layer; @layer { .fs-1 { font-size: 3rem; } } Да, это отличная возможность избавиться от !important, правда если ваш проект не настроен так, что стили из библиотек подкладываются в общий style.css вместе со стилями проекта при сборке. Из-за того, что стили вне слоя всегда будут в приоритете, переопределение через слои не будет работать. Тогда получается, что нужно либо весь проект переводить на использование слоев, или же не использовать их. Возможно, именно поэтому я до сих пор не сталкивалась с этой возможностью в реальной разработке. Подробнее про каскадные слои можно почитать в статье на Doka.

Всем привет! На связи Настя) В определенный момент развития своей карьеры фронтенд-разработчика я начала сталкиваться с вопросом «Куда мне расти?». С одной стороны, казалось, что все основные технологии я уже освоила. Но каждый раз, натыкаясь на новое для себя CSS-свойство или метод в JavaScript, я убеждалась в обратном. «Как же много всего я упускаю» - думала про себя. С учетом того, что в разработке каждый год появляется что-то новое, то, если не менять проект на работе регулярно, риск застыть в старых технологиях казался для меня ощутимым. Ещё в тот момент я стала предпринимать попытки собрать воедино все, что есть в мире фронтенда на сегодняшний день и разложить в конкретный план того, что мне стоит поизучать. Спустя какое-то время, мы с Машей и Олей собрались в Codeca Frontend, и в тот момент эта идея возродилась. К ней добавилась идея того, как полезно было бы новичкам иметь максимально подробный план со всеми ресурсами для изучения, чтобы, идя по нему, можно было оценить, на каком этапе ты сейчас находишься, и сколько еще тебе осталось до твоего первого собеседования. Так появился наш проект - роадмап фронтендера. Честно, столько всего нового, сколько я узнала за время подготовки этого роадмапа, я давно не узнавала. И даже многие идеи постов для этого канала появлялись именно оттуда. В этот роадмап мы вложили все наши знания (и даже чуть больше), собрали их в большой план по шагам, разделили по уровням и темам, и к каждой теме подобрали ссылки на проверенные ресурсы. И действительно, получилось очень объемное и крутое пособие! Мы работали над ним несколько месяцев и вот наконец готовы представить его! 🔗 Приобрести Frontend Roadmap Нам очень волнительно, ведь это первый наш полноценный продукт, и надеемся, что он будет полезен 🙏

Все мы часто используем в работе такие единицы измерения, как vh и vw, в основном, чтобы заставить какой-то блок растянуться на всю область видимости, указав для него width: 100vw; и height: 100vh; Но почти всегда, во всяком случае я забываю, что на мобильных устройствах это будет работать не совсем так, как ожидается. Дело в том, что у мобильных браузеров есть два режима отображение собственного интерфейса - полноценная версия, и более компактная, которая появляется при скролле. Обратите внимание на панель браузера, когда скроллите какой-то сайт на телефоне - она в какой-то момент будет “ужиматься”. Чтобы учесть это, лучше всего заменять vh и vw на dvh и dvw, единицы измерения для динамического вьюпорта. На десктопных браузерах они будут работать без изменений, а вот на мобильных при любом из вариантов отображения браузера - компактном или полноценном - будут подстраиваться под него. Если же все время использовать vh и vw, то при отображении полноценной навигации в браузере будет появляться дополнительный скролл. Этот эффект можно наглядно увидеть на примере с Doka (откройте его с мобильного браузера). К тому же, если верить MDN, у новых значений на данный момент есть полная поддержка на всех современных браузерах. Пожалуй, стоит пойти и заменить все vh и vw на моих проектах на новые единицы. P.S. На эту тему также есть интересная статья на dev.to.

В ответ на пост Несколько месяцев назад мы писали про новый экспериментальный компилятор от React - React Compiler. И вот недавно команда анонсировала бета-версию этого компилятора в своем блоге. Как они пишут, React Compiler будет работать в том числе на версиях React 17 и выше. Кроме того, разработчики Next.js уже поддержали новый компилятор в 15 версии, пока в экспериментальном режиме. Команда React также рекомендует установить плагин ESLint уже сейчас, невазисимо от использования React Compiler. Ждем релиза, и готовимся внедрять в свои проекты, чтобы навсегда забыть про React.memo!)