Встречаем старый Новый год с зимним codepen-проектом
Автор создал инсталляцию с зимним пейзажем. У картинки есть параллакс-эффект, который работает по скроллу.
Посмотреть можно по ссылке:
https://codepen.io/ikrprojects/pen/vEGMzBp
#codepen
Автор создал инсталляцию с зимним пейзажем. У картинки есть параллакс-эффект, который работает по скроллу.
Посмотреть можно по ссылке:
https://codepen.io/ikrprojects/pen/vEGMzBp
#codepen
👍4🔥2❤1
CSS counters в подходе Atomic CSS
CSS Counters — отличный инструмент для работы с кастомными счётчиками. Но применение его не ограничивается только рукописным CSS — его легко и эффективно можноиспользовать в рамках Atomic CSS подхода.
Давайте посмотрим, как это делается: https://tproger.ru/articles/css-counters-v-podhode-atomic-css---chast-1
#css #фронтенд
CSS Counters — отличный инструмент для работы с кастомными счётчиками. Но применение его не ограничивается только рукописным CSS — его легко и эффективно можноиспользовать в рамках Atomic CSS подхода.
Давайте посмотрим, как это делается: https://tproger.ru/articles/css-counters-v-podhode-atomic-css---chast-1
#css #фронтенд
🔥1
Forwarded from Нейроканал
Свёрточная нейросеть на чистом JavaScript с визуализацией — без TensorFlow, без библиотек, работает прямо в браузере.
Рисуешь цифру мышкой — сеть её распознаёт. Всё происходит локально в браузере, ничего никуда не отправляется. Автор говорит, что сейчас нигде не работает и написал это просто чтобы попрактиковаться.
Чтобы понять как CNN работает изнутри — отличная штука. Когда пишешь свёртки, пулинг и backprop руками — понимаешь что там происходит лучше, чем после десяти туториалов по PyTorch. Код в одном файле, можно читать последовательно.
📎 Код на GitHub, рабочая демка на сайте автора, на видео скринкаст для ленивых, чтобы не открывать сайт
@neuro_channel
Рисуешь цифру мышкой — сеть её распознаёт. Всё происходит локально в браузере, ничего никуда не отправляется. Автор говорит, что сейчас нигде не работает и написал это просто чтобы попрактиковаться.
Чтобы понять как CNN работает изнутри — отличная штука. Когда пишешь свёртки, пулинг и backprop руками — понимаешь что там происходит лучше, чем после десяти туториалов по PyTorch. Код в одном файле, можно читать последовательно.
@neuro_channel
This media is not supported in your browser
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
❤10🔥3👍1
ScrapeGraphAI — умный веб-скраппер на основе ИИ
Это Python-библиотека для веб-скрапинга, которая использует LLM и логику direct graph для создания конвейеров скрапинга для веб-сайтов и локальных документов (XML, HTML, JSON, Markdown и т.д.).
Просто укажите, какую информацию вы хотите извлечь, и библиотека сделает это за вас!
Инструкция по использованию тут: https://github.com/ScrapeGraphAI/Scrapegraph-ai
#инструменты #python
Это Python-библиотека для веб-скрапинга, которая использует LLM и логику direct graph для создания конвейеров скрапинга для веб-сайтов и локальных документов (XML, HTML, JSON, Markdown и т.д.).
Просто укажите, какую информацию вы хотите извлечь, и библиотека сделает это за вас!
Инструкция по использованию тут: https://github.com/ScrapeGraphAI/Scrapegraph-ai
#инструменты #python
❤4😁4
CBLT — безопасный, быстрый и минималистичный веб-сервер на языке программирования Rust
Rust не имеет аналогов Nginx, Lighttpd, Caddy, HAProxy, Apache, Tomcat, Jetty и т.д. Все эти веб-сервера написаны на C, Go, Java и других языках. Как тогда написать свой веб-сервер на Rust без всех этих технологий?
Автор решил сделать свой сервер с нуля, написав свои решения вместо этих инструментов. Что из этого вышло, рассказал в статье.
#rust #бэкенд
Rust не имеет аналогов Nginx, Lighttpd, Caddy, HAProxy, Apache, Tomcat, Jetty и т.д. Все эти веб-сервера написаны на C, Go, Java и других языках. Как тогда написать свой веб-сервер на Rust без всех этих технологий?
Автор решил сделать свой сервер с нуля, написав свои решения вместо этих инструментов. Что из этого вышло, рассказал в статье.
#rust #бэкенд
👍3❤2
This media is not supported in your browser
VIEW IN TELEGRAM
Учим React через интерактивные визуализации
Если вдруг вы столкнулись с трудностями при изучении React, то этот сайт вам сильно упростит жизнь и наглядно покажет, как и что работает.
Заходите и изучайте: https://react.gg/visualized
#react
Если вдруг вы столкнулись с трудностями при изучении React, то этот сайт вам сильно упростит жизнь и наглядно покажет, как и что работает.
Заходите и изучайте: https://react.gg/visualized
#react
👍10❤6
Forwarded from Типичный программист
Понимание аутентификации JWT: подробное руководство с примерами
В мире веб-разработки безопасность имеет первостепенное значение. Одним из наиболее популярных методов защиты веб-приложений является аутентификация с помощью JSON Web Token (JWT).
В этом руководстве рассматривается, что такое аутентификация JWT, как она работает и как вы можете реализовать ее в своих веб-приложениях, с практическими примерами.
#jwt
В мире веб-разработки безопасность имеет первостепенное значение. Одним из наиболее популярных методов защиты веб-приложений является аутентификация с помощью JSON Web Token (JWT).
В этом руководстве рассматривается, что такое аутентификация JWT, как она работает и как вы можете реализовать ее в своих веб-приложениях, с практическими примерами.
#jwt
❤4
Серверные компоненты против островной архитектуры: битва за производительность
Детальное сравнение двух популярных решений, нацеленных на снижение объёма передаваемого JavaScript и повышение производительности интерфейсов. Автор разбирает ключевые различия в принципах работы, оценивает важные метрики, а также даёт чёткие рекомендации.
Подробности:
https://blog.logrocket.com/server-components-vs-islands-architecture/
Детальное сравнение двух популярных решений, нацеленных на снижение объёма передаваемого JavaScript и повышение производительности интерфейсов. Автор разбирает ключевые различия в принципах работы, оценивает важные метрики, а также даёт чёткие рекомендации.
Подробности:
https://blog.logrocket.com/server-components-vs-islands-architecture/
❤2
Google Chrome теперь поддерживает HTML-элемент
Начиная с Chrome 144, вы можете использовать новый HTML-элемент
Подробнее об обновлении в блоге Chrome.
<geolocation>Начиная с Chrome 144, вы можете использовать новый HTML-элемент
<geolocation>. Он представляет собой существенное изменение в том, как сайты запрашивают данные о местоположении пользователя — от запросов на разрешение, запускаемых скриптами, к декларативному, ориентированному на действия пользователя интерфейсу. Это позволяет уменьшить количество шаблонного кода, необходимого для обработки состояний разрешений и ошибок, и обеспечивает более сильный сигнал о намерениях пользователя, что помогает избежать вмешательств браузера (например, блокировок).Подробнее об обновлении в блоге Chrome.
❤10👍3
React наконец-то решил свою самую большую проблему
Помните недавний сбой у CloudFlare? Небольшая ошибка положила пол интернета. А дело было реактовском
Подробнее о нём в статье.
#react
Помните недавний сбой у CloudFlare? Небольшая ошибка положила пол интернета. А дело было реактовском
useEffect. Да, даже опытные разработчики и крупные компании могут облажаться при использовании этого хука. В команде React сделали выводы и добавили новый хук useEffectEvent, который позволяет избежать неправильной работы системы.Подробнее о нём в статье.
#react
🗿18👍5😁3❤1
Скрытые функции Google Chrome для разработчика
Chrome Dev Tools — один из самых популярных инструментов среди веб-разработчиков. Однако в неём есть некоторые полезные функции, о которых большинство разработчиков не знает.
В этой статье вы сможете узнать о пяти основных функциях Chrome DevTools, которые могут вам пригодиться:
https://webformyself.com/skrytye-funkcii-google-chrome-dlya-razrabotchika/
#devtools #инструменты
Chrome Dev Tools — один из самых популярных инструментов среди веб-разработчиков. Однако в неём есть некоторые полезные функции, о которых большинство разработчиков не знает.
В этой статье вы сможете узнать о пяти основных функциях Chrome DevTools, которые могут вам пригодиться:
https://webformyself.com/skrytye-funkcii-google-chrome-dlya-razrabotchika/
#devtools #инструменты
🔥4❤1
Сложный круговой прогрессбар — простая реализация
Круговые прогрессбары обычно делают на SVG или Canvas. Но оказывается, всё это можно собрать на одном div и одном
В этом видео вы сможете шаг за шагом собрать круговой индикатор прогресса на чистом CSS: с анимацией, реактивной логикой и динамической сменой цветов — без JavaScript и без SVG.
Круговые прогрессбары обычно делают на SVG или Canvas. Но оказывается, всё это можно собрать на одном div и одном
background-image — если знать, как работают градиенты и современные возможности CSS. В этом видео вы сможете шаг за шагом собрать круговой индикатор прогресса на чистом CSS: с анимацией, реактивной логикой и динамической сменой цветов — без JavaScript и без SVG.
YouTube
Сложный круговой прогрессбар — простая реализация | CSS Боль
Круговые прогрессбары обычно делают на SVG или Canvas. Но оказывается, всё это можно собрать на одном div и одном background-image — если знать, как работают градиенты и современные возможности CSS.
В этом выпуске шаг за шагом собираем круговой индикатор…
В этом выпуске шаг за шагом собираем круговой индикатор…
👍3❤1
На протяжении всех заданий вы будете воссоздавать компоненты и макеты из популярных приложений, таких как GitHub или CodePen, повторяя/проверяя свою подкованность в "ванильном" CSS: https://youtu.be/TzuWIHGFKCQ
Please open Telegram to view this post
VIEW IN TELEGRAM
😁6❤4
Forwarded from Инструменты программиста
PostDad — TUI-клиент для тестирования API, написанный на Rust. Альтернатива Postman, но прямо в терминале.
В свежей версии добавили поддержку WebSocket. Переключение режимов через Ctrl+W, можно подключаться к
Зачем этот проект? Со слов автора:
Что умеет
🔘 GET/POST/PUT/DELETE запросы
🔘 WebSocket соединения
🔘 Работа с headers и body
🔘 Всё в TUI без GUI
Альтернативы в этой нише
🔘 Bruno — десктоп, open source, хранит коллекции в git-friendly формате
🔘 Hoppscotch — браузерный, лёгкий, self-hosted
🔘 HTTPie — CLI, но без TUI
PostDad выделяется именно TUI-интерфейсом — интерактивно, но в терминале.
📎 Код на GitHub, установка
@prog_tools
В свежей версии добавили поддержку WebSocket. Переключение режимов через Ctrl+W, можно подключаться к
ws:// и wss:// эндпоинтам, отправлять сообщения в реальном времени и скроллить историю.
Зачем этот проект? Со слов автора:
Postman стал тяжёлым — electron, 500+ МБ RAM, обязательный аккаунт. PostDad — лёгкий TUI, работает в терминале, не требует регистрации. Для тех, кто живёт в консоли и не хочет открывать браузер ради одного GET-запроса.
Что умеет
Альтернативы в этой нише
PostDad выделяется именно TUI-интерфейсом — интерактивно, но в терминале.
cargo install PostDad@prog_tools
Please open Telegram to view this post
VIEW IN TELEGRAM
❤6👍3
Оно живое: jQuery получил крупное обновление
jQuery 4.0.0 — крупный мажорный релиз с чисткой легаси, улучшениями безопасности и изменениями в поведении, но для большинства проектов апгрейд обещают относительно безболезненным.
Что исправили
🔘 Привели порядок фокус‑событий к актуальному W3C: теперь
🔘 Починили и доработали AJAX и события: корректная работа с бинарными данными и JSONP‑ошибками, запрет выполнения скриптов при неуспешных HTTP‑ответах, более надёжная обработка фокуса/blur и предотвращение падений при удалении элементов.
🔘 Много точечных багфиксов по CSS, селекторам, манипуляции DOM и data‑атрибутам: корректные размеры
Что нового
🔘 Поддержка Trusted Types: TrustedHTML можно безопасно передавать в методы манипуляции DOM под CSP
🔘 Большинство асинхронных загрузок скриптов теперь через
🔘 Исходники переведены с AMD на ES‑модули, сборка через Rollup, добавлены именованные экспорты и улучшена совместимость с ESM+CommonJS и современными сборщиками.
🔘 Появились
🔘 Slim‑сборка стала ещё компактнее (~19.5 kB gzipped) и теперь без Deferred/Callbacks, с упором на нативные Promises.
Что важного
🔘 Список поддерживаемых браузеров серьёзно обновлён: выкинули IE < 11, Edge Legacy, старые iOS, Firefox и Android Browser; IE 11 уберут уже в jQuery 5.0, для олдскула рекомендуют остаться на 3.x.
🔘 Массово вырезаны устаревшие API (
🔘 Из прототипа jQuery убраны внутренние
🔘 За счёт удаления легаси под старые IE и депрекейтед‑API размер ядра уменьшился более чем на 3 kB gzipped.
🔘 Для перехода есть upgrade‑гайд и свежий jQuery Migrate, а релиз доступен на CDN и в npm (
Ну что, пора возвращаться на классику?
jQuery 4.0.0 — крупный мажорный релиз с чисткой легаси, улучшениями безопасности и изменениями в поведении, но для большинства проектов апгрейд обещают относительно безболезненным.
Что исправили
blur → focusout → focus → focusin, jQuery больше не переопределяет нативное поведение (кроме IE).col, работа contents() у <object>, улучшенные тесты под зум, Bootstrap и др.Что нового
require-trusted-types-for.<script>`‑теги, XHR остаётся только для отдельных случаев (например, с кастомными `headers)..even() и .odd() как замена старым POS‑псевдоклассам :even и :odd.Что важного
jQuery.isArray, jQuery.parseJSON, jQuery.trim, jQuery.type, jQuery.now, jQuery.isNumeric, jQuery.isFunction, jQuery.isWindow, jQuery.camelCase, jQuery.nodeName, jQuery.cssNumber, jQuery.cssProps, jQuery.fx.interval и др.) — теперь нужно использовать нативные аналоги (Array.isArray(), JSON.parse(), String.prototype.trim(), Date.now() и т.п.).push, sort, splice; при необходимости их следует вызывать через массивные методы ([].push.call($elems, elem) и т.д.).npm install jquery@4.0.0, плюс slim‑версии на code.jquery.com).Ну что, пора возвращаться на классику?
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥20❤14😁10
Найдите ошибку в React-компоненте: Функциональное Карри
В этом выпуске «Найди ошибку» у нас есть простой React компонент-переключатель, который переключается между активным и неактивным состояниями при нажатии. Однако он не работает как ожидается. Сможете ли вы найти ошибку и исправить её?
Переходите по ссылке, чтобы проверить свои навыки, а также посмотреть на один из вариантов решения проблемы:
https://tproger.ru/articles/najdi-oshibku-v-react-komponente-funkcionalnoe-karri/
#react
В этом выпуске «Найди ошибку» у нас есть простой React компонент-переключатель, который переключается между активным и неактивным состояниями при нажатии. Однако он не работает как ожидается. Сможете ли вы найти ошибку и исправить её?
Переходите по ссылке, чтобы проверить свои навыки, а также посмотреть на один из вариантов решения проблемы:
https://tproger.ru/articles/najdi-oshibku-v-react-komponente-funkcionalnoe-karri/
#react
😁9
Web Almanac 2025: реальные данные о состоянии веба
Web Almanac 2025 — это ежегодный отчёт HTTP Archive о состоянии веба. Он сочетает сырые данные с мнениями экспертов. В издании 16 глав: контент страниц, UX, публикация и дистрибуция.
Данные собраны с 16+ млн сайтов. Идеально для тех, кто хочет понимать тренды веба.
Web Almanac 2025 — это ежегодный отчёт HTTP Archive о состоянии веба. Он сочетает сырые данные с мнениями экспертов. В издании 16 глав: контент страниц, UX, публикация и дистрибуция.
Данные собраны с 16+ млн сайтов. Идеально для тех, кто хочет понимать тренды веба.
🔥6
Forwarded from Нейроканал
Свёрточная нейросеть на чистом JavaScript с визуализацией — без TensorFlow, без библиотек, работает прямо в браузере.
Рисуешь цифру мышкой — сеть её распознаёт. Всё происходит локально в браузере, ничего никуда не отправляется. Автор говорит, что сейчас нигде не работает и написал это просто чтобы попрактиковаться.
Чтобы понять как CNN работает изнутри — отличная штука. Когда пишешь свёртки, пулинг и backprop руками — понимаешь что там происходит лучше, чем после десяти туториалов по PyTorch. Код в одном файле, можно читать последовательно.
📎 Код на GitHub, рабочая демка на сайте автора, на видео скринкаст для ленивых, чтобы не открывать сайт
@neuro_channel
Рисуешь цифру мышкой — сеть её распознаёт. Всё происходит локально в браузере, ничего никуда не отправляется. Автор говорит, что сейчас нигде не работает и написал это просто чтобы попрактиковаться.
Чтобы понять как CNN работает изнутри — отличная штука. Когда пишешь свёртки, пулинг и backprop руками — понимаешь что там происходит лучше, чем после десяти туториалов по PyTorch. Код в одном файле, можно читать последовательно.
@neuro_channel
This media is not supported in your browser
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥5👍4