JavaScript *

Демо

Демо здесь.

Зачем

GitHub Copilot Pro доступен бесплатно для подтверждённых учащихся, преподавателей и мейнтейнеров популярных проектов с открытым исходным кодом.

Другие опции включают ограниченный опыт работы с Copilot без платной подписки,
или индивидуальный план Copilot.

Попробуйте также полностью бесплатную альтернативу: openai-gemini.

Для чего

GitHub Copilot даёт доступ к новейшим генеративным моделям от OpenAI, Anthropic и Google.

Он доступен в некоторых избранных IDE.

Проект openai-github-copilot позволяет использовать его с намного более широким спектром инструментов: предоставляется общий API, совместимый с OpenAI, который можно развернуть бесплатно.
(Однако подписка на GitHub Copilot всё так же требуется.)

Всем привет! А вы знали, что RxJS содержит в себе более 100 операторов? Но если ваш проект использует эту библиотеку - скорее всего вы с трудом насчитаете у себя больше пары десятков. Интересная ситуация, да? Не знаю почему так получается, но сегодня я хочу поделиться реальными примерами использования “редких” операторов. Приступаем!

Привет, Хабр! Меня зовут Гармаев Энхэ. В течение длительного времени я работал в сфере розничной торговли, занимая должность менеджера. Это было увлекательное и насыщенное время, но, как говорится, в жизни всегда есть место переменам и новым вызовам. Сегодня я хочу поделиться с вами своим путешествием, решением о смене профессии и первом опыте работы в IT компании.

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

В статье я расскажу:

о простом интерфейсе Zustand

о его внутреннем устройстве

о производительности без усилий: 3 простых способа оптимизаций

о производительности на максималках: не всегда нужно использовать длинный цикл рендера React, чтобы достичь максимальной производительности - Zustand может быстрее!

о применении на практике: советы и рекомендации по интеграции Zustand в ваши проекты для достижения масштабируемости и удобства поддержки.

Начните активно использовать Zustand в своих проектах - вы будете приятно удивлены простотой и удобством работы с ним.

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

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

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

Что такое Jamstack?

Jamstack - это надежная архитектура веб-разработки, созданная для создания безопасных, более быстрых и масштабируемых веб-приложений. Он состоит из трех аспектов разработки, которые включают JavaScript, API и Markup (JAM).

JavaScript - Он управляет всеми динамическими аспектами и функциями сайта Jamstack. Разработчики могут легко использовать свой предпочтительный фреймворк для разработки веб-приложений.

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

Markup - Для пользователей веб-сайт Jamstack представлен в виде HTML-файлов. Таким образом, можно создать их из структурированных данных, таких как XML, Markdown, JSON или даже исходных файлов, с помощью генератора статических сайтов.

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

Недавно я задался вопросом «Какой JS фреймворк самый быстрый». Я обратился с этим запросом в гугл и нашел очевидный ответ «это fastify!». Но почему именно он?.

Я практически сразу наткнулся на статью, результаты которой меня немного расстроили, так как в качестве дополнительной нагрузки на endpoint автор использовал вычисление ряда Фибоначчи, что, по моему мнению, не раскрывает всей сути сравнения. Тогда я решил провести собственное исследование.

Всем привет! Меня зовут Владимир Земсков, я работаю в B2C билайна, в команде билайн Про, где пишу бэк-офис для нашей системы. Мы помогаем нашей рознице продавать лучше и больше. Для соблюдения нужного уровня качества кода в билайне мы используем и ESlint, и тесты, и ревью, и особый тип — внутренние договорённости. 

Когда я пришёл в компанию, то мне захотелось найти ESlint-плагин, который бы помог автоматизировать часть работы. Я поискал, не нашёл, и в итоге решил написать свой. Из всей этой истории и родился сегодняшний рассказ. В первой части мы обсудим договорённости и их важность для разработки. А во второй — поговорим про то, как эти договорённости переносить в ESLint, как это упростит жизнь и действительно ли это это так сложно, или можно что-то упростить по пути.

