Жили мы весело в небольшой веб-студии, делали сайты-визитки, интернет-магазины и небольшие порталы. Были проекты и на платформе 1С-Битрикс. Мы, конечно, не являлись официальным интегратором Битрикс, но делали работоспособные проекты на сколько позволяли силы и опыт. Казалось бы, какие только компоненты не приходилось нам использовать, но сие чудо отечественных мозгов сумело сделать сюрприз под новый год.

Уважаемые Хаброжители! Мы очень рады тому, что теперь с Вами! Поверьте, это крайне важно для нас — быть на связи с профессионалами. Мы тоже себя считаем профессионалами и Ваши комментарии, тому свидетельствуют.
Мы динамично развиваемся и расширяемся. Нам очень нужны сейчас iOS/Android девелоперы, которым мы готовы предложить все, для того чтобы им работалось очень интересно и супер комфортно. Об этом чуть подробней и чуть позже.
А пока немного о том как попасть к нам в команду. Все просто! Надо всего лишь уметь разбивать кирпичи!



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

Если вы разрабатываете игры на HTML и JavaScript, то эта статья для вас. Мы уже много писали о том, что под Windows 8.x можно разрабатывать приложения на HTML/JS, причем, как правило, вы можете с легкостью просто взять и использовать ваш текущий движок, работающий в современных браузерах.

Просто в качестве примера: если вы делаете платформер, то вы можете воспользоваться таким движком, как Phaser (кстати, он поддерживает разработку на TypeScript!), или, нашим Platformer Game StarterKit для Windows 8. К слову, если вы хотите сделать игрушку в жанре Tower Defense, то у нас есть еще один Starter Kit. А если вы хотите создать что-то трехмерное с использованием WebGL, то наше все для вас – это Babylon.js.

GamePad

Но в этой статье я не буду рассказывать, как создать саму игру. Мы зададимся другим вопросом: как подключить к игре для Windows 8.x или в браузере геймпад? Например, игровой контроллер от Xbox 360 или Xbox One:



Будем считать, что вы уже подключили сам геймпад к своему ПК (инструкция для Xbox 360, инструкция для Xbox One). Теперь давайте разберемся, что вам нужно сделать, чтобы добавить его поддержку в своей игре.

В качестве примера я буду использовать платформер RubbaRabbit из приведенного выше стартет-кита. Мы рассмотрим два варианта: игра для Windows 8.x и игра в браузере.

Содержание

• Введение
• Величины, типы и операторы
• Структура программ
• Функции
• Структуры данных: объекты и массивы
• Функции высшего порядка
• Тайная жизнь объектов
• Проект: электронная жизнь
• Поиск и обработка ошибок
• Регулярные выражения
• Модули
• Проект: язык программирования
• JavaScript и браузер
• Document Object Model
• Обработка событий
• Проект: игра-платформер
• Рисование на холсте
• HTTP
• Формы и поля форм
• Проект: Paint
• Node.js
• Проект: веб-сайт по обмену опытом
• Песочница для кода

Рисование — это обман.
М.К.Эшер

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

Но такое использование DOM – не то, для чего он создавался. Некоторые задачи, типа рисования линии между двумя произвольными точками, крайне неудобно выполнять при помощи обычных элементов HTML.

Есть две альтернативы. Первая – SVG, масштабируемая векторная графика, также основанная на DOM, но без участия HTML. SVG – диалект для описания документов, который концентрируется на формах, а не тексте. SVG можно встроить в HTML, или включить через тег <img>.

Вторая альтернатива – холст (canvas). Холст – это один элемент DOM, в котором находится картинка. Он предоставляет API для рисования форм на том месте, которое занимает элемент. Разница между холстом и SVG в том, что в SVG хранится начальное описание форм – их можно в любой момент сдвигать или менять размер. Холст же преобразовывает формы в пиксели (цветные точки растра), как только нарисует их, и не запоминает, что эти пиксели из себя представляют. Единственным способом сдвинуть форма на холсте является очистить холст (или ту часть, которая окружает форму) и перерисовать её на другом месте.

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

