Доброго времени суток, уважаемые хабравчане. Не так уж давно, для того чтобы сделать что-то «округленное» с нефиксированной высотой приходилось создавать таблицу и крайним ячейкам в бэкграунд задавать нарезанные углы. Вообще любое «непрямоугольное» могло быть только графическим изображением. Сейчас же современные стандарты CSS позволяют создавать весьма интересные вещи. Но все нетипичные фигуры в большинстве своем дозволено сделать благодаря псевдо-селекторам :before и :after. Даже существуют некоторые «паттерны» для этого. А в недалеком будущем появится возможность задавать любые формы для элементов. С приходом CSS Masking я бы сказал наступит веб-дизайнерская сингулярность — веб-дизайн сможет быть любым. Единственное ограничение — это предел фантазии дизайнера. Но не будем о будущем. Все же я предлагаю вдохновиться прекрасным настоящим. В этом посте я собрал несколько крутых CSS реализаций. В некоторых из них спрятаны полезные техники, а в других любовь к CSS творчеству авторов этих подделок.

Не для таких же как и я каскадных зануд хочу добавить, что CSS изобретения могут быть и коммерчески выгодными. Только присутствие в CSSAWARDS, СSSWINNER, CSSREEL или CSSDESIGNAWARDS будет неплохой рекламой.

Таймер на чистом CSS

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

Riot.js — The 1kb client-side MVP framework

Немного статистической правды:



«Материнский» проект Moot тоже очень крутой и демонстрирует то, каким должен быть форум.

Доброго времени суток и с прошедшим Днем народного единства! Хочу рассказать об одном хорошем проекте — .


OAuth.io — это API (JavaScript, PhoneGap, iOS, Android, Flex) и сервис, который значительно упрощает взаимодействие более чем с 80-ю oAuth провайдерами (Facebook, Twitter, VK, GitHub, Dropbox, и др). Сервис работает по модели freemium: до 5000 соединений в месяц сервис бесплатный, при большем количестве вас ждут вполне демократичные цены. Стоит также сказать, что проект полностью открытый и вы сможете сами запустить у себя серверную часть «OAuth IO Daemon» (GitHub).

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

Browserhacks

Название говорит самое за себя. Данный ресурс — хранилище всевозможных хаков к существующим браузерам. Увидев этот сайт, сам Paul Irish мудро произнес: "Holy shit amazing".

5 замечательных изобретений от David DeSandro (Twitter, H5BP)

Masonry — в переводе «каменная кладка» — идеальное решение для создания Grid Layout. Качественная «замена» для неутвержденной Flexbox спецификации. Простой синтаксис дает возможность без труда создавать Pinterest/Surfingbird подобные макеты. Существует на нативном JavaSciprt и как jQuery плагин.

Isotope — «изысканный jQuery плагин для магических лэйаутов. Позволяет с легкостью фильтровать, сортировать и придавать динамичность макету».

imagesLoaded.js — определяет когда изображения были загружены. Включает в себя 4 события: always, done, fail, progress. Простой в использовании.

Draggabilly — аналог jQuery UI Draggable на нативном JavaScript в лучших традициях автора кода. Работает с touch интерфейсом.
Close Pixelate — «пикселизация» изображений в Canvas аля потаённые места в некоторых работах жанра НЮ.

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

Zephir — Ze(nd Engine) Ph(p) I(nt)r(mediate). Зефир — это компилируемый высокоуровневый язык программирования, предназначенный для написания PHP расширений без использования C. Проект от создателей Phalcon (скомпилированный PHP MVC Framework). О Zephir на Sitepoint
   

JSDB.IO — большая и качественная база нужных скриптов/библиотек/фреймворков на JavaScript. Все распределено по категориям: Animation, Application, Audio, Video, Games и др. Дабы собрать все популярные .js воедино добавлю еще три ссылки: Microjs (множество маленьких полезностей до 5кб), а еще jsdelivr и cdnjs, которые позволяют добавлять собственные скрипты.

