Как стать автором
Обновить

Компания Uprock временно не ведёт блог на Хабре

Сначала показывать

Прошел GTA – запили плеер!

Время на прочтение 7 мин
Количество просмотров 24K
Глава семнадцатая, в которой фронтэнд-разработчики Uprock переходят от GTA к альтернативным путям применения YouTube и практическому применению модели акторов.

image

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

И да, мы, как настоящие фанаты, пройдя GTA 5 запустили GTA Radio с набором всех радиостанций из всех частей этой замечательной игры. Наслаждайтесь все для вас, а тем кому интересно сделать аналогичный плеер, прошу под кат.

Посвящается всем, кто хочет запилить свой плеер и снять с себя ответственность за авторские права
Всего голосов 32: ↑21 и ↓11 +10
Комментарии 21

06 Collector: ссылки для дизайнеров и разработчиков

Время на прочтение 2 мин
Количество просмотров 30K


В этой подборке вы найдете много материалов для вдохновения с последниями тенденциями в веб-разработке и веб-дизайне. И в преддверие праздника этот пост будет разбавлен ресурсами на новогоднюю тематику.
Читать дальше →
Всего голосов 45: ↑41 и ↓4 +37
Комментарии 7

Перевод AirBnB Style Guide

Время на прочтение 4 мин
Количество просмотров 47K


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

— В кэмелкейсе пишем?
— Да, как обычно, в кэмелкейсе
… прошло две недели…
— Мы ж в кэмелкейсе договаривались!!!


В нашем случае не было разве, что последней фразы.
Уже давно хотелось как-то это систематизировать, но никак не доходили руки до выбора между стилями от jQuery, Google, ideomatic.js и Crockford.

Когда месяц с небольшим назад в trending гитхаба попало руководство от AirBnB, оно тут же попалось нам на глаза…
А неделю назад мы его перевели, в первую очередь для собственных нужд, но не поделиться с сообществом не могли.

Прочитать крайне советую как минимум всем начинающим js-разработчикам.

Читать дальше →
Всего голосов 77: ↑66 и ↓11 +55
Комментарии 92

05 Collector: ссылки для дизайнеров и разработчиков

Время на прочтение 2 мин
Количество просмотров 19K


В этой подборке вы найдете коллекцию аддонов и инструментов для графических редакторов, которые сэкономят вам кучу времени. И на бонус много материалов для вдохновения с последниями тенденциями в веб-разработке и веб-дизайне.
Читать дальше →
Всего голосов 16: ↑13 и ↓3 +10
Комментарии 12

Есть вероятность глюков в Chrome/Chromium 31, Opera 18: селекторы вроде nth-last-child могут отрабатывать некорректно

Время на прочтение 2 мин
Количество просмотров 8.7K

