Pull to refresh
10
0
Руслан @Sect0R

PHP, Angular, VueJS

Send message

Web PUSH Notifications быстро и просто

Reading time17 min
Views350K

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


Информации по этой теме в интернете полно, но она фрагментирована, разбросана по разным ресурсам и перемешена с уведомлениями для мобильных устройств с примерами на Java, C++ и Python. Нас же, как веб-разработчиков, интересует JavaScript. В этой статье я постараюсь саккумулировать всю необходимую и полезную информацию.


Web PUSH Notifications


Я думаю, вы уже знаете что такое push-уведомления, но я всё же напишу коротко о главном.


Пользователь, заходя на сайт, вытягивает (pull) с него данные. Это удобно и безопасно, но с развитием интернет ресурсов, появилась необходимость оперативно доставлять информацию пользователям не дожидаясь пока те сами сделают запрос. Так и появилась технология принудительной доставки (push) данных с сервера клиенту.

Читать дальше →
Total votes 36: ↑35 and ↓1+34
Comments67

Введение в OpenAI Assistants API (а заодно и в ChatGPT Custom Instructions)

Level of difficultyMedium
Reading time11 min
Views15K

Прошедший месяц назад релиз новинок OpenAI включал в себя множество функций. Этот тьюториал посвящен введению в практическое использование одной из них - Assistants API. Также попутно затронем выпущенную в августе функцию в составе ChatGPT под названием Custom Instructions.

Читать далее
Total votes 6: ↑5 and ↓1+7
Comments7

Раздача статического контента — счет на милисекунды

Reading time9 min
Views13K
image

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

И вот мы решили ускорять то, что и так работает быстро и, заодно, поделиться опытом того, что получилось в итоге. Конечно же я расскажу о граблях, о том где не надо HTTP/2, о том почему мы покупаем 7,6Tb NVMe SSD вместо 8x1Tb SATA SSD и много другой узкоспециализированной информации.

Давайте сразу договоримся что хранение и раздача контента это 2 разные задачи и говорить мы будем только про раздачу (продвинутый кеш)

Начнем с железа…
Читать дальше →
Total votes 13: ↑13 and ↓0+13
Comments8

Развертывание ML модели в Docker с использованием Flask (REST API) + масштабирование нагрузки через Nginx балансер

Reading time5 min
Views16K

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


Читать дальше →
Total votes 6: ↑5 and ↓1+4
Comments9

Из чего собрать умный дом в 2020 году: от хаба и до лампочки

Reading time9 min
Views361K
ZigBee, Z-Wave, Wi-Fi, Bluetooth — на какую технологию делать ставку? Кто из брендов выпускает наиболее практичные решения? Какие выбрать шлюз, датчики и на что смотреть тем, кто хочет все упростить?


Мы попросили Вадима Ерёмина, руководителя департамента «Гаджеты и инновации», рассказать о его опыте построения умного дома. Под катом только то, что было проверено на собственном опыте.
Читать дальше →
Total votes 12: ↑3 and ↓9-3
Comments54

Транслируем видеопоток с IP-камеры с помощью WebRTC

Reading time9 min
Views261K
Решение задачи онлайн-вещания с IP-камеры, вообще говоря, не требует применения WebRTC. Камера сама является сервером, обладает IP-адресом и может быть подключена напрямую к маршрутизатору с целью раздачи видео-контента. Так зачем же применять технологию WebRTC?

image

Читать дальше →
Total votes 46: ↑46 and ↓0+46
Comments15

Mkcert: валидные HTTPS-сертификаты для localhost

Reading time2 min
Views91K

В наше время использование HTTPS становится обязательным для всех сайтов и веб-приложений. Но в процессе разработки возникает проблема корректного тестирования. Естественно, Let’s Encrypt и другие CA не выдают сертификаты для localhost.

Традиционно есть два решения.
Читать дальше →
Total votes 65: ↑54 and ↓11+43
Comments35

Создание канала с автопостингом в Телеграме без единой строчки кода

Reading time4 min
Views165K

Вступление


