Обучение. JavaScript.

2. JavaScript. Синтаксис языка, понимание DOM модели, понимание того для чего и как работают джс фреймворки (к примеру прототайпджс, джквери). Способность писать многофункциональные клиентские приложения, виджеты.

На сверстанной страничке из первой части (там такое задание) есть диаложек (его тоже верстают). Потом я даю задание подключить диложек с помощью джаваскрипта. Говорю использовать библиотеку prototype.js и на ее основе строить классы.
Еще настоятельно рекоммендую книги:

Далее приведу список наиболее частых ошибок при написании джаваскрипт кода.

  • Множество классов в одном файле. Примите за правило - в одном файле один класс. Потом все джаваскрипты сжимаются в один файл, и компрессятся.
  • Хаотичное использование в каждом методе document.getElementById (в прототайпе $ или $$, что еще хуже). Надо по возможности записать ссылки на дом элементы на поля класса в инициализации один раз и потом уже использовать.
  • Отсутствие понимания, что такое контекст. И зачем в прототайпе bind и bindAsEventListener
  • Много глобальных переменных
  • Тянучка связей между классами, все классы знают про всех остальных. Дом элементы модифицируются и тоже хранят ссылки на другие обьекты. Надо же делать связи на основе событий.
  • Обьект создается прямо в джаваскрипт файле (еще лучше ситуация когда там код window.onload = function(){ new MyClass()}). Подключая этот джс на страницу получаешь кота в мешке -речи о том что потом можно будет сбилдить все джсы в один файл уже не идет.

Пока все, буду дописывать постепенно.

Возможно перед джваскриптом стоит давать ооп и рефакторинг - все что касается умения писать красивый код.

Джанго

Нравится

  1. Наследование темплейтов
  2. Middlewarе и template processors
  3. forms
  4. orm

Не нравится

  1. Стандартная админка. Лучше писать свою - дешевле.
  2. Юнит тестинг. Слишком много манипуляций надо сделать, чтоб нормально начать писать тесты. Тестирование вьюзов сложновато. Питоновская либа pymock, после работы с дотнетовскими моками выглядит ущербной.
  3. Скудный язык темплейтов (можно спорить)

Обучение. Верстка.

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

Первый пункт из моей программы

1. HTML, CSS. Разработчик должен без проблем уметь верстать, быть в курсе большого числа аспектов (семантическая верстка, спрайты, кроссбраузерность, фаербаг итд).
1.1. Понимание основ типографики, юзабилити, дизайна (ководства для начала хватит)

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

1. Не видят расстояний, размеров шрифтов, цветов. Детали, которые для тренированного глаза сразу видны.
Бороться с этим очень легко. Ставим Фаербаг, PixelPerfect и плагин линейка

2. Семантичность. Для списков надо использовать тег <ul><li>. Для заголовков тег h. Для позиционирования элементов не использовать тег br. Для надписи над инпутом использовать тег label.
Короче говоря, надо знать для чего какой тег использовать.

3. Селекторы делаем class, а не по id. Возможно тут и поспорить. Но такое решение гораздо более масштабируемо.

4. Забывают посмотреть в ИЕ или ФФ.

5. CSS инлайн, а надо в отдельном файле.

6. Не знают ничего о свойствах margin и padding, которые управляют расстояними между элементами.

7. Используют в цсс свойства, о назначении которых не знают.

То, что может помочь.

Linq to SQL и DDD

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

Замечательная книга Джимми Нильсена Applying Domain-Driven Design and Patterns: With Examples in C# and .NET хороший материал о разработке комплексных проектов через тестирование. Книга была написана еще до выхода технологии LINQ. Майкрософт сделал многое для того, чтоб ORM стал простым в .NET разработке.

Некоторые принципы DDD: Обьекты – POCO – они не знают про ORM, являясь наследниками Object. Репозитории – классы отвечающие за извлечение и сохранение обьектов. Архитектура, базируется на модели.

В блоге Скота Гу, много материала по LINQ, но там ни слова про DDD.

