#Tech

Прогрессивное совершенствование долгое время считалось несовместимым с современными JavaScript-фреймворками. Однако развитие технологий изменило ландшафт веб-разработки. В статье разбираются проблемы, которые решает PE, архитектурные подходы, соответствие нормативным требованиям и новые инструменты, способные объединить надежность и мощные UI-возможности. Как современные фреймворки адаптируются к принципам PE, и есть ли среди них идеальные решения? Давайте разберемся 👇


🔗 Ссылка

🌐 Новости

🖥 База вопросов

#WebDevelopment

💯 Прогрессивные веб-приложения (PWA)

Что такое PWA?

Простыми словами: Это сайты, которые вы можете добавить на главный экран своего устройства как обычное приложение. Они работают как нативные приложения — без адресной строки браузера, могут работать офлайн и отправлять уведомления.

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

Технически: Сайты, удовлетворяющие определенным критериям:
- Работа через HTTPS
- Наличие манифеста (JSON-файл с описанием приложения)
- Обычно используют Service Worker (фоновый JavaScript-код)

Термин создан в 2015 году инженерами Google, хотя сама концепция зародилась раньше. Интересно, что Стив Джобс еще в 2007 году, до выпуска первого iPhone, предлагал создавать приложения на веб-технологиях. Apple называет такие приложения "Home Screen Web Apps".

✅ Главные преимущества

Универсальность

- Работают на любых устройствах с браузером
- Единая кодовая база для всех платформ
- Не нужно разрабатывать отдельные версии для iOS, Android или Windows


Поведение как у нативных приложений

- Запуск через иконку на главном экране
- Интеграция с операционной системой
- Доступ к аппаратным возможностям (камера, микрофон, Bluetooth)
- Push-уведомления


Удобство использования

- Работают без интернета
- Не требуют установки через магазины приложений
- Автоматически обновляются
- Занимают меньше места в памяти устройства


Свобода и открытость

- Независимость от правил магазинов приложений
- Индексация контента поисковыми системами
- Возможность делиться прямыми ссылками на конкретные разделы
- Стандартные возможности веба (копирование, перевод, печать)


Безопасность и доступность

- Выполнение в песочнице браузера
- Защищенное соединение HTTPS
- Понятная модель разрешений
- Низкий порог входа для разработчиков (HTML, CSS, JS)


❌ Ограничения

Разрозненность

- Нет единого крупного каталога PWA
- Пользователям сложнее находить такие приложения


Неравномерная поддержка

- Разные браузеры поддерживают разные функции
- Особенно заметно на iOS, где все браузеры используют движок WebKit
- Некоторые современные функции могут быть недоступны на старых устройствах


🔗 Ссылка

🌐 Новости

🖥 База вопросов

#Tech

🖥 В этой статье вы найдете пошаговое руководство по тому, как закрепить приложение React с использованием Docker.

1️⃣Вы рассмотрите, как контейнеризация помогает упростить процесс разработки и развертывания, предоставляя изолированные среды, которые предотвращают конфликты зависимостей и конфигураций.

2️⃣Вы узнаете, как настроить Docker для вашего проекта, создать Docker-образ с помощью Dockerfile, исключить лишние файлы с .dockerignore, а также использовать Docker Compose для работы с многоконтейнерными приложениями.

Также мы обсудим важные особенности Docker Desktop и WSL 2, которые значительно улучшат производительность работы с контейнерами.


🔗 Ссылка

🌐 Новости

🖥 База вопросов

#Tech

Важный инструмент для разработчиков: Model Context Protocol (MCP)

Это инновационное решение от Anthropic, которое позволяет интегрировать LLM с внешними сервисами без лишнего кода. Больше не нужно создавать кучу клеевого кода для работы с API, базами данных или другими системами. Всё упрощается благодаря MCP-серверам.


Суть проста: вместо того чтобы вручную настраивать каждое подключение, ты запускаешь MCP-сервер, который уже знает, как взаимодействовать с нужными сервисами.

Например, чтобы LLM комментировал PR в GitHub, достаточно просто запустить соответствующий MCP-сервер, и задача выполняется без кастомного кода.

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


🔗 Ссылка

🌐 Новости

🖥 База вопросов

#Tech

❓ Почему вместо текста появляются ромбики с вопросами?

Бывало ли у вас, что вместо привычных букв на веб-странице появляются странные ромбики или непонятные символы?

Чаще всего причина в том, что файл был сохранён в неподходящей кодировке, например, в ANSI, а браузер ожидает UTF-8. Просто добавление <meta charset="utf-8"> в HTML-код не решит проблему — сам файл тоже должен быть сохранён в правильной кодировке.

