Category Archives: web technologies

Solution: DevExpress HtmlEditor’s “Insert Image” and “Insert Link” dialogs are slow

Hello,

Recently I’ve been struggling with annoying issue regarding ASPxHtmlEditor of DevExpress. I will share the problem, the cause of it and its solution.

Problem

We have web application where we use ASPxHtmlEditor. We have 3 different environments where we deploy our web application. We used the editor’s image upload option and everything was perfect until we deployed on our production environment. The editor’s ‘Insert Image’ and ‘Insert Link’ dialogs needed 5 minutes to open. It just kept loading…

aspxhtmleditor-hangs

The other dialogs were fine. We double and triple-checked for any differences between the environments in order to find what might cause the problem. Everything concerning the editor was exactly the same. We also contacted the DevEx support, but to no avail. Here you can see other people complaining and having the same problem:

Solution

We use Web Site Project, not Web Application Project. By accident we find out that the cause of the issue is a folder in our web site which holds tens of GB’s of files and folders. The size of the folder in every other environment was very small. We thought that for some reason the editor traversed recursively through all the folders of the website and that causes the slowdown. The DevExpress support encouraged us to set the image upload options correctly, because it might perform some recursive traversals. But why would it do this? There is something called File Manager. This is used internally in ‘Insert Image’ and other dialogs. When we set the options of the AspxHtmlEditor, the File Manager is supposed to go to the directory set for images upload and traverse through all the files in there.

I set up a 60-70 gb folder under my Web Site Project, containing a lot of files and folders, and reproduced the issue locally. I followed a tutorial to get the code from the dialogs in my project – Customization of Default Dialog Forms. After this I debugged it to see where it hangs. It turned out somewhere between Page_Init and Page_Load the File Managers in “SelectImageForm.ascx” and “SelectDocumentForm.ascx” perform recursive traversal through all folders of your project. What you set as options to the image upload does not matter because it is applied after the File Manager do this traversal. At the time of traversal the FileManager options are the default ones. The solution to this is straight-forward – you should set the image upload folder which the FileManager needs before it performs this traversal. Here is a demonstration of the solution – you override the OnInit method and initialize the FileManager:

public partial class SelectImageForm : HtmlEditorUserControl 
{
    protected override void OnInit(EventArgs e)
    {
        base.OnInit(e);

        string uploadFolder = ConfigurationManager.AppSettings["EditorUploadPath"]; //~/Uploads/
        this.FileManager.Settings.RootFolder = uploadFolder;
        this.FileManager.Settings.InitialFolder = uploadFolder.Replace("/", "").Replace("~", "");
        this.FileManager.Settings.ThumbnailFolder = "";
        this.FileManager.Settings.UseAppRelativePath = true;
    }

    protected override void PrepareChildControls() 
    {
        Localize();

        base.PrepareChildControls();

        PrepareFileManager();
    }

    //code

    protected void PrepareFileManager() 
    {
        FileManager.Styles.CopyFrom(HtmlEditor.StylesFileManager);
        FileManager.ControlStyle.CopyFrom(HtmlEditor.StylesFileManager.Control);
        FileManager.Images.CopyFrom(HtmlEditor.ImagesFileManager);
        FileManager.Settings.Assign(HtmlEditor.SettingsImageSelector.CommonSettings);
        FileManager.SettingsEditing.Assign(HtmlEditor.SettingsImageSelector.EditingSettings);
        FileManager.SettingsFolders.Assign(HtmlEditor.SettingsImageSelector.FoldersSettings);
        FileManager.SettingsToolbar.Assign(HtmlEditor.SettingsImageSelector.ToolbarSettings);
        FileManager.SettingsUpload.Assign(HtmlEditor.SettingsImageSelector.UploadSettings);
        FileManager.SettingsUpload.ValidationSettings.Assign(HtmlEditor.SettingsImageUpload.ValidationSettings);
        FileManager.SettingsPermissions.Assign(HtmlEditor.SettingsImageSelector.PermissionSettings);
        FileManager.SettingsFileList.Assign(HtmlEditor.SettingsImageSelector.FileListSettings);

        if(string.IsNullOrEmpty(FileManager.Settings.RootFolder))
            FileManager.Settings.RootFolder = HtmlEditor.SettingsImageUpload.UploadImageFolder;

        FileManager.FolderCreating += new FileManagerFolderCreateEventHandler(FileManager_FolderCreating);
        FileManager.ItemDeleting += new FileManagerItemDeleteEventHandler(FileManager_ItemDeleting);
        FileManager.ItemMoving += new FileManagerItemMoveEventHandler(FileManager_ItemMoving);
        FileManager.ItemRenaming += new FileManagerItemRenameEventHandler(FileManager_ItemRenaming);
        FileManager.FileUploading += new FileManagerFileUploadEventHandler(FileManager_FileUploading);
    }
    
