Авиасимулятор прямо в браузере?! Да!

GeoFS — это мультиплеерный симулятор, как Microsoft Flight Simulator, но не требующий установки. Вы можете облететь весь мир на самых разных летательных аппаратах. Причём в игре используются реальные карты, а погодные условия и физика добавляют реалистичности.

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

Ссылку я вам даю, что делать дальше знаете сами: https://www.geo-fs.com/

#интересное

Как лучше делать отладку код JavaScript в Chrome DevTools

Поиск и исправление ошибок в JS может быть весьма ресурсозатратным мероприятием. Новичкам этот процесс может показаться неподъёмным камнем.

Но только до знакомства с отладкой в инструментах разработчика, встроенных в браузер. О ней вы узнаете в этой статье. Причём не о привычной всем console.log(), а куда более эффективных способах.

#javascript #qa

Ничего необычного, просто веб-разработчик пытается освоить новый фреймворк до того, как он устареет:

«Жидкое стекло» в вебе

Новый дизайн фирменных ОС от Apple наделал шуму и постепенно начинает проникать в различные элементы дизайна сайтов и приложений.

В этой статье показано, как легко повторить этот эффект с помощью возможностей как нативного JS и CSS, так и React.

Разные варианты можно посмотреть по ссылке.

upd. Оказалось, что работает не во всех браузерах. Например, на Safari вы можете увидеть просто блюр вместо Liquid Glass. Так что, чтобы посмотреть на эффекты пробуем Chrome и ждём, когда в других браузерах добавят нужные CSS-свойства.

#фронтенд

Большая часть интерфейсов рассчитана только на людей с «идеальным» зрением, хотя проблемы с восприятием цветов есть у 8% мужчин и 0,5% женщин. Для них «красные ошибки» и «зелёные успехи» часто сливаются в один и тот же серо‑коричневый фон.

Один разработчик с дальтонизмом настолько от этого устал, что написал Colorblind Accessibility Guide, куда свёл все основные правила.

Супер-кратко основное: используйте связку «синий / жёлтый / красный» вместо «зелёный / оранжевый / красный» и всегда давайте тройную подсказку — цвет плюс иконка плюс текст, причём с разными формами иконок для разных состояний.

@prog_stuff

Простейшая RAG-система на PHP

RAG (Retrieval-Augmented Generation или генерация, дополненная поиском) — это метод работы ИИ, в котором он не «фантазирует», а сначала ищет и анализирует релевантную информацию в заранее подготовленной базе, а потом использует найденную информацию для генерации ответа.

Собрать такую базовую систему можно за вечер. И в этом гайде предлагается взять не самый стандартный для таких задач язык — PHP в связке с фреймворком Neuron AI.

Про фреймворк мы уже писали ранее. Вот пост.

А теперь давайте посмотрим, как он работает на практике. Материал здесь.

#php #ai #ml

Интерактивный гайд по CSS Grid

«Гриды» очень удобная штука при создании макета сайта. Он даёт нам гибкость и свободу даже при сложных макетах. В этой интерактивной шпаргалке вы можете узнать все ключевые особенности и фишки инструмента.

#фронтенд #css

CSS Peek — удобные хинты для фронтендеров

Полезное расширение для VS Code, которое показывает свойства класса при наведении на объект. Работает с HTML, React, Vue, Svelte и другими фреймворками. Также позволяет редактировать содержимое класса, не переключаясь на CSS-файл

Доступно бесплатно в маркетплейсе VS Code.

#инструменты

Для JavaScript появился ещё один движок

Создал его разработчик полностью в соло. Движок называется Brimstone и написан полностью на Rust.

Несмотря на небольшой вес, Brimstone очень быстрый и на 97% реализует спецификацию ECMAScript, что позволяет использовать его практически с любым кодом. Представляет собой виртуальную машину на основе байт-кода с современной сборкой мусора, собранную по образцу V8.

Такой движок отлично подойдёт для какого-нибудь WebView, где требуется легковесный движок. Подробнее можно прочитать на странице проекта. Там же лежит инструкция по установке.

#javascript

Кстати, пока искал информацию про Brimstone, обнаружил сайт с каталогом JavaScript-движков

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

