Javascript

🖥 Remove the Adblock Popup from YOUTUBE Данный репозиторий содержит JS-скрипт, предназначенный для удаления назойливого всплывающего окна "Блокировщик рекламы запрещен на Youtube". Для начала работы следуйте приведенным в репо инструкциям. Проект также предлагаем незаметный способ пропускать рекламу, если вы заблокированы в видеоплеере. • Github @javascriptv

Верстаешь? Оцени 7 причин пройти наш бесплатный интенсив по Frontend-разработке: 1. Сверстаешь веб-сайт на HTML + CSS; 2. Оживишь страницу с помощью JavaScript; 3. Используешь фронтенд-фреймворк Angular; 4. Подключишь Backend и загрузишь сайт на хостинг; 5. Получишь советы по доработке своего проекта; 6. Добавишь в портфолио 1 качественный проект; 7. Получишь в подарок чек-лист «45 мест для поиска работы». А главное, ты проведёшь 7 дней в приятной компании Fullstack-разработчика с 10-летним стажем – Романа Чернова. 👉 Проскочить на интенсив бесплатно Начинаем 17 октября. Реклама. ИП Чернова О. А., ИНН:771399721044, erid:LjN8JzzRJ

🔥 Дайджест полезных материалов из мира Javascript за неделю Почитать: — Современный junior frontend developer на двух работах уровня middle с общей ЗП 400к. Реальность ли в 2023 году? — Wolfram Language JavaScript Frontend — «Нейрогород»: игра на знание JavaScript про фронтендерские баги — Мои первые шаги в создании браузерных 2D игр на чистом JavaScript + Canvas. Часть 1. Прототип — Сайд эффект реактивности и апдейта компонента во Vue 3 — Вышел Chrome 118 — Что быстрее: Animated + useNativeDriver или Reanimated? — Как внедрить гайд по стилю кода в проект — My #30DayCodingChallenge — 🔄 Displaying React Components in Reverse Order — Easily style active links in Tanstack Router — Weekly Dev Findings 9 — 🚀 Supercharge Your Next.js App with Stunning Images! Learn the Ultimate Cloudinary Image Upload Hack 🔥 — Latest Newsletter: Exhausted (Issue #136) — Refactoring: Enhancing Code for Better Maintainability — Vanilla-Tilt Js — Understanding JavaScript Collections: Arrays, Sets, Maps, and More — Junior to Senior Web Developer Roadmap: Breakdown Посмотреть: 🌐 How To Create The YouTube Home Page With Tailwind, React, and TypeScript (⏱ 01:49:08) Хорошего дня!

🖥 Flipping Neon - Анимированная сцена, выполненная на чистом CSS, без использования JavaScript https://codepen.io/danwilson/pen/abqGjVp @javascriptv

Добавьте React в резюме за 3 месяца — на курсе Яндекс Практикума. ◾️ Учитесь на практике В вашем портфолио будут: — веб-приложение космической бургерной с главной страницей, личным кабинетом и лентой заказов; — своё веб-приложение на React и Typescript с юнит-тестами. ◾️ Совмещайте с работой — Расписания нет, главное — вовремя сдавать проекты и уделять учёбе 20-25 часов в неделю. — Тренажёр и учебник работают 24/7.  — Если что-то пойдёт не так — можно взять паузу и продолжить с другим потоком. ◾️ Набирайтесь опыта — Наставники — практикующие разработчики — помогут со сложными темами. — Старшие программисты проведут код-ревью и поделятся опытом. Курс можно оплатить в тенге и оформить рассрочку. → Начать учиться

🖥 Cinematic Animation — красивая кинематографическая анимация. Реализована с помощью CSS и JavaScript https://codepen.io/team/keyframers/pen/LYRmXBX @javascriptv

