Frontend Interview - собеседования по Javascript / Html / Css

👉 @frontendInterview

👉 @frontendInterview

Найти работу верстальщика трудно? Ты просто не там ищешь! @job_webdev – огромная база фриланс заказов и вакансий для верстальщиков и фронтендеров, пополняющаяся ежедневно Не трать время зря! Подписывайся и ищи заказы уже сейчас🧑‍💻

👉 @frontendInterview

Для работы в международной команде базового английского может не хватить. Держите 5 советов, которые помогут подготовиться к общению с иностранными коллегами. Если хотите подтянуть язык для работы в IT — попробуйте Яндекс Практикум. Они запустили курсы специально для разработчиков, аналитиков и продакт-менеджеров. В основе обучения — занятия с личным преподавателем, дополнительно вас ждёт разговорная практика с иностранными IT-специалистами. Они помогут освоить язык на примере собеседований, стендапов, ревью и других рабочих встреч. Будет проще пройти реальное англоязычное собеседование, если вы уже тренировали его на занятиях. Записывайтесь на бесплатную консультацию к куратору. Он определит ваш уровень языка и расскажет о курсе.

​URLSearchParams URLSearchParams — это класс, предоставляющий удобное API для формирования строки поисковых параметров, которую потом можно использовать для формирования полного адреса. Все параметры в строке будут закодированы для безопасной вставки в адрес. Также этот класс можно встретить как часть класса URL. Пример Создаём экземпляр класса параметров поиска: const params = new URLSearchParams({ count: '10' }) Далее мы можем добавлять или удалять параметры: // добавление params.append('size', 'lg') console.log(params.toString()) // 'count=10&size=lg' // удаление params.delete('count') console.log(params.toString()) // 'size=lg' Повторное добавление параметра с тем же именем добавит ещё одно значение с таким же именем, а получение всех возможных значений вернёт все добавленные значения: params.append('size', 'xl') console.log(params.getAll('size')) // ['lg', 'xl'] Получение параметров в виде строки: const paramsString = params.toString() console.log(paramsString) // 'count=10&size=lg&size=xl' const url = `/catalog/?${paramsSting}` console.log(url) // '/catalog/?count=10&size=lg&size=xl' 👉 @frontendInterview

👉 @frontendInterview

[Парень с 0 заработает $100 000 на геймдеве] — $100 000 с нуля за 3 месяца — Отчеты каждый день — Прямые эфиры каждый вторник Жми на ссылку ниже и ежедневно наблюдай за прогрессом 🔽 https://t.me/grishakof_gamedev

window.location Это объект хранящийся в window, который позволяет получать информацию о текущем адресе страницы и менять его с помощью функций или обновления полей объекта. Свойства объекта Location: hash - часть URL, которая идет после символа '#', включая этот символ host - адрес сайта и порт href - весь URL страницы hostname - адрес сайта pathname - строка пути относительно корня port - номер порта protocol - протокол search - get-параметры, включая символ "?" Примеры использования

 //Проверить хеш страницы и выполнить код
 if(window.location.hash == '#someHash'){
     doSomething();
 }
 //Перейти по другому адресу
 window.location = "http://javascript.ru"
 //перезагрузить страницу
 window.location.reload()

👉 @frontendInterview

Dodge The Birds Герой игры может выполнить две команды. findBirds и jump. findBirds() возвращает массив из птиц на экране jump(height) - заставляет героя прыгнуть на определенную высоту. Напишите функцию controller, которая будет избегать столкновения героя с птицами. 👉 @frontendInterview

JavaScript from Frontend to Backend: Learn full stack JavaScript development using the MEVN stack with quick and easy steps (2022) Книга начинается с основ переменных и объектов в JavaScript, а затем быстро переходит к созданию компонентов на стороне клиента с помощью Vue.js и простого приложения для управления списками. После этого внимание переключается на серверную сторону и Node.js, где вы рассмотрите модель MVC и изучите модуль Express. После того как вы освоите серверную и клиентскую части, останется только база данных. Вы познакомитесь с MongoDB и модулем Mongoose. В последней главе этого быстрого руководства вы объедините все эти части, чтобы интегрировать приложение Vue.js в сервер Node.js, используя Express для структурирования серверного кода и MongoDB для хранения информации. 👉 @frontendInterview

​Какие есть ограничения у window.close()? Порой веб-разработчики с удивлением обнаруживают, что команда windows.close() не всегда закрывает окно браузера. Почему браузеры ограничивают команду? Иногда такое поведение браузеров объясняют, ссылаясь на некие таинственные «соображения безопасности». Но основная причина ограничений, применяемых к close(), больше связана с тем, что называют «пользовательский опыт». А именно, если скрипты смогут свободно закрывать любые вкладки браузеров, пользователь может потерять важные данные, состояние веб-приложения, работающего во вкладке. Как поступают браузеры? В Internet Explorer вкладка или окно браузера закрывается без лишних вопросов в том случае, если для создания этой вкладки или этого окна была использована команда window.open(). Во всех других случаях вкладку (или окно) просто так не закрыть: пользователю показывают одно или два модальных окна, что зависит от того, представлена ли страница единственной вкладкой в окне браузера. В Chromium 88 команда window.close() выполняется успешно в том случае, если у нового окна или у новой вкладки что-то записано в свойство opener, или в том случае, если стек навигации страницы содержит менее двух записей. Когда браузер Chrome блокирует команду close(), он выводит в консоль следующее сообщение Scripts may close only the windows that were opened by them. Firefox вызывает функцию IsOnlyTopLevelDocumentInSHistory(), а она вызывает функцию IsEmptyOrHasEntriesForSingleTopLevelPage(), которая проверяет историю сессий. Если там больше одной записи, она уточняет, относятся ли они все к одному и тому же объекту Document. Если это так — вызов close() выполняется. 👉 @frontendInterview

👉 @frontendInterview

​Контролируем JavaScript импорты с помощью Import maps С выходом Chrome 89 (а так же в Deno 1.8) появилась возможность использовать Карты импортов (Import maps) – механизма, позволяющего получить контроль над поведением JavaScript-импортов. Несмотря на то, что современная разработка строится с использованием нативных модулей, мы не можем запускать приложения без предварительной сборки. Одна из целей карт импортов как раз решает эту проблему. Если кратко, то теперь можно будет совершенно законно и без всяких сборщиков писать, скажем, так: import React from 'react'; Карты импортов задаются с помощью тега script с атрибутом type="importmap" в формате JSON. А теперь на примере. Запускаем статический сервер и создаём два файла: index.html

 <!DOCTYPE html>
 <html>
   <body>
     <script type="importmap">
       {
         "imports": {
           "mylib": "./my-lib.mjs"
         }
       }
     </script>
     <script type="module">
       import { sayHi } from "mylib";
       sayHi();
     </script>
   </body>
 </html>

и my-lib.mjs

 export function sayHi() {
   console.log("hi!");
 }

Открываем в браузере страничку, и вуаля: в консоль вывелось "hi!". Прочитать подробно о том, как всё устроено можно в статье. 👉 @frontendInterview