Добро пожаловать! 💻
Нас зовут Маша, Настя и Оля. Мы фронтенд-разработчицы и нам нравится делиться знаниями 👩💻
Здесь мы будем:
- публиковать полезные материалы по фронтенду - статьи, видео, другие ресурсы
- давать рекомендации по изучению 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
🎉 Новый урок курса по HTML и CSS уже на канале!
👨🏫 Во втором видео мы подробнее поговорим о текстовых тегах, отступах, переносах строк и форматировании текста.
🔍 Что вы узнаете:
1️⃣ Текстовые теги: начнем с базовых тегов для текстов.
2️⃣ Отступы и переносы строк: узнаем, как браузеры обрабатывают пространство и переносы.
3️⃣ Форматирование: рассмотрим примеры, как правильно форматировать текст с помощью HTML.
🔗 https://youtu.be/stDBzvNXWj0
Подписывайтесь на канал, чтобы не пропустить следующие видео!
👨🏫 Во втором видео мы подробнее поговорим о текстовых тегах, отступах, переносах строк и форматировании текста.
🔍 Что вы узнаете:
1️⃣ Текстовые теги: начнем с базовых тегов для текстов.
2️⃣ Отступы и переносы строк: узнаем, как браузеры обрабатывают пространство и переносы.
3️⃣ Форматирование: рассмотрим примеры, как правильно форматировать текст с помощью HTML.
🔗 https://youtu.be/stDBzvNXWj0
Подписывайтесь на канал, чтобы не пропустить следующие видео!
YouTube
Курс по HTML и CSS: текстовые теги #html #фронтенд
Курс по HTML и CSS для начинающих: В этом обучающем видео мы погрузимся в мир HTML и узнаем всё о текстовых тегах, отступах, переносах строк и форматировании текста. Это видео будет полезно как начинающим, так и тем, кто хочет освежить свои знания в HTML.…
🔥2
Настя Котова // Frontend & Node.js
Разбираемся с потерей контекста this в JavaScript! 🔍 Мы часто сталкиваемся с вопросами о this на собеседованиях по JavaScript. Сегодня мы разберем типичный случай, когда контекст this теряется и как это повлияет на код. 📝 Рассмотрим пример: function show()…
🔍 Вспоминаем наш последний разговор о контексте
Когда мы вызываем такую функцию:
результат зависит от режима выполнения кода: в строгом режиме получим
🔹 Что такое глобальный объект?
Это специальный объект, который доступен в любом уголке нашего JavaScript-кода. В браузере он известен как
🔸 Как работать с глобальными объектами?
1. Можно обращаться к свойствам глобального объекта напрямую:
2. Глобальные переменные, объявленные через
3. Глобальный объект помогает проверить поддержку современных возможностей языка:
❓ Но как быть, если код должен работать и в браузере, и на сервере?
Ключ к решению —
Были ли вы в курсе о
this в JavaScript и углубляемся в детали глобального объекта! 🌐Когда мы вызываем такую функцию:
function show() {
console.log(this);
}
show();
результат зависит от режима выполнения кода: в строгом режиме получим
undefined, в нестрогом — глобальный объект.🔹 Что такое глобальный объект?
Это специальный объект, который доступен в любом уголке нашего JavaScript-кода. В браузере он известен как
window, в Node.js — как global. 🔸 Как работать с глобальными объектами?
1. Можно обращаться к свойствам глобального объекта напрямую:
alert("Привет"); // то же самое, что и
window.alert("Привет");
2. Глобальные переменные, объявленные через
var, автоматически становятся частью window в браузере:
var gVar = 5;
alert(window.gVar); // 5
3. Глобальный объект помогает проверить поддержку современных возможностей языка:
if (!window.Promise) {
alert("Ваш браузер очень старый!");
}
❓ Но как быть, если код должен работать и в браузере, и на сервере?
Ключ к решению —
globalThis, универсальный объект, который справедлив для любой среды исполнения. Он имеет полную поддержку во всех последних версиях браузеров, и вы также можете использовать его в Node.js 12+. Подробнее можно прочитать здесь: MDN globalThis.Были ли вы в курсе о
globalThis? Поделитесь в комментариях 📬🔥2👍1
👨💻 Разбираемся в том, нужны ли фронтенд-разработчику знания за пределами его специализации? 🖥️
Некоторые могут считать, что фронтенд-разработчикам не нужно углубляться в бэкенд или другие аспекты. Но вот 3 ключевые области, которые помогут вам стать профессионалом на все руки:
1. Понимание HTTP
HTTP не просто склеивает фронтенд и бэкенд; это основа, которая определяет, как работает веб. Знания кодов ответов, структуры запроса, работы с куками и сессиями могут сильно упростить разработку и отладку приложений.
2. Хостинг, DNS, сервера, CDN
Чтобы ваше приложение ожило в интернете, необходимо понимать, как устроены доменные имена, настройка DNS, что такое хостинг и как работают сети доставки контента (CDN). Эти знания также помогут вам оптимизировать загрузку страниц и обеспечить лучший пользовательский опыт.
3. CI/CD
Системы непрерывной интеграции и развертывания играют ключевую роль в современной разработке. Они позволяют автоматически тестировать и развертывать ваш код каждый раз при внесении изменений. Зная принципы CI/CD, вы сможете ускорить процесс разработки и повысить его надежность.
💭 Но это еще не все! Фронтенд-разработчики часто изучают и другие аспекты, такие как безопасность веб-приложений, основы SEO и принципы UX/UI.
👉 А какие дополнительные навыки вы считаете важными для фронтенд-разработчика? Поделитесь своим опытом в комментариях!
Некоторые могут считать, что фронтенд-разработчикам не нужно углубляться в бэкенд или другие аспекты. Но вот 3 ключевые области, которые помогут вам стать профессионалом на все руки:
1. Понимание HTTP
HTTP не просто склеивает фронтенд и бэкенд; это основа, которая определяет, как работает веб. Знания кодов ответов, структуры запроса, работы с куками и сессиями могут сильно упростить разработку и отладку приложений.
2. Хостинг, DNS, сервера, CDN
Чтобы ваше приложение ожило в интернете, необходимо понимать, как устроены доменные имена, настройка DNS, что такое хостинг и как работают сети доставки контента (CDN). Эти знания также помогут вам оптимизировать загрузку страниц и обеспечить лучший пользовательский опыт.
3. CI/CD
Системы непрерывной интеграции и развертывания играют ключевую роль в современной разработке. Они позволяют автоматически тестировать и развертывать ваш код каждый раз при внесении изменений. Зная принципы CI/CD, вы сможете ускорить процесс разработки и повысить его надежность.
💭 Но это еще не все! Фронтенд-разработчики часто изучают и другие аспекты, такие как безопасность веб-приложений, основы SEO и принципы UX/UI.
👉 А какие дополнительные навыки вы считаете важными для фронтенд-разработчика? Поделитесь своим опытом в комментариях!
❤4
🚀 Новое видео уже на канале! 🚀
Сегодня мы продолжаем погружение в мир HTML и CSS! В этом видео мы уделим особое внимание заголовкам и расскажем о полезных одиночных тегах, а также о комментариях в коде.
🔍 Что вы узнаете:
- Зачем нужны заголовки и как они помогают поисковым системам.
- Как отличаются теги от <h1> до <h6> и их правильное использование.
- Изучим одиночные теги, такие как <br> и <hr>.
- Полезные советы по работе с комментариями в HTML.
👀 Видео наполнено не только теорией, но и практическими примерами, которые помогут вам лучше усвоить материал!
Смотрим видео 🎬 и улучшаем свое понимание HTML и CSS!
Сегодня мы продолжаем погружение в мир HTML и CSS! В этом видео мы уделим особое внимание заголовкам и расскажем о полезных одиночных тегах, а также о комментариях в коде.
🔍 Что вы узнаете:
- Зачем нужны заголовки и как они помогают поисковым системам.
- Как отличаются теги от <h1> до <h6> и их правильное использование.
- Изучим одиночные теги, такие как <br> и <hr>.
- Полезные советы по работе с комментариями в HTML.
👀 Видео наполнено не только теорией, но и практическими примерами, которые помогут вам лучше усвоить материал!
Смотрим видео 🎬 и улучшаем свое понимание HTML и CSS!
YouTube
HTML и CSS для начинающих: заголовки, одиночные теги, комментарии #фронтенд #html #верстка
Курс по HTML и CSS для начинающих. В этом видео поговорим о заголовках, одиночных тегах и комментариях в HTML.
#фронтенд #frontend #верстка #html #css #javascript #разработчик #вебразработка #вебразработчик #программирование #programming #урокипрограммирования…
#фронтенд #frontend #верстка #html #css #javascript #разработчик #вебразработка #вебразработчик #программирование #programming #урокипрограммирования…
🔥6