Pull to refresh
0
Vladimir @GeekT read⁠-⁠only

Пользователь

Send message

Анимации в мире состояний

Reading time 16 min
Views 17K
Многие уже научились строить чистые интерфейсы и писать «undo-redo» в несколько строчек. Но как быть с анимациями? Часто их обходят стороной, и они не всегда вписываются в подход (state) ↦ DOM. Есть отличные решения вроде React Motion, но что если вам нужно делать сложные анимации или работать с Canvas, используя физический движок?

В нашем тексте рассказывается, как работать с анимациям в React-приложениях, и сравнивается несколько подходов (D3, React-Motion, «грязные компоненты»). А также о том, как «запускать» анимации в Redux-приложениях. Материал основан на расшифровке доклада Алексея Тактарова с нашей декабрьской конференции HolyJS 2017 Moscow. Прилагаем заодно видеозапись этого доклада:


Осторожно, трафик: под катом много картинок и гифок (сами понимаете, материал про анимации).
Total votes 35: ↑35 and ↓0 +35
Comments 1

Как работает JS: анимация средствами CSS и JavaScript

Reading time 12 min
Views 86K
[Советуем почитать] Другие 19 частей цикла
Часть 1: Обзор движка, механизмов времени выполнения, стека вызовов
Часть 2: О внутреннем устройстве V8 и оптимизации кода
Часть 3: Управление памятью, четыре вида утечек памяти и борьба с ними
Часть 4: Цикл событий, асинхронность и пять способов улучшения кода с помощью async / await
Часть 5: WebSocket и HTTP/2+SSE. Что выбрать?
Часть 6: Особенности и сфера применения WebAssembly
Часть 7: Веб-воркеры и пять сценариев их использования
Часть 8: Сервис-воркеры
Часть 9: Веб push-уведомления
Часть 10: Отслеживание изменений в DOM с помощью MutationObserver
Часть 11: Движки рендеринга веб-страниц и советы по оптимизации их производительности
Часть 12: Сетевая подсистема браузеров, оптимизация её производительности и безопасности
Часть 12: Сетевая подсистема браузеров, оптимизация её производительности и безопасности
Часть 13: Анимация средствами CSS и JavaScript
Часть 14: Как работает JS: абстрактные синтаксические деревья, парсинг и его оптимизация
Часть 15: Как работает JS: классы и наследование, транспиляция в Babel и TypeScript
Часть 16: Как работает JS: системы хранения данных
Часть 17: Как работает JS: технология Shadow DOM и веб-компоненты
Часть 18: Как работает JS: WebRTC и механизмы P2P-коммуникаций
Часть 19: Как работает JS: пользовательские элементы

Анимация — неотъемлемая часть современных веб-интерфейсов. От того, насколько она уместна, привлекательна и производительна, зависит немалая доля впечатлений пользователя от работы с сайтом или веб-приложением. Сегодня, в переводе тринадцатой части серии материалов, посвящённых особенностям JavaScript и связанных с ним технологий, мы поговорим об анимации, выполняемой средствами CSS и JS, а также обсудим подходы к её оптимизации.

Читать дальше →
Total votes 20: ↑20 and ↓0 +20
Comments 9

Усы, лапы и хвост: как нейронная сеть распознает котиков и другие объекты

Reading time 6 min
Views 14K
image

Распознавание изображений — классический пример использования нейронных сетей. Вспомним, как происходит процесс обучения сети, в чем возникают сложности и зачем в разработке использовать биологию. Подробности под катом.
Читать дальше →
Total votes 18: ↑15 and ↓3 +12
Comments 4

Разработка игры на React + SVG. Часть 2

Reading time 22 min
Views 9.1K

TL;DR: в этих сериях вы узнаете, как заставить React и Redux управлять SVG элементами для создания игры. Полученные в этой серии знания позволят вам создавать анимацию не только для игр. Вы можете найти окончательный вариант исходного кода, разработанного в этой части, на GitHub
image

Читать дальше →
Total votes 3: ↑3 and ↓0 +3
Comments 1

Разработка высоконагруженного WebSocket-сервиса

Reading time 10 min
Views 62K
Как создать веб-сервис, который будет взаимодействовать с пользователями в реальном времени, поддерживая при этом несколько сотен тысяч коннектов одновременно?

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

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

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

Читать дальше →
Total votes 43: ↑39 and ↓4 +35
Comments 58

Простой статический сайт на Webpack 4

Reading time 15 min
Views 139K


После прочтения ряда статей (например, этой) решил перейти на современный подход с использованием Node.js при написании простых сайтов с подхода «динозавров». Ниже представлен разбор примера сборки простого статического сайта с помощью Webpack 4. Статья написана, так как инструкции с решением моей задачи не нашел: пришлось собирать всё по кусочкам.

Читать дальше →
Total votes 26: ↑25 and ↓1 +24
Comments 88

Ускорение сборки JavaScript-кода с использованием webpack 2–3

Reading time 8 min
Views 14K
Появляется все больше SPA салонов. Даже лендинги люди пилят на React. А действительно сложное веб-приложение уже трудно представить с другим подходом. Одна из главных проблем современного фронтенда — это сборка таких проектов. С этим помогают справляться бандлеры.

