Данным постом мы открываем рубрику «Переводы» в нашем блоге. Почему мы решили открыть такую рубрику? Дело в том, что сотни специалистов, работающих в Mail.Ru Group, для решения стоящих перед ними задач ежедневно прочитывают множество интересных статей и постов на форумах. Некоторые из них кажутся нам интересными, и мы считаем своим долгом перевести их на русский и поделиться этими ценными знаниями с Хабражителями.

Пользуясь случаем, хотим сообщить новость: сегодня состоялось открытие Технопарка — нашего образовательного проекта, о котором мы уже не раз писали на Хабре (например, тут, тут и тут). Теперь у технопарковцев есть свое собственное помещение. Изначально Технопарк задуман как место, где талантливые студенты МГТУ им. Баумана могут получить дополнительное образование в сфере веб-разработки, дизайна и программирования, а также окунуться в работу над реальными проектами высокой сложности. В общем, у Технопарка сегодня знаменательный день, и поэтому первый выпуск в рубрике «Переводы» мы решили посвятить образовательным ресурсам для веб-разработчиков и веб-дизайнеров. Ведь пока такие Технопарки не распространились по всей стране, разработчикам зачастую приходится заниматься исключительно самообразованием.

Как-то обеспокоился наличием собственного FTP-сервака. Тем более под это дело «на помойку» был отдан комп этак десятилетней давности. Так как я человек хоть и виндовый, но начинал с чистого ДОСа (про книжки тов. Фигурнова кто помнит?), то я решил сделать все на линуксе. В линуксе я был ноль полный. Еще и усложнил задачу — только консоль, никаких исков (как же — это ж линукс). Дистрибутивом был выбран Debian. Так получилось, что надобность в 2Тб личном хранилице отпала через год и комп был отдан в хорошие руки, а хард пристроен в нужное место. Но был накоплен неплохой опыт стопроцентного новичка. Какие только глупые ошибки я не совершал поначалу! И хабр читал, между прочим, пока разбирался с проблемами. Поэтому эту свою дебютную (первую) статью на хабре я посвящаю тем, кто хочет заняться линуксом с нуля и эта статья призвана для плавного ввода «в тему», являясь, по сути, фильтрацией и систематизацией всего того, что я нашел на просторах интернета. Ранее я этот материал уже публиковал, но, думаю, на хабре он тоже будет полезен.

Всем привет. Недавно появилась необходимость поднятие VPS на debian 7 за скромные деньги.
О плясках с бубенчиком я бы хотел описать тут в подробностях.
Всё в этом посте было собрано на просторах интернета, доработано, разжевано и скинуто в одну статью.


Выбор пал на https://account.nt-vps.ru/register/ из-за низких цен и неплохой стабильности за эти деньги(правда 2 дня были серьезные проблемы с сетью). Был взят VPS за 5 рублей в сутки(или за 150р в месяц) с небольшими конфигурациями ОЗУ 128mb и 10Гб на диске.

В автоматическом режиме был установлен Debian 7.0 x86-64 Wheezy и VPS была готова к работе.
64 битная сиcтема была выбрана лишь для моих личных нужд, а вам же советую, на этом VPS, ставить x86.

NB: Это материал для тех, кто уже ознакомился с теоретической основой node.js и хочет, как говорится, с места в карьер — поскорей окунуться в разработку с применением этого инструмента. Никакой дедукции, only coding. Если заинтересовало, не стесняемся, проходим под кат.

Для многих, кто никогда не программировал, обучение программированию кажется невероятно сложной задачей. Как бы то ни было, спасибо тому огромному количеству ресурсов, которые недавно стали доступны в Интернет и являются бесплатными — самообучение программированию никогда еще не было таким простым.

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

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

Меня давно занимал вопрос: «а что, если попробовать прогнать цифровую запись песни через преобразование Фурье, посмотреть зависимость спектра от времени и попытаться вытащить из полученной информации аккорды песни?». Вот, наконец, нашел время попробовать…

