Магическото свойство word-break от CSS3

Много предимно back-end програмисти ненавиждат CSS. Може да обичате да пишете JavaScript, но понякога един лайоут може да ви постави в мат. Много важно е да запазите спокоиствие и да не се поддавате на импулса да решавате специфични за кънтента проблеми през back-end или през JavaScript. За почти всички подобни проблеми си има изцяло CSS решение. Миналата седмица този специфичен кънтент проблем, който ще опиша по-долу ми докара нещо като временна ярост. Проблема беше, че по-дългите текстове на линкове разтегляха един контеинер. Подтиснах желанието да мисля някакви врътки откъм back-end-а, например да добавям многоточие ако е по-дълъг текста или да оставям само последната дума. След кратък ресърч хем научих нещо ново хем оправих този интересен от една страна проблем. Свойството word-break, което е част от CSS3 спецификацията контролира как да се пренасят думите в текстовото съдържание на елемента. То има три стойности normal - както е по-подразбиране за текущия език - не можете да разчитате на тази свойност, keep-all - може да се пренасят думите само, когато има whitepaces - много неприятно е поведението при по-дълги линкове или текстове, разделени с тирета, break-all - може да се пренася навсякъде между два символа. Ето поведението преди прилагането на word-break: break-all; на контейнера, съдържащ линка:

Ето коректното и доста по-приятно поведение като резултат от прилагането стойноста break-all на това свойство върху селектора:

Препоръчваните методи за създаване на DOM обекти.

Препоръчваните методи за създаване на DOM обекти. Пиша тази статия за да хвърля светлина върху един проблем, който винаги решаваме по начин, който е меко казано грозен. Не, че не работи и така. Става въпрос за DOM съдържание (обекти), което 90% от JavaScript програмистите правят редовно. Това е нещо, заради, което една от добавките ми за Mozilla FireFox беше отхвърлена на първото code review, което беше полезно, защото научих някой неща от кореспонденцията си със amo team. 80% от хората, ползващи jQuery биха създали някакъв div елемент ето така: Toва по-принцип работи, но не е препоръчвана практика и по-принцип изглежда малко грозно. Освен това ще се заблудите ако си мислите, че append ще ви върне добавеният елемент. Няма да направи това а ще ви върне jQuery обект, обвиващ елементът върнат от селектора #elementId. За да получите поведение, каквото очаквате, както и за да изглежда кода една идея по-сигурен и красив можете да ползвате препоръчаната от Mozilla практика. Този начин се изисква от amo team за да премине добавката ви code review за да бъде допусната в галерията на Mozilla FireFox. В този случай като резултат ще имате, каквото очаквате. Новосъздаденият DIV елемент като jQuery обект. Има и друг препоръчван за други цели метод. Това е JavaScript templating. Да си изнесем html съдържанието в отделен темплейт като миниатюрна темплейтна система. Можете тук да погледнете една отлична статия на Джон Резиг по този въпрос: http://ejohn.org/blog/javascript-micro-templating/

BOM и проблемите с него.

Преди известно време отговорих на един въпрос в http://stackoverflow.com и сега ми хрумна да напиша статия по темата. BOM или т.нар byte order mark е unicode символ, който най-общо казано сигнализира на системата, че файлът, респективно потокът който следва е unicode. Някой интерпретаторни езици, например php са силно чувствителни към BOM и наличието му може да причини големи проблеми за незапознат човек. Човекът търсеше начин как да изчисти BOM от xml, получен като резултат от рекуест във VBScript. Това е функцията, която му написах:
  Тук може да бъде видяна оригилналната дискусия. Интересната част е ползването на RegExp обекта, иначе е стандартен проблем.

Безплатен и безопасен бот за sofiawars.com .

Допреди време не бях играл онлайн игри. Те по принцип са загуба на време. Човек, обаче, може да понаучи това - онова от тях, като си прави т.нар "ботове".  Най-често това са т.нар "потребителски скриптове". Предоставям ви този, който е абсолютно безопасен. Какво прави той?
Копае руда в метрото. Когато срещне плъхотрол обаче, той не се бие с него, както е по принцип в играта, а отново копае руда. Отличен бот за т.нар "лампофоби" - хора, които искат само да събират ресурси и да се развиват, запазвайки нивото си. Скриптът по същество е доста интересен, защото демонстрира ползване на closure. С помощта на closure се закачаме за функцията, която показва бутона "копай тук", и когато той се покаже, го кликаме. Тя по принцип го скрива, когато е излязъл плъхотрол, но ние все още можем да го кликнем. :) Потребителският скрипт работи под Mozilla FireFox със greasemonkey добавката. Доколкото ми е известно, (не съм тествал), не работи коректно под Google Chrome. Това ще го оправя някой ден (я го оправя, я не).
Приятно ползване на бота! Не се колебайте да ми пишете с технически въпроси по употребата му. Може да бъде свален от тук. 

