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

Наткнулся на очень простой в реализации, но интересный rollover-эффект для кнопок на CSS. Автор — некий японец ksk1015.



Демонстрация эффекта и процесс написания.

Обычные тени легко реализовать с помощью box-shadow или text-shadow. Но как быть, если необходимо сделать внутренние тени? В этой статье описывается, как сделать такие тени с помощью всего нескольких строчек кода.

После некоторого, опыта решил написать небольшую статью-шпаргалку о загрузке файлов с использованием возможностей HTML5, а именно File API.

Читайте далее:

1. Поддержка браузерами.
2. Загрузка через Form Data.
3. Загрузка через File Reader.

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



Еще газетами и журналами на практике доказано, что разбитый на несколько колонок текст воспринимается намного проще. На веб-страницах до недавнего времени отобразить контент таким образом было проблемой, доходило до того, что верстальщик разделял текст на несколько div'ов. Но все может стать намного проще с CSS3 Multi Column Module.

Добрый час, Хабр.
Наткнулся на интересную статью (на английском языке) с подборкой плагинов jQuery для работы с типографикой.
Кому интересно познакомиться с ними, добро пожаловать под кат, перевожу статью для Вас.

Затравка

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

— Прототипное наследование — это прекрасно
JavaScript — это объектно-ориентированный (ОО) язык, уходящий корнями в язык Self, несмотря на то, что внешне он выглядит как Java. Это обстоятельство делает язык действительно мощным благодаря некоторым приятным особенностям.

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

К счастью, в ECMAScript 5 появилось множество вещей, которые позволили поставить язык на правильный путь (некоторые из них раскрыты в этой статье). Также будет рассказано о недостатках дизайна JavaScript и будет произведено небольшое сравнение с классической моделью прототипного ОО (включая его достоинства и недостатки).

Под катом тезисы, хочется знать, что из этого вызовет интерес, а что сократить

Хотя CSS3 ещё не является стандартом W3C, последние версии браузеров имеют его частичную поддержку. Можно встретить примеры реализующие те или иные свойства CSS3. Но вместе с восторгом многих не покидает также чувство опасения. Связано это в первую очередь с тем, что нет чёткого понимания в поведении браузера при обработке этих свойств. Под катом собрана таблица в которой сравниваются поддерживаемые CSS3 свойства во всех основных браузерах. Кроме этого указывается версия браузера и префикс для кодирования. Шпаргалка в форме изображения, поэтому её удобно скачать к себе на компьютер или мобильное устройство для дальнейшего использования.

Илья Григорик из компании Google собрал подборку малоизвестных функций Chrome DevTools, которые можно использовать для оптимизации производительности. Илья также упоминает несколько сторонних плагинов и библиотек, полезных для разработчика, и многочисленные другие хитрости: например, возможность дебаггинга iOS-приложений или кода, исполняемого на подключённом Android-устройстве.

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

Раньше создавать такие карты было удобно в Adobe ImageReady, но начиная с версии CS3 эта программа больше не поставляется с Фотошопом. На сегодняшний день подобный функционал есть в Adobe Fireworks, но устанавливать эту программу только из-за редактора карт (для работы мне нужен только Фотошоп) — не очень хорошая идея. Существуют и онлайн-редакторы, которые написаны, в основном, с использованием canvas. В них отсутствует возможность редактировать созданные области на карте. Если ошиблись — придется все переделывать. Да и создавать эти области не слишком удобно. Еще одно неудобство заключается в том, что картинку приходится загружать на сервер. В общем, надо писать что-то свое.

Итак, задача:
— написать на javascript редактор, который позволит создавать карты изображений — загружаем картинку, рисуем области, получаем html-код. Если ошиблись — должна быть возможность отредактировать карту. Редактор должен работать в оффлайн-режиме. Обеспечить поддержку только современных браузеров, в том числе Internet Explorer 9.

Доброго времени суток!

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

Что такое SugarJS?

SugarJS — это open source (лицензия — MIT) библиотека Javascript, который расширяет нативные объекты полезными методами. Она разработана, чтобы быть интуитивным, ненавязчивым инструментом, повышающим выразительность кода, который позволял бы делать больше с меньшим количеством кода и меньше задумываясь над рутиной.

На самом деле у них очень информативный и простой сайт — где все уже хорошо написано.
Я просто постараюсь обозначить основные моменты.

Кратко...

• Расширяет нативные элементы Javascript полезными, интуитивными методами.
• Прост для понимания и в использовании.
• Метод SugarJS не используется при наличии метода в родной реализации браузера.
• Имеет систему тестирования, имеющую огромный набор тестов.
• Расширяет возможности работы с датой и временем, обеспечивает их форматирование на нескольких языках (русский есть).
• Отлично ладит с другими фреймворками и сторонним кодом.
• Модульность, вы можете включать только нужные пакеты.
• Полностью совместимый ECMAScript.
• Заявлена поддержка всех основных браузеров, включая мобильные.
• Поддерживает Node.js.
• Имеет хорошую и удобную документацию.

Заинтересовало? Добро пожаловать под кат.

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



Демо Скачать исходники

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

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

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

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

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

Это всё хорошо и правильно, но только для небольших проектов.

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

Представляю вашему вниманию заключительную статью из трилогии «Восстановление расфокусированных и смазанных изображений». Первые две вызвали заметный интерес — область, действительно, интересная. В этой части я рассмотрю семейство методов, которые дают лучшее качество, по сравнении со стандартным Винеровским фильтром — это методы, основанные на Total Variaton prior.
Также по традиции я выложил новую версию SmartDeblur (вместе с исходниками в open-source) в которой реализовал этот метод. Итоговое качество получилось на уровне коммерческих аналогов типа Topaz InFocus. Вот пример обработки реального изображения с очень большим размытием:

Хочу поделиться набором ссылок на нексолько полезных, интересных и, возможно, не самых известных материалов по JavaScript. Из них вы узнаете немного больше об истории появления языка, о его настоящем, тонкостях реализации в различных браузерах, и о будущем развития стандарта ECMAScript. О различных способах наследования в том числе об эмуляции «классического» ООП, множественном наследовании и миксинах. О функциональном стиле программирования в JavaScript: чистые функции, map, reduce, частичное применение и композиции функций. И, наконец, что если бы Хемингуэй писал на JavaScript?

Напомню, что в апреле нынешнего (2012) года Gasoid нам сообщал, что компания Neurowear начала изготавливать и продавать нэкомими (кошачьи ушки), реагирующие на мозговую активность: настороженно подымающиеся при сосредоточении, обвисающие при расслаблении.



Но время не стоит на месте, и вот совсем недавно (20 сентября) от Neurowear на YouTube поступил новый рекламный видеоролик, на сей раз — с виляющим искусственным хвостом («Shippo»):



Судя по видео, хвост распознаёт больше вариантов эмоций, чем ушки; кроме того, теперь он наделён геоинформационными возможностями: привязывает эмоции к местности (например, можно найти какое-нибудь место, которое многие считают пригодным для отдыха), показывает их другим пользователям (в том числе через Twitter или Facebook).