Заметки


🔥 2013 - Традиционные итоги

Все всегда подводят итоги уходящего года. Подведу и я. Год был классный по многим причинам. Есть правда несколько очень крутых событий.

Во-первых, у меня родился сын. Это самое классное что вообще происходило в моей жизни.

Во-вторых, я сменил работу. Неожиданно, безконфликтно, быстро.

Ну и вес остальное - мелочи, которые не имеют никакой значимости, в сравнение с двумя первыми.

Планы на следующий год тоже присутствуют:

  • надеюсь, что удастся посетить 5-6 новых стран и с десяток городов
  • отдохнуть жену и ребенка в Италии
  • поменять автомобиль
🗓 31.12.2013 20:35     👀 1.6 тыс.     📖 Читать 23 сек

🔥 Эх, ребята, как же тут без мата

Ну очень классная песня у группы SEX из Рогачева.

🗓 30.12.2013 16:06     👀 1.6 тыс.     📖 Читать 3 сек

🔥 Глобальные переменные в JavaScript

Всем давно и доподлинно известно, что использовать глобальные переменные в JavaScript не принято. Почему? Существует масса причин, все они, конечно же, глупы, но давайте придерживаться такой теории.

Однако иногда возникает необходимость иметь и пользовать глобальную переменную. Но как тогда быть? А если вдруг мы пишем для Node.js, там ведь нету глобального объекта window, там root? А если я хочу использовать свой код и во фронтенде и на сервере?

За сим предлагаю такое решение, которое знатно растиражированно, но никто о нем никогда не помнит.

var global = (function () {
    return this || (1, eval)('this');
}());

Теперь у нас есть глобальный объект global, который обладает всеми свойствами window / root. Элегантное и просто решение.

Придумал не я, украл вот тут.

🗓 24.12.2013 22:40     👀 2.8 тыс.     📖 Читать 1 мин

🔥 Кнопка удаления с подтверждением

Однажды один мой товарищ попросил сделать для одного его проекта кнопку удаления, которая содержала бы внутри себя подтверждение. Т.е. как это сделано обычно? Нажимаешь удалить - выскакивает окно с вопросом "Вы уверены, что ходите удалить то-то и то-то?" - нажимаешь "Да", после чего удаляется то, что надо. Так вот, он хотел чтобы нажимаешь "Удалить", внутри кнопки меняется текст на "Вы уверены?", нажимаешь еще раз и происходит удаление.

Идея показалась мне интересной, и я решил поделиться способом простой реализации.

Продолжение

🗓 17.12.2013 16:11     👀 4.9 тыс.     📖 Читать 2 мин

🔥 В браузере Apple Safari найдена нелепая «катастрофическая дыра»

Тут CNews сообщает:

Дыра в безопасности браузера Safari, которую в «Лаборатории Касперского» назвали «катастрофической», позволяет хакерам без лишних усилий узнавать логины и пароли пользователей к различным сайтам. Пары логин-пароль хранятся в plist-файле в незашифрованном виде.

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

«Для того чтобы браузер знал, на чем пользователь закончил прошлую сессию, эту информацию надо где-то сохранить. Очевидно, что это надо сделать в месте, которое не будет легко доступно кому угодно, и уж точно информация должна быть в зашифрованном виде», - рассказал эксперт «Лаборатории Касперского» Вячеслав Закоржевский.

Согласно исследованию эксперта, Safari хранит данные последней рабочей сессии (включая пары логин-пароль для авторизации на посещаемых сайтах) в незашифрованном виде в обычном plist-файле в свободном доступе. «Из него легко добыть учетные данные пользователей», - говорит Закоржевский. «Мы считаем, что хранение конфиденциальной информации в открытом виде с неограниченным доступом - это катастрофическая дыра в безопасности, позволяющая злоумышленникам беспрепятственно воровать пользовательские данные, затрачивая при этом минимум усилий. На данный момент мы не можем подтвердить или опровергнуть существование реального вредоносного кода, обращающегося к этому файлу. Но готовы биться об заклад, что такое ПО не заставит себя долго ждать», - добавил аналитик.

