Code Ready | Frontend

👩‍💻 Промисы и цепочка промисов в JavaScript

Промисы — это удобный способ работы с асинхронным кодом в JavaScript, упрощающий управление задачами, которые выполняются с задержкой, как запросы к серверу.

🔥 — если узнал новое 🤝 — если уже пользовался 📣 Code Ready | #гайд #js

В России можно посещать IT-мероприятия хоть каждый день: как оффлайн, так и онлайн Но где найти единую "базу" ивентов? Чтобы "заглянул -> увидел все что есть -> выбрал -> пошел"? 🔥 Советуем обратить внимание на канал, в котором публикуют анонсы вебинаров, хакатонов, конференций, мастер-классов, ивентов от гигантов индустрии и лучших специалистов по кодингу, дизайну, аналитике и т.д. 👍  Классный и полезный канал, где вы точно не пропустите ничего важного и интересного. 🗂 IT-мероприятия России / ITMeeting / IT events — подписывайся и будь в курсе ближайших ивентов!

👩‍💻 Шпаргалка по регулярным выражениям Регулярные выражения (RegEx) позволяют легко находить и обрабатывать текст по шаблону. Используются в поиске, валидации данных и других задачах, связанных с обработкой строк. 📣 Code Ready | #js #шпаргалка

👩‍💻 Полезные горячие клавиши VSCode • Shift + ← / → / ↓ / ↑ — Позволяет выделять текст в направлении, указанном стрелкой. • Shift + Alt + F — отформатировать листинг. Быстро выровняет код, чтобы он стал более читаемым, понятным и красивым. • Ctrl + ] / [ — Добавляет или удаляет отступ строки. 📣 Code Ready | #клавиши

Emmet Cheat Sheet — сайт-шпаргалка для Emmet. Здесь собраны все аббревиатуры и формулы, при написании которых раскрываются большие куски кода, а это очень ускоряет разработку сайта. 📌 Ссылочка: docs.emmet.io/cheat-sheet 📣 Code Ready | #ресурс

Участвуй в «Совкомбанк SecureHack» с призовым фондом 300 000 рублей и внеси свой вклад в разработку решения для защиты информационных систем Совкомбанка! Регистрация на хакатон открыта до 4 декабря включительно: ссылка на регистрацию Хакатон рассчитан на специалистов уровня Middle и выше — экспертов по информационной безопасности, системных аналитиков, разработчиков и архитекторов ПО с опытом в оценке безопасности. Участвуйте индивидуально или в командах до 3-х человек. Основная задача — разработать инструмент для оценки безопасности информационных систем банка, который будет полезен как для разработчиков и аналитиков ИБ, так и для проектных менеджеров, и сможет: · Принимать на вход различные данные, такие как опросники и карты сетевых доступов. · Проводить анализ введенных данных для выявления уязвимостей и рисков информационной безопасности. · Формировать отчет с заключением об уровне безопасности, описанием существующих рисков и рекомендациями по его улучшению. Вы сможете: · Побороться за призовой фонд в 300 000 рублей. · Решить практическую задачу с использованием современных инструментов и подходов к безопасности. · Расширить свои компетенции и поработать с командой над междисциплинарным проектом. Таймлайн хакатона: · до 4 декабря — регистрация участников · 6 декабря — старт работы над задачей · 15 декабря — завершение загрузки решений · 19 декабря — награждение победителей Стань автором решения, которое повысит безопасность цифровых сервисов Совкомбанка, и покажи свои способности на практике! Успей зарегистрироваться до 4 декабря: https://cnrlink.com/securehackcodeready Реклама. ПАО "Совкомбанк". ИНН: 4401116480. erid: LjN8KM6kb

👩‍💻 Тонкости работы this в стрелочных и обычных функциях 1. Ключевое отличие в привязке this — В обычных функциях this определяется в момент вызова функции, а в стрелочных функциях — в момент их создания:

const obj = {
  regularFunc: function() { return this; },
  arrowFunc: () => this
};

2. Использование стрелочных функций в методах объектов — Стрелочные функции не рекомендуется использовать для методов объектов, поскольку this у них не привязан к самому объекту:

const obj = {
  name: 'John',
  regularFunc() { console.log(this.name); },
  arrowFunc: () => console.log(this.name)
};
obj.regularFunc(); // Выводит: "John"
obj.arrowFunc();   // Выводит: undefined

3. Поведение this в обработчиках событий — При использовании обычных функций в обработчиках this указывает на элемент, вызвавший событие, а стрелочные функции наследуют this из внешней области:

const button = document.querySelector('button');
button.addEventListener('click', function() { console.log(this); }); 
button.addEventListener('click', () => console.log(this));           

4. Контекст this при вызове с call и apply — Стрелочные функции игнорируют методы привязки контекста this, такие как call и apply, в отличие от обычных функций:

function regular() { return this.name; }
const arrow = () => this.name;

console.log(regular.call({ name: 'Alice' })); // "Alice"
console.log(arrow.call({ name: 'Alice' }));   // undefined

📣 Code Ready | #техсобес

🚀 Получи профессиональное образование в сфере UX/UI бесплатно! От основ до продвинутых техник — всё в одном бесплатном курсе от топовой дизайн-студии🔥 ⚡️Вы изучите систематизированные методические материалы по всей теории дизайна интерфейсов ⚡️Выполните много дизайн-домашек и получите разборы от действующих дизайнеров ⚡️Пополните свое портфолио классными проектами ⚡️Вступите в самое экологичное сообщество по дизайну с поддержкой и подробными фидбэками менторов ➕ Бонусом: доступ к секретным лекциям от арт-директора, а также полезные сайты и материалы для вашей работы. Курс подходит не только новичкам, но и опытным дизайнерам, которые хотят поднять уровень своих проектов и увеличить свой чек. ➡️ Начать учиться Реклама. ИП Кузьмин Е.Л. ИНН: 634502641730 erid: 2VtzqwDzUVs

metanit — это портал, на котором представлено множество полезных материалов для обучения программированию. Здесь можно найти ресурсы по и разным языкам, а каждое пособие содержит примеры кода. 📌 Ссылочка: metanit.com 📣 Code Ready | #ресурс

👩‍💻 Тултип с анимацией при наведении на текст Всем привет! Сегодня разберёмся, как создать и анимировать тултип для текста на HTML и CSS. Мы добавим небольшую подсказку, которая будет появляться при наведении на текст, и настроим плавный эффект для её появления.

Для создания тултипа будем использовать псевдоэлемент ::after и свойство transform. Сначала тултип будет скрыт, а при наведении курсора плавно появится над текстом.

📣 Code Ready | #гайд #css

Фронтенд в картинках — просто, наглядно и понятно. Новые знания в компактном формате каждый день. Присоединяйтесь: @FrontendPortal

👩‍💻 Автоматическое переименование тегов в HTML Auto Rename Tag — это полезное расширение для VS Code, которое значительно упрощает работу с HTML и XML-кодом. Этот плагин автоматически переименовывает закрывающий тег при изменении открывающего. 📣 Code Ready | #плагин

Web Skills — платформа, ориентированная на развитие навыков веб-разработки для всех уровней — от новичков до опытных специалистов. Здесь собраны все навыки для веб-разработчика с ссылками для изучения темы. 📌 Ссылочка: andreasbm.github.io 📣 Code Ready | #ресурс

👩‍💻 Тег meter Тег meter в HTML используется для отображения значения в определённом диапазоне, например, прогресса, уровня заряда или рейтинга. Для <meter> атрибуты min и max задают нижний и верхний пределы отображаемого диапазона, что позволяет визуально показать уровень значения.

• min="0" max="100" — устанавливает диапазон от 0 до 100. • value="75" — устанавливает текущее значение, например, 75 из 100.

Этот тег удобен для отображения относительных значений, таких как прогресс выполнения задач или статусы процессов. 📣 Code Ready | #тег

Все надоело и пропал интерес, чувствуешь себя амебой и хочется только залипать в телефоне. Бывает? Психолог взрослого человека - канал для айтишников, у которых периодически опускаются руки и отключается мозг, ибо переработки и постоянная тревожность не приводят к другим исходам. ✔️ Как научиться отвлекаться от работы и отдыхать? ✔️ Как совместить кучу рабочих задач и время с семьей? ✔️ Как справиться с прокрастинацией? ✔️ Как не растерять запал, даже если начальник и коллеги 💩 и кажется, что ничего не выходит? Подписывайтесь на канал @vadimpetrov_psy и научитесь работать без упахивания, выгорания и ущерба для личной жизни! 👨🏻‍💻 Псс. Заходите в закреп канала - там много полезного, и даже бесплатный мини-курс.

📖 ECMAScript 6 для разработчиков Практическое руководство по использованию новых возможностей ES6, предназначенное для разработчиков, желающих улучшить свой JavaScript-код.

Автор: Николас Закас Год: 2017

⬇️ Скачать книгу 📣 Code Ready | #книга

👩‍💻 Карточка с анимацией переворота В этом гайде создадим интерактивную карточку на HTML и CSS, которая переворачивается при наведении, показывая другую сторону с текстом. Для этого будем использовать свойства backface-visibility и perspective, чтобы создать эффект 3D-переворота. 📣 Code Ready | #гайд #css

🚀 Изучай HTML и CSS с нуля! 🚀 Присоединяйтесь к нашему Telegram-каналу [https://t.me/made_in_html_css] Здесь вы найдете: Уроки с нуля – от основ к сложным темам. Практические задания – применяйте знания на практике. Советы от опытных разработчиков – получайте помощь и рекомендации. Участие в проектах – накапливайте практический опыт. Обсуждения – делитесь успехами и задавайте вопросы. Присоединяйтесь к Made in HTML/CSS и начните обучение уже сегодня! 🌟