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

Перерыл очень много различных фреймворков и остановил свой выбор на ныне популярном jQuery. Всё бы хорошо, но принципа работы я сразу не понял, и сходу сделать простую задачу, аля загрузить одну страницу в другую, я не смог. Искал в интернете хоть какую-то помощь. Помог офф. сайт, благо там доков хватает. И вот, разобравшись в этом вопросе, решил сделать небольшой примерчик для «самых маленьких» (для новичков), которые никогда не работали с этой библиотекой.

Для профессионалов он (пример) покажется смешным и простым, но для людей, не имеющим представления что и как и почему — он поможет. Пример снабжен комментариями в коде. В нём показано как загрузить одну страницу в другую, не перезагружая первую, так же немножко прошёлся по базовым основам классов.

Скачать пример можно вот тут

Одной из основных моих активностей на работе является оценка проектов. И в данной статье я постараюсь поделиться своим опытом в данной области.

Большинство приложений в интернете сейчас начинает встраивать карты местности.
Работе с картами, используя Google Map API, посвящена данная статья.

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

Крик души, собственно в следующем:
из, предположим, 10 человек простейшие тесты сдают максимум двое (один — наполовину или на две трети). Вот такая простая статистика.

Может быть, я задаю слишком сложные вопросы ( несколько видоизмененные вопросы под катом )?

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

Может быть, кто-то поделится своими задачами, или в комментариях каким-то образом родится что-то удивительно-простое, но позволяющее понять уровень человека?

Примечание: ниже перевод статьи 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)).

В последнее время на drupal.ru и habrahabr.ru частенько проскакивают темы вроде: «Делаю социальную сеть – бюджет пара сотен! Помогите сделать хабрастартап!» Отечественные аналитики связывают эту тенденцию с тем, что кризис на ипотечном рынке США тянет вниз за собой рынок в целом, что заставляет игроков на бирже вкладывать в высоколиквидные и надежные активы. Традиционно прибежищем инвесторов в смутные времена является золото, медь да стартапы на просторах бывшего СССР.

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

Обе упомянутые в первой части тенденции лишь усугубились: индекс Доу-Джонса и NASDAQ ежедневно сдают свои позиции, а количество хабрастартапов на территории 1/6 части суши растет в геометрической прогрессии. Свидетельством прихода на этот рынок серьезных игроков служит хотя бы это предложение. Сначала я подумал, что это очередная попытка легализации средств уведенных из SG, но по имеющейся на сей час инсайдерской информации заказчик имеет отношение к медиахолдингу компании… нет, не буду называть имя компании, намекну лишь, что председателя совета директоров этого энергетического монстра часто можно встретить на аватарках хабрапользователей.

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

Одна из интересных функций CSS3, которую мы и рассмотрим сегодня, носит имя "::selection", при помощи которой можно заменить стандартный цвет выделения текста в браузере. Следует заметить что, на момент написания статьи, эту функцию поддерживают только лишь Safari и Firefox, причем отображают совершенно по разному. Однако, на мой взгляд, стоит быть в курсе всех новинок дабы не отставать от этих, так сказать, «вперед-идущих» техник.

Начнем:

::selection {
background: #ffb7b7; /* Safari */
}
::-moz-selection {
background: #ffb7b7; /* Firefox */
}

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

[ПРИМЕР]

p.red::selection {
background: #ffb7b7;
}
p.red::-moz-selection {
background: #ffb7b7;
}
p.blue::selection {
background: #a8d1ff;
}
p.blue::-moz-selection {
background: #a8d1ff;
}
p.yellow::selection {
background: #fff2a8;
}
p.yellow::-moz-selection {
background: #fff2a8;
}

Краткое знакомство с консолью

Давайте кратко ознакомимся с терминалом — консолью в Linux.



Консоль для Linux имеет решающее значение. Если вы всерьез решили изучить Linux, то вам просто необходимо уметь обращаться с консолью. Сразу скажу, что консоль в Linux превосходит по функционалу консоль (cmd.exe) в Windows, но, видимо, консоль — это удобный инструмент, поэтому Microsoft разрабатывает новый вариант консоли — PowerShell.

Вышла новая версия краткого справочника по работе с PrototypeJS 1.6.0.2.

скачать в формате PDF

оригинал материала

Структура правильного HTML-документа базируется на логике, порядке и использовании семантически корректной верстки. Если у вас есть заголовок — используйте для него елементы Heading(h1-h6), если абзац/параграф — paragraph(p). Если у вас есть список — используйте элементы списков (ul/ol), если вы цитируете — используте blockquote или cite. Эти элементы придают смысловое значение разметке, делая ее семантически корректной, в дополнение к правильной структуре.

После составления корректного HTML-макета, используйте CSS для визуального оформления. (Тут уже дело вкуса, некоторые верстают CSS «с лету», а некоторые только после создания HTML-макета)

Стандарт XHTML более строг к синтаксису чем HTML, он не допускает наличия незакрытых тегов, одинарные теги тоже должны быть закрыты (self-closing). Элементы в XHTML прописываются строчными, а не заглавными буквами. Значения атрибутов элементов должны быть указаны в кавычках. Есть и другие отличия, но более подробно я описывать их здесь не буду.

Хочу описать хабрачеловекам восемь самых важных расширений (или плагинов) для браузера Mozilla Firefox.
Эти расширения хорошо помогают в работе. Помогают ее организовать, уменьшить затрачиваемое время на работу и…да что тут говорить, читайте сами и решайте что вам подходит и как вам это может быть полезно.