Функция восстановления сессии (Reopen All Windows from Last Session») работает в следующих версиях OS X и Safari: OS X 10.8.5, Safari 6.0.5 (8536.30.1), OS X 10.7.5, Safari 6.0.5 (7536.30.1).

Ну так нефиг давать компьютер людям, которые могут полезть в plist за вашими паролями!

🗓 17.12.2013 11:15     👀 1.4 тыс.     📖 Читать 2 мин

🔥 Интересные CSS-хаки, которые облегчат вам жизнь

Ниже несколько интересных CSS-хаков и свойств, о существовании которых забывают, а то и вовсе не знают.

html {
    overflow-y: scroll;
    font-size: 100%;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}

Вы знаете, что если для html жестко указать скролл по вертикали, то при динамическом добавлении контента у вас не будет неожиданного ресайза, когда скролл понадобиться, а мобильные браузеры не будут подстраивать размер шрифта если задать text-size-adjust.

Продолжение

🗓 16.12.2013 23:25     👀 4.6 тыс.     📖 Читать 2 мин

🔥 Трейлеры «Jupiter Ascending» и «Edge of Tomorrow»

Шибко люблю фантастические фильмы, чтобы космические корабли, роботы, инопланетяне. Вот посмотрел два трейлера будущих фильмов: первый с Татумом и Милой Марковной Кунис «Jupiter Ascending»...

... и второй с Томом Крузом и Эмили Блант «Edge of Tomorrow»

🗓 15.12.2013 16:30     👀 1.8 тыс.     📖 Читать 12 сек

🔥 Четыре лучших редактора для веб-разработчика

В силу разных причин, для работы я пользуюсь Mac OS. К счастью, разнообразие редакторов кода для этой системы позволяет выбрать что-то действительно удобное именно для меня. Попробовав многие из представленных на рынке программ, я составил свой рейтинг из четырех, который вам и представлю.

Text mate

Первый из лучших, прототип для популярного Sublime Text. Вторая версия Textmate стала бесплатной и при этом не потеряла своей функциональности. Редактор не кроссплатформенный, а написан именно для использования в Mac OS, поэтому очень маленький и быстрый. Много плагинов и возможностей. Именно его я использую каждый день.

Sublime Text

Наверное самый популярный сегодня кроссплатформенный редактор. Для него написаны сотни плагинов и сниппетов. Редактор платный - $70, но при этом его бесплатная версия ни в чем не уступает платной. Есть, правда, одна особенность, периодически при сохранении выскакивает окошко с предложением купить редактор. Достаточно просто закрыть это окно и можно успешно работать дальше. Неоспоримым преимуществом этого редактора является возможность выделять сразу много разрозненных кусков кода (мультиселект) и редактировать их одновременно.

Chocolat

Молодой, но многообесчающий редактор. Написан только для Mac OS. Стоимость - $49. Бесплатно можно пользоваться 14 дней. Количество плагинов пока не велико, но сообщество растет и развивается. Так же имеет в своем арсенале возможность мультиселекта.

Brackets

Бесплатный редактор от Adobe с открытым исходным кодом. Написан под Windows, Mac OS, Linux. Интерес вызывает то, что написан он на JavaScript. Это правда обуславливает и его недостатки: медленную работу и большой размер. Есть у него и ряд преимуществ перед другими редакторами:

  • Live HTML Development - сразу после сохранения изменений результат отображается в браузере (поддерживается только Chrome)
  • Быстрое редактирование - css можно редактировать прямо в html-файлах, не открывая файлы со стилями.
  • Adobe Edge - если вы купите подписку у Adobe, то Live HTML Development будет доступен не только в браузере компьютера, но и на различных мобильных устройствах.

