Javascript

🖥 Как определить что элемент в зоне видимости окна браузера? ▶️Есть элемент, и если пользователь видит его, то нужно отметить элемент как просмотренный. Как определить, что этот элемент в зоне видимости? ▶️В целом, делается несложно:

// Получаем нужный элемент
var element = document.querySelector('#target');

var Visible = function (target) {
  // Все позиции элемента
  var targetPosition = {
      top: window.pageYOffset + target.getBoundingClientRect().top,
      left: window.pageXOffset + target.getBoundingClientRect().left,
      right: window.pageXOffset + target.getBoundingClientRect().right,
      bottom: window.pageYOffset + target.getBoundingClientRect().bottom
    },
    // Получаем позиции окна
    windowPosition = {
      top: window.pageYOffset,
      left: window.pageXOffset,
      right: window.pageXOffset + document.documentElement.clientWidth,
      bottom: window.pageYOffset + document.documentElement.clientHeight
    };

  if (targetPosition.bottom > windowPosition.top && // Если позиция нижней части элемента больше позиции верхней чайти окна, то элемент виден сверху
    targetPosition.top < windowPosition.bottom && // Если позиция верхней части элемента меньше позиции нижней чайти окна, то элемент виден снизу
    targetPosition.right > windowPosition.left && // Если позиция правой стороны элемента больше позиции левой части окна, то элемент виден слева
    targetPosition.left < windowPosition.right) { // Если позиция левой стороны элемента меньше позиции правой чайти окна, то элемент виден справа
    // Если элемент полностью видно, то запускаем следующий код
    console.clear();
    console.log('Вы видите элемент :)');
  } else {
    // Если элемент не видно, то запускаем этот код
    console.clear();
  };
};

// Запускаем функцию при прокрутке страницы
window.addEventListener('scroll', function() {
  Visible (element);
});

// Запустим функцию сразу
Visible (element);

🟡

body {
  height: 6000px;
}

#target {
  margin-top: 3000px;
}

🟡

<div id="target">Элемент</div>

@javascriptv

🖥 Визуализация статистики по профилю GitHub Инструмент на Vue.js для презентации основной информации по GitHub-профилю. Отличная идея для пет-проекта, кстати 🖥 GitHub 19.8k⭐️ @javascriptv

🖥 Вышло обновление ESLint 9.0 Разработчики линтера ESLint рассказали о релизе версии 9.0. Команда проекта исправила известные ошибки и добавила новые функции. Кроме того, линтер теперь не поддерживает работу с Node.js 18.18.0 и 19. 📎 Подробнее @javascriptv

⚡️ Лучшего дизайна для ресторана больше не будет. Меню для сайта, в виде... туалетной бумаги. https://paper.cerpow.com/ @javascriptv

👩‍💻 Большая подборка вопросов с собеседований Vue.js • 50+ основных вопросов и ответов на собеседовании по Vue.js: от простого до продвинутого • Список из 300 вопросов и ответов для интервью по VueJS ru • List of 300 VueJS Interview Questions And Answers en • Топ-100s Вопросов с собеседований Vue.js • Собеседование на Vue js разработчика. 50 вопросов для подготовки к собеседованию по Vue. • Открытое собеседование Vue.js | Junior Frontend-разработчик • Vue.js вопросы с собесов. • Публичное собеседование фронтендера на Vue с компанией Timeweb Cloud 🔥 Делитесь подборкой с коллегами, набираем 100 лайков и выкладываем подборку по Angular. Прошлые подборки: - 100 вопросов по React для подготовки к собеседованию - Большая подборка вопросов с собеседований: Frontend, Javascript, React, Vue и многое другое. @javascriptv

🖥 Поведение ключевого слова "this" в стрелочной функции и в нормальной функции В JavaScript одним из самых запутанных понятий является поведение ключевого слова this в стрелочной и обычной функциях. Что ж, попробуем разобраться в этом на нескольких примерах. Прежде чем перейти к рассмотрению примеров, необходимо иметь в виду два момента. 🟡Ключевое слово this в обычной функции всегда зависит от того, "как вызывается функция". 🟡Ключевое слово this в стрелочной функции всегда зависит от того, "где определена функция". ▶️ Переходим к примерам @javascriptv

🖥 Шаблон декомпозиции Model-View-ViewModel ⏩Отображения работают с моделями через посредников, которые трансформируют абстракции предметной области в абстракции отображения и обратно. ViewModel также выступает хранилищем состояния отображения, не связанного с предметной областью.

