Senior Frontend - javascript, html, css

Запустите рекламу в телеграм-каналах с Яндекс Директом Перфоманс-реклама теперь в телеграм-каналах ⚡ Яндекс Директ знает, как привлечь целевую аудиторию 💰👌 Попробовать

Fancy Slider Функционал слайдера реализован в JS. Стилизовано в SCSS. 👉 @seniorFront

🎉 Большой розыгрыш от крупнейшего IT-медиа 1337, легендарного паблика Рифмы и Панчи, канала Техно. Победителей будет много, а для участия нужны лишь пара кликов: 1. Подписаться на Рифмы и Панчи, 1337 и на Техно. 2. Нажать «Участвовать» под этим постом Что по призам:

1 место - Iphone 16 Pro 2 место - PS5 Slim 3 место - Nintendo Switch 2 4-10 места - 10 000 рублей на карту

Победителей определим 21 июля в 18:00 МСК. Всем удачи!

🎉 Большой розыгрыш от крупнейшего IT-медиа 1337, легендарного паблика Рифмы и Панчи, канала Техно. Победителей будет много, а для участия нужны лишь пара кликов: 1. Подписаться на Рифмы и Панчи, 1337 и на Техно. 2. Нажать «Участвовать» под этим постом Что по призам:

1 место - Iphone 16 Pro 2 место - PS5 Slim 3 место - Nintendo Switch 2 4-10 места - 10 000 рублей на карту

Победителей определим 21 июля в 18:00 МСК. Всем удачи!

Animated Number Counter Preloader В этом видео создаётся анимированная полоса загрузки на CSS и чистом JS. 👉 @seniorFront

Регистрируйтесь на Yandex Ecom Open Air 8 августа Море инсайтов для бизнеса, музыкальный open-air, лекции и нетворкинг. Участие бесплатно! Зарегистрироваться #реклама 18+ ecomfest.ru О рекламодателе

Elastic SVG Sidebar Material Design Sidebar - это SVG картинка, анимируемая в JS. 👉 @seniorFront

Не пропустите! 23 июля в 20:00 пройдет бесплатный урок по теме "Зачем JavaScript-разработчику понимать бэкенд? От fetch до Node.js". Запись: https://gclnk.com/rKZqUUMf Что будет на вебинаре? - Как устроено взаимодействие фронтенда с сервером: API, запросы, заголовки, ответы. - Почему поверхностные знания API тормозят рост и усложняют задачи. - Что нужно знать о Node.js и серверной части, даже если вы не fullstack. - Как уверенное понимание архитектуры влияет на производительность и автономность. - Почему знание бэкенда усиливает вашу позицию на проекте и на рынке. Что узнают участники? - Как работает связка клиент–сервер: от запроса до ответа. - Какие ошибки делают фронтендеры при работе с API — и как их избегать. - Как знание Node.js помогает даже тем, кто пишет только клиентскую часть. - Почему современный разработчик не может быть “только фронтом”. - Как это знание влияет на скорость разработки. Не забудьте записаться на урок и получить запись пред. вебинара: https://gclnk.com/rKZqUUMf Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576, www.otus.ru Erid 2SDnjdhd9Kt

Dynamic Image Colorizing Реализовано без использования JS. Вся сцена - это стилизованный input type="color". 👉 @seniorFront

Задача: получить максимум инсайтов за минимум времени Решение: прийти к нам на Frontend meetup. 😎 А именно: ✔️ Как ускорить сборку фронта в 10 раз (и не развалить всё по пути) ✔️ Как развивать хард-скиллы на работе, а не в 2 часа ночи ✔️ Как подружиться с ИИ и не отдать ему контроль над кодовой базой. Встречаемся офлайн/онлайн 22 июля в 18:00 в Sber Agile Home по адресу: Кутузовский проспект, 32к1, Москва. Здесь можно узнать подробности и зарегистрироваться!

Сеньор уходит в отпуск 👉 @seniorFront

Scroll Animation Effects for Website В этом видео создаются анимации, запускаемые при прокрутке на CSS и JS. 👉 @seniorFront

📌 Вам нужно масштабируемое приложение с высокой отказоустойчивостью? Устали от ограничений монолита и хотите перейти на микросервисную архитектуру? Приглашаем на открытый урок «Создаём масштабируемый микросервис с Nest.js и Kubernetes». 🗓 24 июля в 20:00 МСК 🆓 Бесплатно. Урок в рамках старта курса «Node.js Developer». На открытом уроке мы покажем, как с помощью Nest.js и Kubernetes создавать быстрые и масштабируемые микросервисы. Мы научим вас правильно развертывать приложение, использовать контейнеризацию и обеспечить отказоустойчивость. 🎯Изучите, как организовать Dev/Stage/Prod окружения с Kubernetes, как эффективно использовать HPA для масштабирования и как обеспечить стабильность с помощью readiness и liveness проб. Погрузитесь в практику и разверните свой первый микросервис! 🔗 Ссылка на регистрацию: https://clck.ru/3N8tXy Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576 Erid 2SDnjeD7VFU

Banksy Shredder Реализовано на Vue и стилизовано в CSS. Есть возможность добавлять свою картинку через input type="file". 👉 @seniorFront

Как мы внедрили единый шаблон тикетов для разработчиков и упростили работу команды В этой статье расскажу о том, как организовать оперативный обмен информацией между участниками проекта и поддерживать документацию в актуальном состоянии. Отдельное внимание уделю работе с таск-трекерами — подробно опишу шаблон тикета, который успешно используется в нашей компании. Однако если вы работаете без трекера задач, например, в ворд-файлах, суть от этого не меняется — такой подход работает и с другими инструментами. 👉 @seniorFront