Иван Соснин, фронтенд-разработчик Контура, рассказывает как настроить webpack 2 и 3, чтобы получить ощутимый прирост в скорости сборки статики. Статья будет полезна тем, кто уже работает с webpack или смотрит в его сторону.

Стоит начать с ремарки, что недавно вышел webpack 4. Там вообще все супербыстро и ничего делать не надо, а еще изменилось процесс разбиения кода на чанки.


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


Webpack


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


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


За всю эту гибкость приходится платить сложной конфигурацией.

Читать дальше →
Total votes 21: ↑19 and ↓2 +17
Comments 5

Разработка изоморфного RealWorld приложения с SSR и Progressive Enhancement. Часть 4 — Компоненты и композиция

Reading time 24 min
Views 3.3K
В предыдущей части туториала мы решили проблемы изоморфного роутинга, навигации, фетчинга и начального состояния данных. В итоге, получилась довольно простая и лаконичная основа для изоморфного приложения, которую я также выделил в отдельный репозиторий — ractive-isomorphic-starterkit. В этой части мы начнем писать приложение RealWorld, но сначала осуществим декомпозицию. Погнали!
image
Читать дальше →
Total votes 14: ↑13 and ↓1 +12
Comments 2

Как стать фронтенд-разработчиком в 2018 году

Reading time 12 min
Views 87K
Камран Ахмед, автор материала, перевод которого мы сегодня публикуем, говорит, что занимается фуллстек-разработкой уже 5 лет и в настоящее время работает на должности ведущего инженера в компании tajawal. Там ему приходится заниматься многими вещами. Ему, по долгу службы, надо быть в курсе того, что происходит в мире веб-разработки, кроме того, одна из его задач заключается в том, чтобы поддерживать знания и навыки других разработчиков в хорошем состоянии. По его словам, наблюдение за развитием технологий — это не только его работа, но и хобби. Ему приходилось видеть сложности, с которыми сталкиваются начинающие программисты (и опытные — тоже), когда речь заходит об оперативном освоении новшеств. Камрану, в прошлом году, часто приходилось отвечать на вопросы о том, в чём нужно ориентироваться для того, чтобы оставаться современным и востребованным программистом. В результате он, для того, чтобы помочь себе и другим, решил подготовить схемы, ссылки на которые отвечали бы на большинство вопросов, которые ему обычно задают.

image

Читать дальше →
Total votes 27: ↑24 and ↓3 +21
Comments 17

Создаем своих криптокотиков (Часть 1)

Reading time 7 min
Views 26K
В первых числах декабря 2017 года, пользователи блокчейн-проекта Ethereum столкнулись с неприятным открытием — любые их транзакции просто перестали подтверждаться. Фактически, вся сеть перестала функционировать из-за неожиданно разросшегося в размерах мемпула.

Совсем скоро стало понятно в чем же дело — во всем виноват оказался проект CryptoKitties. Это забавная игрушка, работающая на блокчейне Ethereum и позволяющая пользователям разводить «котят», скрещивать их и продавать как обычные критовалютные токены. В какой-то момент 15% всех транзакций в Ethereum приходились на криптокотят! А к моменту написания этой статьи, игроки потратили на котят уже 23 миллиона долларов!

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

cryptocat
Хочу криптокотика
Total votes 28: ↑27 and ↓1 +26
Comments 13

Книга «Глубокое обучение. Погружение в мир нейронных сетей»

Reading time 6 min
Views 71K
image Привет, Хаброжители! Недавно у нас вышла первая русская книга о глубоком обучении от Сергея Николенко, Артура Кадурина и Екатерины Архангельской. Максимум объяснений, минимум кода, серьезный материал о машинном обучении и увлекательное изложение. Сейчас мы рассмотрим раздел «Граф вычислений и дифференцирование на нем» в котором вводятся основополагающее понятие для реализации алгоритмов обучения нейронных сетей.

Если у нас получится представить сложную функцию как композицию более простых, то мы сможем и эффективно вычислить ее производную по любой переменной, что и требуется для градиентного спуска. Самое удобное представление в виде композиции — это представление в виде графа вычислений. Граф вычислений — это граф, узлами которого являются функции (обычно достаточно простые, взятые из заранее фиксированного набора), а ребра связывают функции со своими аргументами.
Читать дальше →
Total votes 57: ↑56 and ↓1 +55
Comments 52

Как фронтенд-разработчику настроить базу данных

Reading time 6 min
Views 16K


Недавно меня спросили, как фронтенд-разработчику проще всего сохранить пользовательские данные? Под катом — моя краткая инструкция для тех, кто с базами данных «на вы».
Читать дальше →
Total votes 23: ↑19 and ↓4 +15
Comments 5

Секреты React и Redux при разработке веб-приложений

Reading time 10 min
Views 9.9K
image Здравствуйте, уважаемые читатели! Совсем скоро у нас выйдет новая книга о технологиях React и Redux, оригинал — O'Reilly, май 2017