Вторая стадия: picture и режиссура

srcset для ленивых, picture для безумных
Мэт Маркес

Итак, для изображений, которые просто нужно масштабировать, мы приводим список наших исходников и их ширину в пикселях в srcset, позволяем браузеру выбирать, какая ширина изображения будет отображаться с помощью sizes, и отпускаем наше безумное желание все контролировать. Но! Иногда нам захочется адаптировать наши изображения, выходя за рамки масштабирования. В таком случае, нам нужно вернуть небольшую часть контроля над подбором исходников. Вводим picture.

Содержание

• Введение
• Величины, типы и операторы
• Структура программ
• Функции
• Структуры данных: объекты и массивы
• Функции высшего порядка
• Тайная жизнь объектов
• Проект: электронная жизнь
• Поиск и обработка ошибок
• Регулярные выражения
• Модули
• Проект: язык программирования
• JavaScript и браузер
• Document Object Model
• Обработка событий
• Проект: игра-платформер
• Рисование на холсте
• HTTP
• Формы и поля форм
• Проект: Paint
• Node.js
• Проект: веб-сайт по обмену опытом
• Песочница для кода

Браузер – крайне враждебная программная среда

Дуглас Крокфорд, «Язык программирования JavaScript» (видеолекция)

Следующая часть книги расскажет о веб-браузерах. Без них не было бы JavaScript. А если бы и был, никто бы не обратил на него внимания.

Технологии веба с самого начала были децентрализованными – не только технически, но и с точки зрения их эволюции. Различные разработчики браузеров добавляли новую функциональность «по случаю», непродуманно, и часто эта функциональность обретала поддержку в других браузерах и становилась стандартом.

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

Содержание

• Введение
• Величины, типы и операторы
• Структура программ
• Функции
• Структуры данных: объекты и массивы
• Функции высшего порядка
• Тайная жизнь объектов
• Проект: электронная жизнь
• Поиск и обработка ошибок
• Регулярные выражения
• Модули
• Проект: язык программирования
• JavaScript и браузер
• Document Object Model
• Обработка событий
• Проект: игра-платформер
• Рисование на холсте
• HTTP
• Формы и поля форм
• Проект: Paint
• Node.js
• Проект: веб-сайт по обмену опытом
• Песочница для кода

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

Хэл Абельсон и Жеральд Сасман, «Структура и интерпретация компьютерных программ».

Когда ученик спросил учителя о природе цикла Данных и Контроля, Юань-Ма ответил: «Подумай о компиляторе, компилирующем самого себя».

Мастер Юань-Ма, «Книга программирования»

Создать свой язык программирования удивительно легко (пока вы не ставите запредельных целей) и довольно поучительно.

Главное, что я хочу продемонстрировать в этой главе – в построении языка нет никакой магии. Мне часто казалось, что некоторые человеческие изобретения настолько сложны и заумны, что мне их никогда не понять. Однако после небольшого самообразования и ковыряния такие штуки часто оказываются довольно обыденными.

Мы построим язык программирования Egg (Яйцо). Он будет небольшим, простым, но достаточно мощным для выражения любых расчётов. Он также будет осуществлять простые абстракции, основанные на функциях.

Содержание

• Введение
• Величины, типы и операторы
• Структура программ
• Функции
• Структуры данных: объекты и массивы
• Функции высшего порядка
• Тайная жизнь объектов
• Проект: электронная жизнь
• Поиск и обработка ошибок
• Регулярные выражения
• Модули
• Проект: язык программирования
• JavaScript и браузер
• Document Object Model
• Обработка событий
• Проект: игра-платформер
• Рисование на холсте
• HTTP
• Формы и поля форм
• Проект: Paint
• Node.js
• Проект: веб-сайт по обмену опытом
• Песочница для кода