Snap.svg — продукт от Adobe Webplatform. Недавно я рассказывал про "достойного конкурента Raphaël" и в комментариях оспоривали эту фразу из за отсутствия поддержки такого же множества браузеров. В разработке Snap участвует автор Raphaël — Дмитрий Барановский, а причина создания новой библиотеки для работы с SVG — невозможность поддерживать все возможности SVG в старых браузерах.

At.js — очень юзабельный скрипт для автозаполнения (в демо используется Emojify). А еще есть более функциональная библиотека для автозаполнения — Typehead от Twitter.

$('.atwho-inputor').atwho({
  at: "@", data: ["one", "two", "three"],
});

Доброго времени суток, хабравчане. Хочу поделиться с вами ответом Дэна Сэйфера c Quora на вопрос об основных принципах натурального пользовательского интерфейса и очень полезным сайтом Design Principles FTW.

Основные принципы NUI дизайна

1. Дизайн для пальцев, не для курсора
Сенсорные элементы должны быть больше десктопных: 10-14 мм для пальцев, 8-10 для курсора.

2. Помните о физиологии и кинезиологии
Не заставляйте пользователей масштабировать и совершать повторные действия.

3. Никаких рук гориллы
Люди не должны выполнять множество задач с вытянутыми руками в течении длительного времени (калибровка, QR ридеры, сканеры и др). Извиняюсь за столь узкий момент.

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

5. Знайте технологии
Понимание возможностей сенсора или камеры позволяет определить какие жесты вы можете спроектировать.

Доброго времени суток хабравчане. В одном из своих дайджестов я уже упоминал Ghost:

Насколько я знаю, это первая CMS, которая будет разработана силами краудфандинга. Автор проекта John O'Nolan собрал уже $400 000 на Kickstarter, что составляет 785% требуемой суммы. Ghost — это открытый проект, замечательный дизайн и очень удобный адаптивный интерфейс.

Разработчики несколько часов назад опубликовали репозиторий на GitHub…

Рекомендую многоуважаемой аудитория Хабра посмотреть на проект даже только потому, что о нем написали в Forbes, Wired, TechCrunch, Mashable, SmashingMagazine, Envato и множество других популярных западных СМИ. А также 2000 старов за 10 часов.

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

Stackedit

Шедевр среди Open Source редакторов! Основан на библиотеке разметки (Markdown) PageDown, которая используется в StackOverflow и других проектах StackExchange. Stackedit синхронизируется с Dropbox и Google Drive, а также сохраняет все документы в local storage, благодаря чему редактирование возможно и в онлайне и в оффлайне. Возможность импорта/экспорта/конвертация Markdown и HTML. Публикация в WordPress, Tubmlr, Blogger, Github, Gist и на любой SHH сервер. Статистика, работа в режиме realtime, поддержка различных синтаксисов (Prettify/Highlight.js), LaTeX, темы… Это просто великолепный продукт.


App.io позволяет запускать iOS приложения в браузере. Это уже тема мобильной разработки, но недавно я читал статью про Sprinty Driver и обратил внимание на то, что BeetlePlay разрабатывают демо-версии на Flash. Решил поделиться. Также советую фреймворк для создания анимаций в UIKit от IFTTT.

Open Source решение для полноценной поисковой индексации ваших JavaScript приложений (Backbone, Angular, Ember, ChaplinJS, Marionette). Работает это следующим образом:

1. Мидлвар на Ruby on Rails или Node.js проверяет user agent при каждом запросе к приложению
2. Если обнаружен краулер поисковой машины то отправляется GET запрос к Prerender
3. Prerender вызывает ваше приложение для той страницы, которую запрашивает краулер
4. Страница рендерится с помощью PhantomJS
5. Полученный HTML посылается обратно
6. Мидлвар возвращает HTML краулеру