Некий dypsilon выложил на GitHub огромную коллекцию ссылок на ресурсы по веб-разработке, за что ему огромное спасибо.

Список состоит из ссылок на библиотеки, руководства и статьи.

Frontend: github.com/dypsilon/frontend-dev-bookmarks
Backend: gist.github.com/dypsilon/5819528 (много node.js)

Ссылок много, но все — строго по делу и упорядочены по группам (пример для фронтенда):

1. Архитектура
2. Фреймворки
3. Cross Browser
4. Cross Device
5. Паттерны и сниппеты
6. Манипуляция с DOM
7. … и многое другое

matmuchrapna советует еще frontdesk Вячеслава Олиянчука.
Настоятельно рекомендуется добавить в закладки, а лучше — почитать.

Ни для кого не секрет, что e-mail маркетинг только начинает набирать обороты во всем мире. А для России – это ещё и вовсе молодая ниша на рынке. И профессиональная верстка электронных писем здесь один из составляющих факторов успеха. Под профессиональной версткой понимается не только визуально красиво и надежно сверстанный макет, но и то, как выглядит usability открытки с маркетинговой точки зрения, как оптимизирована графика вместе с типографией для спам-фильтров и многое другое. Верстка электронных писем довольно обширная тема, в одной статье все не уместить, поэтому в данном посте постараюсь описать только базовые элементы и приемы, надежно проверенные за годы практики и работающие в top самых используемых почтовых клиентах мира: iPhone 4S/5; Outlook 07/10/13; iPad; Apple Mail; Android 2.3/4.0; Yahoo; Gmail. Если рассматривать только российский рынок, то нельзя не упомянуть о Mail.ru и Яндекс.Почта.

Что нужно знать в начале?

Сразу хочу выделить несколько из основных и важных моментов:

1. В нашем арсенале имеется очень урезанный набор css-свойств, которые поддерживаются всеми почтовиками. При этом, стили нужно прописывать inline, а в head выносить только вендорные свойства и те блоки объявлений, которые не несут нагрузки на основную стилизацию письма. Ну и использовать link in head — крайне нежелательно.
2. Не используйте background-image в основных визуальных элементах дизайна и не помещайте в изображения важную текстовую информацию. Вообще нужно всегда учитывать такой вариант, что письмо будет просматриваться получателем без единого изображения.

Каркас

Пожалуй каждый, кто хоть раз верстал письмо под рассылку, знает, что каркас лучше строить с помощью таблиц. На самом деле простая блочная модель div поддерживается на данный момент во всех перечисленных выше почтовиках, за исключением MS Outlook начиная с 2007 версии. Это связано с тем, что в качестве движка последние версии Outlook используют Microsoft Word, который в свою очередь много не знает о блочных css-свойствах. Игнорировать при верстке данный почтовый клиент я не рекомендую, поэтому в качестве фундамента все же используйте table. Да и добившись хорошего результата для Outlook, можно быть уверенным, что в большинстве почтовиках, письмо будет смотреться тоже хорошо, а скорее и лучше.

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

Привет!
Прошлые два обзора полезных книг за 2010 и 2011 год собрали просто адовое количество закладок, поэтому я продолжу. Прошел ещё год, ещё около 250 прочитанных книг – и вот самые интересные под катом.

Кто сказал, что слоны не умеют танцевать? Возрождение корпорации IBM: взгляд изнутри (Герстнер Луис)

Отличная книга про то, как удалось восстановить IBM. То, что со стороны выглядело как бессистемное перемещение активов и последовательность приказов без особого смысла, через несколько лет начало складываться в единую систему.

Догнать зайца (Стивен Спир)

Отличная книга про дебаг производственных процессов. Одна из основных вещей – то, что все серьёзные проблемы возникают из-за сочетания некритичных багов. Есть примеры из американской ядерной программы, NASA и т.п. Я предлагаю прямо сейчас пойти и прочитать описание железнодорожного крушения на Каменской: один не отчитался, второй не проверил тормоза, третий зажал тангенту, четвёртый сорвал стоп-кран. Результат — катастрофа.

