Приветствую, уважаемое Хабрасообщество!

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

Сейчас библиотека выложена с парой примеров на GitHub, а под хабракатом хотелось бы осветить некоторые тонкости её применения и часть внутренней логики. Буду рад, если моя библиотека поможет кому-то сэкономить n-ое количество времени и позволит избежать изобретения собственного велосипеда.

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

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

Итак, как создать анонимный блог.

Пост является личной подборкой полезных и нужных онлайн сервисов, которые позволяют бесплатно (или условно бесплатно) создавать действительно крутые вещи и разворачивать их в Сети. Не претендую на новизну или на полноту, но буду счастлив, если кому пригодится.

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

Доброго времени суток, уважаемые хабравчане. Многие пользуются замечательным редактором Sublime Text, который стал популярен благодаря своей простоте, гибкости/кастомизации и огромному количеству плагинов. Хочу поделиться с вами, на мой взгляд, самыми полезными шорткатами при работе с Sublime.

Переход по фрагментам

Win/Linux: CTRL+R
Mac: CMD+R
Вероятно, самое полезное сочетание клавиш для экономии вашего времени. Содержимое документа разбивается на определенные фрагменты (функции, HTML теги или CSS стили). Переход происходит при выборе соответствующего фрагмента во всплывающем окне.

Приветствую уважаемое Хабросообщество, и в качестве взноса в этот банк коллективного разума
— хочу поделиться своим опытом в работе с воркерами.

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

Кто ещё не встречался с этой технологией — здесь можно ознакомится с её основами.

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

Слева направо: Rasmus, Build 5.4, Version 5.5, Relise 5.6

Сегодня хочу поделиться своим видением того, как будет выглядеть работа с функциями уже в ближайшем мажорном релизе PHP — 5.6. Для этого я изучил рабочие предложения и нашёл там немало вкусняшек:

• Новый синтаксис для функций с переменным числом аргументов и радостный отход в историю мороки с func_get_args():
  

  function fn($reqParam, $optParam = null, ...$params) { }
  

  
  
• Опускаем указание значений для необязательных аргументов:
  

  function create_query($where, $order_by, $join_type = '', $execute = false, $report_errors = false) { }
  create_query('deleted=0', 'name', default, default, /*report_errors*/ true);
  

  
  
• Импорт функций из пространства имён:
  

  use function foo\bar\baz;
  baz();
  

  
  
• Исключения вместо набивших оскомину фатальных ошибок:
  

  <?php
  function call_method($obj) {
      $obj->method();
  }
  
  call_method(null); // oops!
  
  try {
      call_method(null); // oops!
  } catch (EngineException $e) {
      echo "Cool Exception: {$e->getMessage()}\n";
  }
  

  
  
• Добавление модификатора deprecated:
  

  deprecated function myOldFunction() { }
  

  
  
• Вызов методов и доступ к свойствам создаваемого объекта:
  

  new foo()->xyz;
  new baz()->bar(); 
  

  
  

Большинство из приведенных предложений пока находятся на стадии обсуждения. Но среди них уже есть утверждённые и даже реализованные.

Также искушённого читателя ждёт эксклюзив: изучая чужие умные мысли, я и сам решился написать собственный RFC. Сейчас вы не увидите его в списке предложений, так как на данный момент он находится на самом начальном этапе — на рассылке internals@lists.php.net.

А начну обзор с RFC, который уже реализован и гарантированно попадает в релиз 5.6.

Синтаксис для функций с переменным числом аргументов

Реализовано в PHP 5.6, Принято 36 голосами против 1

И сразу в бой: рассмотрим код, который показывает как переменный аргумент ...$params будет заполняться в зависимости от количества переданных аргументов:

function fn($reqParam, $optParam = null, ...$params) {
    var_dump($reqParam, $optParam, $params);
}
 
fn(1);             // 1, null, []
fn(1, 2);          // 1, 2, []
fn(1, 2, 3);       // 1, 2, [3]
fn(1, 2, 3, 4);    // 1, 2, [3, 4]
fn(1, 2, 3, 4, 5); // 1, 2, [3, 4, 5]

$params будет пустым массивом, если число переданных аргументов меньше, чем число объявленных. Все последующие аргументы будут добавлены в массив $params (с сохранением порядка). Индексы в массиве $params заполняются от 0 и по возрастанию.

Статья устарела. В новой документации содержится самая актуальная информация из этого поста. См. Matreshka.Array.

