Ссылки о веб-разработке за май 2010

Web-разработка / Обзор виджета для Opera — «VisComPic», сделанного верстальщиком для верстальщиков

Опубликовано по просьбе автора виджета — моего хорошего друга.

Итак, что же умеет делать это маленькое непонятно что с забавными кнопками?
Visual Compare Pictures

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

Во-вторых

javascript ide

недавно вышла IDE WebStorm специально для веб-разработчиков. Я скачал её на попробовать, впечатлился, и даже подумал купить её. Но как же обойтись без небольшого исследования перед приобретением важного рабочего инструмента? : )

последний раз я сравнивал IDE пару лет назад, и не нашёл ничего достаточно хорошего. Все они приблизительно одинаково не подходили под мои требования. В итоге я остановился на Komodo Edit, который хотя бы тормозит меньше, чем остальные. Но порой за два года многое меняется. Итак, вот мои претенденты.

Eclipse — классная среда. В ней очень умно и удобно сделано почти всё. Собственно, именно её я использовал, когда работал преимущественно не с js. Однако поддержка яваскрипта в ней всегда хромала. Под эклипс есть несколько плагинов, поддерживающих яваскрипт, и все они почти блокнотного уровня. JSEclipse выкуплен и убит Адобом. Spket ничем особенным себя не проявляет. WebTools, хотя и сменил версию с 1.5 на 3, по-прежнему примитивен.

Aptana я пущу отдельным абзацем, хотя это тоже перелицованный эклипс. Хвалят её, конечно, и даже тормозить она перестала (странно было: эклипс не тормозит, а аптана еле шевелится). Но в плане яваскрипта ушла недалеко.

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

Visual Studio я не рассматривал по понятным причинам ; )

в чём же обломались все перечисленные IDE? В примитиве. Go to definition работает, только если функция определена в этом же файле. Это смешно для любого хоть сколько-то крупного проекта. Даже Komodo иногда справлялся с этой задачей.

в общем, пока что я попробую остановиться на WebStorm, благо демка у него на 45 дней.

да, на всякий случай скажу, что между набором простых утилит и gui я выбираю gui

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

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

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

Гибкий бункер

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

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

И никогда не предполагал, что у меня возникнет желание подобное запостить в своем журнале. Я вообще чужой контент у себя не размещаю. Однако - наконец нашлась "озвучка", которая цепанула и меня :). Вот она. Have fun!

http://www.youtube.com/watch?v=l1wKO3rID9g&feature=player_embedded#!

Да, ссылка на видео найдена в Енотьем Журнале (raccoon). Спасибо Еноту.

P.S.: И все-таки, Бункер - это отличный фильм. С великолепной актерской игрой, что нам какбэ символизирует столь выдающийся "индекс цитирования". Рекомендую посмотреть его без "озвучки". Целиком.

CAP-теорема Брюера

По большей части эта статья — изложение сути статьи "Brewer's CAP Theorem" Джулиана Брауна. В оригинале много полезных ссылок и интересных примеров, поэтому если позволяет время и знание языка, почитайте его. А здесь у меня просто самая суть, покороче и по-русски.

В 2000 году Эрик Брюер выдвинул гипотезу, касающуюся ключевых свойств распределённых систем, которую затем доказали в MIT, и с тех пор она называется теоремой Брюера или теоремой CAP (Consistency-Availability-Partition tolerance). Вольная формулировка:

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

Что это за свойства.

Корректность (Consistency)

Говорит о том, что система всегда выдаёт только логически непротиворечивые ответы. То есть не бывает такого, что вы добавили в корзину товар, а после рефреша страницы его там не видите.

Доступность (Availability)

Означает, что сервис отвечает на запросы, а не выдаёт ошибки о том, что он недоступен.

Устойчивость к сбоям узлов (Partition tolerance)

Означает, что распределённая по кластеру система продолжает работать корректно при недоступности нескольких серверов кластера (кроме случая, когда упали все сервера, конечно).

Для лучшего осознания, вот три соответствующих примера того, что могут представлять собой системы без одного из этих свойств:

+Availability +Consistency -Parition tolerance

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

+Consistency +Partition tolerance -Availability

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

