Точка входа в программирование
20.5K subscribers
1.18K photos
207 videos
2 files
2.71K links
Фундаментальные знания по основам программирования

Разместить рекламу: @tproger_sales_bot

Правила общения: https://tprg.ru/rules

Другие каналы: @tproger_channels

Сайт: https://tprg.ru/site

Регистрация в перечне РКН: https://tprg.ru/zrgj
Download Telegram
Управление памятью в 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
​​Шпаргалка по CSS Grid в картинках, ещё и с единорогами

В статье собрали полный комплект материала по CSS Grid – с объяснениями в картинках и практиками, чтоб вы ощутили всю мощь этого инструмента. Тут рассказывают про базовые понятия и трюки, дают примеры кода. И конечно, не обошлось без пары полезных хитростей – для новичков и бывалых, чтоб выжать максимум из CSS Grid.

Приглашаем к прочтению

@prog_point #web #frontend #css
​​Где взять иллюстрации для своего проекта

Многие начинающие разработчики стоппорятся на своём проекте, когда дело доходит до графики. Изучать графические редакторы и кучу теории для этого захочется не далеко всем.

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

@prog_point #frontend #web
Шпаргалка по CSS, ещё и интерактивная

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

Кидайте в закладки эту шпаргалку

@prog_point #web #frontend #css
Что такое микрофронтенд простым языком

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

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

В этом видео на пальцах объясняют, когда и как использовать микрофронтенд и как на него перейти.

@prog_point #web #frontend
​​Большая подборка бесплатных учебных материалов для фулстека

Вам больше не нужно ходить по сети в поисках подходящих материалов — всё, что нужно для обучения веб-разработки, собрано в одном месте. Само собой, эта подборка будет полезна не только фулстекам, но и отдельно фронтенд и бэкенд-разработчикам.

В этой подборке вы найдёте бесплатные курсы по вёрстке, JavaScript, JS-фреймворкам, Node.js, PHP, базам данных, Docker и другим важным технологиям.

@prog_point #web #frontend #backend
Всё о CSS Grid за 13 минут

CSS Grid — это мощный инструмент для упрощения создания сложных макетов на веб-страницах. Он позволяет разработчикам легко управлять расположением элементов на странице, обеспечивая гибкость и контроль над их позиционированием.

Также использование CSS Grid помогает сократить количество кода, улучшить читаемость стилей и сделать макеты более предсказуемыми и контролируемыми.

Видео начинается с теории, а затем автор показывает, как настроить сетку с помощью CSS Grid, включая создание колонок и строк, зазоры между элементами, автоматические строки, а также выравнивание и позиционирование элементов. Тут также рассматривается работа с областями и настройка начала и конца строк и колонок.

https://youtu.be/MEOR2b69Pl4?si=Jk6MQxo7VHO-VP_v

@prog_point #web #frontend #css
Видеокурс по Frontend-разработке

Фронтенд — это всё, что видит пользователь на сайте: интерфейс, кнопки, формы. HTML, CSS и JavaScript помогают превращать дизайн в работающий и живой сайт.

Ловите видео-курс, где шаг за шагом разбирают основы вёрстки на HTML и стилей на CSS от самих азов до более сложных тем. Весь курс состоит из небольших видео, поэтому вы сможете подстроить под себя комфортный темп обучения:

Ссылка на курс

@prog_point #web #frontend
​​Учим React за месяц

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

Если давно в планах есть изучение React, но растягивать процесс не хочется, то начните с 30DaysOfReact — это учебник, который подойдет как новичкам, так и опытным разработчикам. Там можно найти задачи, темы и материалы для ежедневного изучения.

@prog_point #web #frontend #react
Большой вводный курс по Vue.js

Vue.js — одна из самых популярных JS-библиотек для создания пользовательских интерфейсов.

Забирайте на вечерний просмотр отличный вводный курс, где в одном видео разберут и познакомят со всеми аспектами этой библиотеки и расскажут, как с ней работать:

https://youtu.be/6wYu4_6hcDY?si=8NtjdhNADwnzkYzL

@prog_point #web #frontend #vue #javascript
Подборка уроков по Flexbox

На этом сайте вы найдёте 20 полезных уроков, которые помогут вам освоить Flexbox и улучшить навыки владения им. Первые 13 видео охватывают базовые концепции Flexbox: строки, столбцы, оси, перенос, выравнивание, центрирование и компоновку. Последние 7 уроков представляют собой отдельные фрагменты кода, с помощью которых вы создадите всё, от навигационного меню до макета мобильного приложения, используя Flexbox.

@prog_point #web #frontend