Теперь можно легко (почти) создать адаптивное видео
Существует мнение, что нельзя просто так разместить видео на главной странице, потому что файлы огромные, сжать видео сложно, соединение медленное, а хостинг дорогой. Поэтому якобы нужно, чтобы всем этим занимались YouTube или Vimeo.
Конечно, эти платформы помогают. Но при этом они не дают вам задать вертикальную и горизонтальную ориентацию одному и тому же ролику для разных экранов. А вот простой html-элемент <video> может. При этом вы можете настроить всё так, чтобы браузер выбирал нужно видео в зависимости от устройства и его экрана.
Как это сделать можно узнать в статье.
#фронтенд #ui
Существует мнение, что нельзя просто так разместить видео на главной странице, потому что файлы огромные, сжать видео сложно, соединение медленное, а хостинг дорогой. Поэтому якобы нужно, чтобы всем этим занимались YouTube или Vimeo.
Конечно, эти платформы помогают. Но при этом они не дают вам задать вертикальную и горизонтальную ориентацию одному и тому же ролику для разных экранов. А вот простой html-элемент <video> может. При этом вы можете настроить всё так, чтобы браузер выбирал нужно видео в зависимости от устройства и его экрана.
Как это сделать можно узнать в статье.
#фронтенд #ui
❤11👍4
React Reconciliation: скрытый механизм, управляющий компонентами
В React за годы его существования накопилось много интересных решений. Изучение их помогает не только лучше понимать, как работает сама библиотека, но иметь в запасе больше вариантов архитектурных решений и механизмов.
Сегодня предлагаю познакомиться с алгоритмом согласования, который лежит в основе всех внутренних оптимизаций и в результате которого React приводит DOM в соответствие с деревом компонентов.
Переходите по ссылке. Там всё описано довольно понятно и интересно.
#react
В React за годы его существования накопилось много интересных решений. Изучение их помогает не только лучше понимать, как работает сама библиотека, но иметь в запасе больше вариантов архитектурных решений и механизмов.
Сегодня предлагаю познакомиться с алгоритмом согласования, который лежит в основе всех внутренних оптимизаций и в результате которого React приводит DOM в соответствие с деревом компонентов.
Переходите по ссылке. Там всё описано довольно понятно и интересно.
#react
😁2🗿2
Forwarded from Точка входа в программирование
Теория мёртвых веб-фреймворков
Слышали о такой? Её выдвинул Пол Кинлана в своей статье. Суть теории в том, что все новые фреймворки оказываются «мёртвыми ещё при рождении», потому что сочетание сетевых эффектов, экосистемы React и обучения LLM формирует замкнутый цикл, в котором альтернативы просто не успевают набрать критическую массу.
Причём его слова не просто взяты из воздуха, а подтверждаются исследованиями и наблюдениями за работой LLM.
Подробнее можно прочитать здесь. А в комментариях поделитесь своими мыслями — фреймворкам новым больше нет места или всё же не стоит терять надежду?
Слышали о такой? Её выдвинул Пол Кинлана в своей статье. Суть теории в том, что все новые фреймворки оказываются «мёртвыми ещё при рождении», потому что сочетание сетевых эффектов, экосистемы React и обучения LLM формирует замкнутый цикл, в котором альтернативы просто не успевают набрать критическую массу.
Причём его слова не просто взяты из воздуха, а подтверждаются исследованиями и наблюдениями за работой LLM.
Подробнее можно прочитать здесь. А в комментариях поделитесь своими мыслями — фреймворкам новым больше нет места или всё же не стоит терять надежду?
👎7❤2👍1
Загружать шрифты ещё нужно уметь. Потому что способов много, но некоторые из них ухудшают производительность. Плюс надо правильно выбрать формат, убедиться в безопасности использования шрифта с точки зрения авторских прав и надёжности поставщика. А ещё нужно разбираться в дескрипторах, чтобы оптимизировать метрики. И так далее.
Если опытный разработчик уже понимает многие моменты, то новичку может быть сложно. Но даже опытный может не знать всех нюансов. Поэтому рекомендую ознакомиться с этой статьёй. Тут наверняка вы найдёте то, о чём даже не думали.
#фронтенд
Если опытный разработчик уже понимает многие моменты, то новичку может быть сложно. Но даже опытный может не знать всех нюансов. Поэтому рекомендую ознакомиться с этой статьёй. Тут наверняка вы найдёте то, о чём даже не думали.
#фронтенд
❤10
Supercookie: Никто не уйдёт незамеченным
Можно спорить хорошо это или плохо, но факт остаётся фактом — библиотека Supercookie использует фавиконки для отслеживания пользователей сайта. В отличие от обычных методов, этот сложно удалить, а храниться он может практически постоянно.
Использовать такой метод в своих проектах кажется довольно сомнительным занятием. Но точно стоит знать о нём, чтобы иметь возможность предотвратить такое отслеживание. Поэтому рекомендую подробнее познакомиться с библиотекой в образовательных целях.
Ссылка на репозиторий: github.com/jonasstrehle/supercookie/
Кстати, в репозитории также лежат две статьи, которыми вдохновлялся автор проекта. Их тоже стоит почитать.
#безопасность #cookie
Можно спорить хорошо это или плохо, но факт остаётся фактом — библиотека Supercookie использует фавиконки для отслеживания пользователей сайта. В отличие от обычных методов, этот сложно удалить, а храниться он может практически постоянно.
Использовать такой метод в своих проектах кажется довольно сомнительным занятием. Но точно стоит знать о нём, чтобы иметь возможность предотвратить такое отслеживание. Поэтому рекомендую подробнее познакомиться с библиотекой в образовательных целях.
Ссылка на репозиторий: github.com/jonasstrehle/supercookie/
Кстати, в репозитории также лежат две статьи, которыми вдохновлялся автор проекта. Их тоже стоит почитать.
#безопасность #cookie
🔥3❤2👍1
sqlmap — удобная защита от инъекций
Этот инструмент для тестирования на проникновение автоматизирует процесс обнаружения SQL-инъекций и захвата серверов баз данных.
Он поставляется с множеством нишевых функций. В том числе снятием отпечатков с БД, выполнением команд через внеполосные соединения и так далее.
Утилита бесплатная. Опробовать можно по ссылке.
#библиотека
Этот инструмент для тестирования на проникновение автоматизирует процесс обнаружения SQL-инъекций и захвата серверов баз данных.
Он поставляется с множеством нишевых функций. В том числе снятием отпечатков с БД, выполнением команд через внеполосные соединения и так далее.
Утилита бесплатная. Опробовать можно по ссылке.
#библиотека
👍4🔥4
Для микрофронтендов появился свой аналог OpenAPI
OpenMicrofrontends — это новая open source-библиотека, которая упрощает создание и работу с микрофронтендами. По сути, она просто предоставляет вам удобную спецификацию, отделяя процесс разработки от интеграции элемента в приложение. Она работает с любым фреймворком и даже позволяет использовать один микрофронтенд в нескольких проектах с разной архитектурой.
Спецификация включает в себя:
— основные метаданные: название, заголовок, описание;
— ресурсы (js, css) и способы их загрузки;
— схему объекта config, которую можно указать при запуске микрофронтенда;
— схему отправки и получения сообщений микрофронтендом;
— прокси-серверы API, если они необходимы;
— советы по безопасности.
Почитать подробнее можно на странице проекта: https://open-microfrontends.org/
#opensource
OpenMicrofrontends — это новая open source-библиотека, которая упрощает создание и работу с микрофронтендами. По сути, она просто предоставляет вам удобную спецификацию, отделяя процесс разработки от интеграции элемента в приложение. Она работает с любым фреймворком и даже позволяет использовать один микрофронтенд в нескольких проектах с разной архитектурой.
Спецификация включает в себя:
— основные метаданные: название, заголовок, описание;
— ресурсы (js, css) и способы их загрузки;
— схему объекта config, которую можно указать при запуске микрофронтенда;
— схему отправки и получения сообщений микрофронтендом;
— прокси-серверы API, если они необходимы;
— советы по безопасности.
Почитать подробнее можно на странице проекта: https://open-microfrontends.org/
#opensource
❤5
Forwarded from Представляешь,
Второе пришествие Shai Hulud: 132 млн загрузок в месяц, украденные токены и стёртые домашние папки
Атака продолжается!
24 ноября хакеры заразили 492 npm-пакета червём Shai Hulud, которые скачивают 132+ млн раз в месяц. Под ударом — Postman, PostHog, AsyncAPI, Zapier и ENS.
Как работает:
Устанавливаете пакет → вредонос запускается до завершения установки → получает доступ к вашей среде разработки → крадёт GitHub/npm-ключи, токены облаков, пароли и API-ключи → складывает всё в случайный GitHub-репозиторий → заражает до 100 других пакетов.
Самое опасное: если не удаётся авторизоваться в GitHub или npm, червь стирает ВСЕ файлы в вашей домашней директории.
Читайте полную новость: список всех заражённых пакетов, технические детали червя и полный чек-лист защиты.
@your_tech
Атака продолжается!
24 ноября хакеры заразили 492 npm-пакета червём Shai Hulud, которые скачивают 132+ млн раз в месяц. Под ударом — Postman, PostHog, AsyncAPI, Zapier и ENS.
Как работает:
Устанавливаете пакет → вредонос запускается до завершения установки → получает доступ к вашей среде разработки → крадёт GitHub/npm-ключи, токены облаков, пароли и API-ключи → складывает всё в случайный GitHub-репозиторий → заражает до 100 других пакетов.
Самое опасное: если не удаётся авторизоваться в GitHub или npm, червь стирает ВСЕ файлы в вашей домашней директории.
Читайте полную новость: список всех заражённых пакетов, технические детали червя и полный чек-лист защиты.
@your_tech
🤯6🔥4
XSS-уязвимость в Esbuild пережила 5 миллиардов загрузок и обошла HTML-очистку
Уязвимость появилась в 2022 году вместе с функцией escapeForHTML, которая должна была экранировать HTML-код. И она экранировала... Но не всё. Эта функция не обрабатывала двойные кавычки ("). Вместо неё необходимо было использовать escapeForAttribute. Но в код закралась ошибка, поэтому всё перепуталось.
В теории это позволяло злоумышленнику создать папку с особым именем, содержащим вредоносный HTML-код. Но не всё так ужасно. Ведь если у злоумышленника уже появилась возможность вносить изменения в файловую систему, то проблема с созданной папкой у вас будет далеко не на первом месте.
Но ошибка, конечно, нелепая. Поэтому рекомендую почитать о ней подробнее.
Уязвимость появилась в 2022 году вместе с функцией escapeForHTML, которая должна была экранировать HTML-код. И она экранировала... Но не всё. Эта функция не обрабатывала двойные кавычки ("). Вместо неё необходимо было использовать escapeForAttribute. Но в код закралась ошибка, поэтому всё перепуталось.
В теории это позволяло злоумышленнику создать папку с особым именем, содержащим вредоносный HTML-код. Но не всё так ужасно. Ведь если у злоумышленника уже появилась возможность вносить изменения в файловую систему, то проблема с созданной папкой у вас будет далеко не на первом месте.
Но ошибка, конечно, нелепая. Поэтому рекомендую почитать о ней подробнее.
Depthfirst
depthfirst | Esbuild's XSS Bug that Survived 5 Billion Downloads and Bypassed HTML Sanitization
In 2022, a subtle XSS bug slipped into esbuild, one of the most widely used JavaScript bundlers on the planet. Despite billions of downloads, it remained unnoticed, hiding inside a function that appeared to safely escape HTML. But a missing quote escape created…
🤔4
This is JavaScript: методы объектов и контекст «this»
Полезная статья для новичков в JavaScript. С this вам так или иначе предстоит столкнуться во время разработки, поэтому нужно уметь с ним работать и понимать его. Тут вы узнаете про методы объектов и их отличия от функций, как this помогает работать с данными объекта внутри методов и получите полезные советы.
#javascript #основы
Полезная статья для новичков в JavaScript. С this вам так или иначе предстоит столкнуться во время разработки, поэтому нужно уметь с ним работать и понимать его. Тут вы узнаете про методы объектов и их отличия от функций, как this помогает работать с данными объекта внутри методов и получите полезные советы.
#javascript #основы
❤5🫡2
This media is not supported in your browser
VIEW IN TELEGRAM
Это заслуживает, как минимум, раннего ухода домой
❤21🤣14
Производительность или качество?
Попалось обсуждение на Reddit, которое показалось интересным. Суть в том, что у автора на работе менеджеры хотят увеличить производительность в три раза с помощью ИИ, но фронтенд в таком случае превращается в спаггети-код. С одной стороны время разработки сокращается, что важно, если сроки сжатые. С другой стороны, общая кодовая база, структура кода и его качество становятся хуже и менее однородными
Что думаете по этому поводу? Как у вас в команде относятся к ИИ? А главное, как вы находите баланс между скоростью и качеством кодовой базы?
Попалось обсуждение на Reddit, которое показалось интересным. Суть в том, что у автора на работе менеджеры хотят увеличить производительность в три раза с помощью ИИ, но фронтенд в таком случае превращается в спаггети-код. С одной стороны время разработки сокращается, что важно, если сроки сжатые. С другой стороны, общая кодовая база, структура кода и его качество становятся хуже и менее однородными
Что думаете по этому поводу? Как у вас в команде относятся к ИИ? А главное, как вы находите баланс между скоростью и качеством кодовой базы?
Reddit
From the Frontend community on Reddit
Explore this post and more from the Frontend community
🔥3
This media is not supported in your browser
VIEW IN TELEGRAM
Полезная функция в Chrome Dev Tools
Не все знают, но в инструментах разработчика есть раздел CSS Overview. Он позволяет вам в одном месте и в удобном виде посмотреть какие стили используются на сайте. Есть отдельный раздел со шрифтами, цветами, медиазапросами. Отдельного внимания стоит раздел, в котором показаны не используемые CSS-правила.
Инструкция по входу в раздел на видео.
#css #chrome
Не все знают, но в инструментах разработчика есть раздел CSS Overview. Он позволяет вам в одном месте и в удобном виде посмотреть какие стили используются на сайте. Есть отдельный раздел со шрифтами, цветами, медиазапросами. Отдельного внимания стоит раздел, в котором показаны не используемые CSS-правила.
Инструкция по входу в раздел на видео.
#css #chrome
🔥17👍9
Создание и деплой полнофункционального приложения для обмена сообщениями в чате
В этом видео автор предлагает с нуля создать полноценное приложение для чата с личными и групповыми чатами, эмодзи и реакциями, встроенной поддержкой Gif, возможностью редактировать и удалять сообщения, специализированными командами и многим другим.
Все подробности в видео: https://youtu.be/MJzbJQLGehs
#фронтенд #бэкенд #видео
В этом видео автор предлагает с нуля создать полноценное приложение для чата с личными и групповыми чатами, эмодзи и реакциями, встроенной поддержкой Gif, возможностью редактировать и удалять сообщения, специализированными командами и многим другим.
Все подробности в видео: https://youtu.be/MJzbJQLGehs
#фронтенд #бэкенд #видео
YouTube
Build and Deploy a Full Stack Realtime Chat Messaging App with Authentication & SMS Notifications
With Direct and Group Chats, emojis & Reactions, Built-in Gif support, the ability to edit & delete messages, specialized commands, and much more, this fully responsive Medical Pager is the best Chat App that you can currently find on YouTube.
You'll also…
You'll also…
🤔2
Нашёл для вас легковесный экстрактор схем страниц
schema-extractor полезен для преобразования сырого HTML-кода в машиночитаемый формат JSON. Он позволяет извлекать из веб-страниц структурированные данные, которые могут использовать агенты при просмотре интернета. Это может пригодиться для анализа структуры страницы, разработки ии-агентов, тестирования, автоматизация извлечения и парсинга данных в другие системы.
Весит мало, устанавливается легко. Работает на axios, cheerio и heuristics.
#инструменты #библиотека
schema-extractor полезен для преобразования сырого HTML-кода в машиночитаемый формат JSON. Он позволяет извлекать из веб-страниц структурированные данные, которые могут использовать агенты при просмотре интернета. Это может пригодиться для анализа структуры страницы, разработки ии-агентов, тестирования, автоматизация извлечения и парсинга данных в другие системы.
Весит мало, устанавливается легко. Работает на axios, cheerio и heuristics.
#инструменты #библиотека
GitHub
GitHub - ShoryaDs7/schema-extractor: Lightweight tool to convert raw HTML into a machine-readable JSON schema: page type, product…
Lightweight tool to convert raw HTML into a machine-readable JSON schema: page type, product cards, buttons, forms, links. - ShoryaDs7/schema-extractor
👍4🔥3
Локальный DNS-сервер для обеспечения конфиденциальности
DNSnitch — это локальный DNS-сервер, ориентированный на конфиденциальность, который позволяет вам полностью контролировать свой сетевой трафик. В отличие от пассивных чёрных списков, DNSnitch работает по принципу «запрета по умолчанию»: каждый неизвестный домен блокируется по умолчанию, пока вы не авторизуете его с помощью панели управления в реальном времени.
Инструмент имеет 4 уровня разрешений, которые позволяют точно контролировать кому, когда и как можно получить доступ.
Подробнее почитать можно здесь.
#библиотека #dns
DNSnitch — это локальный DNS-сервер, ориентированный на конфиденциальность, который позволяет вам полностью контролировать свой сетевой трафик. В отличие от пассивных чёрных списков, DNSnitch работает по принципу «запрета по умолчанию»: каждый неизвестный домен блокируется по умолчанию, пока вы не авторизуете его с помощью панели управления в реальном времени.
Инструмент имеет 4 уровня разрешений, которые позволяют точно контролировать кому, когда и как можно получить доступ.
Подробнее почитать можно здесь.
#библиотека #dns
❤6🔥3
Forwarded from Точка входа в программирование
Разбираемся, как работает цикл событий в JS
Event Loop Visualizer — очень удобная песочница, в которой можно посмотреть, как работает цикл событий и асинхронный код. Просто берёте готовый или вставляете свой, запускаете его и смотрите, что происходит в очереди вызовов, цикле, API-запросах и так далее.
Причём вы также можете попробовать угадать в каком порядке будет выполнен код. Для этого есть отдельное окошко.
Пробуем тут.
#javascript
Event Loop Visualizer — очень удобная песочница, в которой можно посмотреть, как работает цикл событий и асинхронный код. Просто берёте готовый или вставляете свой, запускаете его и смотрите, что происходит в очереди вызовов, цикле, API-запросах и так далее.
Причём вы также можете попробовать угадать в каком порядке будет выполнен код. Для этого есть отдельное окошко.
Пробуем тут.
#javascript
❤8🔥2🤩2
Как писать на Angular грамотно и не совершать банальных ошибок
Фреймворк постоянно обновляется и дополняется, и уследить за всеми лучшими практиками почти нереально. Поэтому многие продолжают писать приложения по инерции, используя паттерны, которые выучили на заре второй версии. В итоге даже опытные разработчики продолжают делать ошибки, которые когда-то не считались ошибками.
В этой статье речь пойдёт не о банальных ошибках синтаксиса, о более глубоком уровне, об архитектурных просчётах и антипаттернах, которые кочуют из проекта в проект.
#angular
Фреймворк постоянно обновляется и дополняется, и уследить за всеми лучшими практиками почти нереально. Поэтому многие продолжают писать приложения по инерции, используя паттерны, которые выучили на заре второй версии. В итоге даже опытные разработчики продолжают делать ошибки, которые когда-то не считались ошибками.
В этой статье речь пойдёт не о банальных ошибках синтаксиса, о более глубоком уровне, об архитектурных просчётах и антипаттернах, которые кочуют из проекта в проект.
#angular
👍3😁1