Сообщения

Hack-week-2, random color.

Никогда не знаешь заранее, что может пригодиться. Когда-то давно попался на глаза небольшой скрипт , генерирующий "рандомный" цвет, соответствующий заданной строке: var stringToColour = function(str) {   var hash = 0;     for (var i = 0; i < str.length; i++) {     hash = str.charCodeAt(i) + ((hash << 5) - hash);   }     var colour = '#';     for (var i = 0; i < 3; i++) {     var value = (hash >> (i * 8)) & 0xFF;     colour += ('00' + value.toString(16)).substr(-2);   }     return colour; } $('body').css('background-color', stringToColour("my string")); Казалось бы, просто прикольный код. Но гораздо интереснее когда и как его можно было бы применить. Поскольку цвет задается рандомно, но в то же время он постоянен для определенной строки, его можно было бы использовать для: раскрашивания карты, например, у нас есть карта Европы в виде символьного шрифта...

Верстаем иконки под планшеты/мобильные устройства

Изображение
Сложность верстки под планшеты и мобильные устройства не только в том, чтобы сделать responsive веб-дизайн, что само по себе большой труд и дизайнера, и верстальщика. Суть также в том, что кроме огромного набора размеров экрана мы еще получаем и разное количество пикселей на дюйм, именуемое как device-pixel ratio ( тут можно подробнее почитать на англ. ). Беда в том, что это соотношение не стандартизировано и в итоге у нас получается что-то вроде: -webkit-min-device-pixel-ratio Устройство 1.0 All non-Retina Macs All non-Retina iOS devices Acer Iconia A500 Samsung Galaxy Tab 10.1 Samsung Galaxy S 1.3 Google Nexus 7 1.5 Google Nexus S Samsung Galaxy S II HTC Desire HTC Desire HD HTC Incredible S HTC Velocity HTC Sensation 2.0 iPhone 4 iPhone 4S iPhone 5 iPad (3rd generation) iPad 4 All Macs with Retina displays Google Galaxy Nexus Google Nexus 4 Google Nexus 10 Samsung Galaxy S III Samsung Galaxy Note II Sony Xperia S HTC One X 3.0 HTC Butterfly...

OdessaJS

13 апреля прошла еще одна конференция по js: OdessaJS , на которой мне посчастливилось побывать. В отличие от Киевской эта мне понравилась гораздо больше как организацией, так и темами докладов. Неинтересных или скучных просто не было! А так же пиченьки, кофе, чай, конфеты, магнитики, блокнотики и прочее-прочее... Понравился большой зал, в котором проходила конференция. Людей было не так много и всем хватило места, никто не стоял даже в малом зале (доклады проходили в два потока). А теперь к сути: Эльдар Джафаров "Your project tested." Один из самых впечатливших меня докладов, потому что рассказывал о тестировании приложений на js. Меня удивило обилие инструментов для тестирования, ни один из которых я не использовала, но которые представляют определенный интерес. О каждом стоило бы рассказать отдельно хотя бы в двух словах. Code testing - Jshint - тоже, что и jslint , но еще и позволяет тестировать код и стиль написанного кода. Unit testing - Mocha - фреймв...

Прозрачный однородный фон

Есть несколько способов, которыми можно сделать однородный прозрачный фон на сайте. Рассмотрим на примере: - нужно получить темно-иссиня-серый фон #3b4044 с прозрачностью слоя 0.75. 1. RGBA(59, 64, 68 .75) Это первое, что приходит на ум. Отличный вариант для быстрого задания цвета с прозрачностью. Даже разложение 16-ричного определения цвета на три 10-ричных канала не представляет сложности. Но есть одна проблема: не работает в ie8 =( 2. Opacity(.75) Второе, что приходит на ум. Сделать фон одноцветным и добавить прозрачность. Работает даже в ie5 с помощью дополнительных фильтров: -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)"; /* IE 8 */ filter: alpha(opacity=75); /* IE 5-7 */ Уже лучше, но у этого свойства есть один серьезный недостаток: opacity добавляет прозрачность блоку, а соответственно и всему внутреннему контенту, так что нам это тоже не подойдет. Да еще и сглаживание шрифтов нарушается в ie (( 3. background: url(image) Старый, д...

Git

Недавно прошла замечательный курс: http://gitreal.codeschool.com/ Открыла для себя несколько забавных команд, которыми можно было бы поделиться Начальные установки: git config --global user.name "Admin Adminkovi4" установка имени пользователя git config --global user.email "admin@mailinator.com" установка емэйла пользователя git init инициализация гита Общие команды: git blame index.html --date short просмотр в указанном файле построчно: кто и когда последний менял каждую строчку кода (короткий формат даты) git help config показать хэлп указанной команды, в данном случае config git log показать логи git status показать статус git diff показывается изменения между коммитами git diff --staged показывается staged изменения между коммитами git diff HEAD~5 показывается изменения между последними пятью коммитами и текущим состоянием git diff sha1..sha2 показывается изменения между коммитами от sha1 до sha2 git diff master bird показывае...

Background images in print css

При создании стилей для печатной версии сайта нужно помнить о том, что не всегда у пользователя будет стоять галочка "Print Background Images". Но что если нам нужно распечатать фоновое изображение, которое несет некий важный смысл, не привязываясь к настройкам пользователя? Неплохим решением было бы сделать его картинкой и вывести в псевдоэлементе :before .arrow { background: none; &:before { content: url('arrow.png'); } } Но данный метод плохо работает в firefox и ie, потому как при первой загрузке (печати) данная картинка не успевает загрузится и на ее месте мы ничего не увидим. При повторной попытке печати, все будет ок, но будет ли пользователь второй раз печатать? Решение - заменить фоновую картинку дефолтной картинкой списка: .arrow { background: none; display: list-item; list-style: url("arrow.png"); margin-left: 20px; width: 0; } При этом важно, чтобы данная картинка была уже загружена в d...

CSS3 tooltips

Изображение
Toolips (подсказки) можно организовать несколькими способами: 1. используя атрибут title <a href="#" title="usual tooltip">Link</a> Самый простой способ, но тултипы получаются стандартными и поэтому оооочень скуууучни. К тому же их вид зависит от браузера (( Т.е. почти все браузеры отображают их небольшими желтыми лейбочками внизу, но они совершенно не поддаются стилизации. 2. при помощи js (jQuery Tooltip Plugin) <div id="tooltip"> ... </div> Как правило, эта конструкция добавляется в низ страницы и абсолютно позиционируется применительно к нужному элементу. Тултипы красиви, сочни, вкусни. Но для тех, кто не боится нагружать клиента ещё одним ломтиком яваскрипта. 3. css <a href="#"> Link <span>Tooltip<span> </a> Хорошая альтернатива яваскриптовому решению. Присутствуют все нужные плюшки, разве что не очень семантично, отчего ссылка перегружается излишней информац...