Pull to refresh
4
0
Осипов Иван @ozzycv

User

Send message

14 свежих и полезных дизайн-ресурсов в Январе

Reading time 5 min
Views 5.2K

Что в сегодняшнем выпуске: различные генераторы, крутые источники для вдохновения, стильные иконки, топовые продукты из Product Hunt за 2020 год, инструменты для экспорта анимаций и гифок, и многое другое.

Читать далее
Total votes 8: ↑8 and ↓0 +8
Comments 0

Docker-образ для раздачи Single Page Application

Reading time 9 min
Views 13K

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-образ.

Цель этой статьи поделиться моим опытом и спровоцировать опытных участников сообщества на конструктивную критику.

Читать дальше →
Total votes 16: ↑14 and ↓2 +12
Comments 45

Мониторинг всей памяти, используемой веб-страницей: performance.measureMemory()

Reading time 8 min
Views 7.9K
Автор статьи, перевод которой мы сегодня публикуем, рассказывает о том, как мониторить память, выделяемую веб-страницам. Внимательное отношение к памяти страниц, работающих в продакшне, помогает поддерживать производительность веб-проектов на высоком уровне.


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

Профилирование производительности React-приложений

Reading time 7 min
Views 17K
Сегодня поговорим об измерении производительности рендеринга React-компонентов с использованием API React Profiler. Ещё мы будем оценивать взаимодействия с компонентом, применяя новый экспериментальный API Interaction Tracing. Кроме того, мы воспользуемся API User Timing для проведения собственных измерений.

В качестве площадки для экспериментов воспользуемся приложением React Movies Queue.


Приложение React Movies Queue
Читать дальше →
Total votes 32: ↑32 and ↓0 +32
Comments 0

Дайджест свежих материалов из мира фронтенда за последнюю неделю №411 (13 — 19 апреля 2020)

Reading time 3 min
Views 10K
Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.

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

Поддержка Touch в JavaScript

Reading time 6 min
Views 8.1K

image


Какие проблемы могут быть у frontend-программиста, если тестировщик запустит его приложение на iPad с новой трекпад-клавиатурой, Windows-планшете, с неопределенным состоянием “режима планшета” или ноутбуке с подключенным к нему телевизором c поддержкой Multi-touch?


Это далеко не полный список допустимых конфигураций оборудования, которые мы поддерживаем при разработке системы СБИС. Сегодня СБИС — это не только знакомое многим решение для сдачи отчетности, ведения электронного документооборота и бухгалтерии, но и набор инструментов для автоматизации розницы, общепита, доставки и логистики. В этих сферах нужно уметь хорошо работать на самых разных планшетах и гаджетах с различными экранами и типами устройств ввода. И далеко не всегда проблемы могут быть связаны с экзотическим сочетанием настроек операционных систем и драйверов: если взять обычный iPad с браузером Safari, Android планшет или ноутбук-трансформер на Windows10 с последней версией Google Chrome — везде будет свой набор ошибок и особенностей обработки пользовательского ввода.


Эта статья о том, как, а главное, зачем вводить в обычных Web приложениях режим поддержки Touch.

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

Дайджест свежих материалов из мира фронтенда за последнюю неделю №410 (6 — 12 апреля 2020)

Reading time 3 min
Views 7.9K
Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.

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

10 принципов масштабируемых фронтенд-проектов

Reading time 4 min
Views 13K
С момента своего возникновения веб-приложения прошли долгий путь. Мы знаем, какую важную роль играет в вебе JavaScript и какие безграничные возможности есть у нас при выборе фреймворков и технологий. Каждый фреймворк имеет свои достоинства и недостатки, но почти во всех используются какие-то основные методологии. Такие инструменты как create-react-app, next.js, vue-cli и другие действительно полезны для начального формирования проекта и его структуры, но в остальном вы вольны создавать приложение в соответствии со своими предпочтениями и требованиями проекта.

В статье собран список принципов, которые будут полезны при создании веб-приложений с помощью React и Vue. Они помогут вам задать нужное направление и упорядочить разработку. Большинство этих принципов применимо к созданию любого ПО, но всё же список предназначен именно для веб-приложений.
Читать дальше →
Total votes 23: ↑22 and ↓1 +21
Comments 2

