CSS-шлюзом (CSS-lock) называется методика из адаптивного веб-дизайна, позволяющая не перепрыгивать от одного значения к другому, а переходить плавно, в зависимости от текущего размера области просмотра (viewport). Идею и одну из реализаций предложил Тим Браун в статье Flexible typography with CSS locks. Когда я пытался разобраться с его реализацией и создать свои варианты, мне с трудом удавалось понять, что именно происходит. Я выполнил много вычислений и подумал, что полезно будет объяснить другим всю эту математику.

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

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

Form Builder



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

Сей опус это вольный перевод публикации Криса Койлера [Chris Coyier] от 2 Июля.

В качестве вступления

Как вы наверняка знаете, CSS свойство table-layout предназначено для управления режимом формирования ширины столбцов в таблице. Оно может принимать следующие значения: авто, фиксировано или наследственно. По умолчанию в браузерах для отображения таблицы используется стандартное поведение: браузер рассчитывает ширину строки как сумму ширины всех ячеек. Следом, по тому же принципу рассчитывает ширину 2-й строки, и если размеры какой-либо ячейки превышают размеры вышестоящей ячейки, перестраивает всю таблицу. Далее определяет ширину 3-й ячейки, 4-й и т.д. В случае если таблица имеет много, очень много рядов, расчет ширины может немного затянуться…

Насколько сложно построить полноценный сервис email-маркетинга? Что для этого нужно предусмотреть? Какие подводные камни могут встретиться на пути пытливых умов разработчиков?



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

Сразу оговорюсь, что в статье рассмотрена только техническая сторона вопроса.

Проблема

Начиная работу над очередным сайтом понадобился datepicker. Самый известный такой datepicker — в jQuery UI, но так как jQuery UI в проекте не использовался — тянуть даже его часть не хотелось, принялся за поиски достойной альтернативы.

Требования следующие:

• Выбор даты, нескольких дат, интервала
• Простота настройки внешнего вида
• Желательно без каких-либо зависимостей кроме jQuery

Требования вполне логичные, ничего сверх естественного.
Каково было мое удивление, когда просмотрев десятка два плагинов я не нашел подходящего.

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

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

Поскольку данные для анализа формируются в php и мне этот язык сейчас ближе всего, то искалась библиотека с интерфейсом для php. В связи с этим мне порекомендовали FANN (Fast Artificial Neural Network) — открытое программное обеспечение для построения сетей. У этого решения есть апи для 15 языков, так что почти каждый сможет выбрать что-то для себя.

Пример. Распознавание языка текста на странице

Для примера возьмем задачу легкую, но недалекую от нашей реальности и от серьезных задач. Допустим есть 1000 документов, на 3-х разных языках. Пусть это будут французский, английский и польский. Наша задача научить нейронную сеть распознавать язык документа. Для этого мы используем самый простой частотный механизм. Но тем не менее его результаты неплохи. Его суть в том, что у каждого языка с разной частотой в тексте встречаются одни и те же символы. Мы подготавливаем 3 больших куска текста для каждого из языков (английский, французкий, польский), посчитаем для каждого символа частоты. Эти данные мы передадим в нейронную сеть, с указанием какой набор частот принадлежит каждому из языков. Дальше нейронная сеть все сделает сама.

Селекторы имеют очень важное значение. Большинство JQuery методов требуют выбора элементов для использования. К примеру, перед тем как прикрепить событие click к кнопке, нужно выбрать саму кнопку.

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

Давайте перейдем к списку!

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

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

Привет, Хабр! В этой статье мы продолжим рассматривать возможности hive — движка, транслирующего SQL-like запросы в MapReduce задачи.

В предыдущей статье мы рассмотрели базовые возможности hive, такие как создание таблиц, загрузка данных, выполнение простых SELECT-запросов. Теперь поговорим о продвинутых возможностях, которые позволят выжимать максимум из Hive.

В этой статье я покажу как создать некоторые эффекты на фотографиях (как на Instagram) с помощью PHP и ImageMagick.

Сегодня внутренняя разработка компании Яндекс — аналитическая СУБД ClickHouse, стала доступна каждому. Исходники опубликованы на GitHub под лицензией Apache 2.0.



ClickHouse позволяет выполнять аналитические запросы в интерактивном режиме по данным, обновляемым в реальном времени. Система способна масштабироваться до десятков триллионов записей и петабайт хранимых данных. Использование ClickHouse открывает возможности, которые раньше было даже трудно представить: вы можете сохранять весь поток данных без предварительной агрегации и быстро получать отчёты в любых разрезах. ClickHouse разработан в Яндексе для задач Яндекс.Метрики — второй по величине системы веб-аналитики в мире.

В этой статье мы расскажем, как и для чего ClickHouse появился в Яндексе и что он умеет; сравним его с другими системами и покажем, как его поднять у себя с минимальными усилиями.

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

Понимая, что изучение каждой потребует время, я решил также спросить совета у нашего опытного администратора, на что получил короткий ответ:

Смотрите в сторону Vesta.

С моей стороны была попытка обратить его внимание на то, что есть и другие бесплатные продукты:

Да, слышал
, а вообще их достаточно: Ajenti, CentOS Web Panel и т.п.

Но руководитель тех. отдела дал довольно ожидаем ответ:

Эти не очень популярны в наших кругах.

