Привет, собственно, этот пост я решил написать в ответ воот на это сообщение из песочницы.
Я не считаю себя профи в программировании, хотя иногда очень хочется, но все-же, я считаю, что неправильно таким способом строить деревья).
Я Буду строить не дерево комментариев, а дерево меню. Мой способ построения меню легко модифицировать и для построения дерева комментариев. Меню может иметь любое количество вложенных подменю. Моя структура таблицы меню такая:

Всем привет. Хочу поделиться опытом замены разбившегося экрана у электронной книги PocketBook 301+. В статье процесс описан от и до: начиная с заказа экрана и заканчивая описанием чувства вселенской радости в связи с возвращением любимого гаджета к жизни. Для этого не нужны ни навыки пайки, ни особенно прямые руки, ни специальные инструменты (типа паяльной станции или медицинского дефибриллятора) — все довольно просто. Сразу скажу, что данный мануал скорее всего подходит только для конкретно этой модели (но, к слову, на сколько мне известно, именно у нее чаще всего бьется экран), и я не особо разбирался в тонкостях предстоящей работы, а просто заказал экран и действовал по обстоятельствам, так что буду рад, если кто-то укажет на неточности и предложит лучшие решения.


Итак, если у вас уже давно валяется такой «стеклобой», а тратить половину цены устройства на сервисный ремонт душит жаба, или просто интересно посмотреть на внутренности такого замечательного девайса, то добро пожаловать под кат (и да, там много фотографий, которые, кстати, вполне кликабельны).

Вы PM. Как узнать – готова ли вёрстка к реальному использованию?
Вы заказчик. Как убедиться, что работа выполнена качественно?
Как оценить качество вёрстки?

Когда я стал тим-лидом, а позже PM, передо мной стала задача проверять вёрстку наших проектов. Нужно было выработать формальные, легкопроверяемые критерии, соответствие кода которым, должно было давать некую гарантию, что не будет факапов и ни клиент, ни программеры не сказажут потом “WTF?”.

Клиенту неважно насколько красив ваш код, но ему важен результат. Качественный код нужен фирме, т.к. он надёжней и в будущем его будет легче поддерживать.

Требования должны были быть такие, что соблюсти их легче, создавая качественную вёрстку, а не говнокод. Я составлял такой чек-лист в течении полутора лет. За последние полгода в него не добавилось ничего. Значит самое главное учтено.

Итак что же это за список?

Краткая версия теперь доступна на html5checklist.com (github), где можно вносить pull-request'ы.

История обновлений:

• 2015/08/11: Актуализировал рекомендации по оптимизации скорости загрузки. Добавил требование поддержки Retina. Дополнил «19. Мелочи» требованием что изображения должны масштабироваться в зависимости от размера окна.
• 2015/08/10: актуализирован список исключений для CSSLint
• 2015/07/29: актуализирован пункт №13 «плохо»/«хорошо»
• 2015/04/08: добавлено требование использования препроцессоров и рекомендация использования систем сборки
• 2013/04/25: добавлены анализаторами качества кода: CSSLint и JSHint, указан сайт подбора css font stack (спасибо @fliptheweb), мелкие уточнения (работу интерактивных элементов страницы, что не пропадает фон на высоких разрешениях, не должно быть пустых презентационных блоков, при проверках контента — пробовать удалять заголовки, менять местами блоки)
• 2013/04/24: добавил пункт об минимизации каскада (БЭМ-техники, MCSS, SMACSS), необходимости вписывания в экран моб. устройства, заменил ссылку на проверочный текст отображения стандартного html на код с normalize.css, поправил пример где в рекомендации встречался длинный каскад, упомянул про Opera на Presto и новый уровень семантики — в именах классов BEM.
• 2012/04/12: отсортировал пункты проверки в порядке важности, выделил главные, дополнил статью подробностями
• 2011/12/07: дополнил согласно доклада на WSD Минск'2011.
• 2011/07/19: добавлено про повышение надёжности вёрстки благодаря html5-тэгам, про необходимость favicon/apple-touch-icon, отсутствие багов при ресайзе textarea
• 2011/06/15: добавил пояснения какие ошибки валидации допустимы, рассказал про отсутствие официальной кнопки «HTML5 Valid» и про официальное лого HTML5 на сайте.

^{*) На самом деле все равно сложно, но зато проще, чем было раньше.}

История началась с постановки задачи: нужно сделать анимированный баннер с примерно тридцатью объектами средствами HTML+javascript за один день. За день, конечно, баннер сделан не был, а был сделан за два усилиями трех человекодней. После выполнения задания осталась библиотека пакетной анимации, которую я назвал Scenario. О её доработанной версии я и хочу рассказать.

Основная идея библиотеки — собрать информацию обо всех анимируемых объектах в один сценарий и отправить его на выполнение. Один сценарий может быть исполнен сколько угодно раз или может быть модифицирован, поскольку представляет из себя обычную яваскриптовскую структуру.

