25 января 2012.  Феерические глупости

Сегодня, мой друг и коллега Cavin прислал мне ссылку на статью с хабра — «Браузеры запутались в блочной модели для таблиц». Я считаю, что эта статья в полной степени показывает мои мысли о том, что в россии специалистов любого профиля очень мало.

16 комментариев

18 января 2012.  Убираем баннеры с википедии

Свободе слова настала SOPA. Примерно на это как бэ намекает нам википедия:

18 января (UTC-5) на 24 часа в знак забастовки отключена Википедия на английском языке. День выбран в связи с заседанием Конгресса, на котором должен обсуждаться законопроект SOPA. Сообщество Википедии на русском языке поддерживает коллег и призывает всех тех, кто видит этот текст, помочь в противодействии принятию закона.

Я считаю что если кто-то делает сплеш баннер который блокирует частично или полностью содержимое сайта - он должен быть наказан. Вне зависимости от законопроектов. Т.е. если бы все страницы с википедии - стали бы пересылаться на сайт конгресса США (задосив его тем самым), то это было бы правильно, я считаю. Ну, подумаешь день сайт не работает.

Но использование сплеш скрина который закрывает сайт после загрузки сайта - это моветон и чёрное seo. Я решила бороться с этим через следующие правила фильтрации AdBlock:

|http://en.wikipedia.org/w/index.php?title=Special:BannerController*
|http://ru.wikipedia.org/w/index.php?title=%D0%A1%D0%BB%D1%83%D0%B6%D0%B5%D0%B1%D0%BD%D0%B0%D1%8F:BannerController*

 Расширение Adblock, если кто не в курсе служит для блокировки рекламы в Firefox и Chrome. Данные фильтры - возвращают доступ к английской википедии. Ну и заодно убирают грустные лица создателей с российской версии.

Я считаю что когда википедия ограничивает мой доступ к статьям про Римский календарь, Делитель нуля, Процедурное программирование, Разделение ответственности, Дамаст, ECMAScript, Объекты первого класса, Boot to Gecko, Божественный объект, Прокрастинацию, Songket, Эритрею, Напалм, SATA и сериал Рим, тогда это хуже чем любая SOPA!

С прошедшими праздниками вас!

31 декабря 2011.  С новым годом!

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

С праздником!

30 декабря 2011.  Объекты, объекты-объекты; объекты? Объекты!

Зомби зомби зомби. © Народная мудрость

Developers! Developers! Developers! Developers! © Stiven Ballmer

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

Что такое объект?

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

Объект — Сущность в адресном пространстве вычислительной системы, появляющаяся при создании экземпляра класса или копирования прототипа (например, после запуска результатов компиляции и связывания исходного кода на выполнение).
Википедия

Заметьте, в довольно простое определения навязали адресное пространство, компиляцию, классы и прототипы. Это всё равно что спросить что такое птица, а в ответ получить что это сущность употребимая в пищу и вылупляющаяся из яиц!

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

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

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

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

Объект в программировании, это такая штука, которая не всегда может иметь визуальное представление, типа кнопки или поля. Скорее наоборот.
Представь себе массив — упорядоченный набор переменных. Каждая переменная в обычном массиве может содержать строку, число, (любую типизированную переменную) или другой массив. Поэтому моё определение звучит так:

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

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

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

The programming construct that combines data with a set of methods for accessing and managing those data is called an object. © en.wikipedia.org

Т. е. данные, и набор функций (методов) для работы с этими данными называются объектом.

Такой вариант так же допустим для запоминания. А теперь мне хочется рассказать почему яваскрипт это целиком объектно-ориентированный язык, и какие сложности в обучении ему возникают.

Объекты в Javascript

Теперь внимание, дальше вы можете запутаться!

В яваскриптах — почти всё является объектами, но не всё называется объектами. Число — или строковая переменная (или сущность) — не называются сами по себе объектами! Но по факту — являются ими.

Например у числа или строки могут быть встроенные функции. Т. е. функция.split например — аналог строковой функции explode в php и т. п.

var a = 'te.st';
var b = a.split('.'); // в b - будет массив из значений te и st

