Joro.me v4.0

Преди около година и половина пуснах масивен ъпдейт на сайта (който преди всъщност тогава беше просто блог). Тези промени бяха отдавна планувани и един ден просто седнах и реших, че е време да ги направя. Така, за около месец успях да вдигна всичко и най-накрая изпълних и това мое желание. Но както са казали мъдрите хора “Бързата работа – срам за майстора!”. Новият Joro.me се оказа доста бъгав и не особено добре написан. Няколко човека ми пратиха списък с бъгчета, за които така и не успях да отделя време, защото бе необходимо значително пренаписване. И така до съвсем скоро, когато подобно на предния редизайн, просто седнах и реших, че е време.

Тук обаче имах друга цел – сайтът да стане по-изчистен и по-оптимизиран и този път наистина (ама наистина!!!) да започна да пиша отново в него. Основата, която имах значително ми улесни живота. Съвсем спокойно мога да заявя, че версия 4 е всъщност първата версия, на която мога да лепна лейбъл Final. Пусната е от няколко седмици, но исках да видя дали ще изскочи нещо и едва днес го обявявам.

Не мисля, че има неще специално, с което да се похваля… по-скоро всичко вече работи и реално съм елиминирал едни и опростил други неща. Фокусът ми оттук нататък изцяло ще падне върху съдържанието. Приятно четене!

HappyCrossroads

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

В момента сме пуснали три стари пътешествия – Амстердам, Будапеща и Берлин, а още 2 чакат на Draft. Надявам се сайтчето да ви хареса и аз се надявам все по-често да има приятни истории за показване/разказване.

Чисто технологично сайтът представлява една изключително изчистена WordPress тема с щипка flexbox красоти.

Joro.me v3.0

Finally.

Сигурно над 10 минути се чудих как да започна този пост :). Първо, не съм писал от много, много време. Второ, вчера блогът навърши 5 години и по този повод най-накрая реших да представя един завършен проект, който да поддържам по-нормално.

Идеята за цялостен редизайн дойде точно месец по-рано на 5-ти септември. Ей така по никое време реших, че трябва да се стегна и да завърша, това което започнах преди много време. За тази цел направих така, че да не се скатавам – скалъпих един Comming Soon пейдж за 10 мин, така че да нямам извинение пред никой. Датата беше ясна – 5 октомври.

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

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

Но страници тип About, Contact и пр. са стандарт и не са интересни, нека влезем в Лаб-а. Реално това е основната нова страница, която ми отне страшно много време. В нея исках да съчетая толкова много типове проекти, че все нещо не се получаваше. Във версията, която виждате мисля, че съм постигнал баланс, но само времето ще покаже. Генерално проектите са разделени на 3 – Websites, EnvatoMarket Items и Local Items (както им викам). Първите очевидно са цели сайтове, които съм правил. При тях опциите са две – да прочетете повече за съответния проект или директно да отидете на сайта му. Вторите представляват проектите, които преди време качвах в ThemeForest или CodeCanyon. Те са платени. Опциите са да прочетете повече за тях, да видите демо или да си ги купите от сайта на Envato. Третите са проектчета, които ползвах предимно за лични нужди, но реших да позавърша и да ги пусна публично. При тях отново имате възможност да прочетете допълнителна информация, да видите тяхно демо или да си ги свалите безплатно. Искам да подчертая, че всичко, което качвам тук ще бъде безплатно с опция за донейшън – използвам Gumroad, което е система за свръхбързи покупки, която има опция точно да “продавате” нещо безплатно с опция за донейшън. Със сигурност целта ми не е да печеля от сайта, а да предоставям на хората безплатно неща, които мисля, че са готини и биха им свършили работа.

Всички проекти имат допълнителна информация, като това кога са създадени, кога са обновени, каква е ролята ми в тях (скоро ще добавя и още) и пр. Това според мен е доста ценна информация и исках да я представя максимално опростено и нагледно. Общо взето – това е.