Доброго времени суток уважаемые хабравчане. Недавно я увидел интересную презентацию «Death To Bullshit» от Брэда Фроста c его выступления на Creative Mornings. В презентации есть некоторая статистика, где приведенные числа рассматриваются не как впечатляющие цифры современных трендов/тенденций, а как угнетающее количество мусора в интернете и в жизни, которое большинство людей так привыкло распространять и создавать. Я убежден, что будущие технологии должны объединять умы людей путем лаконичного поиска «идеально-релевантной» информации и создания «идеально-сформированных» комьюнити. С этими мыслями мне захотелось сделать свою первую инфографику. Результат получился благодаря замечательному infogr.am, о котором я рассказывал в одном из своих дайджестов. Внутри еще две занимательных видео-инфографики.


Ссылку на работу в самом инфограме не поставил по причине того, что лично у меня видео-инфографика отображается некорректно.

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

Pace.js — это самый простой способ (документация здесь) добавить к вашему проекту прогресс бар. Для Pace существует несколько тем, которые описываются только на CSS. От Hubspot есть еще два универсальных проекта на GitHub: Vex и Messenger — «Dialogs for the 21st century» и «Alerts for the 21st century» соответственно. Рекомендую.

Flat UI Free 2.1
Популярный информационный ресурс Designmodo опубликовал на GitHub обширный набор элементов интерфейса в стилей трендового плоского дизайна. Об этом еще в марте писал хабраюзер ilya42. А на этой недели проект обновился до версии 2.1. Теперь в Flat UI есть поддержка Bootstrap 3, появился ряд новых элементов, иконок, обновилились шрифты. Количество старов уже больше 5000.

Framer
Потрясающее изобретение разработчика Koen Bok. Framer — это бесплатный инструмент для прототипирования интерактивных и анимационных интерфейсов. Приложение синхронизируется с Photoshop, нарезает слои макета на .png (конечно же для верстки придется немного порезать руками, но все зависит от педантичности дизайнера к макету) и все верстает на z-index и trasnform matrix3d. А интерактив и анимацию дизайнеры добавят с помощью этого простого синтаксиса прямо в браузере (к сожалению только Chrome). PSD.Logo, PSD.OverviewButton — это имена PNG файлов. Говоря о разработчике Framer, хочется также упомянуть про его проект Cactus — генератор статистических сайтов на Python использующий Django template.

Доброго времени суток, уважаемые хабражители. Хочу поделиться с вами одной замечательной находкой на GitHub — SVG.js — удобная манипуляция и анимация SVG. Хочется сказать о трех вещах, которые сосредоточили мое внимание на этой библиотеке. Самое простое и важное это то, что с появлением retina дисплеев SVG становится популярнее, более нужным, чем раньше. SVG.min.js весит 34кб и 9кб в Gzip, что в разы меньше Raphaël и что можно пожертвовать для дизайна и эффектов. Минифицированный SVG.filter.js размером в 3кб является прекрасным кроссбраузерным аналогом для свойства webkit-filter.

Здравствуйте хабравчане. Во вторник, 17 сентября состоялся официальный релиз Grand Theft Auto V, одной из самых долгожданных игр этого года. За первые 24 часа продажи превысили все ожидания аналитиков и составили $800 млн. По некоторым оценкам затраты на производство проекта составили $265 млн. Для сравнения продажи Call of Duty: Black Ops 2 за тот же период составили $500 млн.

В одной только Северной Америке в полночь было открыто более 8300 магазинов. Преданность и энтузиазм фанатов данной игры издательство The New York Time назвало самым захватывающим спектаклем в интерактивных развлечениях. Штраус Зельник CEO компании Take Two (которой полностью принадлежит Rockstar Games) сообщает в пресс-релизе: «Мы невероятно гордимся творческим успехом Rockstar Games и не могли быть более довольны успехом этого запуска.”

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

Cloudconvert

Великолепный онлайн конвертер файлов, который поддерживает в общей сложности 140 форматов следующих типов: archive, audio, cad, document, ebook, image, presentation, spreadsheet, video. Синхронизируется с Dropbox и Google Drive, благодаря чему возможно использование на всех смартфонах. А самое приятное это то, что для данного сервиса существует функциональное и простое API.

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