// View
<li class="User_card" model="User_card_model">
  <img src={ image } />
  <p>{ message }</p>
</li>

// ViewModel
class User_card_model {
  user = User.current
  get image() {
    return this.user.avatar
  }
  get message() {
    return this.user.nickname
  }
}

// Modelhttps://habrastorage.org/getpro/habr/upload_files/184/ef6/b75/184ef6b7510290ecd0acc360ed78df5b.png
class User {
  avatar: string
  nickname: string
  static current = new User
}

Плюсы: — Отображение может использовать произвольные вьюмодели. — Легко добавлять новые отображения, не меняя ни модели, ни вьюмодели. — Изменение интерфейса модели или отображения требует изменения только лишь вьюмодели. — Одну и ту же вьюмодель можно шарить между несколькими отображениями. Минусы: — Для отображения разных моделей необходимо дублировать код отображения и вьюмодели. — Трёх слоёв слишком мало на больших масштабах. 📎 Читать подробнее @javascriptv

Расти от рядового разработчика до архитектора: Слёрм набирает 5 поток курса по архитектуре приложений 🌀 Что такого крутого умеет делать архитектор? Он пишет чистые и управляемые проекты, создает поддерживаемые системы и может организовывать код. И всему этому Слёрм учит на курсе «Архитектура приложений». Стартуем 29 апреля, записаться можно здесь Чему вы сможете научиться на курсе: 🟠Вы последовательно пройдете от основ до полноценных архитектурных диаграмм, 🟠Будете рефакторить код, проводить архитектурные границы, анализировать системы. ➕ В Слёрме не просто учат инструментам: здесь помогают выработать мышление архитектора. Спикеры курса: Александр Вагнер, Senior Software Engineer в Bidease Более 10 лет в IT, построил с нуля компанию и платформу Torrow. Вячеслав Гагарин, Старший разработчик ПО в Retail Rocket, Более 7 лет опыта в IT. Этот курс для тех, кто хочет систематизировать свои знания и готов выйти на новый профессиональный уровень: не просто заниматься разработкой, но и проектировать архитектуру. Курс длится 3 месяца. Вы будете работать с реальными практическими заданиями и разбирать технические моменты. Эксперты курса будут отвечать на все вопросы по обучению: и в групповом чате, и на 3 онлайн-встречах. ➡️ Подробную программу смотрите на сайте Реклама ООО «Слёрм» ИНН 3652901451

🖥 Подборка репозиториев GitHub для разработчиков JavaScript Алгоритмы Полный список алгоритмов и структур данных на JavaScript с объяснениями и примерами. Содержание организовано по уровню подготовки: B (начинающий) и A (продвинутый). 🖥 GitHub Лучшие практики работы с Node Node JS - одна из наиболее широко используемых технологий в отрасли. Репозиторий ниже содержит актуальный список лучших практик, которым вы можете следовать. 🖥 GitHub 33 концепции JS Репозиторий описывает: "33 концепции JavaScript, которые должен знать каждый разработчик". Ссылки, видео, статьи или книги поддерживают эти концепции. 🖥 GitHub Чистый код JavaScript В мире программирования существует известная книга под названием "Чистый код". Данное хранилище является адаптацией этих концепций чистого кода, но для JavaScript. 🖥 GitHub Изобретательный NodeJS Этот репозиторий GitHub содержит список инструментов, пакетов, учебников, статей, видео и многого другого для вашего следующего проекта Node. 🖥 GitHub Шпаргалка по современному JS Определенно, это тот репозиторий, который можно добавить в закладки и обратиться к нему позже, когда возникнет необходимость. 🖥 GitHub Лучшие методы тестирования JavaScript Обновленный, полный список лучших практик для написания тестов на JavaScript и Node JS. 🖥 GitHub @javascriptv

🖥 Факт дня — модули в Javascript Модули в Javascript — интересная тема, которую к сожалению не все хорошо понимают. При этом она регулярно всплывает на собеседованиях, поэтому разобраться в этом желательно побыстрее. В данной статье мы рассмотрим все виды модулей, посмотрим на их плюсы и минусы, а также разберем как бандлеры разгребали бесконечное число импортов и экспортов модулей. План статьи: ├╼ IIFE (Immediately-Invoked Function Expression) ├╼ CommonJS ├╼ Асинхронные импорты ├╼ AMD (Asynchronous Module Definition) ├╼ Динамический импорт ├╼ Реализация асинхронности и Require.js ├╼ UMD (Universal Module System) ├╼ Обратная совместимость и SystemJS ╰╼ ES6 и его модули ▶️ Вперед @javascriptv

