Обновить
240.95

JavaScript *

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

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

Vite SSR BOOST — Наш собственный путь в мире React SSR

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

Всем привет! Меня зовут Михаил, и я являюсь СТО компании Lomray Software. Сегодня я хочу кратко рассказать вам о мотивах создания собственной библиотеки для разработки React-приложений с поддержкой SSR (серверный рендеринг) и поделиться результатами этой работы.

Читать далее

Внутреннее представление и оптимизации строк в JavaScript-движке V8: «отмываем» строки, «обгоняем» C++

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

С самого рождения JavaScript в каком-то смысле был языком для манипулирования текстом — от веб-страничек в самом начале до полноценных компиляторов сейчас. Неудивительно, что в современных JS-движках достаточно много сил уделено оптимизации внутреннего представления строк и операций над ними.

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

Встречайте Next.js Commerce 2.0

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

Сегодня мы с радостью представляем Next.js Commerce 2.0.

App Router Ready: Использование компонентов React Server, Server Actions, встроенных лейаутов, метаданных и всех новых шаблонов из недавно выпущенного App Router.

Динамическая витрина: Динамическая витрина с Edge-рендерингом, работающая со скоростью статической. Настраивайте содержимое без не жертвуя производительностью.

Упрощенная архитектура: Next.js Commerce теперь представляет собой один провайдер на репозиторий, что позволяет сократить объем кода и уменьшить количество абстракций для вашего приложения.

Наш новый шаблон-акселератор интернет-магазина демонстрирует лучшие шаблоны для создания составных коммерческих приложений, включая поддержку BigCommerce, Medusa, Saleor, Shopify и Swell.

Читать далее

bindActionCreators — маленькая утилита, решающая проблемы

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

Библиотека redux предоставляет большое количество полезных утилит, в этой статье я расскажу об одной из них - bindActionCreators

Читать далее

Волшебство Drag And Drop: Как динамические дашборды делают жизнь проще. Часть 1. Описание и мотивы

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

Всем привет :)

Я Никита, уже больше 4 лет занимаюсь фронтендом, погружаюсь в инфраструктуру и кайфую от IT мира и комьюнити около веба, частенько читаю Хабр и решил попробовать написать сам.

Цикл статей про опыт добавления динамических элементов на страницу с помощью Drag and Drop и получения данных с BFF. Предварительно разбив на три части.

1. Описание решения, технологий и мотивация

2. Техническая часть с кодом про структуру компонентов и Drag and Drop решение

3. Техническая часть с кодом про BFF( backend for frontend ) решение

Читать далее

Шина между Веб-воркерами и основным потоком. Ускоряем работу JavaScript

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

Хотите узнать, как ускорить выполнение JavaScript в веб-приложениях? В этой статье я подробно расскажу о веб-воркерах, шине данных между основным потоком и веб-воркерами, и как это можно применить в Angular, React и Vue, используя мой npm пакет web-worker-bus. Вы узнаете, как вынести тяжелые вычисления в отдельные потоки, организовать обмен данными, и как это все собрать в единую архитектуру. Примеры кода, инструкции и советы внутри помогут вам сделать ваши проекты быстрее и эффективнее с помощью этого инструмента. Освоение этого подхода и использование web-worker-bus может стать значимым улучшением в ваших проектах. Загляните, если интересуетесь оптимизацией JavaScript и хотите узнать, как мой пакет может вам в этом помочь!

Читать далее

Angular Resource или почему я никогда не использовал NgRX

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

Около 5 лет назад я пересел с Реакта на второй Ангуляр и первое, чего мне там не хватило был модуль angular-resource из первого Ангуляра. Вменяемых аналогов я не нашел, поэтому за неделю написал свою библиотеку. Решение оказалось настолько удачным, что практически без изменений дошло до сегодняшнего дня. Используется в куче проектов, работает стабильно (не смотря на то, что до сих пор там нет ни одного теста), в общем, есть о чем рассказать.

Пойдем от простого к сложному...

Простой способ проверять typescript без skipLibCheck: true

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

Всем привет!

Решил начать писать короткие статьи с маленькими фичами, которые могут помочь посмотреть на решение проблем немного под другим углом.

Дано:

Мы используем Fluent UI в нашем проекте. После перехода на React 18 мы начали получать ошибки такого рода:

Читать далее

Загрузка файлов и каталогов перетаскиванием с помощью drag and drop JS

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

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

Давайте посмотрим, что предоставляют браузеры для загрузки файлов!

Читать далее

Skeleton Mammoth — или как я решал проблему переиспользуемых скелетон лоадеров

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

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

Читать далее

Книга «JavaScript. Рецепты для разработчиков. 3-е изд»

Время на прочтение12 мин
Охват и читатели5.1K
image Привет, Хаброжители!

Зачем изобретать велосипед, сталкиваясь с очередной проблемой в JavaScript? Здесь вы найдете множество рецептов кода для типовых задач программирования, а также познакомитесь c методами создания приложений, работающих в любом браузере. Адаптируемые примеры кода можно вставить практически в любой проект, а заодно поглубже изучить JS.

