Главная » Web Development

Наборы инструментов Bootstrap для создания web-приложений

22:09

bootstrap


HTML KickStart

Bootstrap от Twitter

Fbootstrapp

Simpliste

Foundation

Initializr

Google+ UI Buttons

TwBootstrap 2 github.com/twitter/bootstrap/tree/2.0-wip

 

More

Шрифт Web Symbols

21:37

websymbols

 

У каждого дизайнера наступает момент, когда ему надоедает заново рисовать одинаковые элементы на сайтах. Например, иконки социальных сетей или стрелочки для галерей. Также, технологам надоедает каждый раз нарезать «гиф» или «пнг» одного и того же элемента.

Чтобы упростить себе эту работу мы решили сделать шрифт, в котором каждая буква — символ (как правило, часто используемый). Идея не новая, ведь есть Windings и другие похожие гарнитуры, но в них как всегда не хватает самого необходимого и достаточно много ненужного.

Шрифт очень удобен — он векторный, может быть любого размера, любого цвета и работает даже в IE7.

 

Далее

LESS: программируемый язык стилей

21:15

less Я не люблю CSS. Простой и понятный. Это движущая сила Интернета, но он слишком ограниченный и им трудно управлять. Пришло время привести этот язык в порядок и сделать его более полезным, используя динамический CSS при помощи LESS.
Объясню свою позицию на примере. Почему бы вместо использования #FF9F94 для получения темно-персикового цвета просто не хранить значение этого цвета в переменной для её последующего использования? Что бы перекрасить сайт достаточно будет изменить значение переменной всего в одном месте и всё.
Другими словами: это будет очень изящно, если мы будем использовать немного программирования и логики в CSS, что бы сделать его более мощным инструментом. Хорошо, что это всё возможно с использованием LESS.

 

Так что же такое LESS?

JavaScript debugger для IE

13:32

jsdebug

 

Core Services выпустили дебаггер Companion.JS, который поддерживает, кроме расширенных сообщений об ошибке (call stack и реальное имя файла где произошла ошибка), "Firebug"-подобную Console API.
В сочетании с основным продуктом (DebugBar) получается неплохая замена Firebug-у, особенно если учесть «безрыбье» в этом вопросе...

Материалы:
Статья «Companion.JS - компаньйон веб-разработчика, которому по пути с IE»
Линк скачивания: http://www.my-debugbar.com/wiki/uploads/…
Страница описания установки: http://www.my-debugbar.com/wiki/Companio…

 

(c)

Прощай Smarty или простой шаблонизатор

13:30

На прошлой недели запускал один проект и что-то мне не понравилась скорость генерации страниц. Начал искать в чем дело. Оказалось, в шаблонизаторе!

Думаю, очень многие разработчики используют в качестве шаблонизатора Smarty. По-моему, это самый известный шаблонный движок. Чем он знаменит?

  • легок в освоении, понятен даже человеку не владеющему php;
  • легко интегрируется в готовые проекты;
  • очень функционален, обладает практически своим языком программирования.

И вот тут-то “собака и зарыта”. Программисты использующие Smarty, пушит шаблоны на его (довольно корявом) языке, чтобы шаблонизатор потом постоянно перегонял эти шаблоны в PHP-код (куча никому не нужной работы!!!). Если вдуматься, получается самая большая глупость во всей истории программирования на PHP!

Не проще ли сразу писать шаблоны на PHP?

 

Далее

CopyPasteCharacter.com

10:53

copypastecharacter

 

A web and iPhone application for copying the ‘hidden’ characters that comes with the computer’s typefaces, to be pasted into emails, tweets, text documents, forums and whatever else you might need to spice up with an extra ♔, ฿ or, ❒.

 

http://copypastecharacter.com/

PIE

10:03

pie

 

PIE makes Internet Explorer 6-9 capable of rendering several of the most useful CSS3 decoration features.

 

http://css3pie.com/

(also)

Несколько полезных сервисов

13:24

Хочу поделиться ссылками на несколько полезных сервисов. Некоторые из них помогут сэкономить время, другие — сделают за Вас незнакомую/нелюбимую работу. Список разбит по категориям, чтобы было легче ориентироваться.

 

Далее

DocHub.io — удобный справочник HTML, CSS, Javascript

13:18

Интернет наполнен огромным количеством документации для веб-разработчиков. Но, к сожалению, использование большей части документации довольно неудобное. Для примера, возьмем Mozilla Developer Network (MDN). Сайт Mozilla Developer Network предлагает большой объем документации по CSS, JavaScript, HTML, SVG и т.д., но навигация по нему утомительна — нет никакого глобального меню и поиск не столь удобный.

Это привело разработчика Рафаэль Гарсия создать instaCSS — быстрый способ просматривать документацию CSS от MDN. Благодаря хорошей функции поиска и чистому, простому дизайну с хорошим глобальным меню instaCSS стал хитом по мнению читателей Hacker News. В связи с большим спросом, Гарсия перевел проект на более широкий домен DocHub.io и расширил поиск по CSS, HTML, JavaScript и DOM.

Гарсия выпустил DocHub на GitHub, значит, вы можете создать свой ​​собственный локальный экземпляр сайта и использовать его когда у вас нет доступа в Интернет (правда, такие времена становятся редкими для большинства из нас).

Хоть DocHub и хороший проект, но он не без недостатков. Например, ему не хватает уникальных URL-адресов, так что вы не сможете указывать ссылку на какой-то конкретный раздел. Он также использует hash url и с кнопкой Назад" в браузере возникнут проблемы.

Тем не менее, несмотря на эти проблемы, DocHub.io является одним из лучших сайтов документации — безусловно, стоит добавить в закладки.

 

(c)

Десяток ресурсов, которые помогают быть дизайнером

09:50

Работать дизайнером очень интересно. Это творческая работа. И как любому творческому человеку, дизайнеру нужна муза или вдохновение.

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

Естественно, если вы расскажите о своих ресурсах, я буду благодарен.

Хочу сразу предупредить, что практически все ресурсы, собранные мной — англоязычные. Только лишь один на русском. Так же я не очень приветствую узкопрофильные ресурсы (речь о ресурсах, на которых можно скачать только кисти для photoshop и прочее). В общем приступим:

 

Далее