tgoop.com »
United States »
Frontend Interview - собеседования по Javascript / Html / Css » Telegram Web
В cвязи с недавнем замедлением Ютуба — лучшие обучающие каналы переехали в Telegram
Вот каналы для айтишников:
🐞 Тестирование: @QA
Please open Telegram to view this post
VIEW IN TELEGRAM
Two to One
Вам даны две строки s1 и s2, содержащие только буквы от a до z. Создайте функцию, которая возвращает новую отсортированную строку (в алфавитном порядке по возрастанию), максимально длинную, содержащую отдельные буквы (каждая из которых берется только один раз), из s1 или s2.
Примеры:
👉 @frontendInterview
Вам даны две строки s1 и s2, содержащие только буквы от a до z. Создайте функцию, которая возвращает новую отсортированную строку (в алфавитном порядке по возрастанию), максимально длинную, содержащую отдельные буквы (каждая из которых берется только один раз), из s1 или s2.
Примеры:
a = "xyaabbbccccdefww"
b = "xxxxyyyyabklmopq"
longest(a, b) -> "abcdefklmopqwxy"
a = "abcdefghijklmnopqrstuvwxyz"
longest(a, a) -> "abcdefghijklmnopqrstuvwxyz"
👉 @frontendInterview
Что такое чистая функция ?
Чистая функция — это концепция, особенно популярная в функциональном программировании, которая описывает функцию, обладающую следующими характеристиками:
Детерминированность: Возвращаемое значение зависит только от её входных параметров и не изменяется при повторных вызовах с теми же параметрами. Это означает, что функция всегда возвращает один и тот же результат при одинаковых входных данных, не обращаясь при этом к внешним состояниям или данным.
Отсутствие побочных эффектов: Не вызывает побочных эффектов в приложении, то есть не изменяет состояние программы или внешнего окружения (например, не изменяет глобальные переменные, не записывает данные на диск, не выводит информацию на экран и т.д.). Все, что делает чистая функция — это обрабатывает входные данные и возвращает результат.
Пример:
Функция
Пример нечистой функции:
Функция
Преимущества чистых функций:
- Простота тестирования: Легко тестировать, так как их поведение зависит только от входных данных.
- Предсказуемость: Отсутствие побочных эффектов и зависимость только от входных параметров делает поведение их предсказуемым.
- Повторное использование: Могут быть легко переиспользованы в различных частях программы.
- Модульность: Программы, построенные с использованием их, обычно обладают высокой модульностью и легкостью в поддержке и расширении.
👉 @frontendInterview
Чистая функция — это концепция, особенно популярная в функциональном программировании, которая описывает функцию, обладающую следующими характеристиками:
Детерминированность: Возвращаемое значение зависит только от её входных параметров и не изменяется при повторных вызовах с теми же параметрами. Это означает, что функция всегда возвращает один и тот же результат при одинаковых входных данных, не обращаясь при этом к внешним состояниям или данным.
Отсутствие побочных эффектов: Не вызывает побочных эффектов в приложении, то есть не изменяет состояние программы или внешнего окружения (например, не изменяет глобальные переменные, не записывает данные на диск, не выводит информацию на экран и т.д.). Все, что делает чистая функция — это обрабатывает входные данные и возвращает результат.
Пример:
function add(a, b) {
return a + b;
}
Функция
add
является чистой, потому что она всегда возвращает одно и то же значение для одних и тех же аргументов и не имеет побочных эффектов.Пример нечистой функции:
let counter = 0;
function incrementCounter(value) {
counter += value;
}
Функция
incrementCounter
не является чистой, так как она изменяет глобальную переменную counter
, что является побочным эффектом. Также результат выполнения функции зависит от внешнего состояния (значения counter
), что нарушает принцип детерминированности.Преимущества чистых функций:
- Простота тестирования: Легко тестировать, так как их поведение зависит только от входных данных.
- Предсказуемость: Отсутствие побочных эффектов и зависимость только от входных параметров делает поведение их предсказуемым.
- Повторное использование: Могут быть легко переиспользованы в различных частях программы.
- Модульность: Программы, построенные с использованием их, обычно обладают высокой модульностью и легкостью в поддержке и расширении.
👉 @frontendInterview
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
Магия CSS на практике: советы по вёрстке от гика
Я снова пришёл к вам со статьёй, где показываю мои любимые техники вёрстки. Моя цель — поделиться опытом с вами. Я использую не только трюки известных экспертов, есть лично мои придумки. Но пожалуйста, относитесь к этому контенту, как просто к альтернативному мнению. Мои техники не являются единственными правильными решениями.
В этой статье рассмотрим:
- почему декоративные элементы, сделанные с помощью чистого CSS могут не отобразиться в режиме повышенной контрастности Windows;
- чем можно заменить объявления свойства height со значением auto для изображений;
- какой есть нюанс при установке максимальной ширины у группы элементов;
- плавную прокрутку без неприятных ситуаций для пользователя;
- чего не хватает при использовании фоновых изображений.
👉 @frontendInterview
Я снова пришёл к вам со статьёй, где показываю мои любимые техники вёрстки. Моя цель — поделиться опытом с вами. Я использую не только трюки известных экспертов, есть лично мои придумки. Но пожалуйста, относитесь к этому контенту, как просто к альтернативному мнению. Мои техники не являются единственными правильными решениями.
В этой статье рассмотрим:
- почему декоративные элементы, сделанные с помощью чистого CSS могут не отобразиться в режиме повышенной контрастности Windows;
- чем можно заменить объявления свойства height со значением auto для изображений;
- какой есть нюанс при установке максимальной ширины у группы элементов;
- плавную прокрутку без неприятных ситуаций для пользователя;
- чего не хватает при использовании фоновых изображений.
👉 @frontendInterview
Как можно оптимизировать производительность React при большом количестве компонентов?
Anonymous Quiz
5%
Использовать директивы v-if и v-show.
92%
Использовать методы мемоизации, такие как useMemo и useCallback.
3%
Переписать код на TypeScript.
0%
Увеличить размер куки.
🔥Тест по JavaScript от OTUS 🔥
Ответьте на 20 вопросов и проверьте, насколько вы готовы к обучению на курсе - «JavaScript Developer. Professional»
💣 Пройдете тест и получите:
✔️ Живое общение с экспертами JavaScript-сообщества
✔️ Видео-курс по Git в подарок к основной программе
✔️ Лучшие открытые уроки прошлых наборов курса
✔️ Продвинутые темы и проектная работа, направленная на решение реальных рабочих задач, уровня Middle+
Курс стартует 26 сентября и вы можете попасть в группу с 5% скидкой
Ваш промод - JSPRO9
Erid 2SDnjeAJ3nr
Ответьте на 20 вопросов и проверьте, насколько вы готовы к обучению на курсе - «JavaScript Developer. Professional»
💣 Пройдете тест и получите:
✔️ Живое общение с экспертами JavaScript-сообщества
✔️ Видео-курс по Git в подарок к основной программе
✔️ Лучшие открытые уроки прошлых наборов курса
✔️ Продвинутые темы и проектная работа, направленная на решение реальных рабочих задач, уровня Middle+
Курс стартует 26 сентября и вы можете попасть в группу с 5% скидкой
Ваш промод - JSPRO9
Erid 2SDnjeAJ3nr
Что такое операторы сравнения?
Операторы сравнения используются для сравнения двух значений и возвращают логическое значение:
Виды:
- Равенство (
- Не равно (
- Строгое равенство (
- Строгое не равенство (
- Больше (
- Больше или равно (
- Меньше (
- Меньше или равно (
Примеры:
Важные моменты:
- При использовании операторов равенства (== и !=) происходит автоматическое приведение типов, что может привести к неожиданным результатам. Поэтому рекомендуется использовать строгие операторы равенства (=== и !==) для точного сравнения значений.
- Операторы сравнения часто используются в условных операторах (if, else if, switch) и циклах (while, for), позволяя управлять потоком выполнения программы в зависимости от результатов сравнения.
👉 @frontendInterview
Операторы сравнения используются для сравнения двух значений и возвращают логическое значение:
true
(истина), если сравнение верно, и false
(ложь), если нет. Они играют ключевую роль в управлении потоком выполнения программы, позволяя выполнить определённый код в зависимости от результатов сравнения.Виды:
- Равенство (
==
): Проверяет равенство двух значений после приведения их к одному типу. Например, 5 == '5'
вернёт true
.- Не равно (
!=
): Проверяет, не равны ли два значения после приведения их к одному типу. Например, 5 != '5'
вернёт false
.- Строгое равенство (
===
): Проверяет равенство двух значений без приведения типов, то есть значения должны быть одного типа. Например, 5 === '5'
вернёт false
.- Строгое не равенство (
!==
): Проверяет, не равны ли два значения без приведения типов. Например, 5 !== '5'
вернёт true
.- Больше (
>
): Проверяет, больше ли первое значение, чем второе. Например, 5 > 3
вернёт true
.- Больше или равно (
>=
): Проверяет, больше ли первое значение или равно второму. Например, 5 >= 5
вернёт true
.- Меньше (
<
): Проверяет, меньше ли первое значение, чем второе. Например, 3 < 5
вернёт true
.- Меньше или равно (
<=)
: Проверяет, меньше ли первое значение или равно второму. Например, 5 <= 5
вернёт true
.Примеры:
console.log(5 == '5'); // true, потому что значения равны после приведения типов
console.log(5 === '5'); // false, потому что значения разных типов
console.log(5 != '4'); // true, потому что значения не равны после приведения типов
console.log(5 !== '5'); // true, потому что значения разных типов
console.log(5 > 3); // true
console.log(5 >= 5); // true
console.log(3 < 5); // true
console.log(5 <= 5); // true
Важные моменты:
- При использовании операторов равенства (== и !=) происходит автоматическое приведение типов, что может привести к неожиданным результатам. Поэтому рекомендуется использовать строгие операторы равенства (=== и !==) для точного сравнения значений.
- Операторы сравнения часто используются в условных операторах (if, else if, switch) и циклах (while, for), позволяя управлять потоком выполнения программы в зависимости от результатов сравнения.
👉 @frontendInterview
Веб-компоненты в действии
Один из основных факторов, способствующих трансформации интернета в последние годы, – широкое внедрение разработки пользовательского интерфейса на основе компонентов. В этой книге подробно описываются рабочие процессы, которые дают вам полный контроль над стилями и поведением компонентов и существенно упрощают их создание, совместное и повторное использование в проектах.
👉 @frontendInterview
Один из основных факторов, способствующих трансформации интернета в последние годы, – широкое внедрение разработки пользовательского интерфейса на основе компонентов. В этой книге подробно описываются рабочие процессы, которые дают вам полный контроль над стилями и поведением компонентов и существенно упрощают их создание, совместное и повторное использование в проектах.
👉 @frontendInterview
Срочно❗️ Нужны люди, которые имеют минимальный опыт в IT. Покажем, как освоить профессию "Frontend" с зп от 150.000 ₽. Обучение с нас бесплатно!
График: 2-3 часа или полный день, на выбор.
Frontend-разработчик (frontend developer) — это специалист, который отвечает за создание пользовательского интерфейса сайта, приложения или ПО.
Для вас:
1) Удаленная работа
2) Свободный график
Можно совмещать с основной работой🔥
✔️Не нужно что-то продавать или привлекать людей.
✔️За полгода вполне реально вырасти до зп в 300.000 рублей и больше денег.
✔️Мы научим вас искать клиентов, так что у вас уже будет работа.
Сперва проводим бесплатный вводный урок:
👉 Регистрация на урок
На уроке расскажем:
— чем занимается Fronted-разработчик и за что ему готовы платить
— зарплатные вилки разных специалистов от стажёра до тимлида
— сколько времени нужно на обучение и стажировку
— 8 шагов, чтобы стать frontend-разработчиком
Если хотите попробовать себя в одной из самых востребованных профессий в 2024 году, то это ваш шанс! С нами вы сможете научиться этому быстро и уже через пару месяцев найти первых клиентов, а мы с этим поможем!
Регистрируйтесь на бесплатный вводный урок по профессии:
👉 Зарегистрироваться
График: 2-3 часа или полный день, на выбор.
Frontend-разработчик (frontend developer) — это специалист, который отвечает за создание пользовательского интерфейса сайта, приложения или ПО.
Для вас:
1) Удаленная работа
2) Свободный график
Можно совмещать с основной работой🔥
✔️Не нужно что-то продавать или привлекать людей.
✔️За полгода вполне реально вырасти до зп в 300.000 рублей и больше денег.
✔️Мы научим вас искать клиентов, так что у вас уже будет работа.
Сперва проводим бесплатный вводный урок:
👉 Регистрация на урок
На уроке расскажем:
— чем занимается Fronted-разработчик и за что ему готовы платить
— зарплатные вилки разных специалистов от стажёра до тимлида
— сколько времени нужно на обучение и стажировку
— 8 шагов, чтобы стать frontend-разработчиком
Если хотите попробовать себя в одной из самых востребованных профессий в 2024 году, то это ваш шанс! С нами вы сможете научиться этому быстро и уже через пару месяцев найти первых клиентов, а мы с этим поможем!
Регистрируйтесь на бесплатный вводный урок по профессии:
👉 Зарегистрироваться
Насколько вы действительно хороши?
Напишите функцию, которая принимает массив чисел (баллы по предметам) и ваш результат. Верните True, если ваш результат больше среднего значения, иначе False! Примечание: Ваши баллы не включаются в массив. Для вычисления среднего балла добавите свой балл в данный массив!
Пример:
👉 @frontendInterview
Напишите функцию, которая принимает массив чисел (баллы по предметам) и ваш результат. Верните True, если ваш результат больше среднего значения, иначе False! Примечание: Ваши баллы не включаются в массив. Для вычисления среднего балла добавите свой балл в данный массив!
Пример:
betterThanAverage([2, 3], 5) = true
👉 @frontendInterview
Зачем в webpack чанки ?
Чанки используются для оптимизации загрузки и выполнения веб-приложений. Чанки позволяют разделить код приложения на более мелкие, независимые блоки, которые могут быть загружены по мере необходимости или параллельно. Это улучшает производительность приложения, сокращает время начальной загрузки и повышает эффективность использования кэша браузера. Рассмотрим основные причины их использования:
Ленивая загрузка (Lazy Click Me Load More)
Позволяют реализовать ленивую загрузку компонентов или модулей, то есть код загружается только тогда, когда он действительно нужен. Например, компоненты страниц, которые пользователь еще не посетил, могут быть загружены только при их первом запросе. Это снижает объем данных, необходимых для начальной загрузки приложения, и ускоряет его старт.
Разделение кода (Code Splitting)
Позволяет разделять код приложения на чанки с помощью разделения кода. Это может быть автоматическое разделение, основанное на анализе графа зависимостей, или явное, когда разработчик указывает, какие модули или библиотеки следует загружать отдельно. Разделение кода помогает уменьшить размер каждого чанка, что положительно сказывается на времени загрузки.
Кэширование
При правильной настройке чанки могут быть эффективно закэшированы браузером пользователя. Если часть кода приложения меняется редко (например, сторонние библиотеки), её можно выделить в отдельный чанк, который будет загружен один раз и сохранён в кэше браузера на долгое время. Это уменьшает объем данных, которые необходимо загружать при повторных посещениях.
Параллельная загрузка
Браузеры могут загружать несколько чанков параллельно, что ускоряет загрузку всего приложения. Разделение большого приложения на меньшие чанки позволяет браузеру эффективнее использовать пропускную способность сети, загружая множество небольших файлов одновременно, вместо одного большого.
Пример:
В конфигурации Webpack можно настроить разделение кода с помощью
👉 @frontendInterview
Чанки используются для оптимизации загрузки и выполнения веб-приложений. Чанки позволяют разделить код приложения на более мелкие, независимые блоки, которые могут быть загружены по мере необходимости или параллельно. Это улучшает производительность приложения, сокращает время начальной загрузки и повышает эффективность использования кэша браузера. Рассмотрим основные причины их использования:
Ленивая загрузка (Lazy Click Me Load More)
Позволяют реализовать ленивую загрузку компонентов или модулей, то есть код загружается только тогда, когда он действительно нужен. Например, компоненты страниц, которые пользователь еще не посетил, могут быть загружены только при их первом запросе. Это снижает объем данных, необходимых для начальной загрузки приложения, и ускоряет его старт.
Разделение кода (Code Splitting)
Позволяет разделять код приложения на чанки с помощью разделения кода. Это может быть автоматическое разделение, основанное на анализе графа зависимостей, или явное, когда разработчик указывает, какие модули или библиотеки следует загружать отдельно. Разделение кода помогает уменьшить размер каждого чанка, что положительно сказывается на времени загрузки.
Кэширование
При правильной настройке чанки могут быть эффективно закэшированы браузером пользователя. Если часть кода приложения меняется редко (например, сторонние библиотеки), её можно выделить в отдельный чанк, который будет загружен один раз и сохранён в кэше браузера на долгое время. Это уменьшает объем данных, которые необходимо загружать при повторных посещениях.
Параллельная загрузка
Браузеры могут загружать несколько чанков параллельно, что ускоряет загрузку всего приложения. Разделение большого приложения на меньшие чанки позволяет браузеру эффективнее использовать пропускную способность сети, загружая множество небольших файлов одновременно, вместо одного большого.
Пример:
В конфигурации Webpack можно настроить разделение кода с помощью
optimization.splitChunks
, что позволяет автоматически определять и выделять общие модули в отдельные чанки.👉 @frontendInterview
Как можно задать стили только первым двум элементам li?
Anonymous Quiz
3%
li:last-child + li
63%
li:nth-child(-n+2)
34%
li:first-child+li