Frontend Interview - собеседования по Javascript / Html / Css

Плюсы ИТ В пику современным трендам на упадничество и негатив, рассказываю о плюсах индустрии информационных технологий — почему несмотря на весь стеб над нердами и сильно просевшие зарплаты народ все также ломится в эти двери, в попытках «вкатиться». Честно и без рекламы обучающих курсов. 👉 @frontendInterview

Онлайн-магистратура МФТИ: Data Science, ML, AI, CV Внедряйте модели машинного обучения в компании, обучаясь в МФТИ. ✅ТОП-1 тех.вуз РФ ✅Диплом магистра ✅Карьера в топ-компаниях ✅Запуск стартапа ✅+2 диплома ДПО Записаться онлайн #реклама 16+ mipt.online О рекламодателе

Как работает position: sticky и почему он часто не прилипает position: sticky — штука, которая превращает relative-элемент в fixed-элемент, как только он доезжает до заданного инсет-порога, и отлипает в момент, когда скроллинг выталкивает родителя за край. Работает круто, пока вы не включите overflow, не забудете задать top, не положите элемент в flex c align-items: stretch, не сделаете таблицу из <thead> и не упрётесь в кейс с вложенными скролл-контейнерами. 👉 @frontendInterview

👉 @frontendInterview

👩‍💻 Всем программистам посвящается! Вот 17 авторских обучающих IT каналов по самым востребованным областям программирования: Выбирай своё направление: 👩‍💻 Frontend — t.me/frontend_ready 📱 JavaScript — t.me/javascript_ready 👩‍💻 Backend — t.me/backend_ready 📱 GitHub & Git — t.me/github_ready 👩‍💻 Python — t.me/python_ready 🤔 InfoSec & Хакинг — t.me/hacking_ready 🖥 SQL & Базы Данных — t.me/sql_ready 🤖 Нейросети — t.me/neuro_ready 👩‍💻 C/C++ — https://t.me/cpp_ready 👩‍💻 C# & Unity — t.me/csharp_ready 👩‍💻 Linux — t.me/linux_ready 📖 IT Книги — t.me/books_ready 👩‍💻 Java — t.me/java_ready 👩‍💻 Весь IT — t.me/it_ready 👩‍💻 Bash & Shell — t.me/bash_ready 🖼️ DevOps — t.me/devops_ready 🖥 Design — t.me/design_ready 📌 Гайды, шпаргалки, задачи, ресурсы и фишки для каждого языка программирования!

Отслеживаемые свойства, что такое, как использовать? В контексте разработки приложений, отслеживаемые свойства (observable properties) относятся к свойствам объектов, изменения которых можно отслеживать. Это полезно для автоматического обновления пользовательского интерфейса или выполнения других действий при изменении данных. В JavaScript для реализации отслеживаемых свойств часто используются библиотеки, такие как MobX, или встроенные механизмы, такие как Proxy. Использование Proxy для отслеживания свойств Встроенный объект Proxy в JavaScript позволяет перехватывать и настраивать операции, выполняемые с объектом, такие как чтение и запись свойств.

    
        const handler = {
    get(target, property) {
        console.log(`Getting value of ${property}`);
        return target[property];
    },
    set(target, property, value) {
        console.log(`Setting value of ${property} to ${value}`);
        target[property] = value;
        return true;
    }
};
const person = {
    name: 'Alice',
    age: 25
};
const proxyPerson = new Proxy(person, handler);
proxyPerson.name = 'Bob'; // Setting value of name to Bob
console.log(proxyPerson.name); // Getting value of name // Bob{}
    

Использование MobX для отслеживания свойств Это библиотека для управления состоянием, которая делает состояния наблюдаемыми и автоматически синхронизирует их с пользовательским интерфейсом. Пример использования MobX

    
        import { observable, autorun } from 'mobx';
