Всем привет!

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

Тем временем, вы можете присоединиться к проекту по созданию портфолио фронтенд-разработчика с моей помощью.

Этот проект подойдет для тех, кто уже имеет опыт в обучении фронтенд-разработке, но не чувствует уверенности. Работа со мной поможет вам получить хороший старт для будущей карьеры.

В первый месяц мы будем работать над созданием лендинга с виджетом формы обратной связи и сообщением в попапе. Также мы разработаем еще один виджет на ваш выбор или из предложенных мной. Во втором месяце мы создадим сайт-портфолио на JS или React.

Осталось всего 1-2 места, старт проекта - 1 мая. Следующий поток будет доступен не ранее июля. Более подробную информацию о программе менторства можно найти на сайте http://webinsidepro.tilda.ws/consult.

Если у вас возникнут вопросы или вы захотите записаться на проект, пишите мне в личные сообщения @elis_kry или заполните форму на сайте 😉

Всем привет! Дайджеста полезных ресурсов №3.

Технологии:

На текущем этапе работы мы в компании активно переходим с использования библиотеки reach/router на react-router для маршрутизации в наших React-приложениях. Подробнее о преимуществах этого перехода можно узнать здесь: https://reactrouter.com/en/main/upgrading/reach.

В настоящее время стандартом для тестирования React-компонентов на фронте является библиотека Testing Library. Эта библиотека предоставляет лучшие практики для тестирования и рекомендует использование userEvent для имитации событий на элементах вместо fireEvent. Примеры и подробности можно посмотреть по следующим ссылкам:
https://testing-library.com/docs/dom-testing-library/api-events/#fireevent
https://testing-library.com/docs/ecosystem-user-event/

Кроме того, недавно при работе я столкнулась с использованием классовых компонентов и подключением Redux с помощью connect. Однако существует и другой способ, который является рекомендованным для функциональных компонентов. Подробнее можно узнать по этой ссылке https://react-redux.js.org/api/connect.

Интересное:
Я также хотела порекомендовать вам просмотр видеозаписей с недавней фронтенд-конференции HolyJS. Вы можете найти записи конференции по этой ссылке https://www.youtube.com/watch?v=GbJQLj_YerI&list=PL8sJahqnzh8I1uVkTypmYzQnLyFFSzIRU.

#дайджест_фронтенд

Также спешу сообщить, что в июле стартует мой месячный менторинг по React. Тема: разработка сайта портфолио.

Менторинг проходит в закрытом канале Телеграм, на котором я выкладываю все материалы.

От меня вы получите:
1. Видео по макету, который прикреплен к этому сообщению.
- Развертывание и архитектура проекта;
- Разработка простых и интерактивных компонентов, например карточки, навигация, форма;
Часть компонентов нужно будет делать самостоятельно, по желанию можно выбрать свой макет и сделать по нему, опираясь на мои видео.
2. Ссылки на материалы для изучения.
3. Ответы на вопросы в чате.
4. Созвон раз в неделю, где будем обсуждать вопросы и прогресс по проекту.

Набираю группу до 6 человек, часть мест уже заняты участниками предыдущего менторинга. Стоимость от 10000 руб за месяц менторинга. В результате вы получаете готовый проект портфолио на Реакт и знания по работе с этим фреймворком.

Сейчас я определяюсь с датой проведения и уровнем участников, если вам интересно участие в проекте, заполните пожалуйста короткую форму предзаписи https://forms.gle/WWXhkyFABwk1R6bA8

Если у вас есть вопросы по менторингу, пишите в директ @elis_kry

Всем привет! У меня к сожалению не всегда хватает врмени, чтоб вести все свои каналы) Сейчас в Инсте веду цикл видео по Реакт. Нужно ли дублировать сюда? Если да, поставьте любую реакцию на это сообщение😉

А в прошлую субботу был выпуск первой группы на менторстве по React. И так как материал получился классный, я собрала его в интенсив. Первое видео можно посмотреть бесплатно по ссылке http://webinsidepro.tilda.ws/intensive-portfolio-react

Всем привет! Как вы могли заметить, я обновила аватарку и описание канала. Все что я делаю об IT, теперь будет существовать в виде единого проекта Web Inside Pro. Возвращаюсь к истокам, но в обновленном видении 🙂

Сюда я буду дублировать посты из канала сообщества в Инстаграм, а также выкладывать лонгриды и ссылки, которые не помещаются в Инстаграммный формат!

Идея проекта состоит в том, чтобы объединить опытных и начинающих специалистов из IT и расти вместе в поддерживающем окружении.

За 10 лет работы программистом и 3 года работы ментором и наставником я поняла 3 важные вещи:

- каждый человек талантлив и каждый может достичь успехов в том деле, которое ему искренне интересно.

- важно показать человеку, что он способен на многое, мягко направить и поддержать, но не решать проблемы за него. Такой подход дает опору и уверенность в своих силах.

- работа в группе идет быстрее и эффективнее чем 1 на 1, так как помимо наставника участники поддерживают и мотивируют друг друга.

В комментарии к этому сообщению вы можете поделиться сложностями, которые есть прямо сейчас в обучении или росте в IT-профессии, а я постараюсь помочь найти решение😉

Сделала небольшой опрос, чтобы понять какие темы сейчас наиболее актуальны для вас, заполнение займет 1-3 минуты 🙂 https://forms.gle/annLW8dDYYeZee1i6

И еще один опрос для тех кто уже работает в ИТ и хочет делиться знаниями с другими https://forms.gle/JTf8GXdUuWxWAgkW6

Всем привет! В Инстаграм на этой неделе вспоминали верстку, а здесь поделюсь важными темами в текстовом формате.

Семантическая разметка.
Чтобы ваша HTML-разметка была читабельной, корректно индексировалась поисковиками и могла быть доступка на любых устройствах, используйте семантические теги, например <h1>, <h2> для заголовков, <nav> для навигации, <section> для отделения логически блоков.
Подробнее о семантической разметке - https://htmlacademy.ru/blog/html/semantics

Блочные и строчные элементы.
Блочный HTML-элемент:
- Имеет CSS-свойства ширины и высоты width и height.
- Имеет CSS-свойство display: block
- Если не задана ширина растягивается на 100% своего контейнера
- Внешние и внутренние отступы, рамка будут отодвигать от него другие элементы.
примеры блочных элементов <p> и <section>

Строчный элемент:
- Он НЕ будет начинаться с новой строки.
- Имеет CSS-свойство display: inline
CSS-Свойства width и height не будут применяться.
- Вертикальные отступы будут применяться, но не будут отодвигать другие строчные элементы.
- Горизонтальные отступы будут применяться и будут отодвигать другие строчные элементы.
примеры <span> <a>
Подробнее о блочных и строчных элементах: https://developer.mozilla.org/ru/docs/Learn/CSS/Building_blocks/The_box_model

Отступы HTML-блоков, свойства padding и margin.
Внешние отступы, то есть расстояние от одного элемента до другого задаются CSS-свойством margin - https://developer.mozilla.org/ru/docs/Web/CSS/margin

Внутренние отступы, расстояние от внешних границ элемента до его контента задаются CSS-свойством padding - https://developer.mozilla.org/ru/docs/Web/CSS/padding

Было полезно? Ставь лайк! Вопросы по темам и предложения оставляй в комментах к посту!😉