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

Triangle

Примесь triangle (которую дизайнеры Sagi предпочитают называть «chupchick»), добавляет к всплывающей подсказке треугольник. И tooltips становится похожим на диалоговое окно. Но triangle также может использоваться в качестве автономного элемента.

/* 
* @include triangle within a pseudo element and add positioning properties (ie. top, left)
* $direction: up, down, left, right
*/
@mixin triangle($direction, $size: 6px, $color: #222){
  content: '';
  display: block;
  position: absolute;
  height: 0; width: 0;
  @if ($direction == 'up'){
    border-bottom: $size solid $color;
    border-left: 1/2*$size solid transparent;
    border-right: 1/2*$size solid transparent;
  }
  @else if ($direction == 'down'){
    border-top: $size solid $color;
    border-left: 1/2*$size solid transparent;
    border-right: 1/2*$size solid transparent;
  }
  @else if ($direction == 'left'){
    border-top: 1/2*$size solid transparent;
    border-bottom: 1/2*$size solid transparent;
    border-right: $size solid $color;
  }
  @else if ($direction == 'right'){
    border-top: 1/2*$size solid transparent;
    border-bottom: 1/2*$size solid transparent;
    border-left: $size solid $color;
  }
}

Изучая любой язык программирования, полезно знать о его особенностях и уметь эффективно использовать языковые конструкции. Хочу поделиться с вами шорткатами для JS. Эти сокращения в некоторых случаях могут облегчить чтение кода, а также существенно уменьшить его количество. Однако следует помнить, что они могут сыграть с вами злую шутку и, если использовать их повсеместно, ваш код перестанет быть читаемым и поддерживаемым.

Mail.Ru — огромный портал, существующий более 15-ти лет. За это время мы прошли путь от небольшого веб-проекта до самого посещаемого сайта рунета. В состав портала входит огромное количество сервисов, у каждого из которых своя судьба, и над каждым из которых работает отдельная команда. Разработчикам пришлось как следует потрудиться, чтобы на всех проектах — и новых, и старых, и тех, которые присоединились к порталу по мере его развития, — использовалась единая система авторизации. А через много лет перед нами встала фактически обратная задача: разделить пользовательские сессии. О том, зачем мы это делали, какие трудности нас ожидали и как мы их обошли, я расскажу в этом посте.

Доброго времени суток, уважаемые хабравчане! В Elasticweb мы негласно ратуем за Nginx и, наверное, мы одни из немногих хостингов, которые не поддерживают Apache и .htaccess соответственно. В связи с этим, большое количество обращений в тех. поддержку связано с оказанием помощи в написании конфигурационного файла для Nginx. Поэтому мы решили собрать коллекцию полезных сниппетов и коллекцию готовых Nging конфигов для наиболее популярных CMS/CMF/Фреймворков на PHP.

Предположим, у вас есть данные, которые вы хотите кэшировать и отдавать, не используя тяжелые языки, как php, при этом проверяя, что пользователь аутентифицирован и имеет право на доступ к данным. Сегодня я расскажу, как, используя связку nginx lua redis, выполнить эту задачу, снять нагрузку с сервера и увеличить скорость отдачи информации сервером в десятки раз.

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

Веб таким образом работает отлично, но для доставки картинок разных размеров разным пользователям необходимо все эти картинки сначала создать.

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

Большие картинки == большие проблемы

Средняя веб-страница весит 2 Мб, из них 2/3 – картинки. Миллионы людей ходят в интернет через 3G, или ещё хуже. 2Мб-сайты в этих случаях работают ужасно. Даже на быстром соединении такие сайты могут израсходовать лимиты трафика. Работа веб-дизайнеров и разработчиков – упростить и улучшить жизнь пользователя.



Очень маленькие сайты могут просто сохранить несколько вариантов всех картинок. Но что, если у вас их дофига? Например, в магазине может быть сотня тысяч картинок – не делать же их варианты вручную.

ImageMagick

