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

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

Скорость работы веб-приложений условно зависит от трех составляющих: 1) как устроена сетевая инфраструктура, через которую доставляются данные и код, 2) как работает браузер и 3) как, собственно говоря, написан ваш код, который браузер должен исполнять.

Все три компоненты постоянно улучшаются и оптимизируются. Например, в сетевом стеке определенные общие улучшения несет переход на HTTP 2.0. С точки зрения браузеров, все производители постоянно работают над улучшением своих движков. В случае Chakra в Microsoft Edge, помимо общего повышения производительности работы с JavaScript, мы добавляем поддержку специализированных средств вроде Asm.js и SIMD.js, призванных повысить эффективность кода в специфичных сценариях (в Firefox и Google Chrome — аналогично).

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

Наши коллеги Дорис Чен и Джон-Дэвид Далтон подготовили целый курс с практическими советами по улучшению производительности вашего кода на HTML и JavaScript. Вы можете посмотреть его на соответствующей странице в Microsoft Virtual Academy или под катом в виде отдельных роликов.

[TL;DR]

[ 1-я часть книги ]
[ 2-я часть книги ]
[ 3-я часть книги ]
[ 4-я часть книги ]
[ 6-я часть книги ]
[ 7-я часть книги ]
[ 8-я часть книги ]

Разбираемся с библиотекой паттернов

Федерико Холгадо

Книга «Refabricating Architecture», написанная Стефеном Кираном и Джеймсом Тимберлейком, в значительной степени повлияла на мое понимание дизайна. Авторы этой книги сравнивают архитектуру с автомобильной, аэрокосмической и кораблестроительной индустрией, обсуждая практически полную неизменность строительных процессов (с фундаментальной точки зрения) в рамках последних 80-ти лет на контрасте со стремительными переменами в других отраслях производства и дизайна.

Ранее на Хабре уже рассказывали о загадочном меню. Изобретение по истине гениальное и полезное. Уверен, каждый из вас хотел бы модифицировать меню на своем сайте таким же образом.

Доброго времени суток, уважаемый читатель. Судьба сложилась так, что я один из тех, кто отвечает за разработку проектов интернет-агентства в любимом, для меня, городе Хабаровск. И хотел бы поведать о том, как мы сохраняем должное качество продукта для клиентов, при условии довольно низких бюджетов, в сравнении с центральной частью России, что сказывается на требованиях к скорости сборки проекта. И цель моя — сократить издержки на разработку и дальнейшее обслуживание, что выливается в необходимость как можно быстрей сделать сайт с как можно большим количеством редактируемых в админ-панели элементов.

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

1. Верстка, аутсорсинг и технические задания

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

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

В виду отсутствия хорошего материала по парсингу с помощью скриптового браузера SlimerJS и наличия свободного времени решил написать небольшую статью.

UPD: Продолжение статьи с примером техзадания

Не так давно на хабре были две статьи (Согласно техническому заданию и А зачем мне ТЗ? Я и так знаю!) посвященные техническим заданиям. У меня обе статьи вызвали, мягко говоря, недоумение, в особенности статья «Согласно техническому заданию». На мой взгляд, это вообще вредная статья, которая приводит к неверному понимаю сути ТЗ. В связи с этим хочу выразить свой взгляд на этот вопрос. Не буду говорить обо всех тех. заданиях, слишком широка тема, но думаю смогу рассказать о ТЗ на сайт.

То описание технического задания, о котором речь пойдет ниже, не является пересказом ГОСТа, но скорее является его творческой переработкой, хорошо сдобренной горьким опытом. Описанный ниже подход к ТЗ не охватывает все аспекты сайтостроения, но задает общее направление.

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

1. Обоснование необходимости ТЗ

А зачем вообще нужно ТЗ на сайт? Заказчик говорит: «Нужен следующий сайт: каталог товаров, корзина, форма заказа, доставка, мы на карте, о нас, обратная связь». Что не ясно? Ничего необычного, всё обыденно и рутинно.

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

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

1 Один столбец вместо нескольких

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

Введение в jQuery Mobile

Мобильная стратегия jQuery может быть легко объяснена — это внедрение пользовательского JavaScript в наиболее часто используемые браузеры на мобильных платформах.
Основной ценностью нашего подхода является широкий спектр платформ, поддерживаемых jQuery Mobile. Мы прилагаем все усилия, что бы jQuery поддерживал все мобильные браузеры, по крайней мере занимающие номинальную долю рынка.
Что бы обеспечить широкую поддержку, все страницы в jQuery Mobile построены на чистом HTML, это обеспечивает совместимость с довольно многими web-ориентированными устройствами. В устройствах, которые интерпретируют CSS и JavaScript, jQuery Mobile применяет прогрессивные методы, что бы ненавязчиво преобразовать семантические страницы используя богатый интерактивный опыт и мощь Query и CSS. Стандарты доступности активных интернет-приложений, таких как WAI-ARIA тесно интегрированы во всей структуре для оказания поддержки для чтения с экрана.

Сегодня Twitter объявил о запуске нового набора инструментов Bootstrap для создания web-приложений при помощи CSS. Набор включает в себя стили для типографики, форм, кнопок, таблиц, стрелок и.т.д.

Создатели говорят, что сервис был запущен как фреймворк для создания фронтэнд приложений. Набор был разработан во время первого твиттеровского Hackweek.