Вот так произошло мое первое знакомство с одной из самых популярных бесплатных панелей управления хостингом в рунете — Vesta CP. Мне бы хотелось рассказать Вам, как решение поставленных задач приводит не только к написанию туториалов, но и позволяет познакомиться с интересными людьми, которые вкладывают свою душу в то дело, которые реально приносит им удовольствие. И как следствие, мы с Вами получаем замечательный программный продукт. Ну разве это не чудесно? Приятного и конструктивного Вам чтения…

Большинство создают внешние ссылки через target="_blank" и не знают одного интересного нюанса — страница, на которую мы попадем таким образом, получит частичный контроль над ссылающейся на нее страницей через js свойство window.opener.

Через window.opener.location мы сможем сделать редирект на, к примеру, фишинговую страницу. Это своего рода tabnabbing, только более продвинутый. Так как жертва меньше всего ожидает подмены страницы, в открытой ранее, доверенной вкладке браузера.

Получить базу данных стран, регионов, населенных пунктов с переводом названий и связями бесплатно и без регистрации? Это реально!

При разработке небольшого стартап-проекта с большими амбициями столкнулся с необходимостью в базе данных стран, регионов и городов, с переводом названий хотя бы на самые распространенные языки (английский, русский, испанский, немецкий и т. д.). Готовое решение найдено не было, поэтому стал искать источники, из которых можно спарсить необходимые данные. На ум сразу пришли известные социальные сети. В этой статье уже описывалось получение данных из ВКонтакте, но покопавшись в документации API ВКонтакте, был приятно удивлен, найдя открытые документированные методы получения геоданных:

database.getCountries — Возвращает список стран.

database.getRegions — Возвращает список регионов.

database.getCities — Возвращает список населенных пунктов.

database.getCountriesById — Возвращает информацию о странах по их идентификаторам

database.getCitiesById — Возвращает информацию о городах по их идентификаторам.

Это основные, интересные нам методы, к тому же не требующие авторизации и использования токенов. Больше методов можно посмотреть в разделе документации.

Пример url для обращения к методу получения списка стран представлен ниже (аналогично происходит обращение по протоколу https):
http://api.vk.com/method/database.getCountries?v=5.5&need_all=1&count=10

Недавно мне потребовалось интегрировать в сайт Instagram виджет. Чтобы пользователи видели последние опубликованные фотографии. Может даже подписывались.

Тут же выяснилось, что официального виджета у Instagram нет. Более того, с Instagram можно взаимодействовать исключительно через запросы к API. Никаких тебе JavaScript библиотек, генераторов кода и дизайна. Всё нужно делать руками.

Сразу нашлось множество сторонних сервисов разной степени платности и бесплатности. Объединяло их одно – клиент получает лишь код вызова виджета, всё остальное тянется с сервиса. Меня лично это не устраивало. Почему нет бесплатного standalone решения с открытым исходным кодом? Может быть я плохо искал? В общем, я решил внести свои пять копеек.

Инструкция по созданию виджета и готовое решение под катом.

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

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

Когда я показываю босу, что окончательно пофиксил баг



Когда проджект-менеджер входит в офис

Во время общения с медиа мы в Relap.io часто сталкиваемся с массой заблуждений, в которые все верят, потому что так сложилось исторически. На сайте есть блоки типа «Читать также» или «Самое горячее» и т.п. Словом, всё то, что составляет обвязку статьи и стремится дополнить UX дорогого читателя. Мы расскажем, какие заблуждения есть у СМИ, которые делают контентные рекомендации, и развеем их цифрами.
 

 
 

Пролог

Доброго времени суток! Однажды ко мне на работу пришёл друг, и я ему показал свой свеженаписанный шейдер, на тот момент это была первый серьёзный опыт с ними. Данная микропрограмма преобразовывала изображение с камеры в изображение вязаной кофты.

«Три девицы под окном пряли поздно вечерком.»



Ну как пряли. Не пряли, конечно, а лайкали друг на друга. По условиям конкурса «мисс Салтан» девицы должны были выбрать меж собой лучшую.

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

Вскоре «в светлицу вошел царь — стороны той государь» (показан на рисунке). «Во все время разговора...», — ну понятно в общем.
«Собираем лайки нежности — формируем матрицу смежности», — бодро срифмовал он.
Девицы-красавицы с именами Алена, Варвара и Софья засмущались, но лайки (из балалайки) передали.

Вот что там было:

• Алена получила 1 лайк от Софьи и 2 лайка от Варвары.
• Варвара получила по лайку от Алены и Софьи.
• А Софья получила 2 лайка от Алены и 1 от Варвары.

Царь взял лайки, покрутил гайки, постучал по колесам, пошмыгал носом, причмокнул губами, поскрипел зубами, сгонял в палаты и объявил результаты.

Наибольший вес лайков (7 баллов) получила Софья, но титул «мисс Салтан» достался Алене (15 баллов).


После объявления результатов девицы бросились обратились к царю с просьбой рассказать,- откуда взялись эти странные цифры?

Есть прекрасный сайт www.reformagkh.ru. На нём можно найти, управляющую компанию, закреплённую за домом, сколько денег, на что тратится и всё такое. Но кроме этого можно узнать разные интересные вещи о нашей стране в целом, например, для каждого дома на сайте указана дата его постройки, поэтому можно посмотреть, как строилась Москва с 1900 года:



Ещё более эпичная картинка получается, если посмотреть на Россию целиком: