Pull to refresh
0
Михаил Р. Калинин @kamiramread⁠-⁠only

User

Send message

Ещё один способ устранить ВОШ

Reading time3 min
Views26K

Задача


ВОШ — эффект, возникающий при стилизации текста подключаемым шрифтом, не установленным на компьютере пользователя. Проявляется, когда подключаемый шрифт ещё не успел скачаться, и стилизуемый текст отображается следующим шрифтом из значения свойства font-family этого элемента. Такое переключение шрифтов также может повлиять на размеры элемента, если они зависят от размеров текста в нём.
Эффект известен также как FOUT — так его назвал Пол Айриш.

При общих моментах, есть и особенности. Например, в Файрфоксе текст, который нужно будет отрисовать нестандартным шрифтом, в течение 3 секунд не отображается, в Хроме тоже есть подобная задержка. Если шрифт успеет скачаться за это время, текст отобразится сразу нужным шрифтом.

На эту тему здесь была такая статья. В ней последствия ВОШ рекомендовалось нивелировать грамотной игрой со шрифтами. К сожалению, иногда подключаются такие шрифты, которые слишком отличаются по характеристикам от стандартных.
Подробности

Время подключать исходники. Введение в Source Maps

Reading time19 min
Views55K
В современной разработке ваш код сильно отличается от кода на «боевом» сервере (production) после компиляции, минификации, объединения и разных оптимизаций. Тут-то и вступают в игру карты кода (source maps), показывая точное соответствие элементов готового рабочего кода проекта и вашего кода разработки. В этом вводном уроке мы возьмём простой проект и запустим его с помощью различных компиляторов JavaScript с целью посмотреть работу карт кода в браузере.
Читать дальше →

Shodan – самый страшный поисковик Интернета

Reading time3 min
Views703K


«Если люди не могут найти что-то в Google, они думают, что это не сможет найти никто. Это не так», – утверждает Джон Мэзерли, создатель Shodan, самого страшного поискового движка Интернета.

В отличие от Google, который ищет в Сети простые сайты, Shodan работает с теневыми каналами Интернета. Это своего рода «черный» Google, позволяющий искать серверы, веб-камеры, принтеры, роутеры и самую разную технику, которая подключена к Интернету и составляет его часть.

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

Автопрефиксер — окончательное решение проблемы префиксов в CSS

Reading time4 min
Views58K
Автопрефиксер — утилита нового поколения для добавления префиксов к экспериментальным свойствам из CSS 3. Она берёт с Can I Use последние данные о префиксах и популярности браузеров, читает ваш файл стилей, находит свойства и значения, которым действительно нужны префиксы и добавляет их.

Вы просто пишите обычный CSS:
a {
    transition: transform 1s
}


Автопрефиксер сам заменит нужные (и только нужные) свойства и значения (обратите внимание на -webkit-transform):
a {
  -webkit-transition: -webkit-transform 1s;
  -o-transition: -o-transform 1s;
  transition: -ms-transform 1s;
  transition: transform 1s
}


Эта утилита работает во время выкладки сайта на сервера (и на машине программиста во время разработки), так что не заметна для клиентов и не требует какой-то поддержки от браузеров.

Проблема


К сожалению текущие инструменты плохо решают задачу:
  • Писать вереницы свойств руками — очевидно плохое решение. Такой код невозможно читать, легко забыть поправить остальные свойства при редактировании.
  • В Sass и LESS вам нужно самому следить за актуальностью префиксов и копировать примеси из проекта в проект. К тому же примеси могут решить проблему только у свойств, а не у значений (например, calc()).
  • Compass или Bourbon уже лучше, там список примесей хранится централизовано и его легче держать актуальным (но практика показывает, что обычно в примеси добавляют все префиксы не следя за актуальностью). Проблема значений всё так же не решена.
  • Самая главная проблема Sass и LESS, что вам всё равно нужно постоянно думать «из CSS 3 это свойство или нет?» — и в зависимости от этого использовать примесь или нет. Эту проблему немного решил Stylus — у него синтаксис примесей не отличается от обычных свойств, так что префиксы добавляются невидимо. Впрочем, проблема актуальности и значений всё равно остались.
  • Есть ещё скрипты добавления префиксов прямо в браузере, например Prefix Free, но лучше всего обрабатывать стили на этапе разработки и выкладки, а не повторять обработку каждый раз в браузере клиентов.

Понятно, что языки препроцессоров не позволяют решить проблему полностью, нужен был фундаментально новый инструмент.
Читать дальше →

Общение между окнами одного браузера средствами cookie