Пример работает на LESS 1.5.0, поэтому нет возможности разместить его на codepen или jsfiddle.

 .shade(@type, @color, @depth, @angle, @long, @fade);

• type: значения box/text — box-shadow/text-shadow
• color: цвет тени
• depth:длина тени
• angle: угол наклона
• long: boolean, по умолчанию true — длинные Flat тени
• fade: boolean, по умолчания false — затухание

Доброго времени суток уважаемые хабражители. На сегодняшний день с помощью CSS можно создать множество различных элементов. Это безусловно очень радует, вспоминая веб несколько лет назад. Но порой так «устаешь» от всех этих изощрений с :before и :after… Недавно я нашел две интересных спецификации CSS Masking Level 1 и CSS Shapes Level 2, благодаря которым в недалеком будущем перед нами откроются совершенно новые возможности оформления контента и разработки форм элементов.

CSS Masking

Совместимость

Все современные браузеры поддерживают свойства mask и clip-path, как определено в SVG 1.1 для элементов SVG. Но только Firefox позволяет применять эти свойства к HTML элементам, причем без префиксов. Но говоря конкретно про спецификацию CSS Masking, то свойства mask, clip-path, mask-box-image поддерживаются только на последних Webkit/Blink с префиксом webkit.

clip-path

Свойство clip-path создает область отсечения для любого из HTML элементов или графических элементов, в том числе элементам-контейнерам SVG — clipPath. Образовавшиеся элементы возможно анимировать. Одно впечатляющее демо (к сожалению работает только на последних Chrome).

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

Webflow

С помощью данного сервиса вы сможете сверстать кроссбраузерный отзывчивый макет за 55 минут. Очень красивый и удобный интерфейс. Идеальное решение для веб-дизайнеров, 26 000 из которых уже используют Webflow. Для создания двух проектов сервис бесплатный, а в дальнейшей перспективе вас ждут вполне демократичные цены. Инструмент реально «крутой».

Если Вам GUI для верстки не комильфо сам по себе как для меня, все равно рекомендую зарегистрироваться и экспортировать парочку responsive макетов. А еще есть простой генератор отзывчивого лэйаута и Responsive Patterns.

Parallax.js

Функциональный и простой инструмент для создания параллакс эффекта.

Доброго времени суток уважаемые хабравчане. Я думаю, не одному мне интересно знать сколько сайтов принадлежит хабраобществу, (пусть даже с большой погрешностью), ориентируясь на среднее арифметическое и количество подписчиков хаба «Веб-разработка». Сравнить эти данные с Рунетом в целом. Еще хочется побольше узнать про SMM. С вашего позволения расспрошу Вас про ваши интернет проекты и их интеграцию с соц. сетями: сколько их; какая ежемесячная аудитория; есть ли соответствующие паблики в соц. сетях; считаете ли Вы их эффективным инструментов продвижения.

Доброго времени суток уважаемые хабражители. Буквально только что увидел потрясающий проект на GitHub от FredrikNoren.

Ungit:

• Чистый и интуитивно понятный интерфейс для Git (что есть невероятно круто для освоения Git)
• Работает на любой платформе с установленными Node.js и самим Git
• Веб-ориентированный. Возможность запускать его в облаке.
• GitHub

Необходим Node.js версии 0.10 или выше и npm версии 1.3.1 или выше

Установка

npm install -g ungit

Я думаю, что после просмотра видео, моего более тщательного описания не потребуется. Спасибо всем за внимание.

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

Prepros

Великолепное приложение препроцессор для CSS, JS. Компилирует файлы следующих типов: LESS, Sass, SCSS, Stylus, Jade, Slim, Coffeescript, LiveScript, Haml. Минифицирует JS на лету, при каждом изменении файла. Оптимизирует изображения. Доступен для Windows и Mac, а также как расширение для Chrome. Плюс ко всему создает HTTP сервер, для тестирования сайта на разный устройствах. Бесплатная замена CodeKit'у и Ghostlab'у вместе взятых, что в сумме позволит Вам сэкономить $75.