Чтобы понять сказанное выше утверждение, приведу такой аналог: «насекомые и птицы — не называются животными, хотя по факту являются ими». Т. е. вы видите на улице собаку или слона и говорите «О, какое животное». А когда видите птицу, говорите «какая птица», хотя из биологии это тоже царство животных. А собаки или слоны относятся к млекопитающим. Так и тут, когда вы видишь число или строку — нет нужды говорить «о, какой объект». Лучше сказать какая строка или какое число. А вот когда вы видите, например, документ html — document, или его тело — document.body — тут уж можно сказать «какой объект», просто потому что он уже и не число и не строка.

Далее, небольшая тонкость касающаяся массивов. В яваскриптах есть названия для классов объектов — строка, число, массив и, внимание(!), Объект. Так и приходится писать объект объект.

новый массив можно создать например как:
a = new Array(); или в сокращённой нотации a = [];
новый Объект (буду писать с большой буквы), можно создать так:
a = new Object(); или в сокращённой нотации a = {};

в объект массива — [] — мы можем записывать только числовые, строковые и булевы переменные. Ну и другие массивы тоже. В объект Объекта — мы можем записывать то же самое + функции. Пример:

var a = {1,2,3, 'my_func': function(){ do_something; } };

Обращу внимание, что функция будет доступна как элемент массива: a['my_func'](); и как метод объекта a.my_func(); — в принципе равнозначно, как кому нравится.

Теперь внимание — массив, может содержать индексы элементов, т. е. на какой позиции какая переменная находится. В яваскриптах массив может содержать только ЧИСЛОВЫЕ индексы. В то время как объект — может содержать любые индексы переменных.

Индексы в записи Объекта пишут так index:value, однако это не подходит для записи массива (спасибо SelenIT в комментариях), поэтому запись

a= [1:'something', 2:'something']; — НЕ верна
a= ['first':'something', 2:'something']; — НЕ верна
a= {'first':'something', 2:'something'}; — верна

Но можно создать такой объект

var a = {'вася':'Пупкин'};

и обращаться к нему как к массиву

alert(a['вася']));

Подробнее об этом написано в моей статье «Javascript — работа с массивами и объектами» (09.2009).

Теперь я расскажу о функциях. Функции — так же как и строки, и числа, и Объекты, являются в какой-то степени объектами. Они, согласно моему определению «объект — это данные + функции» — могут содержать набор данных, и (!) функций.
Отличия от строк — и т. п. — в том что чтобы вызвать внутреннюю функцию функции, или же переменную объявленную внутри функции необходимо вызвать саму функцию, объявляются внутри с помощью кодового слова this. Вся эта конструкция выглядит так:

function test(){
         // do_something;
         this.x = 5;
}
тогда a = test().x; // равно 5

функция при этом выполняется, и может что-то делать:

<script>
function test(){
         // do_something;
        alert('test');
         this.x = 5;
}
a = test().x;

</script>

присвоит переменной число 5 — и покажет alert().

Ссылки на объекты

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

Когда происходит присвоение переменной строки, числа или логической переменной, это создаёт копию этого значения. В то время как присваивание переменной массива или объекта создаёт ссылку на это значение. Это вызывает путаницу, т. к. оказывается что изменение одной копии массива изменяет и вторую когда не надо, и наоборот когда надо присваивание свойства элемента переменной не изменит его с изменением этого свойства.

Пример:

a=document.title; // Присваиваем переменной a - значение заголовка документа 
 a='test'; // присваиваем переменной другое значение, заголовок документа не меняется 
a=document; // присваиваем переменной значение документа 
 a.title='test'; // присваиваем заголовку значение - меняется заголовок окна.

Об этом, и о том как копировать объекты и массивы, так же написано в моей прошлой статье «Javascript — работа с массивами и объектами».

P.S. Так же очень хочу сказать что Джон Ресиг (создатель jquery если кто не в курсе), недавно выступил с отличной и правильной идеей преподавания javascript в качестве первого языка программирования. Пожалуйста прочитайте его статью: Яваскрипт как первый язык программирования.В ней он так же затрагивает некоторые вопросы методологии, и как и я подчёркивает то, что в яваскриптах всё, включая функции является объектами. Цитирую:

Function Declarations

Perhaps the most interesting change that we can make is a rather subtle one, but it's eschewing normal function declarations for creating anonymous functions and assigning them to a variable.

