Обновить

Фронтенд

Сначала показывать
Порог рейтинга
Уровень сложности

[июль 2025] Настройка проекта AstroJS: VS Code, Prettier, ESlint, Stylelint, PostCSS, минификация файлов

Уровень сложностиСредний
Время на прочтение7 мин
Охват и читатели8.7K

AstroJS изначально был движком для создания статичных сайтов. Теперь там есть работа с API, server-side рендеринг, гибридный режим сервера. Можно написать код сайта в Astro-файлах на обычном html + js, а можно подключить визуальный фреймворк на свой выбор: React, Preact, Vue, Solid, Svelte. Подключаем CMS или backend-as-a-service - вот уже замена именитым NextJS и NuxtJS.

Но перед активной фазой создания сайта давайте потратим 10 минут. Настройка проекта для работы в команде займет каких-то шагов 20...

Читать далее

Ищем замену Excel — OnlyOffice/Р7

Уровень сложностиПростой
Время на прочтение5 мин
Охват и читатели11K

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

Сегодня речь пойдет об офисных программах. Мы настолько привыкли за много лет работать в известных всем офисных программах фирмы Microsoft, что теперь, когда с лицензионными закупками их ПО, особенно для государства и бизнеса, стало, мягко говоря, «всё плохо», с привычным комфортом офисной работы на привычных «инструментах», можно, казалось бы, попрощаться.

Не всё так печально, если речь идёт о «простом» использовании офисных пакетов, таком как заполнение вручную «стандартных» документов и табличек. Тут отечественное ПО, призванное заместить собой творение «Монстра из Рэдмонда», вполне себе справляется, и даже почти без проблем открывает документы, созданные ранее в MS Office.

А вот в вопросах, касаемых автоматизации ручных процессов, всё не так уж хорошо. Поскольку, чего тут скрывать, большинство нашего офисного ПО — это просто локализованные ответвления зарубежных проектов свободного ПО, и автоматизация в них обычно достаётся по наследству.

Степень доступной автоматизации сильно рознится, но данная статья не о сравнительном анализе возможностей нашего отечественно офисного ПО, а о нашем исследовании возможности повторения функционала из нашей разработки  —  расширения (addon) для «MS Excel» in2sql, в офисном пакете «Р7-Офис» от фирмы «АО «Р7».

Читать далее

React useReducer, зачем нужен и как использовать

Уровень сложностиСредний
Время на прочтение7 мин
Охват и читатели40K

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

Читать далее

Все что необходимо знать про key в React и даже больше

Уровень сложностиПростой
Время на прочтение7 мин
Охват и читатели18K

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

Читать далее

Ускорить таблицу на React в 1 000 раз, изменив лишь одну строку

Время на прочтение11 мин
Охват и читатели14K

JP Camara, главный инженер Wealthbox, в своём блоге поделился интересным опытом ускорения TanStack Table — новой версии React-библиотеки для создания функциональных таблиц — аж до 10 мс. Делимся с вами переводом его статьи.

Читать далее

Разработка сложных форм с React Hook Form

Уровень сложностиПростой
Время на прочтение6 мин
Охват и читатели37K

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

Читать далее

Angular получил новый синтаксис шаблонов

Уровень сложностиСредний
Время на прочтение4 мин
Охват и читатели9.6K

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

Читать далее

Dart для бэкэндеров. Часть 1

Уровень сложностиСредний
Время на прочтение14 мин
Охват и читатели12K

Идея создавать полный стек веб или мобильного приложения с использованием одной технологии не является новой. Этим путем уже прошел Javascript (JS + React/Native + Node.JS), Python (cowasm + kivy) и даже Go (go/wasm, gomobile) и Dart тоже не исключение (web для него естественная среда обитания, поскольку язык создавался для замены JavaScript, также поддерживается компиляция в Wasm с включенным экспериментом wasm gc, для мобильной разработки существует фреймворк Flutter). Кроме того, приложение на Dart может компилироваться в исполняемый файл и это может дать прирост производительности для высоконагруженных систем. В этой статье мы рассмотрим несколько решений для создания бэкэнда на Dart, в первой части обсудим общие вопросы архитектуры и создадим простой сервер без фреймворка и с использованием Shelf, а во второй части статьи речь пойдет о Frog и Conduit.