Никаких выводов делать не стану, каждый сам волен выбирать, что использовать для работы. Мне кажется, что описанные мной программы все-таки лучшие для Mac OS на сегодняшний день. И да, я не учитывал здесь огромные и громоздкие комбайны вроде WebStorm. Все-таки они слишком многофункциональны для html/css/javascript разработки.

🗓 13.12.2013 14:49     👀 3.3 тыс.     📖 Читать 3 мин

🔥 Префиксы в CSS — vendor prefixes

Оформление современных сайтов состоят из множества стилей, которые могут работать или не работать в тех или иных браузерах. Чтобы всё работало везде, для некоторых свойств необходимо использовать префиксы разных браузеров. По английски они называются vendor prefixes.

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

Без префиксов

border-radius : Если не нужна поддержка Firefox 3.6 или iOS 3.2

box-shadow : Если не нужна поддержка Firefox 3.6 или iOS 4.3 или Safari 5.0

text-shadow

border-image

Используют только один префикс

CSS Transitions : -webkit- для Safari 6.0

CSS 3D Transforms : -webkit- для Safari и Chrome

CSS Animation : -webkit- для Safari и Chrome

CSS Gradients : -webkit- для Safari

Box Sizing : -moz-.

CSS Calc : -webkit- для Safari 6.0

Несколько префиксов

CSS Transforms : -webkit- для Safari и Chrome и -ms- для IE9

Flex Box : -webkit- и -ms-.

Columns : -webkit- и -moz-.

Почему я не упомянул про префикс -o-, который использовался в опере до 12 версии включительно? Потому, что о ней стоит упоминать только в контексте сайтов, которые будут сделаны для просторов СНГ. Если это ваш случай, то помните - Opera <=12 занимает около 9 процентов СНГ-шного рынка браузеров. В таком случае префикс -o- необходимо добавлять для свойтсв, для которых могут ставиться префиксы -webkit- или -moz-.

Полный список свойств, использующих префиксы

Продолжение

🗓 21.11.2013 23:42     👀 10 тыс.     📖 Читать 1 мин

🔥 Thermaltake ISURUS DUB

Я вхожу в число 17% людей, которые могут считать себя счастливцами. Почему? Потому, что у нас нет музыкального слуха. Я не слышу не только гениальности музыки, но и ее недостатков.

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

Вот такие шли с айфоном — Apple EarPods:

Пользователи их хвалят, Apple — восхищается, а мне не понравились. Басов нету, высокие частоты — слишком высокие. На большой громкости скрипят.

В нашей стране альтернативой любым стандартным считают Sennheiser CX300 (II).

Но проблемы Сенхайзеров такие же как и EarPods.

Поэтому моим выбором стала гарнитура от Thermaltake — ISURUS DUB.

Игровые наушники лучше воспроизводят басы, прекрасно спасают от внешних звуков за счет своей конструкции и удобня сидят в ушах. Плюсом этой гарнитуры стало то, что она прекрасно работает с iOS и Android девайсами, а также с Macbook.

🗓 16.11.2013 20:17     👀 1.4 тыс.     📖 Читать 1 мин

🔥 Windows 1.01 и Windows 3.11 в браузере

Если вы в силу разных причин не застали времена 286-х компьютеров, DOS-a и ранних версий Windows, то у вас есть несколько вариантов их увидеть:

  1. Раздобыть немного старого компьютерного железа и увсе установить
  2. Проследовать вот по этой ссылке, чтобы увидеть как выглядела Windows 3.11, или вот по этой, чтобы увидеть настоящую Windows 1.01, запущенную в браузере. Ничего сверхинтересного вы для себя не найдете, но для общего образования очень полезно.
🗓 03.11.2013 17:53     👀 2.4 тыс.     📖 Читать 20 сек

🔥 Родные шрифты с иконками (Native iconic fonts)

Существует несколько популярных вариантов отображения иконок на веб-странице:

  • картинки
  • svg
  • иконочные шрифты

В своей работе я, например, чаще всего использую картинки (png, в частности), но в последнее время стал уделять большое внимание иконочным шрифтам.

