​Разработка ИТ-продукта

В этой статье речь пойдет о разработке сложных ИТ-продуктов: highload проектов, личных кабинетов в B2B и автоматизации бизнеса.

#стать #frontend

​​Различия между MVC, MVP, MVVM, MVVM-C, и VIPER

Эти архитектурные паттерны являются одними из наиболее часто используемых при разработке приложений, как на платформах iOS, так и Android.

MVC (Model-View-Controller) — один из самых широко используемых архитектурных шаблонов. Он разделяет приложение на три основных компонента: модель (представляет данные и бизнес-логику), представление (отвечает за отображение интерфейса) и контроллер (действует как посредник между моделью и представлением).

MVP (Model-View-Presenter) похож на MVC, но имеет немного другой подход. В MVP посредником между моделью и представлением является презентер , а не контроллер. Презентер отвечает за обновление представления данными из модели и обработку пользовательского ввода и событий.

MVVM (Model-View-ViewModel) — архитектурный шаблон, набирающий популярность и используемый в приложениях со сложными пользовательскими интерфейсами. Он похож на MVP, но с добавлением модели представления (view model), которая отвечает за управление состоянием представления и за предоставление данных из модели в представление.

MVVM-C (Model-View-ViewModel-Coordinator) — это вариация MVVM, с добавлением координатора, который отвечает за управление навигацией между различными экранами или представлениями в приложении. Этот шаблон полезен для приложений, в которых есть несколько управляемых экранов или представлений.

VIPER (View-Interactor-Presenter-Entity-Router) — относительно новая архитектурный шаблон, который похож на MVC, но с добавлением нескольких новых компонентов, включая интерактор (отвечает за обработку бизнес-логики), сущность (представляет данные) и маршрутизатор (обрабатывает навигацию между различными экранами и представлениями).

#android #ios #frontend

С чего начать новичку: Swift или SwiftUI

Перед всеми начинающими специалистами iOS-разработке стоит важный выбор между Swift и SwiftUI. В этом информативном видео вы разберете, что это такое, узнаете об основных особенностях языков и, наконец, получите четкий ответ на вопрос: что же лучше выбрать новичку?

#swift #ios #frontend

Управление памятью в Kotlin

Структура памяти — это один из немногих теоретических блоков, в которых действительно необходимо разбираться, чтобы понимать работу не только программы, но и самого языка Kotlin. 

Данное видео будет очень полезно начинающим Android-разработчикам так как содержит в себе не только важную теорию, но и визуальную репрезентацию для лучшего усвоения информации.

#kotlin #android #frontend

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

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

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

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

#frontend #js #ts #веб

​​Создание и бесплатная публикация сайта на GitHub Pages

GitHub — это не только агрегатор репозиториев с кодом. Одной из платформ сайта является GitHub Pages — инструмент для простой и бесплатной публикации статичных сайтов прямо на GitHub. Поэтому этот вариант отлично подходит для каких-нибудь лендингов, онлайн-визиток и портфолио.

В этой статье разбирают несложный процесс подключения Pages к репозиторию. Помимо взаимодействия со стандартным набором HTML/CSS/JS, сервис также поддерживает простой синтаксис форматирования текста Markdown — вот документация по нему от GitHub. Используя его, можно создавать простые сайты вообще без использования кода.

#frontend #web

​​Тренды и новинки в мире CSS и веб-дизайна

Если включать “режим Ванги” и попытаться предсказать, что изменится в веб-дизайне в течение 2024 года, нелишним будет оглянуться на события 2023. Тренды, наметившиеся в минувшем году, так или иначе лежат в трёх основных плоскостях — это технологии, стиль и организация труда.

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

— Инструменты для создания сайтов на основе AI;
— Инструменты для ускорения рядовых задач на основе AI;
— Интерфейсы для смешанной реальности;
— Интеграция 3D-иллюстраций;
— Работа в распределённой команде, селф- и тайм-менеджмент;

#web #frontend

Учимся анимировать в CSS за 20 минут

CSS предлагает два метода анимирования: переходы (transitions) и анимации (animations). Переходы плавно изменяют свойства, а анимации контролируются по ключевым кадрам.

Для создания перехода используются свойства transition: duration, timing function, delay. Анимации создаются с помощью @keyframes и параметров, таких как имя и длительность.

Также есть утилитарные классы, которые упрощают использование анимаций: slideInLeft, slideInRight, rotate и bounce.

Держите статью, где подробно разбирают процесс создания различных анимаций и объясняют принцип их работы.

#css #frontend

​​На чём писать сайт в 2024?

Рынок веб-разработки никогда не стоит на месте. Те технологии и инструменты, которые были популярны и востребованы пару лет назад, уже могут потерять свою актуальность в этом году. Поэтому, если планируете развиваться в веб-разработке, то держите шпаргалку, в которой рассказали об актуальных технологиях в вебе на этот год.

Если кратко, то: JS — основной язык для фронтенда, также остаются актуальными React, Angular и Vue. Для бэкенда выбор зависит от сайта: маленькие — WordPress, большие — PHP/Laravel, Python/Django, Ruby on Rails. Крупные компании выбирают Java/C#. Важными остаются SEO и мобильная адаптивность.

#web #backend #frontend

Держите огромную подборку инструментов для веба

Автор потрудился собрать большое количество инструментов и разделить их на 30 категорий. В каждой категории несколько десятков сервисов, так что можно найти решение для почти любой задачи.

Среди категорий: шрифты, иконки, палитры, стоковое аудио, шаблоны кода, инструменты для дизайна и JS-фреймворков, а также многое другое. Поэтому такая подборка — универсальная шпаргалка для любого веб-разработчика.

#web #frontend

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

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

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

Frontend Mentor — платформа пет-проектов для веб-разработки

Данный сервис — решение головной боли фронтенд-разработчиков, когда нужно наполнить портфолио, а идей для проектов нет. Сервис предлагает готовые дизайны и ТЗ различных проектов. В бесплатной версии JPG, в премиум — доступ к файлам фигмы.

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

Ссылка: Frontend Mentor

@prog_point #web #pet #frontend

Где бесплатно выучить HTML и CSS?

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

Например, вот тут много курсов для начинающих:
— htmlacademy.ru
— hexlet.io
— wayup.in
— itproger.com
— stepik.org

Для продолжающих тоже есть площадки с обучающими материалами. Например сайт htmlacademy или канал ВебКамеди. Но ещё больше полезных ресурсов по изучению HTML и CSS вы можете найти в этой статье.

@prog_point #web #frontend #html #css