#Frontend

Подборка 150+ ресурсов для управления и работы ИТ-команды

Руководители отделов KODE делятся полезными сайтами, блогами, книгами, онлайн-курсами, подкастами, Telegram- и YouTube-каналами, которые пригодятся менеджерам, аналитикам, разработчикам, дизайнерам и QA.

33 показа
7.7K открытий
8 репостов
UX Паттерн: Визуализация загрузки данных. Loader, spin, progress, skeleton – когда и как использовать
8.9K показов
4.6K открытий
2 репоста
Позиционирование элементов, пошаговый разбор свойства position в CSS. Часть 1
46 показов
4.1K открытий
Как фронтендерам обновиться из Web 2.0 в Web 3.0

Крипта становится популярнее, и все чаще в разговоре можно услышать «веб-три». Но в этой статье я отброшу истории про «вкладывать в крипту все деньги, торговать на фьючерсах и абузить StepN» и подойду к Web 3.0 с технической стороны.

14 показов
2.9K открытий
1 репост
Какая разница в max/min — width(height) и просто width(height)?

Это руководство для новичков, которые как и я в начале своего пути освоения CSS и ищут самые простые объяснения в примерах.

35 показов
1.7K открытий
Почему БЭМ? Самая важная выжимка - разбор методологии
93 показа
1.2K открытий
Новый сайт «Перекрёстка»: как AFFINAGE развивает десктопную версию торговой сети и доставку товаров

Для ускорения работы «Перекрёсток» обратился к подрядчикам по дизайну, Frontend-разработке и контенту. Команда AFFINAGE отвечала за часть работ по продуктовой аналитике для онлайн-сервиса доставки товаров и верстку ключевых страниц.

Так выглядят наборы в новой версии сайта
26 показов
1K открытий
1 репост
14 полезных инструментов, которые я использую для более быстрой и простой веб-разработки

Всем привет! Я подготовил перевод крутой статьи, которая расскажет Вам о полезных инструментах, ускоряющие работу веб-разработчика. Приятного чтения!

0 показов
581 открытие
1 репост
Ключевые кадры и анимация в CSS. Свойства анимации. 3D трансформации. Сдвиг и перспектива
72 показа
531 открытие
Flexbox или Grid? Что за технологии?
109 показов
402 открытия
При обучении на Front-end, изучая CSS и HTML, как понять что ты уже готов к JavaScript?

Чтобы JavaScript не был сложен, запутан и недостижим. Давайте сегодня разберем, что лучше понять, перед тем как приступить к JS?

60 показов
351 открытие
Как делать сложные проекты на low-code: сайт европейской инвестиционной строительной компании от AFFINAGE

Гибкая админка на стеке Nuxt+Strapi, прототипы в Miro и ценный опыт международного сотрудничества.

38 показов
308 открытий
Первая Робопрактика для frontend-разработчиков: как это было

Почему база — всему голова, а современному разработчику нужно не только уметь кодить, но и побеждать в дискуссиях.

95 показов
306 открытий
Frontend — что почитать? 3 рекомендации от IT-школы
100 показов
281 открытие
Вы знали, что не обязательно знать математику, чтобы работать в IT?

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

2 показа
261 открытие
5 нескучных задач для сисадминов и разработчиков. Сколько сможете решить?

Приготовили для вас подборку задач для начинающих и опытных айтишников. Выбирайте подходящие, решайте и узнавайте верные ответы.

2.2K показов
238 открытий
Проектировщик, который пытается стать Frontend разработчиком. Начало пути

Предыстория...

4 показа
236 открытий
Новое поколение программистов: наш опыт участия в социальном проекте, IT-лагере для школьников

Социальные проекты дают уникальный шанс для команды сделать что-то значимое и полезное. Так, компания Frontend Production участвовала в IT- лагере по web-разработке, организованным основателем SkyEng Гошей Соловьевым. Поделимся нашим опытом в социальных проектах и расскажем, чего делать не стоит, а главное как работать эффективно с новым…

637 показов
196 открытий
React 19 уничтожит все фреймворки
786 показов
194 открытия
Яндекс Практикум. Профессия веб разработчик. Чему я научился за 2,5 месяца обучения?
0 показов
186 открытий
React Custom Hook: usePrevious
React Custom Hook: usePrevious

This custom hook can be a game-changer in various scenarios. For instance, you can utilize usePrevious to compare and visualize changes in data, track state transitions, or implement undo/redo functionality. Additionally, it can be valuable in form handling, animations, and any situation where having access to the previous value is crucial for…

8 показов
178 открытий
Фронтенд-разработка — как она помогает масштабировать бизнес?

Способны ли разработчики увеличить доходность компании клиента? Еще как! В этой статье мы посмотрим на фронтенд-разработку с точки зрения пользы для бизнеса. Проследим основные этапы ее создания, а также расскажем, в каких коммерческих отраслях она наиболее необходима.