В issues хрома за последние несколько дней появилось несколько issue, в которых описывается примерно следующий сценарий: используется тяжелый css3 селектор, в результате чего идет некорректное обращение. В том числе может некорректно работать селектор к нескольким объектам через запятую (#a, #b, #c etc.), однозначно некорректно работает nth-last-child. Гарантированно выявлен баг с ним.
Проблема, судя по всему, находится в механизме css-запросов, так как document.querySelector также некорректно адресуется. Что самое неприятное — jQuery так же опирается на нативные функции (если они существуют). Таким образом, сложные jQuery-запросы также перестали отрабатывать корректно.
Если в ваших проектах используется nth-last-child, подробности бага под катом
Читать дальше →
Всего голосов 33: ↑31 и ↓2 +29
Комментарии 9

04 Collector: ссылки для дизайнеров и разработчиков

Время на прочтение 2 мин
Количество просмотров 16K


В этой подборке вы найдете много красивых и интерактивных сайтов, а также коллекцию уникальных интернет-магазинов, демонстрирующие нестандартные подходы и свежие идеи. И на бонус немного материалов для разработчиков и дизайнеров.
Читать дальше →
Всего голосов 14: ↑10 и ↓4 +6
Комментарии 4

Harmony collections NOW

Время на прочтение 11 мин
Количество просмотров 9.5K

На хабре уже проскакивала статья про такие замечательные вещи, как Map, WeakMap и Set, но в действительности реальные возможности этих API не были раскрыты (если я все-таки хорошо воспользовался поиском).
Эти API толком не реализованы нигде, кроме firefox (можно включить в chrome canary), но даже там до недавних пор не поддерживалось использование HTMLElement-подобных объектов в качестве ключей. Polymer, например, убрал только три недели назад

	if (navigator.userAgent.indexOf('Firefox/') > -1)


Чем же они так хороши? По сути Map/WeakMap можно воспринимать как обычные хэш-объекты, только в качестве ключей можно использовать только сложные объекты (Object, Function, Array), так как привязка идет не по содержимому, а по адресу в памяти.
Таким образом появляется возможность привязаться на фронтэнде к
  • dom-элементу
  • XHR-запросу
  • File-элементу


Это дает нам возможность работать без id-шников элементов, делать дата-биндинг в разы быстрее, создать безумную альтернативную реализацию promises и так далее.
Мы будем говорить о WeakMap. Даже не так, мы будем говорить о существующих полифиллах для WeakMap.

Читать дальше →
Всего голосов 41: ↑38 и ↓3 +35
Комментарии 16

Хотите распределить элементы, привязавшись к их количеству, на одних стилях? Да запросто

Время на прочтение 3 мин
Количество просмотров 24K
Альтернативное название статьи – «почти :child-count(n)». Потому что именно так оно все и работает. На голом CSS и без каких-либо дата-атрибутов или чего-либо еще в верстке.

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

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



Как же это сделать?
Всего голосов 51: ↑43 и ↓8 +35
Комментарии 19

02 Collector: пятничный контент, 3D и типографика

Время на прочтение 2 мин
Количество просмотров 19K


Снова делюсь с вами подборкой интересных сайтов и ресурсов, чтобы к концу недели отвлечься от рабочего процесса. В этот раз будет много браузерного 3D и сайтов о типографике.
Читать дальше →
Всего голосов 28: ↑21 и ↓7 +14
Комментарии 7

Pages в PDF или сервис за 2 часа

Время на прочтение 3 мин
Количество просмотров 12K
У вас не мак, и вы опять обнаружили pages в входящем письме? Да что с ними не так?
Последний раз после тщательного поиска «как просмотреть iPages», нашлось простое и изящное решение. И, заметьте, это не бензопила со спутниковым наведением.



1. Переименовать расширение в .zip
2. Открыть полученный архив и найти в нём pdf файл
3. Profit!

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

Под катом вас ждет подробное объяснение как это работает.
Читать дальше →
Всего голосов 50: ↑44 и ↓6 +38
Комментарии 31

CornerJS, или директивы «как в AngularJS», только лучше

Время на прочтение 4 мин
Количество просмотров 13K
image

Постоянно создавая сложные веб-проекты с нуля, начинаешь замечать, что примерно треть — а в некоторых случаях половина и больше — кода в действительности автономна, и привязана только к определенному DOM-элементу.

В рабочих проектах это может сводиться к чему-то вроде

function pageChange(){
    if ($(‘.element-carousel').length>0) {$('.element-carousel').initCarousel()}
    if ($('.element-scrollbox').length>0) {$('.element-scrollbox').initScrollbox()}
…


А может и не сводиться, и в каждом условном контроллере (колбэке на смену определенной страницы) мы вызываем код, связанный с определенными элементами.

Знакомо? Думаю, да. Считаете ли вы этот подход неправильным? Если первый ответ – да, то уверен, что и второй тоже да.

Хотите узнать, как можно сделать правильно, аккуратно и красиво?
Читать дальше →
Всего голосов 47: ↑42 и ↓5 +37
Комментарии 24

01 Collector: пятничный контент

Время на прочтение 1 мин
Количество просмотров 22K


Уже конец недели и пора плавно переходить к режиму «Safe mode». Поэтому делюсь с вами подборкой интересных сайтов и ресурсов, чтобы к концу дня отвлечься от рабочего процесса.
Читать дальше →
Всего голосов 40: ↑32 и ↓8 +24
Комментарии 4