Школа программирования Codecademy, как и обещала, увеличивает количество доступных предметов. К трём курсам по JavaScript теперь добавился jQuery. Выбор логичен: jQuery — это одна из самых популярных JavaScript- библиотек, которая широко используется для создания современных интерактивных сайтов.

Вводный курс The Document Object Model & jQuery состоит из двух уроков и 13 упражнений. Как и раньше, занятия проходят в интерактивном стиле, для первых уроков регистрация не нужна.



Кроме новых уроков, улучшен также интерфейс Codecademy: разработчики прикрутили «блокнот» (Scratch Pad), где можно во время урока экспериментировать с произвольным кодом.

Сделанный за две недели проект Codecademy в августе запустился, в октябре привлёк $2,5 млн венчурного финансирования, количество пользователей недавно превысило 800 тыс.

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

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

Статья для веб-дизайнеров и юзабилистов, перед которыми стоит цель сделать удобное юзабилити форума с древовидной структурой и сложными обсуждениями, угадать и отыскать структуру своих форумов высокого уровня сложности, выполнить форум в доступной технике CSS. Приведён пример такого форума.

Для удобства работы со сложными обсуждениями в теме предлагается несколько реализованных на CSS техник обработки.
1) изображение ветвящихся узлов;
2) режим скрытия всей метаинформации, кроме имени (и бледного аватара с текстом сообщений);
3) режим скрытия всего, кроме бледных аватаров и текста (дзен-режим);
4) режим показа корневой ветви обсуждения с метаинформацией (оценки, ссылки);
5) показ одной ветви с полной метаинформацией (дата, автор, кнопка ответа).

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

Искал я на просторах Интернета всего лишь скрипт для создания индекса изображений с lightbox и генерированием thumbnails. Помимо того что меня полностью устроило (phppi), нашел довольно интересную подборку галерей. В наличии комментарии и пояснения, думаю будет полезно новичкам да и бывалым время сэкономит.

Fullscreen Gallery with Thumbnail Flip

Много воды утекло с тех пор когда я сел за написания своего файлового менеджера. В то время поддержка ИЕ6 считалась обычным делом, а про фичи HTML5 можно было только мечтать. В общем вот ссылка на версию 0.1.0 альфа. В конце первого топика, я написал, что планирую сделать в будущем, можно сказать я сдержал свое обещание и хочу представить Вам версию 1.0b. Из того, что планировалось, была отброшена идея внедрения авторизации в менеджер, потому что, как говорили здесь, это пятое колесо. Рассмотрим, что изменилось и что улучшилось, но для начала скрин

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

Выглядело это примерно так:



html

<div class="large_button"><br>  <span class="buttons submit_v2-button clickable"><br>    <i class="left left2"></i><br>    <i class="body"><br>      <b>В архив</b><br>      <i class="end"><br>        <i></i><br>      </i><br>    </i><br>  </span><br></div>

Видно, что запутаться в таком коде проще простого, тем паче, что вариантов кнопок на проекте накопилось не менее 30. Попытка создать такую кнопку на серверной стороне вызывала негодование у коллег «пехапистов».

Поэтому моей негласной задачей стало максимальное упрощение кода.

Сессии в Codeigniter хороши всем. Правда, очень удобно сделаны, особенно когда вы храните сессии в БД (что я считаю единственно верным). Куки шифрованные, в куках ничего, кроме идентификатора нету. Они привязываются к user_agent и, опционально, к IP. Красиво, безопасно.

Но есть у них очень существенный недостаток: жизнь сессии считается от поля last_activity. Это значит, что если у вас стоит expire сессии в двое суток, то при обращении к сессии, у которой last_activity < time()-172800, она ликвидируется и начинется новая. Следственно, для того что бы пользователям не приходилось каждый раз логиниться на сайт, last_activity нужно поддерживать в акутальном состоянии.
Поле last_activity обновляется в двух случаях: когда вы записываете что-то новое в сессию, либо когда сессия обновляется (по-умолчанию каждые 5 минут, опять же, относительно last_activity; указывается в конфиге). И вот главная проблема в том, что при обновлении сессии меняется session_id и текущая сессия у пользователя сессия прерывается, стартует новая.

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

