Paqmind - про Frontend / Web / React
546 members
1 photo
45 links
Канал о программировании и веб-разработке. Основные темы: Frontend, React, Next.js.

Связь: @Deathlone

"Фронтенд разработка на React"
https://goo-gl.su/KNCW

Сайт — https://paqmind.com/
YouTube Канал – https://www.youtube.com/c/IvanKleshnin
Download Telegram
to view and join the conversation
Наш сайт ДО и ПОСЛЕ оптимизаций.

Основная работа, кажется, завершена, но есть ещё пара-тройка идей.

Если вам интересна тема производительности:

Смотрите плейлист Optimizations: https://www.youtube.com/playlist?list=PLykGRXstdRmyimdzIPBh3HCABmcgSviWz
Визуализация простого алгоритма Машинного Обучения (KNN классификация) на React.

https://github.com/ivan-kleshnin/react-ml-demo-1

Идея и реализация мои собственные. Могу сделать видео-туториал для https://www.youtube.com/c/IvanKleshnin если кому интересно.

Прошу указать на что именно, с вашей т.з, стоит сделать упор

#react #ml #charts
Вопрос на собеседование.

Синхронный код в JavaScript тривиально делается Асинхронным: API функции модифицируется таким образом,
что она принимает коллбек либо возвращает промис. Если функции не было – она создаётся с нуля.
Это известно даже начинающим. Но вот вопрос посложнее – можно ли в JavaScript, наоборот, сделать Асинхронный код – Синхронным?

Правильный ответ будет опубликован завтра.
ОТВЕТ на вчерашний вопрос "Можно ли в JS асинхронный код сделать синхронным?"

(x) Да, это возможно.
( ) Нет, это невозможно.

Сперва следует согласовать термины. Кто-то может сказать: "в JavaScript весь код синхронный, а асинхронность является внешним элементом, реализуемым платформой". В этом случае, о JavaScript говорится как о языке. Однако я бы не принял такой ответ, указав на то, что правильное название языка – EcmaScript. Под "JavaScript" часто имеется в виду вся экосистема и это нормально.

JS как экосистема включает две основные платформы: браузер и Node. Обе они имеют очень близкое, хотя и не идентичное, определение асинхронности (определение через реализацию, а не спецификацию). Поэтому мы вправе говорить об "асинхронности в JS".
Иногда, для понимания контекста, стоит уточнять о какой платформе идёт речь. Поскольку вопрос был поставлен максимально просто – трактуем его как "Асинхронность в браузере или в Node".

В силу дизайна JS (ES) как однопоточного языка для интерфейсов, в его Core-API не входят функции типа sleep().
Некоторые люди на собеседованиях описывают следующий код как потенциально возможный:

let p = new Promise(...) // какой-то промис, полученный неважно как
while (true) {
if (isPromiseResolved(p)) { // -- "какая-то функция проверки, что промис отрезолвлен"
doX()
}
// else keep running
}

Однако это чистейший бесконечный цикл. Промис никогда не будет выполнен, т.к. асинхронный код начинает выполняться только на пустом стеке. А стек никогда не будет пустым, т.к. мы продолжаем цикл!

Таким образом, для решения задачи нужно:

1) или выйти за рамки однопоточности, оставаясь при этом в рамках синхронного API
2) или же расширить сам NodeJS / браузер.

Второй вариант является спорным как ответ, т.к. переписывание платформы подменяет и размывает суть оригинального вопроса. "Может ли велосипед летать?
Да, если приделать к нему крылья и моторчик." Пример такого решения: https://github.com/abbr/deasync

Первый ответ, однако, вполне корректен. Node API содержит функцию синхронного вызова внешних скриптов, которые вполне могут включать асинхронный код. Разделение процессов снимает проблему "непустого стека", в частности. Пример такого решения: https://github.com/sindresorhus/make-synchronous
Эта библиотека сработает только в NodeJS.

Есть также варианты с (псевдо-)многопоточностью через файберы и другие примитивы: https://github.com/ybogdanov/node-sync
Теоретически, они возможны и в браузере (через реализацию аналогичных механизмов).

Таким образом, мы имеем "уверенный ДА" в Node и "как-бы ДА" в браузере. Зачитываем это как общее "Да, возможно".
Предполагаем использование Webpack (v4, v5). Правильный ответ ЗАВТРА.
Ответ на вчерашний вопрос

Тришейкинг квалифицированных импортов и структура проекта.

Применяется ли тришейкинг в Webpack к квалифицированным импортам? Это импорты вида import * as R from "ramda". Использование пространств имён и их влияние на общий подход к именованию модулей и экспортов. Рекомендованная схема. Цена утраты тришейкинга в числах на примере.

https://youtu.be/Xt3Y0H9Tk9g
Менеджмент и хостинг статических файлов

https://youtu.be/gcz1lpv_wT4

Система менеджмента статики является подмножеством более общей системы «Менеджмента контента» (т.е CMS). В видео описываются два поколения решений по управлению ассетами, список фич для управления статикой, соответствие популярных решений пунктам нашего списка.

Это видео является частью запланированного курса «Создание CMS». Если данная тематика вам интересна, вы можете проголосовать за дальнейшую разработку и публикацию курса тут: https://paqmind.com/courses Хотя это лишь часть курса, контент видео самодостаточен и потому я решил опубликовать его на YouTube.