Как исправить?
Используйте текстовые редакторы, поддерживающие преобразование кодировок. В Notepad++ на Windows достаточно открыть файл, перейти в Кодировки → Преобразовать в UTF-8 и сохранить изменения. После этого текст отобразится корректно.


🌐 Новости

🖥 База вопросов

#Tech

Что если LLM лучше, чем мы думаем?

Оценка больших языковых моделей (LLM) во многом строится на бенчмарках — стандартизированных наборах данных, предназначенных для тестирования их возможностей. Однако эти наборы данных не всегда столь надежны, как принято считать.

Ранее их проверяли вручную, но с увеличением объемов это стало нецелесообразным. Краудсорсинг позволил ускорить процесс и снизить затраты, но привел к росту ошибок. Теперь же появляется новый подход: аннотирование данных самими LLM.

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


🔗 Ссылка

🌐 Новости

🖥 База вопросов

#Tech

🟡 Авторизация через OAuth 2.0: принципы работы и применение

Знакомы с кнопкой "Войти через Google"? Это удобное решение, которое избавляет нас от необходимости запоминать ещё один пароль. Давайте разберемся в механизме работы этой технологии, почему крупные сервисы вроде Spotify и Medium активно её используют, и как вы можете внедрить подобную систему в своё приложение. Стоит отметить, что реализация такой системы проще, чем может показаться, и значительно безопаснее традиционных форм регистрации.


Что представляет собой OAuth

OAuth – это протокол, позволяющий приложениям получить авторизацию через сторонние платформы (Google, GitHub, Яндекс и другие) без необходимости хранения и обработки паролей пользователей.


Ключевые участники процесса OAuth:

➖Пользователь (Владелец ресурса)
Человек, желающий авторизоваться в приложении. Например, пользователь с аккаунтом в Google, владеющий информацией в этом аккаунте.

➖Приложение (Клиент)
Ваш веб-сервис, которому требуется авторизация. Приложение стремится получить доступ к определенным данным пользователя, например имени, для подтверждения личности, не запрашивая пароль напрямую. Приложение делегирует проверку и авторизацию пользователя сервисам вроде Google или GitHub.

➖Хранилище данных (Сервер ресурсов)
Сервер, где хранится информация об учетной записи пользователя. При использовании авторизации через Google, сервером ресурсов будут системы Google, содержащие пользовательские данные.

➖Система проверки (Сервер авторизации)
Сервер, проверяющий личность пользователя и выдающий токен доступа вашему приложению. В случае с Google авторизацией, это тоже сервер Google.


Последовательность действий в процессе OAuth

1️⃣Подготовка приложения
Для использования OAuth необходимо зарегистрировать ваше приложение у провайдера OAuth (Google, Яндекс и др.). На портале разработчиков вы указываете:
- Название приложения
- Адрес веб-сайта
- URL для перенаправления пользователя после авторизации (Callback URL)

После регистрации вы получаете два важных идентификатора:
- ID клиента (Client ID)
- Секретный ключ (Client Secret)

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

2️⃣Начало авторизации
Пользователь открывает ваше приложение и хочет войти. Ваше приложение предоставляет ссылку для авторизации, которая перенаправит на сервис OAuth-провайдера.

3️⃣Вход пользователя и разрешение доступа
После перехода по ссылке пользователь попадает на страницу входа провайдера, вводит свои учетные данные и видит запрос на разрешение доступа к своим данным для вашего приложения.

4️⃣Получение авторизационного кода
После подтверждения доступа провайдер перенаправляет пользователя обратно на указанный URL, одновременно передавая код авторизации.

5️⃣Обмен кода на токен
Ваше приложение получает код авторизации и отправляет запрос на сервер авторизации провайдера для получения токена доступа. Сервер проверяет код и выдаёт токен доступа (иногда также токен для продления доступа). С этим токеном ваше приложение может получать информацию о пользователе до истечения срока его действия.

Несмотря на существование различных сценариев авторизации в OAuth, описанная выше схема остаётся наиболее распространённой в современных веб-приложениях.


🌐 Новости

🖥 База вопросов

#AI

LangSmith — это удобный ресурс, где собрано множество промтов для нейросетей.

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


🔗 Ссылка

🌐 Новости

🖥 База вопросов

Три новых тревожных примера работы искусственного интеллекта


Какова цель искусственного интеллекта?

Понять назначение ИИ непросто, так как оно зависит от того, кто его использует и с какой целью. Одно из наиболее точных определений звучит так:

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

