Привет всем! Новая рубрика - "Полезные ресурсы"!

Каждую неделю я постараюсь делиться с вами ссылками на инструменты и видео, которые мне помогли в работе, а также на интересными материалами из мира IT.

Вот несколько ссылок, которыми я хотела бы поделиться:

Атрибут HTML-тегов role: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles. Он используется для улучшения доступности и может помочь сделать элементы вашего сайта более кликабельными и удобными для использования.

MIME-типы: https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types. Я использовала этот ресурс на прошлой неделе для парсинга HTML-страниц и исключения скриптов с определенным типом. Он может быть полезен для работы с различными типами файлов и скриптов на вашем сайте.

Шпаргалка по командам Docker: https://habr.com/ru/company/flant/blog/336654/. Если вы работаете с Docker, вам обязательно стоит заглянуть на этот ресурс. Я недавно использовала его, когда столкнулась с проблемой остановки и перезапуска контейнера.

Правильное использование useEffect в новой версии React: https://react.dev/learn/you-might-not-need-an-effect. Этот ресурс поможет вам лучше понять, как использовать useEffect в React и улучшить производительность вашего кода.

Треки по работе с NodeJS и Express: https://youtu.be/8bE_PBRriyU и https://youtu.be/3aGSqasVPsI. Если вы только начинаете изучать серверный JS, эти ресурсы помогут вам освоить NodeJS и Express.

Тестирование регулярных выражений: https://regexr.com/. Этот ресурс поможет вам проверить регулярные выражения, которые вы используете в своем коде.

25 каналов для разных ИТ-профессий и более 100 новых вакансий ежедневно: https://geekjob.ru/content/channels. Если вы ищете работу в IT, этот ресурс может оказаться полезным.

Интервью с основателем компании, который занимается ИИ Дмитрием Мацкевичем: https://www.youtube.com/live/uZIVpp9OYAM?feature=share. В этом интервью обсуждаются преимущества и опасности искусственного интеллекта, а также его возможности в будущем.

Было полезно? Оставляйте реакции и пишите комменты!😉

Привет всем! Еженедельный дайджест полезных ресурсов №2

Статья на Habr о том, что такое микрофронтенды и для чего они нужны, а также плагин для Webpack Module Federation: https://habr.com/ru/company/deliveryclub/blog/653047/

Видео на YouTube с супер понятным объяснением настройки Module Federation и создания микрофронтов на React клиенте с примерами за 10 минут: https://youtu.be/s_Fs4AXsTnA

Продвинутый курс на YouTube об архитектуре микрофронтового приложения: https://youtu.be/4b9LSUZjtzE

Документация React 18 о SSR (серверном рендеринге) и его использовании: https://react-redux.js.org/api/provider#react-18-ssr-usage

Дополнительно статья на Habr о том, что такое гидратация в Реакт приложениях с серверным рендерингом. Это будет полезно для тех, кто использует СЕО в своих проектах: https://habr.com/ru/post/515100/

Важный совет об устранении уязвимостей в коде: генерация URL посредством конкатенации не является безопасной, лучше использовать API для генерации URL. Например, можно воспользоваться этим ресурсом: https://developer.mozilla.org/en-US/docs/Web/API/URL/URL

А еще на следующей неделе наша компания организует очередной бесплатный ИТ митап в Ереване😃 https://news.1rj.ru/str/optimaxdev/240

Всем привет!

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

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

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

В первый месяц мы будем работать над созданием лендинга с виджетом формы обратной связи и сообщением в попапе. Также мы разработаем еще один виджет на ваш выбор или из предложенных мной. Во втором месяце мы создадим сайт-портфолио на 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

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