​Четыре новые функции CSS, которые обеспечивают плавную анимацию и переходы в новых версиях Chrome

Если у вас уже перестал дергаться глаз от времён, когда нужно было поддерживать IE, пришла пора обратить на новые фичи Chrome.

До них в CSS были пробелы в плавных анимациях. Это анимации для входа и выхода. И плавный переход на верхний уровень для закрываемых элементов, таких как диалоговые окна и всплывающие панели. В новых версиях 116 и 117 разработчики решили эти проблемы.

И вот как использовать новые фичи: https://tproger.ru/articles/chetyre-novye-funkcii-css-dlya-plavnoj-animacii-vhoda-i-vyhoda

#веб #chrome #фронтенд

​Вышла новая версия React-фреймворка Next.js 14

26 октября разработчики выпустили новый релиз Next.js. Из основных нововведений: релиз ускоряет время сборки в 2 раза, а Server Actions позволяет выполнять код на сервере.

Что ещё нового в Next 14:
— Ускоренный компилятор: Rust-based компилятор Turbopack обеспечивает стабильность и производительность.
— Fast Refresh ускоряет обновление кода до 94,7%.
— Введены маршруты API для упрощения создания внутренних эндпоинтов.
— Серверные действия позволяют определить функции, выполняемые на сервере и вызываемые из React-компонентов.
— Частичная предварительная отрисовка (Prerendering) оптимизирует отрисовку динамического контента.
— Улучшена обработка метаданных для более плавного пользовательского опыта и предотвращения проблем.
— Запущен новый бесплатный курс Next.js Learn для обучения разработчиков.

Подробнее: https://github.com/vercel/next.js/releases/tag/v14.0.0

#react #веб #фронтенд

​Новые единицы измерения в вебе — svh, lvh и dvh: для чего нужны и как их использовать?

Веб-разработчики знают, что одна из самых распространенных проблем сайтов на мобильных устройствах с использованием vh — это то, что при расчете высоты не учитывается высота панели навигации, которая динамически появляется и исчезает.

Если вкратце, единицы измерения svh, lvh, dvh решают эту проблему, позволяя избавиться от ненужного скролла:
1. SVH (small viewport height) — единица измерения, которая задает самый маленький размер viewport, когда панель навигации отображается.
2. LVH (large viewport height) — задает размеры по самому большому размеру viewport, когда панель навигации скрыта.
3. DVH (Dynamic viewport height) динамически меняет значение высоты относительно того, открыта панель с навигацией или нет.

Их анонсировали несколько месяцев назад, они только начинают входить в обиход. Но эти единицы измерения можно использовать прямо сейчас. Согласно сайту can i use, они поддерживаются во всех современных браузерах.

#веб #фронтенд

Что изменилось в CSS за последние несколько лет

Есть ли во фронтенде что-нибудь, что развивается так же быстро, как CSS в наши дни? Все чаще выходят обновления, позволяющие реже зависеть от замысловатых имен классов, меньше думать о выборе правильной функции и дающие возможность избежать необходимости предварительно вычислять математические параметры.

О том, что нового появилось в в CSS за последние годы вы сможете узнать здесь.

И нет, в статье не будет разбора и упоминания каждой новой функции за последние 5 лет, но в ней вы сможете узнать о новинках, оказавших наибольшее влияние на повседневную работу с CSS.

#веб #фронтенд #css

​​CSS в 2023 году: главные изменения

Не так давно компания Google представила обновления в CSS, вышедшие за прошлый год. А мы выделили для вас главные нововведения и рассказали о них кратко, просто и с примерами кода.

Узнать про архитектурные основы, работу с цветом, типографику, отзывчивую вёрстку и многое другое, вы сможете здесь.

#веб #фронтенд #cs

Тренды и новинки в мире CSS и веб-дизайна

Рассказали о веяниях на 2024 год: что нужно знать, какие скиллы имеет смысл качать, какие инструменты использовать. Среди прочих — разбор ИИ-ассистентов дизайнера и их текущего потолка возможностей с примерами для каждой ниши, будь то вёрстка лэндинга или создание анимаций.

#фронтенд

Что должен знать уважаемый фронтендер в 2024 году

Узнали у middle и senior-фронтендеров, что нужно изучать в 2024 году, чтобы оставаться востребованным специалистом:

— Что должен был уметь фронтендер в 2023 году?(идеальный стэк);
— Какие тренды во фронтенде в 2024 году? Что нужно изучить, чтобы прокачаться?
— Специалистов какого стека не хватает на рынке?

#фронтенд

Интерактивная карта на OpenLayers. Часть 2

Продолжение статьи об интерактивной карте с JS OpenLayers. Какую иконку лучше затягивать на геометку: растровую или векторную? Где OpenLayers справится лучше Leaflet?

#фронтенд

Полезный справочник для фронтенд-разработчика в 2024 году

Этот ресурс представляет собой исчерпывающий план для обучения фронтенду с полезными ссылками и рекомендациями, а также небольшими разборами каждого из этапов: от выбора направления до инструментов и стека.

Для тех, кто предпочитает самообучение, самое то: https://frontendmasters.com/guides/front-end-handbook/2024/

#фронтенд #обучение

Что должен знать начинающий фронтендер?
 
Собрали советы для достижения успеха в профессии от опытного фронтенд-разработчика в одну статью. А также ответили на частые вопросы новичков: от зарплаты и стека до перспектив карьерного роста.

https://tproger.ru/articles/frontend-razrabotka--chem-zanimayutsya-i-skolko-zarabatyvayut-specialisty

#фронтенд #советы

​​6 полезных шпаргалок по CSS, которые сэкономят вам часы работы

Они идеально подходят как для новичков, так и для тех, кто уже неплохо разбирается.

Чит-листы охватывают такие аспекты как:
— CSS Flexbox.
— CSS Grid.
— CSS Positions.
— CSS Display Values.
— CSS Selectors.
— CSS :nth-child Selectors.

Сохраняйте, чтобы не потерять: https://github.com/WebdevShefali/CheatSheets/tree/main

#css #фронтенд