С помощью этой книги вы научитесь настраивать эффективную среду разработки с редактором кода, статическим анализатором и тестовым сервером; станете лучше понимать функции JS, включая замыкания и генераторы; узнаете, как использовать классы и наследование — основные концепции ООП; освоите работу с мультимедиа, включая аудио, видео и SVG; научитесь управлять HTML и CSS; благодаря Node.js сможете использовать JavaScript где угодно; узнаете, как получать доступ к удаленным данным и управлять ими с помощью технологий REST, GraphQL и Fetch; освоите популярную среду разработки приложений Express; научитесь выполнять асинхронные операции с промисами, async/await и веб-процессами.
Читать дальше →

Конфигурируемая типизация NPM пакетов. Типизация может быть строже, чем вы думаете

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

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

Читать далее

Как автоматизировать переводы во Frontend приложении

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

В текущем мире очень многие сайты имеют поддержку многих языков, в большинстве случаев это происходит с помощью i18n npm пакета. Чаще всего переводы хранятся в .js, .json файлах и очень часто есть языки для которых в компании нет переводчика, либо же он не предполагался в целом, и в таком случае приходит на помощь разработчик с переводчиком. И вот однажды я столкнулся с тем, что на проекте оказалось очень много текстов и все их нужно было переводить вручную, что занимало достаточно много времени и я задумался о том, как это можно автоматизировать.

Моя идея была в том, чтобы написать функцию, в которую можно было бы передать языковой код и json объект с текстом на исходном языке, а на выходе получить переведенный json/js file. С помощью этой функции я мог бы в ci/cd Pipeline переводить все текста на проекте, в исходных текстах которых были изменения, либо же следить за текстами в рантайме и на лету переводить текста.

И я нашел два относительно простых и бесплатных метода, для того чтобы это сделать.

Читать далее

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

Внедрение зависимостей в Angular простыми словами

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

Всем привет? Я Данила, фронтенд разработчик в ПСБ. Angular я начал изучать не так давно, а поэтому часто встречаются сложные темы, которые непонятны и их нужно разобрать. Одной из таких тем и стало внедрение зависимостей (DI). Что ж, давайте разбираться :)

Читать далее

Делай так, и твой адаптив болеть не будет

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

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

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

Читать далее

Чем отличается реализация non-keyed от keyed в javascript фреймворках?

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

Часто, при разработке сайтов на фреймворках, не придаётся особого внимания деталям, которые в данный фреймворк включены. И это нормально, ведь главная задача фреймворка - чтобы удобно было сайт делать и чтобы он был быстрым и функциональным. Но, эти детали тем и интересны, что узнав некоторые моменты, взгляд на javascript разработку чуть дополняется.

Читать далее

IntelliJ IDEA 2023.2. Language Server Protocol, AI Assistant, IntelliJ Profiler в редакторе, GitLab merge requests, ftw

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

Только что вышла IntelliJ IDEA 2023.2. В этом релизе в IDE появилась куча интересных фичей и важных улучшений.

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

Этот релиз IntelliJ IDEA 2023.2 представляет вам AI-ассистента, вооруженного набором инструментов машинного обучения. IntelliJ Profiler показывает подсказки в редакторе, делая профилирование более интуитивным и иформативным. Еще, в этом релизе появилась интеграция с GitLab.

В том посте мы пробежимся по всем основным фичам IntelliJ IDEA 2023.2. В отличие от официального анонса, вся европейская политкорректность выкинута на свалку, автор перевода не видит никакой ценности в соблюдении повесточки.

Кроме того, в этот четверг в Питере будет встреча Javawatch, посвященная Java 21. Я прочитаю мини-доклад минут на 30 о новых фичах, и потом мы сможем все вместе собраться и за кружкой пива это обсудить. Анонс события в телеге, обсуждение в чате. Я бывший PMM в JetBrains Big Data и тимлид в Remote Development/Projector, а сейчас работаю над российским дистрибутивом Java - Axiom JDK.

Волшебно. Читать далее.

React + Styled Components — идеальная анимация. Параметризованная анимация

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

В данной статье продемонстрирован способ реализации “параметризованной” css анимации React компонента с помощью styled components. Параметризованная потому что css анимация описывается через параметры, которые динамически рассчитываются на основе пропсов и состояний компонента при его рендеринге.

Читать далее

Futhark в браузере

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

В IT так: если что-то существует, то рано или поздно это будет существовать и в браузере. Сегодня так устроен мир. Благодаря работе Филипа Лассена, теперь вы можете гонять Futhark у себя в браузере. В данном посте рассказано, как этого удалось добиться, и почему этот функционал пока не так полезен, как мог бы (спойлер: пока не поддерживается работа с GPU), и какие есть перспективы этот функционал доработать. Подробно о том, как спроектирован этот язык, рассказано в магистерской диссертации Филипа.
Читать дальше →

Как работает Evercookie в 2023 году

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

В 2010 году Сами Камкар написал скрипт, который позволял идентифицировать пользователя сайта, если тот ранее посещал его. Решение было названо эверкукой (суперкукой). Данная статья рассматривает механизм восстановления куки и отвечает на вопрос работает ли это в 2023 году. В конце статьи приводится реализация части evercookie для Angular.

Читать далее

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