    //code
}

You can solve the issue more elegantly by calling the method which set all the options internally – PrepareFileManager(). It’s up to you and your requirements.

aspxhtmleditor-image-works

I hope this was helpful.
Cheers,
Tihomir Iliev.

Въведение в NoSQL

Какво е NoSQL?

nosqlNoSQL е система за управление на нерелационни бази от данни. Тези системи имат значителни разлики със същите, управляващи релационни бази. Те са измислени за ползване на разпределени хранилища за данни, където е нужна мащабируемост (например Google или Facebook, които събират терабитове данни всеки ден). Това съхраняване на данни може да не се нуждае от определена схема, да избягва join операции и по приницп да скалира хоризонтално.

История на NoSQL

Терминът NoSQL е въведен от Карло Строци през 1998 година. Той го използва, за да наименува неговата open-source лека база от данни, която няма SQL интерфейс. В началото на 2009 година, когато last.fm организира събитие за open-source разпределени бази от данни, Ерик Еванс, работник на Rackspace, преизползва термина, отнасяйки го към бази от данни, които са нерелационни, разпределени и не поддържат ACID (atomicity, consistency, isolation, durability) – четири от характеристиките на традиционните системи за управление на релационни бази от данни.
През същата година в Атланта, САЩ, се състои конференцията “no:sql(east)”, където NoSQL била обсъждана много. След това дискусията и практиката на NoSQL придобила несравним растеж.

Важни характеристики на NoSQL

nosql types of databases
Без схема : Схема на база от данни е структурата на системата, описана във формален език, който се поддържа от системата за управление на базата. В релационната база от данни схемата дефинира таблиците, полетата им и връзките между тях. В NoSQL колекцията е група от документи, всеки от които представлява ред, а колекцията прилича на таблицита от релационните бази от данни. Колекциите няма схема, което означава, че в една колекция могат да се съдържат различни по тип и структура документи. Например, следните два документа могат да бъдат запазени в една единствена колекция:
{“animal” : “monkey”}
{“speed” : 280.00}
Забележете, че горните два документа нямат нищо общo между елементите. Тази гъвкавост означава, че могат да се прилагат всякакви схема върху база данни от тип NoSQL.
Хоризонтална мащабируемост: Да се мащабира хоризонтално означава да се добавят още възли към системата (например добавяне на нов компютър). В NoSQL запазването на данни може да бъде много по-бързо, понеже то взима предимството на хоризонталното мащабиране и разпределя данните между възлите.

Категории на NoSQL бази от данни

КатегорияОписаниеБази
Документ базираниДанните се пазят като документи. Примерен формат би бил нещо такова:
FirstName="Tihomir", Address="Beroe Square", Spouse=[{Name:"Penka"}], Children=[{Name:"Gosho", Age:18}]
CouchDB, MongoDB, OrientDB, SimpleDB и други
XML базираниДанните се пазят в XML формат.BaseX, eXist и други
ГрафовиДанните се съхраняват като колекция от възли, където възлите са аналог на обекти в съвременен език за програмиране. Възлите са свързани чрез връзки.AllegroGraph, DEX, Neo4j, FlockDB, GraphDB и други
Ключ-стойност базираниВ категориите, базирани на ключ-стойност, потребителят може да съхранява данни без схема. Ключовете могат да са стрингове, хеш-стойности, листове, множества, сортирани множества и др.Cassandra, Redis, memcached и други

Кой използва NoSQL?

Следните големи компании използват NoSQL бази от данни:

Server-side JavaScript – Node.js

Какво е Node.js?

nodejs

Node.js е платформа, разработена на open-source еджина за JavaScript на Google – V8. С помощта на Node.js можем да създаваме бързи и мащабни мрежови приложения. Node.js използва събития, неблокиращ I/O модел, който позволява лекота и ефективност. Перфектен е за приложения, които имат голям интензитет на прехвърляне на данни в реално време. В момента има много енергия и идеи около Node. За да разберете Node.js, ще е много полезно да осмислите някои от ключовите избори при дизайна му.

Събития и асинхронност