Калкулатор на FCFS алгоритъма като добавка за FireFox.

Обичам да пиша добавки за FireFox. Стават своего рода миниатюрни междуплатформени приложения. Като курсова работа по операционни системи в "УНИБИТ" разработих този FCFS калкулатор. FCFS е алгоритъм, изучаван по операционни системи. Toй е от алгоритмите, чрез които на тредовете, процесите или потоците от данни им се предоставя достъп до ресурсите на системата. Файдата беше, че научих полезни неща, докато го разработвах. Той се намира в галерията на Мozilla и може да бъде свален от тук: https://addons.mozilla.org/En-us/firefox/addon/fcfs-calculator/

Достъп до потребителско име и парола на потребител на Facebook чрез използване на браузърна добавка.

Като курсова работа и най-вече като забавление написах една браузерна добавка, с чиято помощ се записва паролата на потребител, използващ facebook. По-долу ще Ви представя въпросната курсова работа. Браузърните добавки (add-ons) са често подценявани от гледна точка на сигурност. Болшинството системни администратори страдат от заблудата, че ако ограничат правата на потребителя да инсталира приложения това ще реши всички проблеми със сигурноста. Целта на тази курсова работа е да покаже нагледно как може да бъде записана конфиденциална за потребителя информация и после да бъде видяна. Браузърна добавка може да бъде инсталирана в почти всеки браузер без текущият потребител да притежава администраторски права за системата. Тази курсова работа е написана само с цел демонстрация. Авторът по никакъв начин няма за цел да използва тази добавка за незаконни цели и кражба на лични данни и не поема никаква отговорност, ако някой друг употреби приложения сорс код и информация с такава цел. Всеки, употребил информацията, описана тук с подобни цели, подлежи на наказание съгласно закона. Браузърните добавки имат достъп до файловата система, могат да изпълняват native функции на операционната система, да записват текста, който потребителят въвежда в браузера си и много други неща. Повечето производители на браузери предоставят множество инструменти за лесна разработка на подобни добавки, обединени в пакет и известни като software development kit (SDK). Почти всяко SDK ни позволява да инжектираме наш JavaScript на ниво страница, да получим данни от него или да изпратим данни до него. Добавката е разработена само за Mozilla FireFox с помощта на FireFox add-on SDK, но може с малко модификации да бъде инсталирана и във Google Chrome. FireFox add-on SDK, известен още като Jetpack е проект на Mozilla Fondation, който ни предоставя инструменти и framework за лесна разработка на добавки (add-ons) за браузера Mozilla Firefox. Освен локална версия, в която има инструмент за командния ред с която помощ може да се създават и тестват добавки, той стартира и web базирано IDE. Добавките, разработени с Jetpack не изискват браузерът да бъде рестартиран за да бъдат инсталирани или деинсталирани. Модулите на SDK-то са предвидени да бъдат преносими и да спестяват промени, при ъпгрейди на браузера. Добавките се разбработват с използване на HTML, CSS и JavaScript чрез използване на CommonJS конвенцията. За разработката на тази добавка ще използваме FireFox add-on SDK от командния ред тъй, като кодът, писан в онлайн версията на IDE-то е достъпен за всеки потребител на мрежата. FireFox add-on SDK е напълно безплатно и с отворен код. Текущата му версия е 1.14 и може да бъде свалена от https://ftp.mozilla.org/pub/mozilla.org/labs/jetpack/addon-sdk-1.14.zip. Това е файловата структура на добавката, показана в конзолата:

. 
├── data 
│   ├── passwordStealer.js 
│   └── passwordStealerResults.js 
├── doc 
│   └── main.md 
├── lib 
│   └── main.js 
├── package.json 
├── README.md 
└── test 
    └── test-main.js 

4 directories, 7 files

Добавката закача свой собствен манипулатор (handler), който се задейства, когато потребителят напише потребителското си име и парола във логин формата на https://www.facebook.com/ и на всички форми по този домейн, където има поле за записване на парола. Този манипулатор изпраща данните към друг модул на добавката, който от своя страна го записва във simple-storage-а на браузъра (simple-storage е просто хранилище, където може да пазим информация във браузъра между рестартите). Това е кодът, който извършва взимането на написаните от потребителя данни. Намира се в passwordStealer.js файла. Този код се задейства преди формата да бъде изпратена към фейсбук. Взима стойностите на полетата и чрез self.port.emit('getPassword', stolenPasswordAndEmailString); подава взетите данни към основния модул на добавката. В основния модул – main.js, когато се случи събитието getPassword, манипулаторът, задачен за него взима подадените данни и ги записва в simple-storage. Този манипулатор може да бъде видян в main.js. След това можем да достъпваме тези данни по различен начин. Можем да ги запишем в текстови файл, който по-късно да може да бъде отворен, можем да ги изпратим на имейл и пр., но целта ни в случая е проста демонстрация за това ще покажем данните само на страница, която потребителят не знае. В случая аз избирам това да е този url http://get.bg/index.html?gnaa=true. Както може да бъде видяно на screenshot-a, показан по-долу той връща грешка.