Поднимаем свой полноценный игровой Minecraft сервер с мини-играми. Часть 2. Устанавливаем карту для лобби сервера

Reading time 5 min
Views 28K


Часть 1. Выбираем и устанавливаем сервер

Часть 3. Устанавливаем мини-игры

Посмотреть, что в итоге получилось у меня: mc.piratebayserver.net
По любым вопросам пишите в Discord.

После публикации первой части статьи по установке своего Minecraft сервера, ко мне обратился один читатель Хабра. В письме он написал, что по неосторожности показал мою статью своим детям и ему пришлось пообещать сделать все, как написано. Теперь я, как отец двух детей, просто не имею морального права не закончить серию этих статей. Поэтому поехали.
Читать дальше →
Total votes 10: ↑9 and ↓1 +8
Comments 25

4 вида утечек памяти в JavaScript и как с ними бороться

Reading time 16 min
Views 127K

В этой статье мы рассмотрим распространённые виды утечек памяти в клиентском JavaScript. Также мы узнаем, как их обнаружить с помощью Chrome Development Tools.


timeline в Chrome Dev Tools

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

Измерение производительности JavaScript-функций

Reading time 8 min
Views 19K
Измерение времени, которое уходит на выполнение функции — это хороший способ доказательства того, что одна реализация некоего механизма является более производительной, чем другая. Это позволяет удостовериться в том, что производительность функции не пострадала после неких изменений, внесённых в код. Это, кроме того, помогает искать узкие места производительности приложений.

Если веб-проект обладает высокой производительностью — это вносит вклад в его позитивное восприятие пользователями. А если пользователям понравилось работать с ресурсом — они имеют свойство возвращаться. Например, в этом исследовании показано, что 88% онлайн-клиентов менее склонны возвращаться на ресурсы, при работе с которыми они столкнулись с какими-то неудобствами. Эти неудобства вполне могут быть вызваны проблемами с производительностью.

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



В этом материале я расскажу о том, как измерять производительность функций, и о том, что делать с результатами измерений.

Если вы полагаете, что некоторые вычисления слишком тяжелы для выполнения их в главном потоке, то вы, возможно, решите переместить их в сервис-воркер или в веб-воркер.
Читать дальше →
Total votes 25: ↑25 and ↓0 +25
Comments 8

Дайджест свежих материалов из мира фронтенда за последнюю неделю №409 (30 марта — 5 апреля 2020)

Reading time 4 min
Views 9.2K
Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.

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

Разработка формы на React. Принципы KISS, YAGNI, DRY на практике

Reading time 12 min
Views 19K
Здавствуйте, в этом туториале мы рассмотрим как разработать очень простую, но контролируемую форму в React, сфокусировавшись на качестве кода.

При разработке нашей формы мы будем следовать принципам «KISS», «YAGNI», «DRY». Для успешного прохождения данного туториала вам не нужно знать этих принципов, я буду объяснять их по ходу дела. Однако, я полагаю, что вы хорошо владеете современным javascript и умеете мыслить на React.
Читать дальше →
Total votes 11: ↑11 and ↓0 +11
Comments 34

Структурирование React-приложений

Reading time 16 min
Views 65K
Материал, перевод которого мы сегодня публикуем, раскрывает подходы, применяемые его автором при структурировании React-приложений. В частности, речь здесь пойдёт об используемой структуре папок, об именовании сущностей, о местах, где располагаются файлы тестов, и о других подобных вещах.

Одна из наиболее приятных возможностей React заключается в том, что эта библиотека не принуждает разработчика к строгому соблюдению неких соглашений, касающихся структуры проекта. Многое в этом плане остаётся на усмотрение программиста. Этот подход отличается от того, который, скажем, принят во фреймворках Ember.js или Angular. Они дают разработчикам больше стандартных возможностей. В этих фреймворках предусмотрены и соглашения, касающиеся структуры проектов, и правила именования файлов и компонентов.



Лично мне нравится подход, принятый в React. Дело в том, что я предпочитаю контролировать что-либо сам, не полагаясь на некие «соглашения». Однако много плюсов есть и у того подхода к структурированию проектов, который предлагает тот же Angular. Выбор между свободой и более или менее жёсткими правилами сводится к тому, что именно ближе вам и вашей команде.

