Перевод статьи подготовлен в преддверии старта курса «Web-разработчик на Python».

---

Введение

Сейчас я работаю над очень интересным проектом. И в нем все сложно, потому что сам проект очень масштабный, а я занимаюсь им один в свободное время, при этом работая полный рабочий день. Поэтому я должен быть эффективным. К счастью, я использую Django с его подходом «батарейки в комплекте».

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

По традиции, можно было бы смешать Django и jQuery, чтобы получить желаемое поведение. Но сейчас есть более новые технологии JavaScript, такие как React и Vue. Поскольку наша цель состоит в том, чтобы найти фреймворк, который мы сможем использовать вместе с Django не переписывая все с нуля, мы воспользуемся Vue, как более легкой альтернативой. В этой статье я покажу, как начать пользоваться Vue вместе с Django с минимальными усилиями.

Многие разработчики полюбили лаконичный синтаксис и мощь директив Vue.js настолько, что даже пытаются использовать этот фреймворк не только в одностраничных приложениях. Сложно отказаться от использования реактивности, только потому, что вдруг понадобилось написать небольшой проект. Не возвращаться же к старому доброму jQuery или к чистому JS?!

Надо сказать, что во Vue.js (да и во многих других фреймворках) предусмотрен такой вариант его использования. Но все же он кажется слишком громоздким для такой простой работы, а функционал избыточным. И тут на помощь приходит Alpine.js.

Отметим некоторые особенности данного фреймворка:

1. Он весит очень мало! 7.2kB в сжатом виде.
2. Знакомый и простой синтаксис основанный на директивах.
3. Не использует виртуальный DOM
4. Подключения возможно как через CDN (по задумке авторов должно быть основным использованием), так и через npm.

Данная статья написана под влиянием книги Дэвида Коупленда «Build Awesome Command-Line Application in Ruby» (купить, скачать и изучить дополнительные материалы). Большая её часть будет посвящена проектированию дизайна CLI-приложений вне зависимости от используемого языка. По ходу будут обсуждаться и вещи специфичные для ruby, но не страшно, если вы его не знаете, кода будет не слишком много. Можно считать эту статью довольно подробным обзором вышеупомянутой книги с вкраплениями собственного опыта. Книжку рекомендую!

Для начала я задам вопрос. Если посмотреть на сообщества IT-шников, можно заметить, что несмотря на обилие программ с красивым графическим интерфейсом, приложения командной строки остаются весьма популярны. Почему?
Ответов несколько. Во-первых, это красиво удобно — если вы можете описать задачу командой в командной строке, то её гораздо проще автоматизировать, чем если вам приходится анализировать передвижения мыши и клики на разные пункты меню. Во-вторых, это даёт возможность комбинировать программы невероятным числом способов, чего сложно добиться с помощью графических интерфейсов.
В значительной степени философия Unix базируется на том принципе, что множество маленьких утилит, каждая из которых умеет делать свою конкретную задачу — это лучше, чем одна многофункциональная программа-универсал. И это одна из причин успеха Unix-систем в мире IT-шников.
Наверное, каждый понимает, что обычного пользователя вряд ли удастся сманить от GUI к CLI, давайте сосредоточимся на нас, «компьютерщиках» и конкретизируем наши пожелания к CLI-приложениям.

Добрые традиции — это здорово! Календарик!

В карман (100×70мм):
pdf, eps, svg или png (1185×829, 300dpi)

На стенку (A4):
pdf, eps, svg или png (3512×2457, 300dpi)

Сделай сам:
Генератор календариков (Python, CC-BY)

От переводчика: на оригинальный пост меня навёл EugeneOZ, за что ему отдельное спасибо.
Если кто-то найдёт какой-то косяк — я буду рад репортам в ЛС.

Парни, нам нужно поговорить

Мои дорогие задроты, гики, хакеры, дизайнеры, создатели, сборщики и очумельцы — с нашей культурой происходит что-то очень и очень странное.

Мы ведём себя как настоящие козлы по отношению друг к другу.

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

Хорошая новость.

Издательство «Питер» предлагает воспользоваться 25% скидкой на все книги из категории Бестселлеры O'Reilly.



Код купона: 1c7dd5bd (до 21 мая)

Если у вас нет огромной фермы из десятков видеокарт, да и пара-тройка ASIC Miner’ов тоже отсутствует, не печальтесь – способы заработать на криптовалютах еще остаются. Один из более-менее рабочих вариантов – перед вами.

В данной статье мы рассмотрим 10 анти-паттернов навигации в Android, которые допускают многие новички (и не только) в создании интерфейсов Android-приложений.

В статье будут даны рекомендации по работе с WEB-дизайнерами. Исполнение этих рекомендаций даст значительное повышение качества работы, увеличение производительности труда и сохранит нервные клетки.

В каждом из пунктов будут живые примеры и ссылки на полезные, бесплатные инструменты.

В идеале, в комментариях вы оставите свои советы, замечания к статье, ссылки и примеры.

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

