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

Представляю скромную подборку сервисов, которые ускоряют экономят время разработчику и/или ресурсы сервера. Здесь не будет подробных обзоров, только список с кратким описанием и ссылками. Также, я не претендую на свежесть ресурсов, поэтому кому-то перечисленный список покажется слишком очевидным и известным всем.

Буду рад включить ссылки и описания, предложенные в комментариях.

Google Fusion Tables

Позволяет развернуть реляционную базу данных на серверах гугла с обращениями с помощью библиотеки Visualization или JSONP.
Статья на хабре: habrahabr.ru/blogs/webdev/116035
Ссылка: www.google.com/fusiontables/Home

Минусы: количество обращений в секунду равно пяти с одно IP адреса и столько же при обращении с аккаунта (используя авторизацию). То есть развернуть сайт с хорошей посещаемостью и работать с сервисом с помощью сервера не получится. Стоимость увеличения лимита — от 10 тысяч долларов в год (см. Maps API Premier). Кроме того, отсутствуют джойны, которые заменяются представлениями (view), создаваемыми через интерфейс.

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

Fullscreen Gallery with Thumbnail Flip

Привет всем. Сегодняшний пост будет коротким, но, думается мне, полезным.
Часто приходится слышать о том, как сделать «затухание» текста к низу, верху и т.д.
Есть варианты на js, есть варианты с картинкой и просто css-градиентом наложенными поверх текста.
Сегодня в голову пришел несколько другой подход к решению этой проблемы.
Его реализация проста как три копейки

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

Выглядело это примерно так:



html

<div class="large_button"><br>  <span class="buttons submit_v2-button clickable"><br>    <i class="left left2"></i><br>    <i class="body"><br>      <b>В архив</b><br>      <i class="end"><br>        <i></i><br>      </i><br>    </i><br>  </span><br></div>

Видно, что запутаться в таком коде проще простого, тем паче, что вариантов кнопок на проекте накопилось не менее 30. Попытка создать такую кнопку на серверной стороне вызывала негодование у коллег «пехапистов».

Поэтому моей негласной задачей стало максимальное упрощение кода.

С каждым днем новые стандарты css3 и html5 всё более глубоко входят в жизнь верстальщиков и web-разработчиков, а браузеры с каждым днем становятся все более совместимыми с этими стандартами.



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

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

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

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

Не встретив на просторах Интернета чего-либо подобного, я взял на себя ответственность назвать этот метод SITH (Soft Image Transition on :Hover) — плавный переход изображения при наведении.



Под хабракатом Вы найдёте полное описание техники, весь код, несколько скриншотов и ссылку на демонстрационную версию.

В моей текущей задаче нужно было расположить текст по ширине с выравниванием последней строки по центру. Решением могло быть CSS свойство text-align-last, но оно поддерживается только в Internet Explorer'е. Поиск подобных плагинов JQuery не дал результатов, поэтому был написан свой.

Готовый плагин я выложил сюда

Пример использования

$(selector).lastLine({
   'display':'block',
   'text-align':'center'
});

Как видно из примера, в качестве параметра передаётся CSS для последней строки.

Хотите слушать свою музыку за завтраком, а не только то, что ловит ваш приемник? Устроить это довольно легко. Logitech Squeezebox Radio — отличная замена кухонному радио, которая способна самостоятельно воспроизводить любые интернет-радиостанции, а также ваш собственный плейлист при наличии медиасервера. Несмотря на то, что устройство уже год как в продаже за рубежом, в России оно до сих пор не представлено. Тем не менее, мы всё-таки решили рассказать о нём аудитории Хабра, ведь заказать любой товар из зарубежного интернет-магазина сегодня не представляет никакой сложности.

К написанию сей заметки меня сподвигло то, что я устал делать развёрнутые замечания на эту тему в комментариях к статьям, где в качестве части инструкции по сборке и настройке чего-либо для конкретного дистра предлагают выполнить make install.

Суть сводится к тому, что эту команду в виде «make install» или «sudo make install» использовать в современных дистрибутивах нельзя.

Но ведь авторы программ в руководствах по установке пишут, что нужно использовать эту команду, возможно, скажете вы. Да, пишут. Но это лишь означает, что они не знают, какой у вас дистрибутив, и дистрибутив ли это вообще, может, вы вступили в секту и обкурилисьчитались LFS и теперь решили под свою хтоническую систему скомпилять их творение. А make install является универсальным, хоть и зачастую неправильным способом это сделать.

На рассмотрение в IETF поданы спецификации новых кодов состояния HTTP, которые более точно описывают некоторые типичные ситуации.

428 Precondition Required
429 Too Many Requests
431 Request Header Fields Too Large 
511 Network Authentication Required

Неспособность рассуждать о коде

«Рассуждать о коде» значит понимать порядок исполнения инструкций («исполнять программу в голове»), зная, каково предназначение кода.

Симптомы

