Javascript

Верстаешь? С 11 по 17 июля проводим бесплатный онлайн-интенсив по Frontend-разработке, где будем учить, как разрабатывать сайты и веб-приложения. Что будет: 1️⃣ Создание полноценного веб-сайта на HTML и CSS Мы научим тебя создавать стильные и функциональные веб-страницы с использованием самых современных технологий. 2️⃣ Оживление страницы с помощью JavaScript Узнаешь, как добавить интерактивность и динамичность в свои проекты. 3️⃣ Использование фронтенд-фреймворка Angular Узнаешь, как использовать этот мощный инструмент для создания масштабируемых и эффективных веб-приложений. 4️⃣ Подключение Backend и загрузка сайта на хостинг Мы научим тебя основам работы с Backend'ом и покажем, как развернуть свой проект на хостинге. 5️⃣ Советы по доработке проекта Получишь ценные советы от опытных разработчиков, чтобы улучшить свой проект и достичь более высокого уровня качества. 👉 Участвуй бесплатно 🚀

📌 18 продвинутых навыков JavaScript для старших инженеров-программистов 🔵Браузер ▪ Переход на полноэкранный режим function fullScreen() { const el = document.documentElement const rfs = el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen || el.msRequestFullscreen if(typeof rfs != "undefined" && rfs) { rfs.call(el) } } fullScreen() ▪ Выход из полноэкранного режима function exitScreen() { if (document.exitFullscreen) { document.exitFullscreen() } else if (document.mozCancelFullScreen) { document.mozCancelFullScreen() } else if (document.webkitCancelFullScreen) { document.webkitCancelFullScreen() } else if (document.msExitFullscreen) { document.msExitFullscreen() } if(typeof cfs != "undefined" && cfs) { cfs.call(el) } } exitScreen() ▪ Вывод страницы Чтобы вывести текущую страницу: window.print() ▪ Изменение стиля выводимого контента Чтобы при выводе страницы изменить текущий макет: <style> /* Используйте @media print, чтобы настроить стиль вывода */ @media print { .noprint { display: none; } } </style> <div class="print">print</div> <div class="noprint">noprint</div> ▪ Блокировка события закрытия Чтобы оградить пользователя от обновления или закрытия браузера, запустите событие beforeunload (некоторые браузеры не кастомизируют текстовой контент): window.onbeforeunload = function(){ return 'Are you sure you want to leave the haorooms blog？'; }; ▪ Запись экрана Чтобы сделать запись текущего экрана для ее передачи или загрузки: const streamPromise = navigator.mediaDevices.getDisplayMedia() streamPromise.then(stream => { var recordedChunks = [];// записанные видеоданные var options = { mimeType: "video/webm; codecs=vp9" };// Установите формат кодирования var mediaRecorder = new MediaRecorder(stream, options);// Инициализируйте экземпляр MediaRecorder mediaRecorder.ondataavailable = handleDataAvailable;// Установите обратный вызов, когда данные будут доступны (конец записи экрана) mediaRecorder.start(); // Фрагментация видео function handleDataAvailable(event) { if (event.data.size > 0) { recordedChunks.push(event.data);// Добавление данных, event.data - объект BLOB download();// Инкапсуляция в объект BLOB и загрузка } } // Загрузка файла function download() { var blob = new Blob(recordedChunks, { type: "video/webm" }); // Видео можно загрузить здесь в бэкенд var url = URL.createObjectURL(blob); var a = document.createElement("a"); document.body.appendChild(a); a.style = "display: none"; a.href = url; a.download = "test.webm"; a.click(); window.URL.revokeObjectURL(url); } }) ▪ Определение состояния горизонтального и вертикального экранов Чтобы оценить состояние горизонтального или вертикального экрана мобильного телефона: function hengshuping(){ if(window.orientation==180||window.orientation==0){ alert("Portrait state！") } if(window.orientation==90||window.orientation==-90){ alert("Landscape state！") } } window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", hengshuping, false); ▪ Различение стилей для горизонтального и вертикального экранов Чтобы установить разные стили для горизонтального и вертикального экранов: <style> @media all and (orientation : landscape) { body { background-color: #ff0000; } } @media all and (orientation : portrait) { body { background-color: #00ff00; } } </style> ▪ Продолжение @javascriptv

Стартануть в IT быстро и эффективно — подготовительный курс по Frontend-разработке. 🗓 Начинаем 13 июля! Даем: 72 урока с практикой в браузере, 3 онлайн вебинара и 1 сессию лайвкодинга с практикующим разработчиком. Получаем: крепкие знания базы языка, умение понимать код и первую программу на JavaScript, написанную вместе с наставником. 🔜 Запишитесь прямо сейчас!

DeepScan - полезный инструмент, который проводит анализ исходного кода. Программа отлично работает в обнаружении возможных ошибок и уязвимостей в JavaScript приложениях. Она проводит подробное сканирование и анализ вашего кода, выявляя проблемные секции, такие как неправильное использование переменных, возможные утечки памяти и небезопасные операции с данными. https://deepscan.io/ @javascriptv

Ghost Card - эффектная карточка с 3D эффектом. https://codepen.io/pizza3/pen/pobevYW @javascriptv

Jello Tab Bar - красивый анимированный tabbar, написанный с помощью SVG, CSS и JavaScript https://codepen.io/flavio_amaral/pen/xxgYGr @javascriptv

🖼Стек вызовов JavaScript: объяснение с помощью иллюстраций ▪Типичный случай В случае ниже каждая функция завершается после выполнения всех строк кода внутри нее. function defense() { console.log('I am the defense attorney'); } function prosecution() { console.log('I am the prosecutor'); } console.log('All rise'); defense(); prosecution(); 👀Смотреть ▪Более интересный случай В данном примере — вызов функции внутри другой функции. function callingToWitness(witnessNumber) { console.log('Calling to witness number ' + witnessNumber); } function defense() { callingToWitness(1); callingToWitness(2); } function prosecution() { callingToWitness(3); callingToWitness(4); } console.log('All rise'); defense(); prosecution(); 👀Смотреть Этот пример помогает лучше понять термин “стек”. Благодаря вызову функции внутри другой функции мы видим, как “боксы” нагромождаются один на другой и создают стек “боксов”. Каждый “бокс” выполняет код внутри себя. При вызове функции создается новый “бокс” внутри нее. Если есть простая команда, например console.log, она просто выполняется. Выполнив весь код, “бокс” покидает стек. Что такое “боксы”? Зачем нужны контексты выполнения? ▪Читать @javascriptv

Minimalist Thermostat - Регулировка температуры, выполненная с помощью SVG, CSS и библиотеки GSAP.js https://codepen.io/jkantner/pen/rNpbMjO @javascriptv

🔧 Chrome for Testing — новая версия Chrome, специально предназначенная для тестирования веб-приложений и автоматизации. Узнайте, почему команда Chrome сочла это необходимым на конкретных примеры, в которых Chrome for Testing может быть полезен вам как разработчику. Читать

✔ Как структурировать API-вызовы при автоматизированном тестировании с Playwright и JavaScript В создании автоматизированных e2e-тестов для сложных систем есть много трудностей. Одна из них — “идеальное” окружение. Это окружение должно быть полностью под вашим контролем и включать многие (если не все) характеристики окружения разработки или продакшн-окружения. На практике это часто не так. Окружение требует регулярного контроля, сброса данных и настройки требований для каждого теста “на лету”. В случае онлайн-приложений, основанных на REST-архитектуре и запросах API, мы можем обойти эту проблему и приводить систему в необходимое состояние перед каждым тестом или набором тестов. В этом примере я воспользуюсь Playwright с модулем запросов, который он предоставляет для отправки вызовов API. Допустим, приложение, которое мы тестируем, представляет собой простой магазин с товарами. Для авторизации используется технология JWT (веб-токен в формате JSON). Следовательно, каждый последующий вызов после входа в систему должен включать данный токен. Чтобы некоторые тесты сработали, на складе должен быть определенный продукт. Следовательно, пользователь должен сначала пройти аутентификацию, получить токен и воспользоваться им для пополнения запасов этого определенного продукта. ▪Читать @javascriptv

Carousel with drag and wheel Карусель с перетаскиванием и прокруткой колеса. Реализована с помощью CSS и JS #css #js #анимация #carousel https://codepen.io/supah/pen/xxJMbbg @javascriptv

🎯 Переходите на новый уровень в JS-разработке и разнообразьте свою работу! Пройди тест по JS и проверь как хорошо ты знаешь язык. Ответишь — пройдешь на продвинутый курс «JavaScript Developer. Professional» от OTUS по специальной цене + получишь видео-курс по Git в подарок 👉 ПРОЙТИ ТЕСТИРОВАНИЕ https://otus.pw/hLRM/ 💣 Пройдете тест и получите: ✔️ Живое общение с экспертами JavaScript-сообщества ✔️Получите видео-курс по Git в подарок ✔️ Лучшие открытые уроки прошлых наборов курса ✔️ Продвинутые темы и практика на «боевых» задачах уровня Middle+ ✔️ Скидку на прохождение онлайн курса «JavaScript Developer. Professional» 🔥 Курс доступен в рассрочку. Нативная интеграция. Информация о продукте www.otus.ru

💫 Какой метод глубокого клонирования в JavaScript наиболее эффективный — исследование В данном исследовании сравниваются различные методы глубокого клонирования в JavaScript, а их эффективность оценивается с помощью серии модульных тестов. ▪Читать @javascriptv

❗️ Хотите начать писать автотесты на JS? ⚠️ Приходите 8 июня в 20:00 на открытый урок в преддверии старта онлайн-курса «JavaScript QA Engineer» в OTUS. 📌 На занятии мы познакомимся с основами популярного фреймворков для написания тестов на JavaScript — mocha и библиотеки утверждений — chai. Для этого мы: — Рассмотрим основные принципы написания тестов — Узнаем, как использовать chai для создания автоматизированных тестов на JavaScript — Напишем пару unit и API тестов. Урок пройдет в рамках онлайн-курса OTUS “JavaScript QA Engineer”. После занятия полный курс можно приобрести удобным для вас способом. 👉 Готовьте вопросы и записывайтесь на вебинар! РЕГИСТРАЦИЯ — https://otus.pw/UzDA/ Нативная интеграция. Информация о продукте www.otus.ru

💡Задача: Игра в прыжки Условие: Вам дан целочисленный массив nums. Изначально вы находитесь в первом индексе массива, и каждый элемент массива представляет максимальную длину прыжка в этой позиции. Верните true, если вы можете добраться до последнего индекса, или false в противном случае. Пример: Ввод: nums = [1,3,1,1,4] Вывод: true Объяснение: Переходим на 1 шаг от индекса 0 к 1, затем на 3 шага к последнему индексу. Ввод: nums = [3,2,1,0,4] Вывод: false Решение: var canJump = function(nums) { // Base condition... if(nums.length <= 1) return true; // To keep the maximum index that can be reached... let maximum = nums[0]; // Traverse all the elements through loop... for(let i = 0; i < nums.length; i++){ //if there is no way to jump to next... // so we should return false... if(maximum <= i && nums[i] == 0) return false; //update the maximum jump... if(i + nums[i] > maximum){ maximum = i + nums[i]; } //maximum is enough to reach the end... if(maximum >= nums.length-1) return true; } return false; }; Пишите свое решение в комментариях👇 @javascriptv

Three.js Mobile VR Sonic — бегущий Sonic в 3D пространстве three.js с возможностью перехода в VR режим. Sonic может прыгать и собирать монетки. https://codepen.io/b29/pen/yQXQrg @javascriptv

Three.js Mobile VR Sonic — бегущий Sonic в 3D пространстве three.js с возможностью перехода в VR режим. Sonic может прыгать и собирать монетки. https://codepen.io/b29/pen/yQXQrg @javascriptv