Это — Дмитрий Безуглый, у него огромный опыт во фронтенд-разработке. Кто, если не он, научит вас делать серьёзный фронтенд? Дима участвовал в принятии решений по разработке на все команды Вконтакте, с нуля запустил рекламный кабинет для новичков и выстроил множество процессов в команде как тимлид. А если вы используете Яндекс.Трекер, то знайте, его интерфейсы – тоже работа Димы. Сейчас Дима — CTO Chrome Extension Frogly. Сервис помогает в изучении иностранных языков. Диме нравится передавать свой опыт другим — у него был бесплатный курс, личные консультации. Теперь он собрал весь свой опыт воедино и вместе с друзьями сделал программу с огромным количеством практики и инсайтов индустрии. Если вы junior+ фронтендер и хотите научиться работать над масштабными проектами, вам сюда! Записывайтесь на курс до 19 октября, а по промокоду JAVASCRIPTTV вы получите скидку 5% Кстати, начать можно бесплатно [Начать учиться] Реклама. ООО "Карпов Курсы". Erid: LjN8K56mH

Transparent Sidebar | CSS - Выдвижное меню с кнопками + карточки https://codepen.io/ecemgo/pen/yLGeKXE @javascriptv

7 дней бесплатного обучения frontend-разработке! Организовали для тебя бесплатный интенсив по frontend-разработке с практикой и куратором. Что будет: 1️⃣ Создание веб-сайта на HTML и CSS Мы научим тебя создавать стильные и функциональные веб-страницы с использованием современных технологий. 2️⃣ Оживление страницы с помощью JavaScript Узнаешь, как добавить интерактивность и динамичность в свои проекты. 3️⃣ Использование фронтенд-фреймворка Angular Узнаешь, как использовать этот мощный инструмент для создания масштабируемых и эффективных веб-приложений. 4️⃣ Подключение Backend и загрузка сайта на хостинг Мы научим тебя основам работы с Backend'ом и покажем, как развернуть проект на хостинге. 5️⃣ Советы по доработке проекта Получишь советы от опытных разработчиков, чтобы улучшить свой проект и достичь более высокого уровня качества. 🔥 А главное, ты проведёшь 7 дней в приятной компании Fullstack-разработчика с 10-летним стажем – Романа Чернова. 👉 Участвуй бесплатно Реклама. ИП Чернова О. А., ИНН:771399721044, erid:LjN8JzgTd