Читать далее

Оптимизируем изображения в HTML

Уровень сложностиПростой
Время на прочтение8 мин
Охват и читатели29K

Вместе со Стивом Сьюэллом, CEO Builder.io, разбираемся, почему с точки зрения оптимизации производительности изображения лучше загружать через HTML, а не через CSS. 

Читать далее

Текстовый Инпут с возможностью выделять отдельные слова

Уровень сложностиСредний
Время на прочтение2 мин
Охват и читатели3K

Разработка текстового инпута с выделением слов в React: неожиданные сложности и практические решения, выявленные в процессе реализации

Читать далее

Campus. Система, позволяющая управлять образовательным процессом

Время на прочтение9 мин
Охват и читатели6.1K

В этой статье будет обзор функционала системы Campus.

Campus - это комплекс, состоящий из нескольких сервисов для управления образовательным процессом

Читать далее

Изучаем mergeMap, switchMap, concatMap и exhaustMap

Уровень сложностиСредний
Время на прочтение4 мин
Охват и читатели57K

Я Angular разработчик. Это моя первая статья и таких я собираюсь написать много. Пришла эта идея мне в голову потому что иногда, пытаясь найти какую-то информацию в интернете о принципах работы какого-либо инструмента разработки, я не нахожу абсолютно ничего. Это либо ненавистные обожаемые мною доки, в которых написаны очень краткие принципы работы для знающих людей, либо stackoverflow, где кто-то норовит написать кучу слов ни о чём или без практической составляющей, либо просто статьи, не отражающие сути. Но иногда можно наткнуться на знающего человека, который за одну минуту объяснит тебе всю суть и от счастья хочется прыгать. Я решил писать обо всех таких моментах, которые мне очень сложно давались в понимании из-за отсутствия адекватной информации или моей криворукости. Я буду писать подобные статьи прежде всего для себя и если кому-то это поможет - я буду безумно рад, что какому-нибудь камраду не пришлось долго мучиться и понимать смысл того или иного инструмента для разработки. Статьи будут максимально краткими и по делу. Погнали!

Читать далее

Как я Jest с помощью SWC ускорял

Время на прочтение7 мин
Охват и читатели14K

За последние пару лет не раз можно было услышать про новые инструменты
сборки статики, такие как SWC, esbuild и Vite. Все они обещают нам next
gen-оптимизацию времени сборки, а SWC ещë и грозится оптимизировать
скорость выполнения тестов на Jest; более того, судя по документации,
сделать это очень просто. Я решил проверить, так ли это на самом деле и
каким будет результат. Если вам интересно, что из этого получилось и
какие были проблемы, то прошу под кат.

Начать читать под чашечку кофе

Ближайшие события

Как сделать динамические цвета в CSS

Время на прочтение3 мин
Охват и читатели11K

Когда говорим «динамический», подразумеваем JavaScript. Но некоторые динамические функции можно реализовать, используя только CSS. Например, цвета. 

Читать далее

Разбираемся в анимациях и временных переходах в CSS

Время на прочтение8 мин
Охват и читатели81K

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

Читать далее

Ускоряем разработку в VSCode

Уровень сложностиПростой
Время на прочтение4 мин
Охват и читатели23K

Привет, Хабр! Это моя первая публикация и хотелось бы начать с чего-то полезного для сообщества. С места в карьер… Я запилил расширение для VSCode, которое поможет автоматизировать создание файловой структуры компонентов.

Погнали

Стили заголовков в CSS: картинки, тени, анимации

Время на прочтение6 мин
Охват и читатели28K

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

Читать далее

10 задач с JavaScript Promise для подготовки к собеседованиям

Уровень сложностиСредний
Время на прочтение7 мин
Охват и читатели113K

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

Читать далее

Стили заголовков в CSS: градиенты

Время на прочтение5 мин
Охват и читатели36K

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

Читать далее

3 способа использовать box-shadow в CSS

Время на прочтение7 мин
Охват и читатели138K

Тени помогают сделать визуальную составляющую сайта интересной и эстетичной. В посте рассмотрим свойство CSS box-shadow и то, как его можно стилизовать.

Читать далее