Зародившись как скриптовый язык в помощь веб-разработчикам, с дальнейшим развитием JavaScript стал мощным инструментом разработки клиентской части, обеспечивающий удобство и интерактивность страницы прямо в браузере у пользователя.

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

Думаю, что большинство программистов, писавших код на JavaScript больше пары дней, сталкивались с этими особенностями. Цель данного топика не открыть что-то новое, а попытаться описать эти особенности «на пальцах» и «недостатки» сделать «преимуществами».

В данном топике будут рассматриваться:

1. Замыкания
2. Прототипирование
3. Контекст выполнения

Все мы слышали про ajax и node.js. Они прочно обосновались уже не просто в словарном запасе, но и в наборе инструментов веб-разработчика. Ajax — асинхронное подтягивание данных с сервера на страницу, node — фреймворк с асинхронным IO. Но как в таком однопоточном языке, как Javascript, реализуется та самая асинхронность?

Вы, наверное, уже догадались из заголовка, речь пойдет об основном цикле («main loop»).

arguments — очень специфическая штука, о которой новички и даже любители знают только то, что это «вроде массив, но какой-то неправильный». На самом деле, у него есть ряд интересных особенностей. Предлагаю в топике пофантазировать на тему TypeHinting, аргументов по-умолчанию и всякого другого.

(function (foo, bar) {
	console.log(typeof arguments); // ?
	
	arguments[0] = 42;
	console.log(foo); // ?
})(10, 20);

А также покажу интересную идею-библиотеку

function test (foo, bar) {
    Args(arguments).defaults(100, 100);

    return [foo, bar];
};

test(      ); // 100, 100
test(15    ); //  15, 100
test(21, 42); //  21,  42

Когда-то я начинал работать, и меня вполне устраивала моя производительность. Но после, когда начались проблемы, связанные с потерянными клиентами, сбежавшими партнёрами, играющими в молчанку поставщиками из-за забывчивости, необязательности, или несвоевременного выполнения дел, у меня возникло желание что-то поменять в своём отношении к работе.

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

Всё нижеприведённое справедливо для меня, директора небольшой минской аутсорсинговой компании, но и вполне может оказаться применимо для широкого круга лиц: менеджеров, админов, кодеров, верстальщиков, дизайнеров, да кого угодно.

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

В условиях когда клиентская часть веб-приложений становится все более толстой, бизнес-логика неумолимо переползает на клиент, а на суверенитет серверных технологий все более смело посягает node.js нельзя не задуматься о приемах проектирования архитектуры на javaScript. И в этом деле нам несомненно должны помочь паттерны проектирования — шаблонные приемы решения часто встречающихся задач. Паттерны помогают построить архитектуру, которая потребует от вас наименьших усилий при необходимости внести изменения. Но не стоит воспринимать их как панацею, т.е., грубо говоря, если качество кода «не фонтан», он кишит хардкодом и жесткой связью между логически независимыми модулями, то никакие паттерны его не спасут. Но если стоит задача спроектировать масштабируемую архитектуру, то паттерны могут стать хорошим подспорьем.
Но впрочем эта статья не о паттернах проектирования как таковых, а о их применении в javaScript. В первой части этой статьи я напишу о применении порождающих паттернах.

Проблема z-index в том, что многие просто не понимают, как он работает.
Всё, описанное ниже, есть в спецификации W3C. К сожалению, не все её читают.

Описание проблемы:

Итак, пусть у нас есть HTML код, состоящий из 3 элементов.
Каждый из них внутри себя содержит по одному . А каждый , в свою очередь, имеет свой фон: красный, зеленый и синий, соответственно. Плюс ко всему, каждый позиционирован абсолютно левого верхнего края документа таким образом, что он немного перекрывает собой следующий за ним . Первый имеет z-index, равный 1, у остальных двух z-index не задан.