+Availability +Partition tolerance -Consistency

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

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

Как в известном предложении клиенту: "быстро, дёшево, качественно — выбирайте любые два".

Причём, как в большинстве инженерных ситуаций, этот выбор не стоит как "всё или ничего". Система может располагаться где угодно в пределах этого воображаемого треугольника, быть "более" консистентной, "менее" доступной и "слегка" нецелой. В анти-идеале можно написать систему, у которой будет плохо со всеми тремя компонентами. Уверен, вы с такими встречались :-).

Одно из интересных практических следствий этой теоремы в том, что в последнее время многие бизнесы решили для себя, что совсем не обязательно упираться в принципы дизайна ACID, который ставит во главу угла Consistency, жертвуя двумя другими свойствами. Теперь у нас есть такая альтернатива, как BASE (известная также как "eventual consistency"), которую например очень любят и используют в Amazon. Там во главе угла стоит Availability.

А ещё один дядька — Гай Пардон — вообще предлагает инженерное решение, которое обходит проблему CAP. Правда, он немного читерствует (с математикой трудно спорить), говоря, что хоть и нельзя обеспечить все три свойства одновременно, можно построить систему так, чтобы она достигала желаемого постепенно.

P.S. Андрей, спасибо за давешнюю ссылку на описание BASE.

книги: pdf reference 1.7

(эта запись будет в основном интересна программистам)

PDF Reference 1.7, by Adobe Inc.

Эта книга, скажу сразу, не для нетерпеливых. Ее объем - 1310 страниц - может отпугнуть; если не считать приложений и индекса, выходит чуть меньше тысячи страниц (правда, некоторые из приложений необходимы, чтобы понять суть происходящего в главном тексте). Как обычно для книг в этом жанре, рекомендуется читать ее вдумчиво и внимательно; отдельные главы или разделы можно пропускать, но никогда не знаешь заранее, сошлется ли на них текст в других главах.

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

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

На первый взгляд, нарратив книги - вполне линейный; повествование плавно перетекает из главы в главу, от введения, к общему обзору, затем "Синтаксис", "Графика", "Текст" итд. Но если внимательней присмотреться, то становится очевидной иллюзорность этой стройной линейности. Тесная сеть перекрестных ссылок пронизывает тело книги, и прыгают эти ссылки то вперед, то назад, не заботясь особенно о том, что уже известно читателю, а что нет. Это создает замечательное ощущение дезориентации, но само по себе еще недостаточно для того, чтобы считать эту книгу шедевром постмодернисткого романа. Для того, чтобы эту дезориентацию закрепить и многократно усилить, автор последовательно применяет три приема.

Во-первых, изобретательная терминология. Так, читатель должен различать stream objects и object streams - два совершенно разных понятия. При этом object stream являeтся видом stream object, но не наоборот. Object stream может также содержать внутри себя другие объекты, но не stream objects.

Во-вторых, обязательное наличие более одного способа добиться одного и того же результата, а желательно - более двух. Эта тема развивается в книге постоянно и последовательно. Так версию PDF можно указать в первой строке файла, а можно - в отдельном словаре. Есть два стандартных фильтра для кодирования двоичных данных в ASCII. Два стандартных способа записать строку-литерал. Два совершенно разных механизма для индексации объектов внутри файла. Два способа указать множество разных графических и текстовых параметров - специальными командами или в специальном словаре параметров (имена команд и имена ключей в словаре различаются). Итд. итп., этот список можно продолжать очень долго.

В-третьих, тонкое введение исключений из общего правила в разнообразных частных случаях. Ни одно универсальное правило не может быть без исключений - таков неофициальный лозунг романа. Скажем, все нумерованные объекты в файле определяются так: [число] [число] obj [содержимое объекта] endobj. Кроме того случая, когда объект хранится внутри object stream, тогда все точно так же, только "obj" и "endobj" выкидываются. Скажем, все идентификаторы внутри файла, т.е. названия чего угодно: ключей в словарях данных, поименованных картинок или секций документа, шрифтов, итд. итп. начинаются с символа /. Кроме одного исключения: названия графических и текстовых команд не начинаются с /. И так далее, и так далее.