Класс DataContext, идущий рядом с паттерном UnitOfWork, имеет серьезный недостаток – не реализует интерфейса. Что сильно затрудняет юнит тестинг (нельзя подделать реализацию с помощью Mock objects) Здорово, что проблема уже решена: Using Mock Objects When Testing LINQ Code - вполне рабочее решение, но мне ближе другая реализация. Trying Out Persistence Ignorance with LINQ - эту реализацию я и взял за основу решения, использованного в моем проекте.

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

Сама реализация кратко ниже:

Настоящий источник данных делегирует все родному классу DataContext.

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

Поддельная реализация IDataSource весьма проста – она все делегирует классу List

С помощью этого всего кода была создана инфраструктура для комфортной разработки через тестирование.

Пример

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

Класс страны Простой класс, практически POCO. Практически, потому что связь описывается при помощи коллекции EntitySet. Линк использует этот класс для автоматической загрузки графа обьектов.

Так выглядит ссылка в классе User на класс страны. Так в хмл

Сохраняемые в БД классы я храню в одном проекте с ифраструктурой сохраняемости. Иначе у меня не получалось корректно инициализировать UnitOfWork. Далее все как по книге Нильсена.

Репозитории

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

Так выглядит NUnit тест

Visual Studio 2008, Web application - добавление существующих папок в проект

Кратко: поможет драг энд дроп.

Веб аппликейшн - это такой тип приложения когда сайт билдится в одну дллку. Описание структуры сайта хранится в файле проекта.

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

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

Решение задачи простейшее - из файловой системы тянем в студию драг энд дропом папку с tinyMCE и студия добавляет все автоматом.

Азбука хорошего разработчика. Книжки для чтения

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

Паттерны проектирования
Википедия - там, в принципе, на хорошем уровне все описано и приведены примеры на разных языках.
Базовая книга – классика:
«Приемы объектно-ориентированного проектирования. Паттерны проектирования» - читал книгу давно, и раза 3. Вам того же советую. Даст возможность понимать большое количество терминов, произносимых другими разработчиками.

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

Наверное, классикой в этой области ТДД считается книга -
«Экстремальное программирование: разработка через тестирование» - просто и доступно. Даст базу, но не научит писать юнит тесты.

Для углубления познаний в юнит тестинге советую прочитать толстый каталог хЮнит паттернов:
xUnit Test Patterns: Refactoring Test Code
- ссылку на курсы английского языка я не буду приводить, так как предполагаю, что программист должен уметь читать англоязычные книги. Книга ответила на все мои вопросы, возникающие в процессе многочисленных попыток писать хорошие тесты.

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

Углубляемся
«Архитектура корпоративных программных приложений» - еще одна буква в азбуке разработчика. Описывает подходы, составляющие, паттерны. Необходима для понимания еще кучи непонятных терминов.

Если в предыдущей книге фундаментальные понятия. То в книге « Применение DDD и шаблонов проектирования. Проблемно-ориентированное проектирование приложений с примерами на C# и .NET » можно понять, как их применить. Перевод - отвратительный, так что, возможно, многие её предпочтут читать на английском языке. А, еще эта книга дала мне понимание наконец-то, что такое «Внесение зависимостей» (Dependency injection).

Полученные знания, из книг указанных выше, дадут результат, если научиться использовать их постоянно. В книге - Continuous Integration: Improving Software Quality and Reducing Risk рассказывается, что нужно для этого сделать.

Что дальше
Я прочитал книги упомянутые выше. Дальше я планирую прочесть
Implementation Patterns - вроде как основы, разложенные по полочкам в результате труда Кента Бека.

Книга, которую я сейчас читаю
Beyond Software Architecture: Creating and Sustaining Winning Solutions

Также жду выхода
Aspect Oriented Refactoring - даже само название уже звучит интересно.

Refactoring HTML: Improving the Design of Existing Web Application - по аннотации очень интересно (мне как веб-разработчику, по крайней мере).

