HTML *

Передохнём от верстки всяких пользовательских интерфейсов и просто порисуем на CSS. Рисовать будем такую вот сцену:



Смотреть на jsfiddle.

В статье я попробую описать пошаговое создание этой сцены.

Сколько я не мучил поисковик, а решения этого вопроса так и не нашлось. Конечно, всегда можно использовать JS и это нормально, но иногда заказчик душа просит изысков.

Привет, хабражители!

Представляю вам список YouTube-каналов для обучения веб-разработке. Список доступен на гитхабе, там он будет пополняться и редактироваться. В планах — создание отдельной странички для фильтрации каналов по тегам и рубрикам.

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

Под катом — текущая версия списка.

Простой диспетчер задач с веб-интерфейсом, написанный на языке GO для Unix-систем включая Android.

Правильный ответ — да, легко!

Практически всегда описывая устройство CleverStyle CMS у кого-то возникал вопрос, а как же настраивать внешний вид, ведь нет никаких шаблонов.
Нужно признаться, я немного лукавил, говоря, что внешний вид можно изменить с помощью CSS. Изменить-то можно, но не кардинально.
Шаблонизатора как не было, так и нет, и даже не планируется. Вместо этого для генерации простого HTML используется BananaHTML, а сам интерфейс ложится на плечи веб-компонентов и Polymer в частности.

Ни для кого не секрет, что Google повсюду в своих продуктах внедряет так называемый material design. Как и любой другой стиль он имеет сторонников и противников. Не буду касаться этих споров. Если вам нравится данный подход, Google подготовил полную спецификацию и описание особенностей: Material Design.

Для любителей angularjs появилась библиотека с набором директив, реализующих графические компоненты и позволяющих создавать разметку в соответствии с принципами material design. О ней и пойдет рассказ.

Я постараюсь кратко показать некоторые особенности и недостатки, а также покажу небольшое приложение для демонстрации.

Доброго времени суток, уважаемые хабравчане. Поздравляю всех с наступившим 2015 годом! За последнее время я увидел несколько интересных и полезных инструментов/библиотек/событий, которыми хочу поделиться с Хабром.

Лучшее от Codrops за 2014 год

Я думаю многие из вас знакомы с потрясающими демками от Codrops. Авторы сайта буквально всегда реализуют интереснейшие UI/UX задумки с помощью HTML/CSS/SVG/JS и подробно рассказывают о том, как они это сделали. А это их собственная мега подборка с лучшими работам. Также рекомендую для вдохновения коллекцию самых популярных пэнов за 2014 год от CodePen.

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

Доброго времени суток, уважаемые хабравчане. За последнее время я увидел несколько интересных и полезных инструментов/библиотек/событий, которыми хочу поделиться с Хабром.

Front-end Job Interview Questions

Репозиторий с самыми актуальными вопросами на собеседовании на позицию фронтенд разработчика. Проект от команды знаменитого HTML5 Boilerplate и набрал уже более 7500 звезд на GitHub.

ShareDrop

В «Америках» почему-то часто критикуют веб-стандарты и работу консорциума W3C в целом. Но не знаю как вас, а меня современные возможности очень даже радуют, особенно когда я вижу их реализацию. Встречайте P2P сервис для передачи файлов, основанный на технологии WebRTC и Firebase. Это веб аналог яблочного AirDrop. Лично я открыл оффлайновый учебник «Постройка.ру» по HTML лет 7-8 назад и по сравнению с тем, что мы видим сейчас — это небо и земля. Даже невзирая на объем и некоторую путаницу в спецификациях.

Понимаете, каждый год 31 декабря мы с друзьями разыгрываем подарки. Это у нас такая традиция…

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

Подарков на всех может не хватить, поэтому, чтобы никому не было обидно, однажды мы решили, что каждый захватит по одному «общественному» подарку. И на месте решим, кто кому и что дарит.

Слово Jumla на языке суахили означает «все вместе», «как одно целое».

Когда-то давно, довольно долгое время я верстал сайты на HTML/CSS/JavsScript и не имел никакого представления о CMS.
Пугающим моментом было то, что как я полагал владение PHP является крайне необходимым, однако по факту каких-то базовых знаний оказалось достаточно (простой код оказывается понятен программисту любого другого языка, а в дебри лезть не обязательно).
Для человека, владеющего только версткой и скриптами, довольно достаточно знать какие-то определенные моменты, для того, чтобы с ходу приступить к работе с Joomla.
Что-то в этих моментах схоже с другими CMS, что-то отличается.
Постарался изложить эти моменты кратко. Если бы они мне были известны сразу, то смог бы начать создавать администрируемые пользователями сайты гораздо быстрее.
Итак, если вы владеете HTML, но не имеете представления о CMS Joomla, то вам следует нажать кнопку ниже.

И снова, здравствуйте!

Сегодня мы продолжаем знакомство с картами Bing Maps. В предыдущей статье мы разобрались с тем, как добавить карту в Windows приложение, а также посмотрели, как работать с метками на карте.

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

Всем привет!

В этой статье мы научимся работать с Bing-картами в Windows-приложениях. В результате мы получим приложение на JavaScript с использованием Bing Maps SDK.

Помимо использования карты в приложении, мы рассмотрим дополнительные возможности SDK. Научимся изменять вид карты, добавлять метки и описания к ним.

С тех пор как я начал свой челендж «одна игра в неделю» на lessmilk.com, я заметил, что самым распространенным вопросом, который я получал на свою почту был — «как Вы придумываете новые интересные идеи каждую неделю?». Поэтому я решил попробовать ответить здесь на этот вопрос.

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

Если вы разрабатываете игры на 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 и игра в браузере.

Доброго времени суток, уважаемые хабравчане. За последнее время я увидел несколько интересных и полезных инструментов/библиотек/событий, которыми хочу поделиться с Хабром.

Firefox для iOS

Пока это еще только наработки, но затея просто великолепная.

SVG Edit

Отличный инструмент для редактирования SVG прямо в браузере. Вообще с распространением дисплеев с высоким разрешением, сообщество веб-разработчики все чаще и чаще обсуждает всевозможные способы взаимодействия с SVG. Идея еще одного простого и открытого редактора очень даже уместна, а функционал способен удовлетворить все потребности фронтендеров. Исходники тут. Также хочу добавить, что проект не стоит на месте и постоянно развивается.

Во время разработки нашего сервиса bitcalm.com, нам потребовалось организовать автоматическую сборку проекта. Перед нами стояла цель улучшить производительность frontend-части нашего приложения, а также оптимизировать процессы разработки и развертывания на сервере.

Основными задачами, которые требовалось решить, стали:

1. Объединение и минификация скриптов
2. Объединение и минификация стилей
3. Сжатие png-изображений
4. Создание спрайтов из всех изображений (с возможностью удобного использования и с поддержкой двух видов спрайтов для девайсов с разным PPI)
5. Построение разных версий html-документов для разработки и для продакшна

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

Аурэлио Де Роза несколько дней назад выпустил, на мой взгляд, очень привлекательную статью, которой я хочу с вами поделиться на тот случай, если у вас плохо с английским.

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

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

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

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