🚀 Подними свои фронтенд-скиллы на новый уровень с True Frontender! 🚀
👨💻 Изучаешь фронтенд или хочешь поднять свой грейд? Хочешь успешно проходить собеседованя?
True Frontender – это твой навигатор в мире кода!
💡 На канале True Frontender тебя ждет:
- Полезные советы на основе реального опыта работы
- Примеры задач, которые встречаются на собеседованиях
- Фишки и авторские статьи по React, TypeScript, JavaScript, CSS, HTML
- Советы которые помогут сделать твой код чище и компактнее
- Рекомендации по улучшению качества твоего кода
🌟 True Frontender – это не просто канал, это твой путь к мастерству в фронтенде. Развивайся как в технических, так и в творческих аспектах разработки.
🔥 Присоединяйся сейчас – будущее твоего кода начинается здесь! 👉 @truefrontender 🚀
👨💻 Изучаешь фронтенд или хочешь поднять свой грейд? Хочешь успешно проходить собеседованя?
True Frontender – это твой навигатор в мире кода!
💡 На канале True Frontender тебя ждет:
- Полезные советы на основе реального опыта работы
- Примеры задач, которые встречаются на собеседованиях
- Фишки и авторские статьи по React, TypeScript, JavaScript, CSS, HTML
- Советы которые помогут сделать твой код чище и компактнее
- Рекомендации по улучшению качества твоего кода
🌟 True Frontender – это не просто канал, это твой путь к мастерству в фронтенде. Развивайся как в технических, так и в творческих аспектах разработки.
🔥 Присоединяйся сейчас – будущее твоего кода начинается здесь! 👉 @truefrontender 🚀
👍3
Что такое шаблон (паттерн) проектирования?
В разработке ПО шаблон проектирования — это типовое решение регулярно возникающей проблемы в рамках определённого контекста архитектуры приложения.
Шаблон — это не законченное архитектурное решение, которое можно напрямую преобразовать в исходный или машинный код. Это описание подхода к решению проблемы, который можно применять в разных ситуациях.
Шаблоны проектирования делятся на три группы:
1. Порождающие - описывают создание объекта (instantiation) или группы связанных объектов.
2. Структурные - в основном посвящены компоновке объектов (object composition). То есть тому, как сущности могут друг друга использовать.
3. Поведенченские - связаны с присвоением обязанностей (responsibilities) объектам. От структурных шаблонов они отличаются тем, что не просто описывают структуру, но и очерчивают шаблоны передачи данных, обеспечения взаимодействия.
👉 @frontendInterview
В разработке ПО шаблон проектирования — это типовое решение регулярно возникающей проблемы в рамках определённого контекста архитектуры приложения.
Шаблон — это не законченное архитектурное решение, которое можно напрямую преобразовать в исходный или машинный код. Это описание подхода к решению проблемы, который можно применять в разных ситуациях.
Шаблоны проектирования делятся на три группы:
1. Порождающие - описывают создание объекта (instantiation) или группы связанных объектов.
2. Структурные - в основном посвящены компоновке объектов (object composition). То есть тому, как сущности могут друг друга использовать.
3. Поведенченские - связаны с присвоением обязанностей (responsibilities) объектам. От структурных шаблонов они отличаются тем, что не просто описывают структуру, но и очерчивают шаблоны передачи данных, обеспечения взаимодействия.
👉 @frontendInterview
👍6❤3👎3😁1
Как можно установить свойство opacity для элемента span, который следует сразу за элементом input?
Anonymous Quiz
9%
input.span
43%
input + span
13%
input span
35%
input > span
👍10❤1
erid: LjN8KWVuk
Каждый день мы просыпаемся и идём к компьютеру писать код.
Но новогодние праздники — отличный повод отвлечься и показать, чему вы научились за год. Поэтому мы запускаем телеграм-игру «Код сурка», чтобы вы могли блеснуть знаниями в веб-разработке и получить за это ценные призы.
Забрать их легко — достаточно отвечать на вопросы о веб-разработке (их будет аж 1200) и набирать баллы за правильные ответы. Чем выше вы вскарабкаетесь в рейтинге — тем круче призы.
К слову: разыграем профессию на выбор победителя, 2 «инженерии», 7 курсов по вёрстке и JavaScript, 20 безлимитных доступов к тренажёрам на месяц и 70 доступов к тренажёрам на неделю.
Ну и самое приятное — все участники акции смогут легко получить безлимитный доступ к тренажёрам Академии на время игры, а после игры — скидки и бонусы.
Присоединяйтесь, и пусть каникулы не проходят зря.
Реклама. ООО "ИНТЕРАКТИВНЫЕ ОБУЧАЮЩИЕ ТЕХНОЛОГИИ". ИНН 7807382880.
Каждый день мы просыпаемся и идём к компьютеру писать код.
Но новогодние праздники — отличный повод отвлечься и показать, чему вы научились за год. Поэтому мы запускаем телеграм-игру «Код сурка», чтобы вы могли блеснуть знаниями в веб-разработке и получить за это ценные призы.
Забрать их легко — достаточно отвечать на вопросы о веб-разработке (их будет аж 1200) и набирать баллы за правильные ответы. Чем выше вы вскарабкаетесь в рейтинге — тем круче призы.
К слову: разыграем профессию на выбор победителя, 2 «инженерии», 7 курсов по вёрстке и JavaScript, 20 безлимитных доступов к тренажёрам на месяц и 70 доступов к тренажёрам на неделю.
Ну и самое приятное — все участники акции смогут легко получить безлимитный доступ к тренажёрам Академии на время игры, а после игры — скидки и бонусы.
Присоединяйтесь, и пусть каникулы не проходят зря.
Реклама. ООО "ИНТЕРАКТИВНЫЕ ОБУЧАЮЩИЕ ТЕХНОЛОГИИ". ИНН 7807382880.
❤2👍1
Что означает обозначение "UDP" как "протокол ненадежных датаграмм"?
Anonymous Quiz
20%
UDP обеспечивает гарантированную доставку данных без потерь.
61%
UDP допускает потери данных, дублирование и перемешивание пакетов, задержки.
18%
UDP имеет более низкую скорость передачи данных по сравнению с TCP.
👏5
Модификаторы доступа
Модификаторы доступа - это ключевые слова в объектно-ориентированных языках программирования, устанавливающие доступность классов, их свойств и методов.
Традиционно языки программирования поддерживает такие модификаторы доступа:
- private: Модификатор доступа private, применённый к свойству класса, традиционно делает это свойство доступным для чтения/записи только в методах и конструкторе этого класса. Получить доступ к этому свойству снаружи класса, обращаясь к нему через экземпляр, не получится.
- protected: Модификатор доступа protected, применённый к свойству класса, делает его доступным только в рамках этого класса и внутри классов-наследников.
- public: Модификатор доступа public, применённый к свойству класса, делает его доступным отовсюду посредством обращения к экземпляру.
👉 @frontendInterview
Модификаторы доступа - это ключевые слова в объектно-ориентированных языках программирования, устанавливающие доступность классов, их свойств и методов.
Традиционно языки программирования поддерживает такие модификаторы доступа:
- private: Модификатор доступа private, применённый к свойству класса, традиционно делает это свойство доступным для чтения/записи только в методах и конструкторе этого класса. Получить доступ к этому свойству снаружи класса, обращаясь к нему через экземпляр, не получится.
- protected: Модификатор доступа protected, применённый к свойству класса, делает его доступным только в рамках этого класса и внутри классов-наследников.
- public: Модификатор доступа public, применённый к свойству класса, делает его доступным отовсюду посредством обращения к экземпляру.
👉 @frontendInterview
👍4🔥1
Программирование в алгоритмах
Искусство программирования представлено в виде учебного курса, раскрывающего секреты наиболее популярных алгоритмов. Освещены такие вопросы, как комбинаторные алгоритмы, перебор, алгоритмы на графах, алгоритмы вычислительной геометрии. Приводятся избранные олимпиадные задачи по программированию с указаниями к решению.
👉 @frontendInterview
Искусство программирования представлено в виде учебного курса, раскрывающего секреты наиболее популярных алгоритмов. Освещены такие вопросы, как комбинаторные алгоритмы, перебор, алгоритмы на графах, алгоритмы вычислительной геометрии. Приводятся избранные олимпиадные задачи по программированию с указаниями к решению.
👉 @frontendInterview
🔥4
Reverse words
Напишите функцию, которая принимает строку и разворачивает каждое слово в строке. Все пробелы должны быть сохранены.
Пример:
👉 @frontendInterview
Напишите функцию, которая принимает строку и разворачивает каждое слово в строке. Все пробелы должны быть сохранены.
Пример:
"This is an example!" ==> "sihT si na !elpmaxe" "double spaces" ==> "elbuod secaps"👉 @frontendInterview
Что такое Virtual DOM?
Virtual DOM — это концепция в React, при которой создается и хранится в памяти легковесное виртуальное представление фактического DOM (Document Object Model). Это метод программирования, используемый для оптимизации производительности веб-приложений.
Когда вносятся изменения в данные или состояние компонента React, виртуальный DOM обновляется вместо того, чтобы напрямую манипулировать реальным DOM. Затем виртуальный DOM вычисляет разницу между предыдущим и обновленным состоянием компонента. Этот процесс известен под названием сравнения (diffing).
После того, как различия выявлены, React эффективно обновляет только необходимые части реального DOM, чтобы отразить изменения. Такой подход минимизирует количество фактических манипуляций с DOM и повышает общую производительность приложения.
Используя виртуальный DOM, React предоставляет способ создания динамических и интерактивных пользовательских интерфейсов, обеспечивая при этом оптимальную эффективность и скорость рендеринга.
👉 @frontendInterview
Virtual DOM — это концепция в React, при которой создается и хранится в памяти легковесное виртуальное представление фактического DOM (Document Object Model). Это метод программирования, используемый для оптимизации производительности веб-приложений.
Когда вносятся изменения в данные или состояние компонента React, виртуальный DOM обновляется вместо того, чтобы напрямую манипулировать реальным DOM. Затем виртуальный DOM вычисляет разницу между предыдущим и обновленным состоянием компонента. Этот процесс известен под названием сравнения (diffing).
После того, как различия выявлены, React эффективно обновляет только необходимые части реального DOM, чтобы отразить изменения. Такой подход минимизирует количество фактических манипуляций с DOM и повышает общую производительность приложения.
Используя виртуальный DOM, React предоставляет способ создания динамических и интерактивных пользовательских интерфейсов, обеспечивая при этом оптимальную эффективность и скорость рендеринга.
👉 @frontendInterview
👎8😁3👍1👏1
Как включить в расчёт ширины и высоты элемента его border?
Anonymous Quiz
4%
display: block
14%
box-sizing: content-box
3%
box-sizing: fit-content
80%
box-sizing: border-box
Что такое Vue.js и какие в нём основные фичи?
Vue.js - это прогрессивный open-source фреймворк для разработки пользовательских интерфейсов, который стремится быть легко внедряемым в процесс разработки. Ядро библиотеки фокусируется только на "слое отображения", потому его можно легко интегрировать с множеством библиотек и внедрить в существующие проекты.
Основные фичи
1. Виртуальный DOM: Vue использует виртуальный DOM - такой же подход, как и у других существующих фреймворков (React, Ember и т.п.). VDOM - это хранимая в памяти репрезентация оригинального HTML DOM-дерева, которая обновляется и изменяется, не затрагивая при этом оригинальный DOM.
2. Компоненты: используются для создания переиспользуемых компонентов в любых приложениях на Vue.
3. Шаблоны: Vue предоставляет возможность шаблонизации, которая связывает HTML-разметку с данными компонента и экземпляра класса Vue.
4. Реактивность: Vue дает возможность создавать реактивные односторонние и двусторонние связи данных с их отображением.
5. Роутинг: перемещение между страницами реализовано при помощи библиотеки vue-router.
6. Легковесность: Vue - один из самых легковесных фреймворков в сравнении с другими.
👉 @frontendInterview
Vue.js - это прогрессивный open-source фреймворк для разработки пользовательских интерфейсов, который стремится быть легко внедряемым в процесс разработки. Ядро библиотеки фокусируется только на "слое отображения", потому его можно легко интегрировать с множеством библиотек и внедрить в существующие проекты.
Основные фичи
1. Виртуальный DOM: Vue использует виртуальный DOM - такой же подход, как и у других существующих фреймворков (React, Ember и т.п.). VDOM - это хранимая в памяти репрезентация оригинального HTML DOM-дерева, которая обновляется и изменяется, не затрагивая при этом оригинальный DOM.
2. Компоненты: используются для создания переиспользуемых компонентов в любых приложениях на Vue.
3. Шаблоны: Vue предоставляет возможность шаблонизации, которая связывает HTML-разметку с данными компонента и экземпляра класса Vue.
4. Реактивность: Vue дает возможность создавать реактивные односторонние и двусторонние связи данных с их отображением.
5. Роутинг: перемещение между страницами реализовано при помощи библиотеки vue-router.
6. Легковесность: Vue - один из самых легковесных фреймворков в сравнении с другими.
👉 @frontendInterview
🔥7🥰2❤1
Как изменить opacity для элемента input, у которого установлен атрибут 'type' со значением "radio"?
Anonymous Quiz
86%
input[type="radio"]
7%
input:radio
3%
input:where(radio)
4%
input:is(radio)
🔥7👏3
Какие переменные доступны только внутри блока, в котором были объявлены, в JavaScript?
Anonymous Quiz
3%
Глобальные переменные
31%
Локальные переменные
64%
Переменные, объявленные с помощью ключевых слов let и const
2%
Переменные, объявленные с помощью ключевого слова var
👍14👎14
Чем отличается Vue 3 от Vue 2?
Основные преимущества по сравнению с Vue 2:
- улучшение производительности в среднем в 1.5-2 раза
- Composition API
- совместимость с TypeScript (в т.ч. типизация шаблонов)
- новая концепция реактивности
Во Vue 2 механизм реактивности строился на «геттерах» и «сеттерах».
Во Vue 3 концепция реактивности полностью построена на Proxy. Это объект, который содержит в себе другой объект и позволяет «перехватывать» обращения к нему.
Proxy во Vue 3 решает некоторые проблемы, присущие системе реактивности Vue 2. Например, добавление новых реактивных свойств в объект либо слежение за всем объектом, а не за единичным свойством.
👉 @frontendInterview
Основные преимущества по сравнению с Vue 2:
- улучшение производительности в среднем в 1.5-2 раза
- Composition API
- совместимость с TypeScript (в т.ч. типизация шаблонов)
- новая концепция реактивности
Во Vue 2 механизм реактивности строился на «геттерах» и «сеттерах».
Во Vue 3 концепция реактивности полностью построена на Proxy. Это объект, который содержит в себе другой объект и позволяет «перехватывать» обращения к нему.
Proxy во Vue 3 решает некоторые проблемы, присущие системе реактивности Vue 2. Например, добавление новых реактивных свойств в объект либо слежение за всем объектом, а не за единичным свойством.
👉 @frontendInterview
👍5❤2
Software Design by Example: A Tool-Based Introduction with JavaScript (2022)
Лучший способ изучения дизайна в любой области - это изучение примеров. Книга даёт представление о том, как думают опытные программисты. Начиная с системы резервного копирования файлов и фреймворка для тестирования и заканчивая макетом регулярных выражений, механизмом верстки браузера и очень маленьким компилятором, мы исследуем общие модели проектирования, показываем, как упрощение тестирования кода облегчает его повторное использование, и помогаем читателям понять, как работают отладчики, профилировщики, менеджеры пакетов и системы контроля версий, чтобы они могли использовать их более эффективно.
👉 @frontendInterview
Лучший способ изучения дизайна в любой области - это изучение примеров. Книга даёт представление о том, как думают опытные программисты. Начиная с системы резервного копирования файлов и фреймворка для тестирования и заканчивая макетом регулярных выражений, механизмом верстки браузера и очень маленьким компилятором, мы исследуем общие модели проектирования, показываем, как упрощение тестирования кода облегчает его повторное использование, и помогаем читателям понять, как работают отладчики, профилировщики, менеджеры пакетов и системы контроля версий, чтобы они могли использовать их более эффективно.
👉 @frontendInterview
👍7🔥2❤1
Beginner Series #2 Clock
Часы показывают h часов, m минут и s секунд после полуночи.
Ваша задача - написать функцию, которая возвращает время с полуночи в миллисекундах.
Пример:
👉 @frontendInterview
Часы показывают h часов, m минут и s секунд после полуночи.
Ваша задача - написать функцию, которая возвращает время с полуночи в миллисекундах.
Пример:
h = 0 m = 1 s = 1 result = 61000👉 @frontendInterview
👍1