Знатоки скажут, что я хитер – перечислил книги из серии Мартина Фаулера и сделал пост. В принципе, вы правы, всю статью можно было написать одним предложением:
Прочитайте все книги из The Addison-Wesley Signature Series и будет вам счастье.

Теги в коде

Может быть все юзают уже давно. У меня в фирме, никто.

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

После релиза такие места можно найти, если их затегировать. Т.е. поставить там метки, примеры:

//@hack

//@refactor

//@todo

Просто и удобно.

UA WEB 2008 – впечатления

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

День 1

Первый доклад Макса Ищенко про зарплаты. Человек с чувством юмора. Из его графиков зарплат понял, что новичкам в 2007 году платили 600-700 баксов, просто программерам 1200.

Класматес (соц сети). Вода по большей мере. Разве что, надо отметить, что парень рассказывал без дрожания в голосе и то, что он таки продает себя.

Особенности трансляции СМИ в интернете (Владимир Михалко) – интересно. Докладчик явно в струе, рассказывал хорошо.

Кофе-брейк. Различные ништяки на столе. Встреча знакомых.

SaaS. Пиар системы 1-С Битрикс – дань спонсорам.

Виталий Харисов – верстка независимыми блоками. Интересный доклад от разработчика яндекс.

Психофизик – вода. Вспомнил институт, вспомнил препода, читающего с листика.

Комфортная разработка сайтов на XSL – было не очень комфортно. Докладчица сильно нервничала, казалось, что плачет. Решил пойти в другой зал, в более спокойную атмосферу.

nginx. Игорь Сысоев понравился - крутой мужик.

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

Запрос - ответ? Это не наш метод! (Александр Костюченко). Расказывал про технологию Комет. Интересно, систематизировал немного скудную инфу по этой теме. Мне даже захотелось сослаться на опен соурсный крос ленгвидж комет-сервер.

Первый день относительно интересный. Организация все же на хорошем уровне.

День 2

Егор Егоров. Сразу же начал уважать его за профессиональный уровень. Интересно и актуально.

Latest Guidelines for Web Usability (Юля Климентовская). Познавательно, но в принципе, можно просто «Ководство» почитать.

Многоязычные сайты (Андрей Шитов). Бывший работник студии Лебедева. Человек с чувством юмора. Интересно, и даже, как-то ощущается в нем дух студии. Мне понравилось.

Подходы гибкого управления требованиями в бизнес-ориентированных проектах. (Алексей Кривицкий). Интересно. Здорово, что в Украине есть люди, использующие на практике Agile методики.

Бизнес процессы в веб-разработке (Владислав Флакс). По делу, хорошо рассказано.

Рейтинг Bigmir.net, архитектура, перспективы (Дмитрий Маркелов). Из доклада в основном запомнилось слово «Ну» и пронизывающий флегматизм.

Новые требования к интернет проектам в свете изменений на мировых финансовых рынках (Денис Довгополый). Интересно, и сразу же за ним выступал Юрий Бойко.

Привлечение капитала в Start-Up (Юрий Бойко) – интереснейший доклад и докладчик. После выступления, докладчика обступила группа людей и задавала ему вопросы. Я был в этой группе, поэтому попал только на кусочек Силверлайта.

Доклад по силверлайту – дань спонсорам.

Второй день оказался гораздо более вкусным. Спасибо организаторам.

Шаблоны интеграции корпоративных приложений

Бывают такие книги, которые толстые, и непонятно о чем. Пол года эта книга пылилась у меня на книжной полке.

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

Про выбор языка программирования

На своем веку мне довелось поработать серьзно с джаваскрпитом, C#, ПХП (не очень много, но в серьезном проекте).  Еще прочитал пару книг  по Руби.

Сравнивая ощущение скажу что  C# на сегодня для меня номер один в сервер сайде. Просто диву даешся сколько ошибок устраняется только на стадии компиляции.

Я говорю о строгой типизации - для меня лишь одного этого фактора достаточно.

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

Оптимизация JavaScript - делаем билд процесс