Reading time2 min
Views28K
Статья будет очень короткой, но описывает неплохой способ обмена данными между окнами в одном браузере.

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

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

MySQL. Выбор случайных строк в один запрос

Reading time3 min
Views19K

Что имеем?


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

Таблица(test) имеет следующую структуру:
  • — pk_id ( первичный ключ )
  • — id ( поле заполненное разными числами )
  • — value ( поле заполненной с помощью rand() )

Первичный ключ не имеет дыр и начинается с 1.
Читать дальше →

Функциональное программирование в шелле на примере xargs

Reading time6 min
Views24K
Abstract: рассказ о том, как быстро и красиво делать обработку списков в шелле, немного мануала по xargs и много воды про философию то ли программирования, то ли администрирования.

Немного SEO-оптимизации: карринг, лямбда-функция, композиция функций, map, фильтрация списка, работа с множествами в шелле.

Пример



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

Это не реальная «задача», это учебный пример, решая который (в решении будет однострочник) я расскажу про очень необычный и мощный инструмент системного администрирования — линейное функциональное программирование. Линейное оно, потому что использование пайпа "|" это линейное программирование, а использование xargs позволяет превратить сложную программу с вложенными циклами в однострочник функционального вида. Целью статьи будет не показать «как найти размер библиотек» и не пересказать аргументы xargs, а объяснить дух решения, пояснить стоящую за ним философию.

Лирика


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

Другой выглядит так:
Применить к списку функцию, которая применяется к каждому элементу списка, если этот элемент непустая строка и размер файла, с этим именем не нулевой, добавить к сумме.

Даже словами видно, что второй вариант короче.
Читать дальше →

Разработка сайта — от первой встречи с заказчиком до сдачи проекта, или как быть фрилансером и выжить

Reading time12 min
Views74K
Привет, Хабр!

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

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

Я попробую описать весь процесс создания сайта с собственной и, как мне кажется, более приближенной к жизни для большинства точки зрения. Просто в один момент я решил уйти из компании, где я работал по найму, и начать делать своё дело — без стартового капитала, офиса и какого бы то ни было прикрытия «пятой точки»; разве что отсутствия острой необходимости в съеме жилья и наличия питерской прописки.

Кому интересно — добро пожаловать под кат!
Читать дальше →

Главный принцип хорошего кода

Reading time9 min
Views86K
За двадцать лет разнообразного программирования я сформулировал, убежден, главнейший принцип хорошего кода. Опираясь на него, мне и моим коллегам удавалось приводить в порядок самый страшный код, объединять в команде малосовместимых программистов и годами поддерживать системы без лишнего нытья.

Прочтение этой статьи: 15 минут
Осмысление методики: 10 минут
Ощутимые результаты: 30 минут

Итак,

Как стать фрилансером

Reading time8 min
Views76K
Формирование виртуальной личности

Сетевая жизнь ничем не отличается от реальной. Врать или не врать это ваше личное дело. Но несколько простых правил негативно влияющих на ваш заработок стоит запомнить:
  • вам нет 18. Стереотип безответственной школоты ничем не уничтожить
  • вконтакте вас зовут Вася, на бирже Петя, а вебмани будет выдавать, что вы Маша. Мало кто задумывается в самом начале пути о своём виртуальном профиле, а зря, потом уже ничего не изменить. Подумайте не только о достоверности вводимых данных, но и о их «чистоте». Если юзер под вашим ником будет на форуме phpclub-а просить научить его программировать, то будьте готовы к внезапно потерянным клиентам.
  • дайте будущему заказчику максимум информации о себе: телефон, скайп, аська, номера кошельков и счетов.
  • уделите внимание социальным сетям. Ни что так не компрометирует исполнителя, как страничка вконтакте содержащая мат, падонские выражения и т д
  • поставьте себя на место заказчика и проверьте на чистоту и логичность всю эту информацию через поисковые системы
  • старайтесь писать без ошибок и опечаток. Про матершину в общении с заказчиком думаю даже говорить не стоит.

Привыкайте жить в новую эпоху…
Читать дальше →

Самый важный инструментарий

Reading time5 min
Views22K
Давно хотел написать на данную тему, но создавая топик, подвис минуты на две, пытаясь понять, куда его запихнуть (в какую тему). В итоге запихнул в программирование, но тема актуальна вообще для всего хабра в целом. Речь идет о глазах.

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

Приступим.
Читать дальше →
2

Information

Rating
Does not participate
Location
Фрязино, Москва и Московская обл., Россия
Date of birth
Registered
Activity