// Don't do this:
function getData() { }
// Do this instead:
var getData = function() { };

There are a number of good habits that are instilled when you use this particular technique.

Makes it easier to understand "functions as an object". I've found that when you show new developers a function being assigned to a variable it suddenly becomes much more obvious that a function is actually an object and can be manipulated as such (and that a function can be passed as an argument to another function). Thus students are advanced along the path towards a better understanding of functional programming.

С удовольствием выслушаю ваши замечания по теме.

29 декабря 2011.  Родительский селектор в CSS 4

Некий царь призвал трёх мудрецов и попросил объяснить следующий факт:
«почему, если в кувшин, доверху наполненный водой, опустить рыбу, вода не выливается».
Двое мудрецов представили подробнейшее обоснование. Третий опустил в кувшин рыбу. И вода вылилась.

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

Сегодня я зашла таки, на рекламированный Вадимом Макеевым портал Web-Standards.ru. И, на удивление обнаружила там перевод заметки «Why we don’t have a parent selector» Джонатана Снука, написанная, что символично, 10 октября прошлого года (10.10.10). Собственно вот ссылка на сам перевод — «Почему у нас нет селектора по родителю» 20.09.11.

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

Собственно я бы не стала об этом писать если бы не прочитала ещё в сентябре черновик селекторов четвёртого уровня. Т. е. то, что мы будем называть CSS4.
Ссылка: http://www.w3.org/TR/2011/WD-selectors4-20110929/#overview
В самом низу указан родительский селектор: $E > F , который выбирает элемент E, родитель элемента F.

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

Заключение

Безусловно, в тех проектах, в которых важна скорость работы в браузере — нет места подобным селекторам. Пример: проект, который я сейчас разрабатываю, расчитан на использования только в современных браузерах полностью исключая IE6-8, и возможно IE9 из-за их низкой скорости работы с dom; и тем не менее, в оформлении используются только селекторы id и класса; в яваскриптовом коде большинство селекторов заменены с jquery на нативные и т. п.

Т. е. каждый разработчик обязан представлять себе где и сколько времени отнимает выполнение его кода (css, js, html). Но при этом инструменты для того чтобы сделать «быстро и сразу» должны быть. Например на главной странице моего блога, менее 400 элементов в DOM, использование тормозящего селектора в данном случае вообще не будет заметно.

Спасибо что читаете мой блог! =)

14 сентября 2011.  Биты, байты, кодировки

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

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

• в байте 1024 бита
• в байте 8 бит потому что 8 — степень двойки
• бит принимает всякие разные значения от 0 до 1

В числе прочих забавных случаев: для выбора десяти случайных чисел из бд, соискатели десять раз делают запрос; для открытия файла на чтение используют в PHP флаг 'a+'; не умеют работать со строками, кодировками и указателями. Написать функцию, которая возвращает строку задом намерёд, не используя переменную-буфер — вообще непосильная задача.

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

9 комментариев

13 сентября 2011.  С днём программиста

Собственно сабж. Поздравляю всех коллег с Днём программиста! Желаю чтоб код запускался без отладки, точки с запятой ставились сами, и лишние кавычки не попадали в БД. =)

Всем JS-программистам и верстальщикам отдельно желаю чтоб заказчики не пользовались IE.

16 июля 2011.  На комментарии теперь можно подписаться

За эти выходные движок моего бложика приобрёл одну важную функцию, для меня и для вас, дорогие читатели — теперь мои ответы на ваши комментарии будут отправляться вам на почту. До этого блог не имел автоматического уведомления, когда я отвечала на чей-нибудь комментарий, в некоторых случаях я делала такую рассылку в ручную. Сейчас есть галочка « Сообщать мне о новых комментариях на e-mail», рассылка работает в пределах той новости на которую вы отвечаете.

Текущая реализация, сейчас удовлетворяет главную задачу — автоматически сообщать вам, когда я отвечу на ваши комментарии. Однако имеется и ряд недостатков:

• Подписаться на рассылку комментариев можно только оставляя комментарий.
• Соответственно, подписаться можно только авторизуясь на сайте.
• Нет ссылки отписаться от рассылки, в тексте уведомления.
• Нет ссылки отписаться от рассылки на самом сайте.
• Нет списка новостей на комментарии к которым вы подписаны.

