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

​Что означает ошибка TypeError: JSON.stringify cannot serialize cyclic structures? Ситуация: мы готовим данные для отправки на сервер из браузера. Чтобы было проще, используем JSON (JavaScript Object Notation). Можно перевести как «способ записи объектов в JavaScript». Формат оказался настолько удобен, что его стали поддерживать практически все популярные языки программирования. На старте мы знаем, что данные будут иметь двумерную вложенность. Для этого мы создаём пустой объект, а потом на основе него создаём пару «ключ: значение», чтобы было это удобно было потом перевести в JSON:

 var a = { };
 var b = { a: a };

После этого мы создаём первый элемент нашей структуры и пробуем отправить данные на сервер, предварительно переведя их в JSON-формат:Как отправить JSON-данные на сервер

 a.b = b;
 JSON.stringify(a);

Но когда мы пробуем выполнить этот код в браузере, то получаем ошибку: ❌ TypeError: JSON.stringify cannot serialize cyclic structures. Что это значит: JavaScript не может перевести в JSON-формат вложенные цикличные структуры данных. Когда встречается: когда мы собираем объект из разных частей, каждая из которых ссылается на другую — использует её в качестве параметра или значения. Чтобы избавиться от ошибки TypeError: JSON.stringify cannot serialize cyclic structures, достаточно убрать вложенную структуру, когда объекты циклично ссылаются друг на друга. В нашем случае объект a содержит объект b, который, в свою очередь, состоит из объектов a. Лучше всего сделать так: заведём новую переменную, которую и будем потом переводить в JSON-формат: var a = { }; var b = { a: a }; var c = {}; c[1] = b; JSON.stringify(c); 👉 @frontendInterview

👉 @frontendInterview

Материалы из этого канала дают на платных курсах Frontend Portal — настоящий портал для тех кто хочет стать востребованным frontend-разработчиком. Полезные ресурсы, шпаргалки, разбор вопросов с собеседований, задачи, викторины и многое другое 👉 Присоединяйтесь к @FrontendPortal и станьте частью дружного frontend-комьюнити!

Дистанционные вузы и колледжи. Госдиплом. Идет набор! Vuz24 – центр электронного обучения и приемная комиссия партнерских вузов. Работаем с абитуриентами и студентами бесплатно как часть вуза, а не посредники. 1. Проводим профессиональную ориентацию: подбираем подходящую по направлению и удобную по условиям обучения программу 2. Работаем с зачислением и оформлением документов до диплома 3. Готовим к поступлению по внутренним испытаниям: обеспечиваем материалами и консультируем 4. Поддерживаем связь студента с вузом Работаем, чтобы вы могли получать высшее образование без ограничений по возрасту, статусу, географии, проходному балу, количеству дипломов. Живите привычной жизнью: ходите на работу, занимайтесь семьей и одновременно осваивайте новую профессию или получайте экспертную ступень в своей области. Перейти на сайт #реклама vuz24.ru О рекламодателе

​<dialog> Тег создаёт всплывающее окно или диалог. По умолчанию не показывается на странице. Может открываться в двух режимах: 1. Всплывающее окно — не блокирует взаимодействие со страницей. 2. Модальное окно — откроется поверх страницы, имеет фоновое затемнение, остальной контент не доступен для взаимодействия. Как и у элемента <details>, по умолчанию содержимое окна скрыто от пользователя, но его можно отобразить через атрибут open. <dialog open> Я виден. Привет! 👋 </dialog> <dialog> Я скрыт от пользователя 🥷 </dialog> Также окно можно открыть с помощью JavaScript-методов: 1. show() — добавляет атрибуты open и aria-modal="false". 2. showModal() — открывает в режиме «модального окна». Добавляет атрибуты open и aria-modal="true". Появляется подложка в виде псевдоэлемента ::backdrop, который можно стилизовать. <button type="button" onclick="window.myDialog.show()"> Просто открыть </button> <button type="button" onclick="window.myDialog.showModal()"> Открыть как модалку </button> <dialog id="myDialog">🖖 Живи долго и процветай!</dialog> 👉 @frontendInterview

