Использование mapbox-gl в React и Next.js
В данной статье описываются известные способы встраивания mapbox-gl в React приложение, на примере создания простого веб приложения содержащего карту на Next.js с использованием Typescript, код компонента карты можно также использовать в любом любом приложении на React
https://habr.com/ru/post/565636/
В данной статье описываются известные способы встраивания mapbox-gl в React приложение, на примере создания простого веб приложения содержащего карту на Next.js с использованием Typescript, код компонента карты можно также использовать в любом любом приложении на React
https://habr.com/ru/post/565636/
Хабр
Использование mapbox-gl в React и Next.js
Введение В данной статье я хочу описать известные мне способы встраивания mapbox-gl в React приложение, на примере создания простого веб приложения содержащего карту на Next.js с использованием...
👍1
Алгоритмы и структуры данных на JavaScript
В этом репозитории содержатся базовые JavaScript-примеры многих популярных алгоритмов и структур данных.
Для каждого алгоритма и структуры данных есть свой файл README с соответствующими пояснениями и ссылками на материалы для дальнейшего изучения (в том числе и ссылки на видеоролики в YouTube).
https://github.com/trekhleb/javascript-algorithms/blob/master/README.ru-RU.md
В этом репозитории содержатся базовые JavaScript-примеры многих популярных алгоритмов и структур данных.
Для каждого алгоритма и структуры данных есть свой файл README с соответствующими пояснениями и ссылками на материалы для дальнейшего изучения (в том числе и ссылки на видеоролики в YouTube).
https://github.com/trekhleb/javascript-algorithms/blob/master/README.ru-RU.md
GitHub
javascript-algorithms/README.ru-RU.md at master · trekhleb/javascript-algorithms
📝 Algorithms and data structures implemented in JavaScript with explanations and links to further readings - trekhleb/javascript-algorithms
Руководство по написанию JavaScript-кода от Airbnb()
Наиболее разумный подход к написанию JavaScript-кода
Это руководство подразумевает использование Babel вместе с babel-preset-airbnb или аналогом. Оно также предполагает установленный shims/polyfills в вашем приложении, такой как airbnb-browser-shims или аналог.
https://github.com/leonidlebedev/javascript-airbnb
Наиболее разумный подход к написанию JavaScript-кода
Это руководство подразумевает использование Babel вместе с babel-preset-airbnb или аналогом. Оно также предполагает установленный shims/polyfills в вашем приложении, такой как airbnb-browser-shims или аналог.
https://github.com/leonidlebedev/javascript-airbnb
GitHub
GitHub - leonidlebedev/javascript-airbnb: Перевод «JavaScript Style Guide» от Airbnb
Перевод «JavaScript Style Guide» от Airbnb. Contribute to leonidlebedev/javascript-airbnb development by creating an account on GitHub.
Как использовать IndexDB для управления состоянием в JavaScript
https://blog.openreplay.com/how-to-use-indexdb-to-manage-state-in-javascript
https://blog.openreplay.com/how-to-use-indexdb-to-manage-state-in-javascript
От DBA и работы в стартапе до Vue.js Core team member и Staff Frontend Engineer в GitLab: история Натальи Теплухиной
Наташа Теплухина — Open Source контрибьютор, автор документации для фреймворка Vue.js, и Staff Frontend Engineer в GitLab. Путь Наташи в индустрии начался с «Факультета информационных технологий» Национального авиационного университета Украины в Киеве, после 8 лет она занималась системным администрированием, работала в маленькой студии-стартапе с WordPress и Pixel Perfect вёрсткой, а сейчас она первый Staff-инженер во фронтенде в GitLab.
https://habr.com/ru/company/headzio/blog/567578/
Наташа Теплухина — Open Source контрибьютор, автор документации для фреймворка Vue.js, и Staff Frontend Engineer в GitLab. Путь Наташи в индустрии начался с «Факультета информационных технологий» Национального авиационного университета Украины в Киеве, после 8 лет она занималась системным администрированием, работала в маленькой студии-стартапе с WordPress и Pixel Perfect вёрсткой, а сейчас она первый Staff-инженер во фронтенде в GitLab.
https://habr.com/ru/company/headzio/blog/567578/
Хабр
От DBA и работы в стартапе до Vue.js Core team member и Staff Frontend Engineer в GitLab: история Натальи Теплухиной
Наташа Теплухина — Open Source контрибьютор, автор документации для фреймворка Vue.js, и Staff Frontend Engineer в GitLab. Путь Наташи в индустрии начался с «Факультета информационных технологий»...
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