Веб-страница
25.3K subscribers
1.53K photos
482 videos
1 file
3.72K links
Всё по фронтенду, бэкенду и девопсу в одном месте

Разместить рекламу: @tproger_sales_bot

Правила общения: https://tprg.ru/rules

Другие каналы: @tproger_channels

Сайт: https://tprg.ru/site

Регистрация в перечне РКН: https://tprg.ru/64ai
Download Telegram
Работа с Google Maps API

Google API невероятно большой и позволяет делать практически любые действия над их сервисами. В этом вы сможете познакомиться с принципом работы Google Maps API (Google Карты) и научитесь взаимодействовать с ней посредством JavaScript:

https://youtu.be/AgwhiHLu2H4

#видео #api
👍21💩4👏2
Как ускорить full-stack разработку, не создавая API

Когда вы используете API для взаимодействия бэкенда с фронтендом, запускается процесс, который состоит из 4 этапов:

1. Запрос на получение данных из базы данных;
2. Отправка запроса API;
3. Обработка запроса API;
4. Получение данных из базы данных.

Для внутренних API второй и третий пункт кажутся достаточно затратными и необязательными, поэтому есть способ, как обойти их и свести обмен данными к их запросу и получению. Как это сделать рассказали в этой статье:

https://nuancesprog.ru/p/16651/

#фронтенд #бэкенд #api
👍6🔥2🍓2
This media is not supported in your browser
VIEW IN TELEGRAM
Оптимизация загрузки ресурсов с помощью Fetch Priority API

Fetch Priority API указывает приоритет ресурсов для браузера. Это позволяет обеспечить оптимальную загрузку данных для того, чтобы пользователь мог максимально быстро начать работу с сайтом.

В этой статье вы узнаете, как работать с этим API и где он поддерживается в настоящее время:

https://web.dev/fetch-priority/

#api
👍15🔥2
Делаем пет-проект для поиска погоды на Vue 3 + OpenWeatherMap API

У нас на сайте появилось пошаговое руководство, которое позволит вам буквально за выходные создать просто приложение для поиска погоды с помощью Vue 3 и OpenWeatherMap API. В ходе проекта вы познакомитесь с возможностями фреймворка Vue, научитесь создавать функцию search() для обработки ответов от API и узнаете ещё много нового и полезного.

Переходите по ссылке и приступайте к созданию нового проекта:

https://tproger.ru/articles/prilozhenie-dlya-poiska-pogody-s-vue-3-openweathermap-api

#vue #api #петпроект
👍4
Разница между REST, GraphQL и gRPC

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

В этой статье вы узнаете о различиях между REST, GraphQL и gRPC, а также изучите основные концепции каждого протокола, их особенности, а также примеры использования:

https://dev-gang.ru/article/raznica-mezhdu-rest-graphql-i-grpc-sd55zqf705/

#бэкенд #api
🔥41🍓1
Работа с GraphQL с помощью ванильного JavaScript

GraphQL — это язык запросов и серверная среда выполнения для API. Он разработан для того, чтобы сделать API быстрыми, гибкими и удобными для разработчиков. С момента его появления многие API перешли на поддержку GraphQL. Сегодня существуют различные библиотеки для работы с GraphQL, но иногда они могут быть избыточны для проекта.

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

https://blog.openreplay.com/working-with-graphql-with-vanilla-javascript/

#javascript #api #graphql
👍5
Лучшие способы вызова API на JavaScript

При работе с JavaScript чрезвычайно важно знать, как посылать HTTP-запросы и получать динамические данные с сервера/базы данных. А делать это можно различными способами. Подробнее о них:

https://nuancesprog.ru/p/15597/

#api #javascript
👍9👎5😈1
Что такое WebRTC и как этим пользоваться

На сегодняшний день почти в любом браузере уже есть всё, что необходимо для совершения видеозвонков. Это возможно благодаря встроенному WebRTC API, который даёт доступ к системным камерам, позволяет запускать видеопоток и подключаться к удалённой системе, и всё это без использования каких-либо сторонних плагинов.

Подробнее об этом в статье:

https://www.sitepen.com/blog/getting-started-with-webrtc

#api #webrtc
👎32
Веб-интерфейсы JavaScript для создания сайтов будущего

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

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

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

#javascript #api
👍7
This media is not supported in your browser
VIEW IN TELEGRAM
Исследование производительности анимации на основе скролла страницы

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

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

