Ниже представлена подборка инструментов для дизайнеров и front-end-разработчиков. Мы настоятельно рекомендуем вам просмотреть их все. Надеемся, что вы найдете для себя что-то полезное.

Уже более 5 лет существует проект emscripten. За время существования проекта была проделана огромная работа. Удивить искушенного читателя стало гораздо сложнее. Мы уже видели DOOM, Dune 2, TTD, С&C и много чего ещё в браузере. Однако, запустить DOS программу в браузере по прежнему сложно: нужно не плохо разбираться в C/C++ и emscripten. Эксперименты с Dosbox вылились в проект em-dosbox, большинство DOS программ стали доступны для браузера. Что бы поставить точку, осталось лишь создать открытое API для запуска DOS программ в браузере.

Привет Хабр! Я продолжаю цикл статей о том, как построить свой облачный хостинг за 5 минут. В прошлой статье мы рассмотрели инструменты, которые помогут решить нам проблему обнаружения сервисов (Service Discovery). В это части мы приступим к практике, построим облако и посмотрим как эти инструменты ведут себя в реальной жизни.

Как и прежде, всю работу может выполнить обычный программист в течение 5 минут, просто запустив набор сценариев для Ansible, которые я подготовил специально для вас и выложил на GitHub.

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

В последнее время на Хабре стало много публикаций на тему Rust и Go и достаточно мало про D. Главной причиной этого является поддержка этих языков Mozilla и Google, которые могут вкладывать большие деньги в свои детища. За D не стоит ни одной столь же крупной компании, однако это не мешает языку активно развиваться. Сейчас я кратко расскажу о последних новостях языка и оставлю кому-то другому возможность провести комплексное сравнение Rust/Go и D.

Какими CSS обладает особенностями, которые приносят боль на больших проектах?

• глобальное пространство имен
• разрешение зависимостей
• поиск «мертвого» кода
• отсутствие констант
• неоднозначный результат (каскад)

Давайте разберемся с тем, как мы сейчас пишем CSS на больших проекта и как хотелось бы его писать в идеальном мире.

Возьмем простой пример: кнопка и ее состояния.

Рассуждения

При упоминании словосочетания «контейнерная виртуализация», многим на ум сразу же приходят Virtuozzo и OpenVZ, а также Docker. Ассоциируется же это все, в первую очередь, с хостингом, VPS и другими подобными вещами.

Дома, на личных компьютерах многие используют виртуальные машины: в основном, пожалуй, Virtualbox. Как правило, для того, чтобы работая под Linux, иметь под рукой Windows или наоборот. Однако, при наличии множества родственных Linux-операционок, я стал замечать, что использование виртуальных машин — это, мягко говоря, нерационально.

Ты просто-напросто ненавидишь Git? Ты абсолютно счастлив с Mercurial (или, фу, с Subversion), но раз в месяц тебе приходится отважно сталкиваться с Git, потому что каждый, даже его чертова собака, теперь использует GitHub? Тебя терзают смутные подозрения, что половина всех команд Git на самом деле удалят всю твою работу навсегда, но ты не знаешь какие именно и не хочешь проводить три недели, углубляясь в документацию?

Хорошие новости! Я написал тебе этот изумительный Интернет-пост. Я надеюсь, что смогу размазать достаточно Git-а по твоему лицу, чтобы понизить вероятность сделать что-то непоправимое, а так же уменьшить твой страх что-то сломать. Этого должно быть также достаточно, чтобы сделать документацию Git немного более понятной; она крайне тщательно и глубоко проработана и очень глупо, если ты все еще не прочитал половину.

Я постараюсь излагать коротко, но также, чтобы это было потенциально полезно тем людям, кто вообще никогда не сталкивался с контролем версий, поэтому повсюду будет разбросан 101 совет. Не бойся! Я не думаю, что пользователи Mercurial понятия не имеют, что такое патч.

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

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

Сегодня речь пойдет о том, как создать игру не используя js и прочих скриптов. Только HTML / CSS, только хейткор.

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

Внимание! Реклама! Пост оплачен Капитаном Очевидность!