Incrementer Вам дан массив чисел. Создайте функцию, которая увеличит каждое число на его позицию в массиве. Результат может содержать только однозначные числа, так что если добавление цифры с её позицией дает вам многозначное число, то должна быть возвращена только последняя цифра. (массивы будут содержать только числа) Пример: [1, 2, 4] --> [2, 4, 7] #[1+1, 2+2, 4+3] [4, 6, 9, 1, 3] --> [5, 8, 2, 5, 8] # [4+1, 6+2, 9+3, 1+4, 3+5] # 9+3 = 12 --> 2 👉 @frontendInterview

Svelte и Sapper в действии Многие веб-фреймворки замедляют работу приложений, загружая сотни строк кода «на всякий случай». Svelte позволяет компилировать приложения в эффективные крошечные пакеты с минимальным временем загрузки. Объединение Svelte с фреймворком Sapper облегчает маршрутизацию страниц, генерирование на стороне сервера, разработку статических сайтов и решение многих других задач. Хотите научиться создавать быстрые и элегантные веб-приложения? Вам помогут компоненты Svelte и качественный опыт взаимодействия. Вы научитесь использовать уникальную модель управления состояниями, освоите упрощенную маршрутизацию страниц, разбиение кода, поддержку автономного режима и работу с представлениями, генерируемыми на сервере. 👉 @frontendInterview

​Как сделать изоморфное приложение? Что такое изоморфное приложение? Изоморфное веб-приложение (также известное как универсальное) представляет собой приложение, которое выполняется как на сервере, так и на клиенте, обеспечивая возможность генерировать контент на сервере и динамически обновлять его на клиенте. Это позволяет улучшить производительность на этапе загрузки страницы, а также иметь преимущества для SEO. Преобразование обычного приложения в изоморфное: 1. Выбор фреймворка/библиотеки: Выберите фреймворк или библиотеку, которая поддерживает изоморфный рендеринг, такие как Next.js. или Nuxt.js. Эти инструменты предоставляют средства для создания изоморфных приложений. 2. Разделяемый код: Один из ключевых аспектов изоморфного приложения - это возможность использования одного и того же кода как на серверной стороне (Node.js), так и на клиентской стороне. Это позволяет переиспользовать код и логику между сервером и клиентом. 3. Серверный рендеринг: Создайте серверную часть приложения, которая будет отвечать за генерацию HTML контента на сервере. Это обычно делается с помощью специальных методов рендеринга. 4. Клиентский рендеринг: Убедитесь, что ваш клиентский код может обрабатывать переход к изоморфной странице и продолжить работу, начатую на сервере. 👉 @frontendInterview

👉 @frontendInterview

Дизайн в FIGMA с нуля. Бесплатный курс + портфолио Онлайн-программа с наставником и чатом. Дизайн от профессионалов. Доступ 0 руб. Узнать больше #реклама 16+ yudaevschool.online О рекламодателе

Прошли кучу курсов: тексты, рилс, smm... Но так и не получается дать результат клиентам? Как будто не хватает какой-то фишки, чтобы все заработало? Логично! Ведь для того, чтоы все эти инструменты стабильно приносили продажи, и больше не было проблемы "а что бы мне завтра выложить?", вам нужна не особая "фишка", а маркетинговая база! Чтобы ее прокачать, читайте канал "Элеонора маркетинг". Здесь вы не найдете готовых контент планов, шаблонов и списков "100 продающих заголовков". В своем канале Элеонора учит мыслить как маркетолог! А еще разбирает ошибки контента на примерах реальных аккаунтов бизнеса, и объясняет почему вы давно в смм, но так и не смогли поднять чек. Говорят, в этом канале пользы больше, чем на платных курсах, и даже новички начинают делать результаты! Проверим? Смотреть #реклама О рекламодателе