Предполагам много от вас забелязали, че сайтът не е респонсив – да не е, но ще бъде в близко бъдеще… просто изчаквам да добавя всичко, което си бях предвидил. Освен това ще има и изцяло английска версия (без блога, разбира се), но това ще се случи вероятно към края на годината. Има и много дребни нововъведения, които тепърва ще интегрирам, но все трябваше да се почне отнякъде.

Мисля да не плямпам повече, а да ви оставя да разглеждате. Надявам се сайта да ви харесва и по-важното да намирате съдържанието за полезно и ползваемо.

П.С. Поради сливането на две бази, възможно е някои неща в блога да не работят.

bgjargon.com – речникът на улицата!

Пита се Какво е bgjargon.com?

И отговорът на основателя на сайта, който съвсем случайно ми е и добър приятел:

Речник за еднодневки, за жаргон, за остарели думи, за осмиване на „звездите“, известните и въобще всичко, което ви вълнува!
Това е знанието на улицата, речникът на еднодневките, на остарелите думи и въобще на всичко, което не може да намерите в друг речник или енциклопедия.
Допълвайте, пълнете и умножавайте по усмотрение и без колебание. Дори нещо да ви се струва тривиално – някой друг може да не го знае!

С две думи – яката работа. Сайтчето съществува отдавна и както казах е проект на мой приятел и бивш колега.

Едно време преди не знам си колко лета и зими, той седна и рече:

“- Жорка, земи направи едно дизайнче на бегежаргона, че на много хора им излиза пяна от устата като го гледат т’ва розово.”

“- Challenge accepted!” – възкликнах аз.

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

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

Скоро, малко преди Коледните празници, получих шокиращ мейл, в който пишеше, че най-накрая новият bgjargon е лайв! Отворих го, поразцъках го. Малко се шокирах в началото и се чудех харесва ли ми след толкова време, не ми ли харесва… и честно казано – харесва ми. С времето представата ми за визия се бе поизменила, кодът, който бях писал ми се стори адски остарял, но въпреки това цялостният пакет ми хареса.

Скоро се видяхме с него на по бира и ми сподели не само доста интересни факти около сайта, но и бъдещи планове. Аз пък му обещах да мина по страниците, леко да поосвежа кода и след това да драсна един пост.

И ако трябва да завърша по-сериозно, бих звучал така: “Въпреки ограничената аудитория, bgjargon.com с годините доказа себе си и ежедневно добавяните думи пълнят и без това вече сериозната му база. Потребителите му са верни, а освен за разпускане, сайтът спокойно може да послужи и като пълноценен речник в определени ситуации.”

iStock Grabber v0.1

Историята е следната. В офиса и в ежедневната ми работа ползвам най-вече iStockphoto като източник на stock фотографии. Честно казано с времето сайтът ми допада все по-малко и по-малко и затова от скоро търся алтернативи, но това е отделен въпрос.

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

Едно време когато ползвах Firefox към него задължително инсталирах stock zoom. Приятен, но и малко бъгав add-on, който позволява да вземете по-голям размер на харесаното от вас изображение, така че да ви свърши работа, а не да мажете хамалската отгоре.

Случи се така, че аз спрях да ползвам Firefox, а отделно и stock zoom спря да функционира малко преди това. Причините май бяха във самите iStock, но кой знае. Все пак алтернатива за Chrome нямаше (или поне аз не знам за съществуваща) и едва наскоро реших да си напиша такава.

Реших да е нещо абсолютно елементарно и по-долу ще видите, че всъщност по-голямата част от кода е стайлинг. И така след 2 часа работа, версия 0.1 на iStock Grabber беше готова. Веднага започна тест и вече спокойно мога да кажа, че всичко е OK и работи така, както искам.

Кодът

// ==UserScript==
// @name       		iStock Grabber
// @namespace  		http://joro.me/
// @version    		0.1
// @description  	Opens a larger copy of the photo/illustration in a new window.
// @match      		http://www.istockphoto.com/stock-p*
// @match      		http://www.istockphoto.com/stock-i*
// @copyright  		2012+, Georgi Kalaydzhiev
// @require    		http://code.jquery.com/jquery-latest.js
// ==/UserScript==

