Как стать автором
Обновить
133.46

JavaScript *

Прототипно-ориентированный язык программирования

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

Оценка внедрения архитектуры Jamstack в веб-разработке: тематические исследования реальных приложений

Время на прочтение 7 мин
Количество просмотров 222

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

Что такое Jamstack?

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

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

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

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

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

Читать далее
Всего голосов 3: ↑3 и ↓0 +3
Комментарии 0

Новости

Гонка за скоростью: сравнение производительности ведущих фреймворков JavaScript в веб-разработке. Fastify, Express, Koa

Время на прочтение 3 мин
Количество просмотров 3.2K

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

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

Читать далее
Всего голосов 8: ↑7 и ↓1 +6
Комментарии 4

На стороне своих правил в ESlint

Время на прочтение 8 мин
Количество просмотров 984

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

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

Читать далее
Всего голосов 11: ↑11 и ↓0 +11
Комментарии 0

Авторизация и управление доступом на основе ролей для фронтенда

Уровень сложности Простой
Время на прочтение 4 мин
Количество просмотров 868

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

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

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

Читать далее
Всего голосов 4: ↑4 и ↓0 +4
Комментарии 0

Истории

Анатомия StyleX

Уровень сложности Средний
Время на прочтение 16 мин
Количество просмотров 919



Hello world!


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


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


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

Читать дальше →
Всего голосов 12: ↑12 и ↓0 +12
Комментарии 1

Система иконок на React

Уровень сложности Простой
Время на прочтение 3 мин
Количество просмотров 1.9K

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

Читать далее
Всего голосов 6: ↑5 и ↓1 +4
Комментарии 5

Gemini ➜ OpenAI API прокси. Serverless

Уровень сложности Простой
Время на прочтение 2 мин
Количество просмотров 2.2K

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

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

Читать далее
Всего голосов 1: ↑1 и ↓0 +1
Комментарии 0

Кэширование кода в веб-приложениях

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

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

Читать далее
Всего голосов 5: ↑4 и ↓1 +3
Комментарии 10

Насколько потолстел JavaScript к 2024 году?

Уровень сложности Средний
Время на прочтение 5 мин
Количество просмотров 25K

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

И всё это время я жил с мыслью, что если средний размер страницы равен, скажем, 3 МБ, то JS-бандл должен составлять около 1 МБ. Естественно, основную часть объёма должно занимать содержимое, не так ли?

Что ж, проверить это можно лишь экспериментальным путём, чем я и займусь! Эту статью я пишу в 2024 году и думаю, что через пару лет эксперимент неплохо бы повторить.
Читать дальше →
Всего голосов 147: ↑144 и ↓3 +141
Комментарии 134

Краткий обзор фреймворка Svelte

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

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

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

Читать далее
Всего голосов 17: ↑13 и ↓4 +9
Комментарии 3

Часы на синусах и косинусах в CSS

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

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


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


Читать дальше →
Всего голосов 13: ↑13 и ↓0 +13
Комментарии 8

Архитектура MVC и поддержка реактивности для jQuery

Уровень сложности Средний
Время на прочтение 15 мин
Количество просмотров 6.4K

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

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

Читать далее
Всего голосов 3: ↑3 и ↓0 +3
Комментарии 10

Реализуем touch жесты на vanilla js. Часть 1 (rotate)

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

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

Читать далее
Всего голосов 18: ↑18 и ↓0 +18
Комментарии 9

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

Moscow QA #3 — митап по тестированию ПО
Дата 14 марта
Время 18:30 – 21:30
Место
Москва Онлайн
Московский туристический хакатон
Дата 23 марта – 7 апреля
Место
Москва Онлайн

Google Apps Script и с чем его едят

Уровень сложности Простой
Время на прочтение 10 мин
Количество просмотров 3.4K

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

Читать далее
Всего голосов 20: ↑20 и ↓0 +20
Комментарии 16

Динамические Breadcrumbs на React, React Router и Apollo GraphQL

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

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

Как бы то ни было, задача есть и ее нужно закрыть. Поэтому я и расскажу, как я с ней справился, в надежде получить одобрение или более элегантное решение) Погнали!

Читать далее
Всего голосов 2: ↑2 и ↓0 +2
Комментарии 0

NLUX: Библиотека интерфейса Conversational AI

Время на прочтение 5 мин
Количество просмотров 1.3K

В современном мире взаимодействие с компьютерами и приложениями становится все более естественным и удобным благодаря использованию разговорных интерфейсов и искусственного интеллекта. Однако, интеграция таких функциональностей в веб-приложения может стать вызовом для разработчиков. В этом контексте библиотека NLUX (Natural Language User Experience) приходит на помощь, предоставляя инструменты для создания разговорных пользовательских интерфейсов в приложениях React.

В этой статье мы рассмотрим основные возможности и преимущества NLUX, а также рассмотрим примеры использования и интеграции данной библиотеки в разработку веб-приложений.

Начнем (:

Читать далее
Всего голосов 11: ↑9 и ↓2 +7
Комментарии 1

Новые клиентские хуки React 19

Уровень сложности Средний
Время на прочтение 6 мин
Количество просмотров 22K



Вопреки распространенному мнению, основная команда разработчиков React занимается не только серверными компонентами React и Next.js. В следующей версии — React 19 — появятся новые клиентские хуки. Они сфокусированы на двух ключевых аспектах: выборке данных и работе с формами. Эти хуки повысят производительность всех React-разработчиков, включая тех, кто создает одностраничные приложения.

Читать дальше →
Всего голосов 31: ↑30 и ↓1 +29
Комментарии 15

Концепт бюджетной видеостены неограниченного размера для web-приложения

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

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

Читать далее
Всего голосов 3: ↑3 и ↓0 +3
Комментарии 0

Face-swap и анимация изображений сгенерированных Midjourney с использованием InsightFaceSwap и Pika

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

В этой статье рассматривается экспериментальный API для Discord ботов Midjourney, InsightFaceSwap и Pika.

Читать далее
Всего голосов 8: ↑5 и ↓3 +2
Комментарии 0

Запросы, хуки и спагетти

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

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

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

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

Читать далее
Всего голосов 3: ↑3 и ↓0 +3
Комментарии 1

Вклад авторов

Работа