Примечание: ниже находится перевод статьи «CSS Expression Optimization», в которой автор немного освещает использование и проблематику динамических свойств в CSS (aka CSS expressions). Также автор предлагает способ их оптимизации (исполнение один-единственный раз вместо постоянного выполнения). Далее приведены несколько тезисов с ClientSide'2007 по заявленной тематике. Мои комментарии даны курсивом.

CSS expressions были впервые представлены в Internet Explorer 5.0, который позволял назначать JavaScript-выражение в качестве CSS-свойства. Например, следующий код позволит разместить элемент в зависимости от того, какого размера окно браузера.

#myDiv {
   position:   absolute;
   width:      100px;
   height:     100px;
   left:       expression(document.body.offsetWidth  - 110 + "px");
   top:        expression(document.body.offsetHeight - 110 + "px");
   background: red;
}

Не самый лучший способ решения поставленной задачи, но в качестве примера его достаточно.

читать дальше на webo.in →

Примечание: ниже перевод статьи Julien Lecomte «The Problem With innerHTML», в которой автор рассматривает проблемы при использовании метода innerHTML в современных браузерах и предлагает ряд советов, как ее можно избежать. Мои комментарии далее курсивом

Свойство innerHTML крайне популярно среди веб-разработчиков в силу своей простоты и удобства, поскольку оно совершено элементарно позволяет заменить HTML-содержание у конкретного тега. Можно также воспользоваться DOM Level 2 API (removeChild, createElement, appendChild), но использование innerHTML гораздо более простой и эффективный способ для модификации DOM-дерева. Однако, есть ряд проблем при использовании innerHTML, которых следует избегать:

• Неправильная обработка свойства innerHTML может привести к атакам, связанным со script-инъекциями (XSS) в Internet Explorer, когда HTML-строка содержит вызов <script>, помеченного как отложенный: <script defer>...</script>
• Выставление свойства innerHTML уничтожит все текущие вложенные HTML-элементы со всеми обработчиками событий, что потенциально может вызвать утечки памяти в некоторых браузерах.

Есть и еще несколько более мелких недостатков, которые тоже стоит упомянуть:

• Нельзя получить ссылку на только что созданные элементы, вам приходится добавлять код для получения ссылки на них вручную (используя DOM API).
• Вы не можете выставить innerHTML для всех HTML-элементов во всех браузерах (к примеру, Internet Explorer не позволяет выставить innerHTML для строки таблицы (tr)).

Сейчас уже много где написано и упомянуто про технику CSS sprites (aka CSS Image Maps). Я не буду открывать Америку и рассказывать о ней дотошно еще раз, а просто хочу привести несколько примеров и полезных ссылок. И пару советов из собственной практики.

Сама техника заключается в том, что мы создаем комбинированное изображение, из которого затем «вырезаем» с помощью свойств background-position нужный нам в данном случае кусок. На текущем уровне поддержки браузерами (я полагаю, что 99,9%) оно является просто must-have для любого уважающего себя интернет-ресурса (ибо позволяет сократить число запросов к серверу, отделить поведение от представления, возложить труд по анимации на CSS-движок браузера, а не на JS-движок, т.е. это будет работать даже с выключенными скриптами, и много-много прочих «вкусностей»). Но обо всем по порядку. Поехали.

читать дальше на webo.in →

Blitz Templates — быстрый и удобный шаблонизатор для крупных интернет-проектов, разрабатываемых на php. На первых порах может быть не совсем очевидно, зачем нужен Blitz для php, в то время, когда этот язык, по сути дела, и есть шаблонизатор, только весьма навороченный.

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

В любом случае, для всех, кому было необходимо векторизовать изображение (отсканированное, сфотографированное).

VectorMagic — онлайн векторайзер. По качеству результата, превосходящий оффлайновые standalone приложения такие как Adobe Streamline и Corel.

Этот сайт был разработан двумя энтузиастами из Лаборатории Искусственного Интеллекта Стэндфордского Университета (James Diebel & Jacob Norda).

Они разработали воистину хороший стартап(?), который имеет отличное качество векторизации. В общем, судите сами.

UPD: так как такая тема оказывается уже была, я хотел бы узнать, существую ли программы, по качеству лучше чем Adobe Streamline и Corel, для оффлайновой векторизации изображений? А то я таких не находил.

Крупнейший западный ресурс, посвящённый стартапам, TechCrunch пишет о новой блогерской платформе Profy от одноимённой американской компании Profy, Inc. Любопытно, что этот калифорнийский стартап имеет российское происхождение. Директор — Илья Корсун, разработчики и менеджеры — Олег Токарев и Светлана Гладкова. Все они живут в Новосибирске.