Эта заметка уже была опубликована вчера на Блоге Стрельбана, теперь предлагаю ознакомиться с ней хабрачеловекам.
Да, чуть не забыл: расширения будут идти в обратном порядке. Т.е. самые важные находятся в конце!

Навеяно этим.

Для тех, кто, возможно, не знает как сделать так, чтоб всё было хорошо.
Сайт должен тянуться только до определённой величины, и сужаться тоже только до некоторого значения. Я обычно беру 1500 и 980 пикселей соответственно.

Как сделать? min-width и min-height.

#site {
  margin: 0 auto; /*это чтоб центрировать контент при превышении max-width*/
  min-width: 980px;
  max-width: 1500px;
}

Но ведь IE их не поодерживает. А expression слишком нагружает браузер… Спокойно, други! Я выведу вас к свету из тьмы!
Пишем далее.



А в ie.js помещаем

window.attachEvent('onload', mkwidth);
window.attachEvent('onresize', mkwidth);

var minwidth = document.getElementById("site").currentStyle['min-width'].replace('px', '');
var maxwidth = document.getElementById("site").currentStyle['max-width'].replace('px', '');
function mkwidth(){
    document.getElementById("site").style.width = document.documentElement.clientWidth < minwidth ? minwidth+"px" : (document.documentElement.clientWidth > maxwidth ? maxwidth+"px" : "100%");
};

В чём особенная вкусность приведённого метода? А в том, что минимальное и максимальное значение нужно задавать только в одном месте, ну и вообще.

Пользуйтесь, короче, на здоровье!

Когда вы принимаете решение создать сайт, перед вами возникает ряд проблем, связанных обычно с вопросом — а что именно нужно делать, как и в каком порядке?

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

Честно скажу — люблю Firefox. Люблю еще с тех времен, когда никакого Fx и в помине не было, зато был движок Gecko на котором работал Netscape Navigator, отныне павший в войне браузеров и официально прекращающий свою разработку и поддержку с конца 2007 года. Но не будем о грустном, сегодня доля Fx в России около 15 процентов (примерно столько же имеет и любимая многими Opera), а в Европе по некоторым данным и все 30, на сегодняшний день загружено почти 500 миллионов копий по всему миру. С каждым днем эти цифры постоянно увеличиваются.

Как известно, Fx поддерживает расширения, которые могут изменять и дополнять любую деталь как самого браузера, так и содержимого просматриваемых сайтов. Итак, свежее меню моего Firefox:

• Adblock 0.5.3.043 — баннерорезка
• Context Search 0.4.1 — выпадающее меню поисковиков по правой кнопке мыши в контексте страницы
• CustomizeGoogle 0.68 — гуглотюнинг
• Deepest Sender 0.8.0 — блог-клиент
• del.icio.us Bookmarks 1.5.44 — социальные закладки в браузере
• Download Statusbar 0.9.5.2 — интерфейс качалки в статусбаре
• Flashblock 1.5.5 — флэшстоппер
• Gmail Notifier 0.6.2.2 — gmail-уведомлялка
• ImgLikeOpera 0.6.15 — экономия трафика на картинках
• InfoLister 0.9f — генератор списка установленных плагинов и тем
• Locationbar² 0.7.2.1 — удобная адресная строка
• Magic's Video — Downloader 1.5.311207 — флэш-качалка
• MinimizeToTray 0.0.1.2006102615+ — сворачивание в панель задач Виндоус
• OpenSearchFox 0.1.5 — добавление поисковиков из любой формы поиска
• Organize Search Engines 1.1.2 — организация поисковиков с помощью разделителей и папок
• Paste and Go 2 0.8 — вставить и перейти (фишка opera)
• PDF Download 1.0.0.0 — pdf-качалка
• Restarter 1.0 — рестартер
• Sxipper 1.2.4 — паролевставлялка
• Tab Mix Plus 0.3.6 — настройка работы табов

14 Января, 2008г. вышел очередной релиз популярной javascript библиотеки, которой я пользуюсь уже почти год. Хабр насчитал 45 хабратопиков по слову jQuery, поэтому, тем кто не знает что это за магия — рекомендую ознакомиться.

Этот релиз не привносит ничего революционного (вспомните релиз версии 1.2), а лишь насчитывает около 100 багфиксов, несколько улучшений и парочку feature requests. Подробнее можно посмотреть на баг-трекере

p.s. Видимо не только я один воспринимал новогодние праздники как способ эффективно заняться своими проектами…

Это вторая статья о jQuery, которая будет интересна, прежде всего, начинающим пользователям этой библиотеки. В этой статье, с практической точки зрения, речь пойдет о подсветке текущего элемента меню на стороне клиента. А прочитав статью, вы поймете, как делать более сложные выборки и цепочки запросов.

Эта мини-статья посвящена очень простой вещи, которая будет интересна, прежде всего, начинающим пользователям библиотеки <a href=«jquery.com>jQuery. Я покажу, как прикреплять к каждой ссылке небольшое изображение, чтобы выделить ее.

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

Для устранения мигания нужно подключить к веб-странице небольшой код на JavaScript:

var m = document.uniqueID
&& document.compatMode
&& !window.XMLHttpRequest
&& document.execCommand;

try{
     if(!!m)
      {
         m("BackgroundImageCache", false, true)
      }
   }
   catch(oh){};


Алекс Искольд, предприниматель и один из основных авторов известного блога Read/WriteWeb, опубликовал список полезных советов для стартапов. Этот список составлен по материалам многочисленных публикаций автора, он содержит 36 пунктов по пяти темам: разработка кода (8), инфраструктура веб-проекта (5), пиар (11), участие в конференциях (7), юридические и финансовые советы (5).