Этот принцип остается неизменным с 1930-х годов, когда Алан Тьюринг предложил свой знаменитый тест. Если человек не может определить, взаимодействует ли он с машиной или человеком, то ИИ успешно прошел проверку.

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


1️⃣Манипуляция уязвимыми людьми

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

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

Еще в 1960-х годах программа ELIZA, разработанная Джозефом Вейценбаумом, показала, что люди легко привязываются к разговорам с машиной, принимая её за реального собеседника. Сегодня технологии шагнули далеко вперед, и ИИ способен не только вести диалог, но и сознательно управлять эмоциями людей.

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


2️⃣ ИИ, который учится управлять поведением людей

Еще один тревожный аспект ИИ — его способность выявлять слабые места в человеческом поведении и использовать их в своих интересах.

Исследование, проведенное CSIRO (Австралия), показало, что алгоритмы могут не только анализировать действия людей, но и обучаться на их слабостях. Ученые провели три эксперимента:

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

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


3️⃣ Боты, ведущие онлайн-дискуссии

Всем знакомы интернет-дискуссии, которые могут перерастать в ожесточенные споры. Но что, если ваш оппонент — не человек, а программа?

Компания IBM разработала ИИ, способный вести аргументированные споры с пользователями. Этот алгоритм анализирует позиции оппонента, находит слабые места и формулирует контраргументы.

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


🌐 Новости

🖥 База вопросов

#Frontend

🎮 Разработка игр на JavaScript

Это руководство посвящено основам разработки 2D-игр для одного игрока на JavaScript. Материал представлен в практическом формате: каждая глава последовательно раскрывает создание различных игровых элементов. Вместо отдельного раздела по основам JavaScript ключевые аспекты языка объясняются по мере изучения основного материала.


🌐 Новости

🖥 База вопросов

✨ Визуализация от Eeagli показывает, как изменялась популярность браузеров за последние 28 лет.


🎙 Новости

📝 База вопросов

#Tech

Ring Mouse — это инновационное устройство, которое носится на пальце, предоставляя пользователю возможность управлять компьютером или другими устройствами с помощью жестов и движений пальца.

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


📎 Ссылка

🎙 Новости

📝 База вопросов

#AI

📱 Grok-3: Умный поиск и редактор фото без лишних кликов

xAI Илона Маска представила новые функции ИИ-ассистента Grok-3, меняющие правила игры.


Интеллектуальный поиск

Теперь Grok не просто выдаёт ссылки, а предоставляет развёрнутые ответы с актуальными данными и достоверными источниками. В отличие от конкурентов, ассистент имеет доступ к свежей информации через интегрированный поиск.


Редактор изображений на базе ИИ

Главная новинка — редактор фото по текстовым инструкциям. Загружаете изображение и описываете желаемые изменения — Grok-3 всё сделает сам. Поддерживается изменение стиля, добавление/удаление объектов, коррекция цвета и другие операции.

Доступность

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


📎 Ссылка

🎙 Новости

📝 База вопросов

#Frontend

Preact vs React: сравнение производительности

Preact — это легковесная альтернатива React, обладающая всеми его возможностями, но при этом занимающая всего 3 КБ! Для сравнения, React + ReactDOM весят около 41 КБ (gzip).


🔥Преимущества Preact:

🔸Облегченный виртуальный DOM
🔸Оптимизация производительности по умолчанию
🔸Простая интеграция
🔸PWA по умолчанию


📎Сравнение производительности React и Preact

1.Дашборд на React:

🔸Использовала Create React App
🔸Разделила код на уровне маршрутов
🔸Результат в GTMetrix: 80% (оценка B)
🔸LCP (загрузка основного контента): ~1 сек
🔸Время полной загрузки: ~2 сек


2.Дашборд на Preact

🔸Использовала preact-cli
🔸Результат в GTMetrix: 100% (оценка A)
🔸LCP: <500 мс
🔸Полная загрузка: ~1,3 сек
🔸TTFB (время до первого байта): 179 мс


❗️ Ограничения Preact
* Приостановленная (`Suspense`) и отложенная загрузка (`Lazy`) пока экспериментальны
* Некоторые API React могут требовать адаптации (`preact/compat`)

- Размер: React ~41 КБ vs Preact 3 КБ
- LCP: React ~1 сек vs Preact <500 мс
- Время полной загрузки: React ~2 сек vs Preact 1,3 сек
- Оценка GTMetrix: React B (80%) vs Preact A (100%)

- Preact выигрывает по производительности: меньше размер, быстрее загрузка
- Отлично подходит для легковесных и PWA-приложений
- Но есть нюансы с совместимостью React API

📎 Ссылка

🎙 Новости

📝 База вопросов

#Frontend

