Javascript
JavaScript - это канал, посвященный языку программирования JavaScript. Здесь вы найдете полезные материалы, обучающие ресурсы и интересные статьи, помогающие расширить знания и навыки в области JavaScript. Присоединяйтесь к нам, чтобы углубить свое понимание этого важного языка программирования.
Тетрис на Angular и Akita
Отличная идея для пет-проекта)
@javascriptv
// Получаем нужный элемент
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
Инструмент на Vue.js для презентации основной информации по GitHub-профилю.
Отличная идея для пет-проекта, кстати
@javascriptv
Разработчики линтера ESLint рассказали о релизе версии 9.0. Команда проекта исправила известные ошибки и добавила новые функции. Кроме того, линтер теперь не поддерживает работу с Node.js 18.18.0 и 19.
@javascriptv
⚡️ Лучшего дизайна для ресторана больше не будет.
Меню для сайта, в виде... туалетной бумаги.
https://paper.cerpow.com/
@javascriptv
• 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
В JavaScript одним из самых запутанных понятий является поведение ключевого слова this в стрелочной и обычной функциях.
Что ж, попробуем разобраться в этом на нескольких примерах.
Прежде чем перейти к рассмотрению примеров, необходимо иметь в виду два момента.this в обычной функции всегда зависит от того, "как вызывается функция".this в стрелочной функции всегда зависит от того, "где определена функция".
@javascriptv
// 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
Алгоритмы
Полный список алгоритмов и структур данных на JavaScript с объяснениями и примерами. Содержание организовано по уровню подготовки: B (начинающий) и A (продвинутый).
Лучшие практики работы с Node
Node JS - одна из наиболее широко используемых технологий в отрасли. Репозиторий ниже содержит актуальный список лучших практик, которым вы можете следовать.
33 концепции JS
Репозиторий описывает: "33 концепции JavaScript, которые должен знать каждый разработчик". Ссылки, видео, статьи или книги поддерживают эти концепции.
Чистый код JavaScript
В мире программирования существует известная книга под названием "Чистый код". Данное хранилище является адаптацией этих концепций чистого кода, но для JavaScript.
Изобретательный NodeJS
Этот репозиторий GitHub содержит список инструментов, пакетов, учебников, статей, видео и многого другого для вашего следующего проекта Node.
Шпаргалка по современному JS
Определенно, это тот репозиторий, который можно добавить в закладки и обратиться к нему позже, когда возникнет необходимость.
Лучшие методы тестирования JavaScript
Обновленный, полный список лучших практик для написания тестов на JavaScript и Node JS.
@javascriptv
Модули в Javascript — интересная тема, которую к сожалению не все хорошо понимают. При этом она регулярно всплывает на собеседованиях, поэтому разобраться в этом желательно побыстрее.
В данной статье мы рассмотрим все виды модулей, посмотрим на их плюсы и минусы, а также разберем как бандлеры разгребали бесконечное число импортов и экспортов модулей.
План статьи:
├╼ IIFE (Immediately-Invoked Function Expression)
├╼ CommonJS
├╼ Асинхронные импорты
├╼ AMD (Asynchronous Module Definition)
├╼ Динамический импорт
├╼ Реализация асинхронности и Require.js
├╼ UMD (Universal Module System)
├╼ Обратная совместимость и SystemJS
╰╼ ES6 и его модули
@javascriptv
Игра «Жизнь» Конвея на максималках
@javascriptv
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.
Веб-браузеры предоставляют 2 основных механизма для хранения данных на клиентской стороне — localStorage и sessionStorage. Они позволяют сохранять данные в браузере и использовать их позже.
В этой статье мы рассмотрим разницу между localStorage и sessionStorage, их методы работы и примеры использования.
├╼ Сохранение данных в localStorage
├╼ Получение данных из localStorage
├╼ Удаление данных из localStorage
╰╼ Очистка localStorage
├╼ Сохранение данных в sessionStorage
├╼ Получение данных из sessionStorage
├╼ Удаление данных из sessionStorage
╰╼ Очистка sessionStorage
@javascriptv
Похожие