Во избежание глупых комментариев «про CMS-ки» уточню, что под CMS в данном курсе имеется в виду прежде всего ФУНКЦИОНАЛ. Функционал для управления контентом требуется, в разной степени, пожалуй, на любом сайте или в приложении. Это вполне конкретная и независимая тема, которая может быть детально разобрана в рамках курса.

Также обращаю внимание на Уровень сложности: III. Это видео ориентировано на продвинутых разработчиков. Не исключаю, что контент может быть интересен и понятен начинающим, но кому-то точно будет не хватать пояснений (то что более продвинутые посчитают «водой»).

#cms #nginx #aws
== Регионы Vercel и AWS. Туториал по определению и выбору региона для хостинга ==

Контент для более широкой аудитории, чем обычно :o)

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

https://youtu.be/VyuuWiB26WQ

VERCEL – это стремительно набирающая популярность платформа для Serverless деплоя и интеграций. Часто используется вместе с React фреймворком NextJS (также всё более востребованным).

В этом туториале мы решаем две задачи:
1) определяем куда (на самом деле) задеплоен VERCEL проект
2) выбираем оптимальный регион для деплоя

#backend #vercel #nextjs
Next.JS 9.4–9.5: обзор изменений и новых фич.

Продолжаем формат новостей по ключевым технологиям. Контент видео:

1. Обзор изменений Next 9.4
2. Обзор изменений Next 9.5
3. Эргономические улучшения Next 9.5.3

https://youtu.be/g-mpdMhdzb0

Вкратце: хорошие апдейты, эволюционный рост инструмента. Если вы ещё не перешли на NextJS – сейчас отличное время для смены тулкита. Очень низкий порог входа, куча примеров, качественная документация и огромное комьюнити.
# AWS vs Digital Ocean: вендоры управляемых баз данных

https://youtu.be/4vz3m2YZzCw

Сравнение AWS и Digital Ocean как вендоров управляемых облачных БД.
Сервисы AWS Aurora, AWS RDS и DGO Managed DB. Видео таргетировано, в первую очередь, на начинающих разработчиков по направлениям бекенд, фуллстек, девопс.

1. Цены и тарифные планы.
2. Простота развёртывания и настройки DBaaS (через GUI).
3. Блиц-сравнение производительности.
4. Прочие критерии.
5. Выводы

#backend #devops
React Tutorial: архитектура игрового приложения на примере Memory Game

https://youtu.be/ilXa3QB6bFs

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

Мастер-класс будет разбит на 2 видео. В этом (первом) видео проект пишется на CSS + JS + React. В последующем (втором) видео проект будет переписан / отрефакторен на TypeScript и StyledJSX. Следите за анонсами!

#react #frontend #gamedev #tutorial
React Tutorial: рефакторинг с CSS на Styled-JSX на примере Memory Game

Мега-Туториал по переходу с CSS на CSS-in-JS (библиотека Styled-JSX) на примере игрового приложения. Игра была написана на новом React (хуки!) с нуля в рамках предыдущего видео-туториала.

Часовой мастер-класс для широкой аудитории: от продвинутых начинающих до среднего уровня и выше. Детально проговариваются подходы к стилизации, вопросы рефакторинга, архитектуры и дизайна кода, структура файлов и папок.

https://youtu.be/ilXa3QB6bFs

#react #frontend #gamedev #tutorial
https://youtu.be/scrxJGxEgNY

Remote.com и новости удалённой работы.

1. Действительно ли растёт интерес к удалёнке на фоне эпидемии?
2. О фрилансе и поиске удалённой работы.
3. Отношение компаний к такому формату.
4. Разница в локальной и международной удалёнке.
5. Что такое Remote.com?
6. Схема работы портала и список стран.
7. Инвесторы и технологии.
8. Выводы.

#работа #карьера
ФРОНТЕНД РАЗРАБОТКА НА REACT
Онлайн курс с поддержкой ментора. Обучение через практику.

📹 12 часов видео-материала
🧩 9 задач, 9 проектов
📌 Пожизненный доступ
📍 Бесплатные обновления
📃 Сертификат
💰 Стоимость от €30

Записаться на курс

Прохождение этого курса даст вам уверенные знания React и фронтенд-разработки. Вы научитесь самостоятельно разрабатывать браузерные приложения на современных технологиях и сможете претендовать на должность Junior React / Frontend Developer.

Курс поможет Верстальщику овладеть навыками Фронтенд разработки. Бэкендщику – перейти в фуллстек. Тестировщик сможет получить опыт написания бизнес логики. Для начинающего изучение React – это один из кратчайших путей к старту карьеры в веб-разработке.

Автор курса – Иван Клешнин, веб-разработчик и инженер ПО с 15-летним опытом. Иван использует React в собственных проектах с 2015 года.
Курс уже прошли более 50 разработчиков.

Узнать больше
Мега-Туториал: из JavaScript в TypeScript на примере Memory Game

Заключающее видео трилогии. Игра была реализована с нуля в рамках двух предыдущих видео-туториалов. В этой части к проекту добавляется статическая типизация.

Мастер-класс для широкой аудитории: от продвинутых начинающих до среднего уровня и выше. Детально проговариваются вопросы типизации, дизайна кода, сочетания TypeScript с функциональной парадигмой программирования и многое другое.

https://youtu.be/l0PrLtlZkQo