• Создание адаптивных изображений

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



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

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

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

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



    Ниже изложено то, чему руководства по CSS меня не научили.
    Читать дальше →
  • Как я создал меняющую настроения анимацию с помощью масок CSS

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

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



    В этой статье мы создадим простую анимацию лица с разными выражениями, а в процессе узнаем немного о CSS.
    Читать дальше →
    • +20
    • 10.7k
    • 6
  • 8 облачных анализаторов логов для оценки рабочей среды

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

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

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



    Если вы ищете решение для мониторинга и анализа логов ваших веб-приложений, включая инфраструктуру, вы можете рассмотреть следующие средства для работы с логами. Большинство из них имеют слегка урезанную бесплатную версию, в которой вы можете попробовать поработать.
    Читать дальше →
    • +14
    • 3.8k
    • 2
  • 10 перспективных поисковых роботов для улучшения SEO

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

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



    Однако, если вам необходимо более детально изучить различные элементы SEO, тогда стоит рассмотреть возможность использования более продвинутых, комплексных инструментов.
    Читать дальше →
  • CSS Grid — швейцарский армейский нож для макетов сайтов и приложений

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

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


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

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

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

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

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



    Как бы то ни было, эта статья будет посвящена background-blend-mode, свойству, которое пользуется наиболее широкой поддержкой, и возможностям его использования для создания на своем сайте привлекательных фонов и фотоэффектов, которые когда-то были возможны только в Photoshop.
    Читать дальше →
    • +22
    • 8.8k
    • 3
  • 10 бесплатных инструментов диагностики SSL/TLS для веб-мастера

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

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



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

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

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

    Следующие инструменты будут полезны в устранении подобных проблем.
    Читать дальше →
  • Краткое руководство по переменным в CSS (причины использования, синтаксис и примеры)

    • Translation


    Я уже достаточно давно экспериментирую с CSS-переменными. Если вы к ним еще не подступались, вы можете воспользоваться этим кратким руководством, чтобы быстро во всем сориентироваться и приступить к работе.
    Читать дальше →
    • +20
    • 10.2k
    • 8
  • Актуальна ли проблема инъекций в JavaScript?

    • Translation
    В былые времена, когда веб разработка строилась на том, что серверные приложения направляли запросы в реляционные базы данных и выдавали на выходе 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.


    Читать дальше →