Предлагаю вашему вниманию перевод очень крутой статьи по анимации интерфейса.
The ultimate guide to proper use of animation in UX автора Taras Skytskyi.



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

Прошло 2.5 года после публикации первой версии подробного туториала по основам React. За это время gitbook насчитал 250 000+ уникальных посетителей.

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

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

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

Мы приготовили для вас небольшую подборку сериалов, так или иначе связанных с ИT. А натолкнула нас на идею этого поста многолетняя дружба ЛАНИТ с Международным фестивалем документального кино "ДОКЕР", где, кстати, в том числе с нашей помощью традиционной стала номинация для фильмов о возможностях информационных технологий «Let IT Doк!».

Кадр из сериала «Mr. Robot» (eps3.1_undo.gz)

Автор статьи, перевод которой мы сегодня публикуем, говорит, что её идею подсказал ему один из выпусков подкаста Syntax FM, в котором давался обзор полезных методов объектов и массивов в JavaScript. Эти методы помогают разработчикам писать чистый и читабельный код. Их применение снижает потребность в сторонних библиотеках наподобие Lodash.

Все началось с очередной попытки бросить курить. Разбудив свою внутреннюю «жабу» в поисках поддержки, говорю ей: «Смотри, пачка моих сигарет стоит сегодня как карманный ретро-компьютер с экраном, то есть примерно $10, а когда-то давным давно, на клон синклера-48К мы всю месячную зарплату и больше месяца на сборку и отладку потратили». Она: «Вы мужики- козлы и вруны, докажи!». Пришлось поработать.

Итак, исходно-расходные материалы:

1. «Blue pill»: STM32F103C8T6 — 20K ram 64K flash $2.06
2. «Ардуино Display»: ILI9341 2.8" 320x240 с сенсорным экраном и слотом карточки $7.72
3. Пищалка $0.18
4. Немного кнопок (7 штук) $0.2
5. Немного проводов $0.1
6. Флеш карта на 64 мега (с древнего фотоаппарата), в расчет не включена
7. Программатор ST-LINK, не расходуется и в расчет не включен, однако тоже пару долларов стоит
8. Пачка сигарет — расходуется слишком быстро и каждый день -$8.37

В большинстве приложений, которые разрабатываются в наши дни, требуется взаимодействовать с некими наборами данных. Обработка элементов в коллекциях — это часто встречающаяся операция, с который вы, наверняка, сталкивались. При работе, например, с массивами, можно, не задумываясь, пользоваться обычным циклом for, который выглядит примерно так: for (var i=0; i < value.length; i++ ){}. Однако, лучше, всё-таки, смотреть на вещи шире.



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

На самом деле, такие средства в JavaScript имеются. Некоторые из них рассмотрены в материале, перевод которого мы представляем сегодня вашему вниманию. В частности, речь идёт об операторе расширения, о цикле for…of, и о методах includes(), some(), every(), filter(), map() и reduce(). Здесь мы, в основном, будем говорить о массивах, но рассматриваемые здесь методики обычно подходят и для работы с объектами других типов.

Стандарт EcmaScript 2015 (ES6) существует уже несколько лет. Он принёс с собой множество новых возможностей, разные способы использования которых далеко не всегда очевидны. Вот обзор некоторых из этих возможностей с примерами и комментариями.

Регулярные выражения в Python от простого к сложному

Решил я давеча моим школьникам дать задачек на регулярные выражения для изучения. А к задачкам нужна какая-нибудь теория. И стал я искать хорошие тексты на русском. Пяток сносных нашёл, но всё не то. Что-то смято, что-то упущено. У этих текстов был не только фатальный недостаток. Мало картинок, мало примеров. И почти нет разумных задач. Ну неужели поиск IP-адреса — это самая частая задача для регулярных выражений? Вот и я думаю, что нет.
Про разницу (?:...) / (...) фиг найдёшь, а без этого знания в некоторых случаях можно только страдать.

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

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

