Pull to refresh
15
0

Web-разработчик

Делаем разноцветные иконки с помощью SVG-символов и CSS-переменных

Reading time 8 min
Views 53K
Icons

Давно прошли те дни, когда для иконок в вебе использовались картинки и CSS-спрайты. С развитием веб-шрифтов номером 1 для отображения иконок на сайтах стали иконочные шрифты.

Шрифты — векторные, так что вам не нужно беспокоиться о разрешении экрана. Для них можно использовать те же CSS-свойства, что и для текста. В результате вы имеете полный контроль над их размером, цветом и стилем. Вы можете добавлять к ним эффекты, трансформировать или декорировать их. Например, повернуть (rotate), подчеркнуть (underline) или добавить тень (text-shadow).

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

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

TL;DR: этот пост позволяет вникнуть в то, как и почему. Если вы хотите понять весь процесс, читайте дальше. В противном случае вы можете посмотреть окончательный код на CodePen.
Читать дальше →
Total votes 30: ↑28 and ↓2 +26
Comments 18

Отслеживаем действия пользователя с помощью CSS

Reading time 4 min
Views 26K

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


Также здесь мы рассмотрим метод, как получить поведенческую информацию от пользователей используя только HTML и CSS.


Возможно, после прочтения поста, вам покажется что я "изобрел колесо". Так и есть, методы описанные в этом посте не новы, и используют спецификации которые поддерживают практически все браузеры.


Так или иначе, эта информация поможет вам понять один нестандартный метод отслеживания поведения пользователей, который на данный момент нельзя "отключить" (в настройках) или заблокировать (плагинами вроде AdBlock или Ghostery).

Читать дальше →
Total votes 41: ↑40 and ↓1 +39
Comments 49

Рассказ о том, как не дать мне украсть номера кредиток и пароли у посетителей ваших сайтов

Reading time 19 min
Views 25K
Недавно мы опубликовали перевод истории программиста, придумавшего способ распространения вредоносного кода, который собирает данные банковских карт и пароли с тысяч сайтов, оставаясь при этом незамеченным.


Тот пост вызвал живой и эмоциональный отклик аудитории. Кто-то говорил о том, что всё пропало, и теперь он не сможет спокойно спать, кто-то утверждал, что уж его-то проектов это точно не коснётся, кто-то задавал вопросы о том, как от такого защититься… К проблеме, поднятой в предыдущем материале, можно относиться по-разному, но она вполне реальна, поэтому сегодня мы публикуем продолжение истории того, кто ворует номера кредиток. Сегодня он расскажет о методах защиты веб-проектов от потенциально опасного кода.
Читать дальше →
Total votes 37: ↑33 and ↓4 +29
Comments 55

Как я взломал компании, связанные с криптовалютой, и заработал на этом $60 000

Reading time 9 min
Views 79K
image

Биткоин и криптовалюты в целом сейчас у всех на слуху. Моё знакомство с криптовалютами произошло примерно 5 месяцев назад, именно тогда я начал инвестировать в bitcoin и ethereum, курс на тот момент был по $1900 за btc и $89 за эфир. Для того, чтобы вы могли понять, какой профит я получил, скажу, что на момент написания статьи биткоин стоит $18 100, а эфир $830 и продолжает выходить на орбиту вместе с остальными криптовалютами. Подумал, что будет отлично посмотреть насколько безопасны сервисы, в которых я держу свои криптовалютные сбережения, торгую ими или отдаю в доверительное управление.
Total votes 95: ↑87 and ↓8 +79
Comments 42

Доступен PhpStorm 2017.3

Reading time 6 min
Views 21K

PhpStorm 2017.3


Всем привет!


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


Для вступления, я думаю, достаточно. Стоит разве что добавить, что статья является вольным переводом страницы “What’s new”. Скачать новую версию можно по предыдущей ссылке или с помощью Toolbox App. Как всегда, доступна 30-дневная пробная версия. Полную же версию могут использовать обладатели действующей подписки на PhpStorm или All Products pack, а также студенты и разработчики проектов с открытым исходным кодом.


Погнали! (Осторожно, под катом 2873.15 Кбайт картинок.)

Читать дальше →
Total votes 43: ↑43 and ↓0 +43
Comments 130

Основы регулярных выражений в JavaScript

Reading time 10 min
Views 47K
Если вы иногда поглядываете на регулярные выражения, но всё никак не решаетесь их освоить, думая, что всё это невероятно сложно — знайте — вы не одиноки. Для любого, кто не понимает, что такое регулярные выражения, или не разбирается в том, как они работают, они выглядят как совершенная бессмыслица.


Мощная картинка для привлечения внимания :) Осторожно, может засосать!

Но, на самом деле, регулярные выражения — это мощный инструмент, который может помочь вам сэкономить уйму времени. В этом материале мы рассмотрим основы регулярных выражений в JavaScript.
Читать дальше →
Total votes 24: ↑23 and ↓1 +22
Comments 20

Как быстро спроектировать сайт с помощью CSS Grid

Reading time 3 min
Views 59K
image

Модуль CSS Grid — это фантастический инструмент для создания макетов веб-сайтов. Он позволяет вам экспериментировать с макетами быстрее, чем любой другой инструмент, которые я пробовал.

В этой статье я научу вас, как это сделать.

Во-первых, я объясню HTML и CSS, которые нам нужны для этой задачи, которую я разбил на четыре части. Как только вы с этим разберетесь, мы перейдем к экспериментам с макетами.

Если вы совершенно не знакомы с CSS Grid, вам может понадобиться просмотреть мою предыдущую статью Учим CSS Grid за 5 минут.
Читать дальше →
Total votes 42: ↑37 and ↓5 +32
Comments 68

Mysql PARTITION BY YEAR(date) / MONTH(date) / DAYOFWEEK(date)

Reading time 4 min
Views 33K
Зачастую мне приходится иметь дело с таблицами которые содержат редко или даже никогда ни обновляемые данные. Хорошим примером таких данных являются различные логи. Некоторые таблицы регулярно очищаются от устаревших данных, а в некоторых приходится хранить записи «вечно». Поэтому такие таблицы «пухнут» и работа с ними становится тяжелой операцией для всей системы.

Чтобы уменьшить нагрузку на диск и ФС, придумали partitioning, по простому — секционирование. Файл с данными таблицы разрезается по какому-то условию на несколько не больших файлов — партиций. Для случая с логами разумно партиционировать таблицы по полю, содержащему даты события. Часто бывает разумно резать таблицу на partition по году по месяцу или по дням месяца/недели.

Что-то подсказывает что резать придется по полю timestamp.
Читать дальше →
Total votes 28: ↑27 and ↓1 +26
Comments 18

Information

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