Webpack Module Federation — микрофронтенд на современных технологиях
https://habr.com/ru/company/netcracker/blog/568054/
https://habr.com/ru/company/netcracker/blog/568054/
Хабр
Webpack Module Federation — микрофронтенд на современных технологиях
Привет, Хабр! В Netcracker мы уже давно используем микрофронтендную архитектуру, и с 2017 года начали разрабатывать собственный платформенный инструмент построения микрофронтендов. Недавно на ...
Добавление функции перетаскивания с помощью react-beautiful-dnd
Если вы когда-либо работали с Jira, Trello, Confluence или любым другим продуктом Atlassian, вы, скорее всего, сталкивались с функцией перетаскивания, которая позволяет пользователям перетаскивать элементы через несколько (а иногда и огромные) списки. Это невероятно полезная функция, которая всегда работает гладко, но встраивание этой функции в приложение может быть сложной задачей.
https://blog.logrocket.com/adding-drag-and-drop-functionality-with-react-beautiful-dnd/
Если вы когда-либо работали с Jira, Trello, Confluence или любым другим продуктом Atlassian, вы, скорее всего, сталкивались с функцией перетаскивания, которая позволяет пользователям перетаскивать элементы через несколько (а иногда и огромные) списки. Это невероятно полезная функция, которая всегда работает гладко, но встраивание этой функции в приложение может быть сложной задачей.
https://blog.logrocket.com/adding-drag-and-drop-functionality-with-react-beautiful-dnd/
LogRocket Blog
Adding drag-and-drop functionality with react-beautiful-dnd - LogRocket Blog
See how to make your application powerful by animating it with the well-known drag-and-drop feature using the react-beautiful-dnd library.
❤1
Easy canvas — простая js библиотека, которая невероятно упрощает работу с canvas html
Представим, что вы часто работаете с canvas в html. И многие вещи в канвасе делаются не просто. Например чтобы загрузить картинку вам нужно создать объект new Image(), подождать пока прогрузиться, затем только добавить на холст. Или же чтобы нарисовать треугольник вам нужно подбирать координаты и т.п. Очень много строк кода. Поэтому, если вы потратите 5 минут на изучение данной библиотеки, вы очень сильно сможете упростить отрисовку вашего холста.
https://habr.com/ru/post/569058/
Представим, что вы часто работаете с canvas в html. И многие вещи в канвасе делаются не просто. Например чтобы загрузить картинку вам нужно создать объект new Image(), подождать пока прогрузиться, затем только добавить на холст. Или же чтобы нарисовать треугольник вам нужно подбирать координаты и т.п. Очень много строк кода. Поэтому, если вы потратите 5 минут на изучение данной библиотеки, вы очень сильно сможете упростить отрисовку вашего холста.
https://habr.com/ru/post/569058/
Хабр
Easy canvas — простая js библиотека, которая невероятно упрощает работу с canvas html
Ссылка на GitHubВступлениеПривет всем. Представим, что вы часто работаете с canvas в html. И многие вещи в канвасе делаются не просто. Например чтобы загрузить картинку вам нужно создать объект new...
❤1
Лучшие практики стилизованных компонентов React
В данной статье, автор Robin Wieruch раскрывает тему использования пакета styled-components в контексте React приложений. Рассматриваются различные подходы к использованию стилизации, приводятся рекомендации, полученные из практического опыта реализации проектов.
https://tproger.ru/translations/luchshie-praktiki-stilizovannyh-komponentov-react/
В данной статье, автор Robin Wieruch раскрывает тему использования пакета styled-components в контексте React приложений. Рассматриваются различные подходы к использованию стилизации, приводятся рекомендации, полученные из практического опыта реализации проектов.
https://tproger.ru/translations/luchshie-praktiki-stilizovannyh-komponentov-react/
Начало работы с Notion API и его SDK для JavaScript
Notion - это многофункциональное приложение для организации любого контента, от заметок до календарей и напоминаний. Notion недавно запустила собственный API , и в этой статье мы будем использовать этот API для создания небольшого интерфейса, который будет подключать Notion к нашей собственной базе данных.
https://www.sitepoint.com/notion-api-javascript-sdk/
Notion - это многофункциональное приложение для организации любого контента, от заметок до календарей и напоминаний. Notion недавно запустила собственный API , и в этой статье мы будем использовать этот API для создания небольшого интерфейса, который будет подключать Notion к нашей собственной базе данных.
https://www.sitepoint.com/notion-api-javascript-sdk/
Sitepoint
Notion API: Getting Started with Notion's JavaScript SDK — SitePoint
You can now extend the Notion app with the new Notion API. Learn how to create an interface that connects Notion to an external database.
Хранение инстанса карты mapbox-gl вне React
В этом посте будет рассмотрен способ использования mapbox-gl в React приложении, с хранением инстанса карты во вспомогательном объекте обертке. Это позволяет обращаться к карте из любой части приложения, без необходимости передавать ссылку на карту средствами React
https://habr.com/ru/post/569302/
В этом посте будет рассмотрен способ использования mapbox-gl в React приложении, с хранением инстанса карты во вспомогательном объекте обертке. Это позволяет обращаться к карте из любой части приложения, без необходимости передавать ссылку на карту средствами React
https://habr.com/ru/post/569302/
Хабр
Хранение инстанса карты mapbox-gl вне React
В этом посте будет рассмотрен способ использования mapbox-gl в React приложении, с хранением инстанса карты во вспомогательном объекте обертке. Это позволяет обращаться к карте из любой части...
Global vs. Local Styling в Next.js
Next.js твердо придерживается мнения о том, как организовать JavaScript, но не CSS. Как мы можем разработать шаблоны, которые поощряют лучшие практики CSS, при этом следуя логике фреймворка? Ответ на удивление прост - написать хорошо структурированный CSS, уравновешивающий глобальные и локальные стили.
https://www.smashingmagazine.com/2021/07/global-local-styling-nextjs/
Next.js твердо придерживается мнения о том, как организовать JavaScript, но не CSS. Как мы можем разработать шаблоны, которые поощряют лучшие практики CSS, при этом следуя логике фреймворка? Ответ на удивление прост - написать хорошо структурированный CSS, уравновешивающий глобальные и локальные стили.
https://www.smashingmagazine.com/2021/07/global-local-styling-nextjs/
Smashing Magazine
Global vs. Local Styling In Next.js — Smashing Magazine
Next.js has strong opinions about how to organize JavaScript but not CSS. How can we develop patterns that encourage best CSS practices while also following the framework’s logic? The answer is surprisingly simple — to write well-structured CSS that balances…
👍1
Команда React недавно анонсировала план для React 18, предлагающий множество интересных новых функций, таких как автоматическое пакетирование, новая архитектура SSR-приостановки и новые API-интерфейсы, которые используют параллельный рендеринг, такие как startTransition API.
https://medium.com/dailyjs/three-practical-examples-of-concurrent-react-b2dba2272a4d
https://medium.com/dailyjs/three-practical-examples-of-concurrent-react-b2dba2272a4d
Medium
Three Practical Examples of Concurrent React
Optimizing Performance using React 18 startTransition API
JavaScript: как из Fetch сделать Axios?
В этой статье автор поделиться с вами результатами небольшого эксперимента, суть которого заключается в создании обертки над Fetch API для максимального упрощения работы с ним.
https://habr.com/ru/company/timeweb/blog/571252/
В этой статье автор поделиться с вами результатами небольшого эксперимента, суть которого заключается в создании обертки над Fetch API для максимального упрощения работы с ним.
https://habr.com/ru/company/timeweb/blog/571252/
Хабр
JavaScript: как из Fetch сделать Axios?
Привет, друзья! В этой статье я хочу поделиться с вами результатами небольшого эксперимента, суть которого заключается в создании обертки над Fetch API для максимального упрощения работы с ним. С...
Управление реактивным состоянием и эффектами с помощью RxJS.
Библиотека предоставляет способ описания бизнес-логики с использованием MVC-подобной архитектуры. Основные элементы включают действия и эффекты, состояния и хранилища. Все они являются опциональными и могут использоваться отдельно. Базовый пакет не зависит от фреймворков и может использоваться в различных окружениях. Есть тулинг для React.
https://github.com/mnasyrov/rx-effects
Библиотека предоставляет способ описания бизнес-логики с использованием MVC-подобной архитектуры. Основные элементы включают действия и эффекты, состояния и хранилища. Все они являются опциональными и могут использоваться отдельно. Базовый пакет не зависит от фреймворков и может использоваться в различных окружениях. Есть тулинг для React.
https://github.com/mnasyrov/rx-effects
GitHub
GitHub - mnasyrov/rx-effects: Reactive state and effect management with RxJS
Reactive state and effect management with RxJS. Contribute to mnasyrov/rx-effects development by creating an account on GitHub.
Приёмы ускорения кода на JS и других языках: подборка от разработчика поиска Яндекса.
Привет! Меня зовут Виктор Хомяков, в Яндексе я работаю над скоростью страниц поиска. Однажды мне в голову пришла идея обобщить свой опыт и систематизировать приёмы ускорения работы кода на JavaScript. То, что получилось в итоге, собрано в этом материале.
https://habr.com/ru/company/yandex/blog/570914/
Привет! Меня зовут Виктор Хомяков, в Яндексе я работаю над скоростью страниц поиска. Однажды мне в голову пришла идея обобщить свой опыт и систематизировать приёмы ускорения работы кода на JavaScript. То, что получилось в итоге, собрано в этом материале.
https://habr.com/ru/company/yandex/blog/570914/
Хабр
Приёмы ускорения кода на JS и других языках: подборка от разработчика поиска Яндекса
Привет! Меня зовут Виктор Хомяков, в Яндексе я работаю над скоростью страниц поиска. Однажды мне в голову пришла идея обобщить свой опыт и систематизировать приёмы ускорения работы кода на JavaScript....
Вышла Vue 3.2
Мы рады объявить о выпуске Vue.js 3.2 "Quintessential Quintuplets"! Этот релиз включает в себя множество значительных новых функций и улучшений производительности и не содержит критических изменений.
https://habr.com/ru/post/572250/
Мы рады объявить о выпуске Vue.js 3.2 "Quintessential Quintuplets"! Этот релиз включает в себя множество значительных новых функций и улучшений производительности и не содержит критических изменений.
https://habr.com/ru/post/572250/
Хабр
Вышла Vue 3.2
Эта статья — перевод оригинальной статьи Evan You "Vue 3.2 Released!"Также я веду телеграм канал “Frontend по-флотски”, где рассказываю про интересные вещи из мира разработки интерфейсов.ВступлениеМы...
Среднее время загрузки страницы в 2021 году.
https://machmetrics.com/speed-blog/average-page-load-time-in-2021/
https://machmetrics.com/speed-blog/average-page-load-time-in-2021/
Speedy.Site Wordpress Speed Optimization Service Guaranteed
Average Page Load Time in 2021 - Speedy.Site Wordpress Speed Optimization Service Guaranteed
Website performance & speed plays a major role in the success of an online business. High-performing fast sites attract and preserve users better than
Разрабатываем интерактивную диаграмму Ганта на чистом JavaScript.
https://www.smashingmagazine.com/2021/08/interactive-gantt-chart-component-vanilla-javascript/
https://www.smashingmagazine.com/2021/08/interactive-gantt-chart-component-vanilla-javascript/
Smashing Magazine
Creating An Interactive Gantt Chart Component With Vanilla JavaScript (Part 1) — Smashing Magazine
In this article, we will code a Gantt chart as a reusable Web component. We will focus on the architecture of the component, rendering the calendar with CSS Grid and managing the state of the draggable tasks with JavaScript Proxy Objects.
7 методов создания хороших переменных в JavaScript.
https://blog.alexdevero.com/good-javascript-variables/
https://blog.alexdevero.com/good-javascript-variables/
Alex Devero Blog
7 Practices to Create Good JavaScript Variables
Naming variables is not a rocket science. Learn 7 practices that will help you create good JavaScript variables and make your code cleaner.
Как и зачем маркетинговый сайт Notion переехал на Next.js со статической генерацией страниц.
https://www.notion.so/blog/migrating-notion-marketing-to-next-js
https://www.notion.so/blog/migrating-notion-marketing-to-next-js
Notion
Migrating Notion's marketing site to Next.js
We are improving performance and user experience by migrating from a client-rendered marketing site to a static site generated by Next.js.
Что нового в Node.js? Обзор малоизвестных, но полезных возможностей, появившихся в свежих версиях Node.js
https://simonplend.com/whats-new-in-node-js-core/
https://simonplend.com/whats-new-in-node-js-core/
Simon Plenderleith
What's new in Node.js core?
It can be so easy to miss when new features are added to Node.js core. This series will help you stay up-to-date.