Почему тебе не дают повышение / новый тайтл
На самом деле, в этом вопросе играют роль два фактора.
Каждый фактор имеет свои аспекты и особенности. Понимая их, ты сможешь достигать своей цели более эффективно, быстрее и без лишнего стресса.
- Первый фактор: бизнес-модель;
- Второй фактор: твоя ценность для бизнеса и твоё позиционирование.
Я разделю эту статью на 2 части. В первой части мы рассмотрим фактор бизнес-модели, а во второй части рассмотрим фактор твоей ценности для бизнеса и то, как ты себя позиционируешь.
👉 @frontendInterview
На самом деле, в этом вопросе играют роль два фактора.
Каждый фактор имеет свои аспекты и особенности. Понимая их, ты сможешь достигать своей цели более эффективно, быстрее и без лишнего стресса.
- Первый фактор: бизнес-модель;
- Второй фактор: твоя ценность для бизнеса и твоё позиционирование.
Я разделю эту статью на 2 части. В первой части мы рассмотрим фактор бизнес-модели, а во второй части рассмотрим фактор твоей ценности для бизнеса и то, как ты себя позиционируешь.
👉 @frontendInterview
Какое из следующих утверждений НЕВЕРНО о undefined в JavaScript?
Anonymous Quiz
18%
undefined - это тип с единственным возможным значением: undefined
29%
Глобальная переменная undefined может быть переопределена
14%
undefined возвращается, если функция не имеет оператора return
39%
undefined - это ключевое слово в JavaScript, как var или let
🤔6👍1
.intersection()
Метод intersection() сравнивает текущую коллекцию с другой и возвращает новую, состоящую из элементов, входящих в обе коллекции.
В математике это называется пересечением двух множеств. Пересечение множеств A и B — это множество, которое состоит из элементов, входящих как в множество А, так и во множество B. Это можно выразить формулой:
Допустим, у нас есть две коллекции чисел. Необходимо сравнить эти коллекции и получить общие, встречающиеся в обеих коллекциях, числа:
👉 @frontendInterview
Метод intersection() сравнивает текущую коллекцию с другой и возвращает новую, состоящую из элементов, входящих в обе коллекции.
В математике это называется пересечением двух множеств. Пересечение множеств A и B — это множество, которое состоит из элементов, входящих как в множество А, так и во множество B. Это можно выразить формулой:
A ∩ B = { x | x ∈ A ∧ x ∈ B }
Допустим, у нас есть две коллекции чисел. Необходимо сравнить эти коллекции и получить общие, встречающиеся в обеих коллекциях, числа:
const num1 = new Set([42, 4, 69, 37, 2])
const num2 = new Set([1, 2, 3, 4])
const inter = num1.intersection(num2)
console.log(inter)
// Set(2) { 2, 4 }
👉 @frontendInterview
👍13❤2🔥1
Наш код. Ремесло, профессия, искусство
Автор: Бугаенко Е.
Быть программистом может быть интересно и весело, но быть разработчиком программного обеспечения — это сущий ад. Компьютеры логичны, люди — нет. Увы, в современной индустрии программного обеспечения не платят за программирование. Платят за разработку программного обеспечения, а это подразумевает выполнение задач в команде — вместе с другими людьми. Команды состоят из своенравных людей, а не из классов и методов 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