• Введение
• Наследование
• MK.Object
• MK.Array
• Matreshka.js v0.1
• Matreshka.js v0.2
• Реализация TodoMVC

(Напомню, репозиторий находится здесь)

Приветствую всех. Предыдущую статью я закончил на том, что нам может потребоваться массив данных. Массивом в проекте Matreshka.js являются экземпляры класса MK.Array. Чем они отличается от обычных массивов? Почти ничем. Прототип MK.Array содержит все методы, которые есть у «традиционного» массива, конструктор принимает те же аргументы, что и оригинальный Array, а экземпляры имеют несколько интересных особенностей.

MK.Array — это массив на стероидах, который умеет:

• Всё, что умеет Array
• Генерировать события при модификации
• Использовать цепочечный вызов методов там, где это возможно
• Умеет то, что умеет Матрешка: привязывать элементы к свойствам и генерировать кастомные события

Статья устарела. В новой документации содержится самая актуальная информация из этого поста. См. Class.

• Введение
• Наследование
• MK.Object
• MK.Array
• Matreshka.js v0.1
• Matreshka.js v0.2
• Реализация TodoMVC

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

Матрешка устроенна в виде класса, сконструтированного при помощи кастомной функции Class. Это немного измененная версия функции, о которой я писал на форуме javascript.ru (ссылка на доку).

Так почему классы? Класс — это лишь слово, не противоречащее парадигме прототипного программирования. Если взглянуть на документацию того же Backbone.js, то вы увидите, что и они оперируют словом «класс» без всяких стеснений. Мы можем поспорить о том, что в Javascript нет классов, есть конструкторы, и я с вами соглашусь, но, на деле, имеет ли этот спор смысл? Если конструктор выглядит как класс, плавает как класс, и крякает как класс, то это, наверное, и есть класс?

От лирики к делу. Итак, Матрешка создана в виде класса:

window.MK = window.Matreshka = Class({ ... });

Аргумент класса — прототип конструктора, который можно определить так:

var MyClass = Class({
  constructor: function() { ... }
});

… который затем и возвращается из функции Class. Если конструктор не определен, то им станет пустая функция.

Статья устарела. В новой документации содержится самая актуальная информация из этого поста. См. Matreshka.Object.

• Введение
• Наследование
• MK.Object
• MK.Array
• Matreshka.js v0.1
• Matreshka.js v0.2
• Реализация TodoMVC

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

Класс, который нам в этом поможет, называется MK.Object, который наследуется от класса Matreshka. Идея проста: у нас есть множество ключей, отвечающих за данные в экземпляре класса и мы считаем, что остальные свойства отвечают лишь за состояние приложения и не являются бизнес моделью.



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

var mkObject = new MK.Object();
mkObject.jset( 'a', 1 );
console.log( mkObject.toJSON() ); // { a: 1 }

Статья устарела. В новой документации содержится самая актуальная информация из этого поста. См. bindNode и on.

Приветствую всех читателей и писателей хабра.

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

• Введение
• Наследование
• MK.Object
• MK.Array
• Matreshka.js v0.1
• Matreshka.js v0.2
• Реализация TodoMVC

Код для привлечения внимания:

mk.on( 'change:x', function() {
	alert( 'x is changed to ' + this.x );
});
mk.x = 2; // alerts "x is changed to 2"

И это работает в… IE8.

Что такое Матрешка?

Матрешка, как фреймворк
Компактный размер и легкая в изучении архитектура даёт возможность строить крупные расширяемые приложения. Этим сегодня никого не удивишь, но я постараюсь.
Матрешка, как библиотека
Если фичи, предоставляемые Матрешкой вам понравятся, то не обязательно менять свой код. Матрешкой можно пользоваться, как набором классов с интересными методами.
Матрешка, как платформа для создания собственного фреймворка
Матрешка — расширяемый фреймворк общего назначения, который не позиционируется, как MVC, MVVM или %your_design_pattern% фреймворк, поэтому программист имеет возможность реализовать собственную архитектуру, которая будет уметь желаемый набор шаблонов проектирования.

Зачем?

Мне часом надоело думать о представлении и о том, чтоб его менять написанным мной кодом. Все костыли синхронизации данных и представления в Javascript вызывают у меня негативные чувства, и амбициозной, направленной в будущее, целью Матрешки является возможность полностью забыть о том, что у нас есть UI, оперируя только данными. Конечно же, решить эту задачу невозможно на 100%, но мы, программисты, должны выжимать максимум из данных нам инструментам, дабы сделать код чище, короче и гибче. Пора встряхнуть свой код и стать злым.

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