Прошу читателей блога помочь мне найти ещё недостатки текущей реализации и придумать что-нибудь полезное, связанное с комментированием новостей. На каких сайтах вам понравилась форма комментариев? Вы подписываетесь на комментарии к какой-то новости?

Спасибо.

12 июля 2011.  Основные ошибки проектирования процесса авторизации

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

3 комментария

11 мая 2011.  О геополитике, и о защите кода

Долго не писала, не отвечала на коментарии, и гостевую — была в отъезде.

В предыдущем посте (Zend Guard пролетел…), коллега Bars задал вопрос, как быть если просят открыть код, до оплаты проекта, и как работать с западными заказчиками.

О геополитике

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

Сложнее обстоят дела на Украине, откуда судя по всему и пишет тов. Bars. Украинский внутренний рынок сайтостроительства вообще не насыщен, особенно по дизайнам (пруф. ищите ссылки на интервью А.Лебедева). Т. е. ситуация такая, что свой, украинский заказчик, не может платить столько, сколько платят на западе, например. Поэтому на Украине более развито направление работы с западными заказчиками. Работа на внутреннем рынке ведётся, но пока медленно. Украинские компании пока вообще не понимают, зачем им сайты. Билл Гейтс со своей книжкой «Бизнес со скоростью мысли» видимо уже 12 лет никак не попадёт на книжные лавки Киева. А жаль. Зато именно украинским дизайнерам мы обязаны такому обилию шаблонов на западных темплейт-стоках.

Совсем тяжко сейчас в Белоруссии (Беларуси). Батька запретил всё, что только можно. Знакомые минчане очень переживают. Все банковские транзакции перекрыты. Перевод валют не осуществляется. Даже банк «Москва-Минск» не совершает переводов Москва-Минск! О кризисе внутренней насыщенности белорусского рынка, можно понять, просто посмотрев на сайт того же банка — http://www.mmbank.by/. А потом, для сравнения, на не самый лучший сайт Банка Москвы http://www.bm.ru/.

В странах Европы, ситуация поздоровее. Люди работают и на внутренний и на западный рынок.

Как вести себя с заказчиками

Статьи с примерно таким заголовком вам нужно читать в больших количествах. Легко отличить хорошие статьи от плохих, но прочитать критически стоит почти все. Также полезно практиковаться в риторике и прикладной психологии. Но самое полезное — это завести себе крутого менеджера, если у вас его ещё нет. Если вы делаете сайт один — то менеджер должен просить никак не меньше 30–50% с заказа, или он просто не понимает своих задач.

Далее, что касается закрытости кода. Конечно можно его обфусцировать, но почти вся обфускация сводится к "$blablabla=blablabla; eval($blablabla);" т. е. эффективность ноль. Как правильно начал делать тов. Bars в своей статье — сайт нужно показывать на своём хостинге. И никуда его не устанавливать до тех пор пока вам не будет переведена вся сумма в полном объёме. Если заказчик из СНГ, и вообще производит впечатление приличного человека, можно пойти на уступки и заранее оговорить, что после демонстрации на своём хостинге он оплачивает 66% стоимости, тогда он будет уверен, что вы перенесёте сайт, а для вас остаток как раз и будет той платой за труды по переносу. Услуги по переносу желательно сразу включать в общую стоимость (и уточнить заказчику что это не 5 минут обычно, а больше). Хорошей практикой будет полностью оплачивать хостинг сайта (на пару недель), а потом передавать сайт прямо с этим хостингом — заказчик не будет нервничать, что-то сломается.

У нас не утопия. Если у заказчика будет большой соблазн кинуть — он кинет. Настройте себя на эту мысль. Достаточно один (иногда два =)) раза наступить на грабли кидания, чтобы понять, в какой момент передавать свой код. Код, который вы уже написали — больше всего нужен заказчику, а не вам. Если заказчик не хочет платить — не отдавайте код. Умный заказчик купит готовый продукт охотнее и дороже, чем будет ждать разработки с нуля. Потому что пара недель простоя его бизнеса стоит гораздо больше, чем ваша пара недель. Он может ругаться, но не может не заплатить. Иначе убытки будут у него, а не у вас. Это основная идея — запомните её и никаких проблем не будет.