Платформа Profy сочетает в себе текстовый WYSIWYG-редактор, RSS-ридер и социальную сеть. Для авторов на сайте имеется множество шаблонов. Других блогеров можно добавлять в свой круг друзей, обмениваться приватными сообщениями и вести чат. Пример блога на платформе Profy и скриншоты можно найти здесь. Сейчас система проходит закрытое альфа-тестирование, а количество тестеров ограничено сотней человек.

Западные комментаторы сомневаются в особых перспективах такого рода стартапа. «Нужна ли миру ещё одна блогерская платформа? — задаётся вопросом автор с TechCrunch. — Не знаю, но давайте дадим русским шанс».

via TechCrunch

С тех пор как сочетание «Web 2.0» пришло в массы, все чаще разработчикам сайтов приходиться добавлять «web 2.0 красивости» к сайтам. Очень помогает в этом JavaScript фреймворк jQuery. Описывать все прелести данного фреймворка я думаю не имеет смысла (о нем и так слишком много написано), но мне, как PHP разработчику, нехватало удобного сервер сайда для генерации AJAX ответов, в итоге на свет появилась PHP библиотека jQuery-PHP…

Новый сервис для генерации фавиконов.

Syntax Highlighter позволяет легко и красиво подсвечивать синтаксис кода на вашей странице. Написан на Javascript, соответственно работает на клиенте.

Поддерживает много языков, в сжатом виде занимает 11 килобайтов. Из минусов — не позволяет клиенту редактировать код на странице, readonly.



Демо: http://code.google.com/p/syntaxhighlighter/
Лицензия: LGPL

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

Итак, вот они:

Вы сделали (ре-)дизайн сайта и хотите похвастаться своим достижением? Не надо спамить социалки — редкий юзер оценит Ваши труды. Для этих целей есть множество подходящих сайтов, и о них далее...

Недавно на своем блоге я выложил статью по поводу создания блога на базе Drupal. Выложу ее и здесь. Надеюсь, она будет кому-нибудь полезной.

Выбор CMS для блога — дело серьезное и ответственное. Полагаю, каждый блоггер, создающий standalone-блог, провел немало времени, изучая различного рода обзоры и сравнения популярных движков, а также тестируя их функционал. Такой период был и у меня.

Пожалуй, самые популярные движки сейчас — это Wordpress, Joomla и Drupal. Во всяком случае, они самые известные из бесплатных CMS. После их изучения я остановился на Drupal и очень этому рад. Не вдаваясь в подробности о преимуществах Drupal (это тема для отдельной статьи), замечу лишь, что он мне понравился следующими особенностями:

• Гибкость системы. Архитектурно Drupal построен очень грамотно и модульно, что позволяет сделать из него все, что угодно.
• Качественный код. Благодаря достаточно жесткому контролю качества Drupal и его модули не только стабильны, но и обладают вполне читаемым кодом.

Есть и свои недостатки, конечно, но я сейчас, собственно, не об этом. Сейчас, когда набор модулей и настроек у меня стабилизировался, я бы хотел написать о том, как сделать блог на базе Drupal.

Представляю вашему вниманию мини обзор по найденным мною на этой неделе поисковым системам. Наиболее интересные и полезные с моей точки зрения (но я могу ошибаться) поисковики попали в этот список.


Поисковик по вину. Поисковик предлагает жителям америки здесь же на сайте и купить коллекционное вино. Интерес для меня: посмотреть на рекомендации, почитать, узнать сколько гипотетически бутылка того или иного вина может стоить, что стоит пить, а что нет :) Иногда эти знания важны особенно на томных аристократически интеллектуальных вечерах www.snooth.com

Мы завершили альфа-тестирование акции «Ищи на Nigma.ru и получай призы», рекламу которой вы все можете наблюдать на главной странице Хабрахабра. Благодаря вашим стараниям, нам удалось исправить несколько десятков важных багов.

В связи с окончанием альфа-тестирования, мы утроили счета всех наших пользователей альфа-тестеров (около 14 тыс. человек), а тем, кто жаловался нам на баги и помогал их исправлять, мы доначислили по 300 рублей (таких было 70 человек). Помимо скидочного сертификата на 500 рублей, который выдается каждому зарегистрировавшемуся, мы обещаем также продолжать поощрять активных пользователей.