🔥 Дайджест полезных материалов из мира Javascript за неделю Почитать: — Миграция с Webpack и react-scripts на Vite: Путь к Быстрому и Легковесному React — Юриспруденция и программирование: что общего? — Heretic: full stack фреймворк на основе Marko.js — Как типизировать Vuex Store — Кулинарный гид по Vue.js: всё о props — Как декораторы могут упростить разработку веб-форм — React Fiber & Concurrency Part 2 (2) — DOMPurify，增加網站對 XSS 攻擊的防護力 — After changing the usage of axios, my work efficiency increased by 3 times — Latest Newsletter: Walled Gardens and Reality Interfaces (Issue #135) — I need issues for my Repo 😐 — The Ultimate Guide to Java Testing Frameworks: JUnit and TestNG — Buy Google Voice Accounts — Veracity Accounting in Canada: Navigating Financial Clarity — Concrete Estimator Canada and USA: Calculating Costs with Precision — Turning my codepen into an actual app - Brick 1100 — Connect With Customers From Email List on LinkedIn With Automation Посмотреть: 🌐 How To Create 3 Levels Of React Image Sliders - Beginner, Intermediate, Expert (⏱ 37:25) 🌐 This New CSS Property Is Simple Yet Useful (⏱ 00:54) Хорошего дня!

Card — анимированная карточка. Реализована с помощью CSS и JavaScript https://codepen.io/BlogFire/pen/yLRgbwO @javascriptv

Movie Poster Interaction - Стильные карточки с анимацией и эффектом размытия. https://codepen.io/pleasedonotdisturb/pen/oNQLVXB @javascriptv

Привет, это AvitoTech! Раннер Emcee для параллельного тестирования теперь работает через облако на наших серверах. Как мы в несколько шагов обезопасили трафик и данные пользователей, рассказываем в статье. Найти её, сам раннер и ещё много полезного можно у нас на канале Реклама ООО "Авито Тех", ИНН 9710089440 erid: LdtCK8KDB

🖥 8 продвинутых вопросов для собеседования по JavaScript В этой статье мы детально рассмотрим важнейшие вопросы для собеседования по JavaScript. Надеюсь, что скрупулезный разбор каждого вопроса поможет вам усвоить основные концепции и ответить на другие подобные вопросы на собеседованиях. 1. Подробнее о свойствах операторов + и — console.log(1 + '1' - 1); Можете ли вы предположить, как поведут себя операторы + и — в ситуациях, подобных приведенной выше? Когда JavaScript имеет дело с выражением 1 + '1', то обрабатывает его с помощью оператора +. Интересным свойством этого оператора является то, что он предпочитает конкатенацию строк, когда один из операндов является строкой. В нашем случае ‘1’ является строкой, поэтому JavaScript неявно преобразует числовое значение 1 в строку. Следовательно, 1 + '1' становится '1' + '1', в результате чего получается строка '11'. Теперь у нас есть выражение '11' - 1. Поведение оператора — прямо противоположно. Приоритет отдается числовому вычитанию независимо от типа операндов. Если операнды не относятся к числовому типу, JavaScript выполняет неявное принуждение для их преобразования в числа. В данном случае '11' преобразуется в числовое значение 11, и выражение упрощается до 11 - 1. Собираем все вместе: '11' - 1 = 11 - 1 = 10 2. Дублирование элементов массива Рассмотрите следующий JavaScript-код и постарайтесь найти в нем какие-либо проблемы: function duplicate(array) { for (var i = 0; i < array.length; i++) { array.push(array[i]); } return array; } const arr = [1, 2, 3]; const newArr = duplicate(arr); console.log(newArr); В этом фрагменте кода требуется создать новый массив, содержащий дублированные элементы входного массива. При первоначальном рассмотрении кажется, что код создает новый массив newArr, дублируя каждый элемент исходного массива arr. Однако в самой функции duplicate возникает критическая проблема. Функция duplicate использует цикл для перебора каждого элемента конкретного массива. Но внутри цикла она добавляет новый элемент в конец массива, используя метод push(). В результате массив каждый раз становится длиннее, что создает проблему, при которой цикл никогда не останавливается. Условие цикла (i < array.length) всегда остается истинным, поскольку массив продолжает увеличиваться. В результате цикл может продолжаться бесконечно, что приводит к зацикливанию программы. Чтобы решить проблему бесконечного цикла, вызванного ростом длины массива, можно перед входом в цикл сохранить начальную длину массива в переменной. Затем эту начальную длину можно использовать в качестве ограничения для итерации цикла. Таким образом, цикл будет выполняться только для исходных элементов массива и перестанет зависеть от роста массива за счет добавления дубликатов. Вот модифицированная версия кода: function duplicate(array) { var initialLength = array.length; // Сохранение начальной длины for (var i = 0; i < initialLength; i++) { array.push(array[i]); // Дублирование каждого элемента } return array; } const arr = [1, 2, 3]; const newArr = duplicate(arr); console.log(newArr); В результате дублированные элементы окажутся в конце массива, и цикл не будет бесконечным: [1, 2, 3, 1, 2, 3] 📌Читать дальше @javascriptv

🖼 Почему разрабатывать веб-интерфейсы так сложно? Разработка веб-интерфейсов кажется простой, но только на первый взгляд. Если углубиться в нее, обнаруживается множество сложностей, озадачивающих даже опытных специалистов. Эта статья поможет вам разобраться с рядом проблем разработки веб-интерфейсов, начиная с несоответствия между веб-языками и современными требованиями к пользовательскому интерфейсу и заканчивая сложными вопросами управления данными и вызовами асинхронных API. Кроме того, мы исследуем так называемые “нерезультативные пути” (“unhappy paths”), часто упускаемые из виду. К ним относятся состояния загрузки, обработка ошибок, а также более широкие архитектурные аспекты, включающие безопасность, производительность и доступность. Читать

🖥 Variable font animation — анимация переменных шрифтов. Реализован с помощью CSS и JavaScript. #анимация #css #javascript #текст https://codepen.io/michellebarker/pen/bPEWGK @javascriptv

🔥 Дайджест полезных материалов из мира Javascript за неделю Почитать: — Увеличиваем свою производительность в WebStorm / PhpStorm c помощью шаблонов — Пристальный взгляд на отладку JavaScript приложений — Один компонент, 20+ фич, A/B-тесты: Поможет ли машина состояний? — Как добавить несколько товаров в Shopify корзину одним кликом? — 15 лучших бесплатных курсов по Linux — Как мы создаём Squadus. Реализуем «прыжок к сообщению» в мобильной версии — React 18: что поменялось — Restyle как новый стандарт для создания UI в React Native — React Fiber & Concurrency Part 1 (2) — Svelte: Знакомство с рунами — Tailwind не только для MVP — Flaco - Personal multipage theme — Optimising Architectural Excellence: Must-Have Tools for Success! — Exploring React's Data Retrieval Methods — Mastering React.js: Top 20 Interview Questions You Need to Know — Latest Newsletter: Bitcoin Butterfly (Issue #134) — Send email confirmation in Strapi — ALTER 26" 002S MODEL CYCLE | Alter Bikes — 10 Best Tools and Practices for Boosting Code Quality in Node.js — How to Create a Chat App With Bun Using WebSockets — Demystifying TypeScript Generics with Simple Examples Посмотреть: 🌐 CSS nth-child Just Got 100x Better (⏱ 00:56) 🌐 Clean Code Is Killing Your Projects (⏱ 09:20) Хорошего дня! @javascriptv

🖥 Neumorphic Liquid Slider Анимация на чистом Javascript. В JS устанавливаются значения и запускаются анимации. https://codepen.io/konstantindenerz/pen/qBMvXNK @javascriptv

🖥 Генераторы и итераторы в JavaScript В языке JavaScript итераторы и генераторы являются мощными инструментами, позволяющими разработчикам контролировать итерацию и поток данных. Вместе эти функции образуют впечатляющий дуэт, позволяющий писать лаконичный, эффективный и гибкий JavaScript-код. В JavaScript функция-итератор — это уникальная функция, возвращающая объект-итератор. Объект-итератор — это объект, который через метод next() возвращает объект с двумя свойствами: value и done. Свойство value представляет собой следующее значение в последовательности, а свойство done указывает, достиг ли итератор конца последовательности. Функции-итераторы могут использоваться для перебора наборов данных, таких как массивы и объекты. Ниже приведен пример функции-итератора, выполняющей итерацию по массиву: function Iterator(array) { let nextIndex = 0; return { next: function () { if (nextIndex < array.length) { return { value: array[nextIndex++], done: false, }; } else { return { value: undefined, done: true, }; } }, }; } const array = [1, 2, 3, 4, 5]; const arrayValue = Iterator(array); console.log(arrayValue.next()); // { value: 1, done: false } console.log(arrayValue.next()); // { value: 2, done: false } console.log(arrayValue.next()); // { value: 3, done: false } console.log(arrayValue.next()); // { value: 4, done: false } console.log(arrayValue.next()); // { value: 5, done: false } console.log(arrayValue.next()); // { value: undefined, done: true } В приведенном выше коде определена функция Iterator, которая принимает в качестве аргумента массив и возвращает объект итератора. Объект итератора через метод next возвращает следующий элемент массива и обновляет внутреннюю переменную nextIndex для отслеживания индекса массива. Метод next проверяет, меньше ли nextIndex длины массива. Если это так, то метод возвращает объект со значением массива в позиции nextIndex и устанавливает свойство done в false. После этого переменная nextIndex увеличивается на единицу. Если nextIndex больше или равно длине массива, то метод next устанавливает свойство done в true. 📌Читать дальше @javascriptv

⚡ 5 лучших шаблонов проектов React Native на GitHub для быстрой разработки приложений 📱 Список полезных ресурсов, которые ускорят разработку приложений! Эти шаблоны упрощают процесс разработки, позволяя вам быстро приступить к работе над приложениями👇 1. React Native Elements: https://github.com/react-native-elements/react-native-elements 2. Ignite CLI Boilerplate: https://github.com/infinitered/ignite 3. React Native Paper: https://github.com/callstack/react-native-paper 4. UI Templates: https://github.com/Aashu-Dubey/React-Native-UI-Templates 5. React Native Boilerplate: https://github.com/thecodingmachine/react-native-boilerplate @javascriptv