Утилита командной строки с 25-летним стажем в то же время является редактором картинок с полным набором функций. В ней огромная куча функций, и среди них – быстрое и автоматическое изменение размера картинок. Но с настройками по умолчанию файлы часто получаются излишне большими – иногда по объёму больше оригинала, хотя в них и меньше пикселей. Сейчас я объясню, в чём проблема, и покажу, какие настройки необходимы для её решения.

Моя серия заметок ES6 in Depth, состоящая из 24 записей, описывает большинство синтаксических изменений и нововведений в ES6. В этой публикации я подведу итог всего изложенного в предыдущих статьях, чтобы дать возможность посмотреть еще раз на всё вместе. Также я добавил ссылки на мой блог, чтобы в случае необходимости сразу же можно было посмотреть подробнее.



Я слышал, вы любите маркированные списки, так что вот вам статья со списком, который состоит из нескольких сотен элементов.

Печальное зрелище представилось сейчас моему усталому рабочему взгляду…

Буквально полчаса назад на главной странице проектов на всем известной некогда флагманской бирже Рунета был опубликован очень интригующий проект. Который сразу привлек внимание мониторящих ленту фрилансеров. Проект опубликован с аккаунта главного администратора биржи.

Часто ли вы задумываетесь – почему что-то сделано так или иначе? Почему у вас микросервисы или монолит, двухзвенка или трехзвенка? Зачем вам многослойная архитектура и сколько у вас вообще слоев? Что такое бизнес-логика, логика приложения, презентационная логика и почему все так разделено? Посмотрите на свое приложение – как оно вообще спроектировано? Что в нем и где находится, почему это сделано именно так?
Потому что так написано в книжках или так говорят авторитетные личности? Какие ВАШИ проблемы решает тот или иной подход/паттерн?
Даже то, что на первый взгляд кажется очевидным, порой бывает очень сложно объяснить. А иногда, в попытке объяснения, приходит понимание того, что очевидные мысли были и вовсе ошибочны.
Давайте попробуем взять какой-нибудь пример и изучить на нем эти вопросы со всех сторон.

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

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

У нас нет денег и мы все делаем за свой счет, поэтому экономим. Итог — весь миллион клиентов обслуживается на одном сервере, вот на таком — EX-60 на hetzner.

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

Здравствуй, уважаемый All!

Хочу рассказать о небольшой библиотеке для работы с SQLite в Windows Phone 8.0 Silverlight, Windows Phone 8.1, Windows 8.1 а сейчас еще и для Windows 10 UAP. Библиотеке уже больше года и т.к. проблем с ней за все время не возникло, то, я считаю, о ней можно рассказать другим.

Зачем все это?
Библиотека в рамках Windows Phone 8.0 Silverlight, Windows Phone 8.1, Windows 8.1 просуществовала больше года. Спрашивается: почему именно сейчас я решил о ней рассказать? Дело в том, что сейчас пора портировать свои приложения для Windows 10, а официального SQLite SDK пока нет.
Вот здесь есть SDK для Windows Phone 8, Windows Phone 8.1, Windows 8 и Windows 8.1. Но не для Windows 10.
И скорее всего не будет до выхода Windows 10. Поэтому есть смысл посмотреть на эту библиотеку.

Поехали
Библиотека называется SQLite.WinRT.

С наших Download-серверов каждый день скачивается несколько миллионов драйверов (статичных .exe и .zip файлов). Для анализа поведения пользователей перед нами встала задача посчитать следующие параметры: когда, сколько, как часто и даже кто именно скачивает драйверы.

Самым очевидным решением было бы использовать инструменты типа AWstat, GoAccess, ELK stack или Splunk, а в крайнем случае собирать логи Nginx.

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

И тогда мы решили заставить Nginx самостоятельно отправлять события в Google Analytics сразу же после скачивания файла. Мы также смогли передать в GA уникальный идентификатор пользователя ClientID.
В результате мы получили аналитику по статичным файлам, к которым раньше невозможно было привязать счетчик GA.