Их так же существует привеликое множество: FontAwesome, Entypo и другие.

Но в процессе тестирования на разных устройством были обнаружены некторое особенности отображения иконок. Самым интересным стало то, что браузер IE на Windows Phone 7.5 вдруг вместо иконок шрифта Entypo отрисовал свои иконки, которые вышлядели практически идентично.

Задавшись этим вопросом, мы с товарищем @pukhalski стали «читать» интернет.

В этом месте, следует уточнить, что для отрисовки иконок мы использовали следующую контрукцию:

.icon {
    display: inline-block;
    font-family: 'entypo';
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.icon:before {
    content: "\2606";
}

В данном примере 2606 - Unicode для отображения здездочки. Т.е. вы должны увидеть примерно вот это: ☆.

Оказалось, что во все более или менее человечкие операционные системы встроен шрифт serif, который уже содержит множество иконок. Вот по этому адресу можно их все увидеть.

Стоит также вспомнить о шрифтах Webdings, Wingdings, Wingdings 2, Windings 3, которые точно присутствуют в Windows и Mac OS и несут внутри себя сотник классных иконок.

Экономьте свои силы и траффик пользователей, используйте встроенные шрифты. Кстати, это очень кроссбраузерно и кросссистемно.

🗓 28.10.2013 14:43     👀 2.7 тыс.     📖 Читать 2 мин

🔥 Моя презентация «Yeoman: building an infrastructure for your projects»

🗓 27.10.2013 18:53     👀 1.4 тыс.     📖 Читать 1 сек

🔥 Функция uniqid в JavaScript

В PHP есть шикарная функция uniqid. Она позволяет сгенерировать случайный идентификатор состоящий из цифр и букв, основанный на текущем времени. Выглядит он примерно вот так 526439af76c56.

Я очень часто пользуюсь ей (функцией), когда делаю что-то на ПХП. Конечно же мне очень хватало этой функции в JavaScript, поэтому я поискал в интернете, нашел один неплохой вариант, немного его подправил и вуаля:

(function () {
    this.uniqid = function (pr, en) {
        var pr = pr || '', en = en || false, result, us;

        this.seed = function (s, w) {
            s = parseInt(s, 10).toString(16);
            return w < s.length ? s.slice(s.length - w) : 
                      (w > s.length) ? new Array(1 + (w - s.length)).join('0') + s : s;
        };

        result = pr + this.seed(parseInt(new Date().getTime() / 1000, 10), 8) 
                    + this.seed(Math.floor(Math.random() * 0x75bcd15) + 1, 5);

        if (en) result += (Math.random() * 10).toFixed(8).toString();

        return result;
    };
})();

Использовать можно:

  • так uniquid() - результат 52643b81917b3
  • или вот так uniqid('prefix_') - результат prefix_52643bb682821
  • и даже вот так uniqid('prefix_', true) - результат prefix_52643bdf3b1fb7.38568327

Пользуйтесь на здоровье.

Тут ссылка на Gist.

🗓 24.10.2013 14:15     👀 3.7 тыс.     📖 Читать 1 мин

🔥 Apple TV в белорусских реалиях

Все сейчас покупают всякие умные телевизоры, чтобы и в интернет ходили и ВКонтакте позволяли посидеть и в Скайпе пообщаться. Зачастую такие Smart TV являют собой убогих и медленных динозавров, которые как бы все это умеют, но умеют медленно. У меня телевизор большой, современный, но без всяких умных штук внутри. Фильмы смотрю или подключив лэптоп, или с внешнего винчестера. Не очень удобно на самом деле.

Одним из возможных вариантов усовершенствовать мой телевизор стала покупка Apple TV. Перечитал массу обзоров и статей, но так и не понял, есть ли смысл покупать сию черную кробочку. Поэтому днями раньше взял один на работе на "попробовать".

Продолжение

🗓 20.10.2013 18:27     👀 2.7 тыс.     📖 Читать 8 мин