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

React быстро «React быстро. 2-е издание» предлагает уникальный подход к освоению фреймворка React. Более 80 компактных примеров проведут читателя от изучения основ работы к созданию довольно сложных приложений. В книге подробно описаны многие функциональные компоненты, хуки React и средства доступности веб-приложений, а также представлены интересные проекты для отработки новых навыков. 👉 @frontendInterview

Process Mining от экспертов VK Tech Мы не просто говорим про процессную аналитику — мы её внедряем. В канале делимся опытом: где искать бизнес-потери, как визуализировать процессы и какие эффекты получают клиенты от роботизации. Только практики, проверенные проектами. Подписаться #реклама О рекламодателе

Как оптимизировать сайт? Оптимизация сайта включает в себя несколько стратегий и техник, направленных на улучшение производительности, скорости загрузки и пользовательского опыта. Оптимизация изображений Используйте инструменты для сжатия изображений (например, TinyPNG, ImageOptim) без значительной потери качества. Используйте современные форматы изображений, такие как WebP, которые обеспечивают лучшее сжатие по сравнению с JPEG и PNG. Загружайте изображения по мере их появления в области видимости пользователя (атрибут loading="lazy" в HTML). Минификация и объединение файлов Уменьшите размер CSS, JavaScript и HTML-файлов с помощью инструментов, таких как UglifyJS, CSSNano, HTMLMinifier. Сократите количество HTTP-запросов, объединив несколько CSS или JavaScript файлов в один. Использование CDN (Content Delivery Network) Храните копии вашего сайта на серверах по всему миру, чтобы уменьшить время загрузки для пользователей из разных регионов. Кэширование Настройте заголовки кэширования HTTP, чтобы браузеры могли хранить копии статических ресурсов (CSS, JavaScript, изображения). Используйте технологии, такие как Varnish или Nginx, для кэширования страниц на сервере. Оптимизация CSS и JavaScript Используйте атрибуты async и defer для асинхронной загрузки JavaScript, чтобы не блокировать рендеринг страницы. Встраивайте критические стили прямо в HTML, чтобы ускорить начальную отрисовку страницы. Улучшение производительности сервера Включите сжатие gzip или Brotli на сервере для уменьшения размера передаваемых данных. Переход на HTTP/2, который поддерживает мультиплексирование запросов, позволяет загружать несколько ресурсов одновременно через одно соединение. Использование современных технологий Используйте Service Workers для создания прогрессивных веб-приложений (PWA), обеспечивающих офлайн-работу и улучшенное кэширование. Используйте техники предзагрузки (preload) и предзапросов (prefetch) для ресурсов, которые понадобятся в ближайшее время. Мониторинг и анализ Используйте Google Lighthouse, PageSpeed Insights и WebPageTest для анализа производительности и поиска узких мест. Применяйте сервисы, такие как Google Analytics, New Relic, для отслеживания реальной производительности и пользовательского опыта.

<img src="example.jpg" loading="lazy" alt="Пример изображения">

👉 @frontendInterview

Я: устраиваюсь на работу с опытным коллективом Тем временем их тимлид 2010-го года рождения: 👉 @frontendInterview

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

Получи грант на обучение в Центральном университете Прояви себя, получи грант до 2,8 млн на обучение ИТ и бизнесу в вузе. Для школьников 10-х и 11-х классов, СПО. Подать заявку #реклама apply.centraluniversity.ru О рекламодателе

​На что влияет доступность? В веб-разработке влияет на то, насколько удобно и возможно использовать веб-сайт или веб-приложение для всех пользователей, включая людей с ограниченными возможностями. Она охватывает широкий спектр практик и технологий, которые делают веб-контент более доступным и понятным для людей с различными физическими, сенсорными, когнитивными и технологическими ограничениями. Почему важна Доступность позволяет людям с ограниченными возможностями использовать веб-сайты наравне с другими пользователями. Это включает людей с нарушениями зрения, слуха, двигательной активности и когнитивными проблемами. В некоторых странах и регионах существуют законы и нормативные акты, требующие обеспечения доступности веб-сайтов и приложений. Например, в США действует Закон о доступности (ADA), а в Европейском Союзе – Директива о доступности веб-сайтов и мобильных приложений. Доступные веб-сайты часто лучше индексируются поисковыми системами, поскольку многие практики доступности пересекаются с рекомендациями по SEO (поисковой оптимизации). Это помогает улучшить видимость сайта и его охват. Доступные сайты обычно имеют более ясную и интуитивно понятную структуру, что улучшает общий пользовательский опыт для всех, включая людей без ограниченных возможностей. Основные аспекты Все визуальные элементы (например, изображения, иконки) должны иметь текстовые альтернативы (атрибуты alt), чтобы их можно было понять с помощью экранных читалок. Весь функционал сайта должен быть доступен с клавиатуры. Это важно для людей, которые не могут использовать мышь. Текст должен быть достаточно контрастным по отношению к фону, чтобы его было легко читать людям с нарушениями зрения. Семантические теги (<header>, <nav>, <main>, <footer>, <article>, <section> и т.д.) помогают структурам страницы быть более понятными для вспомогательных технологий. Формы должны быть четко обозначены с помощью меток (<label>) и иметь описания ошибок, чтобы пользователи могли легко взаимодействовать с ними. Видео и аудио должны сопровождаться субтитрами и текстовыми транскрипциями, чтобы пользователи с нарушениями слуха могли понять содержание.

<img src="example.jpg" alt="Описание изображения">

Пример формы с доступными метками:

<form>
  <label for="name">Имя:</label>
  <input type="text" id="name" name="name">
  
  <label for="email">Электронная почта:</label>
  <input type="email" id="email" name="email">
  
  <button type="submit">Отправить</button>
</form>

👉 @frontendInterview