jQuery.noConflict();
jQuery(document).ready( function() {
    var userScriptBarHTML = '<div id="istockgrabber"><p>Zoom, select size and...</p><a href="javascript:();">Grab Image</a></div>';

    var userScriptBarCSS = {
        'opacity' : '0',
        'margin' : '15px 0 0',
        'padding' : '10px 10px 12px',
        'border' : '1px solid #ccc',
        'font' : '700 16px/33px Arial, Tahoma, sans-serif',
        'background' : '#eee',
        'height' : '0',
        'width' : '360px'
    };

    var userScriptBarTextCSS = {
        'float' : 'left',
        'margin' : '0',
        'font' : '700 19px/37px Arial, Tahoma, sans-serif'
    }

    var userScriptBarButtonCSS = {
		'float' : 'right',
        'width' : '125px',
        'height' : '32px',
        'margin' : '0',
		'background' : '#2a98ed',
        'color' : '#fafafa',
        'text-shadow' : '0 1px 0 rgba(0, 0, 0, .3)',
        'font-weight' : 'bold',
        'text-align' : 'center',
        'text-decoration' : 'none',
        'border' : '1px solid #2473b0',
        'border-radius' : '4px',
        'box-shadow' : '0 1px 2px rgba(0, 0, 0, .3), inset 0 1px rgba(255, 255, 255, .25)'
    };

    var userScriptBarButtonHoverCSS = {
		'background' : '#4fabf3'
    };

    jQuery(userScriptBarHTML).appendTo('#file-preview').css(userScriptBarCSS).not(':animated').animate({opacity: '1', height: '32px'}, 300);
    jQuery("#istockgrabber > p").css(userScriptBarTextCSS);
    jQuery("#istockgrabber > a").css(userScriptBarButtonCSS);
    jQuery("#istockgrabber > a").hover( function() {
        jQuery(this).css(userScriptBarButtonHoverCSS);
    }, function() {
        jQuery(this).css(userScriptBarButtonCSS);
    });

    var iStockBaseURL = 'http://www.istockphoto.com';

    jQuery("#istockgrabber > a").on('click', function(){
        if (jQuery('#ZoomDraggableDiv > div[id^="s"]:visible').size() > 0) {
			var generatedURL = jQuery('#ZoomDraggableDiv > div[id^="s"]:visible > div:first-child img').attr('src');
            window.open(iStockBaseURL + generatedURL, '_blank');
        }
        else
            alert('Click on the image and select size!');
    });

});

Инсталация

Направих скриптът съвместим с най-популярните Userscript приложения – Greasemonkey и Tapermonkey. Това означава, че ако ползвате FF, трябва да свалите Greasemonkey, след това да дойдете на страницата на iStock Grabber в Userscripts.org и да цъкнете бутона Install. При Chrome процедурата е същата, но трябва да имате инсталиран Tapermonkey.

Пускам и един по-голям линк, ако случайно не сте видяли този горе – iStock Grabber v0.1.

Употреба

Идеята е проста. Вече инсталиран скриптът се активира само и единствено когато сте в iStockphoto и по-точно когато сте на страница тип: http://www.istockphoto.com/stock-photo-17437975-first-and-goal-american-football.php?st=0d6ba3c или http://www.istockphoto.com/stock-illustration-1949958-flaming-football.php?st=9f32a71, т.е. Photo/Illustration страници, тъй като само те имат опция за zoom.

Както казах, когато сте на една от тези страници, скриптът става активен и под снимката ще видите един голям бутон, гласящ “Grab Image”. Натискайки го преди да изберете големина на снимката ще излезе грешка. От вас се иска да кликнете на изображението, да изберете един от трите размера и след това да натиснете бутона. В нов таб на браузъра ви ще се отвори желаното изображение.

Това е всичко. Скриптът е елементарен, но то и приложението му е такова. Надявам се да ви върши работа.

Между другото от няколко дни насам stock zoom отново функционира, но честно казано аз смятам да се придържам към моето доста по-елементарно скриптче.

Contact
captcha