​Что такое серверный/клиентский/изоморфный рендеринг? Каковы их отличия? Серверный рендеринг: Серверный рендеринг означает, что HTML страница сначала генерируется на сервере, а затем отправляется на клиент. Клиент получает готовый HTML и начинает отображение страницы. Такой подход применяется в традиционных веб-приложениях. Клиентский рендеринг: В клиентском рендеринге HTML, CSS и JavaScript отправляются клиенту, и отображение содержимого происходит непосредственно на стороне клиента при помощи JavaScript. Один из примеров такого подхода - использование фреймворков, таких как React или Vue, где основная часть отображения происходит на стороне клиента. Изоморфный (или универсальный) рендеринг: Изоморфный рендеринг сочетает в себе серверный и клиентский рендеринг. При этом страница рендерится как на сервере, так и на клиенте, и последующие запросы на сервер могут обрабатываться клиентским кодом. Такой подход обеспечивает инициализацию страницы на сервере, что положительно сказывается на SEO и начальной загрузке страницы. После загрузки страницы JavaScript-код берет на себя управление и обеспечивает интерактивность. Отличия: 1. Время инициализации: Серверный рендеринг и изоморфный рендеринг предоставляют начальное содержимое на сервере, в то время как клиентский рендеринг инициализируется на стороне клиента. 2. SEO: Серверный рендеринг и изоморфный рендеринг являются лучшими вариантами для SEO, так как поисковые системы могут проиндексировать контент на этапе загрузки страницы. 3. Производительность: Клиентский рендеринг может обеспечить лучшую интерактивность, но серверный и изоморфный рендеринг обычно демонстрируют более быструю первоначальную загрузку страницы. 👉 @frontendInterview

🟡Тест по React JS от OTUS — Ответьте на 19 вопросов и проверьте, насколько хорошо вы знаете язык. Сможете сдать — пройдёте на продвинутый онлайн-курс по React.js со скидкой! 👉🏻ПРОЙТИ ТЕСТ https://vk.cc/cufXyC Курс доступен в рассрочку. 💣 Пройдете тест и получите: ✔️ Живое общение с экспертами ✔️ Лучшие открытые уроки прошлых наборов курса ✔️ Продвинутые темы и практика на «боевых» задачах уровня Middle+ ✔️ Скидку на прохождение онлайн курса «React.js Developer» Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576, www.otus.ru Erid: 2SDnjebWTjE

👉 @frontendInterview

Джентельменский набор трушного фронтендера Опытные Frontend-разработчики собрали самые востребованные и бесплатные каналы, без которых не обойдется ни один настоящий фронтендер. Макеты для верстки — самый крупный канал с макетами для верстки. Первоисточник всех макетов в Telegram. Полезная вËрстка — канал с готовыми решениями повседневных задач: слайдеры, анимация, навигация и т.д. JavaScript заметки — образовательный канал с ежедневными практическими заметками по языку. codepen.js — готовые коды: реализованные на css и js анимации, скрипты и интерфейсы. Оживи статичные макеты Figma Start — каждый день выпускаем крутые макеты для верстки. Выбери самый интересный и удиви рекрутеров! Развивайся с нами, ведь так проще!

Обучаем Java-разработчиков оплата после выхода на работу В Kata Academy можно выучиться на Java-разработчика бесплатно, а заплатить уже после трудоустройства по специальности из фактической зарплаты. Если задуматься, то все в выигрыше —Ты получаешь работу с хорошей зарплатой, мы получаем процент за инвестиции в тебя и продолжаем прокачивать твои навыки еще 2 года; — в наших интересах научить тебя так, чтобы твоя зарплата была как можно выше; — мы развиваем твои навыки и после курсов: проводим выездные мероприятия и мастер-классы — и доходы наших выпускников растут; — мы не зависим от банков и их рассрочек — кризис не повлиял на доступность курсов. Чтобы попасть на курс, нужно выполнить небольшое тестовое задание. Переходи по ссылке и оставляй заявку! Узнать больше #реклама kata.academy О рекламодателе