Ниже под катом вы найдёте 15 пунктов, описывающих правильную организацию ресурсов, доступных по протоколу HTTP — веб-сайтов, «ручек» бэкенда, API и прочая. «Правильный» здесь означает «соответствующий рекомендациям и спецификациям». Большая часть ниженаписанного почти дословно переведена из официальных стандартов, рекомендаций и best practices от IETF и W3C.



Вы не найдёте здесь абсолютно ничего неочевидного. Нет, серьёзно, каждый веб-разработчик теоретически эти 15 пунктов должен освоить где-то в районе junior developer-а и/или второго-третьего курса университета.

Однако на практике оказывается, что великое множество веб-разработчиков эти азы таки не усвоило. Читаешь документацию к иным API и рыдаешь. Уверен, что каждый читатель таки найдёт в этом списке что-то новое для себя.

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

Демо материалы лежат здесь.

Предупреждение: эффекты работают только в современных браузерах, поддерживающих возможности CSS3.

Подготовка к работе.

Итак, для того, чтобы создавать наши эффекты нам понадобится вот такая простая дефолтная html-структура:

<div class="effect>
  <img src="img/ef1.jpg" alt="Effect #1" />
  <div class="caption">
    <h4>Title is Here</h4>
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut.</p>
    <a class="btn" href="#" title="View More">View More</a>
  </div>
</div>

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

• Вода
• Gulp
• Require.js

Предисловие

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

Под красотой кода я (полагаю, и многие другие) понимаю:

• Читабельность
• Простоту изменения и дополнения
• Возможность другим разобраться, как это работает

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

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

Привет! Меня зовут Александр Завьялов. В Яндексе я занимаюсь разработкой интерфейсов. Недавно я выступил перед коллегами с докладом об аппаратном ускорении в жизни верстальщика, где также коснулся смежных тем. Рассказал о производительности веб-страниц, о том, как она измеряется и к чему она может стремиться.

^{Ссылка, если видео не отображается}

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

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

В данной статье я хочу рассказать, о том, как можно сверстать «хорошо» (по крайней мере структурировано ;), а заодно рассказать и о методологии, которая может «упростить жизнь» при верстке. Структура поста будет следующей:

• BEM
• Собственно пример — как сверстать страницу

Больше года назад я опубликовал 12 малоизвестных фактов о CSS (перевод на хабре), и по сей день это была одна из самых популярных статей на SitePoint. С тех пор я собирал больше интересностей и маленьких советов по CSS для новой публикации. Мы же все знаем, что каждый успешный фильм должен способствовать выходу новомодного сиквела, верно?

^{Автор иллюстрации SitePoint/Natalia Balska.}

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

Всем привет. В данной заметке я опишу один из простейших вариантов, как можно по-быстрому поднять под виртуальной машиной полноценное рабочее окружение, готовое к работе и дальнейшему расширению.
Во главе угла стоят «Vagrant» (для управления виртуализацией) и «Scotchbox» (бокс для Vagrant — образ с ubuntu и предустановленным ПО, подготовленный ребятами из scotch.io).

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

Я очень люблю статические типы, поэтому TypeScript стал незаменимым помощником при работе с NodeJS или браузерным JS.

По долгу службы приходится иметь очень много дел с JSON, и здесь система типов TypeScript не помогает ничем, даже мешает, ведь компилятор сообщает об отсутствии ошибок, JSON.parse возвращает тип Any. Кроме того, TypeScript не поддерживает рефлексию, ввиду специфики работы, а значит, нет возможности проверить тип, основываясь на уже существующем коде. Также, до последнего времени, средств для мета-программирования не было вовсе.

Зачастую проверка корректности пришедшего JSON-объекта оборачивается громадным кодом в конструкторах классов, либо такими же конфигурационными файлами. Но, наконец-то, в TypeScript 1.5 появились декораторы.

Декораторы позволяют выполнить некие манипуляции с классом, методом, свойством или параметром во время их объявления, при этом возможна передача дополнительной информации о декорируемом объекте. Этим я и воспользовался.

Суть вот в чем, есть редактор (для примера: imperavi.com/redactor) и есть необходимость загружать сразу много картинок за один раз. В идеале простым перетаскиванием, а в нашем случае редактор кушает только одну картинку за раз. Это нужно поправить.

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