Как работают функции provide и inject во Vue 3?
Релиз третьей версии фреймворка Vue предоставил разработчикам доработанный API для манипуляции состоянием приложения. Во Vue 3 были дополнены инструменты для реализации паттерна Dependency Injection. Использование этого паттерна вместе с доработанной системой реактивности позволяет разработчикам отказаться от использования VueX, MobX или любой другой библиотеки для управления стейтом приложения, и получить больший контроль над архитектурой приложения.
https://habr.com/ru/post/564716/
Релиз третьей версии фреймворка Vue предоставил разработчикам доработанный API для манипуляции состоянием приложения. Во Vue 3 были дополнены инструменты для реализации паттерна Dependency Injection. Использование этого паттерна вместе с доработанной системой реактивности позволяет разработчикам отказаться от использования VueX, MobX или любой другой библиотеки для управления стейтом приложения, и получить больший контроль над архитектурой приложения.
https://habr.com/ru/post/564716/
Хабр
Как работают функции provide и inject во Vue 3?
Релиз третьей версии фреймворка Vue предоставил разработчикам доработанный API для манипуляции состоянием приложения. Во Vue 3 были дополнены инструменты для реа...
25 ресурсов по изучению JavaScript
В нашем канале, достаточно много новичков, поэтому считаю своим долгом запостить статью с Proglib, в которой детально расписаны источники, где можно подчерпнуть актуальную информацию на 2021 год
https://proglib.io/p/kak-stat-fullstek-razrabotchikom-na-javascript-v-2021-godu-25-resursov-dlya-nachinayushchih-osvaivat-veb-programmirovanie-2021-06-10
В нашем канале, достаточно много новичков, поэтому считаю своим долгом запостить статью с Proglib, в которой детально расписаны источники, где можно подчерпнуть актуальную информацию на 2021 год
https://proglib.io/p/kak-stat-fullstek-razrabotchikom-na-javascript-v-2021-godu-25-resursov-dlya-nachinayushchih-osvaivat-veb-programmirovanie-2021-06-10
Библиотека программиста
☕ Как стать фуллстек-разработчиком на JavaScript в 2021 году: 25 ресурсов для начинающих
Веб-разработчикам полного цикла нужно знать намного больше, чем занимающимся только бэкендом или фронтендом программистам на JavaScript. Значит и учиться им придется значительно дольше.
Изучение нового SDK Stipe React Native
Принятие оплаты или настройка подписки через Stripe в вашем приложении React Native стало еще проще после выпуска официального SDK Stripe React Native. Хотя SDK все еще находится в стадии бета-тестирования, уместно погрузиться в изучение того, что этот SDK может предложить, и как он сокращает время интеграции и улучшает UI / UX.
В этом руководстве вам покажут, как принимать платежи с помощью недавно выпущенного официального SDK Stripe React Native.
https://dev-gang.ru/article/izuczenie-novogo-sdk-stripe-react-native-ss3dnp2ke1/
Принятие оплаты или настройка подписки через Stripe в вашем приложении React Native стало еще проще после выпуска официального SDK Stripe React Native. Хотя SDK все еще находится в стадии бета-тестирования, уместно погрузиться в изучение того, что этот SDK может предложить, и как он сокращает время интеграции и улучшает UI / UX.
В этом руководстве вам покажут, как принимать платежи с помощью недавно выпущенного официального SDK Stripe React Native.
https://dev-gang.ru/article/izuczenie-novogo-sdk-stripe-react-native-ss3dnp2ke1/
dev-gang.ru
Изучение нового SDK Stripe React Native
Хотя Stripe является лишь вторым по популярности платежным шлюзом (первым остается PayPal), он пользуется постоянно растущим спросом со стороны новых и существующих компаний по всему миру. По сообщениям, Stripe обработала транзакций на сумму более 200 миллиардов…
Новые JavaScript-API для работы с аппаратным обеспечением
Сталкивались ли вы когда-нибудь с необходимостью работы с аппаратным обеспечением устройств из веб-приложения, а, когда оказывалось, что это невозможно, создавали ли нативное приложение для некоей платформы только ради того, чтобы обойти это ограничение? Если вы бывали в подобной ситуации, то знайте, что вы не одиноки. До недавнего времени работа с аппаратным обеспечением из веб-приложений представляла собой весьма запутанную и сложную задачу. Но сейчас, благодаря тому, что в современных браузерах появилась поддержка некоторых новых JavaScript-API, рассчитанных на работу с аппаратным обеспечением, решить эту задачу гораздо проще, чем раньше.
В этом материале речь пойдёт о трёх новых JavaScript-API, направленных на работу с аппаратным обеспечением. В частности — о WebHID, о WebNFC и о WebUSB.
https://habr.com/ru/company/ruvds/blog/562532/
Сталкивались ли вы когда-нибудь с необходимостью работы с аппаратным обеспечением устройств из веб-приложения, а, когда оказывалось, что это невозможно, создавали ли нативное приложение для некоей платформы только ради того, чтобы обойти это ограничение? Если вы бывали в подобной ситуации, то знайте, что вы не одиноки. До недавнего времени работа с аппаратным обеспечением из веб-приложений представляла собой весьма запутанную и сложную задачу. Но сейчас, благодаря тому, что в современных браузерах появилась поддержка некоторых новых JavaScript-API, рассчитанных на работу с аппаратным обеспечением, решить эту задачу гораздо проще, чем раньше.
В этом материале речь пойдёт о трёх новых JavaScript-API, направленных на работу с аппаратным обеспечением. В частности — о WebHID, о WebNFC и о WebUSB.
https://habr.com/ru/company/ruvds/blog/562532/
Хабр
Новые JavaScript-API для работы с аппаратным обеспечением
Сталкивались ли вы когда-нибудь с необходимостью работы с аппаратным обеспечением устройств из веб-приложения, а, когда оказывалось, что это невозможно, создавали ли нативное приложение для некоей...
Делаем код чище с помощью деструктуризации объектов в JavaScript
В этой статье мы сравним традиционный подход и использование нового синтаксиса деструктуризации объектов в JavaScript стандарта ES6. Этот синтаксис позволяет распаковать значения из сложных объектов и массивов. Его можно использовать для того, чтобы сделать код чище и лаконичнее.
https://tproger.ru/translations/delaem-kod-chishhe-s-pomoshhju-destrukturizacii-obektov-v-javascript/
В этой статье мы сравним традиционный подход и использование нового синтаксиса деструктуризации объектов в JavaScript стандарта ES6. Этот синтаксис позволяет распаковать значения из сложных объектов и массивов. Его можно использовать для того, чтобы сделать код чище и лаконичнее.
https://tproger.ru/translations/delaem-kod-chishhe-s-pomoshhju-destrukturizacii-obektov-v-javascript/
Tproger
Делаем код чище с помощью деструктуризации объектов в JavaScript
Рассказываем, как уменьшить количество кода с помощью нового синтаксиса деструктуризации объектов и массивов в JavaScript.
Использование 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