Если ширина контейнера 500px, то какие ширины будут у его дочерних элементов при таком коде?
Anonymous Quiz
11%
50px, 200px, 300px
13%
50px, 100px, 200px
60%
50px, 150px, 300px
16%
50px, 50px, 100px
👍16
Что такое git stash?
Команда git stash позволяет на время «сдать в архив» (или отложить) изменения, сделанные в рабочей копии, чтобы вы могли применить их позже. Откладывание изменений полезно, если вам необходимо переключить контекст и вы пока не готовы к созданию коммита.
Вернуть изменения в рабочую область можно, выполнив команду git stash pop.
👉 @frontendInterview
Команда git stash позволяет на время «сдать в архив» (или отложить) изменения, сделанные в рабочей копии, чтобы вы могли применить их позже. Откладывание изменений полезно, если вам необходимо переключить контекст и вы пока не готовы к созданию коммита.
Вернуть изменения в рабочую область можно, выполнив команду git stash pop.
👉 @frontendInterview
👍18🔥4
Какое значение прописать свойству flex-direction, чтобы элементы следовали в обратном порядке, снизу вверх?
Anonymous Quiz
3%
column
14%
row-reverse
80%
column-reverse
3%
wrap-reverse
С чего JS-разработчику начать изучение React?
С бесплатного практического урока «Typenoscript и React. Типизация основных строительных блоков приложения» от OTUS.
На вебинаре:
- углубимся в typenoscript;
- разберёмся с типами для React;
- поймем, зачем нужны дженерики и как описывать компоненты React на typenoscript;
- изучим enums, interfaces, functions, classes, keyof, typeof, union an as и многое другое.
Занятие пройдёт 29 января в 20:00 мск и будет приурочено к старту курса «React.js Developer».
Программа доступна в рассрочку!
Пройдите короткое тестирование прямо сейчас, чтобы принять участие в открытом уроке и получить запись:
https://clck.ru/382m8h
Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576, www.otus.ru Erid 2SDnjc4QCbS
С бесплатного практического урока «Typenoscript и React. Типизация основных строительных блоков приложения» от OTUS.
На вебинаре:
- углубимся в typenoscript;
- разберёмся с типами для React;
- поймем, зачем нужны дженерики и как описывать компоненты React на typenoscript;
- изучим enums, interfaces, functions, classes, keyof, typeof, union an as и многое другое.
Занятие пройдёт 29 января в 20:00 мск и будет приурочено к старту курса «React.js Developer».
Программа доступна в рассрочку!
Пройдите короткое тестирование прямо сейчас, чтобы принять участие в открытом уроке и получить запись:
https://clck.ru/382m8h
Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576, www.otus.ru Erid 2SDnjc4QCbS
👎2🥰1😁1
В каком контексте следует использовать метод getStaticPaths в Next.js?
Anonymous Quiz
45%
Для получения данных во время сборки и предварительного рендеринга страницы в виде статического HTML
14%
Для получения данных по каждому запросу и предварительного рендеринга страницы на сервере
41%
В динамических роутах для указания списка путей, которые должны быть сгенерированы во время сборки
erid: 2VtzqvwpLr2
В IT получают больше 250к только те, кто умеют вести переговоры
Остальные сразу соглашаются на оффер, даже если он их не устраивает, потому что стесняются просить больше денег.
Если это про тебя, подписывайся на канал Выше вилки. Достаточно прочесть в нём хотя бы пару приёмов переговоров — и вы сможете увеличить свой доход на 30%.
Подписывайтесь: @above_the_range
реклама. рекламодатель ИП Шишков Илья Иванович ИНН: 575206903941
В IT получают больше 250к только те, кто умеют вести переговоры
Остальные сразу соглашаются на оффер, даже если он их не устраивает, потому что стесняются просить больше денег.
Если это про тебя, подписывайся на канал Выше вилки. Достаточно прочесть в нём хотя бы пару приёмов переговоров — и вы сможете увеличить свой доход на 30%.
Подписывайтесь: @above_the_range
реклама. рекламодатель ИП Шишков Илья Иванович ИНН: 575206903941
В чём разница между git pull и git fetch?
Разница заключается в том, что git fetch просто извлекает изменения из удалённого репозитория, а git pull извлекает их и применяет к локальному репозиторию. Упростив действительность. можно сказать, что git pull = git fetch + git merge.
👉 @frontendInterview
Разница заключается в том, что git fetch просто извлекает изменения из удалённого репозитория, а git pull извлекает их и применяет к локальному репозиторию. Упростив действительность. можно сказать, что git pull = git fetch + git merge.
👉 @frontendInterview
👍27👏1
Mastering Reactive JavaScript
Эта книга предназначена для опытных JavaScript разработчиков, ищущие новые инструменты и подходы к программированию, и рассказывает про основы реактивного программирования. В двух словах, реактивное программирование - это программирование на асинхронных потоках данных. Вы познакомитесь с основами данного программирования, паттернами и примерами реальных приложений.
👉 @frontendInterview
Эта книга предназначена для опытных JavaScript разработчиков, ищущие новые инструменты и подходы к программированию, и рассказывает про основы реактивного программирования. В двух словах, реактивное программирование - это программирование на асинхронных потоках данных. Вы познакомитесь с основами данного программирования, паттернами и примерами реальных приложений.
👉 @frontendInterview
👍4
Sum of two lowest positive integers
Создайте функцию, которая возвращает сумму двух наименьших положительных чисел для заданного массива, состоящего минимум из 4 положительных целых чисел. В массив не будут переданы числа с плавающей запятой или отрицательные целые числа.
Например, когда массив передается как [19, 5, 42, 2, 77] вывод должен быть 7.
👉 @frontendInterview
Создайте функцию, которая возвращает сумму двух наименьших положительных чисел для заданного массива, состоящего минимум из 4 положительных целых чисел. В массив не будут переданы числа с плавающей запятой или отрицательные целые числа.
Например, когда массив передается как [19, 5, 42, 2, 77] вывод должен быть 7.
👉 @frontendInterview
❤3👍2
Что такое Test Double и Fake? В чём отличие от Mock и Stub?
Test Double
Это обобщенное обозначение для всех видов замен (заглушек) настоящих объектов в тестах. Он включает в себя такие термины, как Dummy, Fake, Stub, Mock и другие, которые представляют собой замены для реальных объектов во время тестирования.
Fake
Это реализация, которая имитирует реальное поведение, но представляет упрощенную версию, часто без полной функциональности реального компонента. Например, вместо использования настоящей базы данных в тестах, вы можете использовать фэйковую базу данных, которая хранит данные в памяти.
Отличие между Mock и Stub:
- Stub - это тип "заглушки", который предоставляет заранее определенные ответы на вызовы методов или функций.
- Mock - это тип "заглушки", который также предоставляет заранее определенные ответы, но также содержит утверждения (assertions), которые проверяют, были ли вызваны определенные методы или функции и сколько раз они были вызваны.
Итак, в чем их отличие:
- Fake представляет собой упрощенную реализацию с реальным поведением.
- Stub предоставляет заранее определенные ответы на вызовы методов или функций.
- Mock также предоставляет заранее определенные ответы, но содержит также утверждения о вызовах методов или функций.
👉 @frontendInterview
Test Double
Это обобщенное обозначение для всех видов замен (заглушек) настоящих объектов в тестах. Он включает в себя такие термины, как Dummy, Fake, Stub, Mock и другие, которые представляют собой замены для реальных объектов во время тестирования.
Fake
Это реализация, которая имитирует реальное поведение, но представляет упрощенную версию, часто без полной функциональности реального компонента. Например, вместо использования настоящей базы данных в тестах, вы можете использовать фэйковую базу данных, которая хранит данные в памяти.
Отличие между Mock и Stub:
- Stub - это тип "заглушки", который предоставляет заранее определенные ответы на вызовы методов или функций.
- Mock - это тип "заглушки", который также предоставляет заранее определенные ответы, но также содержит утверждения (assertions), которые проверяют, были ли вызваны определенные методы или функции и сколько раз они были вызваны.
Итак, в чем их отличие:
- Fake представляет собой упрощенную реализацию с реальным поведением.
- Stub предоставляет заранее определенные ответы на вызовы методов или функций.
- Mock также предоставляет заранее определенные ответы, но содержит также утверждения о вызовах методов или функций.
👉 @frontendInterview
👎5👍3❤1
👍2
Что такое серверный/клиентский/изоморфный рендеринг? Каковы их отличия?
Серверный рендеринг:
Серверный рендеринг означает, что HTML страница сначала генерируется на сервере, а затем отправляется на клиент. Клиент получает готовый HTML и начинает отображение страницы. Такой подход применяется в традиционных веб-приложениях.
Клиентский рендеринг:
В клиентском рендеринге HTML, CSS и JavaScript отправляются клиенту, и отображение содержимого происходит непосредственно на стороне клиента при помощи JavaScript. Один из примеров такого подхода - использование фреймворков, таких как React или Vue, где основная часть отображения происходит на стороне клиента.
Изоморфный (или универсальный) рендеринг:
Изоморфный рендеринг сочетает в себе серверный и клиентский рендеринг. При этом страница рендерится как на сервере, так и на клиенте, и последующие запросы на сервер могут обрабатываться клиентским кодом. Такой подход обеспечивает инициализацию страницы на сервере, что положительно сказывается на SEO и начальной загрузке страницы. После загрузки страницы JavaScript-код берет на себя управление и обеспечивает интерактивность.
Отличия:
1. Время инициализации: Серверный рендеринг и изоморфный рендеринг предоставляют начальное содержимое на сервере, в то время как клиентский рендеринг инициализируется на стороне клиента.
2. SEO: Серверный рендеринг и изоморфный рендеринг являются лучшими вариантами для SEO, так как поисковые системы могут проиндексировать контент на этапе загрузки страницы.
3. Производительность: Клиентский рендеринг может обеспечить лучшую интерактивность, но серверный и изоморфный рендеринг обычно демонстрируют более быструю первоначальную загрузку страницы.
👉 @frontendInterview
Серверный рендеринг:
Серверный рендеринг означает, что HTML страница сначала генерируется на сервере, а затем отправляется на клиент. Клиент получает готовый HTML и начинает отображение страницы. Такой подход применяется в традиционных веб-приложениях.
Клиентский рендеринг:
В клиентском рендеринге HTML, CSS и JavaScript отправляются клиенту, и отображение содержимого происходит непосредственно на стороне клиента при помощи JavaScript. Один из примеров такого подхода - использование фреймворков, таких как React или Vue, где основная часть отображения происходит на стороне клиента.
Изоморфный (или универсальный) рендеринг:
Изоморфный рендеринг сочетает в себе серверный и клиентский рендеринг. При этом страница рендерится как на сервере, так и на клиенте, и последующие запросы на сервер могут обрабатываться клиентским кодом. Такой подход обеспечивает инициализацию страницы на сервере, что положительно сказывается на SEO и начальной загрузке страницы. После загрузки страницы JavaScript-код берет на себя управление и обеспечивает интерактивность.
Отличия:
1. Время инициализации: Серверный рендеринг и изоморфный рендеринг предоставляют начальное содержимое на сервере, в то время как клиентский рендеринг инициализируется на стороне клиента.
2. SEO: Серверный рендеринг и изоморфный рендеринг являются лучшими вариантами для SEO, так как поисковые системы могут проиндексировать контент на этапе загрузки страницы.
3. Производительность: Клиентский рендеринг может обеспечить лучшую интерактивность, но серверный и изоморфный рендеринг обычно демонстрируют более быструю первоначальную загрузку страницы.
👉 @frontendInterview
🔥11👍3
Как сделать так, чтобы все гиперссылки сайта автоматически открывались в новом окне?
Anonymous Quiz
4%
Никак
81%
<base target="_blank">
15%
Средствами JavaScript
🔥23👏4
Как сделать изоморфное приложение?
Что такое изоморфное приложение?
Изоморфное веб-приложение (также известное как универсальное) представляет собой приложение, которое выполняется как на сервере, так и на клиенте, обеспечивая возможность генерировать контент на сервере и динамически обновлять его на клиенте. Это позволяет улучшить производительность на этапе загрузки страницы, а также иметь преимущества для SEO.
Преобразование обычного приложения в изоморфное:
1. Выбор фреймворка/библиотеки: Выберите фреймворк или библиотеку, которая поддерживает изоморфный рендеринг, такие как Next.js. или Nuxt.js. Эти инструменты предоставляют средства для создания изоморфных приложений.
2. Разделяемый код: Один из ключевых аспектов изоморфного приложения - это возможность использования одного и того же кода как на серверной стороне (Node.js), так и на клиентской стороне. Это позволяет переиспользовать код и логику между сервером и клиентом.
3. Серверный рендеринг: Создайте серверную часть приложения, которая будет отвечать за генерацию HTML контента на сервере. Это обычно делается с помощью специальных методов рендеринга.
4. Клиентский рендеринг: Убедитесь, что ваш клиентский код может обрабатывать переход к изоморфной странице и продолжить работу, начатую на сервере.
👉 @frontendInterview
Что такое изоморфное приложение?
Изоморфное веб-приложение (также известное как универсальное) представляет собой приложение, которое выполняется как на сервере, так и на клиенте, обеспечивая возможность генерировать контент на сервере и динамически обновлять его на клиенте. Это позволяет улучшить производительность на этапе загрузки страницы, а также иметь преимущества для SEO.
Преобразование обычного приложения в изоморфное:
1. Выбор фреймворка/библиотеки: Выберите фреймворк или библиотеку, которая поддерживает изоморфный рендеринг, такие как Next.js. или Nuxt.js. Эти инструменты предоставляют средства для создания изоморфных приложений.
2. Разделяемый код: Один из ключевых аспектов изоморфного приложения - это возможность использования одного и того же кода как на серверной стороне (Node.js), так и на клиентской стороне. Это позволяет переиспользовать код и логику между сервером и клиентом.
3. Серверный рендеринг: Создайте серверную часть приложения, которая будет отвечать за генерацию HTML контента на сервере. Это обычно делается с помощью специальных методов рендеринга.
4. Клиентский рендеринг: Убедитесь, что ваш клиентский код может обрабатывать переход к изоморфной странице и продолжить работу, начатую на сервере.
👉 @frontendInterview
👍5👏1
Svelte и Sapper в действии
Многие веб-фреймворки замедляют работу приложений, загружая сотни строк кода «на всякий случай». Svelte позволяет компилировать приложения в эффективные крошечные пакеты с минимальным временем загрузки. Объединение Svelte с фреймворком Sapper облегчает маршрутизацию страниц, генерирование на стороне сервера, разработку статических сайтов и решение многих других задач.
Хотите научиться создавать быстрые и элегантные веб-приложения?
Вам помогут компоненты Svelte и качественный опыт взаимодействия. Вы научитесь использовать уникальную модель управления состояниями, освоите упрощенную маршрутизацию страниц, разбиение кода, поддержку автономного режима и работу с представлениями, генерируемыми на сервере.
👉 @frontendInterview
Многие веб-фреймворки замедляют работу приложений, загружая сотни строк кода «на всякий случай». Svelte позволяет компилировать приложения в эффективные крошечные пакеты с минимальным временем загрузки. Объединение Svelte с фреймворком Sapper облегчает маршрутизацию страниц, генерирование на стороне сервера, разработку статических сайтов и решение многих других задач.
Хотите научиться создавать быстрые и элегантные веб-приложения?
Вам помогут компоненты Svelte и качественный опыт взаимодействия. Вы научитесь использовать уникальную модель управления состояниями, освоите упрощенную маршрутизацию страниц, разбиение кода, поддержку автономного режима и работу с представлениями, генерируемыми на сервере.
👉 @frontendInterview
🥰4😁1
Incrementer
Вам дан массив чисел. Создайте функцию, которая увеличит каждое число на его позицию в массиве.
Результат может содержать только однозначные числа, так что если добавление цифры с её позицией дает вам многозначное число, то должна быть возвращена только последняя цифра.
(массивы будут содержать только числа)
Пример:
👉 @frontendInterview
Вам дан массив чисел. Создайте функцию, которая увеличит каждое число на его позицию в массиве.
Результат может содержать только однозначные числа, так что если добавление цифры с её позицией дает вам многозначное число, то должна быть возвращена только последняя цифра.
(массивы будут содержать только числа)
Пример:
[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