Под катом готовый конфиг и примеры работы нашей системы.

Прошло уже несколько месяцев со дня релиза игры, однако я вполне допускаю, что вы еще не поиграли или не прошли Dragon Age: Inquisition.

Перед тем, как читать статью, рекомендуем вам пройти эту игру.

Сказать, что эта статья – спойлер – это ничего не сказать. Это разбор игры целиком: от действий, которые влияют на развитие сюжета, до самых-самых мелких деталей. Естественно, поиграть в Dragon Age: Inquisition стоит: эта игра в прошлом году по праву заслужила награду в категории Лучшая одиночная игра и имеет один из самых захватывающих, необычных и фантастических сюжетов из тех, которые мы видели в играх для ПК.

Анимация скролла к месту страницы с момента изобретения почти не подвергалась никаким модификациям, никак не украшалась. Да никому и не надо вроде, и так все работает. Говоришь куда скроллить и за сколько нужно добраться. Всё.

Я решил на анимацию скролла посмотреть под другим углом. Не потому что сейчас с ним что-то не так, а потому что можно и поинтереснее. В результате некоторых наблюдений и всплесков фантазии удалось придумать 3 способа для более интересной анимации. В итоге завернул все в плагин «Scrollport.js» с 3 новыми и 1 классическим режимом. Смотрите демо и проходите под кат.

Как вы наверное заметили, в нашем блоге появился ряд материалов, которые раскрывают азы создания прикладных приложений WinRT для Windows 8. В данной серии статей будет рассказано о том как вы можете создавать игровые приложения WinRT на языке C#.

Постоянно сталкиваясь с парсингом Json всегда подглядываю в старых проектах или на встретившуюся реализацию объекта на stackoverflow.com.

Решил собрать три основных типа в шпаргалку Map, List, Array.

Type itemsMapType = new TypeToken<Map<Integer, GoodsItem>>() {}.getType();
Type itemsListType = new TypeToken<List<GoodsItem>>() {}.getType();
Type itemsArrType = new TypeToken<GoodsItem[]>() {}.getType();

Рассматривается Serialization/Deserialization операции класса:

public class GoodsItem{
    String name;
    float price;
    public GoodsItem(String name, float price) {
    this.name = name;
    this.price = price;

    public String toString(){
	return name + " : " + price;
    }
}

Разработчикам удобно пользоваться консолью для отладки, но ещё удобнее, если будет оболочка, в которой учтены особенности реализации консоли в различных браузерах, поэтому тема обёрток для консоли устойчиво существует.

Рассмотрим ранее опубликованные решения, затем сделаем обзор методов консоли с помощью перевода недавней статьи Axel Rauschmayer-а, разработчика и консультанта с более чем 15-летним стажем, затем я опубликую некоторые свои решения, которые оказались удачными в процессе эволюции и отладки на ряде проектов.
UPD 2015: обновление таблицы команд до актуального состояния, Github (ru, en; разворачивание на javascript).

Недавно вспомнилось мне, что есть такой сервис — StartSsl, который совершенно бесплатно раздаёт trusted сертификаты владельцам доменов для личного использования. Да и выходные попались свободные. В общем сейчас напишу, как в nginx настроить HTTPS, чтобы при проверке в SSL Labs получить рейтинг А+ и обезопасить себя от последних багов с помощью выпиливания SSL.

Итак, приступим. Будем считать, что у вы уже зарегистрировались на StartSsl, прошли персональную проверку и получили вожделенный сертификат. Для начала опубликую итоговый конфиг, а после этого разберу его.

Дело в том, что все (или почти все) поисковые запросы в Яндексе, пусть и в анонимизированном виде, в реальном времени доступны по адресу export.yandex.ru/last/last20x.xml

На основе этого API я сделал маленький проект на Openresty (nginx + Lua + imagemagick), предоставляющий высокопроизводительную реализацию CAPTCHA.



Предусмотрена возможность встраивания в виде iframe.

GitHub, demo