Сообщения

Лучшее из 2013

Курсы " Programming Languages " by Dan Grossman on www.coursera.org Конференция OdessaJS Доклад Андрей Бакута о http://knockoutjs.com/ "Knockoutjs in Action" ( слайды ) Книга Харуки Мураками "Охота на овец" Книга, прочитанная вслух Бернард Вербер «Танатонавты» Музыка Seo Fernandez Танцевальный исполнитель Alessia Cornacchia Танцевальная группа JabbaWockeeZ Искусство: впечатление И.К.Айвазовский в Феодосийском музее Искусство: разочарование Импрессионисты в Эрмитаже Блюдо Свежесобранные, выдержанные на мучной диете и приготовленные собственноручно улитки Творчество Связанный шарф и пара футболок Activity Сноубординг в Буковели Город Санкт-Петербург Курорт Буковель Достижение Гидроспираль iPhone приложение Bamboo Paper И немного того, что удалось попробовать, но не распробовать до конца: оригамские сказки, зентанглы, японская каллиграфия, суми-э и спонтанные искусства: энкаустика и спинарт, а также гончарное дело =)

Colors

Изображение
Информации о цвете невероятно много, поэтому я не буду повторяться, а лучше расскажу где и что можно почитать/посмотреть/поюзать. Итак, начнем с самого начала: теория цвета (eng). Вдохновились? Хочется поиграться с цветами и создать что-то неповторимо свое? Пожалуйста! Сервис для поиска подходящих цветов , укладывающиеся в выбранные схемы, и аналог от Эдоба kuler.adobe.com/create/color-wheel , и еще альтернатива paletton.com . Или воспользуйтесь готовыми палитрами: pltts.me . Хотите еще больше задротства контроля над цветом? Colors for data scientists - ищите новые цвета и цветовые схемы. Не нужны такие подробности? Если вы далеки от всего этого, но у вас есть картинка, можно "выделить" из нее 5 основных цветов с помощью одного отличного сервиса . Или же 10 цветов из другого . Для заболевших тематикой цветов есть даже свое сообщество: COLOURlovers , где вы можете делиться палитрами, обсуждать, исследовать новые цветовые схемы. Надоели RGB и CMYK? Есть приятная д...

Почему я люблю Twitter Bootstrap

Или хороший инструмент для ленивого дизайнера Есть много причин почему стоит использовать твиттер бутстрап, основная из которых - это возможность быстро и без дизайнера создать информационный сайт, который выглядит достаточно прилично. Вы можете сэкономить на дизайнере, но стоит ли использовать его если у вас уже есть дизайнер? Ответ: ДА. И в первую очередь (!) его должен использовать дизайнер. Потому как он, как правило, ленив и непредсказуем. Сегодня одна кнопень у него выглядит так, а завтра совсем по-другому. Основные преимущества использования дизайнером бутстрапа: 1. Responsive web-design Ваш дизайнер рисует только статические странички фиксированной ширины? Твиттер бутстрап позволит использовать его дизайн в большинстве случаев в качестве основы для растягиваемого сайта. Придется продумать расширяемость элементов, дописать стили для разных разрешений экранов, но основа уже будет, а это уже значительно облегчит разработку. 2. Предустановленные элементы Наличиие предус...

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) Старый, д...