Перевод статьи Джейсона Фрида (Jason Fried) "Why I Run a Flat Company". Джейсон — один из основателей компании 37signals и соавтор книг "Getting Real" и "Rework".

Несколько месяцев назад в компании 37signals, которую я возглавляю, случилось необыкновенное событие: мы расстались с одним из наших сотрудников. Казалось бы, что в этом необычного? Но дело в том, что в нашей компании подобное происходит крайне редко. За 11 лет работы мы потеряли всего лишь пять человек, причем один из них вернулся к нам семь лет спустя.

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

flotr2 — это библиотека с открытым кодом для построения HTML5 графиков и диаграмм. Flotr2 — так как стала ответвлением от Flotr, но уже без привязки к Prototype JS и с множеством усовершенствований.

The Little Redis Book — это бесплатная книга про Redis.

Книга была написана Karl Seguin, при поддержке Perry Neal. Karl Seguin является также автором книги The Little MongoDB Book, которую часто рекомендуют для быстрого старта с MongoDB. Первая версия повилась около недели назад.

Сегодня я сделал первую версию перевода этой книги. Исходные тексты доступны в репозитории на GitHub. Там же можно найти и готовый PDF.

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

Я благодарен следующим людям за помощь в переводе оригинального текста и вычитке результата:

• Dmitry Scriptin
• Денис Веселов
• polinom

Я прошу все неточности и опечатки отправлять для коррекции перевода.

Я уверен, что вы часто видели на различных веб-сайтах необычные эффекты при переходе между страницами, большинство из них создавалось с помощью JavaScript. В этом уроке я покажу, как вы можете создать свой собственный эфект перехода, но вместо JavaScript я буду использовать CSS Transition и свойство :target.

Статьи про создание tooltips'ов уже не раз поднимались на хабре [1,2] в виду большой популярности этого элемента. Сегодня вы узнаете еще один способ как создать простые, анимированные подсказки с помощью псевдо-элементов before и after, а так же свойства transitions.



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

Введение

Данный пост я решил написать после прочтения Автоматическое оповещение читателей о новостях с помощью ВКонтакте. Часть 4, и решить в нем проблему с «access token», путем использования iframe приложений и js api.
После прочтения данной статьи, любой желающий сможет ходить по воде, ловить пули зубами создать iframe приложение, которое умеет публиковать записи на стене группы или пользователя из rss ленты.

Предисловие

Давно хотел написать. Мысли есть, желание есть, времени нету… Но вот нашлось, так что привет, Хабра.
Здесь я собрал все идеи, которые помогали и помогают в разработке веб-приложений. Для удобства я разбил их на группы:

1. Память
2. Оптимизация операций
3. Выделение критических участков
4. Циклы и объектные свойства
5. Немножко о DOM
6. DocumentFragment как промежуточный буфер
7. О преобразованиях в объекты
8. Разбитие кода
9. События перетаскивания
10. Другие советы

Сейчас речь не пойдёт ни о каких библиотеках. Я постараюсь передать знания о механизмах самого языка, а не их реализациях в библиотеках.

Память

Хоть это и не должно волновать клиентского программиста, но не забываем, что память всё-таки не бесконечна и когда-нибудь может закончиться, например, когда запущено несколько массивных программ: офис, графический редактор, компиляция большой программы и др. Несмотря на то, что приведенный пример тривиален, у меня действительно такое случилось, хоть и не из-за браузера, но он тоже сыграл свою роль: 1,3 Гб оперативы (отладчик, около 30 вкладок), начались тормоза по перегрузке страниц ОП в файл подкачки.
Чтобы уменьшить расход памяти, я предлагаю несколько способов:

Доброго времени суток! Давно хотел побаловаться с html5 canvas. Когда стал вопрос, что же сделать этакое не слишком трудоемкое и не слишком убогое, решил сделать заменитель иконки ожидания (gif рисунка).

В общем вот что у меня получилось: http://receipt.of.by/html5_canvas/html5_canvas.html. Всем смотрящим просьба смотреть не менее 5 секунд — будет сюрприз.

Здравствуй, дорогой хабрадруг! Сегодня мы научимся создавать объемные кнопки CSS3! Они основаны на популярной PSD фриби от Orman Clark для его веб-сайта Premium Pixels. Мы постараемся создать копию этих кнопок с помощью CSS с минимальным количеством кода HTML.

Редкое видео с молодым Стивом Джобсом, снятое в 1980 году. Профессиональный русский перевод.

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

Предисловие

Был вечер четверга, когда нам с коллегой spiff пришла в голову идея написать OpenSource игру на прогрессирующем в наше время HTML5, как говорится, from scratch и just for fun.