Запуск сценария из любого места предельно прост:

var newScenario = [...];
$.scenario(newScenario, {
    complete: function(time) {
        alert('Готово!');
    }
});

Осталось только разобраться, что писать вместо трех точек в примере :)

Мы таки завели полнофункциональный блог на хабре и спешим поделиться массой новостей. Для тех, кто не ничего не знает о нас может почитать эти посты.

Первым делом представляем вам мини-проект AnonymousCoat, если по-русски, то Плащ-Анонимка. Это бесплатный VPN-сервис, работающий на технологии OpenVPN.

Последние десять лет мы наблюдаем второй цикл веб-дизайна – сайты превращаются в приложения и уже практически не появляется новых проектов, не обладающих некой долей интерактивности. Увеличение сложности ПО, разрабатываемого для интернета, вызвало необходимость в структурированном и взвешенном проектировании приложений.

На сегодняшний день наиболее часто используемым паттерном проектирования сайтов является Модель-Вид-Контроллер (MVC). Повсеместное его использование отчасти вызвано успехом и популярностью фреймворка Ruby on Rails. Сейчас MVC является практически синонимом веб-разработки среди всех платформ.

При выполнении задач, активно нагружающих процессор, современные сайты все больше полагаются на выделенные ресурсы. Этому, в частности, поспособствовало открытие компаниями Amazon и Google облачных сервисов, которые позволяют разработчикам существенно уменьшить нагрузку на процессоры их собственных серверов. Каждый сервис обычно проектируется в виде отдельного элемента ПО, который запускается внутри своего домена и использует свои собственные ресурсы.

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

Для уменьшения первоначальных вложений обычно принимают решение о том, что приложение должно быть спроектировано в виде целостной программы, содержащей все требуемые функции. Если сайт быстро обретет популярность, это станет проблемой. У меня остались не очень приятные впечатления от рефакторинга плохо масштабируемых кодовых баз. К тому же, это может потребовать большого количества ресурсов и денег. В идеале приложения должны расти по мере необходимости и не требовать в процессе этого крупных финансовых затрат.

С самого начала «вебошрифтовой революции» мы полагались на неизящные хаки деклараций @font-face, чтобы шрифты из Паутины загружались во всех браузерах. Может ли существовать лучший путь? Вполне изящный и совместимый с будущими браузерами?

Вкратце об истории вопроса

В сентябре 2009 года Пол Айриш (Paul Irish) огласил пуленепробиваемый синтаксис для записи деклараций @font-face. Синтаксис был компактным и в то время действовал во всех браузерах. Недавно стали поступать, со временем усиливаясь, жалобы на отказ шрифтов загружаться в Android — поэтому мы стали вместо того рекомендовать синтаксис «Mo' Bulletproofer», сочинённый Ричардом Финком (Richard Fink). К сожалению, синтаксису «Mo' Bulletproofer» требуется двойная запись деклараций, так что поддержка его сложнее.

Синтаксис Fontspring @Font-Face

А вот таким этому коду следовало бы быть с самого начала. Чистым, ясным и простым:

@font-face {
	font-family: 'MyFontFamily';
	src: url('myfont-webfont.eot?') format('eot'), 
	     url('myfont-webfont.woff') format('woff'), 
	     url('myfont-webfont.ttf')  format('truetype'),
	     url('myfont-webfont.svg#svgFontName') format('svg');
	}

Что? Я не понял.

Хак Трюк, заставляющий этот код заработать — символ «?» вслед за именем файла EOT. Без шуток.

Как это срабатывает

Представляю свой проект — бесплатный скрипт интернет-магазина OpenStore на основе Drupal и модуля Ubercart

Сайт проекта
Скачать
Багтреккер

У каждого из нас, полагаю, в любимом браузере постоянно открыты несколько вкладок одновременно. Не раз бывают случаи, что и заголовка вкладки не видно — лишь favicon'ки. Но часто они информации, кроме как отображения логотипа сайта, не дают. И, наверное, зря. Но мы постараемся и здесь использовать это место (целых 16px*16px!) так, как хотим. По крайней мере, будем знать, как это можно сделать.

В этой заметке я хочу показать вам процесс создания нового дизайна для скрипта интернет-магазина Simpla.

Недавно я написал небольшой плагин на jQuery и PHP. Функционал простой: посредством Ajax задается описание и загружается видео на YouTube, плагин вернет статус загрузки, и если она прошла успешно — id видео. Плагин может применяться на любом сайте, и легко вставляется в любую CMS.

Все началось с того, что при разработке CMS для сайта местного телеканала я столкнулся с необходимостью сделать загрузку видеороликов на YouTube. Так как на сайт часто будут добавлять видео, то каждый раз логиниться на YouTube, заливать туда ролик, получать на него ссылку, лезть в CMS и вставлять её туда — очень напряжно. Причем, желательно делать это через Ajax, чтоб можно было легко включить плагин в любой проект.