В заключение особенно отмечу тот факт, что сквозь все это мастерское жонглирование постмодернистскими темами и символами в романе тем не менее ясно выделяются определенные темы, которые можно было бы назвать в чем-то старомодными, традиционными, гуманными. Во-первых, принцип "терпенье и труд все перетрут" снова и снова демонстрируется в тексте, как например в этом отрывке из секции 3.5.2: "Do the following 50 times: Take the output from the previous MD5 hash and pass it as input to a new MD5 hash".

Во-вторых, следующая идея остается одной из центральных идей PDF Reference 1.7: никогда не поздно переменить что-то к лучшему, никогда не поздно исправиться. Секция 3.4.5, Incremental Updates, вся целиком посвящена этой теме и тому, как содержимое практически любой части PDF-файла можно изменить, добавив в конец файла определенный "апдейт", не меняя то, что в файле уже записано. Многие другие разделы и главы возвращаются к этой теме, поясняя, как такие сочетаются с другими возможностями формата. В итоге читатель не может не проникнуться глубоко гуманистическим духом этой сложной, вычурной, грандиозной по своему замыслу книги.

Chrome supporting EventSource for server push, and richer Worker API

Rick Waldron has been delving into Chrome and Chromium to find some nice updates.

First, he uncovers new support for the EventSource API that allows for simple server push of DOM events as shown in this simple client and server pairing:

PLAIN TEXT
JAVASCRIPT:
document.addEventListener('DOMContentLoaded', function () {
 
  var eventSrc  = new EventSource('events.php');
 
  eventSrc.addEventListener('open', function (event) {
    console.log(event.type);
  });
 
  eventSrc.addEventListener('message', function (event) {
    console.log(event.type);
    console.log(event.data);
  });
}, false);
 
PLAIN TEXT
PHP:
<?php
header("Content-Type: text/event-stream\n\n");

// despite not having the while(true){}
// this seems to repeat pushing messages to the client
echo 'data: ' . time() . "\n";
 

Then, he finds out that the Web Worker API now supports complex messages, so you can postMessage more than Strings. Send over objects and Arrays with ease:

PLAIN TEXT
JAVASCRIPT:
//  TEST ANOTHER THREAD SAFE OBJECT ARG
var obj = new Object();

obj.isArray         = [ 1,2,3,4,5 ];
obj.isString        = 'Foo bar baz',
obj.resultOf        = (function () {
                        return 'returned from self executing function';
                      })();
worker.postMessage(obj);

//  TEST STRING ARG
worker.postMessage('Hello Worker Process');

//  TEST ARRAY ARG
worker.postMessage([ 1, 2, 3, 4 ]);

//  TEST BOOLEAN ARG
worker.postMessage(false);
 

OpenCart CSRF Vulnerability

OpenCart CSRF Vulnerability. Avoid OpenCart—it’s vulnerable to CSRF, but the maintainer has no intention of fixing it as “there is no way that I’m responsible for a client being stupid enough to click links in emails”.

Лента новостей / [Ссылка] Nero подала антимонопольную жалобу на MPEG-LA

Сюрприз! Германская компания Nero AG подала антимонопольную жалобу на MPEG-LA, на ту самую организацию, что заправляет кодеком h264 и обещала несладкую жизнь VP8. А дело всё в том, что эта организация в 1997 году получила обещание от Департамента Правосудия США что против неё не будет возбуждено антимонопольное дело и привело к некоторым последствиям… Компания Nero считает что договорённость была заключена нечестно, и пора пересмотреть факты.

Busting frame busting: a study of clickjacking vulnerabilities at popular sites

Busting frame busting: a study of clickjacking vulnerabilities at popular sites (via). Fascinating and highly readable security paper from the Stanford Web Security Research group. Clickjacking can be mitigated using framebusting techniques, but it turns out that almost all of those techniques can be broken in various ways. Fun examples include double-nesting iframes so that the framebusting script overwrites the top-level frame rather than the whole window, and a devious attack against the IE and Chrome XSS filters which tricks them in to deleting the framebusting JavaScript by reflecting portions of it in the framed page’s URL. The authors suggest a new framebusting snippet that should be more effective, but sadly it relies on blanking out the whole page in CSS and making it visible again in JavaScript, making it inaccessible to browsers with JavaScript disabled.

