Web Skills — платформа, ориентированная на развитие навыков веб-разработки для всех уровней — от новичков до опытных специалистов. Здесь собраны все навыки для веб-разработчика с ссылками для изучения темы.

📌 Ссылочка: andreasbm.github.io

📣 Code Ready | #ресурс

👩‍💻 Автоматическое переименование тегов в HTML

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

📣 Code Ready | #плагин

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

📌 Ссылочка: metanit.com

📣 Code Ready | #ресурс

👩‍💻 Тонкости работы 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 | #техсобес

Emmet Cheat Sheet — сайт-шпаргалка для Emmet. Здесь собраны все аббревиатуры и формулы, при написании которых раскрываются большие куски кода, а это очень ускоряет разработку сайта.

📌 Ссылочка: docs.emmet.io/cheat-sheet

📣 Code Ready | #ресурс

👩‍💻 Полезные горячие клавиши VSCode

• Shift + ← / → / ↓ / ↑ — Позволяет выделять текст в направлении, указанном стрелкой.

• Shift + Alt + F — отформатировать листинг. Быстро выровняет код, чтобы он стал более читаемым, понятным и красивым.

• Ctrl + ] / [ — Добавляет или удаляет отступ строки.

📣 Code Ready | #клавиши