Начинающий программист пишет программы так, как муравьи строят муравейник – по кусочку, без размышления над общей структурой. Его программы как песок. Они могут недолго простоять, но вырастая, они разваливаются.

Поняв проблему, программист тратит много времени на размышления о структуре. Его программы получаются жёстко структурированными, как каменные изваяния. Они тверды, но когда их нужно менять, над ними приходится совершать насилие.

Мастер-программист знает, когда нужна структура, а когда нужно оставить вещи в простом виде. Его программы словно глина – твёрдые, но податливые.

Мастер Юан-Ма, Книга программирования

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

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

Привет, username!

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

Примечание: статья расчитана в основном на не-Javascript программистов — иногда я буду вдаваться в объяснения достаточно основных вещей, но надеюсь будет полезна и тем, кто просто не успел ознакомиться с большинством нововведений ES6.

Как известно, стандарт Ecmascript 6 собираются опубликовать в июне 2015. Но так как многое уже имплементировано в современный браузерах, почему-бы не начать использовать это прямо сейчас?
Поскольку jsFiddle и аналоги ES6 не поддерживают, буду использовать es6fiddle для примеров. К сожалению, не все в нем можно показать из-за багов. При отсутствии ссылок на es6fiddle рекомендую копировать сниппеты кода в консоль современного браузера и выполнять их — для наглядности. Рекомендую крайний стабильный Firefox (версия 33 на момент написания статьи) — там все работает «из коробки».

В качестве эпиграфа:

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

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

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

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

Физикам из Массачусетского технологического института впервые удалось создать «идеальное зеркало» — материал, который без искажений отражает световые волны. Теоретически, это позволяет создать «вечную ловушку» для световых лучей. Научная работа “Observation of trapped light within the radiation continuum” опубликована в журнале Nature.

Феномен идеального отражения волн или «связанного состояния в континууме» (“embedded eigenvalue”) теоретически предсказал в 1929 году математик Джон фон Нейман, но до сих пор его никто не мог продемонстрировать экспериментально.

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

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

g+

ВИДЕОСЪЕМКА
Приложение сможет создавать фотографии и видеоролики с помощью камеры в любое время без вашего разрешения.

ЗАПИСЬ АУДИО
Запись аудио.

Может кто и не читал или читал, но как то не особо задумался о последствиях такой политики компании.

К сожалению бдительность у многих потеряна напрочь, через лет 5-10 Гугл соберет такой пласт статистики, кто в каком настроении, с каким выражением лица, при этом запишет что говорит и как в каких ситуация себя ведет, какой пульс и т.д. Например при просмотре рекламы или сервиса. Затем проанализирует, концентрацию людей в городах, плотность в зданиях, сопоставит с эмоциональными составляющими, объединит в один массив информации и так случится, что облачное существо по имени Гугл будет знать все обо всех, в процессе встроит за эти несколько лет дополнительных сервисов, интегрируется еще более плотно в жизнь всех людей.

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

Вы когда-нибуть собирали компьютер? Ну хотя бы один раз в жизни. Хотя бы не полностью.

— «Ну конечно!» — скажете вы.

И будете не совсем правы.

Нет, я ни в коем разе не умаляю ваших достижений, однако, в далеком 1986 году в СССР собрать компьютер могли лишь опытные радиолюбители. Это сейчас достаточно купить материнскую плату, процессор, достать пару планок оперативной памяти и жесткий диск на побольше, и водрузить это все в красивый корпус с блоком питания на 500W. Все это, заметьте, делается без помощи паяльника, осциллографа и кучи принципиальных схем.



Лишь немногие читатели Хабра могут похвастаться, что в советское время действительно собирали бытовые компьютеры. Доставали честными и нечестными путями дефицитные микросхемы, вытравливали печатные платы, до ночи воевали с УФ ПЗУ, вооружившись тумблерным программатором или наматывали трансформаторы для блоков питания. Спустя несколько месяцев кропотливой сборки и наладки наконец-то получалось то, что уже можно гордо называть бытовым компьютером. А если удавалось найти или сделать подходящий и красивый корпус для своего творения, то такой компьютер вызывал зависть у всех, кто еще не прокачал свои навыки крафта до 80 уровня.

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