Предупреждаю сразу: технического в статье очень мало. Это практически пошаговая инструкция для не очень сведующих в техническом плане пользователей. Для людей сведущих (и тех, кому лень читать много текста), приведу две ссылки: Telegram Bots API + IFTTT Maker Channel.

Теперь подробнее. Думаю, все слышали про мессенджер Telegram. Вероятно, многие даже знают про нехитрый API для создания ботов в этом мессенджере. Кроме того, не так давно в T появилась возможность создавать так называемые «каналы» (channels), упрощающие мгновенную рассылку сообщений практически любому количеству подписавшихся на канал лиц. Наконец, самая свежая новость: ботов стало можно добавлять в качестве администраторов в каналы, то есть такие рассылки стало можно делать автоматизированно.

Думаю, не надо объяснять, что это открывает довольно широкие возможности для различных сервисов. Например, у меня довольно быстро получилось сделать следующее:
  • три канала (@RedditTop, @r_pics, @gone_wild — осторожно, последний с «взрослым» контентом), которые ежечасно импортируют топовые посты с Реддита (и двух его сабреддитов);
  • ещё канал, делающий то же с постами с 9GAG;
  • и, наконец, завел хитрого бота @JamesBot, который анонимно пересылает все сообщения, написанные ему, в общий канал (@secret_ru, @secret_en, @secret_es, @secret_ar или @secret_fa — в зависимости от языка). Получился анонимный чат средней степени трэшовости.

Уже после создания всех этих ботов и каналов мне пришло в голову, что простейший автоимпорт постов откуда-то «снаружи» можно наладить вообще без всякого кода и хостинга — буквально минут за 5. На помощь нам придет прекрасный сервис IFTTT — If This Then That, имеющий множество интеграций с социальными сетями и прочими сервисами. Правда, к сожалению, прямой интеграции с Телеграмом у него (пока?) нет — зато есть т.н. IFTTT Maker Channel, позволяющий делать простые HTTP(S)-запросы при срабатывании триггера. К сожалению, мы не сможем принимать сообщения, отправленные боту (входящие запросы IFTTT Maker принимать может, но, увы, только в строго определенном формате) — интерактива не выйдет. Зато сможем по срабатывании любого события (например, новый твит или пост в FB):
  • публиковать сообщение в канале,
  • отправлять сообщение в заранее выбранный чат (куда добавлен наш бот),
  • отправлять сообщение заранее указанному пользователю (который добавил себе бота).
Читать дальше →
Total votes 29: ↑25 and ↓4+21
Comments16

Как работает JS: веб push-уведомления

Reading time10 min
Views81K
[Советуем почитать] Другие 19 частей цикла
Часть 1: Обзор движка, механизмов времени выполнения, стека вызовов
Часть 2: О внутреннем устройстве V8 и оптимизации кода
Часть 3: Управление памятью, четыре вида утечек памяти и борьба с ними
Часть 4: Цикл событий, асинхронность и пять способов улучшения кода с помощью async / await
Часть 5: WebSocket и HTTP/2+SSE. Что выбрать?
Часть 6: Особенности и сфера применения WebAssembly
Часть 7: Веб-воркеры и пять сценариев их использования
Часть 8: Сервис-воркеры
Часть 9: Веб push-уведомления
Часть 10: Отслеживание изменений в DOM с помощью MutationObserver
Часть 11: Движки рендеринга веб-страниц и советы по оптимизации их производительности
Часть 12: Сетевая подсистема браузеров, оптимизация её производительности и безопасности
Часть 12: Сетевая подсистема браузеров, оптимизация её производительности и безопасности
Часть 13: Анимация средствами CSS и JavaScript
Часть 14: Как работает JS: абстрактные синтаксические деревья, парсинг и его оптимизация
Часть 15: Как работает JS: классы и наследование, транспиляция в Babel и TypeScript
Часть 16: Как работает JS: системы хранения данных
Часть 17: Как работает JS: технология Shadow DOM и веб-компоненты
Часть 18: Как работает JS: WebRTC и механизмы P2P-коммуникаций
Часть 19: Как работает JS: пользовательские элементы

