​​​ Как работает JavaScript изнутри

Чтобы стать реально ценным разработчиком, мало просто уметь писать код — нужно ещё и понимать, как он работает и для чего нужны те или иные элементы.

Просмотрев видео до конца, вы значительно расширите свои знания о внутреннем устройстве JavaScript и начнёте по-новому смотреть на код

#видео #js

​Telegram-бота для управления ПК голосом

Автор планировал сделать бота для своих личных целей, чтобы отключать компьютер, свет и т.п., но в ходе разработки у него возникла мысль сделать из этого небольшой туториал, так как в интернете нет никакой информации по интеграции Yandex.SpeechKit с NodeJS и тем более Telegram.

#видео #js

​​​Node JS от А до Я

В этом ролике автор разберёт основные теоретические и практические моменты, связанные с Node JS.

Вы создадите небольшой фреймворк на Node JS и научитесь работать с базами данных.

#видео #js

​Почему два одинаковых объекта не равны в JavaScript

Вы когда-нибудь сравнивали объекты в JavaScript и получали false, хотя ожидали true? Эта статья расскажет вам, почему так бывает.

Все дело в том, что в JavaScript есть примитивные и ссылочные типы данных. Когда вы сравниваете объекты, вы на самом деле сравниваете не их значения, а их ссылки. Чтобы понять, почему это приводит к неожиданным результатам, нужно знать, как JavaScript хранит данные в памяти.

#статья #js

Счётчик товаров на JavaScript

Если вы мечтаете разработать свой интернет-магазин, а главное — владеете основами JS, то этот гайд — мастхэв для просмотра.

В нём автор на практике показывает, как создать простой счётчик на JavaScript, с помощью которого пользователь сможет выбрать нужное ему количество товаров.

#видео #js

Что такое DOM в JavaScript

DOM (Document Object Model или объектная модель документа) - это структура, которая позволяет управлять HTML-разметкой из JavaScript-кода. Управление обычно состоит из добавления и удаления элементов, изменения их стилей и содержимого. DOM организован в виде дерева, в котором элементы расположены иерархически в соответствии со структурой документа.

Браузер создаёт DOM на основе HTML-кода страницы. Затем на основе DOM и других структур, браузер рисует страницу пользователю. При изменении DOM, браузер анализирует это и обновляет страницу.

Методы DOM — это действия, которые вы можете выполнять (с элементами HTML). К ним относятся:
— getElementById — поиск элемента по идентификатору;
— getElementsByClassName — поиск элементов по названию класса;
— getElementsByTagName — поиск элементов по названию тега;
— querySelector — поиск первого элемента, подходящего под CSS-селектор;
— querySelectorAll — поиск всех элементов подходящих под CSS-селектор.

#js

Различия между == и === в JavaScript

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

Оператор == или loose equality сравнивает на равенство, фактически выполняя приведение типов.

Например:

console.log('1' == 1); //true т.к. совпадают значения, типы не важны

Оператор === или strict equality сравнивает на идентичность. Он убеждается, что кроме значений переменных, совпадают и их типы.

Например:

console.log(1 === 1); //true т.к. совпадают и типы, и значения
console.log('1' === 1); //false т.к. совпадают только значения

#js

Первичные выражения в JavaScript

Primary expressions (первичные выражения) — это основные ключевые слова и общие выражения в JavaScript, имеющие наивысший приоритет.

Кратко пройдемся по ним:
this — ключевое слово, значение которого зависит от того, в каком контексте оно появляется: функция, класс или глобальный объект;
function — ключевое слово, определяющее функцию внутри выражения;
function* — ключевое слово, определяющее функцию-генератор внутри выражения;
async function — ключевое слово, определяющее асинхронную функцию внутри выражения;
async function* — ключевое слово, определяющее асинхронную функцию-генератор внутри выражения;
class — ключевое слово, определяющее класс внутри выражения.

[] — array (массив), позволяет хранить коллекцию из нескольких элементов под одним именем переменной;
{} — выражение, описывающее инициализацию объекта, который так и называется — object initializer (инициализатор объекта);
() — оператор группировки, управляет приоритетом вычисления в выражениях.

Literals — значения, указанные в коде, которые могут иметь тип null, boolean, number и string;
string — шаблонные строки, внутри которых можно использовать выражения;
/ab+c/i — шаблон, используемый для поиска соответствующего фрагмента текста и сопоставления символов и называется RegExp (регулярное выражение).

Некоторые из них мы более подробно разберем в следующих постах

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

​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 #фронтенд