• Наличие «волшебного», «вуду» кода или кода, который не имеет никакого отношения к целям программы, но всё равно тщательно поддерживается (например, инициализация переменных, которые никогда не используются, вызов функций, не имеющих отношения к цели, создание выходных данных, которые не используются, и т.д.).
• Многократные вызовы идемпотентных функций (например, вызов save() по нескольку раз, «чтобы уж точно»).
• Исправление ошибок написанием избыточного кода, который замещает данные, полученные при исполнении неисправного кода.
• «Йо-йо код», который конвертирует значения в различные представления, а потом конвертирует их обратно ровно в то же представление, с которого начинали (например, преобразование десятичного числа в строку, а потом обратно в десятичное число, или padding строчки с последующим trim'ом).
• «Бульдозерный код», который создает впечатление рефакторинга посредством разбития кусков кода на процедуры, которые, правда, затем невозможно использовать где-либо еще (высокая когезия).

Простой мини-скрипт List.js размером 7 КБ добавляет интерактивности маркированным спискам в HTML. С помощью скрипта можно сделать удобный поиск, сортировку, редактирование списка с добавлением или удалением новых элементов (например, адресная книга на странице) и т.д. Чем-то напоминает Chosen, только там модифицировались выпадающие списки.

List.js — обычный JavaScript, который не требует jQuery, работает без проблем во всех браузерах. Пару примеров см. здесь и здесь.

List.js опубликован под открытой лицензией MIT.

Относительно недавно компания Samsung Electronics представила новую флагманскую линейку мониторов 9 серии, внешний вид которых напоминает творения художников-футуристов. Попользовавшись одним из них некоторое время, я понял, что моё представление о возможностях современных мониторов застряло где-то в начале тысячелетия — оказывается, будущее уже настало.



Взглянем?

Сегодня я упоминал ужé о трудностях, с которыми сталкивается всякий, кто желает разыскать на сайте Open Font Library шрифты с поддержкою кириллицы. Фильтра по языкам нет; поиск по слову «cyrillic», как dimitrymd успел убедиться, находит только десяток шрифтов.

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

1. ConsolaMono
   
2. Crimson
   
3. Dataface
   
4. Designosaur
   
5. Didact Gothic
   
6. GNUTypewriter
   
7. Grana Padano
   
8. Jura
   
9. Neocyr
   
10. NotCourierSans
    
11. Old Standard
    
12. Pfennig
    
13. Press Start 2P
    
14. Sansus Webissimo
    
15. Triod Postnaja
    
16. VDS

«На закуску» я намерен также обозреть полдюжины шрифтов с различными спецсимволами да орнаментами:

1. Chess
   
2. FivefoldOrnamentsEtc
   
3. Futhark Adapted
   
4. Knots
   
5. UniCons
   
6. Web Symbols

Недавно у нас были небольшие обучающие курсы для повышения нашей компетенции в сетевой части нашей инфраструктуры. Основную идею этих курсов, покрывающую OSPF/BGP/MPLS я тут повторять не буду ибо:

• Пока ещё явно недостаточно компетентен.
• Есть много более объективные ресурсы рассказывающие об этих темах.

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

Ссылки на вики зачастую более примечательны секциями «External links» и «References» нежели самим содержанием

Одной из самых обсуждаемых тем на Хабре стало объявление Гугла о создании нового языка Dart, претендующего на то, чтобы полностью заменить Javascript.
Для Гугла это не первый проект подобного рода. С 2006 года существует Google Web Toolkit, позволяющий создавать веб-приложения полностью на Java. На нём, например, работают Adwords и Google Wave.
Но, не смотря на красивые обещания и очень серьезные, особенно по меркам 2006 года, возможности, GWT так и «не взлетел». Да, проект поддерживается и развивается, но сообщество разработчиков так и не сложилось. Сторонних компонентов мало, они не поддерживаются, знакомых с системой программистов найти сложно.
Практически все «плюшки» языка Dart, которые сейчас рекламирует Google, уже были реализованы в Webtoolkit-е. В этой статье я хочу проанализировать достоинства и недостатки GWT в попытке рассмотреть мутные очертания будущего Dart.

Привет всем,

Хочу представить вам свой проект — torrtilla.ru. Проект не молодой, и возможно многие из вас уже слышали о нем, ведь он существует уже более полутора лет. За это время его аудитория достигла 15-17 тысяч уникальных пользователей в сутки. Сегодня я хотел бы подвести символическую черту и рассказать о том, чего удалось достичь за первые полтора года, о планах на будущее, поделиться статистикой а также представить новый UI.

История одного проекта.

Делая проекты и работая, сидя за компьютером, по 12-15 часов в сутки (часто и дольше), я начал замечать как мои глаза начали слезиться и краснеть, шейные позвонки просто ныли (небольшой стресс и они просто не давали спокойно жить), кисти рук, поясница и ноги немели. Вечером, поужинав, засыпал, но ночью просыпался и опять работать. Вырос живот, обвисли мышцы, стал раздражителен.
Хотя все мы знаем о пользе гимнастики. Читали, сохраняли много упражнений себе в «Избранное» (у самого куча подобного в избранном и на дисках). Может пару раз, потом забывали или лень, или не хватает времени, глядя в зеркало и обещая себе «В понедельник начинаю новую жизнь!». Это не очередная статья, которая рассказывает о том, чем нам грозит сидячий образ жизни и какую пользу приносит гимнастика – вы наверняка знаете об этом предостаточно.

Позвольте рассказать свою историю, от понимания проблемы, до реализации решения в виде сервиса…