Проблема «животрепещущая», о ней часто вспоминают на форумах Codeigniter, но толкового решения там нигде я так и не увидел.

Но голь, как известно, на выдумки хитра, поэтому простое решение таки нашлось.

Сегодня я упоминал ужé о трудностях, с которыми сталкивается всякий, кто желает разыскать на сайте Open Font Library шрифты с поддержкою кириллицы. Фильтра по языкам нет; поиск по слову «cyrillic», как dimitrymd успел убедиться, находит только десяток шрифтов.

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

1. ConsolaMono
   
2. Crimson
   
3. Dataface
   
4. Designosaur
   
5. Didact Gothic
   
6. GNUTypewriter
   
7. Grana Padano
   
8. Jura
   
9. Neocyr
   
10. NotCourierSans
    
11. Old Standard
    
12. Pfennig
    
13. Press Start 2P
    
14. Sansus Webissimo
    
15. Triod Postnaja
    
16. VDS

«На закуску» я намерен также обозреть полдюжины шрифтов с различными спецсимволами да орнаментами:

1. Chess
   
2. FivefoldOrnamentsEtc
   
3. Futhark Adapted
   
4. Knots
   
5. UniCons
   
6. Web Symbols

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

Далее буду описывать, как я «апгрейдил» CodeIgniter, чтобы использовать этот каркас для разных проектов, т.к. базовый его функционал и примеры из документации, мягко говоря, очень простые, а в жизни всё гораздо сложнее. Итак, начнем-с.

Однажды мне потребовался WYSIWYG редактор, я помнил как он выглядит, его функции, но не помнил названия. Через 45 минут я все же его нашел… Тогда я поставил перед собой задачу помочь многим, в том числе и себе: сделать сводный список всех чуть более известных WYSIWYG редакторов.

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

Интегрировать отдельно взятый интернет-магазин с учетной системой предприятия в целом несложно. Реализовать готовую интеграцию в коробочной поставке CMS-системы и сделать ее простой и понятной для массового использования, универсальной для различных задач — непростая и интересная задача. Данный топик — о нашем опыте разработки интеграции интернет-магазина с популярной учетной системой 1С: Предприятие.



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

Вступление

В ходе реализации текущего проекта мне понабилось выпадающее дерево. Так как я уже пользовался jQuery плагином TreeView, и его функционал меня устраивает, было принято решение cделать выпадающее дерево на его основе. В результате родился плагин DropDownTreeView которым я хочу поделится.

Функционал

Плагин позволяет создавать выпадающие деревья с AJAX загрузкой (пример). При создании дерева к объекту обертки добавляется кнопка открытия дерева, и подгружается дерево. Дерево можно подгружать как целиком так и частями (актуально для больших деревьев). HTTP запросы могут выполнятся POST и GET методами. Параметры HTTP запроса определяются пользователем. Дерево строится посредством jQuery.Treeview. Дерево сворачивается при выборе пункта и клике вне зоны дерева.

Часто приходится «насыщать» интерфейсы с помощью JavaScript. В основном работаю через jQuery, всё нравится, но одна беда – валидация. Постоянно приходится изобретать «велосипед», искать в сети обрывки кода; а ведь хочется написать пару строчек без углубления в детали. Радость не заставила себя ждать: нашёл библиотеку Valid8 (произносится как validate), и, наконец, решил проблему написания кода валидации.

Как пользоваться

Пользоваться библиотекой оказалось очень просто, чего не скажешь о склеивании jQuery «обрезков» из интернета. Чтобы подключить библиотеку, нужно зайти сюда и нажать заветный Download. Скачается архив, в котором особый интерес представляет файл jquery.valid8.js, его копируем в папку с js файлам нашего проекта и подключаем библиотеку в html:

<script src="/js/jquery-1.6.3.js" type="text/javascript" charset="utf-8"></script>
<script src="/js/jquery.valid8.js" type="text/javascript" charset="utf-8"></script>

Допустим у нас есть форма:

<form><ul>
<li><input type="text" id="inputSome" /></li>
</ul></form>

