Idle, Loading, Error, Success: как устроить надёжный UI

При разработке фронтенда мы часто ограничиваемся тремя состояниями UI‑запроса: loading, error, data (или success). Но это не всегда достаточно — особенно когда дело доходит до тонких UX‑деталей, предотвращения гонок запросов и адекватного управления отменой при размонтировании компонентов. В статье рассмотрим, почему добавление состояния idle делает систему более надёжной, как реализовать конечный автомат для управления статусами, как отменять fetch‑запросы и оптимизировать перерисовки.

👉

@frontend_mind

Ни один разработчик не может устоять перед таким

👉

@frontend_mind

javascript. Визуальные редакторы

Подавляющее большинство ныне действующих сайтов сделано при помощи CMS. А такие системы невозможно представить без визуальных редакторов страниц. WYSIWYG - редакторы позволяют администратору управлять содержимым ресурса, не будучи знакомым даже с азами программирования. Многие разработчики используют не готовые CMS, а пишут собственные. Данная книга призвана помочь им в этом непростом деле. На ее страницах описаны четыре WYSIWYG-редактора — на разный вкус и для разных задач. Все системы являются оригинальными и не содержат каких-либо заимствований кода. Функциональные возможности приведенных разработок имеют исчерпывающие описания и разъяснения.

👉

@frontend_mind

WeIrD StRiNg CaSe

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

Переданная строка будет состоять только из алфавитных символов и пробелов(' '). Пробелы будут присутствовать только при наличии нескольких слов. Слова будут разделены одним пробелом(' ').

Примеры:
"String" => "StRiNg"
"Weird string case" => "WeIrD StRiNg CaSe"

👉

@frontend_mind

👉

@frontend_mind

Как ускорить скорость загрузки сайта? Гайд по оптимизации

Скорость загрузки страниц — один из ключевых факторов, влияющих на успех сайта в интернете. Она влияет на пользовательский опыт, конверсию и SEO. Google учло это уже в 2010 году, сделав скорость загрузки фактором ранжирования. В 2018 году метрики были расширены, а в 2020 — дополнены новыми обновлениями.

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

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

👉

@frontend_mind

Как перепрошить мозг после выгорания: BDNF, стресс и мышление

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

👉

@frontend_mind

Тут явно проблема в зависимостях

👉

@frontend_mind

Multithreaded JavaScript

Готовы ли вы к разработке многопоточных приложений на JavaScript? Прочитав данную книгу, JavaScript-разработчик среднего уровня узнает о сильных и слабых сторонах API веб-исполнителей в браузерах и рабочих потоков в Node.js.
Авторы рассказывают о двух подходах к построению многопоточных приложений: на основе передачи сообщений и на основе разделяемой памяти. Описываются API для обоих случаев, объясняется, когда использовать тот или другой, а когда - их сочетание. Вы также увидите, как реализуются высокоуровневые паттерны на базе этих подходов.

👉

@frontend_mind

Fix string case

В этом задании вам будет дана строка, в которой могут быть смешанные прописные и строчные буквы, и ваша задача - преобразовать эту строку в строчную или прописную, основываясь на следующем:

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

Например:
solve("coDe") = "code". Строчных символов больше, чем прописных. Измените только букву "D" на строчную.

solve("CODe") = "CODE". Прописные символы > строчные. Измените только букву "e" на прописную.

solve("coDE") = "code". Верхний == нижний регистр. Измените все символы на строчные.

@frontend_mind

Отслеживаемые свойства, что такое, как использовать?

В контексте разработки приложений, отслеживаемые свойства (observable properties) относятся к свойствам объектов, изменения которых можно отслеживать. Это полезно для автоматического обновления пользовательского интерфейса или выполнения других действий при изменении данных. В JavaScript для реализации отслеживаемых свойств часто используются библиотеки, такие как MobX, или встроенные механизмы, такие как Proxy.

Использование Proxy для отслеживания свойств
Встроенный объект Proxy в JavaScript позволяет перехватывать и настраивать операции, выполняемые с объектом, такие как чтение и запись свойств.
const handler = {
get(target, property) {
console.log(`Getting value of ${property}`);
return target[property];
},
set(target, property, value) {
console.log(`Setting value of ${property} to ${value}`);
target[property] = value;
return true;
}
};
const person = {
name: 'Alice',
age: 25
};
const proxyPerson = new Proxy(person, handler);
proxyPerson.name = 'Bob'; // Setting value of name to Bob
console.log(proxyPerson.name); // Getting value of name // Bob

Использование MobX для отслеживания свойств
Это библиотека для управления состоянием, которая делает состояния наблюдаемыми и автоматически синхронизирует их с пользовательским интерфейсом.

Пример использования MobX
import { observable, autorun } from 'mobx';
import { observer } from 'mobx-react';
import React from 'react';
import ReactDOM from 'react-dom';
const appState = observable({
count: 0,
increment() {
this.count++;
}
});
autorun(() => {
console.log(`Count: ${appState.count}`);
});
appState.increment(); // Count: 1
appState.increment(); // Count: 2
const Counter = observer(() => (

Count: {appState.count}
appState.increment()}>Increment

));
ReactDOM.render(, document.getElementById('root'));

Плюсы отслеживаемых свойств
- Автоматическое обновление UI
Изменения данных автоматически отражаются в пользовательском интерфейсе.
- Централизованное управление состоянием
Легче управлять состоянием и следить за его изменениями.
- Повышенная производительность
При правильной настройке обновляются только те части интерфейса, которые зависят от измененных данных.

Примеры реального использования
Простой счетчик с использованием Proxy
const handler = {
set(target, property, value) {
console.log(`Setting value of ${property} to ${value}`);
target[property] = value;
document.getElementById(property).innerText = value;
return true;
}
};
const state = {
count: 0
};
const proxyState = new Proxy(state, handler);

document.getElementById('increment').addEventListener('click', () => {
proxyState.count++;
});


0
Increment



👉

@frontend_mind