Вчера мина WWDC 2010, Apple обявиха новия iPhone 4 и iOS4. Общо взето всичко което се каза може да се събере в 4.52 минути:
И малко след това излезе и Safari 5, което незнайно защо беше “леко” забравено в презентацията.
п.п. И за тези, който имат повече време може да изгледате целия keynote от тук.
п.п.2 Видеото горе е доста по-добре от стандартното amazing, asome, incredible.
Като цяло тази седмица мина под знака на Rails 3, на който излезе бета версия.
SafeBuffers and Rails 3.0 – в Rails 3 има вградена xss защита, и Yehuda Katz обяснява последните промени по тази система и защо са се наложили.
8 Chrome Extensions For Web Developers – Напоследък Firefox започва да се държи все по зле и леко да изостава от браузъри като Chrome и Safari. И докато в Safari все още ми липсват 2-3 малки неща, то Chrome може в много скоро време да стане предпочитания ми браузър.
Google Apps Drop IE6 Support – Е време беше. След скорошната атака срещу Google извършена с IE6, Google решиха да дръпнат шалтера на това нещо. В Германия вече го забраниха, така че още малко живот му остава. И усещам как скоро ще се вдигнем мерника към IE7.
One-click Minifier Gadget (OMG) – initial checkin – Българското Yahoo! гуру Стоян Стефанов пусна много полезен инструмент за минимизиране. Кода го има в github. ( Статията е от 31 Януари, но чак във Вторник я видях )
Basic Cappuccino Tutorial - Добър на урок за Cappuccino. Което е добре защото, един от най-големите проблеми на Cappuccino, според мен, е липсата на добра документация и уроци.
How Internet Explorer 8 document mode affects JavaScript – Оказва се че в IE8 имало доста промени по самия JavaScript. Nicholas C. Zakas разяснява голяма част от тях.
The touch action – В България до голяма степен сме 1-2 години назад в IT отношение. Така че е доста лесно да се предскаже че в следващите години и у нас както навън ще навлязат все повече “умни телефони” и особено такива с touch screen (то май всички са такива). Затова е важно да се знае как може да се работи със touch събитието. В Quirksmode имаше цяла серия за тези събития през седмицата.
an HTML5 offline image editor and uploader application – Наскоро започнах да правя първите залежи за новата ни cms система ControlDepo 4. И мисля в нея да вградя нещото такова в една или друга степен.
HipHop for PHP: Move Fast – Това беше новината на деня. Facebook пуснаха HipHop, което компилира (или по-точно трансформира) PHP кода до оптимизиран C++ код, който след това се компилира с g++. От което е излишно да казвам какви са ползите като скорост и CPU. За повече подробности самия пост и това видео.
Явно вторник е бил много “натоварен” ден. 
YUI Theater — Douglas Crockford: “Crockford on JavaScript — Volume 1: The Early Years” – Когато Douglas Crockford, говори и Чък Норис слуша . В случая говори за история на JavaScript и програмните езици като цяло. Първите 10-15 са необичайно скучни. Главно защото говори за първите компютри и темата е повече насочена към хардуера от колкото към софтуера. Но после нещата се оправят.
Stop Being an Idiot – Колкото пъти сме се оправдавали с това че потребителите са “идиоти”, е време е да спрем.
The Rails Module (in Rails 3) - Rails 3 идва с доста променен Rails module, в който има доста полезни методи. От тази статия може да се научат доста странични неща за Rails като цяло.
Също интересен факт е и че Basecamp стана на 6 години. Като един ден преди това стори и Facebook. Което като се замисли човек е много странно съвпадение. Защото никои не може да се отрече че и двата продукта косвено или директно промениха мрежата.
SD Ruby – Episode 077: Building Your Own Hosting Environment – това стои във readera ми от доста време, но чак в Петък имах време и повод да го гледам. Доста добро ми се стори и ако някои мисли сам да си хоста Rails приложенията ( и даже каквото и да е друго сам да си хоства) е много добра начална точка.
Преч седмица най-сетне намерих една от най-запомнящите реклами, който съм гледал (незнайно защо бях останал с впечатлението че е за Ferrari, а тя била за Porsche ):
Преди една година (ехе толкова ли много време мина от тогава) бях започнал да пиша за интересни неща, които съм видял през изминала седмица и които според мен не са получили подобаващото им се медийно представяне. Само че с времето спрях тази традиция, още преди да се превърне в такава даже. Но тъй като съм решил тази година да отделям малко повече на блога. Ще започвам да по съживявам някои стари идеи и да видим какво ще стане
По принцип идеята ми е петък да ги пускам тези постове, обаче тази седмица имах изпит и за това малко се отложи поста.
A successful Git branching model – От доста време вече ползвам само git и съм супер доволен от него. Въпреки това все още ползвам само една малка част от възможностите му. Затова този пост ми беше много полезен.
Jemini – В Понеделник попаднах и на Jamini това е (J)Ruby famework за правене на игри. Нещо което ми беше мечта когато за пръв път започнах да пиша код.
Creating UI Elements With Low-Coupling And Conditional Event Handling – Не използвам jQuery, но понякога от там излизат доста полезни неща. Този пост на Ben Nadel като цяло е много полезен. Основната идея да се използва нещо като MCV и event архитектура и така да се правят компоненти които взаимодействат по между си, но без да знаят, че го правят. Като от личен опит мога да кажа, че правенето на компоненти които взаимодействат само с custom event-и по между си е страшно яко.
За развитие на темата бих препоръчал и да се гледа Satyen Desai — A Widget Walkthrough, от yahoo винаги са правили страхотни видеота.
Cappuccino On Rails – това не е от Вторник, но тогава го видях. А Cappuccino ( и SproutCore ) са два проекта, който следя с особен интерес. Още повече интеграцията им с Ruby става все по-лесна
Stanford’s Entrepreneurship Corner: David Heinemeier Hansson - От Stanford Entrepreneurship Corner винаги са вадили интересни материали ( все пак са Stanford ). Забавно беше и началото, един монотонен глас съобщи – “Този запис, може да съдържа език не подходящ за всеки” 
Интересно беше да го слушаш това и да учиш за поредния безсмислен изпит.
Четвъртък го прескочих, все пак учих за изпит, или поне се опитвах. Въпреки това:
Firefox 3.6 is here! – новата версия е тук. Като потребител това което ми харесва е че се усеща колко по-бърза. Също така все повече почва да свиквам с това че като дадеш “open in new tab” табулацията се отваря до сегашния ти там. Като разработчик няма как да не се зарадвам на CSS3 градиентите, Drag and Drop и File API -то.
Fusebox – jdalton направи серия от четири видеота за това какво представляват sandboxed natives и как той ги е реализирал. Като в края на седмицата пусна и самия Fusebox, което е част от от FuseJs, за която все още няма много информация освен че скоро ще се появи. И като гледам списъка с хората които работят ще е нещо добро.
И на края искам да сложа едно видео на Louis CK – “Everythings amazing nobody is happy” ( което го видях от презентацията на Dion Almaer от JSConf – Future of the Web )
В последно време много се дразня на хората, които си мисля, че изграждането на един сайт е супер проста и лесна работа. И че от техническа гледна точка един сайт (или даже уеб приложение) е в пъти по-прост от едно десктоп приложение. Затова реших да драсна няколко реда, за някои от важните неща за който трябва да се мисли в един сайт от frontend страната.
За създаването на един сайт, трябва html. По принцип html е просто нещо, но и той като php-то е “измамно лесен”. За една добра html структура какво трябва да се гледа?
Първо дали е семантична – всеки html си има някакво значение. И това значение трябва да се ползва. Въпреки, че понякога това е много трудно. Примерно тага за списък <ul> трябва да се използва всеки път, когато има меню или списък от каквото и да е естество. За всяка форма към всеки елемент трябва да има <label> със съответния for атрибут, оказващ за кои елемент е този label. И т.н.
След това идва и seo-то. Много е важно html да е построен така, че една търсеща машина (google например) много лесно да може да се ориентира в самия сайт какво има. От една страна това е свързано със семантиката на html. Примерно е важно заглавието на страницата да е със <h1>, да има коректни meta тагове (по възможност различни за всяка страница), всяка връзка, ако няма текст, да има поне title атрибут. Както и всяка картинка. Също така е важно и реда на връзките в html къде ще са, за google колкото по-нагоре е връзката толкова по-голям приоритет има. Затова примерно в даден сайт в кода текста на страницата може да е преди менюто, но визуално менюто да е от ляво, а текста от дясно.
Всеки сайт трябва да има картинки, нали така? Обаче и тук има няколко особености. Като за начало е важно да се разграничат два вида картинки – едните са част от дизайна на сайта, а другите са част от неговото съдържание. Тези, които са част от дизайна са примерно фона на сайта, различни орнаменти и други подобни. А тези които са част от съдържанието са примерно снимки на продукт, ако това е каталожен сайт или снимка от новина, ако в сайта има новини.
При добре свършена работа <img> тага се ползва само за снимки от съдържанието. Като всяка една от тях трябва да има алтернативен текст в alt пропъртито. Докато другите картинки, част от дизайна, се слагат като фон чрез css (за него по-долу).
Много важна е оптимизацията на снимките. Като за начало е почти задължително вече всички картинки от дизайна да се обединяват в sprite. Т.е. да се обединят в една снимка и тя да се прилага. Вече, в зависимост от дизайна, може да се ползват и няколко sprite-а. Така от една страна е по-лесно да се организира сайта (колкото и странно да се струва това на пръв поглед). От друга, сайтът се зарежда по-бързо, защото трябва да се изтегли само една снимка, а не примерно 10-20.
Също така е важно всяка снимка (особено sprite) да мине през нещо като SmushIt, за да и се намали размера, като и се изчистят ненужни мета данни.
Друга важна подробност е, че ако по дизайн някоя връзка, примерно от менюто, трябва да е картинка (например, защото там се ползва някой изчанчен шрифт с antialiasing), тя трябва да се сложи като фон. А текста, който е написан в нея, да се сложи и като title атрибут на връзката и да се сложи като текст в самата връзка (и да се скрие с css).
Стиловете трябва да са отделени в css файл, за предпочитане само в един за по-лесно зареждане. Не е препоръчително ползването на <style> тага или inline стилове (style=”").
Ако се ползват стилове предназначени само за IE, не трябва да се ползват с хакове, а да са отделени във файлове според версията на IE чрез conditional comments. Например <!–[if lte IE 6]> <link rel=”stylesheet” type=”text/css” href=”stylesheets/IE6fix.css” /> <![endif]–> ще зареди файл важащ само за версии на IE до 6 включително. Стиловете трябва да се организират поне според структурата на html-а (header, content, sidebar, footer…) и по значението им (за текст, форми, заглавия…).
Не лоша идея е да се използва css reset.
Хубаво е пропъртитата да са подредени по азбучен ред и задължително да се ползват shorthand. Например padding-top: 5px; padding-right: 15px; padding-bottom: 12px; padding-left: 10px може да се изпише padding: 5px 15px 12px 10px. Имената на class и id трябва да са смислени, указващи частта от html, за която са предназначени (header, footer, nav_main, nav_categories). Ползването на дълги селектори като #header .menu .home li a се отразява зле на IE, а и по принцип е затормозяващо.
Ползването на нови селектори като box-shadow не е невъзможно, тъй като те имат поддръжка или алтернатива в повечето браузъри, включително IE, което намалява значително ползването на изображения. За намаляване и оптимизиране на css кода могат да се ползват css компресори, но такива, които не ползват нестандартни вредящи похвати, като да заменят strong с b. Освен това може да се приложи компресия gzip.
JavaScript е един от най-неразбраните програмни езици в света. Поради различни причини, за които, ако трябва да пиша, ще ми трябват поне 1-2 поста още. Но въпреки това е един от любимите ми езици.
Надявам се да не се налага да казвам че всичкия JavaScript трябва да е unobtrusive.
За JavaScript си имам едно правило – всичко в сайта трябва да работи без javascript. Тук идеята е следната. Ако примерно имаме галерия със снимки – една голяма и малки тъмбнейли – при натискане на даден тъмбнейл се сменя голямата снимка. Обаче ако няма javascript, какво правим? Много просто – всяка снимка при натискане да се отваря в нов прозорец, за да може потребителя така или иначе да я види. А ако има javascript просто ще спрем отварянето и ще я покажем с хубав ефект.
Естествено, има неща, които без javascript не работят. Тук правя следното – просто ги крия, т.е. при зареждане на страницата са маркирани като невидими и след като се зареди javascript-а ги показвам.
Само тук искам да отбележа, че става дума за най-нормален сайт, който трябва да бъде достъпен отвсякъде и понякога без JavaScript просто няма накъде.
Yahoo имат един списък с браузъри – http://developer.yahoo.com/yui/articles/gbs/. Дефакто в A-Grade (и IE6) браузърите се налага сайта да работи. За IE6 може и да не работи толкова добре. Все пак, който ползва IE6 (и като цялата IE фамилия де), си е свикнал да не вижда хубави работи…
Една от новите ми любими теми.
Като за начало има 2 инструмента, с които може да се замери скоростта на сайта по различни показатели (става дума само за html/css/js/assets часта) – YSlow и Google Page Speed.
Някои от най-важните неща са:
Една нова дума взе да се появява из различни презентации и постове при темата за Скорост и това е – Progressive HTML Rendering.
Идеята там е, че за потребителя страницата се “построява” пред очите му и така се създава усещането за скорост. За това много помага JavaScript да е възможно най-долу. Защото когато браузърът стигне <script> таг, забравя всичко останало. Затова много хора се насочват към това с малко javascript да зареждат останалия javascript, защото така не се блокира нишката на браузъра.
И това е само една малка част от нещата, които се правят само по обвивката на един сайт. По принцип за всяка точка тук може да се пишат серии от постове. Да не говорим колко много развитие и промени има по темата.
Естествено. винаги може някой да си хване един dreamweaver и да си нареди 2-3 картинки и да каже, че има сайт. То и аз така съм почнал. Но в един момент това си е професия със своите тънкости и особености. Даже и името и е много яко - Frontend Engineering.
п.п. Само да вметна, че аз се водя web developer в Pixel Depo и основно работя по нещата, които стоят под frontend-a и JavaScript-a .
Измина малко повече от година (1 година и 4ри дни да сме точни) от излизането на Firefox 3. Още със самото си излизане подобри рекорди. Но мина една година и какво се случи през нея със Firefox и браузърите като цяло.
Като начало всички вървят напред към HTML5, доста браузъри вече имат html5 благини като <canvas>/<video>/Selector API/Storage/Data Attributes.
Същевременно има и нова версия на EcmaScript – 5 (т.е. JavaScript) и се очаква до края на година в браузърите да започват да се появяват части от новата спецификация. Която поне на хартия изглежда много обещаващо.
И след като беше подобрен рекордът брояча за свалянията на Firefox работи и момента е на скромните – 28,340,281.
В момента аз съм със версия Firefox 3.0.11. Преди време бях писал за 3.1, но такава версия няма да има. Поради факта че в 3.1 има много промени по Firefox версията ще е номерирана 3.5 и се очаква да излезе до месец най-много. За нея имам надеждата, че ще стане както при Firefox 2, която се водеше бавна, и заемаща много RAM. И при излизането на тройката всичко беше перфектно. Сега година след това отново се чува от всякъде за версия 3, че Firefox е бавен и много тежък. Така че много се надявам 3.5 да е достатъчно бърз. И от тази статия Chrome and Firefox 3.5 Memory Usage – поне нещата изглеждат много добре.
Друго нещо за което много чакам 3.5 са и няколко CSS добавки, които въпреки че не се виждат под 3.0 ги ползвам в 90% от административните модули на сайтове, който правим в pixeldepo. И така при самото излизане на 3.5 ще има доста доволни клиенти
Преди няколко седмици излезе версия четири, която утвърди Safari като един от най-добрите браузъри. Също така Safari е много близо до това да замени Firefox като браузъра, който ползвам всеки ден. Общо взето ако ги имаше “малките неща” от Firefox в Safari, щях да съм забравил отдавна за Firefox. Но ако Firfox 3.5 не скъси малко границата със Safari може и да забравя тези неща. Защото за момента според мен Safari е най-добрия браузър на пазара.
Chrome, беше изненадващ ход от страна на Google, за него писах няколко пъти тази година. Това, че ползва WebKit, го прави много лесен за работа, т.е. да правиш неща за него. Подобно на Safari-то с него съм нямал проблеми до сега. Има красив интерфейс и много ме радва, че все повече познати го ползват.
Като стана дума за проблеми. Opera е браузърът който ми е създавал най-много главоболия тази година. Даже повече от IE6! Това се обяснява с факта, че като цяло Opera е малко използван и бъговете за него не са толкова известни.
Но за самата Opera как беше година? По различни статистики Opera най-много пострада от Chrome. Голяма част от пазарния дял на Chrome идва от този на Opera (което мен лично ме радва).
Друго интересно нещо е че Opera 10b идва, което е проблем за много js библиотеки. Тъй като е първия браузър който стига двуцифрен номер, той има честа да се сблъска с Browser Detection проблем. Т.е. за много библиотеки Opera 10 е Opera 1, защото вземат само първото числи от версията на браузъра Затова Opera 10 ще се води версия 9.8 (нещо като това че Windows 7, същност ще е 6.1)
При IE-та също не беше много тихо тази година. Продължава борбата за намаляване на IE6 и доста хора и компании спряха да грижат за IE6, което според ме е правилното решени.
Излезе IE8, като единственото добро нещо което може да се каже за него, е че е доста по-добър от IE7. Все още е светлинни години от добрите браузъри като Firefox, Safari и Chrome, че даже и от Opera. Няма да забравя първия път като го пуснах, колко грозен ми се стори целия му интерфейс. Като цяло са налага на Microsoft да дават $10 000 на хората за да го ползват (което ми напомня за тази Mac vs PC реклама).
И като стана дума за Microsoft и реклама, за IE8 беше пусната и доста смешна (да не кажа по-остра дума) таблица с това колко IE8 е по-добър от Firefox / Chrome. Самата таблица като я гледах и си мислех кое от кое звучи по-смешно – Performance, Web Standards или Developer Tools, не можах да избера. Всичко изглежда толкова смешно и жалко. Дано не и се вържат много нормални хора, защото не вярвам някои нормално мислещ developer да се хване.
За повече информация относно IEтата, препоръчвам тази статия: QuirksBlog: State of the Browsers – IE edition
Миналата година беше доста интересна и забавна и според много хора маркира началото на новите Browser Wars. До колко това е така, всеки може да прецени за себе си. Но поне според мен бъдещето е доста светло – по-бързи браузъри, по-вече стандарти ( в добрия смисъл на думата), html5, подобрен javascript, по-малко IE6