Про технологию электронной бумаги я узнал, если не ошибаюсь, в году этак в 96-м. Готовился сдавать “тысячи” по английскому и в каком-то штатовском журнале нашел статью с описанием технологии и радужными перспективами коммерческой реализации. До рынка технология добиралась почти десять лет.

Когда же устройства наконец пошли в продажу, стоимость их, на мой совершенно субъективный взгляд, была завышена раза в два от нормальной. Ну не позволяло мне национальное зеленое земноводное выложить три сотни долларов за вещь, которая должна стоить сотню-полторы. Слишком узок функционал ридеров (особенно первых поколений) и слишком много других устройств меньшей стоимости можно использовать для чтения — от КПК и коммуникаторов, до телефонов с джавой и GPS'ов.

Начавшееся в этом году снижение цен на ридеры наконец сместило их стоимость в область, которую я лично готов назвать «оправданная покупка». Так что когда Амазон объявил о предпродажной регистрации на Kindle 3-й версии за $139 (с доставкой в Украину — почти $160), решиться было не сложно.

Первым же делом Амазон обманул со сроками. Во первых — начал продажи раньше, чем обещал. Во вторых, доставить пообещал «8-9 сентября», а посылку принесли домой уже 1-го. Вот как можно сотрудничать со столь не пунктуальной компанией, скажите пожалуйста?

Что-то ничего на хабре нету про старый добрый SAP AG. А зря! Вот маленький экскурс в прошлое дабы познакомить читателя с известнейшим мировым производителем ERP-систем.


Когда пять менеджеров, работающих в компании IBM, решили в 1972 году создать свою собственную компанию и найти новый способ более эффективного ведения бизнеса, трудно было спрогнозировать, что их программное обеспечение в итоге станет для мирового бизнеса решением, отвечающим золотому стандарту. Сейчас компания SAP является мировым лидером среди поставщиков программных решений для управления бизнесом и занимает третье место среди ведущих в мире софтверных компаний по их рыночной капитализации (по состоянию на 25 января 2006 года).
Хассо Платтнер, Дитмар Хопп, Ганс-Вернер Гектор, Клаус Чира и Клаус Велленрейтер работали в качестве системных консультантов в IBM, когда они заметили, что их клиенты разрабатывали такие же или подобные компьютерные программы. Они понимали, что необходимо поставлять стандартное программное обеспечение, которое позволит интегрировать бизнес-процессы и управлять потоками информации в режиме реального времени. Кроме того, они смогли предвидеть, что в один прекрасный день фокусной точкой при обработке данных станет экран компьютера. Оба предвидения стали реальностью, когда они ушли из IBM и создали компанию «Systems Analysis and Program Development» (Системный анализ и разработка программ).
Компания SAP была основана в Мангейме, Германия. Это были времена, когда к «новейшей технологии» относились карманные калькуляторы, а компьютеры имели емкость памяти 500K. В этом же году была основана компания Apple Computer; другое новшество – была создана первая программа управления электронной почтой. Прошло не очень много времени, и SAP была готова запустить на рынок систему RF-System, которая позднее была названа R/1 — программа автоматического учета и автоматической обработки транзакций, которая отличалась тем, что представляла собой стандартное программное обеспечение и осуществляла обработку данных в реальном времени. Первыми ее клиентами были Rothhaendle и Knoll, которые использовали решения SAP для финансового учета.

Ниже приведены несколько советов, выработанных на тренировках совместно Франко Коломбо и Арнольдом Шварценеггером, людей, которых, несомненно, можно назвать победителями. Эти советы будут уместны не только в спорте, но и в повседневной жизни, применительно к любой цели.

Не так давно мне предстояло путешествие по рабочим делам в соседний регион. И, так как рабочие дела требовали постоянного использования интернета, пришлось задуматься о том, как можно сэкономить на недешевом роуминговом GPRS-трафике (UPD: способ также пригоден для скачивания прона без ведома родителей обхода ограничений корпоративных firewall).

Сегодня, в 15:00 по Москве выйдет первая играбельная версия PocketFALLOUT — почти полноценного порта знаменитой игры.

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

Решил тут на досуге написать статейку о том, как писать приложения для Android'а. Писать будет простенький тайм менеджер. В этой части я напишу саму программу, приделаю к ней интерфейс с анимацией, а в следующей, если будет интересно, напишу к ней сервис, чтоб программа работала еще и в фоновом режиме.

Что будет рассмотрено:

• RelativeLayout для реализации интерфейса программы с наложением изображений друг на друга.
• Timer для реализации алгоритма подсчета времени.
• Animation для свистоперделок красивого интерфейса апплета.

Для наглядности добавил скринкаст как все это добро работает.

Итак, пишем простенький тайм менеджер для Android'а.

Зачем вам это?

• Если вы знаете как делать сайт, этот метод поможет вам убедить заказчика, почему вы предлагаете ему именно этот вариант.
• Если вы заказываете сайт, то сэкономите от 2 до 10 часов объяснений что вам нужно и зачем.
• Если вы стартапер, то вся ваша команда сможет участвовать в создании нового сайта или лэндинга. Тот самый случай, когда одна голова хорошо, а команда лучше.
• Если вы учите стартаперов, то сможете помочь им выглянуть из позиции «я знаю как надо» и без сопротивления подвести их к началам CusDev-a.