На наглядных примерах разберемся как проектировать интерфейсы, с которыми будет удобно взаимодействовать пользователям с особенными потребностями.
Senior Solutions Architect
Возможности JavaScript и TypeScript последних лет. Часть 1
Hello, world!
Представляю вашему вниманию перевод первой части этой замечательной статьи, посвященной возможностям JS и TS последних трех лет, которые вы могли пропустить.
В первой части мы поговорим о возможностях JS, во второй — о возможностях TS.
Это первая часть.
Обратите внимание: название почти каждой возможности — это также ссылка на соответствующий раздел MDN.
Что нужно знать, перед тем как использовать Prisma у себя в проекте
Привет, Хабр!
Основным языком разработки у нас, в TIMELESS, является TypeScript
, как на frontend, так и на backend. Поэтому в рамках идеи типизации всего и вся для работы с БД мы выбрали Prisma, которая позиционирует себя как “Next generation ORM for Node.js and TypeScript”.
Спустя год применения Prisma
хотелось бы поделиться опытом ее использования при работе с PostgreSQL
из Node.js
приложения.
Лучшие практики модальных окон. Компоненты дизайн системы
Меня зовут Андрей Насонов, я работаю UI/UX-дизайнером и руковожу дизайн-отделом. В 2008 году я начал заниматься графическим дизайном, а в 2015 году перешел в веб-дизайн.
В этой статье я описываю работу модального окна для десктоп-версии сайтов.
Мультивалютная бухгалтерия для NodeJS
Если вы делаете финансовый проект или проект в сфере крипты, в котором сохраняются финансовые данные, вам понадобится модуль, который будет отвечать за правильную работу с финансовыми данными.
Правильное решение - это со старта внедрять бухгалтерию с двойной записью (double ledger).
Людям, не знакомым с принципами бухгалтерии, кажется, что бухгалтерия это сложно. На самом деле это не так, и я покажу вам, почему.
React: полное руководство по повторному рендерингу
Привет, друзья!
Представляю вашему вниманию перевод этой замечательной статьи, посвященной повторному рендерингу (re-render, далее — ререндеринг) в React.
Что такое ререндеринг?
Существует 2 основные стадии, которым следует уделять пристальное внимание, когда речь заходит о производительности в React
:
- первоначальный рендеринг (initial rendering) — происходит, когда компонент впервые появляется на экране;
- ререндеринг — второй и последующие рендеринги компонента.
Ререндеринг происходит, когда React
необходимо обновить приложение некоторыми данными. Обычно, это является результатом действий пользователя, получения ответа на асинхронный запрос или публикацию при подписке (паттерн "pub/sub" — публикация/подписка или издатель/подписчик) на определенные данные.
Архитектура фронтенда и какой она должна быть
Все мы знаем про, или слышали про практики и паттерны проектирования SOLID, GRASP, MVC, MV** и даже применяем их с переменным успехом, стараясь нащупать эффективный подход к построению приложений. Но это лишь приводит к разнообразию реализаций наших приложений и частей функционала. Уже долгое время пытаюсь понять по каким правилам должно строиться фронтенд приложение чтобы оно удовлетворяло следующим критериям:
- легкое расширение функционала приложения;
- безболезненное внесение изменений в существующий функционал;
- унифицированная структура приложения;
- быстрый onboarding новых разработчиков на проект;
- понятный и прозрачный код;
- всегда понятно где в структуре файлов расположить ту или иную функциональность.
Какие у нас есть варианты?
Запустилась Дока — опенсорсный справочник по веб-разработке
Это открытый проект, внести вклад в него может каждый. Контент и код Доки лежат на GitHub, правила участия, обсуждения и ревью проходят открыто для всех желающих.
Яндекс.Практикум поддерживает работу редакции Доки.
Звуки для UI: подборка тематических ресурсов
Другие наши подборки:
- Где взять аудиосемплы для ваших проектов: 9 ресурсов (+29, ★259, ䷉6,7k)
- 12 тематических ресурсов с треками по лицензии Creative Commons (+55, ★482, ䷉19,2k)
Login или Log in?
‘Login’ или ‘log in’? Одно слово или два? Это достаточно распространенный вопрос среди тех, кто пишет на английском языке. Давайте разберемся, как же правильно.
Webpack + React. Как уменьшить бандл в 15 раз
Ясной инструкции по сборке webpack для продакшена я не нашел. Поэтому решил написать эту статью. Надеюсь, пригодится.
Существует множество сборщиков скриптов. Я выбрал для себя Webpack по таким критериям:
- Гибкость настройки
- Большое количество плагинов и лоадеров
- Lazy loading
- Использование es6 и es7 синтаксиса с помощью babel-loader
Планирование юзабилити-тестирования. Часть 2
Привет, Хабр, с вами снова Наталия Спрогис, руководитель направления UX-исследований в Mail.Ru Group! Это вторая часть статьи о планировании юзабилити-тестирования. В первой я рассказывала о формулировке целей и гипотез, выборе метода тестирования и инструментов фиксации данных, а также об организационных моментах для исследователя. Эта часть посвящена составлению протокола (сценария) тестирования: продумыванию того, какие задания вы дадите респонденту, какие вопросы будете задавать, какие опросники предложите заполнить.
Эффективное использование Github
Github — важная часть жизни современного разработчика: он стал стандартом для размещения opensource-проектов. В «2ГИС» мы используем гитхаб для разработки проектов web-отдела и хостинга проектов с открытым кодом.
Хотя большинство из нас пользуются сервисом практически каждый день, не все знают, что у него есть много фишек, помогающих облегчить работу или рутинные операции. Например, получение публичного ключа из URL; отслеживание того, с каких сайтов пользователи приходят в репозиторий; правильный шаринг ссылок на файлы, которые живут в репозиториях гитхаба; горячие клавиши и тому подобное. Цель этой статьи — рассказать о неочевидных вещах и вообще о том, что сделает вашу работу с гитхабом продуктивнее и веселее (я не буду рассматривать здесь работу с API гитхаба, так как эта тема заслуживает отдельной статьи).
Содержание
- Трюки с URL
- Горячие клавиши
- Тикеты и пулл-реквесты
- Github markdown
- Аккаунт
- Работа с репозиториями
- Поиск кода
- Командная строка и Github
- User scripts
- Github-вандализм
- Дополнительные Github-ресурсы
- Полезные ссылки
Нейронные сети на Javascript
Идея для написания этой статьи возникла прошлым летом, когда я слушал доклад на конференции BigData по нейронным сетям. Лектор «посыпал» слушателей непривычными словечками «нейрон», «обучающая выборка», «тренировать модель»… «Ничего не понял — пора в менеджеры», — подумал я. Но недавно тема нейронных сетей все же коснулась моей работы и я решил на простом примере показать, как использовать этот инструмент на языке JavaScript.
Мы создадим нейронную сеть, с помощью которой будем распознавать ручное написание цифры от 0 до 9. Рабочий пример займет несколько строк. Код будет понятен даже тем программистам, которые не имели дело с нейронными сетями ранее. Как это все работает, можно будет посмотреть прямо в браузере.
DevOps — автоматизируй всё
UX-дизайн кнопки: советы по созданию, типы и состояния
Кнопки – это самый обычный, «повседневный» элемент дизайна взаимодействия. Именно поэтому на них нужно обратить особое внимание, ведь кнопки являются важнейшим элементом, обеспечивающим беспрепятственное взаимодействие в сети и приложениях. Мы обсудим типы и состояния кнопок — эту информацию нужно знать, чтобы создавать эффективные кнопки и совершенствовать опыт пользователя.
Советы по созданию кнопок
Кнопки должны выглядеть как кнопки
Давайте на минуту представим, как с помощью дизайна донести возможность выбора. Как пользователь поймет, что данный элемент и есть кнопка? Он ориентируется на цвет и форму.
Как мы разрабатываем новый фронтенд Tinkoff.ru
В апреле этого года мы перезапустили tinkoff.ru. Банк превратился в финансовый супермакет. Теперь не только клиент банка, но и любой посетитель оплатит мобильный, проверит налоги и оформит ипотеку — всё на одной платформе. В этой статье я поделюсь опытом и технологическими решениями, к которым мы пришли за год разработки.
Мультиплеер в быстрых играх (Часть IV: Хэдшот! Путешествуем во времени)
Как повесить идеальный хэдшот если у тебя пинг 2 секунды? Вы узнаете в этой статье.
Текущий алгоритм работы мультиплеера
- Сервер получает команды с клиентов и времена их отправления
- Сервер обновляет состояние мира
- Сервер с некоторой частотой отправляет свое состояние всем клиентам
- Клиент отправляет команды и локально воспроизводит их результат
- Клиент получает обновленные состояния мира и:
- Применяет состояние от сервера
- Заново применяет все свои команды, которые сервер не успел применить.
- Интерполирует предыдущие состояния других игроков
- С точки зрения игрока, есть два серьезных последствия:
- Игрок видит себя в настоящем
- Игрок видит других в прошлом.
Обычно это отлично работает, но это становится большой проблемой для событий, которым нужна высокая пространственно-временная точность. Например если хочется разнести врагу башку!
Мультиплеер в быстрых играх (Часть III: появление врага)
Введение
В первой статье я рассказал про авторитарный сервер и его полезность для защиты от читов. В результате второй части мы получили набор техник, позволяющих игроку контролировать персонажа на удаленном сервере без лага.
В этой статье мы рассмотрим последствия одновременного подключения нескольких игроков к одному серверу.
Information
- Rating
- Does not participate
- Location
- Краснодар, Краснодарский край, Россия
- Registered
- Activity