Привет хабралюди! Не так давно волею судеб в мои руки попал архив видеокассет с обучающими кинофильмами советских времен.
Вооружившись нехитрым устройством LG DVRK789 (DVD-VHS комбайн) и любимой программой видеообработки SONY VEGAS, некоторые кассеты удалось оцифровать, изображение (насколько это возможно) привести в приличный вид, и выложить все это на youtube. Тематика обучающих кинофильмов разнообразнейшая, от производства скота через пошив мужских костюмов до добычи нефти и использования лазеров (если кому интересно — добро пожаловать на канал).

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

Вы 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 на сайте.

Есть одна бородатая шутка: «если у вас есть проблема, и вы собираетесь решать ее с использованием регулярных выражений, то у вас есть две проблемы». Действительно, регулярные выражения – очень мощный и гибкий инструмент, применяемый для решения весьма широкого круга задач. Но, как водится, для поддержания баланса, такой серьёзный инструмент имеет весьма недружелюбный вид.

(<([a-z]+[^>]*)>)(.*)(</\2>)

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



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

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

FightCode — это онлайн-игра для программистов, построенная по образу и подобию классической Robocode. Для программирования танков используется JavaScript, все сражения происходят прямо в браузере, а редактор кода на сайте имеет встроенную «песочницу», которая позволяет в реальном времени видеть эффект от изменений кода. В отличие от многих других подобных игр, создатели неплохо поработали над дизайном — игровое поле и весь сайт в целом выглядят привлекательно и ярко.



Всё это делает FightCode одним из лучших вариантов для новичков в подобных играх или для обучения программированию. Проект довольно молодой, и несмотря на то, что на сайте зарегистрировано почти 9000 игроков, пробиться в первую сотню рейтинга можно без особых усилий. Очень удобно организована система боёв со случайными соперниками — из всех доступных роботов автоматически выбираются те, чей рейтинг близок к вашему. Очки считаются по системе Эло — победа над более сильным противником даёт гораздо больше очков, чем над слабым.

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

 

Эта маленькая библиотека позволяет очень просто создать пошаговое введение для сайта или приложения. Достаточно добавить атрибуты data-intro и data-step с описанием и номером шага соответственно к нужным элементам страницы. Вот так:

<a href='http://google.com/' data-intro='Hello step one!' data-step='1'></a>

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

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

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

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

При мне менялись технологии и концепции. Тачскрины, голосовое управление, сенсоры движения, тачпэды, не говоря о всяких мышах — все это органично вписывалось в мой мир взаимодействия с приборами, и на этом пути не было ни особых потрясений, ни революций. Я спокойно и естественно считал себя типичным early adopter. Я был в сетях Fido и Compuserve, писал электронные письма до Эпохи интернета, общался в чатах и конференциях годы до появления ICQ, хранил файлы в «облаке» чуть ли не до рождения некоторых нынешних стартаперов в модной области Cloud. У меня даже несколько лет был собственный блог задолго до сегодняшнего блог-сумасшествия и десятков доступных платформ для блоггинга.

И так далее, и тому подобное.

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

Еще 10—20 лет назад полноценное дистанционное обучение было практически невозможным. Необходимость переезда в другой город или даже страну являлась, наверное, одной из наиболее частых причин, почему предпочтение отдавалось местным вузам, вместо того чтобы поступать в университеты своей мечты. Да, существует заочное образование, но мы прекрасно понимаем, что в большинстве случаев данная форма образования — всего лишь для галочки. К счастью, в настоящее время есть возможность учиться, было бы желание. Для тех, у кого с желанием все в порядке, прошу под кат.

Бен Кэменс обнаружил, что в выпадающем списке Shop by Department на сайте «Амазон» ховер-эффект происходит очень быстро, абсолютно без какой-либо задержки. Тем самым происходит нарушение старого, выработанного ещё в 90-х годах прошлого века правила: перед отображением пункта подменю необходим так называемый гистерезис, запаздывание.



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

Генератор абстракций (видеообзор)

Привет, Хабрахабр!
Не для широких масс, но для любителей программирования и графики решился я опубликовать сей пост.

DISCLAIMER: Все изложенные ниже приемы работают для меня, и не факт, что будут работать для вас. IMHO only, на истинность в последней инстанции не претендую.

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

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

Отдых тела и ума

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

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

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

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

Я уже писал про обучение детей программированию на основе Лого. Однако возможен и другой, ещё более “симпатичный” подход – это визуальное программирование, в котором вообще не надо писать текст. Причём визуальное – это не обязательно рисование блок-схем! Например, можно исходить из понятия объекта, который находится в разных состояниях и реагирует на внешние события.

В Майкрософт также задумываются над проблемами обучения детей, в частности, уже писалось про проект Kodu Game Lab. Kodu – это интерактивная среда создания трехмерных игр, доступная одновременно на Xbox 360 и на ПК. Я решил написать о ней подробнее, поскольку начиная с сегодняшнего для любой желающий может скачать и попробовать версию для ПК.

Сегодня я хочу рассказать о том, почему и как мы пришли к использованию препроцессора Stylus в разработке Яндекс.Почты, а также описать используемый нами метод работы со стилями для IE. Он очень легко реализуется именно с помощью препроцессоров и делает поддержку IE простой и удобной. Мы разработали для этого специальную библиотеку, которой тоже поделимся — if-ie.styl.

Это только первая статья из серии статей об использовании препроцессора Stylus в Яндекс.Почте, которые мы готовим к публикации.

В открытом доступе опубликован исходный код Photoshop 1.0.1.

Код опубликован Музеем компьютерной истории с разрешения компании Adobe и свободно доступен для некоммерческого использования. Архив содержит 179 файлов, в общей сложности около 128 000 строк кода почти без комментариев. Около 75% написано на языке программирования Паскаль, ещё 15% на ассемблере для Motorola 68000.

Сегодня — немного практических советов по работе с WebStorm.

Вначале пишем совсем простой HTML, после color: нажимаем <Ctrl-пробел> и получаем список цветов.



КО подсказывает: во всех IDE от JetBrains <Ctrl-пробел> — это контекстная подсказка.

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



А теперь представим себе проект посложнее, небольшое приложение под node.js.

Этот топик будет отличаться от предыдущего топика Классический сапёр на html5 и LibCanvas. Его даже, скорее, можно назвать продолжением. И первая часть содержала пошаговую и детальную инструкцию, как заставить работать игрушку, то в этой части будет пару интересных приёмов, как её «оказуалить».

Играть в изометрический «Сапёр»

---

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

• Изометрическая проекция
• Оптимизация скорости отрисовки через грязный хак
• Спрайтовые анимации
• Draggable слои
• Оптимизация обработчика мыши согласно особенностей приложения

В этой статье я пошагово расскажу, как писать самый обычный, классический сапёр при помощи Html5 Canvas, AtomJS, и тайлового движка LibCanvas.

А также смотрите продолжение — "Изометрический сапёр на LibCanvas (html5)"