Все чаще приходится слышать: "Работай на результат!"

"Работай на результат!" — кричит начальник подчиненному, чтобы заставить этого тупого неповоротливого кретина, принятого в команду по протекции, приносить хоть какую-то пользу общему делу.

"Мы работаем на результат!" — бахвалится бригада голодных гастарбайтеров, надеясь, что, если они будут кричать именно это, их предложение хотя бы немного выделится среди гула голосов тысяч голодных и безработных.

"Обязательна ориентированность на результат!" — напишет пожилая кадровичка «ГорАвиаВагонМорСтроя» в требования к кандидату на должность помощника бухгалтера, будучи уверенной в том, что раз все так пишут, то и ей надо.

"Наш девиз — Работа на Результат!" — именно так, с двумя Большими Буквами для большего пафоса пишет на корпоративном сайте очередной говноконторы-однодневки молоденькая девочка-всё-в-одном, гордо именующая себя помощником руководителя по связям с общественностью. И этот самый руководитель, даже не знающий, что секретутка это, оказывается, ни больше ни меньше, целый его помощник, тоже употребит эту фразу на фуршете в городской администрации с целью создать себе рекламу в среде местных бюрократов.

Культ карго. Мало кто из произносящих эту фразу может внятно объяснить, какой смысл в неё вкладывается. Люди верят в неё, как в волшебную формулу, заклинание, они пихают её куда ни попадя, надеясь, что она придаст им уникальность, выделит их из толпы таких же неудачников. Организации, Компании, конторы да и откровенные «шараги» не мыслят себя без этого лозунга. Как же это, «Рога и копыта» работают на результат, а мы, что, хуже?



А хуже ли?

Мне часто задают вопрос: «Как ты находишь время?». Чаще всего речь идет об open source, иногда о книгах, изредка — о других вещах. Обычно я уклонялся от ответа чем-нибудь вроде: «Блин, не знаю, просто беру и нахожу». Но этот ответ не слишком полезен. Да и мне было интересно, смогу ли я справляться со временем еще лучше. Так что я немного порефлексировал, и вот как я нахожу время:

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

Собрал небольшой список пунктов эволюции фрилансера, каждый +1 сделает вас продуктивнее или дороже на рынке.
Список взят из моей жизни, я уже как год практикующий фрилансер, до этого никогда не покидал России, за последний год посетил 9 стран, в следующем году надеюсь посетить ещё 20.

1) Никогда ничего не забывайте. Для этого каждую мелкую задачу я всегда добавляю в miniplan.ru и я всегда получу в нужный момент письмо или смску, все совершенно бесплатно.
2) Самоосознание. Когда работаешь без прямого начальника, когда зарплата не два/раз в месяц, нужно максимально осознать свою жизнь, понимать как вы работаете, как вы получаете деньги, забиваете ли вы на работу, к чему стремитесь. Если в обычной жизни можно плыть по течению то фриланс вам приоткрывает двери осознанной жизни.
3) Отдыхайте. Работодателя нет и вы сами должны заботиться о своем отпуске, сделайте так чтобы его было больше, чем если бы вы работали по прямому найму. Не забывайте о перерывах в работе. Отдых сделает вас продуктивнее или абсолютно расслабит и тут вам поможет самоосознание.

Этот пост — первый из серии статей о SVG (Scalable Vector Graphic), рассказывающий об основах векторной графики на сайте.



Векторная графика широко применяется в полиграфии. Для веб-сайтов существует SVG, которая согласно официальной спецификации на w3.org является языком для описания двумерной графики в XML. SVG включает в себя три типа объектов: фигуры, изображения и текст. SVG существует с 1999 года, а с 16 августа 2011 включена в рекомендации W3C. SVG сильно недооценена веб-разработчиками, хотя имеет несколько важных преимуществ.