Сегодня публикуем перевод девятой части серии статей, посвящённых применению веб-технологий и JavaScript. В этом материале мы исследуем веб push-уведомления. А именно, поговорим о механизмах, лежащих в их основе, и о том, как осуществляется подписка на уведомления, как устроены процессы их отправки и получения.



Сложилось так, что push-уведомления, весьма распространённые в мире мобильных приложений, довольно поздно добрались до веба, хотя они являются одной из тех возможностей, которыми хотели бы пользоваться многие разработчики.
Читать дальше →
Total votes 32: ↑31 and ↓1+30
Comments6

Особенности использования типа данных Symbol в JavaScript

Reading time10 min
Views26K
Символьные примитивы — это одно из новшеств стандарта ES6, которое принесло в JavaScript некоторые ценные возможности. Символы, представленные типом данных Symbol, особенно полезны при использовании их в качестве идентификаторов свойств объектов. В связи с таким сценарием их применения напрашивается вопрос о том, что такого они могут, чего не могут строки.



В материале, перевод которого мы сегодня публикуем, речь пойдёт о типе данных Symbol в JavaScript. Начнём мы с обзора некоторых возможностей JavaScript, в которых нужно ориентироваться для того, чтобы разобраться с символами.
Читать дальше →
Total votes 27: ↑26 and ↓1+25
Comments8

Разработка простых современных JavaScript-приложений с использованием Webpack и прогрессивных веб-технологий

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

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

image

В этой статье мы поговорим о применении современных технологий при разработке веб-приложений, возможности которых не ограничены возможностями фреймворков. Кстати, если вам это нужно, то вы, с использованием описываемых здесь технологий, сможете создать собственный узкоспециализированный фреймворк. Чистый JavaScript и другие базовые веб-технологии дают разработчикам возможность делать то, что им нужно, не ограничивая себя рамками применяемых ими инструментов.
Читать дальше →
Total votes 33: ↑30 and ↓3+27
Comments9

Расширения VSCode, которые облегчат разработку на JavaScript и Vue

Reading time3 min
Views55K

На сегодняшний день существует достаточное количество средств для разработки с поддержкой языка JavaScript и основанных на нем фреймворков. Вопрос выбора конкретного инструмента стоит вне этой статьи, тут же я постараюсь описать свой пользовательский опыт работы с Visual Studio Code и средствах, которые призваны облегчить жизнь JS разработчикам, в частности тем, кто использует Vue.


В магазине расширений VSCode существует огромное множество плагинов, ниже будут приведены наиболее удобные из них для веб разработки.

Читать дальше →
Total votes 22: ↑19 and ↓3+16
Comments13

Многопоточность в Node.js: модуль worker_threads

Reading time13 min
Views71K
18 января было объявлено о выходе платформы Node.js версии 11.7.0. Среди заметных изменений этой версии можно отметить вывод из разряда экспериментальных модуля worker_threads, который появился в Node.js 10.5.0. Теперь для его использования не нужен флаг --experimental-worker. Этот модуль, с момента появления, оставался достаточно стабильным, поэтому и было принято решение, отражённое в Node.js 11.7.0.

Автор материала, перевод которого мы публикуем, предлагает обсудить возможности модуля worker_threads, в частности, он хочет рассказать о том, зачем нужен этот модуль, и о том, как в JavaScript и в Node.js, по историческим причинам, реализована многопоточность. Здесь же речь пойдёт и о том, какие проблемы сопряжены с написанием многопоточных JS-приложений, о существующих способах их решения, и о будущем параллельной обработки данных с использованием так называемых «потоков воркеров» (worker threads), которые иногда называют «рабочими потоками» или просто «воркерами».
Читать дальше →
Total votes 36: ↑32 and ↓4+28
Comments9

Как я успешно прошел шесть собеседований в Силиконовой долине

Reading time10 min
Views35K
За шесть дней, в период с 13 по 20 августа 2018 года, я прошел собеседования в шести компаниях Силиконовой долины (LinkedIn, Yelp, Apple, Amazon, Facebook и Google) и получил от каждой предложение о работе.



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

