VueUse - популярная библиотека, состоящая из небольших утилит и в среде Vue разработчиков, идущая как "must have" наряду с Pinia. Нисколько не умаляя вклад Anthony Fu в экосистему Vue, опишу, почему я не использую её и не рекомендую для серьезных проектов и опытных разработчиков.
Всем привет! Меня зовут Александр Григоренко, я фронтенд-разработчик, и я часто сталкиваюсь с разработкой веб-интерфейсов с использованием 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-фреймворка стремится стать переосмыслением подхода к созданию веб-приложений, предлагая множество улучшений, оптимизаций и инструментов, призванных сделать процесс разработки более плавным, быстрым и приятным.
Без лишних отлагательства приступим к делу!
Как менялись цвета на сайтах с начала века до наших дней? Правда ли, что веб бесповоротно потемнел? Почему веб-дизайнеры больше не любят зеленый? Об истории изменений, текущих и будущих тенденциях в небольшой статье-исследовании.
Узкое место разработки — пропускная способность и ресурсоемкость производства. Мы его обошли с помощью сбора данных и автоматизации.
Когда проектов и сотрудников становится много, то большинство проблем возникает не из-за объемов и сложности задач, а из-за неумения выстраивать и автоматизировать процессы производства. В этом мы убедились на собственном опыте.
Привет, меня зовут Денис, я руковожу направлением разработки в Домклик. Дополнительно несу ношу лидера frontend-направления в нашей компании. Не так давно я отрефакторил систему собеседований для frontend-разработчиков, попутно тестируя технические вопросы на внешних и внутренних респондентах. И пришёл к выводу, что множество мной опрошенных разработчиков, вне зависимости от уровня, не знают или просто не обращают внимание на базовые правила при работе с картинками. В результате на просторах интернета зачастую можно найти изображения размером 200 на 200 пикселей и весом в несколько мегабайтов со смещением макета, столь раздражающим пользователей. Если вам интересно, как практически без вложений улучшить пользовательский опыт, то прошу под кат.
В данной статье я расскажу и покажу на примере, как реализовать глобальное хранилище состояния в React или Next, и зачем вообще оно нужно.
Очень популярно сейчас реализовывать это на Redux, но на мой взгляд реализация на Redux хуже воспринимается, сложнее для новичков, и требует больше кода.
Мы же будем использовать useGlobalHook, я постоянно использую его при разработке проектов, и на мой взгляд, он очень удобен.
AstroJS изначально был движком для создания статичных сайтов. Теперь там есть работа с API, server-side рендеринг, гибридный режим сервера. Можно написать код сайта в Astro-файлах на обычном html + js, а можно подключить визуальный фреймворк на свой выбор: React, Preact, Vue, Solid, Svelte. Подключаем CMS или backend-as-a-service - вот уже замена именитым NextJS и NuxtJS.
Но перед активной фазой создания сайта давайте потратим 10 минут. Настройка проекта для работы в команде займет каких-то шагов 20...
Из-за известных всем причин сейчас очень важным стал вопрос импортозамещения западного ПО во всех сферах деятельности, включая деятельность бизнеса. Не в последнюю очередь это касается и программного обеспечения, которым пользуются в наше время практически все - от школьников до пенсионеров, включая, конечно, и сотрудников госструктур и бизнеса, от малого до крупного.
Сегодня речь пойдет об офисных программах. Мы настолько привыкли за много лет работать в известных всем офисных программах фирмы Microsoft, что теперь, когда с лицензионными закупками их ПО, особенно для государства и бизнеса, стало, мягко говоря, «всё плохо», с привычным комфортом офисной работы на привычных «инструментах», можно, казалось бы, попрощаться.
Не всё так печально, если речь идёт о «простом» использовании офисных пакетов, таком как заполнение вручную «стандартных» документов и табличек. Тут отечественное ПО, призванное заместить собой творение «Монстра из Рэдмонда», вполне себе справляется, и даже почти без проблем открывает документы, созданные ранее в MS Office.
А вот в вопросах, касаемых автоматизации ручных процессов, всё не так уж хорошо. Поскольку, чего тут скрывать, большинство нашего офисного ПО — это просто локализованные ответвления зарубежных проектов свободного ПО, и автоматизация в них обычно достаётся по наследству.
Степень доступной автоматизации сильно рознится, но данная статья не о сравнительном анализе возможностей нашего отечественно офисного ПО, а о нашем исследовании возможности повторения функционала из нашей разработки — расширения (addon) для «MS Excel» in2sql, в офисном пакете «Р7-Офис» от фирмы «АО «Р7».
useReducer - это хук для работы с состоянием компонента. Он используется под капотом у хука useState. В этой статье разберемся с api useReducer, когда лучше использовать useReducer вместо useState и поговорим про нестандартный случай использования useReducer.
В этой статье мы поговорим о ключах (key) в React, разберемся зачем они нужны, как работает компонент при изменении ключа, и обсудим случаи, когда использование ключей вне массива или использование индексов в качестве ключей может быть даже лучше, чем уникальные значения.