В моем проекте очень много классов взаимодействуют на клиентской части. Каждый класс лежит в отдельном файле для удобства разработки. Хорошей практикой для увеличения скорости загрузки страницы, является уменьшение количества запросов к серверу. Поэтому чем меньше файлов ирисунков включать в страницу тем быстрее она загрузится. В случае с рисунками – СSS спрайты помогут уменьшить количество запросов. А в случае с js и css файлами – это конкатенация файлов и сжатие. Об этом и поговорим.

Очень удобный инструмент с открытым исходным кодом js-builder

js-builder

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

В моем проекте я использую библиотеку prototype.js. Билдер при сжатии прототайпа выдает эксепшн. Поэтому я скачал исходники и перебилдил так чтоб билдер занимался только конкатенацией без сжатия. Я перебилденную длл, можно скачать тут

Билдер также содержит консольное приложение. А это то что нужно для билда.

Далее необходимо сделать компрессию файлов которые сгенерирует билдер.

Для этой цели я использовал YUI Compressor. Отличная библиотека с высокой степенью сжатия.

Осталось только как то автоматизировать процесс сборки. Для этого я написал batch файл (я в виндовс работаю). Выглядит он (build.bat) примерно так

В моем случае джс билдер на выходе дает 2 файла - css и js, а компрессор и сжимает. Надеюсь это поможет вам создать удобный процесс сборки файлов.

English version

Template из Prototype.js на C# 3.0

Видели ли вы когда либо такой синтаксис в джаваскрипте:

Думаю, те кто знаком с библиотекой Prototype.js , определенно да. Этот функционал реализован в классе Template, у которого есть всего один метод, evaluate. Он делает замену в текстовом шаблоне, используя поступающий на вход обьект с данными.

А теперь более вскусная часть. А как думаете, можно ли такое сделать в C# 3.0? Конечно да. Для начала пишем тест.

Потом немного рефлекшна и у нас готов настоящий прототайповский Template на C# 3.0.

Пользуйтесь наздоровье :)

In English

Впечатления от ASP.NET MVC

Порадовала наконецто созданная упорядоченность. Но все же текущая версия сыровата пока что.

Например System.Web.Extensions.dll версии номер 3.6.0.0 не референсица просто так через стандартный диалог.

МВЦ порадовала своим набором Хелперов для рендеринга штмл. Тут можно скачать привью .

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

У Скота Гу есть набор статей.

SOA - что это такое?

Очень смахивает на маркетинговый ход.

Табличная типографика в вебе (baseline grid)

Вчера прочитал книгу под названием
CSS. Рецепты программирования

Интересная книга, некторые пробелы закрыл. В частности, интересно было узнать о правильном задавании размера шрифта. Прочитал про так называемую 62.5 технику, сильно распространенную среди верстальщиков.
Сегодня увидел интересную статью на лист апарте “Как задавать размер текста в цсс“. Автор в нескольких итерациях показал одинаково хороший метод задания размеров шрифта для всех браузеров.

<style type="text/css">

body{ font-size:100%; line-height:1.125em; }
bodytext p { font-size:0.875em; }
.sidenote { font-size:0.75em; }
</style>
<!--[if !IE]>-->
<style type="text/css">
body { font-size:16px; }
</style>
<!--<[endif]-->

В той же статье паралельно множество ссылок промелькнуло. Меня затянуло в навигацию по ним.

Можно выделить в заголовок то что я нашел далее.

Табличная типографика

Сейчас довольно таки популярная техника в сети. Setting Type on the Web to a Baseline Grid автор показал как можно сверстать страницу в табличном виде. Вот что получилось.

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

А еще нашел целую подборку статей на эту тему, из пяти частей: Раз, два, три, четыре, пять.

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

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

Урл реврайтинг в .NET

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

Пример:
http://www.ajaxline.com/common-ajax
http://www.ajaxline.com/index.php?pid=12&something=24

Понятное дело что первый урл значительно красивее. И запомнить легче, и для поисковых роботов интереснее.
Обзора всех вариантов я делать не буду. Скажу только о своем опыте использования двух инструментов.
Использовал на Windows server 2003 и IIS6.