Google has released the VP8 video codec and WebM container format under royalty-free terms

Today is a very significant day for the Web. WebM, a new, high-quality, free, and open video format is now available, and Opera has released Labs builds that support this format in HTML5

WebM: High-quality free and open video for the Web

Opera, Mozilla and Google have just announced WebM - high-quality free and open video for the Web!

WebM uses VP8 for video, Vorbis for audio, and the Matroska container format.

That's right. Google decided to open the On2 VP8 codec, and share it with the rest of the world. They joined forces with Opera and Mozilla to bring it to a browser near you, and now it's ready for testing!

You can grab your copy of Opera with WebM support, and actually try it out at YouTube!

Google is throwing its weight behind WebM, and has countless content, hardware and software partners lined up. This is truly an industry-changing event, as until now the Web seemed to be moving towards lockdown with H.264 looking at complete dominance over online video.

With the world's most popular browsers and the world's most popular video site pushing WebM, it will truly make a difference.

Django 1.2 release notes

Django 1.2 release notes (via). Released today, this is a terrific upgrade. Multiple database connections, model validation, improved CSRF protection, a messages framework, the new smart if template tag and lots, lots more. I’ve been using the 1.2 betas for a major new project over the past few months and it’s been smooth sailing all the way.

Firefox 4: easier JS form handling with FormData

This feature has landed in Mozilla Central (trunk) and only available with a Firefox Nightly Build for the time being.

XMLHttpRequest Level 2 (editor’s draft) adds support for the new FormData interface. FormData objects provide a way to easily construct a set of key/value pairs representing form fields and their values, which can then be easily sent using the XMLHttpRequest send() method in “multipart/form-data” format.

Why FormData?

When you want to send complex data to a server from a web page (files, non-ASCII content), you must use the multipart/form-data content type. To set the content type in a <form>, you write:

<form method="post" enctype="multipart/form-data" action="http://foo.bar/upload.php">
<input type="file" name="media"/>
<input name="nickname"/>
<input name="website"/>
<input type="submit" value="upload"/>
</form>

This is what you usually do to upload a file.

Starting with Firefox 3.6, you can manipulate files with JavaScript (see File API), and maybe you want to send files using XMLHttpRequest. But if, for example, you want to reproduce this form, it’s really hard because you’ll have to create the multipart/form-data content yourself in JavaScript (see, for example, this code I wrote a while ago implementing a multipart/form-data: ugly and slow).

This is where FormData is useful: to reproduce the <form> submission mechanism in JavaScript

The FormData object

The FormData object lets you compile a set of key/value pairs to send using XMLHttpRequest. This object has only one method:

append(key, value);

where key is the name of your value, and where value can be a string or a file.

You can create a FormData object, append values and then send it through XMLHttpRequest. If you want to simulate the previous form, you write:

// aFile could be from an input type="file" or from a Dragged'n Dropped file
var formdata = new FormData();
formdata.append("nickname", "Foooobar"); 
formdata.append("website", "http://hacks.mozilla.org");
formdata.append("media", aFile);
var xhr = new XMLHttpRequest();
xhr.open("POST", "http://foo.bar/upload.php");  
xhr.send(formdata);

FormData and the <form> element

Firefox extends the HTML form element slightly, adding a getFormData() method that lets you fetch a form’s data as a FormData object. This is not yet part of the HTML standard, but is expected to be added to the specification at some point in the future (although possibly with a different name):

var formElement = document.getElementById("myFormElement");
var xhr = new XMLHttpRequest();
xhr.open("POST", "submitform.php");
xhr.send(formElement.getFormData());

You can also add data to the FormData object between retrieving it from a form and sending it, like this:

var formElement = document.getElementById("myFormElement");
formData = formElement.getFormData();
formData.append("serialnumber", serialNumber++);
xhr.send(formData);

This lets you augment the form’s data before sending it along, to include additional information that’s not necessarily user editable on the form.

Resources

Алексей Капранов: Развенчал «Мифы о Перле» — для перловиков и, в особенности, представителей других культур: http://kapranoff.ru/myths #devconf #perl