Полезно, если есть необходимость выбирать движок для проекта.

Зоопарк движков можно изучить по ссылке: https://zoo.js.org/

#javascript

Анимация пружины и отскока на чистом CSS

Обычное для создания простых анимаций на CSS используется свойство transition с указанием какого типа движение будет: ease-in, ease-in-out, ease-out или ease. Но если нам требуется что-то не стандартное, такие варианты уже не подходят.

Тут на сцену выходит функция linear(), которая позволяет нам задавать кривую движения так, как нужно нам. Например, для создания эффекта пружины или отскока, как у резинового мячика.

Джош Комо написал простой наглядный гайд, как пользоваться функцией linear для создания таких и других кастомных эффектов перехода. Рекомендую ознакомиться.

#фронтенд #css

Теперь можно легко (почти) создать адаптивное видео

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

Конечно, эти платформы помогают. Но при этом они не дают вам задать вертикальную и горизонтальную ориентацию одному и тому же ролику для разных экранов. А вот простой html-элемент <video> может. При этом вы можете настроить всё так, чтобы браузер выбирал нужно видео в зависимости от устройства и его экрана.

Как это сделать можно узнать в статье.

#фронтенд #ui

Это заговор масонов

React Reconciliation: скрытый механизм, управляющий компонентами

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

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

Переходите по ссылке. Там всё описано довольно понятно и интересно.

#react

Теория мёртвых веб-фреймворков

Слышали о такой? Её выдвинул Пол Кинлана в своей статье. Суть теории в том, что все новые фреймворки оказываются «мёртвыми ещё при рождении», потому что сочетание сетевых эффектов, экосистемы React и обучения LLM формирует замкнутый цикл, в котором альтернативы просто не успевают набрать критическую массу.

Причём его слова не просто взяты из воздуха, а подтверждаются исследованиями и наблюдениями за работой LLM.

Подробнее можно прочитать здесь. А в комментариях поделитесь своими мыслями — фреймворкам новым больше нет места или всё же не стоит терять надежду?

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

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

#фронтенд

Supercookie: Никто не уйдёт незамеченным

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

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

Ссылка на репозиторий: github.com/jonasstrehle/supercookie/

Кстати, в репозитории также лежат две статьи, которыми вдохновлялся автор проекта. Их тоже стоит почитать.

#безопасность #cookie

sqlmap — удобная защита от инъекций

Этот инструмент для тестирования на проникновение автоматизирует процесс обнаружения SQL-инъекций и захвата серверов баз данных.

Он поставляется с множеством нишевых функций. В том числе снятием отпечатков с БД, выполнением команд через внеполосные соединения и так далее.

Утилита бесплатная. Опробовать можно по ссылке.

#библиотека

Для микрофронтендов появился свой аналог OpenAPI

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

Спецификация включает в себя:

— основные метаданные: название, заголовок, описание;
— ресурсы (js, css) и способы их загрузки;
— схему объекта config, которую можно указать при запуске микрофронтенда;
— схему отправки и получения сообщений микрофронтендом;
— прокси-серверы API, если они необходимы;
— советы по безопасности.

Почитать подробнее можно на странице проекта: https://open-microfrontends.org/

#opensource

Теперь мы знаем кому будет принадлежать самый горячий и неудобный котёл

Второе пришествие Shai Hulud: 132 млн загрузок в месяц, украденные токены и стёртые домашние папки

Атака продолжается!

24 ноября хакеры заразили 492 npm-пакета червём Shai Hulud, которые скачивают 132+ млн раз в месяц. Под ударом — Postman, PostHog, AsyncAPI, Zapier и ENS.

Как работает:
Устанавливаете пакет → вредонос запускается до завершения установки → получает доступ к вашей среде разработки → крадёт GitHub/npm-ключи, токены облаков, пароли и API-ключи → складывает всё в случайный GitHub-репозиторий → заражает до 100 других пакетов.

Самое опасное: если не удаётся авторизоваться в GitHub или npm, червь стирает ВСЕ файлы в вашей домашней директории.

Читайте полную новость: список всех заражённых пакетов, технические детали червя и полный чек-лист защиты.

@your_tech