css

Если простыми словами, то Flexbox — это такая структура CSS, которую мы используем для отображения и упорядочивания элементов внутри другого элемента или контейнера.

Цель анимации — обратить на себя внимание. Человек замечает любые движения на уровне инстинктов. Если анимация сделана на высоком уровне и гармонично вписывается в дизайн сайта, то она значительно увеличит уровень обратной связи. В нашей статье мы разберем, что такое CSS3-анимация и как ее использовать.

CSS Grid Layout — это модуль CSS, который разделяет веб-страницу на колонки и строки. В получившейся двумерной сетке могут размещаться разные элементы. Управлять их размером и положением можно с помощью свойств CSS Grid. Они помогают отображать элементы на экране по горизонтали и вертикали без внесения изменений в структуру кода.

Игорь Шатило

Backend Developer в NIX

Не нам вам объяснять, что оптимизация сайта — это очень важно. От того, насколько качественно она настроена, зависит, понравится ли пользователю взаимодействовать с сайтом. Интернет-магазины с низкой производительностью и медленными страницами получат низкие коэффициенты конверсии в поисковой выдаче. В результате бизнес обгонят конкуренты.

Медиа-запросы — это особые правила применения CSS, с помощью которых можно менять стиль элементов, отталкиваясь от устройств, на которых будут просматривать веб-страницу.

Дмитрий Аккерман

Frontend Developer в рекламном агентстве OdesSeo

В прошлой статье мы рассмотрели три основные показателя нового критерия ранжирования Google — Core Web Vitals, предназначенных для измерения пользовательского опыта работы с сайтом. В этой статье я расскажу, что мы делаем для улучшения веб-производительности во время разработки.

Flex-grow является CSS-свойством модуля Flexbox, который отвечает за построение гибких макетов. Модель Flexbox (с англ. «гибкая коробка») довольно популярна, отчасти на ее основе создавался когда-то Bootstrap — фреймворк для создания адаптивных дизайнов. В модуле содержится набор свойств. Они назначаются родительским и дочерним элементам для их распределения по всем правилам современной CSS-верстки.

Онлайн-компиляторы созданы для того, чтобы упростить проверку кода. Вам не нужно скачивать и устанавливать разные приложения на ноутбук: чтобы использовать компилятор, нужно только подключение к интернету. Вы можете проверить код на работоспособность, увидеть ошибки и результат выполнения программы.

Андрей Горленко

Xamarin Developer в IT-холдинге SvitSoft

Процесс создания качественного приложения предполагает использование большого спектра инструментов. 

Бо Бошамп — senior-разработчик и фулстек-архитектор веб-приложений с 20-летним стажем, активный участник опенсорс-проектов и Stack Overflow. А еще — блогер, текст которого о фреймворке Angular практически завирусился. Highload перевел его для вас.

Данил Бурыкин

Основатель Top-Rated Team, автор Free Call Tracking

Идея моего проекта возникла случайно. Я вел диалог с центром бизнес-тренингов о внедрении новой CRM. По итогу стал пытаться реализовать решение на базе горячо любимых Google-табличек. В свое оправдание могу сказать, что причина не только во вполне распространенном случае регресса или карго-культа в отношении «Корпорации добра». Дело в том, что мне представилась счастливая возможность побывать контрактором Google в Барселоне и Лиссабоне, о чем рассказал MC.Today.

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

Украинский стартап Shop-Express помогает предпринимателям и компаниям продавать товары онлайн, создавая функциональные магазины без привлечения разработчиков и дизайнеров. Как это работает, Highload рассказал СEO Shop-Express Алексей Петриченко. Далее — прямая речь.

Разработчики из команды Dev Write Ups опубликовали в блоге на dev.to список из 26 полезных репозиториев GitHub. Вот они. 

Разработчик Тимани Афиф поделился в блоге на dev.to коллекцией из 100 анимированных CSS-загрузчиков, выполненных всего из одного элемента div. Вот они.