Node е базиран на събития и е асинхронен. Събития, като например HTTP заявка, ще изстреля JavaScript функция, която ще свърши малко работа и ще пусне други асинхронни задачи като връзка с базата или теглене на съдържание от друг сървър. Щом тези задачи бъдат пуснат, същата функция за изстрелване при събитие ще спре и Node ще заспи. В момента, в който нещо друго се случи – като установена връзка към базата или сървърът отговаря със съдържание, се изстрелва callback функция и още JavaScript код бива изпълнен, който може да пуска още асинхронни задачи. По този начин, Node.js ще разпредели много дейности за много паралелни работни потоци. Ето защо Node се справя толкова добре, когато трябва да управлява хиляди конекции едновременно.

Защо просто не използваме един процес на конекция, както всички други?

В Node новата конекция отнема много малко хийп памет. Но пускането на нов процес отнема внушително повече количество памет, мегабайт на някои платформи. Истинското натоварване обаче идва от context-switching-а (запазването на състоянието на процес, когато му свърши единицата време за изпълнение и връщането му в същото това състояние, когато му дойде отново реда за изпълнение). Когато имаме 10^6 нишки, ядрото трябва да свърши много работа, за да разбере коя ще бъде следващата пусната. Доста работа се свърши за да се разработи O(1) scheduler (планировчик), но в края на краищата е много по-ефективно да имаме един процес, който се управлява от събития от 10^6 процеса, състезаващи се за процесорно време. Също така, под голямо натоварване, мулти-процесорният модел се държи много посредствено и отнема много управляващи сървиси, особено SSHD. Това означава, че дори не можете да се логнете, за да разберете колко зле са нещата.

Как го прави Node.js?

nodejs

Node.js е едно-нишков и не заключва ресурси. Node има една нишка на процес. Заради това, е невъзможно няколко нишки да пипат по едни и същи данни едновременно. Следователно, не са нужни заключвания. Нишките са много трудни и предизвикват много трудни за проследяване бъгове. Елиминирането на някои от класовете, които отговарят за справянето на тези бъгове печели много време. Това е едно от най-големите предимства на Node.js.

Може ли Node.js наистина да се ползва за сървър?

Node е възможна опция за обслужване, но е далеч от това, което се обещава в документацията му. С Node v 0.6.x, в платформата се интегрира клъстер, осигуряващ доста важни блокове, но production.js скрипта, който трябва да се напише е пак около 150 реда код с логика, описваща създаване на лог директории, рециклиране и др. За сериозно обслужване, вие ще трябва да се подготвите поемете всички идващи конекции и да направите всичко, което Apache прави за PHP. Rails има същия този проблем. Той е разрешен чрез два допълнителни механизма:

  1. Rails/Node да се сложи зад самостоятелен уеб сървър (написан на C и тестван сериозно) като Nginx (или Apache/Lighttd). Уеб сървърът ще може успешно да се занимава със статичното съдържание, системата за достъп, редактирането на URL-та, да налага ограничения в правата и да управлява под-услуги. За заявки, които са предназначени за node service, уеб сървърът му дава пълномощно
  2. Използване на framework като Unicorn, който да управлява процесите, да ги зачиства периодично и така нататък. Все още няма читав подобен framework.

Четейки frameworks като Express карат човек да повярва, че стандартната практика е просто човек да прекара всичко през Node service… “app.use(express.static(__dirname + ‘/public’))”. За услуги, които са леки, това може да бъде прекрасно. Но в момента, в който опитате да натоварите вашата услуга и да я пуснете да е активна 24/7, ще осъзнаете защо големите сайтове използват сериозен код на C отзад като Nginx, който да се занимава с всички заявки за статично съдържание.

Какво е SEO и защо е важно да се прави?

Search engine optimization

Какво означава SEO? SEO значи Search Engine Optimization. На български това се превежда като оптимизация за търсещи машини. Най-вероятно сте чували този термин и искате да научите повече за тази техника. Поне 99% от потребителите на Интернет са използвали Google.com и повечето от тях са наясно, че това е търсеща машина. Всеки път, в който напишете някакви думи в търсачката на Google, тя бълва резултати с доста бърза скорост. И всеки път получавате най-релевантните на търсените думи резултати в мрежата.

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

Търсещите машини обхождат уеб сайтовете често и индексират страниците им. Индексирането е процес, при който търсещите машини съпоставят уеб страниците на съответните им ключови думи и ги класират според тяхната популярност и релевантност. Накрая, когато търсите в Google по дадена дума, вие ще видите най-добрите резултати на първата страница и с всяка следваща страница качеството на резултатите, които ще получавате, ще се влошава.

SEO или оптимизирането за търсещи машини спомага по-доброто класиране на уеб страница в Интернет. Как? Прочетете по-долу…

Какво е SEO?

