В общем, решил я все таки развивать свой проект 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_разработка #разработчик

Путь развития (Roadmap) Frontend разработчика

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

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

#frontend #frontendразработка #frontend_development #roadmap #roadmap_frontend #javascript #html #css #верстка

1/n: Задачи leetcode JS — «Max Consecutive Ones» (Найти максимальное количество последовательных единиц)

Всем привет. Я столкнулся с тем, что на собеседования в некоторые ИТ-компании на Frontend JavaScript требуется решать задачи, и я решил сделать серию статей на тему, как я решил их тем или иным образом. Перед вами — первый текст из серии. Для решения будем использовать язык программирования TypeScript.

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

#typescript #javascript #frontend #frontend #frontend_разработка #frontendразработка #frontend_development #front_end #frontend_development #frontend_разработчик

Find the Key Differences Between Single-Page Applications (SPAs) and Multi-Page Applications (MPAs) in Web Development.

Check out the full article here👇
https://blog.lab.sa/spa-vs-mpa-in-web-development

#Web_Development
#Frontend_Development
#Web_Architecture
#SPA
#MPA