Шарите в Git? Давайте проверим

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

Пройти тест

#тест

Как создавать сложные расширения Chrome

Создать сложное расширение для браузера не так-то просто, особенно для новичков.

Но не волнуйтесь. Это руководство покажет вам, как сделать полнофункциональное расширение для Chrome на реальном примере!

В итоге у вас получится расширение для сохранения изображения с любых сайтов в ваш сервис через API.

#extensions #chrome

Немного безумия вам в ленту

Нашёл для вас библиотеку, которая позволяет писать JavaScript код внутри Python. PythonMonkey — это движок JS от Mozilla, который встроили прямо в Python Runtime.

Что делать с этим безумием, решайте сами, а мы оставим ссылку на проект: https://github.com/Distributive-Network/PythonMonkey

#ненормальноепрограммирование #javascript #python

CBLT — безопасный, быстрый и минималистичный веб-сервер на языке программирования Rust

Rust не имеет аналогов Nginx, Lighttpd, Caddy, HAProxy, Apache, Tomcat, Jetty и т.д. Все эти веб-сервера написаны на C, Go, Java и других языках. Как тогда написать свой веб-сервер на Rust без всех этих технологий?

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

#rust #бэкенд

Интерактивная галерея полароид-фото

Это классная идея для пет-проекта, который вы сможете повторить самостоятельно. Автор написал проект на ванильном CSS и JavaScript.

Посмотреть код можно по ссылке.

#codepen #javascript

Лучший способ создания паттерна проектирования Singleton в JavaScript и TypeScript

Паттерн проектирования Singleton гарантирует, что у класса есть только один экземпляр и предоставляет глобальную точку доступа к этому экземпляру. Этот паттерн полезен, когда необходим именно один объект для координации действий в системе.

В этой статье собраны эффективные методы реализации паттерна Singleton в JavaScript и TypeScript.

#паттерны #javascript #typescript

У CSS теперь есть свой официальный логотип

Его выбрали по итогам голосования, организованного рабочей группой CSS-Next.

Почитать подробнее можно здесь.

#новости #css

screenshot-to-code | Генерируем веб-приложение по скриншоту / Figma-концепту

Простой инструмент для преобразования скриншотов, макетов и дизайнов Figma в чистый, функциональный код с использованием ИИ. Поддерживает Claude Sonnet 3.5 и GPT-4o.

Цена: бесплатно
Репозиторий проекта

А какие OCR вы используете? Поделитесь в комментариях.

@neuro_channel

Признавайтесь, как часто у вас такое?

Для чего используется stopPropagation()

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

При клике по вложенному контейнеру в консоль выводится сообщение «Внутренний контейнер». Если убрать event.stopPropagation(), то при клике по вложенному контейнеру, в консоль будут выведены оба сообщения.

#основы

Anchoreum: Новая игра для изучения CSS

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

Пройти бесплатно можно по ссылке: https://anchoreum.com/

#css

Как разобрать HTML в JavaScript

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

Решение заключается в автоматизации процесса анализа, извлечения и преобразования необработанных данных в структурированный, легко читаемый формат. Этот процесс известен как синтаксический анализ HTML, и в этой статье вы узнаете, как это сделать с помощью JavaScript.

#javascript #html #парсинг

Позиционируем плавающие элементы без лишних сложностей

В этом нам поможет JavaScript-библиотека Floating UI. Она не только упрощает размещение элементов в нестандартном месте, но и помогает добавлять им интерактивность.

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

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

#библиотека #javascript

Как подросток превратил Twitter в личную машину для кражи денег?

Представьте: аккаунты Илона Маска, Билла Гейтса, Джеффа Безоса и даже Apple начинают публиковать странные твиты про биткоины.

Мир в шоке, миллионы людей в недоумении, а за всем этим стоит... 17-летний парень.

Как он провернул крупнейший взлом соцсетей в истории? Кто ему помогал? И почему даже опытные хакеры аплодировали этой дерзости?

В новом выпуске подкаста «АЙТИ КРАЙМ» мы разбираем взлом, который поставил под удар доверие к крупнейшей платформе и заставил весь мир задуматься: а насколько безопасны наши любимые соцсети?

Слушайте и смотрите новый выпуск:

Яндекс.Музыка
Apple Music
Spotify
YouTube
Telegram

#подкаст #айтикрайм

Микрофронтенды: build time vs runtime

Александр Гончаров на прошлогодней конференции FrontendConf поделился своим опытом и рассказал почему микрофронтенд — логичное архитектурное развитие индустрии, а также какие принципиальные различия и сходства подходов build time и runtime.

Если ещё не смотрели, то стоит это исправить. Мы для вас принесли доклад из YouTube сюда, чтобы у вас не возникало проблем с загрузкой.

#доклад #микрофронтенд

Наглеть или вести себя поскромнее?

❤️/🗿

Как работает всплытие в 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