Как стать автором
Обновить
15
0

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

Отправить сообщение

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

Время на прочтение8 мин
Количество просмотров55K
Icons

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

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

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

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

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

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

Время на прочтение4 мин
Количество просмотров27K

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


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


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


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

Читать дальше →
Всего голосов 41: ↑40 и ↓1+39
Комментарии49

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

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


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

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

Время на прочтение9 мин
Количество просмотров79K
image

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

Доступен PhpStorm 2017.3

Время на прочтение6 мин
Количество просмотров21K

PhpStorm 2017.3


Всем привет!


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


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


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

Читать дальше →
Всего голосов 43: ↑43 и ↓0+43
Комментарии130

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

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


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

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

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

Время на прочтение3 мин
Количество просмотров60K
image

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

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

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

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

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

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

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

Что-то подсказывает что резать придется по полю timestamp.
Читать дальше →
Всего голосов 28: ↑27 и ↓1+26
Комментарии18

Информация

В рейтинге
Не участвует
Откуда
Россия
Зарегистрирован
Активность