(Вы не любите Seagate? Вы просто не умеете их готовить!)
Для NAS пришлось купить HDD 3TB WD Caviar Green IntelliPower (других трёшек просто не было). Руки привычно взяли «напильник» и начали «снимать фаску», из глаз слёзы обиды — семь с половиной тысячи за ЭТО. Да «гарантия», да RAID5, но держать в уме предстоящий через 6-8 месяцев ребилд 6 террабайтного массива?! И тут новость о снижении вендорами сроков гарантии. Нет, я отлично понимаю, почему уменьшают гарантию,- ЭТО работать вообще не должно. Но почему не повышают качество изделий? Впрочем, и это понимаю,- надо чтобы продавалось много, а не работало долго. А то вот мои три 2ТБ Барракуды уже второй год под торрентом 7/24 работают и не бэдят, а Seagate голодает.
И так, если вас греет гарталон — этот топик вам будет не интересен. Если у вас RAID6 из Seagate 7200 Constellation ES — ваше время слишком дорого стоит, что бы читать такие мелочи. Если вы потратили свои кровные и хотите «что бы не было мучительно больно» — загляните под кат, может найдёте что-то полезное.

Небольшой и полезный чеклист по usability. Проверьте свой ресурс перед тем как перейти к юзер-тестированию. Не претендует на «столп usability», которому необходимо следовать, но здесь собраны довольно полезные вещи.

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

Для работы с расширениями вам понадобится переключить канал обновлений на Dev или Beta.

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

UPD. Для краткого введения в адаптивный дизайн рекомендую прочитать статью «Как сделать один сайт для всех устройств (Responsive Web Design)».

Перевод крайне ценной статьи «Responsive Web Design Techniques, Tools and Design Strategies» популярного интернет-издания для разработчиков Smashing Magazine.

Еще в январе мы опубликовали статью об адаптивном дизайне «Responsive Web Design: What It Is and How To Use It» (Адаптивный веб-дизайн: Что это такое и как им пользоваться). Адаптивный веб-дизайн продолжает привлекать к себе много внимания, но, учитывая, насколько он отличается от традиционных методов разработки сайтов, он может показаться заоблачно сложным для тех дизайнеров и разработчиков, которые его не пробовали.

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

Техники Responsive web design

1. CSS Transitions and Media Queries
CSS Transitions и Media Queries

Elliot Jay Stocks подробно рассказывает о методе сочетания CSS Media Queries и CSS transitions. Основная идея в следующем: разрабатывая адаптивный сайт с помощью Media Queries, вы постоянно изменяете ширину вашего браузера, чтобы посмотреть, как сайт ведет себя при этом. Но каждый раз, когда отрабатывает один из ваших Media Queries, виден жесткий переход между стилями (первый, например, для десктопов, второй — для планшетов). Почему бы не использовать CSS transitions для сглаживания этих жестких переходов с помощью анимации?

Продолжаем дело первой статьи и пытаемся разобраться с тем, что же делает за нас jQuery, когда мы с помощью этой библиотеки создаем DOM-элементы.

В прошлом выпуске мы упомянули, что при передаче в jQuery вместо селектора html-строки, на основе нее функция parseHTML создаст соответствующие элементы и вернет их в привычном jQuery-объекте. Сейчас мы рассмотрим все это более тщательно и затронем кроме core.js еще manipulation.js и attributes.js (мельком).

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

Настраиваемые фильтры CSS

СSS фильтры уже имеются в Chrome и Safari, и позволяют расширенные настройки стилей, такие как размытие, искривление и модификацию цветовой интенсивности. Однако, это — только начало. Настраиваемые фильтры CSS позволяют вам описать свои собственные вершинные и пиксельные шейдеры в GLSL, языке, который является неотъемлемой частью традиционного 3D-рендеринга уже в течение 10 лет или около того.

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

Так когда вы можете использовать их? Adobe стал новатором этой технологии и Настраиваемые Фильтры уже доступны в Chrome. Ожидается увидеть их в Chrome в начале следующего года. На данный момент, с ними можно поиграть в Canary.

API автозаполнения

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

Предисловие

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

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

У тех матерых спецов, которые рано или поздно всенепременно явятся сюда, чтобы линчевать меня (хотя бы за подобную манеру изложения и отношение к предмету), — я заранее прошу прощения. Каюсь, грешен, но ничего с собой поделать не могу, и графоманию эту намерен и дальше продвигать в массы.

Партия реверансов сделана, тылы прикрыты, паноптикум можно считать открытым.

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

Я не хочу того же для вас. Хочу, чтобы история была интересной, а посему – долой нудную теорию, долой правила, лекторский тон и никому не нужный апломб. Никаких графиков, таблиц и сравнений. Только эмоции и веселье, по возможности, наподобие этой работы. Один из артов которые я изготовил во время компании в поддержку финансирования разработки игры Wasteland 2.



Что же останется в статье, если убрать особливо техническую информацию, — спросите вы?

Вместо предисловия

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

Перед тем как начать я хотел бы сделать акцент на двух положениях:
Первое. Мы исходим из того что читатель знаком с такими пакетами как 3D Studio MAX (либо любым другим пакетом трехмерного моделирования) и Photoshop (или любым его аналогом). В данном конкретном случае я собираюсь использовать терминологию этих двух пакетов. Однако, не смотря на это те же самые принципы можно использовать, пользуясь любым другим софтом.

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

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

Хочу также отметить, что я не причисляю себя к мастерам, которые делают шедевры. Данное примечание я делаю для тех злых людей, которые говорят (или скажут после публикации), что я заносчив, что меня занесло под небеса, и тех кто вместо того чтобы работать предпочитает злословить словно ябедник Кийр из моей любимой книги Оскара Лутса «Весна».

С преамбулами покончено перейдем к сути.

Я утверждаю и не беспочвенно, что хороший фон можно и нужно создавать не за неделю, не за пять дней и даже не за три. Чтобы сделать хорошую картинку для казуальной игры, без разницы i-spy это, match-3 или аркада, достаточно 48 часов. Разумеется, при условии того, что человек занимается работой, а не просиживанием штанов.