Чемпионат для подростков по 14 направлениям от «Алабуга Политех»☺️
Программирование и Битва роботов, Экономика и Юриспруденция, 3D моделирование и Английский язык и многое другое, чтобы каждый нашел свою дисциплину.
Для участия тебе нужно☺️
☺️ Оставь заявку на сайте😀
☺️ Пройди заочный этап на HR-платформе: Business Cats до 1,0 по «Общению» и «Аналитике» для оплаты дороги туда и обратно😀
☺️ Приезжай на чемпионат😀
Мы предлагаем тебе☺️
☺️ Общий призовой фонд турнира составляет 450 000 рублей😀
☺️ Проживание и дорога бесплатно😀
☺️ Возможность поступить в «Алабуга Политех»😀
Участвуй в турнире от образовательного центра мирового уровня и получай призы и преимущество в поступлении☺️
Программирование и Битва роботов, Экономика и Юриспруденция, 3D моделирование и Английский язык и многое другое, чтобы каждый нашел свою дисциплину.
Для участия тебе нужно
Мы предлагаем тебе
Участвуй в турнире от образовательного центра мирового уровня и получай призы и преимущество в поступлении
Please open Telegram to view this post
VIEW IN TELEGRAM
👎1
This media is not supported in your browser
VIEW IN TELEGRAM
Throttle на примере изменения страницы при прокрутке
На современных сайтах встречаются элементы, которые обновляются по мере прокрутки страницы или при изменении её размеров.
Просто запускать сложные и дорогостоящие операции на события scroll и resize — расточительно, потому что это может сильно нагрузить браузер и плохо сказаться на производительности.
Вместо этого можно обрабатывать изменения «раз в какое-то количество времени», используя throttle.
👉 @frontendInterview
На современных сайтах встречаются элементы, которые обновляются по мере прокрутки страницы или при изменении её размеров.
Просто запускать сложные и дорогостоящие операции на события scroll и resize — расточительно, потому что это может сильно нагрузить браузер и плохо сказаться на производительности.
Вместо этого можно обрабатывать изменения «раз в какое-то количество времени», используя throttle.
👉 @frontendInterview
Почему первые дни новичка решают всё
Адаптация новых сотрудников влечет за собой определенный стресс и дискомфорт как у нового работника, так и у компании, что имеет прямые экономические последствия для бизнеса. В некоторых компаниях, с которыми я работал текучесть на испытательном сроке могла достигать 23%. Новички не смогли вникуть в рабочие процессы, не понимали корпоративную культуру, поэтому руководители были недовольны, и заводили новые заявки на подбор. А в текущих условиях рынка труда затраты на подбор одного сотрудника могут достигать значительных сумм.
👉 @frontendInterview
Адаптация новых сотрудников влечет за собой определенный стресс и дискомфорт как у нового работника, так и у компании, что имеет прямые экономические последствия для бизнеса. В некоторых компаниях, с которыми я работал текучесть на испытательном сроке могла достигать 23%. Новички не смогли вникуть в рабочие процессы, не понимали корпоративную культуру, поэтому руководители были недовольны, и заводили новые заявки на подбор. А в текущих условиях рынка труда затраты на подбор одного сотрудника могут достигать значительных сумм.
👉 @frontendInterview
👍2
Для чего скрипт подключают в концe body?
Основная причина – ускорение загрузки страницы и избежание блокировки рендеринга.
Когда браузер загружает HTML, он читает код сверху вниз. Если в
Проблема: блокировка рендеринга
Если скрипт загружается в
Решение: подключение в конце `<body>`
Если разместить
Альтернативы: `defer` и `async`
👉 @frontendInterview
Основная причина – ускорение загрузки страницы и избежание блокировки рендеринга.
Когда браузер загружает HTML, он читает код сверху вниз. Если в
<head> встречается <script>, браузер останавливает разбор HTML, загружает и выполняет скрипт, а только потом продолжает загружать страницу. Проблема: блокировка рендеринга
Если скрипт загружается в
<head>, он останавливает отрисовку страницы до завершения загрузки. <head>
<script src="script.js"></script> <!-- ❌ Плохо: блокирует рендеринг -->
</head>
<body>
<h1>Сайт загружается...</h1>
</body>
Решение: подключение в конце `<body>`
Если разместить
<script> перед закрывающим </body>, сначала загружается контент страницы, а потом выполняется JavaScript. <body>
<h1>Контент загрузился!</h1>
<script src="script.js"></script> <!-- Хорошо: не блокирует рендеринг -->
</body>
Альтернативы: `defer` и `async`
defer – отложенное выполнение после загрузки HTML<head>
<script src="script.js" defer></script>
</head>
async – загрузка и выполнение параллельно <head>
<script src="script.js" async></script>
</head>
👉 @frontendInterview
👍3
Код, который умещается в голове: эвристики для разработчиков
Незаменимые практические советы по написанию кода в устойчивом темпе и по управлению сложностью, из-за которой проекты часто выходят из-под контроля. В книге описываются методы и процессы, позволяющие решать ключевые вопросы: от создания чек-листов до организации командной работы, от инкапсуляции до декомпозиции, от проектирования API до модульного тестирования. Автор иллюстрирует свои выводы фрагментами кода, взятыми из готового проекта. Написанные на языке C#, они будут понятны всем, кто использует любой объектно-ориентированный язык, включая Java, C++ и TypeScript. Для более глубокого изучения материала вы можете загрузить весь код и подробные комментарии к коммитам.
👉 @frontendInterview
Незаменимые практические советы по написанию кода в устойчивом темпе и по управлению сложностью, из-за которой проекты часто выходят из-под контроля. В книге описываются методы и процессы, позволяющие решать ключевые вопросы: от создания чек-листов до организации командной работы, от инкапсуляции до декомпозиции, от проектирования API до модульного тестирования. Автор иллюстрирует свои выводы фрагментами кода, взятыми из готового проекта. Написанные на языке C#, они будут понятны всем, кто использует любой объектно-ориентированный язык, включая Java, C++ и TypeScript. Для более глубокого изучения материала вы можете загрузить весь код и подробные комментарии к коммитам.
👉 @frontendInterview
❤1
String Breakers
Вам дана строка и число N. Разбейте строку на подстроки, состоящие из N символов. Пробелы не учитываются.
Пример:
Return value:
👉 @frontendInterview
Вам дана строка и число N. Разбейте строку на подстроки, состоящие из N символов. Пробелы не учитываются.
Пример:
N = 5;
String = "This is an example string";
Return value:
Thisi
sanex
ample
strin
g
👉 @frontendInterview
🤔3👍2
Что знаешь о приоритете селекторов в CSS?
Приоритет селекторов (также известный как специфичность селекторов) определяет, какие стили будут применяться к элементу, если на него действуют несколько правил с различными селекторами. Специфичность основана на типах селекторов и их количественном присутствии в одном CSS-правиле.
Как она вычисляется?
Специфичность выражается четырьмя уровнями: A, B, C, D. Чем выше значения, тем более специфичный селектор.
A: Инлайновые стили (например,
B: Количество ID-селекторов в селекторе (например,
C: Количество классов, атрибутов и псевдоклассов (например,
D: Количество тегов и псевдоэлементов (например,
Рассмотрим несколько примеров и определим их специфичность:
1.
2.
3.
4.
Чем выше значения специфичности, тем выше приоритет стиля. Если два селектора имеют одинаковую специфичность, то стиль, который объявлен позже, будет применён.
Пример
В этом примере на
1.
2.
3.
4.
Поскольку
Почему это важно?
- Управление конфликтами стилей: Знание специфичности помогает правильно управлять стилями и избегать конфликтов.
- Чтение и поддержка кода: Более специфичные селекторы позволяют писать CSS, который легко поддерживать и расширять.
- Эффективность разработки: Понимание специфичности позволяет создавать более предсказуемый и стабильный код.
👉 @frontendInterview
Приоритет селекторов (также известный как специфичность селекторов) определяет, какие стили будут применяться к элементу, если на него действуют несколько правил с различными селекторами. Специфичность основана на типах селекторов и их количественном присутствии в одном CSS-правиле.
Как она вычисляется?
Специфичность выражается четырьмя уровнями: A, B, C, D. Чем выше значения, тем более специфичный селектор.
A: Инлайновые стили (например,
style="color: red;") имеют самую высокую специфичность.B: Количество ID-селекторов в селекторе (например,
#header).C: Количество классов, атрибутов и псевдоклассов (например,
.class, [type="text"], :hover).D: Количество тегов и псевдоэлементов (например,
div, h1, ::before).Рассмотрим несколько примеров и определим их специфичность:
1.
#main-content — (0, 1, 0, 0)2.
.article p — (0, 0, 1, 1)3.
header h1 span — (0, 0, 0, 3)4.
div#main .content .text — (0, 1, 2, 1)Чем выше значения специфичности, тем выше приоритет стиля. Если два селектора имеют одинаковую специфичность, то стиль, который объявлен позже, будет применён.
Пример
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Пример специфичности</title>
<style>
p {
color: black; /* (0, 0, 0, 1) */
}
.text {
color: blue; /* (0, 0, 1, 0) */
}
#highlight {
color: red; /* (0, 1, 0, 0) */
}
p#highlight {
color: green; /* (0, 1, 0, 1) */
}
</style>
</head>
<body>
<p class="text" id="highlight">Этот текст будет зелёным.</p>
</body>
</html>
В этом примере на
<p> элемент действует несколько селекторов с разной специфичностью:1.
p имеет специфичность (0, 0, 0, 1)2.
.text имеет специфичность (0, 0, 1, 0)3.
#highlight имеет специфичность (0, 1, 0, 0)4.
p#highlight имеет специфичность (0, 1, 0, 1)Поскольку
p#highlight имеет наивысшую специфичность (0, 1, 0, 1), он применяет стиль цвета зелёный.Почему это важно?
- Управление конфликтами стилей: Знание специфичности помогает правильно управлять стилями и избегать конфликтов.
- Чтение и поддержка кода: Более специфичные селекторы позволяют писать CSS, который легко поддерживать и расширять.
- Эффективность разработки: Понимание специфичности позволяет создавать более предсказуемый и стабильный код.
👉 @frontendInterview
👍6
Что выведется в консоль?
Anonymous Quiz
12%
undefined
56%
false
22%
true
5%
!!undefined
5%
SyntaxError
👍1
Как обрабатывать ошибки в JS?
Программа может работать правильно, только если код написан корректно и не содержит ошибок. JavaScript умеет обрабатывать некорректный код и сообщать об ошибке в коде. Существует семь встроенных видов ошибок, также можно создать свои собственные. Встроенные ошибки генерируются самим движком JavaScript при выполнении программы, а пользовательские — создаются с помощью конструктора Error. Оба типа ошибок можно ловить в конструкции try...catch. Подробнее в статье.
👉 @frontendInterview
Программа может работать правильно, только если код написан корректно и не содержит ошибок. JavaScript умеет обрабатывать некорректный код и сообщать об ошибке в коде. Существует семь встроенных видов ошибок, также можно создать свои собственные. Встроенные ошибки генерируются самим движком JavaScript при выполнении программы, а пользовательские — создаются с помощью конструктора Error. Оба типа ошибок можно ловить в конструкции try...catch. Подробнее в статье.
👉 @frontendInterview
👍1
Что делать когда взяли на первую работу
Некоторое время назад у меня была статья о том как искать работу, какие шаги предпринимать и тд. Теперь решил поделиться некоторыми советами и опытом о том, что делать, когда вас уже взяли на вашу первую работу в IT. В связи с тем, что я фронтендер, то некоторые примеры будут основываться из этой области, в частности языки, фреймворки и т. д.
👉 @frontendInterview
Некоторое время назад у меня была статья о том как искать работу, какие шаги предпринимать и тд. Теперь решил поделиться некоторыми советами и опытом о том, что делать, когда вас уже взяли на вашу первую работу в IT. В связи с тем, что я фронтендер, то некоторые примеры будут основываться из этой области, в частности языки, фреймворки и т. д.
👉 @frontendInterview
👎2
Что демонстрирует этот код: setTimeout(() => console.log('Hi'), 1000);?
Anonymous Quiz
7%
Синхронное выполнение
88%
Асинхронное выполнение
2%
Ошибку
3%
Бесконечный цикл
Что такое интерполяция?
Это метод вставки значений или выражений в строки. Она позволяет динамически встраивать переменные и выражения в текстовые строки, делая их более гибкими и удобными для использования. Например, интерполяция достигается с помощью шаблонных строк.
Почему это нужно?
Упрощает работу с текстом, который должен включать значения переменных или результаты вычислений. Без интерполяции, программистам пришлось бы вручную конкатенировать строки и переменные, что делает код менее читаемым и более сложным в поддержке.
Как это используется?
Для примера возьмём JavaScript и его шаблонные строки. Шаблонные строки заключаются в обратные кавычки (``) и позволяют включать выражения внутри них с помощью конструкции
Пример кода:
В данном примере переменные
Как это работает и почему это удобно?
- Читаемость: Шаблонные строки делают код более читабельным и понятным, так как видна вся строка целиком, без необходимости объединения отдельных частей.
- Удобство: Позволяет легко включать значения переменных и результаты выражений в строку.
- Избежание ошибок: Снижает вероятность ошибок, которые могут возникнуть при ручной конкатенации строк.
Шаблонные строки также поддерживают выполнение выражений внутри интерполяции:
👉 @frontendInterview
Это метод вставки значений или выражений в строки. Она позволяет динамически встраивать переменные и выражения в текстовые строки, делая их более гибкими и удобными для использования. Например, интерполяция достигается с помощью шаблонных строк.
Почему это нужно?
Упрощает работу с текстом, который должен включать значения переменных или результаты вычислений. Без интерполяции, программистам пришлось бы вручную конкатенировать строки и переменные, что делает код менее читаемым и более сложным в поддержке.
Как это используется?
Для примера возьмём JavaScript и его шаблонные строки. Шаблонные строки заключаются в обратные кавычки (``) и позволяют включать выражения внутри них с помощью конструкции
${}.Пример кода:
const name = 'Иван';
const age = 30;
const greeting = `Привет, меня зовут ${name} и мне ${age} лет.`;
console.log(greeting); // Вывод: Привет, меня зовут Иван и мне 30 лет.
В данном примере переменные
name и age интерполируются в строку greeting.Как это работает и почему это удобно?
- Читаемость: Шаблонные строки делают код более читабельным и понятным, так как видна вся строка целиком, без необходимости объединения отдельных частей.
- Удобство: Позволяет легко включать значения переменных и результаты выражений в строку.
- Избежание ошибок: Снижает вероятность ошибок, которые могут возникнуть при ручной конкатенации строк.
Шаблонные строки также поддерживают выполнение выражений внутри интерполяции:
const a = 5;
const b = 10;
const result = Сумма ${a} и ${b} равна ${a + b}.;
console.log(result); // Вывод: Сумма 5 и 10 равна 15.
👉 @frontendInterview
👍3🤔1
Simplified JavaScript for Very Important Programmers: The Fast Track to Mastering Essential JavaScript Concepts
Это практическое руководство для всех, кто хочет освоить основные разделы JavaScript, не тратя время на запутанные объяснения и не пытаясь понять смысл неоднозначных слов. Книга наполнена реальными примерами и четким, лаконичным языком, который разбивает технические концепции на легкие для понимания фрагменты.
👉 @frontendInterview
Это практическое руководство для всех, кто хочет освоить основные разделы JavaScript, не тратя время на запутанные объяснения и не пытаясь понять смысл неоднозначных слов. Книга наполнена реальными примерами и четким, лаконичным языком, который разбивает технические концепции на легкие для понимания фрагменты.
👉 @frontendInterview