import { observer } from 'mobx-react';
import React from 'react';
import ReactDOM from 'react-dom';
const appState = observable({
    count: 0,
    increment() {
        this.count++;
    }
});
autorun(() => {
    console.log(`Count: ${appState.count}`);
});
appState.increment(); // Count: 1
appState.increment(); // Count: 2
const Counter = observer(() => (
    <div>
        <p>Count: {appState.count}</p>
        <button onClick={() => appState.increment()}>Increment</button>
    </div>
));
ReactDOM.render(<Counter />, document.getElementById('root'));{}
    

Плюсы отслеживаемых свойств - Автоматическое обновление UI Изменения данных автоматически отражаются в пользовательском интерфейсе. - Централизованное управление состоянием Легче управлять состоянием и следить за его изменениями. - Повышенная производительность При правильной настройке обновляются только те части интерфейса, которые зависят от измененных данных. Примеры реального использования Простой счетчик с использованием Proxy

    
        const handler = {
    set(target, property, value) {
        console.log(`Setting value of ${property} to ${value}`);
        target[property] = value;
        document.getElementById(property).innerText = value;
        return true;
    }
};
const state = {
    count: 0
};
const proxyState = new Proxy(state, handler);

document.getElementById('increment').addEventListener('click', () => {
    proxyState.count++;
});{}
    

    
        <div>
    <p id="count">0</p>
    <button id="increment">Increment</button>
</div>
<script src="path/to/your/script.js"></script>{}
    

👉 @frontendInterview

Онлайн-магистратура в IT совместно с ИТМО, МИФИ и МФТИ День открытых дверей В удобное время | Онлайн Все программы 2025, общение со студентами и экспертами из вузов и Яндекса. Ответы на вопросы. Зарегистрироваться #реклама 16+ practicum.yandex.ru О рекламодателе

Fix string case В этом задании вам будет дана строка, в которой могут быть смешанные прописные и строчные буквы, и ваша задача - преобразовать эту строку в строчную или прописную, основываясь на следующем: - Делайте как можно меньше изменений. - Если строка содержит равное количество прописных и строчных букв, преобразуйте строку в строчную. Например:

    
        solve("coDe") = "code". Строчных символов больше, чем прописных. Измените только букву "D" на строчную.

solve("CODe") = "CODE". Прописные символы > строчные. Измените только букву "e" на прописную.

solve("coDE") = "code". Верхний == нижний регистр. Измените все символы на строчные.{}
    

Собес — то, что определяет ежемесячную зарплату на долгое время А серьезно подходят к нему довольно редко. Когда я собесился в OZON, я прям гуглил вопросы типа — «А как торговаться?», «Можно ли просить велком бонус?», «А сколько я ваще стою?» ——• 📗 Держи полезную подборку материалов для поиска работы — Как разработчику правильно оформить резюме? *читать* — Как расписывать свои достижения в резюме? *смотреть* — Как поднять резюме в топе выдачи HeadHunter? *читать* — 5 шагов, которые нужно обязательно сделать перед публикацией резюме? *смотреть* — Что делать с пустым гитхабом? *читать* — Как отвечать на вопросы рекрутёров? *читать* — Как не завалить лайвкодинг? *читать* А лучше читай полностью мой путь — честно, со всеми ошибками  —·· *тык* Возможно ты сейчас не ищешь работу, но время летит быстро, лучше сохранить, потом очень пригодится. Реклама. Истомин А.С. ИНН 331108187709.

Multithreaded JavaScript Готовы ли вы к разработке многопоточных приложений на JavaScript? Прочитав данную книгу, JavaScript-разработчик среднего уровня узнает о сильных и слабых сторонах API веб-исполнителей в браузерах и рабочих потоков в Node.js. Авторы рассказывают о двух подходах к построению многопоточных приложений: на основе передачи сообщений и на основе разделяемой памяти. Описываются API для обоих случаев, объясняется, когда использовать тот или другой, а когда - их сочетание. Вы также увидите, как реализуются высокоуровневые паттерны на базе этих подходов. 👉 @frontendInterview