🖥 Симуляция простейшей жизни на JavaScript Игра «Жизнь» Конвея на максималках 📎 YouTube 📎 Проект на GitHub @javascriptv

🖥 Взгляд на асинхронность в JavaScript: роль Event Loop, промисов и async/await ⏩В этой статье мы сосредоточимся на ключевых элементах асинхронного программирования в JS: Event Loop, микро- и макро-задачи, Event Bus, промисы и синтаксический сахар async/await. Разберемся, как эти концепции взаимодействуют между собой и как их использование помогает нам создавать более эффективные и отзывчивые веб-приложения. ⏩Порядок такой: начнем с изучения роли Event Loop — механизма, ответственного за управление выполнением асинхронного кода. Затем мы перейдем к рассмотрению микро- и макро-задач, которые играют важную роль в управлении порядком выполнения операций. После этого мы ознакомимся с промисами и синтаксическим сахаром async/await, которые значительно упрощают работу с асинхронным кодом и делают его более читаемым и понятным. Уверен, будет полезно 📎 Статья @javascriptv

24 апреля в 19:00 встречаемся на Alfa Backend Stories #3 в Москве и онлайн. Обсудим ИИ и другие инструменты, которые помогают в написании кода: Андрей Свиридов, ведущий разработчик, поделиться советами о том, как повысить качество кода в приложениях Дмитрий Сошников, технический руководитель лаборатории генеративного ИИ Школы дизайна НИУ ВШЭ и консультант Yandex Cloud, расскажет о современном искусственном интеллекте в облаке и покажет, как YandexGPT может использоваться разработчиками для решения прикладных задач Антон Гращенков, в режиме реального времени покажет, как локально установить и настроить ИИ, а также как с его помощью писать код Обещаем не стирать вам память, если вы придёте в костюме, в образе агентов фильма «Люди в чёрном» Регистрация Еще больше полезного в комьюнити: @alfabackend erid: LjN8KcJxp Реклама. АО «Альфа-Банк». ИНН 7728168971.

🖥 Работа с хранилищем веб-браузера: localStorage и sessionStorage в JavaScript Веб-браузеры предоставляют 2 основных механизма для хранения данных на клиентской стороне — localStorage и sessionStorage. Они позволяют сохранять данные в браузере и использовать их позже. В этой статье мы рассмотрим разницу между localStorage и sessionStorage, их методы работы и примеры использования. 🟡localStorage ├╼ Сохранение данных в localStorage ├╼ Получение данных из localStorage ├╼ Удаление данных из localStorage ╰╼ Очистка localStorage 🟡sessionStorage ├╼ Сохранение данных в sessionStorage ├╼ Получение данных из sessionStorage ├╼ Удаление данных из sessionStorage ╰╼ Очистка sessionStorage 📎 Статья @javascriptv

🖥 Мощная шпаргалка по JavaScript Затрагиваются все самые важные темы JS, а именно: ├╼ Типы данных ├╼ Продвинутая работа с функциями ├╼ Регулярные выражения ├╼ Свойства объекта, их конфигурация ├╼ Прототипы, наследование ├╼ Классы ├╼ Обработка ошибок ├╼ Промисы, async/await ├╼ Генераторы, продвинутая итерация ╰╼ Модули Мега удобно, что всё на одной странице, Ctrl + F — и сразу нашёл, что нужно 📎 Шпаргалка @javascriptv

🖥 Как вернуть значение из события или из функции обратного вызова? ▶️При попытке сделать вот так ничего не получается:

var result = "";

someInput.onchange = function() {
  result = someInput.value;
};

$.get("someapi", function (data) {
  result = data.foo;
});

some.api.call(42, function (data) {
  result = data.bar;
});

someDiv.textContent = result;

Почему-то в someDiv ничего не отображается. ▶️Проблема в том, что в коде нет операции ожидания. Ни подписка на событие, ни AJAX-вызов, ни даже вызов API не ждут поступления данных - а сразу же передают управление дальше. Поэтому строка someDiv.textContent = result; выполняется ДО того, как переменная result получит значение. Способов сделать это присваивание после получения значения несколько: — переместить присваивание внутрь — вынесение присваивания в именованную функцию — обратные вызовы (callbacks) — обещания (promises) — наблюдаемые значения (observables) в Knockout — наблюдаемые значения (observables) в MobX 📎 Подробнее об этом всём @javascriptv