Отворен, обаче през Mozilla FireFox на която е инсталирана добавката може да бъде видян списък със записаните потребителски имена и пароли.

Когато засече този url добавката променя страницата и добавя таблицата и бутона Clear saved info. При натискане на този бутон се изчистват всички запаметени потребителски имена и пароли. Кодът, който засича този url може да бъде видян в main.js файла. Както се вижда ние викаме passwordStealerResults.js като на onAttach събитието му подаваме всички записани пароли. Освен това осигуряваме обработка на clearSavedInfo събитието, при което ще изчистваме записаните данни. Във passwordStealerResults.js сглобяваме таблица със записаните данни и създаваме бутон, причиняващ clerSavedInfo събитието. Описаното до тук е нужно да се билдне със cfx инструмента от командния ред на FireFox add-on SDK. Инструментът cfx ни дава възможност да разработваме, тестваме и експортваме към готова браузърна добавка. Най-крато с него се работи по следния начин. Описанието е как се работи под Linux, но под Windows всичко е почти същото.

1. От командния ред отиваме до мястото където сме разпакетирали архива на FireFox add-on SDK-то и пишем следната команда:

   source bin/activate. 
   

   Като резултат получаваме следното:

   georgi@sepulcher:~/Documents/addon-sdk-1.14$ source bin/activate 
   Welcome to the Add-on SDK. Run 'cfx docs' for assistance.
   

2.      Създаваме директория с името името на бъдещата добавка.
   (addon-sdk-1.14)georgi@sepulcher:~/Documents/addon-sdk-1.14$ mkdir passwordStealer
   

3. Отиваме в директорията и изпълнявме командата cfx init. Това създава скелета на бъдещата добавка:

   (addon-sdk-1.14)georgi@sepulcher:~/Documents/addon-sdk-1.14$ cd passwordStealer 
   (addon-sdk-1.14)georgi@sepulcher:~/Documents/addon-sdk-1.14/passwordStealer$ cfx init 
   * lib directory created 
   * data directory created 
   * test directory created 
   * doc directory created 
   * README.md written 
   * generated jID automatically: jid1-2lQn4A7yK6W9BA 
   * package.json written 
   * test/test-main.js written 
   * lib/main.js written 
   * doc/main.md written 
   
   Your sample add-on is now ready. 
   Do "cfx test" to test it and "cfx run" to try it.  Have fun! 
   (addon-sdk-1.14)georgi@sepulcher:~/Documents/addon-sdk-1.14/passwordStealer$    
   

4. Инструментът cfx ни предлага приятната възможност да тестваме добавката в отделна инстанция на FireFox, където е инсталирана само тя. За да ползваме тази възможност просто трябва да изпълним cfx run. По-долу прилагам изображение на резултата от командата.
   
5. След като приключим с разработката и тестовете изпълняваме cfx xpi командата, чрез която инструмента ни създава добавката, пакетирана за инсталиране в браузер.

   (addon-sdk-1.14)georgi@sepulcher:~/Documents/addon-sdk-1.14/passwordStealer$ cfx xpi 
   Exporting extension to passwordstealer.xpi. 
   (addon-sdk-1.14)georgi@sepulcher:~/Documents/addon-sdk-1.14/passwordStealer$ 
   

6. Чрез командата deactivate деактивираме командния ред на FireFox add-on SDK.

   (addon-sdk-1.14)georgi@sepulcher:~/Documents/addon-sdk-1.14$ deactivate 
   georgi@sepulcher:~/Documents/addon-sdk-1.14$ 
   

Kaто резултат от cfx xpi получаваме .xpi файл, който представлява инсталационния модул на добавката. Той може да бъде инсталиран във Mozilla FireFox по следния начин.

1. Стартираме Mozilla FireFox и избираме от менюто File -> Open File.
2. Отиваме до .xpi файла, който искаме да инсталираме.
3. Избираме го и кликаме на Open. След това трябва да се съгласим с инсталацията като кликнем на Install бутона.

Добавката се дейнсталира по следния начин.

1. От менюто Tools се отива на Add-Ons и се избира добавката.
2. Клика се на Remove.

Добавката, която беше разработена и описана в тази курсова работа показва, че потребителят трябва да бъде внимателен и да инсталира добавки към браузера си само от сигурни източници, на които има доверие, защото както се вижда може с лесна модификация на кода да записваме не само паролата за фейсбук а и всички пароли и потребителски имена. Всички файлове, описани тук, заедно с инсталатора могат да бъдат свалени от тук.