Pull to refresh
11
0
Вера @RVera

Пользователь

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

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



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

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

Советы по CSS, которые вы вряд ли найдете в самоучителях

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

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



Ниже изложено то, чему руководства по CSS меня не научили.
Total votes 41: ↑37 and ↓4 +33
Comments 24

Как я создал меняющую настроения анимацию с помощью масок CSS

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

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



В этой статье мы создадим простую анимацию лица с разными выражениями, а в процессе узнаем немного о CSS.
Читать дальше →
Total votes 20: ↑20 and ↓0 +20
Comments 6

8 облачных анализаторов логов для оценки рабочей среды

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

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

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



Если вы ищете решение для мониторинга и анализа логов ваших веб-приложений, включая инфраструктуру, вы можете рассмотреть следующие средства для работы с логами. Большинство из них имеют слегка урезанную бесплатную версию, в которой вы можете попробовать поработать.
Читать дальше →
Total votes 14: ↑14 and ↓0 +14
Comments 2

10 перспективных поисковых роботов для улучшения SEO

Reading time 5 min
Views 10K
Выполните тщательную SEO проверку своего сайта для улучшения ранжирования в поиске.

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



Однако, если вам необходимо более детально изучить различные элементы SEO, тогда стоит рассмотреть возможность использования более продвинутых, комплексных инструментов.
Читать дальше →
Total votes 21: ↑13 and ↓8 +5
Comments 3

CSS Grid — швейцарский армейский нож для макетов сайтов и приложений

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

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


В основе структуры CSS Grid находится основной контейнер, представляющий собой обычный div, имеющий margin, border и padding. Для создания CSS grid контейнера добавим свойство display: grid. Элементы сетки — это потомки, размещенные внутри родительского контейнера. Они обычно определяются как список, описывающий header, sidebar, footer или другие аналогичные элементы макета сайта, зависящие от его дизайна.
Читать дальше →
Total votes 29: ↑29 and ↓0 +29
Comments 21

Улучшенные эффекты с режимом смешивания фоновых слоев в CSS

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

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

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

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



Как бы то ни было, эта статья будет посвящена background-blend-mode, свойству, которое пользуется наиболее широкой поддержкой, и возможностям его использования для создания на своем сайте привлекательных фонов и фотоэффектов, которые когда-то были возможны только в Photoshop.
Читать дальше →
Total votes 22: ↑22 and ↓0 +22
Comments 3

10 бесплатных инструментов диагностики SSL/TLS для веб-мастера

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

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



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

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

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

Следующие инструменты будут полезны в устранении подобных проблем.
Читать дальше →
Total votes 20: ↑19 and ↓1 +18
Comments 0

Краткое руководство по переменным в CSS (причины использования, синтаксис и примеры)

Reading time 6 min
Views 13K


Я уже достаточно давно экспериментирую с CSS-переменными. Если вы к ним еще не подступались, вы можете воспользоваться этим кратким руководством, чтобы быстро во всем сориентироваться и приступить к работе.
Total votes 28: ↑24 and ↓4 +20
Comments 8

Актуальна ли проблема инъекций в JavaScript?

Reading time 3 min
Views 5.9K
В былые времена, когда веб разработка строилась на том, что серверные приложения направляли запросы в реляционные базы данных и выдавали на выходе 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.


Читать дальше →
Total votes 27: ↑17 and ↓10 +7
Comments 11

Information

Rating
Does not participate
Location
Россия
Registered
Activity