Forwarded from Инструменты программиста
This media is not supported in your browser
VIEW IN TELEGRAM
screenshot-to-code | Генерируем веб-приложение по скриншоту / Figma-концепту
Простой инструмент для преобразования скриншотов, макетов и дизайнов Figma в чистый, функциональный код с использованием ИИ. Поддерживает Claude Sonnet 3.5 и GPT-4o.
Цена: бесплатно
Репозиторий проекта
А какие OCR вы используете? Поделитесь в комментариях.
@neuro_channel
Простой инструмент для преобразования скриншотов, макетов и дизайнов Figma в чистый, функциональный код с использованием ИИ. Поддерживает Claude Sonnet 3.5 и GPT-4o.
Цена: бесплатно
Репозиторий проекта
А какие OCR вы используете? Поделитесь в комментариях.
@neuro_channel
Для чего используется stopPropagation()
Данный метод используется для предотвращения всплытия или поднятия события вверх по цепочке из предков целевого элемента. Другими словами, он прекращает передачу события от целевого элемента к его предкам. Рассмотрим пример ниже.
При клике по вложенному контейнеру в консоль выводится сообщение «Внутренний контейнер». Если убрать
#основы
Данный метод используется для предотвращения всплытия или поднятия события вверх по цепочке из предков целевого элемента. Другими словами, он прекращает передачу события от целевого элемента к его предкам. Рассмотрим пример ниже.
При клике по вложенному контейнеру в консоль выводится сообщение «Внутренний контейнер». Если убрать
event.stopPropagation(), то при клике по вложенному контейнеру, в консоль будут выведены оба сообщения.#основы
This media is not supported in your browser
VIEW IN TELEGRAM
Anchoreum: Новая игра для изучения CSS
В этой игре вы сможете научиться работать с позиционированием CSS-якорей. Игра от создателя Flexbox Froggy и Grid Garden, так что интерфейс вполне узнаваем и принцип игры понятен.
Пройти бесплатно можно по ссылке: https://anchoreum.com/
#css
В этой игре вы сможете научиться работать с позиционированием CSS-якорей. Игра от создателя Flexbox Froggy и Grid Garden, так что интерфейс вполне узнаваем и принцип игры понятен.
Пройти бесплатно можно по ссылке: https://anchoreum.com/
#css
Ловите небольшую, но полезную шпаргалку по флексбоксах. Здесь все основные свойства и варианты их значений наглядно.
Сохраняйте, чтобы не потерять!
#шпаргалка #css
Сохраняйте, чтобы не потерять!
#шпаргалка #css
Как разобрать HTML в JavaScript
По мере роста спроса на данные растёт и потребность в их извлечении, обработке и анализе. Но большая часть этих данных представлена на веб-сайтах по всему интернету. Как же получить к ним доступ программно?
Решение заключается в автоматизации процесса анализа, извлечения и преобразования необработанных данных в структурированный, легко читаемый формат. Этот процесс известен как синтаксический анализ HTML, и в этой статье вы узнаете, как это сделать с помощью JavaScript.
#javascript #html #парсинг
По мере роста спроса на данные растёт и потребность в их извлечении, обработке и анализе. Но большая часть этих данных представлена на веб-сайтах по всему интернету. Как же получить к ним доступ программно?
Решение заключается в автоматизации процесса анализа, извлечения и преобразования необработанных данных в структурированный, легко читаемый формат. Этот процесс известен как синтаксический анализ HTML, и в этой статье вы узнаете, как это сделать с помощью JavaScript.
#javascript #html #парсинг
Позиционируем плавающие элементы без лишних сложностей
В этом нам поможет JavaScript-библиотека Floating UI. Она не только упрощает размещение элементов в нестандартном месте, но и помогает добавлять им интерактивность.
С помощью неё можно разместить подсказку, плавающую возле курсора, настроить необычное поведение при скролле страницы и многое другое.
Сохраняйте себе в библиотеку в закладки, чтобы не потерять.
#библиотека #javascript
В этом нам поможет JavaScript-библиотека Floating UI. Она не только упрощает размещение элементов в нестандартном месте, но и помогает добавлять им интерактивность.
С помощью неё можно разместить подсказку, плавающую возле курсора, настроить необычное поведение при скролле страницы и многое другое.
Сохраняйте себе в библиотеку в закладки, чтобы не потерять.
#библиотека #javascript
Вы когда-нибудь использовали один и тот же пароль для разных сайтов?
Anonymous Poll
58%
Да, так удобнее
30%
Иногда, но стараюсь избегать
12%
Нет, каждый раз новый
Веб-страница
Вы когда-нибудь использовали один и тот же пароль для разных сайтов?
Как подросток превратил Twitter в личную машину для кражи денег?
Представьте: аккаунты Илона Маска, Билла Гейтса, Джеффа Безоса и даже Apple начинают публиковать странные твиты про биткоины.
Мир в шоке, миллионы людей в недоумении, а за всем этим стоит... 17-летний парень.
Как он провернул крупнейший взлом соцсетей в истории? Кто ему помогал? И почему даже опытные хакеры аплодировали этой дерзости?
В новом выпуске подкаста «АЙТИ КРАЙМ» мы разбираем взлом, который поставил под удар доверие к крупнейшей платформе и заставил весь мир задуматься: а насколько безопасны наши любимые соцсети?
Слушайте и смотрите новый выпуск:
Яндекс.Музыка
Apple Music
Spotify
YouTube
Telegram
#подкаст #айтикрайм
Представьте: аккаунты Илона Маска, Билла Гейтса, Джеффа Безоса и даже Apple начинают публиковать странные твиты про биткоины.
Мир в шоке, миллионы людей в недоумении, а за всем этим стоит... 17-летний парень.
Как он провернул крупнейший взлом соцсетей в истории? Кто ему помогал? И почему даже опытные хакеры аплодировали этой дерзости?
В новом выпуске подкаста «АЙТИ КРАЙМ» мы разбираем взлом, который поставил под удар доверие к крупнейшей платформе и заставил весь мир задуматься: а насколько безопасны наши любимые соцсети?
Слушайте и смотрите новый выпуск:
Яндекс.Музыка
Apple Music
Spotify
YouTube
Telegram
#подкаст #айтикрайм
Media is too big
VIEW IN TELEGRAM
Микрофронтенды: build time vs runtime
Александр Гончаров на прошлогодней конференции FrontendConf поделился своим опытом и рассказал почему микрофронтенд — логичное архитектурное развитие индустрии, а также какие принципиальные различия и сходства подходов build time и runtime.
Если ещё не смотрели, то стоит это исправить. Мы для вас принесли доклад из YouTube сюда, чтобы у вас не возникало проблем с загрузкой.
#доклад #микрофронтенд
Александр Гончаров на прошлогодней конференции FrontendConf поделился своим опытом и рассказал почему микрофронтенд — логичное архитектурное развитие индустрии, а также какие принципиальные различия и сходства подходов build time и runtime.
Если ещё не смотрели, то стоит это исправить. Мы для вас принесли доклад из YouTube сюда, чтобы у вас не возникало проблем с загрузкой.
#доклад #микрофронтенд
This media is not supported in your browser
VIEW IN TELEGRAM
Наглеть или вести себя поскромнее?
❤️/🗿
❤️/🗿
Как работает всплытие в JavaScript
Представьте себе следующее: у вас есть коробка (родительский элемент), и внутри неё находится ещё одна меньшая коробка (дочерний элемент). Когда вы касаетесь (или кликаете) меньшей коробки, ваше прикосновение не только ощущается на меньшей коробке, но и как бы «передаётся» на большую коробку.
В JavaScript это называется всплытием: если событие, например клик, происходит на внутреннем элементе, оно начинает перемещаться вверх к наружным элементам.
Вот так это может выглядеть в реальном коде:
Для настройки логики в JS также предусмотрена остановка всплытия
Если вы не хотите, чтобы событие поднималось вверх, можно его остановить с помощью
Когда используется всплытие?
— Всплытие удобно, когда вам нужно обрабатывать похожие события для группы элементов.
— Оно пригодится, когда вы хотите определить, что событие произошло на каком-то уровне и больше не важно, что происходит дальше в иерархии.
#простымисловами #javascript
Представьте себе следующее: у вас есть коробка (родительский элемент), и внутри неё находится ещё одна меньшая коробка (дочерний элемент). Когда вы касаетесь (или кликаете) меньшей коробки, ваше прикосновение не только ощущается на меньшей коробке, но и как бы «передаётся» на большую коробку.
В JavaScript это называется всплытием: если событие, например клик, происходит на внутреннем элементе, оно начинает перемещаться вверх к наружным элементам.
Вот так это может выглядеть в реальном коде:
<!DOCTYPE html>
<html lang="en">
<body>
<div id="parent" style="padding: 20px; background-color: lightblue;">
Большая коробка (Parent Div)
<div id="child" style="padding: 20px; background-color: lightcoral;">
Меньшая коробка (Child Div)
</div>
</div>
<script>
document.getElementById('parent').addEventListener('click', function(event) {
alert('Клик по большой коробке!');
});
document.getElementById('child').addEventListener('click', function(event) {
alert('Клик по меньшей коробке!');
});
</script>
</body>
</html>
Для настройки логики в JS также предусмотрена остановка всплытия
Если вы не хотите, чтобы событие поднималось вверх, можно его остановить с помощью
event.stopPropagation(). Например, добавив это в код клика по меньшей коробке, вы сможете предотвратить срабатывание события для большей коробки.Когда используется всплытие?
— Всплытие удобно, когда вам нужно обрабатывать похожие события для группы элементов.
— Оно пригодится, когда вы хотите определить, что событие произошло на каком-то уровне и больше не важно, что происходит дальше в иерархии.
#простымисловами #javascript
Чёрная пятница — отличный повод инвестировать в развитие своей карьеры с максимальной выгодой
Как не захламлять свой дом ненужными вещами с распродаж? Вкладываться в себя. Знания — лучшая инвестиция, которая поможет вам увеличить доход и купить всё, что вы действительно хотите.
В Нетологии вы можете освоить новую профессию или получить навыки для роста в карьере. Только в ноябре любой курс доступен со скидкой до –40%, но и это ещё не всё — на сайте вы найдёте промокод на дополнительную скидку на 10, 15, 20 тысяч рублей. А при единой оплате сможете получить ещё -5%.
Двойные скидки для максимальной выгоды. Распродажа продлится с 15 по 24 ноября.
Это #партнёрский пост
Как не захламлять свой дом ненужными вещами с распродаж? Вкладываться в себя. Знания — лучшая инвестиция, которая поможет вам увеличить доход и купить всё, что вы действительно хотите.
В Нетологии вы можете освоить новую профессию или получить навыки для роста в карьере. Только в ноябре любой курс доступен со скидкой до –40%, но и это ещё не всё — на сайте вы найдёте промокод на дополнительную скидку на 10, 15, 20 тысяч рублей. А при единой оплате сможете получить ещё -5%.
Двойные скидки для максимальной выгоды. Распродажа продлится с 15 по 24 ноября.
Это #партнёрский пост
Топ JavaScript-фреймворков для быстрой разработки в 2025
Для JS существует огромное количество фреймворков. Возможно, пока вы читаете этот текст, вышел ещё один новый фреймворк.
Но как понять какие стоят внимания, какие — нет? Какие стоит использовать сегодня, а какие уже устарели?
Мы составили подборку JavaScript-фреймворков, которые достойны вашего внимания и точно будут актуальны в следующем году. Переходите по ссылке и выбирайте свой.
#javascript #подборка
Для JS существует огромное количество фреймворков. Возможно, пока вы читаете этот текст, вышел ещё один новый фреймворк.
Но как понять какие стоят внимания, какие — нет? Какие стоит использовать сегодня, а какие уже устарели?
Мы составили подборку JavaScript-фреймворков, которые достойны вашего внимания и точно будут актуальны в следующем году. Переходите по ссылке и выбирайте свой.
#javascript #подборка
Неизвестно полезный CSS
Неважно, верстаете ли вы сайт для малого бизнеса или создаёте супермодное React приложение. Здесь собраны фишки CSS, которые пригодятся каждому. Что-то, возможно, вы уже знаете, но наверняка тут найдётся для вас что-то новенькое.
В этой подборке про вертикальный текст, clip-path, контрастность текста и не только.
Кстати, это уже 6 подборка советов, остальные вы найдёте в конце статьи.
#css
Неважно, верстаете ли вы сайт для малого бизнеса или создаёте супермодное React приложение. Здесь собраны фишки CSS, которые пригодятся каждому. Что-то, возможно, вы уже знаете, но наверняка тут найдётся для вас что-то новенькое.
В этой подборке про вертикальный текст, clip-path, контрастность текста и не только.
Кстати, это уже 6 подборка советов, остальные вы найдёте в конце статьи.
#css
Django или FastAPI: какой фреймворк выбрать в 2025 году
Django и FastAPI — одни из самых популярных фреймворков Python. На какой стоит обращать внимание сейчас при начале работы с новым проектом?
В этой статье мы подробно разберём все основные критерии при выборе между этими фреймворками для начинающих свой путь разработчиков — востребованность фреймворка на рынке труда, тренды, которые повлияют на их востребованность в будущем, а так же важные особенности, которые нужно учитывать при выборе.
https://tproger.ru/articles/django-vs-fastapi-v-2025-godu--kakoj-frejmvork-vybrat-
#бэкенд #python #django #fastapi
Django и FastAPI — одни из самых популярных фреймворков Python. На какой стоит обращать внимание сейчас при начале работы с новым проектом?
В этой статье мы подробно разберём все основные критерии при выборе между этими фреймворками для начинающих свой путь разработчиков — востребованность фреймворка на рынке труда, тренды, которые повлияют на их востребованность в будущем, а так же важные особенности, которые нужно учитывать при выборе.
https://tproger.ru/articles/django-vs-fastapi-v-2025-godu--kakoj-frejmvork-vybrat-
#бэкенд #python #django #fastapi
Какое из следующих утверждений о всплытии (hoisting) в JavaScript является верным?
Anonymous Quiz
7%
Только переменные, объявленные с помощью let, подвергаются всплытию.
24%
Переменные и функции полностью инициализируются до выполнения кода.
55%
Объявления функций поднимаются на вершину своей области видимости, а выражения функций — нет.
13%
Константы, объявленные с const, подвергаются всплытию и инициализируются со значением undefined.
CSR, SSG, SSR — виды рендеринга приложений на примерах
Сегодня используется три основных способа рендеринга страницы: CSR — рендеринг на стороне клиента, SSG — генерация статического сайта и, наконец, SSR — рендеринг на стороне сервера. У каждого из этих подходов есть свои плюсы, минусы и важные особенности.
В статье автор рассказал и показал их основные различия, кейсы использования и практические примеры:
https://habr.com/ru/companies/alfa/articles/725626/
#фронтенд
Сегодня используется три основных способа рендеринга страницы: CSR — рендеринг на стороне клиента, SSG — генерация статического сайта и, наконец, SSR — рендеринг на стороне сервера. У каждого из этих подходов есть свои плюсы, минусы и важные особенности.
В статье автор рассказал и показал их основные различия, кейсы использования и практические примеры:
https://habr.com/ru/companies/alfa/articles/725626/
#фронтенд