О существовании SVG знают все, кто занимается фронтендом. Этой технологии уже не один год, про нее уже не раз писали на хабре. Но есть один момент. Частенько на разных ресурсах, в том числе и на тостере, начинающие задают вопросы о создании определенного семейства анимаций на сайте и получают довольно странные ответы от “бывалых” разработчиков. Возникает ощущение, что в такие моменты все думают в контексте HTML+CSS+JS и просто забывают о существовании SVG, предлагая все рисовать на canvas и попутно давая обещания дать тому, кто это придумал, клавиатурой по голове. Но этот путь (рисование на canvas) зачастую слишком сложен относительно решаемой задачи. В предыдущей статье мы обсуждали идеи создания частичных вау-эффектов, а в этой поговорим о масках и посмотрим пару анимаций, которые с их помощью можно сделать.

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



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

Это четвёртая из пяти частей туториала, посвящённого созданию игр с помощью Python 3 и Pygame. В третьей части мы углубились в сердце Breakout и узнали, как обрабатывать события, познакомились с основным классом Breakout и увидели, как перемещать разные игровые объекты.

(Остальные части туториала: первая, вторая, третья, пятая.)

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

Попробуем описать такую сферу деятельности, как традиционное лукостроение. Рассмотрим необходимые знания, навыки, технологии и инструменты необходимые для создания луков на уровне «продвинутый любитель».

В этой статье показывается, как с помощью CSS трансформаций и махинаций с 3d сделать параллакс-эффект на сайте на чистом CSS.

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

70 тысяч звездочек на гитхабе и сотни интересных проектов. Кажется, что D3 это что-то большое и очень сложное, но это не так. Я расскажу об основах D3 и поделюсь опытом разработки инфографики Бюростат.

Привет, Хабр! Представляю вашему вниманию перевод статьи Vue.js Tutorial: From jQuery to Vue.js автора Paul Redmond.

Что касается библиотек JavaScript, то никогда не было более популярной библиотеки, чем jQuery. Она создавалась для обхода DOM элементов с использованием CSS селекторов в то время, когда совместимость браузеров была важной проблемой для разработчиков.

Фактически jQuery настолько универсален, что я подумал что он отлично передаст то, почему я люблю писать UI с Vue, используя компонентный JavaScript. В этом руководстве мы сначала рассмотрим создание пользовательского интерфейса с jQuery, а затем перепишем его с помощью Vue.

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

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

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

Пока некоторые CSS свойства, отвечающие за разного рода красивости (вроде filter, mix-blend-mode или transition) привлекают внимание всех и каждого, другие совсем мало освещаются в интернете. Взять хотя бы свойства, отвечающие за типографику. Они весьма полезны и эффектны, но широко не известны. Давайте же исправим несправедливость и осветим то, что обычно остается в тени.

Если вы не изучали JavaScript с самого начала, то осваивать его современную версию сложно. Экосистема быстро растёт и меняется, так что трудно разобраться с проблемами, для решения которых придуманы разные инструменты. Я начал программировать в 1998-м, но начал понимать JavaScript только в 2014-м. Помню, как просматривал Browserify и смотрел на его слоган:

Browserify позволяет делать require («модули») в браузере, объединяя все ваши зависимости

Я не понял ни слова из предложения и стал разбираться, как это может помочь мне как разработчику.

Цель статьи — рассказать о контексте, в котором инструменты в JavaScript развивались вплоть до 2017-го. Начнём с самого начала и будем делать сайт, как это делали бы динозавры — безо всяких инструментов, на чистом HTML и JavaScript. Постепенно станем вводить разные инструменты, поочерёдно рассматривая решаемые ими проблемы. Благодаря историческому контексту вы сможете адаптироваться к постоянно меняющемуся ландшафту JavaScript и понять его.

За время нашей получасовой беседы Адам Никерсон, он же Nickervision Studios, по крайней мере дюжину раз повторил разные вариации фразы «На самом деле я не знаю, как делать видеоигры». Однако ему удалось в одиночку продать полмиллиона копий своих игр для PC.

Вероятно, вы ни разу не слышали, например, о Bit Blaster XL, но в Steam она разошлась тиражом 260 000 копий. Адам разработал её в одиночку всего за две недели. Её продолжение, которое близится к такому же успеху, было разработано за 75 часов.

Как ему это удалось? Он нашёл способ стать замеченным на Steam в наше время почти бесконечного потока новых релизов, время, разрушившее надежды и мечты многих других мелких разработчиков.