Как мы пытались сделать фреймворк для фронтенда которого можно выучить за 5 минут и что из этого вышло

Современный фронтенд напоминает перегруженный интерфейс: мощные возможности, но чтобы начать работать, нужно изучить десятки концепций. React, Vue, Angular — у каждого свой сложный путь изучения. Мы задались вопросом: что действительно нужно знать, чтобы создавать UI? Оказалось, всего четыре концепции: компоненты, состояние, эффекты и DOM . Все остальное — синтаксический сахар и edge cases . Так родился наш эксперимент: упаковать эти основы в максимально простую модель . Не изобретать новое, а отшлифовать существующее. Иногда прогресс — это не добавление возможностей, а смелость убрать лишнее .

https://habr.com/ru/articles/964314/

#frontend #frontend_разработка #frontendразработка #frontend #frontend_development #frontend_разработчик #frontend_development #frontend_разработка #фронтенд #фронтендразработка

Работа с JWT-токенами в браузере без боли и страданий

Приветствую, дорогой читатель! Хочу поделиться решением наболевшей проблемы — автоматическим обновлением access-токена при истечении его срока действия.

https://habr.com/ru/articles/931190/

#jwt #axios #refresh_token #access_token #авторизация_пользователя #interceptors #bearer_tokens #frontend_development #api

В общем, решил я все таки развивать свой проект HackFrontend

Решил писать здесь о ходе развития проекта здесь, оставляйте свое мнение ! Что это? Hack Frontend — это платформа, которая помогает прокачать навыки фронтенд-разработки и подготовиться к собеседованию на позицию фронтенд-разработчика. Что уже есть? 📚 База знаний . В ней собраны важнейшие темы фронтенда с ответами на популярные вопросы, которые часто встречаются на собеседованиях. 💻 База задач . Практические задачи, которые можно решать прямо на платформе. Немного статистики: Запустил проект 26 января. За первые 5 дня:

https://habr.com/ru/articles/878356/

#frontend #frontendразработка #frontend_development #фронтенд #фронтенд_собеседование #собеседование #собеседование_вопросы #собеседование_в_it #развитие_стартапа #петпроект

Гибкие макеты: Решаем проблему на корню

При создании гибких макетов главный фактор, который мы должны учитывать, — это ширина корневого элемента. Мы можем получить процентное измерение ширины, с помощью такой единицы как vw . Не все знают, что можно менять размер шрифта в настройках браузера, и тем более не многие этим пользуются. Но если мы хотим обеспечить отзывчивость, мы должны учитывать и этот фактор. Во всех браузерах размер шрифта по умолчанию равен 16px; если это значение будет изменено, будет изменен и размер одного rem . Поэтому все размеры связанные с типографикой и не только лучше задавать в этих единицах. Таким образом, мы хотим, чтобы при изменении ширины страницы или размера шрифта в настройках браузера автоматически менялись и размеры элементов, отступов и шрифтов. Важно отметить, что изменение всех размеров нас интересует только в пределах минимальной и максимальной ширины макета. ▎ Проблема Например мы хотим задать размер для заголовка первого уровня. При минимальной ширине макета (320px), размер шрифта должен быть 28px. При максимальной ширине (1440px), размер шрифта должен быть 40px. Для решения этой задачи мы можем использовать специальный онлайн калькулятор: Min-Max-Value Interpolation Для наших значений мы получим такой код: clamp(1.75rem, 1.536rem + 1.07vw, 2.5rem)

https://habr.com/ru/articles/874716/

#frontend #frontendразработка #frontend_development #верстка #вебдизайн #css #адаптивность #адаптивная_вёрстка #адаптивный_дизайн #резиновая_верстка

Типичные ошибки при создании Frontend приложений

Хабр, привет! Мы — команда платформы интеллектуального управления контентом и цифровизации бизнес-процессов СИМФОНИЯ (ЕСМ/CSP/BPM) от ITFB Group. Сегодня решили поговорить об общих принципах, процессах и подходах, которых мы придерживались при создании нашей собственной платформы. Никакого кода, но и водой топить не будем! Поэтому, предлагаем сразу начать.

https://habr.com/ru/companies/itfb/articles/853086/

#frontendразработка #frontend #frontend_development #frontend_разработка #frontend_разработчик #проектирование #проектирование_приложения #itfb

@tanstack/react-query + react typescript

Хотелось бы рассказать как я использую @tanstack/react-query в своих проектах при построении архитектуры приложения

https://habr.com/ru/articles/843340/

#react #reactjs #typescript #react_query #@tanstack/reactquery #reactquery #frontend #frontendразработка #frontend_development #frontend_react

[Перевод] Работа с массивами по новому. React Custom Hook: useArray

В этой серии статей мы отправимся в путешествие по миру пользовательских хуков React, открывая для себя их огромный потенциал для улучшения ваших проектов разработки. Сегодня мы сосредоточимся на хуке "useArray", одном из многих тщательно разработанных хуков, доступных в коллекции пользовательских хуков React.

https://habr.com/ru/articles/830368/

#javascript #react #typescript #reactjs #webdevelopment #frontend #frontend #frontend_разработка #frontendразработка #frontend_development

[Перевод] React Custom Hook: useRenderCount

В этой серии статей мы отправимся в путешествие по миру пользовательских хуков React, открывая для себя их огромный потенциал для улучшения ваших проектов. Сегодня мы сосредоточимся на хуке useRenderCount, одном из многих тщательно разработанных хуков, доступных в коллекции пользовательских хуков React.

https://habr.com/ru/articles/828726/

#react #reactjs #reactjs #react_hooks #frontend #frontend #frontend_разработка #frontendразработка #frontend_development #frontend_development

Как сделать интерактивные пиксельные изображения с D3.js?

Hola, Amigos! На связи Артем Салеев, технический директор и Арсений Захаров, frontend-разработчик агентства продуктовой разработки Amiga . Сегодня расскажем, как мы реализовали задачу для крупного заказчика: разместить на сайте «размытые» картинки, которые бы разблюривались по пользовательскому взаимодействию.

https://habr.com/ru/articles/803281/

#getimagedata #blur #github #data #desktop #frontend #frontendразработка #frontend_development #frontend_разработка #разработчик