Тут не будет рассматриваться вопрос применения библиотеки, это на Хабре уже давно сделали, а будет простой конспект-шпаргалка по js с примерами, в роли примеров — сам Backbone.

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

За последние десять лет через меня прошло много начинающих разработчиков. Да и чего греха таить, я тоже когда-то был начинающим разработчиком. За это время я получил тысячи вопросов а-ля “как стать разработчиком”, а также просьб взять людей к себе на практику. К сожалению, даже под чутким руководством более опытных специалистов, далеко не каждому хватает сил и мотивации перейти на качественно новый уровень. Статистика — вещь упрямая: количество “пытающихся” и “достигающих успеха” распределяется согласно принципу Парето, т.е. 20/80, где из десяти человек максимум двоим удается пройти первоначальное испытание. Остальные отваливаются по дороге или процесс обучения у них растягивается на долгие годы. И все же, каким должен быть начинающих разработчик, какими навыками и знаниями он должен обладать? Об этом и пойдет речь в статье.

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

Вы PM. Как узнать – готова ли вёрстка к реальному использованию?
Вы заказчик. Как убедиться, что работа выполнена качественно?
Как оценить качество вёрстки?

Когда я стал тим-лидом, а позже PM, передо мной стала задача проверять вёрстку наших проектов. Нужно было выработать формальные, легкопроверяемые критерии, соответствие кода которым, должно было давать некую гарантию, что не будет факапов и ни клиент, ни программеры не сказажут потом “WTF?”.

Клиенту неважно насколько красив ваш код, но ему важен результат. Качественный код нужен фирме, т.к. он надёжней и в будущем его будет легче поддерживать.

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

Итак что же это за список?

Краткая версия теперь доступна на html5checklist.com (github), где можно вносить pull-request'ы.

История обновлений:

• 2015/08/11: Актуализировал рекомендации по оптимизации скорости загрузки. Добавил требование поддержки Retina. Дополнил «19. Мелочи» требованием что изображения должны масштабироваться в зависимости от размера окна.
• 2015/08/10: актуализирован список исключений для CSSLint
• 2015/07/29: актуализирован пункт №13 «плохо»/«хорошо»
• 2015/04/08: добавлено требование использования препроцессоров и рекомендация использования систем сборки
• 2013/04/25: добавлены анализаторами качества кода: CSSLint и JSHint, указан сайт подбора css font stack (спасибо @fliptheweb), мелкие уточнения (работу интерактивных элементов страницы, что не пропадает фон на высоких разрешениях, не должно быть пустых презентационных блоков, при проверках контента — пробовать удалять заголовки, менять местами блоки)
• 2013/04/24: добавил пункт об минимизации каскада (БЭМ-техники, MCSS, SMACSS), необходимости вписывания в экран моб. устройства, заменил ссылку на проверочный текст отображения стандартного html на код с normalize.css, поправил пример где в рекомендации встречался длинный каскад, упомянул про Opera на Presto и новый уровень семантики — в именах классов BEM.
• 2012/04/12: отсортировал пункты проверки в порядке важности, выделил главные, дополнил статью подробностями
• 2011/12/07: дополнил согласно доклада на WSD Минск'2011.
• 2011/07/19: добавлено про повышение надёжности вёрстки благодаря html5-тэгам, про необходимость favicon/apple-touch-icon, отсутствие багов при ресайзе textarea
• 2011/06/15: добавил пояснения какие ошибки валидации допустимы, рассказал про отсутствие официальной кнопки «HTML5 Valid» и про официальное лого HTML5 на сайте.

Всем привет.

Ссылки на предыдущие уроки:

• Уроки B00-B03
• Уроки B04-B08
• Уроки B09-B12
• Уроки B13-B16
• Уроки B17-B20