Чтобы обрисовать масштабы бедствия круг проблем, которые могут возникать при создании веб-приложений с использованием таких технологий, предлагаем сокращенный перевод статьи Сэмюэла Менденхолла (от 15 ноября), где рассмотрены тонкости работы с React, Redux, Typescript и рассказано, как устранить и упредить проблемы с производительностью в таких приложениях.
Читать дальше →
Total votes 4: ↑3 and ↓1 +2
Comments 4

Интегрируем смартконтракт в веб-приложение на Nodejs

Reading time 7 min
Views 17K

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


UI приложения

Читать дальше →
Total votes 13: ↑12 and ↓1 +11
Comments 6

Что нового в WebStorm 2017.3

Reading time 4 min
Views 11K
На прошлой неделе вышло большое обновление WebStorm. Мы хотим рассказать о том, какие улучшения ждут JavaScript-разработчиков в WebStorm 2017.3 и в других IDE от JetBrains с поддержкой JavaScript.

Вы можете скачать WebStorm 2017.3 на нашем сайте.



Улучшения в поддержке Vue.js


В новой версии WebStorm мы улучшили поддержку Vue.js. В template-части .vue-файла теперь есть автодополнение и навигация к определению для props, свойств в data-объектах, computed свойств и имен методов, объявленных в script части.
Читать дальше →
Total votes 23: ↑22 and ↓1 +21
Comments 21

Использование Google FireBase для создания простого чата на Android

Reading time 11 min
Views 23K
Несколько дней назад я начал разработку простейшего чата под Android, я решил использовать Firebase — простую в использовании базу данных в режиме реального времени, которая хранит свои данные в формате JSON. Несмотря на то, что Firebase предоставляет полный API-интерфейс и документацию по использованию, я обнаружил, что у неё не хватает деталей при попытке применить её к шаблону архитектуры, например MVP, поэтому я решил попробовать и объяснить, как я понял реализацию на Android. Также я расширил шаблон MVP новым слоем, явно для Firebase — Interactors.
Читать дальше →
Total votes 9: ↑3 and ↓6 -3
Comments 7

Туториал по Unreal Engine. Часть 1: знакомство с движком

Reading time 12 min
Views 662K
image

Unreal Engine 4 — это набор инструментов для разработки игр, имеющий широкие возможности: от создания двухмерных игр на мобильные до AAA-проектов для консолей. Этот движок использовался при разработке таких игр, как ARK: Survival Evolved, Tekken 7 и Kingdom Hearts III.

Разработка в Unreal Engine 4 очень проста для начинающих. С помощью системы визуального создания скриптов Blueprints Visual Scripting можно создавать готовые игры, не написав ни строчки кода! В сочетании с удобным интерфейсом это позволяет быстро изготавливать рабочие прототипы.

В этой части туториала по Unreal Engine 4 мы ознакомимся с основными возможностями программы. Вот основные темы, которые будут в нём рассмотрены:

  • Установка движка
  • Импорт ассетов
  • Создание материалов
  • Использование Blueprints для создания объектов с простейшими функциями
Читать дальше →
Total votes 21: ↑19 and ↓2 +17
Comments 10

Интернет вещей: Arduino в связке с облаком

Reading time 8 min
Views 21K
В наш век многие задумывались о создании своего стартапа. Но разработать какой-то интересный и полезный продукт своими силами зачастую сложно. Отчасти для экономии сил, можно использовать облако. В частности, для проектов интернета вещей в облаке можно найти достаточное количество сервисов. Что же такое «Интернет вещей» и как его можно продуктивно использовать? Обо всём этом читайте под катом.

Читать дальше →
Total votes 23: ↑22 and ↓1 +21
Comments 4

Интеллектуальные чат-боты на ChatScript: основы

Reading time 11 min
Views 11K
Чат-боты, поддерживающие общение с человеком на естественном языке, весьма популярны и востребованы. Сегодня мы хотим поделиться с вами первой частью перевода материала о разработке чат-ботов с помощью ChatScript (CS), написанного сотрудником WebbyLab на основе опыта, приобретённого им в ходе работы над одним из недавних проектов компании. Здесь, в частности, речь пойдёт об основах работы с CS, рассмотренных с точки зрения программиста-практика. ChatScript хорош тем, что на нём можно сравнительно просто разрабатывать масштабные системы с возможностями искусственного интеллекта, и тем, что его несложно интегрировать в проекты, написанные на JavaScript.

Читать дальше →
Total votes 20: ↑20 and ↓0 +20
Comments 3

Поиск проблем производительности NodeJs приложения (с примерами)

Reading time 4 min
Views 15K

Из-за однопоточной архитектуры Node.js важно быть настороже высокой производительности вашего приложения и избегать узких мест в коде, которые могут привести к просадкам в производительности и отнимать ценные ресурсы CPU у серверного приложения.
В этой статье речь пойдет о том, как производить мониторинг загрузки CPU nodejs-приложения, обнаружить ресурсоемкие участки кода, решить возможные проблемы со 100% загрузкой ядра CPU.

Читать дальше →
Total votes 13: ↑12 and ↓1 +11
Comments 2
1

Information

Rating
Does not participate
Registered
Activity