Надеюсь, моя история вдохновит кого-нибудь, кто сейчас в том же положении (не совсем доволен текущей работой, мечтает переехать в область залива, но несколько недотягивает в плане подготовки), дерзнуть — кто знает, что готовит для них будущее.
Читать дальше →
Total votes 55: ↑46 and ↓9+37
Comments36

Мультиязычные деревья в Yii2 на примере создания модуля меню

Reading time16 min
Views6.8K

Вступление


Многие начинающие веб-разработчики сталкиваются с необходимостью создания меню, каталогов или рубрикаторов для своего проекта на Yii2, которые бы имели иерархическую структуру, но при этом поддерживали мультиязычность. Задача довольно простая, но не совсем очевидная в рамках данного фреймворка. Есть большое количество готовых расширений для создания древовидных структур (меню, каталогов итд.), но довольно сложно найти решение, которое бы поддерживало полноценную работу с несколькими языками. Причём речь тут идёт не о переводе интерфейса штатными средствами фреймворка, а про хранение данных в базе на нескольких языках. Также достаточно сложно найти удобный и полностью работоспособный виджет для управления деревом, который мог бы также работать с многоязычным контентом без сложных манипуляций с кодом.


Я хотел бы поделиться рецептом того, как можно создавать подобные модули на примере реализации модуля меню. Для примера я буду использовать шаблон приложения Yii2 App Basic, но вы можете адаптировать всё под свой шаблон, если он отличается от базового.

Читать дальше →
Total votes 23: ↑23 and ↓0+23
Comments4

Поле загрузки файлов, которое мы заслужили

Reading time10 min
Views126K
Все течет, все меняется, но только input[type=file] как портил нервы всем начинающим веб-разработчикам, так и продолжает это делать до сих пор. Вспомните себя N лет назад, когда вы только начинали постигать азы создания веб-сайтов. Молодой и неопытный, вы искренне удивлялись, когда кнопка выбора файла напрочь отказывалась менять цвет своего фона на ваш любимый персиковый. Именно в тот момент вы впервые столкнулись с этим несокрушимым айсбергом под названием «Загрузка файлов», который и по сей день продолжает «топить» начинающих веб-разработчиков.

На примере создания поля для загрузки файлов я покажу вам, как правильно прятать input[type=file], настраивать фокус на объекте, у которого фокуса быть не может, обрабатывать события Drag-and-Drop и отправлять файлы через AJAX. А также я познакомлю вас с парой браузерных багов и путями их обхода. Статья написана для новичков, но в некоторых моментах может быть полезна и занимательна даже для матерых разработчиков.
Читать дальше →
Total votes 40: ↑36 and ↓4+32
Comments19

MongoDB и исследование рынка ИТ-вакансий

Reading time9 min
Views7.1K
Вы когда-нибудь анализировали вакансии?

Задавались вопросом, в каких технологиях наиболее сильна потребность рынка труда на текущий момент? Месяц назад? Год назад?

Как часто открываются новые вакансии Java-разработчиков в определенном районе Вашего города и как активно они закрываются?

В этой статье я расскажу Вам, как можно достичь желаемого результата и построить отчетную систему по интересующей нас теме. Поехали!


(Источник картинки)
Читать дальше →
Total votes 18: ↑17 and ↓1+16
Comments2

PWA — это просто. Hello Habr

Reading time6 min
Views23K
Продолжаем знакомство с Progressive Web Applications. После теоретической прошлой части самое время перейти к практике.

Сегодня мы построим простое, но полноценное PWA «Hello Habr».




Приложение доступно по адресу https://altrusl.github.io/habr-pwa/hello-habr/. При открытии в браузере на мобильном устройстве возможно добавление ярлыка на домашний экран и запуск в полноэкранном режиме.
Читать дальше →
Total votes 28: ↑27 and ↓1+26
Comments17
1
23 ...

Information

Rating
Does not participate
Location
Беларусь
Date of birth
Registered
Activity

Specialization

Fullstack Developer, Database Architect
Lead
From 6,000 $
JavaScript
Vue.js
Node.js
PHP
Laravel
MySQL
Redis
Nginx
Docker
MongoDB