💛 Фронтенд-митап
Хотя современные митапы уже не назовёшь полноценно фронтендерскими, этот мит обещается именно для любителей джиэса 😅
Коллеги из Яндекса проводят регулярную конференцию «Я 💛 фронтенд», в этом году наконец-то оффлайн! Правда, места в зале разобрали в первый день анонса, как пирожочки (оцените уровень!). Но на онлайн ещё можно попасть.
Почему стоит подключиться:
🔥 узнать, как грамотно разрабатывать фронт параллельно с API (наконец-то!)
🔥 подыскать современную замену Bootstrap (и убедиться, что чистый CSS one love)
🔥 оценить доступность своего сайта с клавиатуры (уже пора бы это поддерживать)
🔥 окунуться в атмосферу написания своей стейт-машины (Тьюринг, Тьюринг и ещё один Тьюринг)
🔥познакомиться с заменами Express (оказывается, он не единственный!)
🔥 полюбить идею создания своей UI-библиотеки на примере (каждый фронтендер хоть раз хотел это сделать у себя в проекте, no?)
🔥 узнать полезности про метрики перфоманса веб-приложения (и новые вкладки DevTools!)
😁 достойный повод прогулять рабочую пятницу
🗓 Пятница, 12 августа
⏰ 10:30
🔗 Регистрация
Бегом регаться 🤓
Хотя современные митапы уже не назовёшь полноценно фронтендерскими, этот мит обещается именно для любителей джиэса 😅
Коллеги из Яндекса проводят регулярную конференцию «Я 💛 фронтенд», в этом году наконец-то оффлайн! Правда, места в зале разобрали в первый день анонса, как пирожочки (оцените уровень!). Но на онлайн ещё можно попасть.
Почему стоит подключиться:
🔥 узнать, как грамотно разрабатывать фронт параллельно с API (наконец-то!)
🔥 подыскать современную замену Bootstrap (и убедиться, что чистый CSS one love)
🔥 оценить доступность своего сайта с клавиатуры (уже пора бы это поддерживать)
🔥 окунуться в атмосферу написания своей стейт-машины (Тьюринг, Тьюринг и ещё один Тьюринг)
🔥познакомиться с заменами Express (оказывается, он не единственный!)
🔥 полюбить идею создания своей UI-библиотеки на примере (каждый фронтендер хоть раз хотел это сделать у себя в проекте, no?)
🔥 узнать полезности про метрики перфоманса веб-приложения (и новые вкладки DevTools!)
😁 достойный повод прогулять рабочую пятницу
🗓 Пятница, 12 августа
⏰ 10:30
🔗 Регистрация
Бегом регаться 🤓
🔥2❤1
💯 Переменные в JS в 2к22
Must-have тема для всех фронтендеров. Она часто вызывает трудности в начале пути, поэтому разбираемся (или вспоминаем) 😉
Если коротко, вся разница в идентификаторах (var, const, let) заключается в области видимости, в которой они работают.
Область видимости (лексическое окружение) - блок кода (функция или глобальный объект), в рамках которой переменная “видна”. Внутри этой области к ней можно обратиться. За пределами она не существует (будет ошибка ReferenceError: variable is not defined).
1️⃣ const. Используется для обозначения неизменяемых переменных. Такая переменная доступна только в блоке, где она была объявлена. Нельзя обратиться до инициализации. Если попытаться изменить присвоение - будет ошибка.
2️⃣ let. Пишем, когда переменная изменяемая. Аналогично const: переменная доступна только в блоке, где она была объявлена + к ней нельзя обратиться до инициализации. Часто используется в итераторах или аккумуляторах.
3️⃣ var. Dangerous - устарело!!! Встречается в старом коде (до ES6), а также в билд-сборках после сжатия вашего кода бандлером. Использовалась как let, но с исключениями. Переменная не ограничена блоком, только глобальным скриптом или функцией (т.е. можно считать вне блока). Можно обратиться до инициализации, ошибки не будет, будет “undefined”/”uninitialized”. Можно повторно объявить переменную.
🧨 Важно 1. Для объектов и массивов используем const. Они хранятся ссылками, поэтому изменяем содержимое ссылки, а не её саму.
🧨 Важно 2. Для итераторов циклов используем let. Семантически мы меняем одну и ту же переменную, поэтому const не уместно. Также let работает в рамках одной итерации цикла, что позволяет избежать случайных замыканий и переопределений. А еще раньше была тема, что если итератор объявлен через let, то он занимает одну ячейку памяти, а если через const - на каждую итерацию своя ячейка (если кто-то найдет этому прувы, буду сильно благодарна!).
🔗 Почитать ещё: раз, два и три
⚛️ Примеры: ниже #ачтопокоду
🤡 Практика: скоро будет, не переключайтесь 💃🏻
#basics
Must-have тема для всех фронтендеров. Она часто вызывает трудности в начале пути, поэтому разбираемся (или вспоминаем) 😉
Если коротко, вся разница в идентификаторах (var, const, let) заключается в области видимости, в которой они работают.
Область видимости (лексическое окружение) - блок кода (функция или глобальный объект), в рамках которой переменная “видна”. Внутри этой области к ней можно обратиться. За пределами она не существует (будет ошибка ReferenceError: variable is not defined).
1️⃣ const. Используется для обозначения неизменяемых переменных. Такая переменная доступна только в блоке, где она была объявлена. Нельзя обратиться до инициализации. Если попытаться изменить присвоение - будет ошибка.
2️⃣ let. Пишем, когда переменная изменяемая. Аналогично const: переменная доступна только в блоке, где она была объявлена + к ней нельзя обратиться до инициализации. Часто используется в итераторах или аккумуляторах.
3️⃣ var. Dangerous - устарело!!! Встречается в старом коде (до ES6), а также в билд-сборках после сжатия вашего кода бандлером. Использовалась как let, но с исключениями. Переменная не ограничена блоком, только глобальным скриптом или функцией (т.е. можно считать вне блока). Можно обратиться до инициализации, ошибки не будет, будет “undefined”/”uninitialized”. Можно повторно объявить переменную.
🧨 Важно 1. Для объектов и массивов используем const. Они хранятся ссылками, поэтому изменяем содержимое ссылки, а не её саму.
🧨 Важно 2. Для итераторов циклов используем let. Семантически мы меняем одну и ту же переменную, поэтому const не уместно. Также let работает в рамках одной итерации цикла, что позволяет избежать случайных замыканий и переопределений. А еще раньше была тема, что если итератор объявлен через let, то он занимает одну ячейку памяти, а если через const - на каждую итерацию своя ячейка (если кто-то найдет этому прувы, буду сильно благодарна!).
🔗 Почитать ещё: раз, два и три
⚛️ Примеры: ниже #ачтопокоду
🤡 Практика: скоро будет, не переключайтесь 💃🏻
#basics
🔥5
Есть ли ошибка в коде: var arr = [1,2,3]; arr.push(4);
Anonymous Quiz
4%
код невалидный, будет ошибка инициализации
67%
код валидный, но устаревший. лучше использовать const
4%
код невалидный, var нельзя использовать для массивов
26%
код валидный, но устаревший. лучше использовать let
0%
код невалидный, утекает память, вкладка виснет
хочу попробовать новую рубрику #ПараднаяПятничка , где каждую пятницу (или почти каждую) будет подборка любопытных видосов, подкастов, статей и (возможно) митапов. Некий волшебный пинок провести выходные с пользой. Как говорится, заваривайте пельмешки, мы начинаем 😎
🧑🏻🎓 #ПараднаяПятничка №1. Пролог
🙈 Что посмотреть
Ссылка - Про доступность с клавиатуры с последней яндексовой конференции «Я 💛 фронтенд». Прикольные прикладные примеры, важная сторона клиента
🙉 Что послушать
Ссылка - Про коучинг и его место в IT от «Подлодки»
🙊 Что почитать
Хабр - Ссылка - Про частые ошибки в React
Ну и последнюю презентацию Apple я бы тоже рекомендовала посмотреть для прокачки инглиша 🤓
Всем кайфовых выходных ✨
🙈 Что посмотреть
Ссылка - Про доступность с клавиатуры с последней яндексовой конференции «Я 💛 фронтенд». Прикольные прикладные примеры, важная сторона клиента
🙉 Что послушать
Ссылка - Про коучинг и его место в IT от «Подлодки»
🙊 Что почитать
Хабр - Ссылка - Про частые ошибки в React
Ну и последнюю презентацию Apple я бы тоже рекомендовала посмотреть для прокачки инглиша 🤓
Всем кайфовых выходных ✨
🔥2
🧑🏻🎓 #ПараднаяПятничка №2. Неожиданности
🙈 Что посмотреть
Ссылка - Метаморфозы в JavaScript. Почему этот языка такой прикольный, и что в нём порой так бесит. Лучше всяких анекдотов 🙂
🙊 Что почитать
Ссылка - Анимации на GPU (про нестандартную работу некоторых стилей с кучей примеров от коллег из ОК)
Познавательных выходных, ребятки)
🙈 Что посмотреть
Ссылка - Метаморфозы в JavaScript. Почему этот языка такой прикольный, и что в нём порой так бесит. Лучше всяких анекдотов 🙂
🙊 Что почитать
Ссылка - Анимации на GPU (про нестандартную работу некоторых стилей с кучей примеров от коллег из ОК)
Познавательных выходных, ребятки)
👍2❤1
🚀 Фронтендер не должен деплоить!
Всем привет, друзья! Время от времени мои разработческие изыскания приводят меня в тёмную-тёмную тему под названием "Деплой". И каждый раз я кривлюсь лицом и кричу в космос: "Нееееет, пожалуйста, фронтендер не должен деплоить!". Увы, должен. Должен хотя бы разок попробовать. Поэтому я решила объявить май месяцем деплоя - вспомнить, что это, как это и какие тут есть нюансы. Пристегнитесь, мы начинаем 🚀
Итак, деплой - это процесс переноса кода веб-приложения в Интернет. Т.е. именно благодаря этому процессу работу код с нашего localhost можно показать друзьям, маме, коту по ссылке вида example.com
Что нужно, чтобы задеплоить веб-приложение (минимум):
✅ Удаленная машина (VDS или «виртуалка»)
✅ Базовые навыки работы с Linux (не пугаемся, достаточно уметь копировать команды, читать логи и гуглить ошибки)
✅ Git-репозиторий (необязательно, но так удобнее переносить новую версию кода на удаленную машину)
✅ Домен (необязательно, но так наш сайт будет выглядеть более презентабельно)
🧨 Важно: мы рассмотрим самый простой процесс публикации, который поможет вам деплоить свои pet-проекты. Если вы работаете в большой компании, обычно процесс деплоя сильно сложнее, состоит из нескольких компонентов и модерируется отдельной командой - DevOps. Об отличиях тоже поговорим, но позже 🙂
🧨 Важно 2: на момент публикации нашего приложения в сеть оно уже должно уметь работать в production-режиме. Поэтому в следующем посте мы поговорим именно об этом.
P.S. если вдруг вам не хочется ждать остальных постов и нужна просто инструкция со всеми командочками для деплоя, рекомендую добавить в закладки эту статью. Она была составлена довольно подробно для студентов-начинашек, поэтому между строк можно читать заботу автора.
P.P.S. спасибо, что читаете ♥️ если у вас есть тема, которую хотелось бы подробнее разобрать, или просто есть идеи о развитии канала, дайте знать @emdobryanskaya . всем классной пятнички!
#basics #NoJS
Всем привет, друзья! Время от времени мои разработческие изыскания приводят меня в тёмную-тёмную тему под названием "Деплой". И каждый раз я кривлюсь лицом и кричу в космос: "Нееееет, пожалуйста, фронтендер не должен деплоить!". Увы, должен. Должен хотя бы разок попробовать. Поэтому я решила объявить май месяцем деплоя - вспомнить, что это, как это и какие тут есть нюансы. Пристегнитесь, мы начинаем 🚀
Итак, деплой - это процесс переноса кода веб-приложения в Интернет. Т.е. именно благодаря этому процессу работу код с нашего localhost можно показать друзьям, маме, коту по ссылке вида example.com
Что нужно, чтобы задеплоить веб-приложение (минимум):
🧨 Важно: мы рассмотрим самый простой процесс публикации, который поможет вам деплоить свои pet-проекты. Если вы работаете в большой компании, обычно процесс деплоя сильно сложнее, состоит из нескольких компонентов и модерируется отдельной командой - DevOps. Об отличиях тоже поговорим, но позже 🙂
🧨 Важно 2: на момент публикации нашего приложения в сеть оно уже должно уметь работать в production-режиме. Поэтому в следующем посте мы поговорим именно об этом.
P.S. если вдруг вам не хочется ждать остальных постов и нужна просто инструкция со всеми командочками для деплоя, рекомендую добавить в закладки эту статью. Она была составлена довольно подробно для студентов-начинашек, поэтому между строк можно читать заботу автора.
P.P.S. спасибо, что читаете ♥️ если у вас есть тема, которую хотелось бы подробнее разобрать, или просто есть идеи о развитии канала, дайте знать @emdobryanskaya . всем классной пятнички!
#basics #NoJS
Please open Telegram to view this post
VIEW IN TELEGRAM
❤6