​React: тестируем компоненты с помощью Jest и Testing Library

В этой статье вы сможете найти множество полезной информации:
— создание шаблона React-приложения с помощью Vite;
— создание компонента для получения приветствия от сервера;
— установка и настройка Jest, Testing Library;
— тестирование компонента с помощью снимков Jest, а также Testing Library, используя стандартные возможности, кастомный рендер и кастомные запросы.

#js #react

​Область видимости в JavaScript

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

Область видимости — это часть программы, в которой мы можем обратиться к переменной, функции или объекту. Этой частью может быть функция, блок или вся программа в целом — то есть мы всегда находимся как минимум в одной области видимости.

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

#js

Пользовательские директивы во Vue

Во Vue директивы представляют собой специальные html-атрибуты, позволяющие манипулировать DOM-элементами. Все директивы обычно начинаются с буквы v, а затем через дефис идет название директивы.

Помимо встроенных директив (таких как v-model и v-show), Vue также позволяет регистрировать ваши собственные пользовательские директивы. Подробнее о том, как можно создать свои директивы, вы сможете узнать в этом подробном уроке.

#js #vue #веб #фронтенд

React Router: что это и как использовать

React Router – это библиотека для навигации между разными частями веб-приложения, созданными на React. Она помогает создавать одностраничные приложения, которые при переходе подгружают не всю страницу, а только необходимые компоненты.

А узнать, как её установить и создать свои первые простые и вложенные маршруты вы сможете узнать в этой полезной статье.

#js #веб #react

​​Микрофронтенд: что это такое и зачем он нужен?

Микрофронтенды — это деление монолитного приложения на семантически изолированные части и их независимая разработка. Каждая страница сайта или приложения структурно состоит из блоков, это может быть блок рекламы, блок обратной связи и т.д. Они взаимодействуют между собой по задуманной разработчиком логике, но при этом их можно разрабатывать, тестировать и деплоить как отдельные приложения.

Применение микрофронтов позволяет:
— увеличить эффективность разработки: так как проект разделён на небольшие части, это позволит сконцентрироваться на конкретной задаче и выполнить её быстрее;
— более эффективно планировать время разработки;
— обрести большую гибкость: проще изменять UI и логику небольших частей проекта;
— улучшить качество проекта: разделение на небольшие части помогает легче концентрироваться на них и более качественно прорабатывать.

Узнать о микрофронтендах подробнее, посмотреть пример их реализации и инструменты, применяемые для работы с ними, а кроме того, сравнить их основные преимущества и недостатки вы сможете здесь.

#frontend #js #ts #веб

​​Почему JavaScript останется популярным языком программирования в 2024 году

Более 60% опытных программистов регулярно применяют JavaScript в своей работе, а 60% начинающих разработчиков выбирают изучение именно HTML/CSS и JS для старта своей карьеры.

В этой статье два специалиста с опытом: middle и senior разработчики расскажут о том, почему будет популярным языком программирования в следующем году, как будут обстоять дела с зарплатами и что может помешать JavaScript держать планку известности.

#js #начинающим

Сегодняшняя викторина будет посвящена JavaScript. А вы знаете правильный ответ на данный вопрос?

#js

Разбор вопросов с собеседований frontend-разработчика

Держите целую серию небольших видео, в которых автор разбирает распространённые вопросы с собеседований на тему HTML, CSS и JS. Например, «позиционирование в CSS», «разница между == и ===», «чем отличается адаптивный и отзывчивый дизайн» и многое другое.

@prog_point #frontend #трудоустройство

Топ-9 фишек для написания и улучшения JavaScript кода

В этом видео разбирают фишки JavaScript, которые помогут улучшить код, писать его эффективней и тратить меньше времени. Основное внимание автор акцентирует на неочевидных возможностях языка, знание которых окажется особенно полезно начинающим:

https://youtu.be/DA1vq7EQFWw?si=xSL3ONh9qfQKHdfP

@prog_point #js #советы

​​Гарвардский курс по веб-разработке на Python и JS

Курс HarvardX: CS50's Web Programming продолжает легендарный CS50, фокусируясь на разработке веб-приложений с Python, JavaScript и SQL. Тут разбирают дизайн БД, масштабируемость, безопасность и UI.

В процессе обучения есть и практические проекты, среди которых создание API, интерактивных интерфейсов и использование облачных сервисов GitHub и Heroku.

Одним словом — годнота

#курс #web #js #python #en

Верстаем сайт-портфолио для Frontend-разработчика

В резюме разработчики перечисляют hard skills и применяемый стек технологий, но как проверить эти знания? GitHub и его аналоги требуют загрузки проектов, чтобы изучить их детально. У работодателя или потенциального клиента может не быть на это времени.

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

Как создать красивый личный веб-сайт на HTML, CSS и JavaScript с разными темами можно посмотреть в этом видео.

#html #js #фронтенд