Search engine optimization

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

  • Кой печели от SEO? Собственика на сайта.
  • По какъв начин печели собственикът на сайта? Чрез повече трафик.
  • Как SEO набира трафик? Когато се класирате високо за определена ключова дума, вашият сайт става видим и когато някой пусне заявка в търсеща машина за същата ключова дума има все по-голям шанс вашият сайт да излезе по-напред и да бъде посетен.
  • Какви типове SEO има? Има само два типа SEO – White Hat SEO и Black Hat SEO. White Hat SEO е термин, описващ етичните SEО практики. Black Hat SEO е точно обратното – това са лошите практики, които са забранени и се наказват от тъсещите машини.

Защо SEO е важно да се прави?

Search engine optimization

Ако искате вашият уеб сайт да бъде на първа страница в Google и да печели трафик, той трябва да е ооптимизиран за това. Успехът на един уеб сайт зависи от това колко добре е оптимизиран за търсещите машини. Никой не би искал да влиза в уеб сайтове, които не се посещават. Статистиките показват, че повече от 85% от трафика в Интернет идва от търсещите машини. Това е доста голям трафик и той може да се насочва.

Няколко причини защо е важно да се прави SEO

  • SEO ви дава трафик
  • Добре оптимизирираните уеб страници са обожавани от търсещите машини
  • По-голямата част от уеб трафика в Интернет идва от търсещите машини
  • SEO може да увеличи вашите продажби феноменално
  • SEO е икономически ефекетивна
  • SEO дава авторитет на вашия уеб сайт. Увеличава PageRank-а му.

Какво включва SEO?

Search Engine Optimization
Ключовите думи са най-важният елемент в целия SEO процес. Това е първата крачка в SEO. Подборът на правилна или грешна ключова дума може да даде голяма разлика. Когато публикувате съдържание на вашия сайт, важно е да спрете и да помислите кои ключови думи му отговарят. Важните фактори при ключовите думи, които се вземат под внимание от търсещите машини са подобора на ключови думи, честотата на ключовите думи, същите в линкове и имена на файлове, ключови думи в заглавия на страници, заглавия и съдържание.

Линковете са също много важен фактор в процеса на оптимизация за търсещите машини. Линковете представят полулярността на уеб сайта ви. Има два типа линкове – входящи и изходящи. Входящите линкове са тези, които идват от чужди уеб сайтове и сочат към вашия, а изходящите линкове са такива, които са във вашия сайт и сочат към чужди. Колкото по-висок е броят на качествените линкове, сочещи към вашия сайт, толкова по-високо ще бъде класиран той. Такива типове линкове (входящи) могат да се създадат чрез регистриране на вашия сайт в различни директории, чпрез споделяне във форуми, статии и други сайтове.

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

Съдържанието е кралят на онлайн бизнеса, същото може да бъде казано и в смисъла на SEO. Уеб сайт със съдржание, което не се харесва на хората, не се харесва и на търсещите машини. Важно е да се създаде съдържание, което се харесва от хората и от търсачките. Няма смисъл от подхвърляне на безсмислено съдържание, което не е итнересно никому. Качественото съдържание носи входящи линкове от други сайтове, а те носят популярност на вашия уеб сайт. Никога не дублирайте съдържание от друг уеб сайт. Това се хваща изключително лесно от търсещите машини и се наказва сериозно. Съдържанието на вашия уеб сайт трябва да бъде уникално, атрактивно и полезно на вашите читатели, както и да бъде добре оптимизирано за тъсещите машини.

Визуалните екстри са картинките, видеата, флаш-анимациите, звуците, javascript и други, които търсещите машини не могат да индексират. Но дори да не могат да се индексират, тези компомпненти на вашия уеб сайт трябва да бъдат поднесени с подхгодящи описания, за да може да се индексират поне самите файлове. Има няколко важни неща, които трябва да се спазват, когато става въпрос за визуални екстри и SEO:

  • Избягвайте картинки, които показват текст. Те не могат да се прочетат от търсещите машини. Осигурете подходящо описание на каритнките в “alt” атрибута на <img> тага.
  • Винаги осигурявайте информация за анимация и филмчета в “alt” тага.
  • Можете да използвате <noscript> тага, за да осигурите алтернативно съдържание за потребителите, които са изключили скриптовете в техния браузър.

Search Engine Optimization
Важността на SEO няма да намали в близко бъдеще. Ако искате да правите пари онлайн, първото нещо, от което трябва да разбира е SEO. Разбира се, SEO не е единственият начин да докарате трафик до вашия уеб сайт, но със сигурност е най-ефиктивният.