Highload собрал несколько IT-школ, где обучают не только всех подряд с нуля, но и уже вполне профессиональных айтишников. Платные онлайн-курсы, тренинги и марафоны помогут глубже изучить возможности JavaScript, Java, C#, PHP и других языков программирования, а также научат пользоваться фреймворками, в том числе Spring и Laravel. Стоимость курсов варьируется от 2,8 тыс. грн в месяц до 15 тыс. грн за девять дней.

Фронтенд-разработчик Хью Хауорт сравнил в блоге на css-tricks.com инструменты сборки нового поколения. Автор постарался в общих чертах описать зачем они нужны и варианты их использования.

Svelte делает стремительные шаги для того, чтобы покорить всю фронтенд-разработку. Теперь к экосистеме «не-фреймворка» добавилась возможность создавать приложения с рендерингом на стороне сервера.

JSS — это относительно новый инструмент для стилизации компонентов. Вследствие этого JSS еще не так сильно распространен . Но его репозиторий на сайте GitHub собрал уже 6.3k звезд на момент написания статьи. Он использует JavaScript для декларативного способа описания правил CSS, помогает в их переиспользовании и избежании конфликтов. Он может компилироваться в браузере, на стороне сервера или во время сборки в Node.js. Он легко интегрируется в другие JS-фреймворки. React-JSS это его адаптация для библиотеки React.js.

Инженер-программист Марко Денич поделился коллекцией лучших, по его мнению, генераторов CSS.

Frontend-разработчик из Индии под ником Gaurav поделился на dev.to пятью бесплатными и, на его взгляд, недооцененными инструментами и ресурсами для ежедневной работы.

Разработчик Тайбор Холтер написал фреймворк Turbo CSS, который сам же называет и языком программирования. Это utility-first фреймворк, но он не содержит готовую огромную библиотеку классов для стилизации, а компилирует на лету только те, что нужны. По словам создателя, в новом фреймворке имена классов CSS создается путем вызова функций и передачи им аргументов.

По данным опроса The State of CSS 2020, больше всего разработчиков в мире, использующих CSS-фреймворки, сейчас заинтересованы в изучении и применении Tailwind CSS. Он опережает конкурентов в этом рейтинге уже второй год подряд. Команда Tailwind предлагает альтернативный подход для поддержки и стилизации HTML-разметки, но у него есть и свои противники. Проштудировав статьи и комментарии на таких ресурсах, как Dev.to, Product Hunt и Codeburst, мы собрали наиболее популярные доводы за и против использования этого фреймворка.

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

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

Минификация (minify) — это простой подход для уменьшения размеров файлов css, js и html. В процессе сжатия все комментарии к коду, переносы строк, лишние табы и пробельные символы удаляются. Это позволяет сэкономить 10…20% от оригинального размера файла.

CSS Extractor вырезает и показывает стили, которые используются только на указанной странице.

Современные браузеры поддерживают сжатый контент, т.к. он является частью спецификации протокола HTTP 1.1. Сжатие текстовых форматов (CSS, Javascipt и HTML) может уменьшить их объем на 70%. Работает все очень просто. Перед отправкой ответа сервер сжимает данные. Браузер при получении сжатого ответа разжимает его и показывает результат.

CSS спрайты — это специальная техника, когда мелкие картинки объединяются в один файл и выводятся не с помощью тега <img>, а с помощью CSS. Допустим, у нас есть большой файл с картинками icons.png. Тогда пример использования выглядел бы так:

Render-blocking элементы приостанавливают загрузку страницы до того момента, пока не будет загружен какой-то внешний ресурс. Например, загрузка CSS:

YUI компрессор — Java утилита для эффективной минимизации Вашей JS/CSS статики.

Minify — это PHP приложение, которое позволяет минимизировать Вашу JS/CSS статику, а также HTML.