MakeWeb.me | Все о веб-разработке и не только

MakeWeb.me это школа веб-разработки. Здесь для тебя масса самых различных материалов от бесплатных статей, роликов и переводов, до качественных платных уроков с пошаговым сопровождением и доведением до результата.

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

• Записи сообщества
• Поиск

В этом ролике рассказывается о реализации рекурсивных алгоритмов, drag-n-drop и древовидной (а-ля файловой) структуры в рамках разработки React-компонента под конкретное ТЗ. То есть пример максимально реалистичный.Показать полностью.

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

А если у вас в процессе работы появятся мысли по улучшению и фиксу возможных багов, с удовольствием приму Pull Request'ы в репозиторий с исходнками, ссылку на который вы найдёте ниже.

СОДЕРЖАНИЕ РОЛИКА:00:00:00 Вступление. Каков функционал и ограничения компонента?00:02:30 Структура файлов. Процедура запуска проекта.00:05:50 Рассматриваем как работает серверный код.00:13:15 Как на сервере генерируется исходный JSON.00:18:56 Начинаем смотреть фронтенд-код. Хелперы и дополнительный код.00:29:51 Рассматриваем сам компонент FileStructure.00:32:22 Про рекурсию в этом компоненте.00:33:36 Обзорно про хендлеры в компоненте FileStructure.00:36:17 Первичный запрос дерева и добавление uinqueId.00:37:25 Разбираем рекурсию на примере функции transformJSONToAddUniqueIds. Сначала по логике кода.00:47:38 Проходимся по функции transformJSONToAddUniqueIds пошагово с помощью дебаггера в браузере.00:58:09 Как работает скрытие-раскрытие узлов дерева?01:03:51 Про механизм переименования узлов дерева. Рекурсия в функции переименования узла.01:11:21 Работа функции buildTree по формированию JSX-разметки. Окончание рассмотрения переименования.01:20:52 Drag-n-Drop. Рассматриваем функции, отвечающие за него.01:22:42 Рекурсивные функции для вырезания запрошенной ноды и вставка её в указанное место с обновлением дерева.01:45:21 Функция сортировки узлов дерева.01:50:03 Заключение, возможные баги и явный недостаток нынешней реализации для большого и вложенного дерева.

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

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

Получи скидку 5% на первую оплату хостинга/домена в Reg.ru, используя промо-код:948E-53B9-CF98-8204Он вводится во время оплаты услуги.Не забывай - ты не только получаешь скидку, но и поддерживаешь проект!

Продолжаем говорить о фреймворке (или библиотеке компонентов, называйте как хотите) - Ant Design.

СОДЕРЖАНИЕ:00:00 Компонент Icon (SVG-иконки).05:36 Компонент Typography (типографика, стилизация текста).Показать полностью. 12:35 Пропс ellipsis для скрытия/раскрытия длинного текста.19:05 Компонент Divider (разделитель).19:55 Компонент Grid (сеточная система Ant Design). Компоненты Row, Col22:20 Пропс gutter (расстояние между ячейками).24:26 Пропсы offset, push, pull 26:03 Горизонтальное и вертикальное выравнивание в строках.29:43 Детальный разбор примера со сладерами, регулирующими gutter.37:03 Этот же пример, но в контексте TypeScript.42:27 Хук useBreakpoint.

Получи скидку 5% на первую оплату хостинга/домена в Reg.ru, используя промо-код:948E-53B9-CF98-8204Он вводится во время оплаты услуги.Не забывай - ты не только получаешь скидку, но и поддерживаешь проект!

В этом ролике Никита Стариченко рассказывает о синтаксическом сахаре в языке программирования C#, который, по его опыту, упрощает и ускоряет написание кода. Проводятся аналогии с Java и С++.

СОДЕРЖАНИЕ:00:00 Вступление. Никита Стариченко о себе.00:41 Про платформу .NET и то, во что она превратилась сейчас.Показать полностью. 01:46 Сравнение C# с С++ и Java.03:22 Var и dynamic-переменные.05:07 NULL-оператор.07:24 Строки (string) - экранирование и конкатенация.08:17 Коллекции и range.10:10 Foreach.10:51 Generics.11:37 Pattern matching.12:56 Исключения (exceptions).13:59 Partial Classes.15:02 Property.16:13 Method parameters (параметры методов). Передача по ссылке и значению.17:30 Extension methods.18:18 Async/await (асинхронность).19:09 Подведение итогов.

AWS Вебинар по Биткоину и блокчейну

Рекомендую к просмотру вебинарчик по блочейну от чела из Amazon Web Services. Рассказывает в общем про некоторые моменты по блокчейн-технологии, а также разбирает пример https://track-and-trace-blockchain.workshop.aws/ с блокчейн-прилагой для отслеживания производства кофе со сбора урожая о конечного потребителя. При этом, все данные об этом публично открыты, неизменяемы и проверяемы. Вот вам конкретное применение))

Данный курс подробно разбирает один из самых мощных и динамично развивающихся фреймворков в экосистеме React. В нём есть практически все, что может понадобиться при создании современных веб-интерфейсов. Ввиду популярности TypeScript, в рамках этого курса мы изучаем и то, как использовать Ant Design с типами. В частности, новичков часто вводит ступор непонимание того, как подбирать типы для тех или иных ситуаций.Показать полностью.

СОДЕРЖАНИЕ:00:00 Вступление про Ant Design и про этот курс. Про TypeScript в курсе.04:44 Создаем TypeScript-проект на Create React App для экспериментов с фреймворком.07:43 Общая структура всех страниц документации по каждому компоненту.10:51 Разбор компонента Button. Плагин Stylish.11:34 Button: пропсы type и icon13:33 Button: пропс size. Разбираем пример динамического изменения размера кнопок.15:06 Решаем вопрос с TS-типизацией - как искать типы?23:13 Проверяем работу примера. Подтягиваем общие стили Ant Design.24:18 Button: пропсы disabled, loading и ghost.30:07 Button: пример с выпадающим меню и группой кнопок.31:24 Разбор Multiple Buttons в контексте TypeScript. Тянем типы из внешней библиотеки rc-menu.36:02 Немного чистим наш проект. Button: пропсы danger и block.36:59 Разбор оставшихся свойств из таблицы API (href, htmlType, shape и target).39:05 Заключение.

Получи скидку 5% на первую оплату хостинга/домена в Reg.ru, используя промо-код:948E-53B9-CF98-8204Он вводится во время оплаты услуги.Не забывай - ты не только получаешь скидку, но и поддерживаешь проект!

Завершаем работу над лендингом, оптимизируем, прикручиваем отзывы в JSON / через API и добавляем отправку данных из формы письмом на указанный email.