За годы работы с React я испробовал множество различных способов структурирования приложений. Некоторые из применённых мной идей оказались более удачными, чем другие. Поэтому здесь я собираюсь рассказать обо всём том, что хорошо показало себя на практике. Я надеюсь, что вы найдёте здесь что-то такое, что пригодится и вам.
Читать дальше →
Total votes 30: ↑29 and ↓1 +28
Comments 13

Топ 5 ошибок в моих ReactJS приложениях

Reading time 6 min
Views 11K
Больше 4х лет назад я влюбился в ReactJS и с тех пор все Front End приложения разрабатываю при помощи этого замечательного инструмента. За это время я и команды, в которых мне повезло поработать, наделали кучу ошибок, многие из которых были благополучно исправлены. Множество оптимальных решений было найдено в тяжелых и дорогостоящих экспериментах.

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

Как я работал над ReacjJS приложением

1. Stateful компоненты (классы) хуже hook-ов


Читать дальше →
Total votes 29: ↑22 and ↓7 +15
Comments 57

Как использовать Инверсию Управления в JavaScript и в Reactjs для упрощения работы с кодом

Level of difficulty Medium
Reading time 11 min
Views 12K

Как использовать Инверсию Управления в JavaScript и в Reactjs для упрощения работы с кодом


Инверсия Управления это довольно простой для понимания принцип программирования, который, при этом, может заметно улучшить ваш код. В данной статье будет показано как применять Инверсию Управления в JavaScript и в Reactjs.


Если вы уже писали код который используется больше чем в одном месте, то вам знакома такая ситуация:


  1. Вы создаете многократно используемый фрагмент кода (это может быть функция, React компонент, React хук и тд) и делитесь им (для совместной работы или публикуя в опенсорс).
  2. Кто-то обращается к вам с просьбой добавить новый функционал. Ваш код не поддерживает предложенный функционал, но мог бы, если бы вы сделали небольшое изменение.
  3. Вы добавляете новый аргумент/проп/опцию в свой код и в связанную с ним логику для поддержания работы этого нового функционала.
  4. Повторите стадии 2 и 3 несколько раз (или много-много раз).
  5. Теперь ваш повторно используемый код тяжело использовать и поддерживать.

Что именно делает код кошмаром для использования и поддержки? Есть несколько аспектов, которые могут сделать ваш код проблемным:

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

Reactjs, Material-UI with JSS. Краткий гайд

Reading time 6 min
Views 57K
Доброго времени суток, Хабр!

Итак, material-uireactJS's фрэймворк, предоставляющий готовые google решения для быстрой и довольно простой web разработки.

Material-UI достаточно крупная библиотека, где ключевой частью react компонентов и стилизации является @material-ui/core (целью ее использования должен быть немаленький проект).

Этот туториал не включает в себя продвинутое использование material-ui. Это мини мануал по стилизации компонентов.

Использовать material компоненты действительно не сложно, но есть нюансы использования стилизации. Об этом собственно и пойдет речь.

Рассмотрим следующее


  1. JSS и немного о синтаксисе;
  2. Стилизация классовых react, material компонентов;
  3. Стилизация функциональных с использованием хуков react, material компонентов;
  4. Стилизация посредством styledComponent react, material компонентов;
  5. Провайдер theme;
  6. Переопределение material компонентов;

GO под кат!

Читать дальше →
Total votes 8: ↑6 and ↓2 +4
Comments 3

Стартуем библиотеку компонентов на React и TypeScript

Reading time 14 min
Views 27K

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

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

5 практических рекомендаций по использованию React-хуков в продакшне

Reading time 8 min
Views 14K
Автор статьи, перевод которой мы сегодня публикуем, говорит, что в компании commercetools приняли на вооружение хуки React в начале 2019 года — в момент их появления в React 16.8.0. С тех пор программисты компании постоянно перерабатывают свой код, переводя его на хуки. Хуки React позволяют, не используя классы, работать с состоянием компонентов и пользоваться другими возможностями React. Используя хуки, можно, работая с функциональными компонентами, «подключаться» к событиям жизненного цикла компонентов и реагировать на изменения их состояния.


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

Дайджест свежих материалов из мира фронтенда за последнюю неделю №407 (16 — 22 марта 2020)

Reading time 3 min
Views 8.8K
Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.

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

Information

Rating
Does not participate
Registered
Activity