Продолжая цикл статей «CSS3 сейчас!» (Первая статья — CSS Transitions), хотелось бы рассказать об анимации средствами CSS3, а конкретно — @keyframe и animate. Так же, в статье мы затронем свойства opacity и цветовую модель rgba(), кроссбраузерное использование border-radius, box-shadow и градиентов.

Посетителям сайта stackoverflow.com был задан вопрос: «Какие программерские термины вы придумали, так чтобы они стали популярны в ваших кругах (то есть вы слышали, что кто-то их повторяет)?

Ниже — вольный перевод самых популярных ответов.

Завязка

Хочу поднять тему, актуальную для разработчиков и для заказчиков: разработка в удовольствие. Что это, миф или реальность? Существуют ли компании, в которых процесс разработки поставлен так, что приносит удовольствие обеим сторонам: разработчику и заказчику. Ведь в конечном итоге цель у обеих сторон одна — удовлетворенность конечным продуктом.

Статья ориентирована на начинающих Codeigniter-щиков, таких как я.

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

Найти самостоятельно информацию в принципе не трудно. Поисковые системы еще ни кто не отменял. Я просто решил собрать найденные кусочки и объединить их в один, на русском языке.

Допустим, что CI уже установлен и настроен. Кстати, на одном из западных сайтов, доступно много хороших и исчерпывающих видео уроков по настройке и использованию Codeigniter-а.

jQuery очень мощная библиотека, но некоторые его богатые возможности неясны, если вы не изучали исходный код jQuery и не читали книгу jQuery Pocket Reference (автор пишет my new book), вы можете не знать о них. В этой статье представлены отрывки из этой книги — 5 полезных вещей о которых вы могли не знать.

1) Вы вы не обязаны использовать $(document).ready() Если вы хотите выполнить функцию, когда документ готов для манипулированию просто передайте её в $()

2) Вы, наверное, уже знаете, что вы можете передать тэг в функцию $() для создания элемента этого типа и, что вы можете передать атрибуты объекта (в качестве второго аргумента), которые будут установлены на созданный элемент. Вторым аргументом может быть любое свойство, который вы передаете в метод attr(). Кроме того, если какое-либо свойство имеет тоже самое имя, что и событие (click, mouseover), то значение свойства используется в качестве функции обработчика данного события.
Следующий код, например, создает новый элемент, устанавливает три HTML атрибута и регистрирует функцию обработчика события(click) на нем:

var image = $("<img>", {
                  src: image_url,
                  alt: image_description,
                  className: "translucent_image",
                  click: function() {$(this).css("opacity", "50%");}
               });

Сегодня закончился конкурс-угадайка от Ticno по двум софтоподаркам, анонсированный вместе с семью новыми программами в прошлом посте.

Мы получили немало предположений (смешных и не очень). Один хабражитель прислал сразу 20 разных вариантов с максимально широкой трактовкой (типа дополнение к браузерам), но не угадал… Обе программы не назвал никто, но у нас есть победитель, угадавший одну программу — скриншоттер.

Он получает набор шампанского от Asti Martini. Подробности о программах под катом!

Рассмотрим стандартную задачу — на сайт с уже существующими пользователями нужно добавить форум. При этом не писать новый модуль самому, но поставить готовое популярное решение типа phpbb3 и синхронизировать регистрацию/авторизацию/профили пользователей сайта с форумом. Минимально нужно, чтобы пользователи сайта стали пользователями форума, и чтобы авторизованный пользователь сайта автоматически становился авторизованным пользователем форума и наоборот, а так же происходила синхронизация при изменении профиля.

В сети есть плагины для синхронизации phpbb и wordpress (WP-United) и универсальные руководства (1,2), но последние, как правило, начинаются словами «скопипастить эти… дцать функций из functions.php» и «вставить в эти 3 таблицы вот такие данные».

Другой метод интеграции — начать использовать таблицы пользователей и методы к ним из phpbb на остальном сайте, но это обычно требует значительных модификаций системы.

Расскажу про свой способ, который тормознее обычных, но зато требует минимальных изменений файлов сайта и форума (по 10 строчек на каждом для подключения файла с классом-синхронизатором в 5кб).

Мотивация

Как часто вы, написав код, запускаете его и видите сообщение о синтаксической ошибке? Я часто. А как часто, найдя и исправив эту ошибку, вы вновь, запуская код, видите похожее сообщение?
Я часто…
Причин тому несколько:

• я очень невнимательный
• я пишу на многих языках

И еще ничего, если это просто какой-то скриптик или страничка и воспроизвести код быстро. А если это нечто, что бы его воспроизвести требует что-то там перезапустить, где-то там выйти/зайти и т.д. и т.п.

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

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