Анастасия Бакута

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

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

Никогда не знаешь заранее, что может пригодиться. Когда-то давно попался на глаза небольшой скрипт , генерирующий "рандомный" цвет, соответствующий заданной строке: 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

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

Недавно прошла замечательный курс: 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 показывае

При создании стилей для печатной версии сайта нужно помнить о том, что не всегда у пользователя будет стоять галочка "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

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> Хорошая альтернатива яваскриптовому решению. Присутствуют все нужные плюшки, разве что не очень семантично, отчего ссылка перегружается излишней информац

Есть много вариантов прижатия футера к низу, большинство из которых заточены под корректную работу в ие6-7. Из-за этого они выглядят немного костыльными: либо добавляется пустой тег, либо указывается фиксированная высота футера. Отказ от поддержки ie7 позволяет использовать гораздо более элегантное решение для прибития футера, которое основано на использовании свойства display: table/table-row . Подсмотрено тут : HTML <div class="wrapper">     <div class="content">         <h2>Content</h2>         <p>Lorem Ipsum is simply dummy text of the printing and            typesetting industry. Lorem Ipsum has been the            industry's standard dummy text ever since the 1500s            when an unknown printer took a galley of type and            scrambled it to make a type specimen book. It has            survived not only five centuries, but also the leap            into electronic typesetting, remaining essentially            u

Что такое вендорные префиксы знают все ! Вкратце: вот они родимые (основные): -o- (Opera Software) -moz- (проект Mozilla) -ms- (Microsoft) -webkit- (Apple) Есть и другие, малоизвестные и не столько популярные, но нам для рассмотрения с головой хватит и этих. Думаю, никто не обидится, если я назову их "костылями"? Итак: Стоит ли использовать префиксы? Конечно же стоит! Вернее даже не так, правильней задать вопрос: можем ли мы НЕ использовать префиксы? Пожалуй, что нет. А отсюда вытекает другой вопрос: была ли это хорошая идея разработчиков браузерных движков добавлять префиксы? Прежде чем кивать головами как собачки на панелькой доске, предлагаю обсудить несколько моментов. Начнем с истоков: Спецификации и W3C Префиксы появились в те далекие времена, когда спецификация CSS 2.1 сказала, мол, вот вам индикаторы, пусть они начинаются с "-" или "_", играйтесь на здоровье, это будут ваши персональные, уникальные свойства! И браузеры подумали: "Ач

HACK-week Хак-вик - это неделя свободной разработки в рамках проекта. Очень простая, но замечательная идея, которая состоит в том, чтобы отречься от рутины и заняться тем, чем всегда хотелось, но никогда не доходили руки. Это может быть что угодно: рефакторинг (небольшие улучшения, на которое никогда не хватает времени в режиме надо срочно-срочно) добавление нового функционала с использованием новых библиотек улучшение старого с новыми технологиями, возможно, с другой бд добавление тестов или тотальная переработка существующих увеличение быстродействия проекта и многое-многое другое, что, возможно, хотелось бы пощупать применительно к данному проекту. Хак-вик - это возможность найти для себя что-то интересное и воплотить в жизнь. На мой взгляд это отличная практика, это возможность почувствовать себя не только карандашом в руке заказчика, но и архитектором. Появляется более трепетное отношение к проекту, как к своему детёнышу. Появляется соучастие и сопереживание, то, о чем гов

IT событие KyevJS конференция Событие Zillow приобрела Buyfolio Курсы " Software Engineering for SaaS " on www.coursera.org Приложение Reader128k iPhone приложение Instagram Инструмент Sublime Text 2 Инструкция по эксплуатации Samsung Гаджет iPad mini Ожидание Samsung Galaxy Camera EK-GC100 Фильм " 127 Hours " (2010) Книга Стивен Хокинг. Краткая история времени от большого взрыва до черных дыр (1988 г.) Музыка PSY - GANGNAM STYLE Ачивки Получить легендарку " Клыки Отца " и бросить WoW = completed! Разочарование Современное искусство: в Изоляции, выставка в Грин-Плазе и галерее «АртДонбасс» Впечатление Красная пещера в Крыму Город Одесса