Найти пропавшую букву
Напишите функцию, которая принимает массив букв в алфавитном порядке, следующие друг за другом. При этом одна буква будет пропущена. Функция должна вернуть пропущенную букву.
Примеры:
👉 @frontendInterview
Напишите функцию, которая принимает массив букв в алфавитном порядке, следующие друг за другом. При этом одна буква будет пропущена. Функция должна вернуть пропущенную букву.
Примеры:
["a","b","c","d","f"] -> "e"
["O","Q","R","S"] -> "P"👉 @frontendInterview
👍2
Как работать с датами и временем в JavaScript?
В JS есть встроенный объект: Date. Он содержит дату и время, а также предоставляет методы управления ими.
Например, его можно использовать для хранения времени создания/изменения, для измерения времени или просто для вывода текущей даты.
Для создания нового объекта Date нужно вызвать конструктор new Date()
Без аргументов – создать объект Date с текущими датой и временем:
Больше про объект Date можно узнать в статье.
👉 @frontendInterview
В JS есть встроенный объект: Date. Он содержит дату и время, а также предоставляет методы управления ими.
Например, его можно использовать для хранения времени создания/изменения, для измерения времени или просто для вывода текущей даты.
Для создания нового объекта Date нужно вызвать конструктор new Date()
Без аргументов – создать объект Date с текущими датой и временем:
let now = new Date();
alert( now ); // показывает текущие дату и время
Существуют методы получения года, месяца и т.д. из объекта Date:getFullYear()Получить год (4 цифры)
getMonth()Получить месяц, от 0 до 11.
getDate()Получить день месяца, от 1 до 31, что несколько противоречит названию метода.
getHours(), getMinutes(), getSeconds(), getMilliseconds()Получить, соответственно, часы, минуты, секунды или миллисекунды.
Больше про объект Date можно узнать в статье.
👉 @frontendInterview
👍8
😱14👍13
Почему не стоит использовать краткую запись свойств CSS?
Существует небольшая, но на удивление важная проблема, которую я часто замечал в коде других людей — это использование краткой записи свойств CSS.
Когда мы пишем что-то вроде этого:
CSS
Почти все проблемы, баги и регрессии в CSS происходят из-за того, что мы делаем слишком многое слишком рано, а через некоторое время сталкиваемся с последствиями этого. Из этого факта следует один простой вывод: в CSS вам нужно делать лишь то, что нужно и ничего более.
👉 @frontendInterview
Существует небольшая, но на удивление важная проблема, которую я часто замечал в коде других людей — это использование краткой записи свойств CSS.
Когда мы пишем что-то вроде этого:
.btn {
background: red;
}
Мы всего лишь хотим, чтобы у нашей кнопки был красный фоновый цвет. Но на самом деле мы задаем целый набор правил:CSS
.btn {
background-image: initial;
background-position-x: initial;
background-position-y: initial;
background-size: initial;
background-repeat-x: initial;
background-repeat-y: initial;
background-attachment: initial;
background-origin: initial;
background-clip: initial;
background-color: red;
}
За счет простого использования краткой записи, мы безоговорочно решили, что не хотим использовать фоновое изображение, заодно указав для него стартовую позицию с левого верхнего края, повторение по осям x и y и прокрутку вместе с элементом и т.д.Почти все проблемы, баги и регрессии в CSS происходят из-за того, что мы делаем слишком многое слишком рано, а через некоторое время сталкиваемся с последствиями этого. Из этого факта следует один простой вывод: в CSS вам нужно делать лишь то, что нужно и ничего более.
👉 @frontendInterview
👍36❤3👏2
Какое ключевое слово нужно применить, чтобы сделать свойство модифицируемым только при создании объекта? (TypeScript)
Anonymous Quiz
31%
static
35%
readonly
16%
const
18%
implements
👍5🤔4👎1
Чем object.freeze() отличается от object.seal()?
Anonymous Quiz
67%
Запрещает изменение любых существующих свойств
7%
Запрещает удаление свойств
11%
Запрещает добавление свойств
15%
Запрещает изменять прототип
👍7
Почему стоит использовать семантические теги в верстке?
Семантическая вёрстка — подход к разметке, который опирается не на внешний вид сайта, а на смысловое предназначение каждого блока и логическую структуру документа.
Почему семантика важна?
Чтобы сделать сайт доступным. Для незрячих людей основной инструмент для просмотра сайтов не браузер, который отрисовывает страницу, а скринридер, который читает текст со страницы вслух.
Этот инструмент «зачитывает» содержимое страницы, и семантическая структура помогает ему лучше определять, какой сейчас блок, а пользователю понимать, о чём идёт речь.
Чтобы сайт был выше в поисковиках. Компании, которые создают поисковики, не разглашают правила ранжирования, но известно, что наличие семантической разметки страниц помогает поисковым ботам лучше понимать, что находится на странице, и в зависимости от этого ранжировать сайты в поисковой выдаче.
Семантика прописана в стандартах. Многие разработчики по старинке пользуются конструкциями типа <div id="nav"> для обозначения навигации или других структурных элементов страницы. Тем временем в стандарте HTML есть несколько семантических тегов, которые рекомендуется использовать для разметки страниц вместо <div> и <span>. В спецификации для каждого семантического элемента описана его роль.
👉 @frontendInterview
Семантическая вёрстка — подход к разметке, который опирается не на внешний вид сайта, а на смысловое предназначение каждого блока и логическую структуру документа.
Почему семантика важна?
Чтобы сделать сайт доступным. Для незрячих людей основной инструмент для просмотра сайтов не браузер, который отрисовывает страницу, а скринридер, который читает текст со страницы вслух.
Этот инструмент «зачитывает» содержимое страницы, и семантическая структура помогает ему лучше определять, какой сейчас блок, а пользователю понимать, о чём идёт речь.
Чтобы сайт был выше в поисковиках. Компании, которые создают поисковики, не разглашают правила ранжирования, но известно, что наличие семантической разметки страниц помогает поисковым ботам лучше понимать, что находится на странице, и в зависимости от этого ранжировать сайты в поисковой выдаче.
Семантика прописана в стандартах. Многие разработчики по старинке пользуются конструкциями типа <div id="nav"> для обозначения навигации или других структурных элементов страницы. Тем временем в стандарте HTML есть несколько семантических тегов, которые рекомендуется использовать для разметки страниц вместо <div> и <span>. В спецификации для каждого семантического элемента описана его роль.
👉 @frontendInterview
👍17
jаvanoscript для начинающих, 6-е издание
Цветное руководство по jаvanoscript для начинающих позволит в короткое время освоить этот язык программирования и приступить к созданию красивых и функциональных сайтов. Вся информация представлена схематично и снабжена наглядными примерами, а код и другие элементы, необходимые для обучения, читатели могут скачать и использовать совершенно бесплатно.
👉 @frontendInterview
Цветное руководство по jаvanoscript для начинающих позволит в короткое время освоить этот язык программирования и приступить к созданию красивых и функциональных сайтов. Вся информация представлена схематично и снабжена наглядными примерами, а код и другие элементы, необходимые для обучения, читатели могут скачать и использовать совершенно бесплатно.
👉 @frontendInterview
👍9
Smart Sum
Ваша задача — написать функцию smartSum, которая возвращает сумму произвольного количества аргументов. Но будьте осторожны, некоторые из ваших аргументов могут быть массивами чисел или вложенными массивами.
Примеры:
👉 @frontendInterview
Ваша задача — написать функцию smartSum, которая возвращает сумму произвольного количества аргументов. Но будьте осторожны, некоторые из ваших аргументов могут быть массивами чисел или вложенными массивами.
Примеры:
smartSum(1,2,3,[4,5],6); // returns 21
smartSum(1,2,[[3,4],5],6); // returns 21👉 @frontendInterview
Что такое кортеж в TypeScript?
Кортежи похожи на массивы с одним ключевым отличием. В кортежах можно указать тип каждого конкретного элемента. Нужно перечислить все типы в квадратных скобках, тем самым присвоив их каждой позиции.
// определение кортежа - кортеж состоит из двух элементов - строки и числа
// использование кортежа
👉 @frontendInterview
Кортежи похожи на массивы с одним ключевым отличием. В кортежах можно указать тип каждого конкретного элемента. Нужно перечислить все типы в квадратных скобках, тем самым присвоив их каждой позиции.
// определение кортежа - кортеж состоит из двух элементов - строки и числа
let userInfo: [string, number];
// инициализация кортежаuserInfo = ["Tom", 28];// Неправильная инициализация - переданные значения не соответствуют типам по позиции
userInfo = [28, "Tom"]; // Ошибка
// использование кортежа
console.log(userInfo[1]); // 28
userInfo[1] = 37;👉 @frontendInterview
👍14👎3
👍19😱4
Что такое GraphQL?
Это язык запросов и интерфейс для получения данных, который был разработан Facebook в 2012 году. Он предлагает универсальный способ запрашивать и получать данные из различных источников, таких как REST API или базы данных.
Он отличается от REST тем, что в ответ на запрос можно получить только необходимые данные, а не всю сущность. Например, если вам нужны только имя и возраст пользователя, вы можете отправить запрос с этими полями, а не получить всю сущность пользователя.
Пример запроса, который запрашивает имя и возраст пользователя с ID 1:
👉 @frontendInterview
Это язык запросов и интерфейс для получения данных, который был разработан Facebook в 2012 году. Он предлагает универсальный способ запрашивать и получать данные из различных источников, таких как REST API или базы данных.
Он отличается от REST тем, что в ответ на запрос можно получить только необходимые данные, а не всю сущность. Например, если вам нужны только имя и возраст пользователя, вы можете отправить запрос с этими полями, а не получить всю сущность пользователя.
Пример запроса, который запрашивает имя и возраст пользователя с ID 1:
query {
user(id: 1) {
name
age
}
}
GraphQL также имеет систему типов для определения схемы данных на бэкенде и фронтенде, что сокращает количество багов при создании интеграции между бэком и фронтом.👉 @frontendInterview
👍12
Каково значение свойства display у HTML элемента noscript?
Anonymous Quiz
16%
initial
7%
inline-block
49%
none
19%
block
10%
inline
👎24👍10😁2
Как вы отлаживаете и отлавливаете ошибки в TypeScript коде?
- Первым шагом для отладки может быть использование консоли браузера или инструментов разработчика, чтобы просмотреть вывод и ошибки JavaScript-кода, который был сгенерирован из TypeScript.
- Другой метод отладки - использование breakpoints и отладчика в среде разработки, такой как Visual Studio Code, который позволяет просматривать и изменять переменные во время выполнения.
- Использование сообщений об ошибках TypeScript и их детализация может быть очень полезна для определения и исправления проблем.
- И последний метод отладки - использование тестов для проверки кода и обнаружения ошибок в автоматическом режиме.
👉 @frontendInterview
- Первым шагом для отладки может быть использование консоли браузера или инструментов разработчика, чтобы просмотреть вывод и ошибки JavaScript-кода, который был сгенерирован из TypeScript.
- Другой метод отладки - использование breakpoints и отладчика в среде разработки, такой как Visual Studio Code, который позволяет просматривать и изменять переменные во время выполнения.
- Использование сообщений об ошибках TypeScript и их детализация может быть очень полезна для определения и исправления проблем.
- И последний метод отладки - использование тестов для проверки кода и обнаружения ошибок в автоматическом режиме.
👉 @frontendInterview
👎4