Что в сегодняшнем выпуске: различные генераторы, крутые источники для вдохновения, стильные иконки, топовые продукты из Product Hunt за 2020 год, инструменты для экспорта анимаций и гифок, и многое другое.
User
Docker-образ для раздачи Single Page Application
Single-page Application (SPA) – это набор статических JavaScript и HTML файлов, а так же картинок и других ресурсов. Поскольку они не изменяются динамически, опубликовать их в интернете очень просто. Для этого существует большое количество дешёвых и даже бесплатных сервисов, начиная с простого GitHub Pages (а для кого-то даже с narod.ru) и заканчивая CDN вроде Amazon S3. Однако мне нужно было другое.
Мне нужен был Docker-образ с SPA, чтобы его легко можно было запустить как в продакшене в составе Kubernetes-кластера, так и на машине back-end разработчика, который понятия не имеет, что такое SPA.
UPD 07.07.20: Посмотерть самому на то, что в итоге получилось, можно тут: https://github.com/alexxxnf/spa-docker-example
Я для себя определил следующие требования к образу:
- простота в использовании (но не в сборке);
- минимальный размер как с точки зрения диска, так и с точки зрения RAM;
- настройка через переменные окружения, чтобы образ можно было использовать в разных средах;
- максимально эффективная раздача файлов.
Сегодня я расскажу как:
- выпотрошить nginx;
- собрать brotli из исходников;
- научить статические файлы понимать переменные окружения;
- ну и конечно как собрать из всего этого Docker-образ.
Цель этой статьи поделиться моим опытом и спровоцировать опытных участников сообщества на конструктивную критику.
Мониторинг всей памяти, используемой веб-страницей: performance.measureMemory()
Профилирование производительности React-приложений
В качестве площадки для экспериментов воспользуемся приложением React Movies Queue.
Приложение React Movies Queue
Дайджест свежих материалов из мира фронтенда за последнюю неделю №411 (13 — 19 апреля 2020)
Поддержка Touch в JavaScript
Какие проблемы могут быть у frontend-программиста, если тестировщик запустит его приложение на iPad с новой трекпад-клавиатурой, Windows-планшете, с неопределенным состоянием “режима планшета” или ноутбуке с подключенным к нему телевизором c поддержкой Multi-touch?
Это далеко не полный список допустимых конфигураций оборудования, которые мы поддерживаем при разработке системы СБИС. Сегодня СБИС — это не только знакомое многим решение для сдачи отчетности, ведения электронного документооборота и бухгалтерии, но и набор инструментов для автоматизации розницы, общепита, доставки и логистики. В этих сферах нужно уметь хорошо работать на самых разных планшетах и гаджетах с различными экранами и типами устройств ввода. И далеко не всегда проблемы могут быть связаны с экзотическим сочетанием настроек операционных систем и драйверов: если взять обычный iPad с браузером Safari, Android планшет или ноутбук-трансформер на Windows10 с последней версией Google Chrome — везде будет свой набор ошибок и особенностей обработки пользовательского ввода.
Эта статья о том, как, а главное, зачем вводить в обычных Web приложениях режим поддержки Touch.
Дайджест свежих материалов из мира фронтенда за последнюю неделю №410 (6 — 12 апреля 2020)
10 принципов масштабируемых фронтенд-проектов
В статье собран список принципов, которые будут полезны при создании веб-приложений с помощью React и Vue. Они помогут вам задать нужное направление и упорядочить разработку. Большинство этих принципов применимо к созданию любого ПО, но всё же список предназначен именно для веб-приложений.
Поднимаем свой полноценный игровой Minecraft сервер с мини-играми. Часть 2. Устанавливаем карту для лобби сервера
Часть 1. Выбираем и устанавливаем сервер
Часть 3. Устанавливаем мини-игры
Посмотреть, что в итоге получилось у меня: mc.piratebayserver.net
По любым вопросам пишите в Discord.
После публикации первой части статьи по установке своего Minecraft сервера, ко мне обратился один читатель Хабра. В письме он написал, что по неосторожности показал мою статью своим детям и ему пришлось пообещать сделать все, как написано. Теперь я, как отец двух детей, просто не имею морального права не закончить серию этих статей. Поэтому поехали.
4 вида утечек памяти в JavaScript и как с ними бороться
В этой статье мы рассмотрим распространённые виды утечек памяти в клиентском JavaScript. Также мы узнаем, как их обнаружить с помощью Chrome Development Tools.
Измерение производительности JavaScript-функций
Если веб-проект обладает высокой производительностью — это вносит вклад в его позитивное восприятие пользователями. А если пользователям понравилось работать с ресурсом — они имеют свойство возвращаться. Например, в этом исследовании показано, что 88% онлайн-клиентов менее склонны возвращаться на ресурсы, при работе с которыми они столкнулись с какими-то неудобствами. Эти неудобства вполне могут быть вызваны проблемами с производительностью.
Именно поэтому в деле веб-разработки важны инструменты, помогающие находить узкие места производительности и измерять результаты улучшений, вносимых в код. Подобные инструменты особенно актуальны в JavaScript-разработке. Здесь важно знать о том, что каждая строка JavaScript-кода может, в потенциале, заблокировать DOM, так как JavaScript — это однопоточный язык.
В этом материале я расскажу о том, как измерять производительность функций, и о том, что делать с результатами измерений.
Если вы полагаете, что некоторые вычисления слишком тяжелы для выполнения их в главном потоке, то вы, возможно, решите переместить их в сервис-воркер или в веб-воркер.
Дайджест свежих материалов из мира фронтенда за последнюю неделю №409 (30 марта — 5 апреля 2020)
Разработка формы на React. Принципы KISS, YAGNI, DRY на практике
При разработке нашей формы мы будем следовать принципам «KISS», «YAGNI», «DRY». Для успешного прохождения данного туториала вам не нужно знать этих принципов, я буду объяснять их по ходу дела. Однако, я полагаю, что вы хорошо владеете современным javascript и умеете мыслить на React.
Структурирование React-приложений
Одна из наиболее приятных возможностей React заключается в том, что эта библиотека не принуждает разработчика к строгому соблюдению неких соглашений, касающихся структуры проекта. Многое в этом плане остаётся на усмотрение программиста. Этот подход отличается от того, который, скажем, принят во фреймворках Ember.js или Angular. Они дают разработчикам больше стандартных возможностей. В этих фреймворках предусмотрены и соглашения, касающиеся структуры проектов, и правила именования файлов и компонентов.
Лично мне нравится подход, принятый в React. Дело в том, что я предпочитаю контролировать что-либо сам, не полагаясь на некие «соглашения». Однако много плюсов есть и у того подхода к структурированию проектов, который предлагает тот же Angular. Выбор между свободой и более или менее жёсткими правилами сводится к тому, что именно ближе вам и вашей команде.
За годы работы с React я испробовал множество различных способов структурирования приложений. Некоторые из применённых мной идей оказались более удачными, чем другие. Поэтому здесь я собираюсь рассказать обо всём том, что хорошо показало себя на практике. Я надеюсь, что вы найдёте здесь что-то такое, что пригодится и вам.
Топ 5 ошибок в моих ReactJS приложениях
Сегодня я хочу поделиться наиболее критичными и болезненными ошибками, которые допускают чаще других. Перед написанием этой статьи, я, конечно же, проштудировал интернет в поисках похожих статей, и с удивлением обнаружил, что большинство из них устарели и рассказывают о вещах, которые мало актуальны в 2019-м году. Так что, я постарался собрать список самый актуальных проблем на текущий момент.
1. Stateful компоненты (классы) хуже hook-ов
Как использовать Инверсию Управления в JavaScript и в Reactjs для упрощения работы с кодом
Инверсия Управления это довольно простой для понимания принцип программирования, который, при этом, может заметно улучшить ваш код. В данной статье будет показано как применять Инверсию Управления в JavaScript и в Reactjs.
Если вы уже писали код который используется больше чем в одном месте, то вам знакома такая ситуация:
- Вы создаете многократно используемый фрагмент кода (это может быть функция, React компонент, React хук и тд) и делитесь им (для совместной работы или публикуя в опенсорс).
- Кто-то обращается к вам с просьбой добавить новый функционал. Ваш код не поддерживает предложенный функционал, но мог бы, если бы вы сделали небольшое изменение.
- Вы добавляете новый аргумент/проп/опцию в свой код и в связанную с ним логику для поддержания работы этого нового функционала.
- Повторите стадии 2 и 3 несколько раз (или много-много раз).
- Теперь ваш повторно используемый код тяжело использовать и поддерживать.
Что именно делает код кошмаром для использования и поддержки? Есть несколько аспектов, которые могут сделать ваш код проблемным:
Reactjs, Material-UI with JSS. Краткий гайд
Итак, material-ui — reactJS's фрэймворк, предоставляющий готовые google решения для быстрой и довольно простой web разработки.
Material-UI достаточно крупная библиотека, где ключевой частью react компонентов и стилизации является @material-ui/core (целью ее использования должен быть немаленький проект).
Этот туториал не включает в себя продвинутое использование material-ui. Это мини мануал по стилизации компонентов.
Использовать material компоненты действительно не сложно, но есть нюансы использования стилизации. Об этом собственно и пойдет речь.
Рассмотрим следующее
- JSS и немного о синтаксисе;
- Стилизация классовых react, material компонентов;
- Стилизация функциональных с использованием хуков react, material компонентов;
- Стилизация посредством styledComponent react, material компонентов;
- Провайдер theme;
- Переопределение material компонентов;
GO под кат!
Стартуем библиотеку компонентов на React и TypeScript
Большую часть свой работы, я пишу бэкенды, но вот на днях появилась задача начать библиотеку компонентов на React. Несколько лет назад, когда версия React была такой же маленькой, как и мой опыт фронтенд-разработки, я уже делал подход к снаряду и получилось неумело и коряво. Принимая во внимание зрелость текущей экосистемы React и мой подросший опыт, я воодушевился уж в этот-то раз сделать всё хорошо и удобно. В результате у меня появилась заготовка для будущей библиотеки, а чтобы ничего не забыть и собрать всё в одном месте, была написана эта статья-шпаргалка, которая также должна помочь тем, кто не знает, с чего начать. Посмотрим, что же у меня получилось.
5 практических рекомендаций по использованию React-хуков в продакшне
Дайджест свежих материалов из мира фронтенда за последнюю неделю №407 (16 — 22 марта 2020)
Information
- Rating
- Does not participate
- Registered
- Activity