Пример работает на LESS 1.5.0, поэтому нет возможности разместить его на codepen или jsfiddle.

 .shade(@type, @color, @depth, @angle, @long, @fade);

• type: значения box/text — box-shadow/text-shadow
• color: цвет тени
• depth:длина тени
• angle: угол наклона
• long: boolean, по умолчанию true — длинные Flat тени
• fade: boolean, по умолчания false — затухание

Разрабатывать интерфейс Android приложений — непростая задача. Приходится учитывать разнообразие разрешений и плотностей пикселей (DPI). Под катом практические советы о верстке макетов дизайна Android приложений в Layout, который совпадает с макетом на одном устройстве а на остальных растягивается без явных нарушений дизайна: выхода шрифтов за границы; огромных пустых мест и других артефактов.

UPD: Пост спорный, но много ценных советов в комментариях

В подборке сервисы, плагины, темы и другие полезности, облегчающие работу с Twitter Bootstrap.

Стилизация

BootSwatchr — быстрая стилизация Twitter Bootstrap.

Сколько уже было сломано копий о задачу выравнивания элементов на странице. Предлагаю вашему вниманию перевод отличной статьи с решением этой проблемы от Стефана Шоу (Stephen Shaw) для Smashing Magazine — Absolute Horizontal And Vertical Centering In CSS.

Все мы знали о margin: 0 auto; для горизонтального центрирования, но margin: auto; не работало для вертикального. Это можно легко исправить, просто задав высоту и применив следующие стили:

.Absolute-Center {
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}

Я не первый, кто предложил это решение, однако такой подход редко применяется при вертикальном выравнивании. В комментариях к статье How to Center Anything With CSS Simon ссылается на пример jsFiddle, где приводится отличное решение для вертикального центрирования. Вот еще несколько источников на эту тему.

Рассмотрим способ поближе.

Программисты так не любят совещания по одной причине: они работают по совсем иному графику, чем другие люди. Встречи обходятся им дороже.

Эссе Пола Грэма переведено в Alconost.

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

Floobits позволяет использовать свой любимый редактор для совместной работы над кодом в реальном времени — сейчас поддерживаются только Sublime Text, Vim и Emacs; кроме того, есть и традиционный для подобных сервисов веб-редактор кода, работающий прямо в браузере.

Поскольку обойтись только редактором было сложно, со временем выяснилось, что парная разработка — это не только распространение кода, но и «расшаривание» терминалов (для этого был разработан Flootty), а еще и реал-тайм обновление кода на тестовом сервере (для этого был разработан несложный diff-shipper). Кроме того, для голосового чата и обмена видео в веб-редактор была добавлена поддержка Google+ Hangouts

В подборке инструменты, плагины и другие полезности, облегчающие работу с Twitter Bootstrap. Предыдущая подборка.

Инструменты

Bootstraptor — подборка большого количества бесплатных и премиум тем, в том числе Starter Kit, на основе Bootstrap.

В заметке собраны сайты с обучающими материалами для веб-дизайнеров и веб-разработчиков. Старался не повторяться с постом 27+ ресурсов для онлайн-обучения хабраюзера nicolausYes.

Academic Earth

Множество бесплатных лекций, в том числе от известных университетов (Гарвард, MIT, Стенфорд и др.).

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



Демо / Скачать исходники

Я бы хотел поделиться одним способом создания личного облака на базе трехтеррабайтного WD MyBook Live. Нет, я не буду даже упоминать про wd2go и их «полуоблака», которые по сути являются только доступами к самому NAS через сервисы WD при помощи довольно корявых Java-апплетов. В этой статье речь пойдет о «честном» облаке, работающем на MBL при помощи ownCloud.
Это решение подойдет тем, кто мечтает о личном аналоге Dropbox, файлы в котором хранятся не «где-то там», а на конкретном физическом носителе, и ограничены только его объемом, без необходимости платить ежемесячно за этот объем (пренебрегая абонентской платой за интернет и стоимостью электроэнергии).
Большинство решений подобной задачи требуют достаточно много покопаться в интернете и опираются на хорошее знание Linux-систем. В данном посте я попытаюсь дать наиболее полный и адекватный HOW-TO на русском, чего сам в интернете не нашел. Так что многое пришлось делать методом проб и ошибок на свой страх и риск. Реализация данного решения не требует каких-либо фундаментальных знаний Linux, и я постараюсь расписать все наиболее доступно, по шагам.

Если интересно что из этого вышло — добро пожаловать под кат.