Archive for the ‘javascript’ tag
Обичам Букмарклети
Преди малко попаднах на поредния букмарклет, който прибавих в моята колекция. Искам да изкажа моята любов към букмарклетите, като постна тези, които ползвам.
- dotProject Log Date: datepicker‘а на dotProject е отвратителен, а често ми се налага да сменям датата на логовете; моя разработка.
- Go 2: от време на време лисицата се чупи и отказва да зарежда нови страници при вкарано на ръка URL в adressbar‘а; моя разработка.
- hCard Wizard: позволява генерирането на hCard микроформата.
- jQuerify: инжектира страхотната jQuery библиотека и предоставя всичките й предимства at your finger tips в конзолата на Firebug.
- Long URL Please: превръща кратки URLs (TinyURL и други подобни) в дълги и четливи.
- Share & Note in Reader: позволява споделянето на всяка страница в Reader’а.
- Post 2 del.icio.us: добавя отметка към страницата в del.icio.us.
- Twitter Single Reply: от известно време е obsolete, но си остава класически пример за силата на букмарклетите.
- Show Nofollow: бърже анализира и подчертава линковете, които са с отметка nofollow; моя разработка.
- Up: отива едно ниво на горе в йерархията на URL’то; не е мой, но не мога да го намеря в интернет.
- Visual Event: елегантно показва елементите на страницата, за които има прикачен behaviour.
- Webmail Select: уеб интерфейсът на Exchange е отвратителен от гледна точка на usability, като това е изключително дразнещо, когато трябва да се селектират много мейли в една папка, а този букмарклет ги селектира с един единствен клик, като знам също, че работи и със SquirrelMail; моя разработка.
- WTFramework: анализира страницата и рапортува, коя библиотека ползва.
Какви други яки букмарклети може да ми предложите?
about: Google Chrome
Много хора направиха пробно пътуване с гугълския браузър Хром, аз го поканих на среща – ползвам го като основен браузър вече няколко дена.
Ето моите положителни впечатления:
- Отделните табове протичат в собствен процес – ако някоя страница е бъгава, то тя не блокира целия браузър;
- Табовете са в пясъчник, повишавайки сигурността;
- Стартира изключително бързо;
- Уеб апликациите са изключително бързи благодарение на нова виртуална машина – V8, пак от Гугъл;
- Има изчистен интерфейс, който лесно пристрастява – иначе отделни по функция елементи са групирани в един умен елемент;
- Под капака работи WebKit, което гарантира силна поддръжка на уеб стандартите;
- Кутийката за търсене в дадена страница и прилежащата й функция са реализирани много успешно;
- И Хром и V8 са с отворен код и съответен лиценз.
И моите негативни впечатления:
- Инспекторът се отваря в нов прозорец, а не е приложен към таба, който го е извикал; бутончето, което трябва да го прикачи обратно към таба не работи;
- Инспекторът е инспириран от Firebug, разбира се, но все още не е това, което трябва да бъде;
- Инспекторът на записва XmlHttpRequest (или аз съм глупав?);
- Отваряйки линк в нов таб, то този таб се намества веднага след активния и измества останалите с една позиция надясно;
- Продуктът е все е още бета и няма разработено API за допълнителни приставки, като най-много ми липсват следните: RTM за GMail, NoScript, AdBlock, HttpFox, Web Developer Toolbar и Foxmarks;
- Плъгините, като Флаш, все още не са в пясъчника и са отделен процес за всички табове. Това от една страна намалява сигурността, от друга позволява на един плъгин да крашне всички табове;
- Няма бърз и лесен начин за превключване между различните търсачки, чрез шорткът примерно;
- Трябва първо страницата да бъде посетена и да бъде извършено търсене, тогава Хром запомня това търсене и търсачката е добавена;
- За да се ползват многото различни търсачки, трябва да се запомнят URL’тата;
- Не всички страници, на които има кутийка за търсене, биват разпознати;
- Има проверка само на английския правопис;
- Актуализира се автоматично без дори да информира потребителя
Наттъкнах се и на неприятна недосмислица във връзка с табовете и отделните процеси. До колкото успях да проуча, решението, дали един таб да стартира нов процес, зависи от домейна. Ако съм примерно на адрес http://example.com и отворя http://example.com/contact в нов таб, то тогава не се стартира нов процес. Поведението е същото, дори и при събдомейни. Това е един добър евристичен метод, но не мисля, че е оптимален. Гугъл Мейл, Гугъл Календар, Гугъл Документи и Гугъл Рийдър са все различни апликации. Общото между тях, освен че са на Гугъл де :), е, че са на един топ домейн и съответно протичат в един процес, ако потребителят ги е отворил чрез кликване на линкове към тях в една сесия. Това означава, че ако работя над даден документ и крашне ГМейл примерно, то тогава и документът отива на кино. А един от силните аргументи на отделните процеси е именно, че крашването на един таб не води да крашване на други и съответно да загуба на информация.
Наблюдавам и друг проблем с евристиката при стартиране на нов процес, но само при линкове в Гугъл Рийдър. Рийдър винаги отваря линковете в нов таб, респективно прозорец. С други думи има три начина за отваряне на линк: клик, среден клик, десен клик и избиране на опцията. “Клик” и “среден клик” отварят новия таб в същия процес, а “десен клик” стартита нов. Трябва и трите клика да стартират нов процес. Пуснах им бележка на Гугъл. Но истинският проблем може и да е в Рийдър, а не в Хром. В тази връзка забелязвам, че започнах и в другите браузъри да отварям линковете не със среден клик, ами с десен :).
Очаквам наистина интересна битка между отделните вендори. Но се опасявам, че Хром ще отмъкне повече потребители от Файърфокс, от колкото от ИЕ. Дано се лъжа обаче. Аз, for the time being, ще карам паралелно с два браузъра: Хром за всички гугълски апликации и Файърфокс за всичко останало.
Re: Dustin’s Brain Teaser
I’m a bit late, but rather later then never :). I just didn’t had even 10 Minutes spare time in the last few days.
Here is my response to Dustin’s brain teaser. I’m offering a solution without regular expressions. Though after reading the problem I first thought “Nice, I’ll use regular expressions.”. But then I realized that now I’m facing two problems :). I’m really not that good at regexps.
But I promise I’ll keep the teaser in mind and one day I’ll solve it with regular expressions.
-
var teaserNoRegExp = function() {
-
var input = ['a', 'b', 'c', 'c', 'd','e', 'e','e', 'e',
-
'e', 'f', 'e', 'f', 'e','f', 'a', 'a', 'a', 'f', 'f', 'f'];
-
var output = '';
-
-
// assume Array.prototype.forEach
-
-
var spanOpened = false;
-
input.forEach(function(el, index, input){
-
if (input[index-1] == el && input[index-2] == el && !spanOpened) {
-
output = output + '<span>';
-
spanOpened = true;
-
}
-
output = output + ' ' + el;
-
if (input[index+1] != el && spanOpened) {
-
output = output + '</span>';
-
spanOpened = false;
-
}
-
});
-
document.getElementById('result').value = output;
-
};
P.S. It actually took me a minute or two to write it down.
nofollow Bookmarklet
Here is a smallish bookmarklet that highlights all links that are marked with the nofollow attribute. Just drag and drop it to your bookmarks bar.
In its current version the bookmarklet is very very simple: it just highlights nofollow-links and reports back the total number. However it only works on frameless documents.
Here’s the code in a readable <code>-block:
-
javascript:(function(){
-
for (var i = 0, a = document.getElementsByTagName('a'), b = a.length, c = b; i < b; i++) {
-
a[i].rel.match(/nofollow/i) ? a[i].style.backgroundColor = '#ff0066' : c–;
-
}
-
alert(c);
-
})();
That’s the shortest I could get. Have fun :).
P.S. You can test-drive it right away on this page: the about-link in the footer is a nofollow-link.
P.P.S. It’s the browser that turns a double minus into a single long dash.
Unobtrusive Smilies :)
I don’t know whether you may find use for this, it might be a complete overhaul, but anyway.
Smilies are small inline images that represent a mood like being sad :( or help enrich the context with some emotion like winking after a joke ;). Everybody uses them but no one actually puts down those img-tags: we rely on our smart CMS’s to the job. Smilies are accessible since screen readers use either the title or the alternative text attributes of the img-tag. The problem is that such inline images aren’t semantically correct: they should be part of the text as text and not as images.
I’ve put down a small (~2KB minified) mixture which filters all smilies and replaces them with images in an unobtrusive way.
What is the basic?
Default behavior is to query the document for span-tags that have the class smiley. Each one option is customizable.
What’s the compatibility?
It’s known to work with Firefox 2, Firefox 3, IE5.5, IE6, IE7, Safari 3 and Opera 9 under Windows, Safari 3 under Mac OS X and Konqueror 3.5 under Kubuntu.
How to trigger it?
Use it just as any other unobtrusive JavaScript out there:
-
window.onload = function() {
-
uns.parse();
-
};
Or gain performance by providing a node where smilies are to be found, like the main content div-block:
-
window.onload = function() {
-
uns.parse({node: document.getElementById('content')});
-
};
You can also provide an onfinish callback:
-
window.onload = function() {
-
uns.parse({
-
node: document.getElementById('content'),
-
onfinish: function() {
-
alert('finished');
-
}
-
});
-
};
Or you can add additional smilies:
-
window.onload = function() {
-
uns.smilies({
-
':cska:': 'images/cska.gif'
-
});
-
uns.parse();
-
};
You can also AJAX load new content into some poor div and run the parser afterwards:
-
xhr.onreadystatechange = function() {
-
if (xhr.readyState == 4) {
-
var comments = document.getElementById('comments');
-
comments.innerHtml = xhr.responseText;
-
uns.parse({node: comments});
-
}
-
};
Where can it be seen?
I’ve put down a small demo.
Log
20.02.2008: 0.1 Initial release.
22.02.2008: 0.2 Added support for native getElementsByClassName and tested with Firefox 3, added support for IE5.5 and IE6.
about: Деактивиран JavaScript
Просто се чудя … как точно протичат нещата? Седис си в офиса и посещаваш някаква страница, която изисква JavaScript. И отиваш при админа и казваш: баце, харча времето и парите на компанията гледайки глупости по мрежата, ама нещо не работи … може ли да погледнеш малко?
Страницата на Луфтханза е Лоша, Продължение
Преди известно време се оплаках от достъпността на страницата на Луфтханза. Въпросът не е изчерпан.
Преди две седмици пътувах с полет на Луфтханза от FRA до SOF. Наслаждавайки се на перфектния полет, имах възможност да прегледам списанието на Луфтханза. Учудването ми бе голямо, като открих, че същата страница е спечила наградата “CeBIT Usability Award for customer friendliness“.
Чудно ми е, как е възможно една страница да спечели награда за ползваемост, след като не можеш да логнеш заради някаква глупава флаш реклама? Изобщо, как може една страница, която изисква JavaScript и не деградира елегантно, да бъде наречена “usable” … in the first place. Или журито тества само на стандартна Windows инсталация със стандартните настройки на IE?
Poor judgement, казвам, poor implementation.
Цитат: JavaScript
If you are writing applications in Java, you do not have to be prepared for having Java turned off. But because of the browser’s long and tragic history of security screwups, JavaScript does get turned off. It is ultimately the only security control given to users that works. So not only does the programmer have to be prepared for failure, the program is expected to fail gracefully.
Страницата на Луфтханза е Лоша
В: Как да се логна в lufthansa.com?
A: Разкарва се флаш обекта с някой DOM редактор, примерно Firebug, или се блокира Adblock Plus.
Firebug Рокира
Не че не знаех, но винаги е хубаво някой да се грижи за теб. Още повече, ако е великият Firebug.
