В Интернете найдется немало статей, посвященных адаптивным логотипам. Наиболее популярным примером является сайт Responsive Logos, который показывает различные варианты известных логотипов для разных размеров экрана. Когда я впервые увидел это, я подумал, что это не более, чем просто ловкий трюк. В конце концов, это просто div для спрайта большого изображения в качестве фона. Так было до того момента, пока я не услышал доклад на Smashing Conference от MikeRiethmuller под названием «За пределами медиазапросов». Кроме того, я настоятельно рекомендую прочитать его же статью «Большой потенциал SVG».



Я узнал две вещи, которые меня потрясли:

1. При использовании SVG вы можете отказаться от атрибута viewBox и установить новую систему координат на вложенных элементах SVG путем применения нового viewBox. (Да, я знаю. Это звучит странно. Ниже я объясню все более подробно).
2. Когда вы используете медиазапросы внутри SVG-файлов, а затем вставляете изображение через тег img или в качестве фонового изображения CSS, медиазапросы привязаны к ширине изображения. Практически такое же поведение, как и при использовании контейнерных запросов.

Существуют определенные правила CSS, которые можно найти в любом учебнике. Но есть также правила CSS, которые вы не найдете в пособиях, но столкнетесь с ними, как только начнете писать код. Я уверен, вы уже разобрались в том, как выровнять элемент по вертикали или создать сложный макет. Мы не будем об этом говорить.

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



Ниже изложено то, чему руководства по CSS меня не научили.

Помните мультфильмы, которые мы смотрели в детстве? В то время они были олицетворением анимации. Сейчас анимация – это не только мультфильмы, мы встречаем ее почти каждый день, проверяя телефон или используя любое устройство, имеющее экран.

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



В этой статье мы создадим простую анимацию лица с разными выражениями, а в процессе узнаем немного о CSS.

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

• планирование производительности
• раннее обнаружение проблемы
• актуальная отчетность
• управление доступностью

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



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

Выполните тщательную SEO проверку своего сайта для улучшения ранжирования в поиске.

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



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

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

Вероятно, вы уже знакомы с блоковой моделью CSS для обычных элементов. Давайте начнем с аналогичного «общего обзора» для CSS Grid:


В основе структуры CSS Grid находится основной контейнер, представляющий собой обычный div, имеющий margin, border и padding. Для создания CSS grid контейнера добавим свойство display: grid. Элементы сетки — это потомки, размещенные внутри родительского контейнера. Они обычно определяются как список, описывающий header, sidebar, footer или другие аналогичные элементы макета сайта, зависящие от его дизайна.

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

Когда вы слышите обсуждение функций CSS Blend Modes, то обычно речь идет о трех новых свойствах CSS, которые получили хорошую поддержку в современных браузерах.

Вот эти свойства:

• background-blend-mode — для смешивания фоновых изображений, градиентов и цветов фона элементов;
• mix-blend-mode — для смешивания элементов с другими элементами;
• isolation – менее используемое свойство, которое применяется вместе с mix-blend-mode для предотвращения смешивания элементов.

Как бы то ни было, эта статья будет посвящена background-blend-mode, свойству, которое пользуется наиболее широкой поддержкой, и возможностям его использования для создания на своем сайте привлекательных фонов и фотоэффектов, которые когда-то были возможны только в Photoshop.

Вы часто вынуждены решать проблемы, связанные с SSL / TLS, если работаете веб-инженером, веб-мастером или системным администратором.

Существует множество онлайн-инструментов для работы с SSL-сертификатами, тестирования слабых мест в протоколах SSL/TLS, но когда дело доходит до тестирования внутренней сети на основе URL, VIP, IP, тогда они вряд ли будут полезны.



Для диагностики ресурсов внутренней сети, вам необходимо отдельное программное обеспечение/инструменты, которые вы можете установить в своей сети и провести необходимую проверку.

Возможны различные сценарии, например:

• имеются проблемы при установке SSL-сертификата на веб-сервер;
• требуется использовать новейший/конкретный шифр, протокол;
• хочется проверить конфигурацию после ввода в работу;
• обнаружена угроза безопасности в ходе проведения тестов на уязвимости.

Следующие инструменты будут полезны в устранении подобных проблем.

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

В былые времена, когда веб разработка строилась на том, что серверные приложения направляли запросы в реляционные базы данных и выдавали на выходе HTML, часто встречался такой код:

// ВНИМАНИЕ: Плохой пример!
function popup(msg: string): string {
    return "<p class=\"popup\">" + msg + "</p>";
}

или такой:

// ВНИМАНИЕ: Плохой пример!
function getName(login: string): string {
    return "SELECT name FROM users WHERE login = \"" + login + "\"";
}

С тех пор мы научились использовать более безопасные подходы.

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

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