Прелюдия

Вероятно, всем известно и все прекрасно понимают, что главной частью в работе над программным продуктом, будь то сайт или настольное приложение, является совсем не процесс написания кода. Под словом главный я не подразумеваю время, которое уходит на этапы разработки, я имею ввиду наиболее важный этап, который определяет успешность дальнейшей работы над проектом. Трудно будет получить автомобиль, если на бумаге уже расписано создание велосипеда!

В рамках данной статьи я поделюсь своим опытом проектирования сайтов средней сложности. Данный подход зарекомендовал себя понятным как разработчикам, так и клиентам. Я не собираюсь открывать Америку, представленные ниже инструменты всем прекрасно знакомы. Суть данной статьи как раз в том, что бы продемонстрировать насколько просто можно представить достаточно сложные задачи.

Любите ли вы свой CSS-код так, как люблю его я? Если да, то, несомненно, стремитесь к тому, чтобы он не только хорошо себя вёл и чувствовал, но и приятно выглядел.
Надеюсь, что инструменты, описанные ниже, помогут вашему коду приблизиться к идеалу.

Привет, Хабр!

В этом топике я бы хотел рассмотреть три сервиса, чтобы читатель мог определиться, какой из них более подойдет для его бизнеса. Несмотря на то, что двое из испытуемых являются комплексными системами ведения маркетинга, я заострю внимание лишь на возможности проведения массовых почтовых рассылок. В роли кандидатов выступают следующие сервисы:



Изображения кликабельны.

В статье собраны всем известные методы и предельно извращенные. Эту статью я решил написать после недавнего прочтения поста в блоге Badass JavaScript и решил её дополнить своими находками.

Первый способ

Он всем известен — обфускация минимизаторами такими как JS Packer, JSmin, YUI Compressor, Closure compiler или можно просто пугуглить «JavaScript Obfuscator» и найдется ещё сто штук разных обфускаторов.
Они превращают существующий код

function MyClass(){
    this.foo = function(argument1, argument2){
        var addedArgs = parseInt(argument1)+parseInt(argument2);
        return addedArgs;
    }
    var anonymousInnerFunction = function(){
        // do stuff here!
    }
}

В какой-то такой вид:

function MyClass(){this.foo=function(c,b){var d=parseInt(c)+parseInt(b);return d};var a=function(){}};

Или такой:

var _0xd799=["\x66\x6F\x6F"];function MyClass(){this[_0xd799[0]]=function (_0xefcax2,_0xefcax3){var _0xefcax4=parseInt(_0xefcax2)+parseInt(_0xefcax3);return _0xefcax4;} ;var _0xefcax5=function (){} ;} ;

Или вот такой:

eval(function(p,a,c,k,e,d){e=function(c){return c};if(!''.replace(/^/,String)){while(c--){d[c]=k[c]||c}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('4 0="3 5!";9 2(1){6(1+"\\7"+0)}2("8");',10,10,'a|msg|MsgBox|Hello|var|World|alert|n|OK|function'.split('|'),0,{}))

Но ничего не стоит его восстановить с помощью jsbeautifier.org либо просто убрать eval и получить исходный код, многое потеряем, но смысл кода восстановим. Ну и с первого взгляда мы видим, что перед нами JavaScript.

Все это были цветочки под катом жесткие методы обфускации.

Предлагаю ознакомиться с небольшим набором инструментов для веб-разработки, которые могут сделать вашу жизнь проще. Все сервисы бесплатны и просты в использовании, но (как обычно) есть и минус – они все на английском, хотя когда и кого это останавливало?)

В далеком 2008 году уже была написана подобная статья и я попытался применить знания, но, к сожалению, не справился с русским языком (на denwer-е работал, на хостинге нет). Возможно сказалось отсутствие опыта. А недавно нашел хорошую библиотеку и решил поделиться. Топик, скорее всего, адресован начинающим программистом и ни на, что не претендует.

Email

• Swift Mailer
  Swift Mailer легко интегрируется в любое PHP-приложение. Это гибкий и элегантный ООП-подход к отправке писем с множеством функций: отправка эл.почты, используя SMTP, SendMail, Postfix, поддержка серверов и др.
  
• PHPMailer
  Лучший класс для работы с эл. почтой. Поддерживает сообщения в цифровой форме, S/MIME шифрование, текстовые и HTML-письма, изображения, поддерживает несколько Email’ов, SMTP-аутентификация.
  

Dompdf — класс написанный на PHP 5 для преобразования HTML в PDF.
Проблема конвертации html в pdf встречается не так часто, но все же возникает у некоторых веб-мастеров.

Где то полгода назад я сильно увлекся OpenID и всем что с ним связанно. Моим главным занятием в это время стало — неспешное чтение спецификаций, форумов, блогов и хабрапостов OpenID тематики.

Все знания, которые мной были получены за это время, я «материализовал» в проекте компании, в которой собственно я работаю.

Изучая спецификацию OpenID и прочих его расширениях (SREG, AX) и надстройках, мне пришла идея разработать JavaScript виджет со своим API-прослойкой, в помощь другим разработчикам нежелающим «коротать» дни и ночи изучая спеки различных способов авторизации и их расширений.

Собственно об этом далее.

Старая поговорка «Лучше один раз увидеть, чем сто раз услышать» очень точно описывает, что разработчикам может дать создание прототипа интерфейса: визуальное представление, значительно более наглядно описывающие вопросы дизайна проекта и разработки функционала. В итеративном подходе к дизайну пользовательского интерфейса используется быстрое проектирование в процессе создания набросков системы (будь то веб-сайт или приложение) и утверждение их у обширной группы представителей заказчика, заинтересованных сторон, разработчиков и дизайнеров. Если придерживаться этого подхода — можно получить обратную связь раньше (чаще всего прямо в процессе обсуждения), что значительно улучшает качество дизайна конечного продукта и уменьшает потребности во внесении изменений в процессе разработки.

О скруглении углов в html-верстке сказано уже столько, что я пойму тех кто прочитав заголовок иронично улыбнется и подумает «опять 25, ну сколько можно...». Поэтому я постараюсь кратко изложить суть, и сразу предупрежу, что этот метод вы едва ли могли видеть раньше.

Помню, как-то проскакивала пара записей (здесь и здесь) по поводу импортирования данных из Google Analytics для отображения сводных диаграмм на сайте, в общем, как на хабре. Прочитав вышеупомянутые топики и не обратив особого внимания тогда, я о них успешно «забыл» и пошел себе дальше. И вот сейчас, появилась необходимость реализовать нечто подобное на одном из своих проектов.



Просмотрев хабр еще раз, с удивлением обнаружил, что тогда так никто и не нашел какого-либо решения для реализации данной задачи. Поэтому, решил накропать скриптик для экспорта данных из GA и отображения их на сайте. Собственно, им и хочу поделиться с общественностью.

UPDATE:
Добавил еще одну версию, подробности и линк под катом.

Сейчас практически на каждом сайте есть кнопки для перехода на сайт твитера или добавление странички в закладки. Но почему-то очень мало можно увидеть иконок Wikipedia возле фамилий великих людей или терминов.

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



Если учитывать, что только активные пользователи нажмут на кнопку «Оставить свой отзыв» и проголосуют, то наверно 33 голоса можно умножить на 10 – 100.

Разобравшись с api Wikipedia хочется предложить решение как можно немного автоматизировать добавление линков на википедию.

Решил проводить регулярные лекции и практические занятия со своими сотрудниками по программированию на PHP, MySQL, Javascript. А также другим технологиям необходимым для выпуска качественных сайтов. Начать решил с самого «верха», с HTML тэгов. Буду рад, любым комментариям :)
Сразу оговорюсь, что бОльшая часть информации я нашел в интернете, внизу статьи будут приведены ссылки на источники. Часть информации была переведена совместно с google translate.
Итак:

Почему так важен DOCTYPE