Так как мы работаем в области системного программирования и опыта разработки web-приложений у нас было совсем немного, было решено реализовать достаточно простой клон, всемирно известной и популярной игры для первых телефонов Nokia — RapidRoll.

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

В последнее время мне везет натыкаться на интересные статьи для перевода. На этот раз – статья на HTML5Rocks о производительности HTML5 canvas. Автор пишет о некоей стене, в которую упираются разработчики при создании приложений. Какое-то время назад в нее уперся и я при портировании старой-доброй игры на canvas.

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

1. Вступление
2. Тестирование производительности
3. Предварительно отрисовывайте в виртуальный canvas
4. Группируйте вызовы
5. Избегайте ненужных изменений состояния
6. Отрисовывайте только разницу, а не весь холст
7. Используйте многослойных canvas для сложных сцен
8. Избегайте shadowBlur
9. Различные способы очистить экран
10. Избегайте нецелых координат
11. Оптимизируйте анимации с помощью 'requestAnimationFrame'
12. Большинство мобильных реализаций canvas – медленные
13. Заключение
14. Ссылки

Вступление

HTML5 canvas, который начинался, как эксперимент компании Apple, – наиболее широко распространенный стандарт для 2D режима непосредственной графики в интернет. Многие разработчики использую его в широком круге мультимедиа проектов, визуализаций и игр. Как бы то ни было, с ростом сложности приложений, разработчики нечаянно натыкаются на стену производительности.

Пару дней назад, одна моя знакомая попросила помочь ей создать интернет-голосование, поскольку, функционала в Контакте не хватало (там можно создавать опрос только на 15 человек). Задачка оказалась интересной. Итак, за дело!

Кому может пригодиться данный пост:

• тому кто пытается разобраться как работает API в Контакте;
• имеет опыт работы с популярными CMS, здесь речь пойдет о Joomla;
• сильно ограничен во времени;

К вечеру пятницы подоспела новая игрушка в жанре Tower Defence, сделанная полностью на html5 и сопутствующих веб-стандартных технологиях.

Встречайте Pirates Love Daisies.


Игрушка сделана известным flash-гуру Grant Skinner и его командой. Подробнее о том, как создавалась игрушка можно почитать в его блоге и блоге Exploring IE.

Видео с игрушкой можно посмотреть здесь: channel9.msdn.com/posts/Pirates-Love-Daisies

А поиграться можно здесь: www.pirateslovedaisies.com

В прошлых двух статьях мы познакомились с тем, как работают тени в CSS3: box-shadow и text-shadow. Сегодня, продолжая последнюю тему, мы посмотрим на еще несколько красивых примеров использования теней для текста для достижения интересных эффектов.

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

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

BlackBerry WebWorks SDK выгодно отличается среди прочего доступного на настоящий день инструментария для создания приложений BlackBerry тем, что позволяет вести разработку одновременно и под смартфоны, начиная с BB OS 5.0, и под планшеты Playbook.
Если в двух словах, то BlackBerry Web Apps или «веб-виджеты» — это платформа на базе стандартов HTML5, CSS3 и расширяемого JS. Вроде бы «негусто» для написания приличного приложения, но первое впечатление обманчиво. Ниже станет ясно, почему. Нужно отметить, что версия API для планшетов Playbook пока сильно отличается от полноценной, но активно развивается и дополняется, документация обновляется с интенсивной периодичностью. В данной статье мы будем приводить примеры, использующие возможности полноценного API, т.е. поддерживаемые в BB OS 6 и 7, а в следующей опишем процесс разработки виджетов под Playbook.

Начинка BlackBerry WebWorks

Начиная с шестой версии операционной системы для смартфонов движком браузера стал webkit, заменив собой браузер на основе Java. На планшете Playbook вебкит-браузер установлен в качестве нативного изначально. В совокупности одно только это обстоятельство позволяет широко использовать возможности связки HTML5+CSS3, поддержка которых ограничена в иных браузерах. Второй и главный фактор — это расширение для джаваскрипта, объект blackberry, предоставляющий доступ для взаимодействия с ресурсами системы и устройства, расположенными за пределами приложения. Данные ресурсы делятся на категории, присутствующие в именованиях соответствующих вложенных объектов:

Здравствуйте, друзья. За последний месяц я экспериментировал с псевдо-элементами, особенно, с их использованием в создании кнопок. Таким образом, удалось создать крутые эффекты, которые раньше можно было сделать только со спрайтами.

В этом уроке я покажу как создать кнопку с изюминкой, используя только якорный тег и мощь CSS.