​Мы — не семья Когда устраиваешься в компанию, тебе обещают интересные задачи, рост и нормальный график. Но потом приходит письмо: «Мы — как семья, у нас общие ценности, мы делаем великое дело». Ты улыбаешься, думаешь: «Ладно, семья так семья». А потом — зарплату не повышают, потому что «недостаточно восхитительных отзывов», а коллегу и вовсе увольняют за «несоответствие». Разве с семьёй так поступают? Ценности — это маркетинг Корпоративные ценности — не душа компании, а инструмент. «Открытость», «смелость», «инновационность» — красивые слова, которые придумывают маркетологи и HR, чтобы оправдать низкие зарплаты «великой миссией». Это не скрепы, а лендинг для сотрудников. Как появляются ценности В стартапе на этапе MVP никто не думает о «миссии». Команда живёт кодом и кофе. Но когда людей становится больше, появляется хаос. Тогда HR говорит: «Нужны ценности, чтобы все были на одной волне». Так рождается неофициальная конституция компании. Почему это работает Человек хочет быть частью группы. Назови его «братом» — и мозг решит, что это безопасно. Особенно если ты на удалёнке и тимлид ближе, чем родные. Хочется верить, что работа — это «дело жизни», а не просто зарплата. И вот ты уже читаешь конфлюенс как Библию. Но это становится давлением Ценности превращаются в рычаг: задержись, потому что «мы же команда»; чувствуй вину, если закрыл ноут в 18:00; переживай за дедлайн, как за свою жизнь. Ты сам соглашаешься, хотя тебя никто не заставляет. Заражённые ценностями Появляются «евангелисты» — люди, которые цитируют конфлюенс и верят, что компания — это нечто большее. Они не понимают, почему ты не хочешь «погрузиться на выходных». Такие часто становятся менеджерами, для которых ценности — религия. Что делать - Не очаровываться. Компания — не семья, а сделка. Ты — профессионал, делающий нужную работу. - Иметь свои ценности. Уважай команду, но не принимай слоганы как догму. - Не бояться быть «не своим». Не всем нужны тимбилдинги и йога. Можно просто хорошо работать. Хорошая компания платит за работу и уважает твои границы. Мы — не семья. Мы — взрослые люди с договором. И этого достаточно. 👉 @seniorFront

Responsive Parallax Drag-slide Свёрстано на HTML и SCSS. Логика работы слайдера реализована в JS 👉 @seniorFront

🤘 Пройди хардкорный тест по JavaScript+Angular ✔️ Ответь на 20 вопросов и проверь свои знания. Сможешь сдать — пройдёшь на продвинутый курс "Angular Developer". ⛔️ТЕСТ СМОГЛИ ПРОЙТИ ТОЛЬКО 40% УЧАСТНИКОВ ⏰ Время прохождения теста ограничено 25 минут ✍️ПРОЙТИ ТЕСТ: https://clck.ru/3N6ujS 💣 Пройдете тест и получите: ✔️ Живое общение с экспертами ✔️ Лучшие открытые уроки прошлых наборов курса ✔️ Продвинутые темы и практика на «боевых» задачах уровня Middle+ ✔️ Скидку на прохождение онлайн курса «Angular Developer» Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576 Erid 2SDnjeK9UpN

Как отследить изменение поля объекта? Чтобы отслеживать изменения свойств объекта в JavaScript, можно использовать несколько методов, каждый из которых подходит для различных случаев. Использование Proxy Proxy является мощным и гибким способом перехвата и настройки операций с объектами, включая чтение и запись свойств.

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

Использование Object.defineProperty Object.defineProperty позволяет определить новое или изменить существующее свойство непосредственно на объекте, позволяя добавить геттеры и сеттеры для отслеживания изменений.

const person = {
    _name: 'Alice',
    _age: 25
};
Object.defineProperty(person, 'name', {
    get() {
        console.log('Getting name');
        return this._name;
    },
    set(value) {
        console.log(`Setting name to ${value}`);
        this._name = value;
    }
});
Object.defineProperty(person, 'age', {
    get() {
        console.log('Getting age');
        return this._age;
    },
    set(value) {
        console.log(`Setting age to ${value}`);
        this._age = value;
    }
});
person.name = 'Bob'; // Setting name to Bob
console.log(person.name); // Getting name // Bob
person.age = 30; // Setting age to 30
console.log(person.age); // Getting age // 30

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

import { observable, autorun } from 'mobx';
const person = observable({
    name: 'Alice',
    age: 25,
    setName(name) {
        this.name = name;
    },
    setAge(age) {
        this.age = age;
    }
});
// Автоматически вызываемая функция при изменении наблюдаемого состояния
autorun(() => {
    console.log(`Name: ${person.name}, Age: ${person.age}`);
});
person.setName('Bob'); // Name: Bob, Age: 25
person.setAge(30); // Name: Bob, Age: 30

Наблюдатель на изменение (MutationObserver) Для отслеживания изменений в DOM можно использовать MutationObserver. Это не напрямую связано с объектами, но полезно для отслеживания изменений в элементах DOM.

const targetNode = document.getElementById('target');
const config = { attributes: true, childList: true, subtree: true };
const callback = function(mutationsList, observer) {
    for(let mutation of mutationsList) {
        if (mutation.type === 'childList') {
            console.log('A child node has been added or removed.');
        }
        else if (mutation.type === 'attributes') {
            console.log('The ' + mutation.attributeName + ' attribute was modified.');
        }
    }
};
const observer = new MutationObserver(callback);
observer.observe(targetNode, config);
targetNode.setAttribute('data-test', 'value');

👉 @seniorFront