Фронтенд

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

Планируется, что Angular 18 будет выпущен в мае 2024 года, и уже есть несколько подтвержденных функций для включения в предстоящую версию, которые мы рассмотрим в данном материале.

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

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

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

В этой статье мы рассмотрим, как реализовать Event Loop в JavaScript.

В статье рассмотрены три инструмента мемоизации в React: useMemo, useCallback, memo. Главный источник информации: документация React. Не всем комфортно работать напрямую с документацией, так что если вы постоянно откладываете погружение в документацию React - я сделал это за вас, постарался выделить самое важное, и дать ссылки для углубленного погружения.  

Так как мы будем рассматривать не самые базовые вещи, касающиеся React, то я не буду останавливаться на таких основах как хуки, состояние, свойства, чистые функции и чистые компоненты, ожидая, что вы ознакомитесь с ними за пределами статьи. А также все рассмотренное ниже относится в первую очередь к React 18. 

Впечатления от использования бесплатного помощника генерации кода.

Я уже предпринимал попытки освоить Pinescript года 3-4 назад, когда только увидел всё многообразие торговых индикаторов в TradingView. И я точно помню своё ощущение бессилия, потому что толковых методичек я не нашел. А сегодня, через Ai-помощника смог сделать то что хотел - за несколько промптов, совершенно ничего не зная в языке и как эти индикаторы строятся. Согласитесь, очень странное впечатление, когда пишешь что-то, копируешь, вставляешь, и у тебя ещё и получается! Это ЭКСТАТИЧЕСКОЕ ощущение ?.

Салют, Хабр!

Tailwind CSS – это utility-first CSS фреймворк, который отличается от традиционных CSS фреймворков вроде Bootstrap или Foundation тем, что вместо предопределенных компонентов предлагает набор utility-классов, позволяющих стилизовать элементы прямо в HTML.

Utility-first подход заключается в использовании множества функциональных классов, каждый из которых отвечает за одно CSS свойство, к примеру паддинги, маржини и т.п.

В этой статье рассмотрим синтаксис Tailwind CSS, в целом, он похож на дефолт CSS.

Привет, Хабр!

Svelte, в его сущности, предлагает нам подход меньше значит больше. Вместо того чтобы полагаться на виртуальный DOM, как большинство фреймворков, Svelte переносит эту работу на этап сборки. Результат? Более чистый и эффективный код, который выполняется непосредственно в браузере. Каждый компонент в Svelte компилируется в самодостаточный JavaScript.

Мы не раз читали на Хабре, почему важно иметь быстрые сайты, как это влияет на посещаемость, время на странице, глубину и прочее. Но каждый раз это инструкции о том, как поменять инфраструктуру серверов, потратить десятки часов на разработку и ощутимое количество денег. В случае больших корпораций, конечно же, такие действия оправданы. А маленькие стартапы обычно таким и вовсе не занимаются, фокусируясь на других задачах. Мы же оказались где-то посередине. У нас были плохие показатели, но времени на какие-то значительные изменения не было. И несмотря на наличие ресурсов мы решили пойти самым простым путём и, как и гласит закон Парето, получить 80% результата за 20% усилий. Меня зовут Савичев Игорь, я работаю в Самолете и мы занимаемся цифровизацией строительства на российском рынке. Мы развиваем IT-технологии в разных направлениях от девелопмента до финтеха. И сегодня я расскажу, можно ли сделать себе хорошо, быстро и не очень дорого.

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

Всем привет! Меня зовут Александр Григоренко, я фронтенд-разработчик, и я часто сталкиваюсь с разработкой веб-интерфейсов с использованием Drag and Drop. В своей предыдущей статье про Drag and Drop я рассказывал про историю появления и развития этого подхода: появившись в первом в мире графическом интерфейсе, Drag and Drop продолжает быть одной из самых актуальных технологий и на сегодняшний день. В этой статье я хочу поговорить об особенностях проектирования дизайна и юзабилити интерфейсов с Drag and Drop. В первую очередь, я буду приводить примеры и говорить об особенностях Drag and Drop в рамках сложившихся практик в современных веб-интерфейсах, но многое из этого будет справедливо и для интерфейсов классических настольных приложений.

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

Всем привет! Меня зовут Александр Григоренко, я фронтенд-разработчик, и в последнее время я много работаю над веб-интерфейсами с возможностью перетаскивания объектов методом Drag and Drop. В процессе изучения стандартов и сложившихся лучших практик работы с этим подходом, мне стало интересно разобраться в истории его появления. Копнув поглубже, я выяснил, что Drag and Drop — это один из самых первых способов взаимодействия человека с компьютерной программой. В этой статье хочу рассмотреть историю появления и развития этой технологии.

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

Под конец прошлого года, по ряду причин, ESLint отказались от дальнейшей поддержки и развития стилистических правил. А тема, как по мне, несправедливо осталась в тени. Давайте разберемся, почему так произошло и какие изменения нас ждут на поприще статического анализа и форматирования кода.

Всем привет! Сегодня я хочу рассказать о Mock Service Worker — технологии, которая позволяет эмулировать поведение бэкенда в ситуациях, когда по каким-то причинам невозможно использовать реальный бэкенд для полноценной разработки фронтенда, а также когда необходимо изолированно протестировать различные пользовательские сценарии. Тем более, что совсем недавно вышла новая мажорная версия библиотеки msw, и в ней достаточно много важных обновлений.

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

Так я познакомился c подходом SSG (Static Site Generation — Генерация статических сайтов), попробовал его в деле, и хочу рассказать о том, что это такое, зачем может понадобиться SSG-фреймворк и почему Astro — лучший выбор для генерации статических сайтов прямо сейчас.

Привет, Хабр! Меня зовут Александр Григоренко, я фронтенд-разработчик. В основном, занимаюсь разработкой приложений на React, но также постоянно экспериментирую с различными технологиями.

В своей работе я часто создаю собственные или использую уже готовые UI-компоненты. Проблема с такими компонентами заключается в том, что они часто ограничены определённым фреймворком, и их реализация требует написания сложной нестандартизированной логики. В течение долгого времени для базовых UI-компонентов, таких как диалоговые окна, использовались самописные решения, а в тяжёлых случаях и встроенные в JavaScript методы alert(), prompt() и confirm().

Отличная новость в том, что такой компонент можно реализовать с использованием нативного HTML-элемента <dialog>, который встроен в стандарт HTML5 и работает одинаково во всех современных браузерах.

Давайте познакомимся с возможностями <dialog> поближе.

Практики работы с запросами на сервере значительно отличаются от того, к чему привык фронтенд-разработчик. ежедневно разрабатывающий SPA-приложения с клиентским рендерингом. Если не учесть эту разницу при разработке приложения с серверным рендерингом, то можно собрать довольно много граблей. Хочу поделиться опытом и рассказать про три практики, которые использую повседневно, а также о проблемах, предшествующих их появлению. Я буду ссылаться на веб-производительность и рассчитываю что вы уже знакомы с такими метриками как TTFB, LCP и FCP.

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

• Индикатор загрузки

• Прерывание отправки

• Drag and drop

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

В этой статье погрузимся с головой в захватывающий мир новых возможностей Vue 3.

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

Без лишних отлагательства приступим к делу!