Алексей Капранов
Развенчал «Мифы о Перле» — для перловиков и, в особенности, представителей других культур: http://sites.google.com/site... #devconf #perl
Ivan Bessarabov, Анатолий Шарифулин, zag and 22 other people liked this
послушал и прям захотелось перл вспомнить =) - Кроватка мягкая
@bopm ссылка не работает? которая? - Алексей Капранов
Не в том смысле "не работает". - bopm

IE8: put charset in HTTP headers, or it will download css/js twice

IE8: put charset in HTTP headers, or it will download css/js twice

Ненативный рендерер текста (на canvas?) в новых Google Docs

псы в рапиде
What’s different about the new Google Docs? - http://googledocs.blogspot.com/2010...
arty, ***, Ayoshi and 2 other people liked this

The Light at the End of the Discovery Tunnel

After almost three years working on various discovery proposals, I’m finally starting to see the light at the end of the tunnel. While slow, good progress is being made and the drafts are reaching maturity and gaining popularity.

Just a quick update on the status of the various parts of the discovery stack (aka The Hammer Stack):

If you care about any of this, it is critical to review the host-meta and LRDD documents. They are both short and include plenty of detailed examples. Feedback would be greatly appreciated on the Apps Discuss list.

Браузеры / Доля Internet Explorer 6 упала ниже Opera Mini. А вы еще не тестируете в ней свои сайты?

Индикатор окончания эпохи IE6Сегодня доля Internet Explorer 6 составляет примерно 7-8% и продолжает падать. Однако популярность этого браузера все еще достаточно велика, чтобы лишать его пользователей возможности пользоваться вашими сайтами. Большинство разработчиков все еще проверяет каждую функцию на совместимость с этим браузером, кто-то даже бьется над попиксельным соответствием верстки с макетом. Но почему-то многие забывают про другой набирающий популярность браузер. Речь идет об Opera Mini. С развитием мобильных технологий люди все чаще выходят в интернет со своего мобильного. Если верить статистике, Opera Mini используется для серфинга уже чаще, чем пресловутый IE6! Может быть займемся тестированием наших сайтов в самом популярном мобильном браузере? Тем более, что для этого не нужен мобильный телефон.

Алексей Капранов: A Brief, Incomplete, and Mostly Wrong History of Programming Languages

Алексей Капранов
A Brief, Incomplete, and Mostly Wrong History of Programming Languages - http://james-iry.blogspot.com/2009...
imitator, arty and Dmitry Khrustalev liked this
"Lambdas are relegated to relative obscurity until Java makes them popular by not having them." - Алексей Капранов
It is a syntax error to write FORTRAN while not wearing a blue tie. - arty

В сети появились домены без единой латинской буквы, например, موقع.وزارة-الأتصالات.مص

Shared by arty
что, россия не первая с национальными доменами?
Так, например, пользователи могут проследовать по адресу موقع.وزارة-الأتصالات.مصر, который состоит из доменов первого и второго уровня на арабском языке. Всего на сегодняший день запущено три нелатинских домена верхнего уровня: السعودية. ("Al-Saudiah", для Саудовской Аравии), امارات. ("Emarat", для ОАЭ) и مصر. ("Misr", для Египта). Согласно правилам арабского языка, все они читаются справа налево.

9000: What if you could make the IP packet handling code look almost identical to the RFC 791 diagram which defines IP? This is real code in their system. That's right; the ASCII art diagram is the code.

9000
What if you could make the IP packet handling code look almost identical to the RFC 791 diagram which defines IP? This is real code in their system. That's right; the ASCII art diagram is the code. - http://www.moserware.com/2008...
What if you could make the IP packet handling code look almost identical to the RFC 791 diagram which defines IP? This is real code in their system. That's right; the ASCII art diagram is the code. What if you could make the IP packet handling code look almost identical to the RFC 791 diagram which defines IP? This is real code in their system. That's right; the ASCII art diagram is the code.
via @ailev - 9000
great article - Alexey Gopachenko

Интернет / 66% Веб видео в формате H.264

image

Видимо H.264 станет новым стандартом.
techcrunch
image
← предыдущий месяц