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

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

Познакомьтесь с веб-сервисом Barberry (https://github.com/Magomogo/Barberry), который мы успешно используем уже около года. Суть сервиса в том, что он хранит оригиналы загруженных документов и способен по-разному отдавать их, конвертируя на лету.

Мне очень нравятся Словари Яндекса. Там много всего можно найти, но чего там нет, так это физико-математической литературы.

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

Но взять, допустим, «библиотеку мехмата». В ней содержатся ссылки на гигабайты текстов в совершенно неудобном для использования формате DjVu; эти тексты в принципе никак не индексируются (а в связи с правовыми проблемами библиотека превратилась в собрание ссылок на файлы в обменниках).

Тексты о математике в русской Википедии, с одной стороны, правятся часто кем попало (с использованием самых разных источников информации), а с другой стороны, представляются в виде HTML и изображений формул, то есть собственно математический контент также мало поддается индексированию. Википедия никогда не может расцениваться как надежный источник цитирования, потому что ее тексты не постоянны.

Что до проблем с индексированием, то чего уж там, известный всем профессионалам сервер arXiv.org работает с LaTeX, а LaTeX, хоть и невероятно популярен среди математиков и физиков, создавался отнюдь не для Веба.

W3C еще в 2003 году выпустил техническую рекомендацию на язык математической разметки (MathML) второй версии — основанное на XML средство семантической и визуальной разметки формул. Поддержка в браузерах уже есть: движок Gecko имеет встроенную поддержку, а Internet Explorer имеет пару сносных плагинов.

Так почему же нет сайтов с MathML?..

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

У меня давно уже созрел план запустить русскоязычный сайт, который содержал бы справочник по математике в формате MathML. За основу можно взять известное бумажное издание (которое уже проверено временем и может использоваться для цитирования и ссылок). Ресурс будет полезен по многим соображениям: он не только будет содержать полезную простому пользователю информацию, но и станет площадкой для технических исследований и экспериментов, таких как индексация математической информации и поиск по формулам. Отрицательная сторона затеи состоит в том, что для ее осуществления нужно будет как минимум разметить в XML несколько сотен страниц некоторой книги, а разметкой должны заниматься люди с определенными познаниями в математике владением MathML.

Делюсь мыслями, чтобы спросить: нужен ли такой проект и возможно ли найти единомышленников?

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

В версии Chrome 26 реализовано много новых функций, а также отключены некоторые из старых, в целях безопасности или для доработки. Среди последних нововведений стало, значительное улучшение модуля проверки грамматики Spell Checker, который обновлён для всех языков. Обновление пользовательского словаря Spell Checker теперь синхронизируется между компьютерами вместе с другой информацией, которую синхронизирует браузер Chrome.



Еще информации про обновление доступно под катом.

Похоже на первоапрельскую шутку, но Adobe Type Team выпустила специальный шрифт Adobe Blank OpenType Font, покрывающий всю unicode таблицу пустыми глифами (более 65,000). Шрифт рендерится с использованием non-spacing и non-marking глифов и весит 80kB.



Основой для разработки шрифта послужили две задачи:

Просматривая одно из обучающих видео "Школы разработки интерфейсов" Яндекса, наткнулся на ссылку на офигенный труд израильской веб-программистки Тали Гарсиэль (Tali Garsiel) "How browsers work" (Как работают браузеры).

Она в течение нескольких лет отслеживала всю издаваемую информацию о внутреннем устройстве браузеров, изучала исходный код WebKit и Gecko и, в конце концов, собрала все воедино. Вот что пишет сама Тали:

Когда на 90% компьютеров был установлен IE, приходилось мириться с тем, что это загадочный «черный ящик», однако теперь, когда более половины пользователей выбирает браузеры с открытым исходным кодом, пришло время разобраться, что скрывается у них внутри, в миллионах строк программного кода на C++...

Пролистав, я был поражен — отличная работа. Внутреннее устройство браузеров, алгоритмы разбора — все хорошо иллюстрировано, доступно и понятно. И без излишних подробностей, страниц на 30-40. Как раз то, что нужно. Решил — это надо обязательно перевести. Покопался еще немного — оказалось перевод уже как 1,5 года есть!

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

Под катом содержание перевода, чтобы решить стоит ли читать.

За время своей работы верстальщиком, мне довелось иметь дело с кучей разных макетов как от новичков дизайна (или порой просто левых людей), так и до профессионалов. И за это время я успел набрать приличную выборку наиболее типичных багов в макетах, которых не в состоянии избежать даже маститые специалисты. Сразу оговорюсь — в некоторых организациях есть внутренние «требования к дизайн-макетам», и по идее, при несоответствии дизайна этим требованиям, он должен без вопросов отправляться на доработку, но реалии таковы, что зачастую проще самому внести нужные правки, чем гонять документ туда-сюда по трекеру. Но даже в этих «требованиях» упомянуты далеко не все очевидно возможные «косяки». Постараюсь привести наиболее популярные и универсальные (без личностной привязки). Да, кстати, все баги привожу под использование фотошопных psd — ну уж де-факто это стандарт в веб-макетах. Да и не попадались мне ещё макеты в векторе (и надо сказать, слава богу).

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

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

Волею судеб, запуская очередной проект, я столкнулся с достаточно интересным фактом.

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

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

Правило №1 в DIY: никогда не довольствуйтесь тем, что вам дано. Вы можете проапгрейдить или улучшить все что угодно обладая скромными познаниями и приложив немного усилий, особенно если вы немного знакомы с электроникой. Под катом 10 домашних предметов, которые вы можете круто прокачать, используя капельку припоя и ряд DIY ноу-хау.

Не смотря на развитие, внедрение новых стандартов и плюшек в браузерах, у нет единых стандартов, как отображать элемент /> по умолчанию. Более того, у этого элемента нет атрибутов, позволяющих его в какой-то мере стилизовать.
Из-за необходимости привести это поле формы к единому виду во всех браузерах и «вписать» в разработанный дизайн, после поисков и анализа материалов в интернете был разработан метод замены вида поля формы на html+css, и js для расширения функциональности.

Как по умолчанию выглядит это поле?

Техника – это способ справиться с заданием, и у нас, разработчиков и дизайнеров фронтэнда, этих способов бывает достаточно много. При это, будучи погруженными в рутинную работу, мы порой не всегда замечаем как стремительно меняется окружающая нас сфера. В период с 2002 по 2010 годы сообщество фронтэнд-разработчиков буквально покрывалось язвами избыточного кода и ресурсов, от которых страдали и работа сайтов, и удобство их использования. Чтобы с этим справиться, мы придумали уйму хаков, трюков и уловок под кодовым названием «техника». Мы по-прежнему продолжаем выполнять поставленные перед нами задания, просто используем не самые эффективные способы.



Оборачиваясь назад, отметим, что в последние несколько лет установились новые, лучшие, стандарты и способы их применения, позволяя нам создавать более продвинутые «техники». Этот новый мир, открытый перед нами, называется «modern web». Web 2.0, которым восхищались в свое время, сегодня для нас стал запутанным и застойным. С одной стороны нет сомнений в том, что подобная судьба постигнет и то, что мы называем «modern web». С другой — пока что мы можем использовать этот термин и злоупотреблять им сколько угодно, пока понимаем, что он означает.



В 2010 появился стандарт HTML5, обеспечивающий совершенно новую, полустандартизованную веб-среду. Такие браузеры, как Opera, Firefox, Chrome и Safari приняли нововведения, и их разработчики вышли за пределы реализации стандартов и изучения интерфейса программирования приложений. Чтобы представить себе, насколько автономны эти браузеры, можно ознакомиться с отличной наглядной демонстрацией поддержки HTML5 на www.html5readiness.com.

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

Получилось?

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

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

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

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

Под катом можно узнать, как в ближайшее время будет работать скролл в 2ГИС Онлайн.

Polygonal Арт, наряду с стилем Metro начал будоражить умы дизайнеров в прошлом году. В то время как стиль Windows 8 сразу же оказался в веб-дизайне, Poly тщательно поселился в полиграфической отрасли, представляющих как различные иллюстрации, которые были использованы для плакатов, обои, дизайн для футболок, так и скины для мобильных телефонов и т.д. И только через некоторое время дизайнеры стали использовать его в дизайне сайтов.

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

Разумно будет предположить, что «полигональный» стиль, пришел к нам из кубизма

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

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

Это мой первый пост на Хабре, поэтому не судите строго. Я достаточно много занимаюсь не только разработкой, но и постановкой процессов, в том числе тестирования. И всегда несколько скептически относился к ручному тестированию, точнее к той его части, которая отвечает за «обеспечение работоспособности существующей фунциональности» (в простонародье регрессионное тестирование). Что же плохого в этом тестировании и почему многие компании его тогда используют? Кто интересуется ответом на эти вопросы, могут потратить еще пару минут на дальнейшее чтение.

Доброго времени суток! Сразу объяснюсь по поводу оформления поста: однажды, наткнувшись на статью о CSS-генераторах, меня не сильно порадовало безмерное количество информации и навигационных элементов в представленных генераторах, и еще больше — их пользовательский интерфейс! Возмутило то, что инструменты для работы со стилями — сами не выдержаны в рамках возможностей, которые они представляют… как так?!

Когда занимаешься творчеством, хочется иметь подручные средства и инструменты на освоение и работу с которыми тратишь минимум усилий и времени. В результате всего этого, пришла мысль: отобрать лучшие инструменты и организовать их для частого использования (а-ля навигационное меню, такой себе: Quick Launch).

Надеюсь, для многих ноу-хау станет хорошим помощником в процессе веб-разработки.

Сегодня команда Twitter представила общественности собственный фреймворк. Flight — это легкий компонентный javascript фреймворк, каждый компонент которого описывает поведение элементов на странице. На самом деле, вы скорее всего уже видели Flight в действии, потому что Twitter использует его для своих приложений. Вы можете посмотреть демонстрацию возможностей фреймворка в виде простейшего почтового клиента (код на github).

Новый фреймворк использует ES5-Shim для поддержки ES5 в старых браузерах и jQuery для манипуляции DOM. Также потребуется одна из реализаций AMD, например require.js или loadrunner.