Вроде бы вы сделали все правильно, но ваш сайт почему-то не выглядит или не работает, как ожидалось, в последних версиях броузеров.
Вы написали правильный стандартный XHTML код и стандартный CSS. Вы воспользовались стандартной спецификацией для работы с DOM (Document Object Model), чтобы управлять динамическими элементами на странице. И все-таки, в броузерах, которые казалось бы сделаны с соблюдением именно этих стандартов, ваш сайт не работает. Скорей всего, ошибка кроется в неправильном заголовке DOCTYPE.
Эта небольшая статья расскажет вам о заголовках DOCTYPE, которые работают, а также объяснит практическое и теоретическое значение этого, казалось бы отвлеченного от реальности, тега.

Минимализм vs. простота

Я постоянно слышу термин «минимализм» и «минималистический». В мире дизайна есть разные способы, чтобы описать дизайн, простой, ясный и удобный. Однако большинство используют термин — «минимализм». Если вы собираетесь использовать это слово, то по крайней мере потрудитесь понять истинное значение и использовать его правильно. Первое, что нужно понимать, что простота — это не минимализм. Они похожи, но они не то же самое.

Если есть хорошая идея и безудержное желание работать, то начинающему предпринимателю не нужен стартовый капитал. Даже в американском интернет-бизнесе, где нет проблем с инвесторами, всё чаще появляются так называемые сверхлёгкие стартапы (ultralight startups), созданные без венчурного финансирования, одним человеком с минимальным вложением средств.



Парень на фотографии — 19-летний студент Рэймонд Лэй (Raymond Lei) из Беркли. В августе его сайт ooShirts.com по дизайну индивидуальных футболок имел оборот $60 000, а по итогам года он рассчитывает на $700 000. При этом все вложения в бизнес не превысили $2200 на работу индийского программиста и раскрутку сайта в поисковиках по ключевым словам вроде [custom T-shirts].

Довольно часто я наступаю на одни и те же грабли. Стараясь выполнить какой-нибудь проект побыстрее, я с головой ухожу в реализацию необходимой функциональности. А через неделю, мне на глаза обязательно попадается описание библиотеки, фреймворка или плагина, воспользовавшись которыми, я мог бы выполнить свою часть работы в разы быстрее. В общем, сейчас я стараюсь быть в курсе готовых решений в интересующих меня областях. В последнее время мне часто приходится работать с javascript и поэтому, сейчас я уделяю особое внимание библиотеке jQuery и ее плагинам. Должен сказать, что упускать из виду такое разнообразие готовых решений просто нельзя. Данная статья сделана на основе обзора «50 Awesome New jQuery Plugins», который я прочитал пару дней назад.

   Интереса ради пробежался по личным сообщениям на сайте – с начала года обзор этого нетбука попросили сделать почти 20 человек.





   Прошло немало времени и наверняка все они уже давно себе что-то купили, но я решил, что лучше поздно, чем никогда – встречайте, ASUS EeePC 1201n!

Все, кто пользуется веб-интерфейсом gmail, наверняка замечали, как гугл заботится о нас и не даёт закрыть страницу, если мы начали составлять письмо и не сохранили его в черновики. И понадобилось мне для своего проекта сделать нечто похожее.

Сперва сделал это используя window.onbeforeunload, но злая опера не поддерживает это событие.
Призадумался, попутно нашёл плагин для jquery под названием FormNavigate.

Однажды на просторах Хабра встретил плагин FormNavigate (требующий у пользователя подтверждения на закрытие вкладки или переход по ссылке, когда данные в форме заполнены, а-ля gmail), а однажды потребовалось его даже применить.

Но тот вид в котором плагин был меня не устроил и я позволил себе немного его переписать.

Так, например, мне неудобно было выбирать те ссылки, на которых следует отлавливать подтверждения, а наоборот требовалось указывать ссылки на которые действие плагина не будет распространяться. Тут продвинутые разработчики начнут меня закидывать помидорами, что я не знаю правильную работу селекторов в jQuery. Но это не так, сами можете проверить как работает прошлая версия плагина, например, для: $('a:not([class~="ajax"])') (предложенный автором прошлого топика $('a:[class!="ajax"]') вообще вытворяла чудеса).