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 отново функционира, но честно казано аз смятам да се придържам към моето доста по-елементарно скриптче.

Що е то DOCTYPE?

Какво е Doctype? На този въпрос по-оптините от вас вероятно биха се изсмяли, но е факт, че повечето хора не знаят и съответно не го ползват, а оттам произлизат големи проблеми. Но дори и най-опитните хора имат пропуски в знанията си за Doctype, защото от гордост пренебрегват елементарните неща.

Не претендирам, че след прочитането на статията ще сте абсолютно запознати с материята, но смятам, че е една добра отправна точка и спокойно може да си избистрите главата с нея.

прочети нататък »

Съвети и трикове за CSS оптимизация

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

Оптимизацията не винаги може да бъде на 100%, но с този урок ще се опитам да помогна на “прохождащите” писачи на CSS да изградят навици или просто да си харесат някоя завъртяна техника, с която да оптимизират своя CSS файл. Имайте едно на ум, че всъщност оптимизацията на CSS-а започва още със структурирането на HTML документа!

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

прочети нататък »

Codecademy – learn to code!

Какво е Codecademy? Яде ли се, пие ли се, пипа ли се? Мисля, че авторите са го описали доста добре, така че ще си позволя да ги цитирам:

Codecademy is the easiest way to learn how to code. It’s interactive, fun, and you can do it with your friends.

Сега… тва you can do it with your friends можеха да го спестят, ама айде…

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

Цъкайки бутончето Learn, пред вас се открива списъкът с актуални теми, всяка от които е разделена на две части – уроци и проекти. Не бих ги нарекъл теоретична и практична част, по-скоро и двете са практични, но в проектите имате реален пример и цел. Самите уроци са разделени на секции, а те са пълни с упражнения, които ви поднасят информацията лъжичка по лъжичка.

В момента на разположение имате уроци само за JavaScript, но в бъдеще се очакват такива за Ruby и Python.

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

Къде е забавната част? Ако сте геймърче и ползвате Steam, знаете за така наречените acheivments, които реално погледнато са нещо като допълнителен тип “мисии” в игрите и при изпълнението им получавате… лично удовлетворение. Примери: Убий 10 врага с еди-кое-си-оръжие и един изстрел; Мини това ниво на еди-коя-си трудност, заобиколи 5 бели заека и намери 3 кокошки и т.н. Колкото и елементарно да звучи това всъщност обогатява доста геймплея и отделно, че вкарва няколко часа допълнително игрово време.

В Codecademy има нещо подобно, с малката разлика, че не се налага да правите някакви специални подвизи. Тук, при решаване на дадено упражнение ви се дават определен брой точки, а при правилно решение на цял урок, получавате badge, който с гордост може да си наблюдавате в секцията Acheivments. Всички тези неща се тракват в реално време и може да ги следите на лентата в горната част на екрана. И тъй като хората обичат да следят прогреса си, обичат точките, обичат да събират ненужни неща и обичат да бъдат възнаграждавани, това нещо работи! Стимулира и определено уроците не доскучават.

Мисля, че тук е подходящият момент да вметна, че самите уроци се пишат от потребителите. До приятния бутон Learn има друг – Create, чрез който може да спомогнете за развитието на къмюнитито по няколко начина – да напишете урок за определена тема, която авторите са сметнали за важна или да го карате на freestyle. Аз честно казано още не съм се пробвал дори да проуча целия процес, но смятам като завърша всички налични (за момента) уроци, да си пробвам шанса.

И след всичките положителни неща, които изтъкнах, ред е на не толкова приятните. Първо, някои упражнения са написани убийствено малоумно. Първоначално си мислех, че автора нарочно ме кара да отгатвам половината условие, но после разбрах, че просто не си е свършил работата (че и тези дето одобряват). Наистина понякога просто не можех да разбера какво се иска от мен и губех доста време в догатки. Вторият проблем е дори по-досаден. На няколко места ми се случи да намеря правилното решение, но въпреки това системата да не го отчита. В тези случаи ми се наложи да се допитам до Q&A секцията и проблемът не се оказа в мен, а в точно определените неща, които трябва да напиша. Един бърз пример. В една секция с 8 упражнения съм на предпоследното и решението ми е правилно, но не го отчита като такова. Влизам аз да проверя за какво иде реч и какво да видя – оказва се, че трябва да използвам точно определено име на променлива, което не е указано в условието на упражнение номер 7, а в това на номер 3 примерно. За щастие броят изцепки във вече над 600-те упражения, които направих е наистина много малък, но според мен с тези неща шега не бива, защото това са уроци и все пак хората се водят по тях. Във повечето случаи аз бях убеден в решението, но имаше ситуации, в които правих точно това, което ми се казва, а нещата не се получаваха и това е кофти.

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

За финал два линка, които могат да ви бъдат полезни – Codecademy Labs е място, на което може просто да си пишете някакъв код, а Codecademy Glossary е малка и спретната документация.

Това е от мен & may the code be with you!

По-лесно и удобно навигиране чрез Animated Scroll и jQuery

Ако не съм ви го казвал досега – обичам простичките неща. Защо? Защото, колкото по-просто е направено дадено нещо, то вероятността да се развали/счупи/спре да работи е по-малка. Другата причина е, че обикновено сложните неща са съставени от прости, т.е. за да схванете логиката трябва да се почне от А и Б. Днешният урок е типичен пример за това как с един наглед простичък метод, може да се постигне доста приятен краен резултат.

Както всички добре знаем, без HTML нищо от това, което четете в момена няма да бъде реалност. Всичко от най-семплия до най-препълнения с модерни технологии сайт е зависимо от HTML. “Бащата” на езика, британският физик Тим Бърнърс-Лий, днес е директор на консорциума W3C. По времето, когато е работил в ЦЕРН той е получил задача да улесни работата на своите колеги, като измисли по-лесен начин за достъп и обработка на информацията от провеждащите се научни изследвания. Един вид трябвало им страхотна документация, за да извличат максимума от работата си. Така се ражда и HTML (HyperText Markup Language), който първоначално имал доста ограничени възможности, но заради лесната употреба и възможността да бъде четен от множество потребители той свършил прекрасна работа.

И след този кратък урок по история предполагам вече сте се досетили, че днес ще си говорим за това как да направим една документация, една книга или защо не един цял сайт – по-удобни. А удобството обикновено в голяма степен се дължи на навигацията.

прочети нататък »

Contact
captcha