Добавляем валидацию (по умолчанию только проверка обязательности заполения), передавая в качестве параметра строку с сообщением об ошибке. Работаем в стиле jQuery:

$('#inputSome').valid8("Заполни это поле!");

После того как поле получит фокус и вы из него выйдете не заполнив, объемлющий тег (в нашем случае li) получит класс стиля error.
Для визуализации ошибок добавим CSS в head нашего документа:

<style>
.error input { background:pink; }
</style>

Валидация готова. Все.

CSS3 PIE Beta 5

PIE делает Internet Explorer 6-9 способным отображать несколько наиболее полезных css3-свойств.

Новое:
— Поддержка линейных градиентов в ИЕ9. Используется svg, поэтому стало возможным использовать rgba в градиентах. Также можно использовать в сочетании с градиентами background-size/position/repeat;
— Поддержка border-image в ИЕ9 (используется svg), а также улучшенная поддержка этого свойства в старых ИЕ — теперь корректно скрывается настоящая граница, и border-width будет работать, если не задан border-style;
— Исправлена ошибка при указании непиксельных значений элементу, в результате чего он не мог иметь дочерние элементы;
— The background-origin и -clip корретно парсятся внутри -pie-background styles;
— Теперь padding у img-элементов рендерится корректно;
— Изменения стиля при срабатывании псевдо-классов :focus и :active теперь правильно обнаруживаются;
— Теперь можно использовать 'transparent' как цвет;
— В ИЕ с отключенным VML-движком не появятся ошибки, и будут использоваться не-ксс3-стили;
— Исправлены другие ошибки.

Привет Хаброобществу.

Однажды мне на глаза попалась статья с хабра ссылка. Попробовав ту систему, пришел к выводу, что у нее много недостатков, да и перевод оригинальной статьи присутствовал не полностью. Да, статья старючая, но в то же время хотелось написать свой небольшой фреймворк для создания простых и средних по сложности сайтов. Так как тащить с собой 2-3 мегабайта какого-либо серьезного фреймворка для создания сайта-визитки считаю кощунством (хоть и не всегда).

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

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

Осторожно, butthurt.

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

Самым простым вариантом отобразить древовидную структуру в HTML являются списки. Но нас интересуют деревья, обладающие динамическими свойствами. Без javascript тут не обойтись. Так как решение нужно обычно быстро, то использование jQuery позволяет создавать динамические деревья, экономя прилично времени на кодинге. Чтобы сэкономить себе еще кучу времени идем на поисковик и ищем подходящее решение. В целом часто на этом дело создание дерева на сайте и ограничивается, но бывают ситуации, когда дерево подходит, но не имеет какой-то маленькой фишки и тут уже ни чего не остается, кроме как модифицировать имеющиеся дерево.

Каждый сайт должен иметь favicon. Если вы до сих пор не сделали значок для вашего сайта — сделайте, теперь это еще проще!
Faviconist — новый favicon генератор от Michael Mahemoff.

Вам больше не нужен Photoshop для создания простого значка. Как Mahemoff пишет в своем блоге: Faviconist для 95% людей, которых устроит микро-дизайн их иконки, остальным все равно придется прибегнуть к Photoshop.

Вступление

Привет хабровчане,

Вашему вниманию хотел бы предоставить небольшую, но полезную функцию которая:

• Сделает работу верстальщика немного проще и чище
• Упростит выборку элементов на странице через популярные платформы, аля jQuery

Смысл функции в том, что бы вместе с загрузкой страницы/после неё определить важные параметры клиента, такие как:
Браузер, версия браузера, О.С, движек браузера и.т.п
И разместить их в html тэг вашей страницы.

Дальше — больше. Читаем?

Ранее в этом году WHATWG выпустили издание для веб-разработчиков из спецификации HTML5. Теперь, чтобы не отстать, HTML Working Group W3C опубликовали проект с более читабельной спецификацией HTML5: Edition for Web Authors
W3C версия написана более технически, чем версия WHATWG, но по крайней мере вы можете прочитать HTML5 спецификацию без заметок о соответствии критериям браузеров.