#css #javascript #api
👍9
This media is not supported in your browser
VIEW IN TELEGRAM
Perspective API для модерации комментариев и обсуждений

Инструмент использует технологию машинного обучения для распознавания "токсичных" формулировок: оскорблений, угроз, домогательств. Набор триггеров выбирается самостоятельно. Каждый комментарий получает оценку по 100-балльной шкале, чем выше оценка — тем оскорбительнее комментарий. Это значительно упрощает модерацию — достаточно только отфильтровать обсценные высказывания и отклонить их. Со стороны пользователя предусмотрена сортировка по шкале оскорбительности, чтобы не сталкиваться с такими высказываниями. Инструмент также можно внедрить в поле написания комментария — тогда пользователь сразу будет знать оценку оскорбительности. 

Доступно для русского, английского, китайского, французского, немецкого и других языков. 

Стоимость: #бесплатно

#API #веб @prgg_tools
👍4
​​Web API, которые функционально приближают веб-приложения к нативным

Чтобы дать пользователям доступ к функциям, привычным в нативных приложениях, и добавить новые, можно использовать Web API.

В статье подробно рассказали о них и раскрыли некоторые тонкости: https://habr.com/ru/companies/clevertec/articles/820227/

#javascript #api #react
👍12
​​​Лучшие способы вызова API на JavaScript

При работе с JavaScript чрезвычайно важно знать, как посылать HTTP-запросы и получать динамические данные с сервера/базы данных. А делать это можно различными способами. Подробнее о них: https://nuancesprog.ru/p/15597/

#api #javascript
🔥9💩6😁53
This media is not supported in your browser
VIEW IN TELEGRAM
Old but gold: Исследование производительности анимации на основе скролла страницы

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

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

#css #javascript #api
👍6
Инструмент для разработки и запуска REST API

Вот, почему он вам понравится: инструмент не требует удалённого развёртывания, регистрации, а сам проект open-source. Тут есть все необходимые фичи для удобного создания макетов REST API.

Ссылка на инструмент: Mockoon

#инструмент #backend #api
🔥61
HTTP-запросы: GET, POST и другие

HTTP-запросы — основа взаимодействия между клиентской и серверной частями веб-приложений. В этой статье мы рассказали, как работать с HTTP-запросами в веб-разработке на Node.js, Python и PHP, а также привели примеры на JavaScript с использованием fetch и axios.

#http #api
7👍5🔥4🤩1
This media is not supported in your browser
VIEW IN TELEGRAM
Оптимизация загрузки ресурсов с помощью Fetch Priority API

Fetch Priority API указывает приоритет ресурсов для браузера. Это позволяет обеспечить оптимальную загрузку данных для того, чтобы пользователь мог максимально быстро начать работу с сайтом.

В этой статье вы узнаете, как работать с этим API и где он поддерживается в настоящее время:

https://web.dev/fetch-priority/

#api
👍1
Web API, которые функционально приближают веб-приложения к нативным

Чтобы дать пользователям доступ к функциям, привычным в нативных приложениях, и добавить новые, можно использовать Web API.

В статье подробно рассказали о них и раскрыли некоторые тонкости: https://habr.com/ru/companies/clevertec/articles/820227/

#javascript #api #react
🔥64
RTK Query + OpenAPI: автоматически генерируем типобезопасные API-хуки для React

Забываем про ручные fetch и бесконечные типы — берём спецификацию OpenAPI, прогоняем через openapi-typescript-codegen, подключаем к RTK Query и сразу получаем готовые хуки: useGetPetsQuery, useCreatePetMutation и другие.

Полный путь показан в статье: настройка генератора, создание базового api, интеграция в Redux store и примеры рефакторинга, где количество кода сокращается в разы.

#фронтенд #react #api
🔥101👍1
CSS Custom Highlight API: стилизуйте текст, не ломая DOM

Представьте, что выделять важные фразы можно не вставляя <span>, да ещё с управлением из JavaScript. CSS Custom Highlight API позволяет создавать стилизованные диапазоны текста почти без изменений в DOM-структуре. От ::selection до пользовательских псевдо-элементов стили — всё настраивается через JS и CSS, а документация показывает примеры применения и текущую поддержку браузеров.

Подробности по ссылке: https://tproger.ru/articles/css-custom-highlight-api

#фронтенд #css #api
6👍4🤩1