JavaScript задачи с собеседований - канал на котором публикуются интересные задачки по JavaScript. Так же react, vue, angular, node.js
Тематика канала :
— cинтаксис,
— условные операторы, переменные и типы данных,
— функции и функциональные выражения,
— циклы, взаимодействие с пользователем,
— строки, массивы.
Проверь свои знания языка на @javanoscriptquiz
#реклама
Тематика канала :
— cинтаксис,
— условные операторы, переменные и типы данных,
— функции и функциональные выражения,
— циклы, взаимодействие с пользователем,
— строки, массивы.
Проверь свои знания языка на @javanoscriptquiz
#реклама
👎1
Как удалить дубли из массива?
Используйте new Set() и spread оператор.
👉 @frontendInterview
Используйте new Set() и spread оператор.
const removeDuplicateItems = arr => [...new Set(arr)];
removeDuplicateItems([42, 'foo', 42, 'foo', true, true]);
// [42, "foo", true]👉 @frontendInterview
Графика на JavaScript
В этой книге рассказывается, как, работая с JavaScript, jQuery, DHTML и элементом Canvas (холст), появившимся в HTML5, создавать насыщенные веб-приложения для ПК и мобильных устройств. С появлением HTML5 и усовершенствованной браузерной поддержки язык JavaScript стал исключительно удобным для создания высокопроизводительной веб-графики.
👉 @frontendInterview
В этой книге рассказывается, как, работая с JavaScript, jQuery, DHTML и элементом Canvas (холст), появившимся в HTML5, создавать насыщенные веб-приложения для ПК и мобильных устройств. С появлением HTML5 и усовершенствованной браузерной поддержки язык JavaScript стал исключительно удобным для создания высокопроизводительной веб-графики.
👉 @frontendInterview
validate PIN code
Создайте регулярное выражение, которое будет валидировать пин-код для банкомата. Код может состоять из 4 или 6 цифр.
Примеры:
👉 @frontendInterview
Создайте регулярное выражение, которое будет валидировать пин-код для банкомата. Код может состоять из 4 или 6 цифр.
Примеры:
"1234" --> true
"12345" --> false
"a234" --> false👉 @frontendInterview
Как извлечь вложенное свойство объекта, без риска получить ошибку Uncaught TypeError: Cannot read property 'bar' of undefined?
Несколько способов решения:
Проверять предыдущее значение на undefined с оператором &&:
👉 @frontendInterview
Несколько способов решения:
Проверять предыдущее значение на undefined с оператором &&:
const info = data && data.user && data.user.personalInfoСоздавать страховочный объект, если значение undefined:
const info = ((data || {}).user || {}).personalInfo
Использовать хелпер, или библиотеку:const getNestedObject = (nestedObj, pathArr) =>Proposal Optional Chaining:
pathArr.reduce(
(obj, key) => (obj && obj[key] !== 'undefined') ? obj[key] : undefined,
nestedObj
);
const info = getNestedObject(data, ['user', 'personalInfo']);
const info = data?.user?.personalInfo;👉 @frontendInterview
Gurufy облегчает изучение React.js разработки.
C помощью крутых short гайдов вы можете изучить весь стек React.js быстро и легко.
Официальный сайт - https://gurufy.dev/
На данный момент доступны курсы по: Next.js, TypeScript, Jest, React Testing Library и другие.
C помощью крутых short гайдов вы можете изучить весь стек React.js быстро и легко.
Официальный сайт - https://gurufy.dev/
На данный момент доступны курсы по: Next.js, TypeScript, Jest, React Testing Library и другие.
Что такое at-rules в CSS?
At-rules это CSS операторы, которые показывают CSS как себя вести. Они начинаются со знака @ и заканчиваются знаком ;
Наиболее известны из них:
👉 @frontendInterview
At-rules это CSS операторы, которые показывают CSS как себя вести. Они начинаются со знака @ и заканчиваются знаком ;
Наиболее известны из них:
@media - правила стилей для определенного медиа запроса@font-face - (описывает аспект внешнего шрифта для загрузки)👉 @frontendInterview
Что такое доступность и как её обеспечить?
Доступность дает возможность пользоваться сайтом не только мышью, но и клавиатурой, и делает сайт работоспособным на различных устройствах (мобильный, планшет, читалки и других устройствах). Сайт должен быть доступен для всех.
Lang
Всегда указывайте язык документа:
Можно прятать контент от экранных читалок с помощью атрибута hidden.
Вы можете обеспечить поддержку старых браузеров, просто добавив в CSS фоллбэк.
Используйте alt для описания картинок. Если картинка декоративная, используйте пустой alt.
Пустой alt означает, что изображение является ключевой частью контента, но для него нет текстового эквивалента.
Пустая строка означает, что это не ключевой контент и специфический браузер имеет право его не отображать.
Используйте элемент button для кнопок. Преимущества:
1) Возможность фокусировки
2) Кликабельность (мышкой или клавиатурой)
3) Экранные читалки идентифицируют их как кнопки!
Заголовки
Структурирование разметки с помощью заголовков (h1-h6). Некоторые читалки поддерживают перемещение по заголовкам. Заголовки нужны для правильного озвучивания структуры и навигации.
Тематические секции (семантические теги)
Подробнее
Нужно размечать тематические секции при помощи HTML5 тегов (<article>, <aside>, <nav>, <section>).
Секционные элементы (<section>) не являются прямой заменой элементу <div>. Используйте их для разметки больших кусков связанного контента, отличающегося от остального контента на странице. Это поможет различным устройствам, а так же поисковым роботам правильно "видеть" сайт.
👉 @frontendInterview
Доступность дает возможность пользоваться сайтом не только мышью, но и клавиатурой, и делает сайт работоспособным на различных устройствах (мобильный, планшет, читалки и других устройствах). Сайт должен быть доступен для всех.
Lang
Всегда указывайте язык документа:
<html lang="ru">Hidden
…
</html>
Можно прятать контент от экранных читалок с помощью атрибута hidden.
Вы можете обеспечить поддержку старых браузеров, просто добавив в CSS фоллбэк.
[hidden] {
display: none;
}
AltИспользуйте alt для описания картинок. Если картинка декоративная, используйте пустой alt.
Пустой alt означает, что изображение является ключевой частью контента, но для него нет текстового эквивалента.
Пустая строка означает, что это не ключевой контент и специфический браузер имеет право его не отображать.
<img src="decorative_image.jpg" alt="">Button
Используйте элемент button для кнопок. Преимущества:
1) Возможность фокусировки
2) Кликабельность (мышкой или клавиатурой)
3) Экранные читалки идентифицируют их как кнопки!
Заголовки
Структурирование разметки с помощью заголовков (h1-h6). Некоторые читалки поддерживают перемещение по заголовкам. Заголовки нужны для правильного озвучивания структуры и навигации.
Тематические секции (семантические теги)
Подробнее
Нужно размечать тематические секции при помощи HTML5 тегов (<article>, <aside>, <nav>, <section>).
Секционные элементы (<section>) не являются прямой заменой элементу <div>. Используйте их для разметки больших кусков связанного контента, отличающегося от остального контента на странице. Это поможет различным устройствам, а так же поисковым роботам правильно "видеть" сайт.
👉 @frontendInterview
👍1
👍2
Algorithms for Optimization (2019)
Книга представляет собой комплексное введение в оптимизацию с упором на практические алгоритмы проектирования инженерных систем. Авторы подходят к оптимизации с инженерной точки зрения, где целью является разработка системы, которая оптимизирует набор метрик с учетом ограничений.
👉 @frontendInterview
Книга представляет собой комплексное введение в оптимизацию с упором на практические алгоритмы проектирования инженерных систем. Авторы подходят к оптимизации с инженерной точки зрения, где целью является разработка системы, которая оптимизирует набор метрик с учетом ограничений.
👉 @frontendInterview