Всё, что будет на митапе, останется на митапе 💥 24 апреля в 19:00 встречаемся на Alfa Backend Stories #3 в Москве и онлайн. Обсудим ИИ и другие инструменты, которые помогают в написании кода: Андрей Свиридов, ведущий разработчик, поделиться советами о том, как повысить качество кода в приложениях Дмитрий Сошников, технический руководитель лаборатории генеративного ИИ Школы дизайна НИУ ВШЭ и консультант Yandex Cloud, расскажет о современном искусственном интеллекте в облаке и покажет, как YandexGPT может использоваться разработчиками для решения прикладных задач Антон Гращенков, в режиме реального времени покажет, как локально установить и настроить ИИ, а также как с его помощью писать код Обещаем не стирать вам память, если вы придёте в костюме, в образе агентов фильма «Люди в чёрном» Регистрация Еще больше полезного в комьюнити: @alfabackend erid: LjN8Kbsmr Реклама. АО «Альфа-Банк». ИНН 7728168971.

⚡️ Топ-4 инструмента JavaScript для разработки ИИ 🟡1. AI.JSX AI.JSX, разработанный Fixie, — это динамический фреймворк, предназначенный для создания разговорных приложений на базе ИИ с использованием JavaScript и JSX, который специально адаптирован для проектов на базе React. Он выделяется среди инструментов для разработки ИИ благодаря надежной поддержке инжиниринга подсказок и легкой интеграции с внешними API. 🟡2. TensorFlow.js Являясь JavaScript-адаптацией известной библиотеки TensorFlow, созданной Google, TensorFlow.js предназначена специально для веб- и Node.js-сред, чтобы привнести возможности машинного обучения непосредственно в браузеры и приложения на стороне сервера. Одним из ключевых преимуществ TensorFlow.js является возможность запуска моделей МО непосредственно в браузере. 🟡3. Brain.js Brain.js предлагает простой и доступный способ реализации нейронных сетей на JavaScript, подходящий как для браузера, так и для среды Node.js. Ключевое потенциальное применение Brain.js — автоматизация таких процессов, как анализ текста, объединение PDF-документов, преобразование документов, анализ изображений и, в целом, решение любых задач, связанных с обработкой большого количества данных. 🟡4. Tabnine Tabnine — это помощник по завершению кода на базе ИИ, который значительно улучшает опыт написания кода. В частности, он ускоряет процесс разработки, активно поддерживая целостность кода. ИИ Tabnine изучает кодовую базу и предлагает соответствующие фрагменты кода, завершения функций и даже целые блоки кода на основе комментариев на естественном языке. @javascriptv

🖥 5 полезных JS-библиотек для анимации 🟡GSAP (GreenSock Animation Platform) GSAP даёт возможность анимировать буквально всё, к чему можно получить доступ с помощью JavaScript, включая SVG, общие объекты, холсты и многое другое. Библиотека очень производительная — примерно в 20 раз быстрее, чем jquery. Соответственно, особых лагов в приложении не будет. GSAP позволяет анимировать любое из свойств CSS одним из нескольких способов. При помощи библиотеки можно указать продолжительность анимации и задать ей определённые свойства. 🟡Anime.js Ещё одна отличная библиотека, которая предназначена для анимации CSS-свойств, SVG, DOM-атрибутов и JavaScript-объектов. В сжатом виде она весит всего 10 килобайт. Но при этом библиотека очень функциональна, у неё отличная документация и масса возможностей. 🟡React Spring Крайне полезна для создания анимаций, соответственно, в React-приложениях. Для этого у Spring есть масса хороших инструментов, позволяющих создавать плавные, отзывчивые и высокопроизводительные анимации с достаточно реалистичной физикой. 🟡Three.js Отличная open-source-библиотека для создания и отображения анимированной 3D-графики в браузерах. Она представляет собой набор инструментов для разработки трёхмерных сцен, объектов, камер и материалов. Плюс для управления освещением, тенями и анимацией. Скрипты Three.js могут использоваться совместно с элементом HTML5 CANVAS, SVG или WebGL. 🟡Popmotion Также предоставляет инструменты для анимации — на этот раз интерфейса. Написана библиотека на TypeScript и весит всего 4,5 Кб. Удобна тем, что любую функцию можно отдельно импортировать. Кроме того, она может работать вместе с любыми JavaScript-фреймворками, в браузере и Node. 📎 Подробнее Кстати, а какие JS-библиотеки для анимации вы регулярно используете? Пишите) @javascriptv

💡 Простой способ сохранения элемента видимым, но недоступным: на заметку фронтенд-разработчику ➡️ Поиграть можно здесь #css #tip by Shripal Soni