Что будет в консоли ?
Anonymous Quiz
13%
TypeError
15%
SyntaxError
53%
Lydia Hallie
19%
undefined undefined
После прочтения применить, или Чистый код на практике
Начинающие разработчики часто встречают на ревью пул-реквестов очень дотошных ревьюеров, дающих кучу комментариев по теме чистоты кода. Со временем у разработчика опытным путём или с чтением хорошей технической литературы нарабатывается чувство чистого кода — но что делать новичкам?
В этой статье я не буду долго мучить теорией про чистый код и паттерны — об этом уже было в Симпсонах учебниках, конференциях и на Хабре в том числе. Но приведу примеры плохого (на мой взгляд) кода в приложениях на React и JavaScript и покажу, как его улучшить. Надеюсь, начинающим моя статья будет полезна, и после прочтения они смогут применить всё на практике.
Ссылка
#статьи
Начинающие разработчики часто встречают на ревью пул-реквестов очень дотошных ревьюеров, дающих кучу комментариев по теме чистоты кода. Со временем у разработчика опытным путём или с чтением хорошей технической литературы нарабатывается чувство чистого кода — но что делать новичкам?
В этой статье я не буду долго мучить теорией про чистый код и паттерны — об этом уже было в Симпсонах учебниках, конференциях и на Хабре в том числе. Но приведу примеры плохого (на мой взгляд) кода в приложениях на React и JavaScript и покажу, как его улучшить. Надеюсь, начинающим моя статья будет полезна, и после прочтения они смогут применить всё на практике.
Ссылка
#статьи
function Person(firstName, lastName) {
this.firstName = firstName;
this.lastName = lastName;
}
const lydia = new Person('Lydia', 'Hallie');
const sarah = Person('Sarah', 'Smith');
console.log(lydia);
console.log(sarah);Что будет в консоли ?
Anonymous Quiz
36%
Person {firstName: "Lydia", lastName: "Hallie"} и undefined
33%
Person {firstName: "Lydia", lastName: "Hallie"} и Person {firstName: "Sarah", lastName: "Smith"}
12%
Person {firstName: "Lydia", lastName: "Hallie"} и {}
19%
Person {firstName: "Lydia", lastName: "Hallie"} и ReferenceError
WebAssembly: короткий обзор ассемблера для фронтенда
В последнее время фронтенд все больше и больше обрастает новыми технологиями, одна из них — WebAssembly. На ней можно написать полноценное web‑приложение и почти все на что способна ваша фантазия. В статье мы рассмотрим, что такое WebAssembly, как работает и с чем её едят.
Ссылка
#utils
В последнее время фронтенд все больше и больше обрастает новыми технологиями, одна из них — WebAssembly. На ней можно написать полноценное web‑приложение и почти все на что способна ваша фантазия. В статье мы рассмотрим, что такое WebAssembly, как работает и с чем её едят.
Ссылка
#utils
Назовите три фазы распространения событий ?
пояснения будут следующим постом
пояснения будут следующим постом
Anonymous Quiz
33%
Цель > Захват > Всплытие
6%
Всплытие > Цель > Захват
15%
Цель > Всплытие > Захват
45%
Захват > Цель > Всплытие
Что будет в консоли ?
Anonymous Quiz
7%
{ a: "one", b: "two" }
26%
{ b: "two", a: "three" }
33%
{ a: "three", b: "two" }
35%
SyntaxError
Два frontend фреймворка. Два подхода
В статье сравниваются два подхода к созданию веб интерфейса пользователя.
Один подход - это современные фреймворки с компонентным подходом, который инкапсулирует HTML, js, css.
Второй подход к разработке веб-интерфейса аналогичен разработке интерфейса пользователя десктопного приложения.
Ссылка
#статьи
В статье сравниваются два подхода к созданию веб интерфейса пользователя.
Один подход - это современные фреймворки с компонентным подходом, который инкапсулирует HTML, js, css.
Второй подход к разработке веб-интерфейса аналогичен разработке интерфейса пользователя десктопного приложения.
Ссылка
#статьи
This media is not supported in your browser
VIEW IN TELEGRAM
Как работает токен, сессия, JWT, SSO, OAuth2 и QR-код? 👩💻
Зачастую при ходе на сайт, возникает необходимость управления вашей учетной записью.
Сессия — сервер сохраняет учетную запись и передает браузеру файл cookie с идентификатором сеанса, что позволяет отслеживать состояние входа в систему. Файлы cookie не работают на разных устройствах.
JWT — веб-токены JSON стандартизируют токены идентификации, используя цифровые подписи для проверки подлинности. Подпись содержится в токене, поэтому сеанс сервера не требуется.
Токен — учетная запись закодирована в токене, отправленном в браузер. Браузер отправляет этот токен при будущих запросах аутентификации. Требуется шифрование и дешифрование.
SSO — система единого входа, использует центральную службу аутентификации, что позволяет одному логину работать на нескольких сайтах.
OAuth2 — разрешает ограниченный доступ к вашим данным на одном сайте другому сайту без разглашения паролей.
#база
Зачастую при ходе на сайт, возникает необходимость управления вашей учетной записью.
Сессия — сервер сохраняет учетную запись и передает браузеру файл cookie с идентификатором сеанса, что позволяет отслеживать состояние входа в систему. Файлы cookie не работают на разных устройствах.
JWT — веб-токены JSON стандартизируют токены идентификации, используя цифровые подписи для проверки подлинности. Подпись содержится в токене, поэтому сеанс сервера не требуется.
Токен — учетная запись закодирована в токене, отправленном в браузер. Браузер отправляет этот токен при будущих запросах аутентификации. Требуется шифрование и дешифрование.
SSO — система единого входа, использует центральную службу аутентификации, что позволяет одному логину работать на нескольких сайтах.
OAuth2 — разрешает ограниченный доступ к вашим данным на одном сайте другому сайту без разглашения паролей.
#база
<div onclick="console.log('first div')">
<div onclick="console.log('second div')">
<button onclick="console.log('button')">
Кликни!
</button>
</div>
</div>Что будет в event.target после клика на кнопку?
Anonymous Quiz
18%
Внешний div
6%
Внутренний div
59%
button
17%
Массив со всеми вложенными элементами
Типы событий в React и TypeScript
При работе с React и TypeScript вы часто сталкиваетесь с подобными ошибками:
Не всегда понятно, какой тип следует присвоить пременной е внутри функции onChange.
Это может произойти с onClick, onSubmit или любым другим обработчиком событий, которые получают элементы DOM.
В этой статье вы узнаете как можно решить эту проблему
Ссылка
#статьи
При работе с React и TypeScript вы часто сталкиваетесь с подобными ошибками:
onChange = (e) => {}; // Parameter 'e' implicitly has an 'any' type.
<input onChange={onChange} />;
Не всегда понятно, какой тип следует присвоить пременной е внутри функции onChange.
Это может произойти с onClick, onSubmit или любым другим обработчиком событий, которые получают элементы DOM.
В этой статье вы узнаете как можно решить эту проблему
Ссылка
#статьи
❔Что такое Rest API? Soap? GraphQL? Websockets? RPC (gRPC, tRPC)
📌 REST API - думаю, что многие знают, что это такое и сталкиваются с этим каждый день, но некоторые называют это протоколом… но это не так. В действительности, это архитектурный стиль, который представляет собой набор правил для серверного приложения. Здесь может использоваться любой формат данных, например, JSON/XML или какой-либо другой. Основные концепции включают:
- Модель взаимодействия клиент-сервер, где система может быть многоуровневой.
- Stateless (без сохранения состояния) - клиент отправляет запрос на сервер, и между ними нет посредников. Каждый раз клиент и сервер общаются, как будто это первый раз.
- Единообразный унифицированный интерфейс.
- Кеширование.
📌 SOAP - это протокол обмена структурированными сообщениями. Формат данных для обмена - только XML (SOAP-XML). Для описания SOAP-сервисов используется WSDL (Web Services Description Language) - язык описания веб-сервисов и доступа к ним, основанный на XML. В отличие от REST, у SOAP нет привычных эндпоинтов, зато есть операции, которые клиент передает серверу. Структура сообщения в SOAP имеет следующий вид: Envelope → Header → Body. Также может присутствовать блок Error, но он не является обязательным.
📌 GraphQL - это не архитектурный стиль и не протокол, а язык запросов (что-то типа SQL). Это очень удобный инструмент, потому что сервер определяет схему, а клиент запрашивает только нужные ему данные, не ожидая создания отдельного эндпоинта для каждого случая. Основные виды запросов в GraphQL включают:
- Query (запрос/GET-запрос) - используется для получения данных, где мы указываем необходимые нам поля.
- Mutation (POST-запрос) - используется для создания или удаления данных.
GraphQL также автоматически создает документацию, что очень удобно. Рекомендую всем изучить GraphQL более подробно, так как это замечательный инструмент.
📌 WebSockets - это протокол, который позволяет устанавливать постоянное двустороннее соединение между клиентом и сервером. Он широко используется для реализации функциональности, такой как чаты, real-time графики, отображение элементов на карте и других штук, где требуется непрерывное обновление данных между клиентом и сервером. WebSockets обеспечивает более эффективную и масштабируемую связь между клиентом и сервером по сравнению с традиционными HTTP-запросами и ответами.
📌 RPC (Remote Procedure Call) - это протокол для удаленного вызова процедур. Например, на клиентской стороне у нас есть метод client.stub.doSmth(), который не реализован на клиенте, но реализован на сервере. Это и есть удаленный вызов процедуры.
gRPC - это фреймворк, набор инструментов и платформа, разработанная Google. Он популярен в микросервисной архитектуре, так как обеспечивает удобное взаимодействие между сервисами.
tRPC (type safe RPC) - это фреймворк, который позволяет разрабатывать полностью типобезопасные API для клиент-серверных приложений. Он является посредником между сервером и клиентом, позволяя им использовать один маршрутизатор (роутер) для обработки HTTP-запросов.
Считается, что RPC-подходы, такие как gRPC и tRPC, имеют большой потенциал и могут стать будущим развития веб-сервисов Однако, REST API все еще широко используется и остается популярным в настоящее время.
Все это может использоваться на разных проектах, поэтому будьте готовы к тому, что помимо REST есть и другие варианты
📌 REST API - думаю, что многие знают, что это такое и сталкиваются с этим каждый день, но некоторые называют это протоколом… но это не так. В действительности, это архитектурный стиль, который представляет собой набор правил для серверного приложения. Здесь может использоваться любой формат данных, например, JSON/XML или какой-либо другой. Основные концепции включают:
- Модель взаимодействия клиент-сервер, где система может быть многоуровневой.
- Stateless (без сохранения состояния) - клиент отправляет запрос на сервер, и между ними нет посредников. Каждый раз клиент и сервер общаются, как будто это первый раз.
- Единообразный унифицированный интерфейс.
- Кеширование.
📌 SOAP - это протокол обмена структурированными сообщениями. Формат данных для обмена - только XML (SOAP-XML). Для описания SOAP-сервисов используется WSDL (Web Services Description Language) - язык описания веб-сервисов и доступа к ним, основанный на XML. В отличие от REST, у SOAP нет привычных эндпоинтов, зато есть операции, которые клиент передает серверу. Структура сообщения в SOAP имеет следующий вид: Envelope → Header → Body. Также может присутствовать блок Error, но он не является обязательным.
📌 GraphQL - это не архитектурный стиль и не протокол, а язык запросов (что-то типа SQL). Это очень удобный инструмент, потому что сервер определяет схему, а клиент запрашивает только нужные ему данные, не ожидая создания отдельного эндпоинта для каждого случая. Основные виды запросов в GraphQL включают:
- Query (запрос/GET-запрос) - используется для получения данных, где мы указываем необходимые нам поля.
- Mutation (POST-запрос) - используется для создания или удаления данных.
GraphQL также автоматически создает документацию, что очень удобно. Рекомендую всем изучить GraphQL более подробно, так как это замечательный инструмент.
📌 WebSockets - это протокол, который позволяет устанавливать постоянное двустороннее соединение между клиентом и сервером. Он широко используется для реализации функциональности, такой как чаты, real-time графики, отображение элементов на карте и других штук, где требуется непрерывное обновление данных между клиентом и сервером. WebSockets обеспечивает более эффективную и масштабируемую связь между клиентом и сервером по сравнению с традиционными HTTP-запросами и ответами.
📌 RPC (Remote Procedure Call) - это протокол для удаленного вызова процедур. Например, на клиентской стороне у нас есть метод client.stub.doSmth(), который не реализован на клиенте, но реализован на сервере. Это и есть удаленный вызов процедуры.
gRPC - это фреймворк, набор инструментов и платформа, разработанная Google. Он популярен в микросервисной архитектуре, так как обеспечивает удобное взаимодействие между сервисами.
tRPC (type safe RPC) - это фреймворк, который позволяет разрабатывать полностью типобезопасные API для клиент-серверных приложений. Он является посредником между сервером и клиентом, позволяя им использовать один маршрутизатор (роутер) для обработки HTTP-запросов.
Считается, что RPC-подходы, такие как gRPC и tRPC, имеют большой потенциал и могут стать будущим развития веб-сервисов Однако, REST API все еще широко используется и остается популярным в настоящее время.
Все это может использоваться на разных проектах, поэтому будьте готовы к тому, что помимо REST есть и другие варианты
<div onclick="console.log('div')">
<p onclick="console.log('p')">
Кликни меня!
</p>
</div>Миграция с Webpack и react-scripts на Vite: Путь к Быстрому и Легковесному React
Настройка Webpack иногда бывала сложной, но в целом он справлялся с задачей сборки проектов. Однако в последнее время мои коллеги начали восторгаться новым инструментом - Vite. Они рассказывали о его легковесности, быстрой сборке и преимуществах для разработчиков React-приложений.
В этой статье я поделюсь своим опытом миграции с Webpack и react-scripts на Vite.
Ссылка
#utils
Настройка Webpack иногда бывала сложной, но в целом он справлялся с задачей сборки проектов. Однако в последнее время мои коллеги начали восторгаться новым инструментом - Vite. Они рассказывали о его легковесности, быстрой сборке и преимуществах для разработчиков React-приложений.
В этой статье я поделюсь своим опытом миграции с Webpack и react-scripts на Vite.
Ссылка
#utils