В этом модуле проекта мы погрузимся в волнующий мир авторизации и управления доступом во фронтенд-разработке. Сегодня я поделюсь с вами моим опытом работы с технологиями Vue 3, Pinia для глобального управления состоянием и TypeScript. Однако, стоит отметить, что основные принципы, которые мы рассмотрим здесь, применимы к любым современным технологиям фронтенда. Таким образом, даже если вы предпочитаете другой стек технологий, вы все равно найдете этот материал полезным.

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

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

Hello world!

По данным 2023 JavaScript Rising Stars библиотека StyleX заняла второе место в разделе Styling / CSS in JS (первое место вполне ожидаемо занял TailwindCSS).

stylex — это решение CSS в JS от Facebook, которое недавно стало открытым и быстро набрало популярность (на сегодняшний день у библиотеки 7500 звезд на Github). Это обусловлено ее легковесностью, производительностью и небольшим размером итоговой таблицы стилей.

В этой статье мы разберемся, как stylex работает. Но давайте начнем с примера ее использования.

Очень часто при разработке React-приложения нам приходится работать с большим количеством иконок в проекте. Наверное, каждый разработчик стремится максимально упростить и автоматизировать подобные рутинные задачи. Есть несколько способов работы с иконками в веб-приложениях, но я хочу поделиться с вами именно тем, который кажется мне наиболее удобным. Данная статья поможет frontend-разработчику сделать работу с иконками комфортнее, используя их в качестве React-компонентов.

API Gemini бесплатен, но существует множество инструментов, которые работают исключительно с API OpenAI.

Проект openai-gemini даёт позволяет с лёгкостью создать персональный Gemini API-endpoint, совместимый с OpenAI, бесплатно.

Эта статья — изложение персонального опыта работы с кэшем на стороне браузера при создании веб‑приложений. В повседневной разработке я использую десктопный Chrome. У него есть панель инструментов и он в принципе удобен для разработчика. Но когда нужно проверять приложение на смартфонах, начинается геморрой — каким образом доставить на смартфон новый код, если там уже есть старый? Больше всего меня бесит Safari on iPhone. Если в Chrome есть возможность удалить все данные для отдельного сайта, то в iPhone все данные удаляются для всего Safari. Если и есть в iPhone какой‑нибудь способ удалить через конфигурацию смартфона/приложения данные для отдельного сайта, то мне так и не удалось его найти. Буду благодарен, если кто‑либо мне о нём сообщит в комментах.

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

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

В этой статье осторожно прикоснёмся к sin() и cos(). Есть и другие функции, в том числе tan(), зачем же останавливаться только на синусе и косинусе? Они идеальны для размещения текста по краю круга. Об этом уже рассказывалось на CSS-Tricks, когда Крис поделился подходом к размещению текста по кругу с миксинами Sass. Это было шесть лет назад [оригинал опубликован 8 марта 2023 года], поэтому поработаем с размещением чисел по-новому.

Вот о чём я говорю:

Относительно небольшой материал по теме как мы можем организовать поддержку MVC архитектуры для средних и больших проектов со стороны Frontend разработки, вне поля современных решений.

Напишем свои решения для реализации реактивности через прокси, и попробуем посмотреть на jQuery со стороны реактивного программирования.

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

Всем привет! Меня зовут Леша Штанько, я системный администратор и интегратор (если остается время, еще и JS-разработчик :D) в AGIMA. Если представить Google большим айсбергом, то на его верхушке точно разместятся всеми любимые и популярные инструменты, вроде Google Sheets и Google Calendar, а Google Apps Script скроется где-то под толщей воды. Но я считаю, что больше людей должны попробовать этот классный инструмент. Поэтому в этой статье расскажу о его главных достоинствах и поделюсь практическими примерами.