Добро пожаловать! 💻
Нас зовут Маша, Настя и Оля. Мы фронтенд-разработчицы и нам нравится делиться знаниями 👩💻
Здесь мы будем:
- публиковать полезные материалы по фронтенду - статьи, видео, другие ресурсы
- давать рекомендации по изучению IT - советы, роадмапы
- рассказывать про простые и сложные темы во фронтенде
Нас зовут Маша, Настя и Оля. Мы фронтенд-разработчицы и нам нравится делиться знаниями 👩💻
Здесь мы будем:
- публиковать полезные материалы по фронтенду - статьи, видео, другие ресурсы
- давать рекомендации по изучению IT - советы, роадмапы
- рассказывать про простые и сложные темы во фронтенде
🔥8
Полезные фишки DevTools 💻💪
В DevTools Google Chrome постоянно добавляются новые фичи. Из-за этого разработчику можно быть сложно отслеживать все обновления и помнить обо всех фишках. Сейчас мы расскажем о нескольких из них.
1. Rendering и эмуляция печати
Во вкладке
2. Дебаг выпадающих списков
В этой же вкладке
3. Все CSS-изменение в одном месте
Часто бывает, что мы очень много экспериментируем со стилями в DevTools, пока не находим решение, которое нас устраивает. Чтобы не вспоминать все изменение и не переносить вручную, можно использовать вкладку
Какие еще полезные фишки DevTools вы знаете? 🤔 Делитесь в комментариях! 👩💻🧑💻
В DevTools Google Chrome постоянно добавляются новые фичи. Из-за этого разработчику можно быть сложно отслеживать все обновления и помнить обо всех фишках. Сейчас мы расскажем о нескольких из них.
1. Rendering и эмуляция печати
Во вкладке
Rendering (три точки → More tools → Rendering) есть много инструментов для удобной эмуляции разного поведения браузера. Например, вам может пригодиться опция Emulate CSS media type → print, которая будет отображать вашу страницу по умолчанию в режиме печати. Это может быть очень полезно, если вы реализовываете экшен печати страницы, и вам необходимо подкорректировать её стили.2. Дебаг выпадающих списков
В этой же вкладке
Rendering есть и другая полезная фича: Emulate a focused page. Эта опция будет полезна, если вам нужно подебажить стили, например, выпадающего списка у строки поиска, который по умолчанию скрывается, когда вы уводите с него фокус. Включенная галочка Emulate a focused page позволит вашему выпадающему списку не воспринимать переход в область DevTools или другое место как потерю фокуса. Таким образом ваш список не будет закрываться, и вы сможете легко отловить проблему или поправить стили.3. Все CSS-изменение в одном месте
Часто бывает, что мы очень много экспериментируем со стилями в DevTools, пока не находим решение, которое нас устраивает. Чтобы не вспоминать все изменение и не переносить вручную, можно использовать вкладку
Changes (три точки → More tools → Changes). Она в удобном виде покажет все изменения, которые были внесены вами и даст скопировать сразу все новые добавленные селекторы со стилями.Какие еще полезные фишки DevTools вы знаете? 🤔 Делитесь в комментариях! 👩💻🧑💻
🔥6
🚀 Запускаем серию уроков по HTML и CSS!
Представляем первое видео из нашего курса, которое станет отличной отправной точкой для новичков и полезным напоминанием для уже практикующих разработчиков.
👨💻 Что ждет в этом видео?
1. Введение в Web: Понимание основ интернета и из чего состоят веб-страницы
2. Основы HTML и CSS: Что такое HTML и CSS, и как они позволяют нам создавать веб-сайты
3. Работа в VSCode: Узнайте, как настроить и использовать одну из самых популярных сред разработки — Visual Studio Code.
4. Создание первой HTML страницы: Пошаговое руководство по созданию первой страницы, основы HTML и из чего состоит любой HTML-файл
🖥️ Под капотом каждого сайта лежат HTML и CSS, и мы уверены, что наш курс станет отличным стартом в мир создания веб-сайтов.
🔗 https://youtu.be/bL9X21WNjTc
Не забудьте подписаться на канал, чтобы не пропустить новые видео! Оставляйте ваши вопросы и комментарии под видео — мы обязательно на них ответим.
💡 Поделитесь этим видео с друзьями, которые также интересуются веб-разработкой!
Представляем первое видео из нашего курса, которое станет отличной отправной точкой для новичков и полезным напоминанием для уже практикующих разработчиков.
👨💻 Что ждет в этом видео?
1. Введение в Web: Понимание основ интернета и из чего состоят веб-страницы
2. Основы HTML и CSS: Что такое HTML и CSS, и как они позволяют нам создавать веб-сайты
3. Работа в VSCode: Узнайте, как настроить и использовать одну из самых популярных сред разработки — Visual Studio Code.
4. Создание первой HTML страницы: Пошаговое руководство по созданию первой страницы, основы HTML и из чего состоит любой HTML-файл
🖥️ Под капотом каждого сайта лежат HTML и CSS, и мы уверены, что наш курс станет отличным стартом в мир создания веб-сайтов.
🔗 https://youtu.be/bL9X21WNjTc
Не забудьте подписаться на канал, чтобы не пропустить новые видео! Оставляйте ваши вопросы и комментарии под видео — мы обязательно на них ответим.
💡 Поделитесь этим видео с друзьями, которые также интересуются веб-разработкой!
YouTube
Курс по HTML и CSS: введение в web, браузер, VSCode, HTML страница
Это видео - идеальное введение в веб-разработку для начинающих. Мы начнем с основ, рассматривая ключевые понятия, такие как интернет, браузеры и инструменты разработки, такие как Visual Studio Code. Шаг за шагом, вы узнаете, как создать свою первую HTML страницу…
❤3🔥2👍1
Разбираемся с потерей контекста
Мы часто сталкиваемся с вопросами о
📝 Рассмотрим пример:
В этом случае
Так, базово можно сказать, что
🔄 Но что происходит, если вызовем функцию не как метод объекта?
Здесь
⏲ Сложный случай с
Хотя кажется, что
Мы можем немного развернуть данную запись, если попробуем описать функцию
Таким образом наш переданный метод
📖 Чтение по теме:
Почему это происходит:
- Понимаем ссылочные типы
Обсуждения и подробности this:
- Методы объекта и контекст 'this'
- Habr: Детально о this
- TheCode: Как работает this в JavaScript
this в JavaScript! 🔍Мы часто сталкиваемся с вопросами о
this на собеседованиях по JavaScript. Сегодня мы разберем типичный случай, когда контекст this теряется и как это повлияет на код.📝 Рассмотрим пример:
function show() {
console.log(this);
}
const obj = {show: show};
obj.show();
В этом случае
this внутри функции show будет указывать на объект obj, так как функция вызывается как метод этого объекта.Так, базово можно сказать, что
this – это объект «перед точкой». Если при вызове функции что-то есть перед точкой, то это “что-то” будет доступно как this внутри этой функции.🔄 Но что происходит, если вызовем функцию не как метод объекта?
const showAgain = obj.show;
showAgain(); // this потерян, в консоль выведется undefined или глобальный объект
Здесь
this теряется, потому что мы вызываем функцию show не через объект, а напрямую. “Чего-то перед точкой” больше нет, и наш this будет потерян.⏲ Сложный случай с
setTimeout:
setTimeout(obj.show, 1000);
Хотя кажется, что
show все еще метод объекта obj, контекст теряется. Это происходит потому, что setTimeout вызывает функцию show как обычную функцию, а не как метод объекта.Мы можем немного развернуть данную запись, если попробуем описать функцию
setTimout:
function setTimout(handler, timeout) {
// что-то происходит
// ...
// и наконец где-то вызывается handler
handler();
// ...
}
Таким образом наш переданный метод
obj.show будет вызываться где-то внутри setTimout как handler, без “чего-то” перед точкой, а значит потеряет свой контекст.📖 Чтение по теме:
Почему это происходит:
- Понимаем ссылочные типы
Обсуждения и подробности this:
- Методы объекта и контекст 'this'
- Habr: Детально о this
- TheCode: Как работает this в JavaScript
🔥4