301 показ
177 открытий
3 репоста
Яндекс Практикум. Профессия веб-разработчик. Первые впечатления от курса
0 показов
157 открытий
React Custom Hook: useFetch
React Custom Hook: useFetch

The useFetch hook also offers flexibility through its customizable options parameter. Developers can pass additional headers, query parameters, or request options as needed, ensuring compatibility with various APIs. The hook follows best practices by providing default options for setting the Content-Type header as application/json, promoting…

9 показов
134 открытия
React Custom Hook: useClickOutside
React Custom Hook: useClickOutside

One of the main advantages of useClickOutside is its ease of use. Simply import the hook into your component and pass the desired component's reference and a callback function. The hook takes care of the event listener setup and cleanup, saving you time and effort. Plus, it works seamlessly with functional components using the useState and useRef…

15 показов
126 открытий
3 вещи, которые нужно учитывать, прежде чем начать карьеру в разработке программного обеспечения

Разработка программного обеспечения в реальном мире зачастую отличается от того, чему нас учат.

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

0 показов
114 открытий
Кейс Фьюче: Помогаем туроператору популяризовать круизный отдых в России с помощью лендинга-агрегатора круизов

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

242 показа
112 открытий
React Custom Hook: useHover
React Custom Hook: useHover

One of the key advantages of useHover is its simplicity and reusability. By encapsulating the hover logic within the hook, you can easily use it across multiple components without duplicating code. This promotes clean and maintainable code, saving you time and effort in the long run.

15 показов
108 открытий
Когда вашему проекту нужно ревью

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

33 показа
103 открытия
React Custom Hook: useDebounce
React Custom Hook: useDebounce

One of the main advantages of useDebounce is its simplicity and flexibility. By wrapping your callback function, delay duration, and any dependencies in this custom hook, you can effortlessly implement debouncing functionality without cluttering your component code. The hook takes care of managing the timeout and clears it when necessary,…

10 показов
90 открытий
Фронт в 2022 // Изучаем программирование — Frontend

Ребят, прошу поддержки в начинании🙏

0 показов
87 открытий
React Custom Hook: useStorage
React Custom Hook: useStorage

One of the key advantages of this custom hook is its simplicity. You can use it to store any type of data, such as strings, numbers, or even complex objects, with just a few lines of code. Additionally, useStorage handles the serialization and deserialization of data for you, so you don't have to worry about converting values to and from JSON.

22 показа
85 открытий
React Custom Hook: useEffectOnce
React Custom Hook: useEffectOnce

By encapsulating the repetitive useEffect pattern, useEffectOnce allows you to focus on the logic within the effect function itself. This elegant solution saves you from writing boilerplate code repeatedly and helps keep your component files clean and concise.

10 показов
74 открытия
React Custom Hook: useTimeout
React Custom Hook: useTimeout
33 показа
72 открытия
React Custom Hook: useMediaQuery
React Custom Hook: useMediaQuery

One of the key advantages of this custom hook is its simplicity and reusability. With just a few lines of code, you can effortlessly implement responsive behavior throughout your application. Whether you need to conditionally render components, apply specific styles, or trigger different functionality based on screen size, useMediaQuery has got…

5 показов
65 открытий
React Custom Hook: useCookie

One of the key advantages of this custom hook is the ability to update the cookie value. The updateCookie function, returned by useCookie, enables you to modify the value of the cookie. By invoking this function with a new value and optional options, such as expiration or path, you can instantly update the cookie. Additionally, the hook…

18 показов
59 открытий
React Custom Hook: useOnScreen
React Custom Hook: useOnScreen
21 показ
59 открытий
React Custom Hook: useScript
React Custom Hook: useScript

One of the significant advantages of useScript is its ability to handle script loading asynchronously. By setting the script's async attribute to true, you ensure that it won't block the rendering of your application. This improves the performance and overall user experience, especially when dealing with larger scripts or slow network connections.

11 показов
54 открытия
React Custom Hook: useEventListener
React Custom Hook: useEventListener

One of the major advantages of useEventListener is its flexibility. You can specify the event type, callback function, and even the element where the event listener should be attached. This flexibility allows you to tailor event handling to your specific needs, enhancing the reusability of your code.

16 показов
53 открытия
React Custom Hook: useDebugInformation
React Custom Hook: useDebugInformation

One of the main advantages of useDebugInformation is its simplicity. By integrating just a few lines of code into your component, you gain access to a wealth of debugging data. The hook tracks the number of renders, changed props, time since the last render, and the timestamp of the last render. This comprehensive information empowers you to…

8 показов
52 открытия
React Custom Hook: useDeepCompareEffect
React Custom Hook: useDeepCompareEffect

One of the key advantages of useDeepCompareEffect is its ability to prevent unnecessary re-renders. By performing a deep comparison between the current and previous dependencies, the hook intelligently determines if the effect should be triggered, leading to optimized performance in scenarios where shallow comparisons fall short.

6 показов
51 открытие
Кто такой Frontend-разработчик?
28 показов
51 открытие