tgoop.com »
United States »
Frontend Interview - собеседования по Javascript / Html / Css » Telegram Web
Наш код. Ремесло, профессия, искусство
Автор: Бугаенко Е.
Быть программистом может быть интересно и весело, но быть разработчиком программного обеспечения — это сущий ад. Компьютеры логичны, люди — нет. Увы, в современной индустрии программного обеспечения не платят за программирование. Платят за разработку программного обеспечения, а это подразумевает выполнение задач в команде — вместе с другими людьми. Команды состоят из своенравных людей, а не из классов и методов Java.
Успех программного проекта зависит от умных инженеров, которые зачастую ленивы, невежественны, эгоистичны, раздражительны и попросту несчастны. Успех зависит от людей, которые нередко не умеют общаться, делиться знаниями, руководить и подчиняться, а также следовать указаниям. Он зависит от нашей способности формировать команды и участвовать в их деятельности. А еще от наших социальных навыков — порой в гораздо большей степени, нежели от навыков технических.
👉 @frontendInterview
Автор: Бугаенко Е.
Быть программистом может быть интересно и весело, но быть разработчиком программного обеспечения — это сущий ад. Компьютеры логичны, люди — нет. Увы, в современной индустрии программного обеспечения не платят за программирование. Платят за разработку программного обеспечения, а это подразумевает выполнение задач в команде — вместе с другими людьми. Команды состоят из своенравных людей, а не из классов и методов Java.
Успех программного проекта зависит от умных инженеров, которые зачастую ленивы, невежественны, эгоистичны, раздражительны и попросту несчастны. Успех зависит от людей, которые нередко не умеют общаться, делиться знаниями, руководить и подчиняться, а также следовать указаниям. Он зависит от нашей способности формировать команды и участвовать в их деятельности. А еще от наших социальных навыков — порой в гораздо большей степени, нежели от навыков технических.
👉 @frontendInterview
❤3👍3
CSV representation of array
Создайте функцию, которая принимает двумерный массив и вернет его в формате CSV.
Пример:
input:
output:
👉 @frontendInterview
Создайте функцию, которая принимает двумерный массив и вернет его в формате CSV.
Пример:
input:
[[ 0, 1, 2, 3, 4 ],
[ 10,11,12,13,14 ],
[ 20,21,22,23,24 ],
[ 30,31,32,33,34 ]]
output:
'0,1,2,3,4n'
+'10,11,12,13,14n'
+'20,21,22,23,24n'
+'30,31,32,33,34'
👉 @frontendInterview
👎5👍1
Как увеличить в размере при наведении элемент, не сдвигая соседние?
Чтобы увеличить элемент в размере при наведении, не сдвигая при этом соседние элементы, можно использовать CSS свойство
Пример использования
Объяснение
`transition: transform 0.3s;`: Это свойство добавляет плавный переход для любых изменений, связанных с трансформацией элемента. В данном случае, это применимо к изменению масштаба (
`transform: scale(1.2);`: Эта строка кода увеличивает размер элемента на 20% при наведении (
Контейнер с `display: flex;` Используется для демонстрации того, что элементы остаются на своих местах и не сдвигаются при увеличении одного из них.
👉 @frontendInterview
Чтобы увеличить элемент в размере при наведении, не сдвигая при этом соседние элементы, можно использовать CSS свойство
transform с функцией scale. Это позволяет изменять размер элемента, не влияя на его положение и соседние элементы, так как трансформация происходит в контексте самого элемента и не меняет его фактические размеры в документе.Пример использования
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Увеличение при наведении</title>
<style>
.container {
display: flex;
gap: 10px;
}
.item {
width: 100px;
height: 100px;
background-color: lightblue;
text-align: center;
line-height: 100px;
transition: transform 0.3s;
}
.item:hover {
transform: scale(1.2); /* Увеличение размера при наведении */
}
</style>
</head>
<body>
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
</body>
</html>
Объяснение
`transition: transform 0.3s;`: Это свойство добавляет плавный переход для любых изменений, связанных с трансформацией элемента. В данном случае, это применимо к изменению масштаба (
transform: scale(1.2)), которое происходит при наведении.`transform: scale(1.2);`: Эта строка кода увеличивает размер элемента на 20% при наведении (
hover). Значение 1.2 означает увеличение на 20% по обеим осям (X и Y).Контейнер с `display: flex;` Используется для демонстрации того, что элементы остаются на своих местах и не сдвигаются при увеличении одного из них.
gap добавляет пространство между элементами.👉 @frontendInterview
👍10
Хочешь прокачать навыки программирования за 3 дня? Присоединяйся к праздничному интенсиву от METHED!
Ты создашь веб-приложение для отображения расписания автобусов в реальном времени, используя Node.js и JavaScript.
На интенсиве ты:
- Научишься создавать сервер на Node.js
- Разработаешь интерактивный интерфейс с помощью JavaScript
- Интегрируешь WebSocket для работы в реальном времени
- Научишься развертывать свои проекты на хостинге.
Количество мест ограничено!
Регистрируйся сейчас и прокачай свои навыки: https://tglink.io/37357a541bc9
Ты создашь веб-приложение для отображения расписания автобусов в реальном времени, используя Node.js и JavaScript.
На интенсиве ты:
- Научишься создавать сервер на Node.js
- Разработаешь интерактивный интерфейс с помощью JavaScript
- Интегрируешь WebSocket для работы в реальном времени
- Научишься развертывать свои проекты на хостинге.
Количество мест ограничено!
Регистрируйся сейчас и прокачай свои навыки: https://tglink.io/37357a541bc9
👍5
Какая из перечисленных структур данных является неизменяемой в JavaScript?
Anonymous Quiz
12%
Объекты
3%
Массивы
44%
Строки
41%
Map
Как сделать перенос слов?
Переносы слов в тексте используются для разбиения длинных слов, когда они не помещаются на одной строке. Переносы делают текст удобнее для чтения, облегчают восприятие информации и оптимальнее распределяют слова в абзаце.
HTML переносит слова на другую строку целиком, без учёта правил расстановки переносов. Из-за этого правый край абзаца выглядит неровным и напоминает «лесенку»
Выравнивание текста по ширине убирает неровность правого края, но между некоторыми словами появляются слишком широкие промежутки.
Расстановка переносов слов позволяет оптимизировать пробелы между словами и повысить эстетическую привлекательность блока текста. Есть несколько вариантов как этого добиться: с помощью элемента <wbr>, используя спецсимвол ­ и через свойство hyphens.
Использование элемента <wbr>
Элемент <wbr> ставится в тех местах, где предполагается возможный перенос. Браузер уже сам, в зависимости от расположения текста решает, делать перенос в этом месте или нет
У <wbr> есть определённые недостатки, в частности, при переносе не добавляется дефис, обозначающий перенос.
Использование спецсимвола ­
Спецсимвол ­ начинается со знака амперсанда (&) и завершается точкой с запятой. Работает этот спецсимвол схожим с <wbr> образом — там, где в тексте встречается ­, браузер при необходимости добавляет перенос слова. Обратите внимание, что ­ при переносе слов добавляет символ дефиса.
Использование свойства hyphens
Перечисленные выше методы имеют один минус — это ручная расстановка переносов в тексте. Свойство hyphens же задействует встроенный в браузер словарь, в котором, в том числе, указаны правила переноса множества слов.
Чтобы браузер понимал, с каким языком и словарём он должен работать, к тексту следует добавить атрибут lang с кодом языка. К примеру, кодом русского языка будет ru
Если на сайте предполагается один язык (к примеру, весь сайт только на русском), то атрибут lang пишется в элементе <html>. В случае использования нескольких языков, lang добавляется к абзацу <p> или другому подходящему текстовому элементу.
Для автоматической работы свойство hyphens задаём со значением auto и добавляем это свойство к абзацу
👉 @frontendInterview
Переносы слов в тексте используются для разбиения длинных слов, когда они не помещаются на одной строке. Переносы делают текст удобнее для чтения, облегчают восприятие информации и оптимальнее распределяют слова в абзаце.
HTML переносит слова на другую строку целиком, без учёта правил расстановки переносов. Из-за этого правый край абзаца выглядит неровным и напоминает «лесенку»
Выравнивание текста по ширине убирает неровность правого края, но между некоторыми словами появляются слишком широкие промежутки.
Расстановка переносов слов позволяет оптимизировать пробелы между словами и повысить эстетическую привлекательность блока текста. Есть несколько вариантов как этого добиться: с помощью элемента <wbr>, используя спецсимвол ­ и через свойство hyphens.
Использование элемента <wbr>
Элемент <wbr> ставится в тех местах, где предполагается возможный перенос. Браузер уже сам, в зависимости от расположения текста решает, делать перенос в этом месте или нет
У <wbr> есть определённые недостатки, в частности, при переносе не добавляется дефис, обозначающий перенос.
Использование спецсимвола ­
Спецсимвол ­ начинается со знака амперсанда (&) и завершается точкой с запятой. Работает этот спецсимвол схожим с <wbr> образом — там, где в тексте встречается ­, браузер при необходимости добавляет перенос слова. Обратите внимание, что ­ при переносе слов добавляет символ дефиса.
Использование свойства hyphens
Перечисленные выше методы имеют один минус — это ручная расстановка переносов в тексте. Свойство hyphens же задействует встроенный в браузер словарь, в котором, в том числе, указаны правила переноса множества слов.
Чтобы браузер понимал, с каким языком и словарём он должен работать, к тексту следует добавить атрибут lang с кодом языка. К примеру, кодом русского языка будет ru
Если на сайте предполагается один язык (к примеру, весь сайт только на русском), то атрибут lang пишется в элементе <html>. В случае использования нескольких языков, lang добавляется к абзацу <p> или другому подходящему текстовому элементу.
Для автоматической работы свойство hyphens задаём со значением auto и добавляем это свойство к абзацу
👉 @frontendInterview
👍6❤2
Как подружить веб-компоненты и JS-фреймворки
У крупных технокомпаний, как правило, есть множество ИТ-продуктов. Разрабатывают их, обычно, не одни и те же люди, целые группы команд. При этом фронтенд во всех этих продуктах обычно пишут на одних и тех же технологиях: берут готовый шаблон, что-нибудь обновляют — и готово. А что делать, если все эти продукты написаны на разных фреймворках? Конечно, можно сделать десяток UI-наборов на все случаи жизни, но будет крайне дорого их писать и поддерживать.
Могут ли веб-компоненты помочь разрешить эту проблему? Ответ в статье.
👉 @frontendInterview
У крупных технокомпаний, как правило, есть множество ИТ-продуктов. Разрабатывают их, обычно, не одни и те же люди, целые группы команд. При этом фронтенд во всех этих продуктах обычно пишут на одних и тех же технологиях: берут готовый шаблон, что-нибудь обновляют — и готово. А что делать, если все эти продукты написаны на разных фреймворках? Конечно, можно сделать десяток UI-наборов на все случаи жизни, но будет крайне дорого их писать и поддерживать.
Могут ли веб-компоненты помочь разрешить эту проблему? Ответ в статье.
👉 @frontendInterview
Какой из следующих компонентов MVC отвечает за взаимодействие с пользователем и обработку его действий?
Anonymous Quiz
8%
Model (Модель)
42%
View (Представление)
48%
Controller (Контроллер)
2%
Database (База данных)
Что такое миксины в CSS препроцессорах?
Миксины Используются в препроцессорах, таких как Sass и Less, для группировки CSS-деклараций, которые можно повторно использовать во всем стилевом файле. Это упрощает поддержку и изменение стилей, позволяя избежать повторения кода.
Пример использования в Sass:
Миксины позволяют избежать дублирования кода и способствуют более чистой, модульной и легко поддерживаемой кодовой базе. В программировании и веб-разработке миксины представляют собой мощный инструмент для повышения эффективности и улучшения архитектуры проектов.
👉 @frontendInterview
Миксины Используются в препроцессорах, таких как Sass и Less, для группировки CSS-деклараций, которые можно повторно использовать во всем стилевом файле. Это упрощает поддержку и изменение стилей, позволяя избежать повторения кода.
Пример использования в Sass:
@mixin border-radius($radius) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
-ms-border-radius: $radius;
border-radius: $radius;
}
.button {
@include border-radius(10px);
}
Миксины позволяют избежать дублирования кода и способствуют более чистой, модульной и легко поддерживаемой кодовой базе. В программировании и веб-разработке миксины представляют собой мощный инструмент для повышения эффективности и улучшения архитектуры проектов.
👉 @frontendInterview
👍7👎4
React быстро
«React быстро. 2-е издание» предлагает уникальный подход к освоению фреймворка React. Более 80 компактных примеров проведут читателя от изучения основ работы к созданию довольно сложных приложений. В книге подробно описаны многие функциональные компоненты, хуки React и средства доступности веб-приложений, а также представлены интересные проекты для отработки новых навыков.
👉 @frontendInterview
«React быстро. 2-е издание» предлагает уникальный подход к освоению фреймворка React. Более 80 компактных примеров проведут читателя от изучения основ работы к созданию довольно сложных приложений. В книге подробно описаны многие функциональные компоненты, хуки React и средства доступности веб-приложений, а также представлены интересные проекты для отработки новых навыков.
👉 @frontendInterview
👍1
Find the Missing Number
Вам дан неотсортированный массив, состоящий из чисел от 0 до 100. Но одного числа не хватает, найдите это число.
👉 @frontendInterview
Вам дан неотсортированный массив, состоящий из чисел от 0 до 100. Но одного числа не хватает, найдите это число.
👉 @frontendInterview
👎2
Что такое замыкание ?
Это когда функция запоминает своё лексическое окружение даже после того, как она выполняется вне своей области видимости. Другими словами, функция, объявленная в определённой области видимости, сохраняет доступ к переменным этой области, даже когда она вызывается за пределами своего первоначального контекста. Это важно по нескольким причинам:
- Позволяют скрыть переменные внутри функции, делая их недоступными извне, кроме как через другую функцию, созданную в той же области видимости.
- Позволяют сохранять состояние между вызовами функции, без использования глобальных переменных.
- Облегчают каррирование и другие техники функционального программирования, позволяя функциям работать с переменными, которые были в их области видимости в момент создания.
Пример:
В этом примере, функция увеличить имеет доступ к переменной количество, даже после того как создатьСчетчик завершила выполнение. Это происходит благодаря механизму замыканий: увеличить "запоминает" переменные, которые были в её области видимости в момент создания.
👉 @frontendInterview
Это когда функция запоминает своё лексическое окружение даже после того, как она выполняется вне своей области видимости. Другими словами, функция, объявленная в определённой области видимости, сохраняет доступ к переменным этой области, даже когда она вызывается за пределами своего первоначального контекста. Это важно по нескольким причинам:
- Позволяют скрыть переменные внутри функции, делая их недоступными извне, кроме как через другую функцию, созданную в той же области видимости.
- Позволяют сохранять состояние между вызовами функции, без использования глобальных переменных.
- Облегчают каррирование и другие техники функционального программирования, позволяя функциям работать с переменными, которые были в их области видимости в момент создания.
Пример:
function создатьСчетчик() {
let количество = 0; // переменная количество "замкнута" внутри функции увеличить
function увеличить() {
количество += 1;
return количество;
}
return увеличить;
}
const счетчик = создатьСчетчик();
console.log(счетчик()); // 1
console.log(счетчик()); // 2
В этом примере, функция увеличить имеет доступ к переменной количество, даже после того как создатьСчетчик завершила выполнение. Это происходит благодаря механизму замыканий: увеличить "запоминает" переменные, которые были в её области видимости в момент создания.
👉 @frontendInterview
👍6👎2🤔2
👍1
Как сделать фон полупрозрачным?
Для создания цветного фона разной степени прозрачности применяется свойство background или background-color, в качестве значения указывается функция rgba(), в которой цвет задаётся четырьмя параметрами: красная, зелёная, синяя составляющая цвета и уровень прозрачности. Значение 0 соответствует полной прозрачности, 1 — непрозрачности, а промежуточное значение вроде 0.5 — полупрозрачности.
Чтобы полупрозрачность элемента была заметна, под него следует подложить фоновую картинку. В примере на картинке для веб-страницы установлено фиксированное фоновое изображение и добавлен <div> с классом overlay, для которого задан белый фон с уровнем прозрачности 0.8.
👉 @frontendInterview
Для создания цветного фона разной степени прозрачности применяется свойство background или background-color, в качестве значения указывается функция rgba(), в которой цвет задаётся четырьмя параметрами: красная, зелёная, синяя составляющая цвета и уровень прозрачности. Значение 0 соответствует полной прозрачности, 1 — непрозрачности, а промежуточное значение вроде 0.5 — полупрозрачности.
Чтобы полупрозрачность элемента была заметна, под него следует подложить фоновую картинку. В примере на картинке для веб-страницы установлено фиксированное фоновое изображение и добавлен <div> с классом overlay, для которого задан белый фон с уровнем прозрачности 0.8.
👉 @frontendInterview
Один день из жизни JavaScript разработчика и его техлида
По долгу службы я очень много времени трачу на ревью кода своей команды. Ревью кода на столько глубоко вошло в мою жизнь, что отрывок из одного из них я решил переложить на бумагу.
В этой небольшой заметке вашему вниманию предлагается диалог разработчика и его лида на код ревью. Посмотрим, как они приходят к финальному решению, какие стадии претерпевает код в процессе рефакторинга, как рассуждают лид и его подопечный и какое красивое итоговое решение у них получится.
👉 @frontendInterview
По долгу службы я очень много времени трачу на ревью кода своей команды. Ревью кода на столько глубоко вошло в мою жизнь, что отрывок из одного из них я решил переложить на бумагу.
В этой небольшой заметке вашему вниманию предлагается диалог разработчика и его лида на код ревью. Посмотрим, как они приходят к финальному решению, какие стадии претерпевает код в процессе рефакторинга, как рассуждают лид и его подопечный и какое красивое итоговое решение у них получится.
👉 @frontendInterview
👍4❤1
Можно ли получить ширину и высоту экрана в CSS, не используя JavaScript?
Anonymous Quiz
79%
Да
21%
Нет