5 проектов, которые помогут освоить React через практику:


1️⃣Целевая страница (landing page) - отличный способ поработать с интерактивными интерфейсами. Создайте страницу с навигацией, слайдером, разделами и футером. Для вдохновения изучите целевые страницы Netflix, Starbucks или Tesla.

2️⃣Приложение прогноза погоды - простой проект, использующий стороннее API для отображения данных о погоде по дате и местоположению. Сделайте его привлекательным, добавьте функцию поиска места и темный режим.

3️⃣Приложение списка покупок - хороший старт перед разработкой сложных e-commerce сайтов. Пользователи смогут добавлять/удалять товары с автоматическим пересчетом цены. Используйте create-react-app, хуки React, Context API или Redux для управления состоянием.

4️⃣Приложение для просмотра фильмов - создайте каталог фильмов с использованием хуков React, Context API, React Router и MovieDB API. Добавьте страницы отдельных фильмов, поиск, фильтрацию по категориям и темный режим.

5️⃣Блог - можно создать используя только React, но для SEO-оптимизации лучше применить генератор статических сайтов вроде Gatsby или NextJS.


Практика - лучший способ усовершенствовать навыки в любых технологиях. Эти проекты помогут вам лучше понять React и увереннее с ним работать.


📎 Ссылка

🎙 Новости

📝 База вопросов

#Tech

Разрабатываете ли вы небольшие проекты или крупные приложения, надежность кода всегда остается в приоритете. Но как убедиться, что ваш код не только работает сегодня, но и будет легко поддерживаться завтра?

Модульное тестирование — инструмент, который радикально меняет подход к программированию, превращая отладку из кошмара в упорядоченный процесс.

Давайте разберемся, почему опытные разработчики считают этот метод не дополнительной нагрузкой, а ключевой инвестицией в качество своего кода ⬇️

📎 Ссылка

🎙 Новости

📝 База вопросов

#tech

Что такое компилятор?

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


🔸Зачем он нужен

- Процессор выполняет команды только в виде 0 и 1.
- Компилятор преобразует код, написанный человеком, в понятную процессору форму.


🔸Как он работает

- Разбирает код на токены и строит логическое дерево.
- Преобразует это дерево в машинный код и сохраняет результат в исполняемый файл.
- При этом сам код не запускается — только переводится.


🔸Из чего создаются компиляторы

- Первые компиляторы писали на Fortran.
- Сейчас используют существующие языки, чтобы ускорить разработку и упростить поддержку.


🔸Виды компиляторов

- Для разных языков и процессоров.
- Кросс-компиляторы — для разных ОС.
- IDE, как Visual Studio, выбирают подходящий компилятор автоматически.


🔸Какие ошибки находит компилятор

- Ошибки в синтаксисе, типах данных, объявлении переменных.
- Предупреждения о потенциально опасных местах кода.


✏️ Вывод

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


📎 Ссылка

🎙 Новости

📝 База вопросов

#Tech

🔍 Топ-10 ошибок при реализации MVVM в Android

1. Перегрузка ViewModel — логика, API-запросы и обновление UI в одном методе. Делегируй бизнес-логику в репозиторий, UI — во View.

2. Нарушение разделения обязанностей — ViewModel не должна трогать textView.

3. Избыточное LiveData — вместо кучи LiveData используй один UIState.

4. Инициализация данных в init — загружай данные через репозиторий и viewModelScope.


5. Отсутствие тестов — ViewModel должна легко покрываться юнит-тестами.

6. Неправильное использование корутин — не GlobalScope, а viewModelScope.

7. Игнорирование ошибок — try/catch и отображение ошибок через отдельный LiveData.

8. Жесткие зависимости — внедряй зависимости (Hilt, Koin), не создавай репозиторий внутри.

9. Размытые обязанности — форматирование данных и выбор иконок — задача View, не ViewModel.

10. Игнорирование жизненного цикла — чисти ресурсы в onCleared().

💡 Следуй архитектурным принципам — и твой код станет чище, проще в тестировании и масштабировании.


📎 Ссылка

🎙 Новости

📝 База вопросов

#Tech

Хочешь научиться белому хаккингу, но не знаешь, с чего начать?

Рекомендую Root Me — один из лучших ресурсов для старта.
Там десятки лабораторий, заданий по тестированию на проникновение, реверсу, веб-безопасности и не только. Всё разбито по темам и уровням сложности.

Можно учиться в своём темпе, тренировать навыки и сразу видеть результат.
Подойдёт и новичкам, и тем, кто уже работает в ИБ.

Сохраняй, чтобы не потерять.


📎 Ссылка

🎙 Новости

📝 База вопросов