ISAPI Filter

http://cheeso.members.winisp.net/IIRF.aspx
Тулза, которая позволяет использовать синтаксис апачевского мод реврайта.
Тут исходники и бинарики http://www.codeplex.com/IIRF/Release/ProjectReleases.aspx?ReleaseId=5018
Для установки требуется лишь добавить исапи фильтр в виртуаильную директорию и редактировать ини файл. Работает на ура. Не только для .нет можно использовать.

urlrewriter.net

Еще более удобен. Правила в прописываются в вебконфиге. На сайте http://urlrewriter.net/ есть детальные инструкции как установить на любой версии виндовс.
Даже для IIS6, который не поддерживает маску .* для обработки запросов там есть решение.

English version of article. 

Блог Хеша

Хеш открыл себе блог www [at] naikonsoft [dot] com - начал стахановскими темпами писать статьи.
В таком же духе и продолжай )

Как поднять IE6 в Висте

  1. Скачиваем:

    Virtual PC 2007 – программа, которая позволяет запустить еще одну ОС.

    Образ Windows XP SP2 – там уже установлен ИЕ6 и девтулбар.

  2. Инсталлируем Virtual PC, и с помощью мастера выбираем файл образа Windows XP SP2.Осталось только создать сетевое подключение. Это самая сложная часть.

    Есть статья, посвященная всецело настройке сети виртуал пс.Однако, я расскажу как у меня получилось.

    В настройках сети Windows XP поставил тоже самое что и в хостовой ос (виста) за исключением айпи адреса. Виртуальная машина имеет свой айпишник. И может заходить на любую машину сети.

  3. Далее заходим в IE -> Internet options -> Connections -> LAN settings
    И убираем галочку с Use a proxy server for your LAN (These settings will not apply to dial-up or VPN connections).

    Все, после этого интернет должен работать.

English version of article

Разработка фото галереи - джаваскриптовое дерево

Я начинаю серию статей, в которых последовательно опишу процесс создания фотогалереи. Эту галерею я написал для одного из проектов.

Задача

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

Начало разработки

В самом начале я получил, штмл верстку галереи. Не идеально, но концепция понятна. шаблон За прототип дерева было взято цсс дерево из техногрета Артемия Лебедева. . Недостатоки того дерева: поддерживает только один уровень вложенности, в ИЕ плохо выглядит. Уже вырисовывается первая задача.

Создание дерева

Я подумываю об использовании дерева из библиотеки ext.js. Но решаю не внедрять библиотеку в этот проект. В проекте использую только prototype.js library.

Задача: Создать дерево с неограниченной вложенностью. Должно позволять добавлять, удалять и редактировать узлы.

Задача ясна. Первое что решаю сделать, добавить в дерево поддержку ИЕ и научить неограниченной вложенности. Делаю это, используя просто штмл и цсс. До динамики еще время дойдет. В итоге получаю такой вид дерева. Из рисунка видно что начальный вариант несколько изменился. дерево Штмл такого вида:

Вырисовывается задача с помощью джаваскрипта создать тоже самое.

На вход нужно давать данные. Выбор формата очевиден.

JSON, лучше в JS нет!

Ручками создаем данные. С помощью этих данных будет отображено дерево категорий.

Итак, можно заняться наконец рендерингом дерева.

Рендеринг дерева

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

В объектной структуре особо нечего выдумывать, классы те же что и везде (класс дерева и класс узла):

Tree – содержит в себе ноды, рисует дерево итд.

TreeNode – реализация логики узла.

Из полезного, метод удаления выбраного нода (deleteSelectedNode), добавление нода (appendNode), добавление нода в дети текущего узла (appendNodeToSelected).

Код нода не показываю тут, так как его много. В ноде реализованы методы редактирующие его отображение и данные.

А также код удаления:

В завершении

Задача выполнена, дерево отображается в ИЕ и ФФ; позволяет добавлять удалять и редактировать ноды; содержит удобное АПИ для работы.

Пример посмотреть можно здесь.

Скачать пример здесь.

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

English verison of article