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

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

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

Ни для одного опытного программиста или верстальщика не секрет, что настроенная под себя среда разработки (не в смысле IDE, а в более общем) — жизненная необходимость. Было время, когда я делал очередную верстку в практически голом Notepad++ на единственном мониторе, поочередно открывая Photoshop, браузер и редактор. Сегодня, в эпоху «автоматизации всего», мне сложно представить, как вообще можно было так работать.

Sublime Text 2 — популярный расширяемый кроссплатформенный текстовый редактор, для которого написано множество плагинов если и не на все случаи жизни, то на многие. В этом посте я попытаюсь рассказать как из этого конструктора сложить удобный инструмент front-end разработчика для работы с HTML, CSS и JavaScript.

Отличная подборка, как нарисовать различные геометрические фигуры одним элементом HTML.

Квадрат

#square {
	width: 100px;
	height: 100px;
	background: red;
}

Никогда не планируйте

Проект, как правило, делается сам собой, вырастает, как дерево: главное — вовремя посадить семена и удобрить почву. Разве вы когда-нибудь встречали чудака, который будет прикидывать, насколько вырастет за год дерево, которое он посадил? Правда в том, что планирование никогда еще никому не помогло сделать хороший проект. Точные сроки — это лишняя ответственность и ненужная головная боль. Диаграммы Ганта — для слабаков. Забудьте о них.

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



Демо / Скачать исходники

По данным, любезно предоставленным аналитическим порталом CMS Magazine, «на радарах» видно 286 живых русскоязычных веб-студий размером 1—3 человека, 626 — размером 4—7 человек, и 556 — размером 8—15 человек. «Живые» — это те, кто опубликовал на портале хотя бы одну работу в 2012—2013 годах.

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

Последние годы рынок всё чаще говорит о необходимости позиционирования, маркетинга и PR для веб-студий, причём если раньше это относилось к Top-10 компаний, сегодня об этих чуждых интернет-специалистам материях приходится задумываться той самой тысяче с численностью сотрудников 4—15. К счастью, и на Хабре появляются хорошие статьи на эту тему. Мы хотим дать взгляд на проблему позиционирования ещё с одной стороны.

Некий 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 Вячеслава Олиянчука.
Настоятельно рекомендуется добавить в закладки, а лучше — почитать.

Я очень ленив, чтобы серьезно заниматься риск-менеджментом. Всегда считал это полной чушью, созданной неудачниками для отмазок в стиле: «А! Мы же говорили, что у вас ничего не получится!» Вон из моего проекта!

Кроме того — мы применяем аджайл. Мелкие итерации. И наши риски, и риски клиентов — ничтожно малы! А еще у нас есть типовые и четко очерченные в договорных отношениях этапы (не путать с agile-итерациями ;). Каждый раз, когда мы сталкиваемся с неопределенностью — мы разбиваем задачу на несколько мелких этапов и наши риски снижаются. Это же просто! Да? А теперь плохая новость:

Снижая риски добавлением этапов, мы снижаем рентабельность* всего проекта.

Свою рентабельность, в смысле. Когда я обнаружил это с помощью простой excel-таблицы, и посчитал, во что обходится добавление еще одного этапа — я присвистнул.

Итак, у нас есть абсолютно типовые этапы:

От переводчика: Не смотря на то что оригинал данной статьи датирован январем 2009 года, она не потеряла актуальности и теперь. Я надеюсь что даже те, кто используют JavaScript не первый год, почерпнут для себя что-то полезное.

1. Используйте === вместо ==

В JavaScript существует два разных типа операций сравния: === / !== и == / !=. Считается хорошим тоном всегда использовать первую пару для сравнения.

“Если два операнда одного типа и значения, то === вернет true, а !== false”
JavaScript: The Good Parts

Кто-то вчера шутил, а кто-то занимался реально полезными вещами. Как например болгарский разработчик Мартин Ангелов, опубликовавший впечатляющий обзор JS библиотек:
http://tutorialzine.com/2013/04/50-amazing-jquery-plugins/
Настоятельно рекомендуется к обозрению.
PS Куда-то пропал тип топика «Ссылка» :(

Вчера выдалась свободная минутка и я присел почитать Хабру. Одна из первых статей на которую наткнулся “Наш ответ 3doodler`у. Собран за 20 минут”. И вот читаю я её, видео смотрю, и чувствую что у меня дежавю. Причём такое нехорошее. Поднимающее волну возмущения. Мне некомфортно.

или Создаем 3D миры при помощи HTML, CSS и JS

В прошлом году, я сделал демо, которое показывает как можно использовать CSS 3D transforms для создания 3D пространства. Демо было технической демонстрацией того, чего можно достичь при помощи CSS на то время, но я хотел увидеть насколько далеко я могу зайти, поэтому последние несколько месяцев я работал над новой версией с еще более сложными моделями, реалистичным освещением, тенями и определением столкновений. Этот пост документирует то, как я это делал и какие техники применял.

Демо Демо2

Привет, Хабр! Это наш первый пост в корпоративном блоге проекта «Ruward: все рейтинги Рунета». Проект задумывался как агрегатор всех существующих нишевых топов на агентском digital-рынке (сейчас у нас 52 рейтинга и более 1000 компаний- участниц) – чтобы служить некой картой интерактивного рынка (а заодно – и шпаргалкой, чтобы быстро посмотреть, кто на каких позициях в каких топах)

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

Клиентский сервис на рынке агентских digital-услуг

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

Основные функции службы клиентского сервиса

Можно выделить три основные зоны ответственности службы клиентского сервиса в типовом агентстве:

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

За долгое время работы в Яндексе нам удалось систематизировать все наши знания и огромный опыт в создании фронтенда веб-сервисов. Результатом этого осмысления и длительной работы стала первая Школа разработки интерфейсов, занятие которой шли в московском офисе Яндекса. Вся практическая часть обучения проходила в реальных проектах Яндекса. Теоретическая же состояла из лекций, которые читали ведущие разработчики интерфейсов Яндекса: Сергей veged Бережной, Михаил mishanga Трошев, Алексей doochik Андросов, Михаил azproduction Давыдов и другие.



Сегодня мы выкладываем видеозаписи каждой из них. Весь курс систематизирован и поделен на пять блоков: инструменты разработки, технологии в разработке интерфейсов, языки программирования, фреймворки, дизайн.

Проектирование — этот, возможно, ключевой этап создания интернет-сайта, отвечает нам на следующие вопросы:

1. Каковы наши цели — зачем мы делаем сайт? Как мы реализуем поставленные цели?
2. Как сайт будет выглядеть и работать?

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

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

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



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

Посмотрим как они выкрутятся?

После недавнего выпуска Retina MacBook Pro и The new IPad, экраны с увеличенной плотностью пикселей начали активно входить в нашу жизнь. Что это значит для веб-разработчиков?

Для начала разберемся в терминологии.

Физические пиксели

Первоисточник: Том ДеМарко “Deadline. Роман об управлении проектами”

Постарался выжать всю “соль” из не самой плохой, на мой взгляд, книги об управлении проектами. Выкладываю на суд общественности.

Вчерашние изменение правил сайта free-lance.ru вызвало широкий резонанс у общественности, особенно у специалистов IT области. Многие задаются вопросами, чем вызвана подобная политика биржи и к чему это приведет.

Новость не обошла стороной даже популярные издания вроде Lenta.ru.

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

Спустя сутки мы получили ответы от генерального директора free-lance.ru