Что мне всегда казалось странным в используемых Mozilla словарях, так это то, что они не понимают слов с буквой «ё». Ведь я же далеко не один такой, кто всегда использует эту букву.

И что же делать таким как я? Поставить другой словарь? Я тут на днях решил пощупать Firefox 3 beta 2, и как белый человек, зашёл в инструменты > дополнения > Загрузить расширения. А там нажал ссылочку «словари». И что же я увидел?

А нет там выбора словаря. Есть только один — тот самый, который без поддержки буквы «ё». Хотя насколько я помню, раньше загрузка словарей в FF была организована как-то иначе, и там был выбор словаря. Собственно, прежний список до сих пор существует — на специальном сайте dictionaries.mozdev.org, только выйти на него получается не через меню Firefox или сайт расширений, а через гугл. Неправильно это как-то.

Всё это, конечно, хорошо, но что если частенько что-то пишешь и на английском языке? Ставить второй словарь? Постоянно между ними переключаться? А если я часто пишу смешанные тексты? А что если я вдруг захочу написать несколько слов, содержащих букву «ё» заменяя её на «е»? Firefox их больше не будет проверять, а просто пометит как ошибочные?

На проходящей в Каннах музыкальной конференции Midem компания Qtrax объявила, что заключила соглашение со всеми крупнейшими музыкальными лейблами и издателями, и запускает первый в мире бесплатный и легальный обмен музыкальными файлами по p2p-протоколу. По словам представителя компании, всего для загрузки будет доступно 25 миллионов песен (сравните это с 6 млн. на iTunes и 3 млн. на Amazon).

Однако под выражением «бесплатно и легально» нужно поставить большую звёздочку для уточняющих условий и вопросов. А они есть. Во первых, музыка, распростаняемая через Qtrax будет загружаться и проигрываться через проприетарный плеер, основанный на Songbird, который в это время будет показывать рекламу, две трети доходов от которой будут отходить правообладателям. Во вторых, музыкальные файлы будут защищены DRM, и, что самое главное, не будут воспроизводиться на iPod. Компания утверждает, что «со временем» такая возможность появится, но насколько этот период будет продолжителен, не может сказать никто — вряд ли Apple будет особенно воодушевлена этой идеей.

Ниже располагается перевод заметки CSS — A Recipe for Success, в которой рассматривается создание средствами HTML/CSS в браузере некоторого образца меню. В статье освещены довольно интересные случаи, и подробно описано их решение.

Если вы посмотрите на стандартное ресторанное меню (или рецепт), там слева расположены названия блюд, за ними идет пунктирная линия до правого края, где расположена цена этого блюда. Давайте посмотрим на рисунок 1, чтобы понять, о чем идет речь.


Рисунок 1

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

1 марта запущена публичная версия онлайнового редактора блогов Swiftpen.

Сервис предоставляет пользователям возможность использовать единый редактор для написания постов в блоги, размещённые на различных платформах. Swiftpen поддерживает Livejournal.com и Deadjournal.com, Liveinternet.ru, Blogger, Wordpress.com и некоторые другие. Писать через него можно даже в блог, размещённый на собственном сервере: Swiftpen умеет работать с API Wordpress, MovableType и Blogger.

JavaScript предоставляет разработчикам возможность создавать объекты и работать с ними. Для этого существуют следующие приёмы:

• Оператор new
• Литеральная нотация
• Конструкторы объектов
• Ассоциативные массивы

Последние пару месяцев пишу небольшое Ajax-приложение.

Если коротко, то такой упрощённый браузерный Excel — фильтр сверху, табличка с данными снизу. Пользователь выбирает в фильтре, что он хочет редактировать, в табличку снизу подгружаются данные, пользователь их может редактировать, после изменения данных они отправляются на сервер, там обрабатываются, записываются в базу данных, сервер генерирует новые данные, графики, данные отправляет назад, графики отображаются отдельно в iFrame. До меня это приложение было не аяксовым, а основывалось на обычных формах, и пользователю приходилось ждать новой загрузки страницы после каждого изменения фильтра или данных (так как данные в ячейках зависили от других ячеек, приходилось делать пересчёт после каждого изменения), а мне поручили переделать всё под Ajax. Я не javascript-программист, я из мира Delphi/Builder, где весь интерфейс рисуется без проблем за полчаса, а потом уже пишется логика. Многое мне пришлось изучать на ходу, почти всё пришлось писать самому (вручную рисовать контролы и описывать эвенты на javascript, попутно борясь с несовместимостью или разной реакцией разных браузеров на один и тот же код — брррр, врагу не пожелаешь).