Сохранёнки программиста
7.6K subscribers
1.04K photos
39 videos
3 files
1.55K links
Бесплатные лекции, курсы, книги, подкасты по программированию

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

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

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

Другие наши проекты: https://tprg.ru/media
Download Telegram
Большая библиотека бесплатных иконок

Их тут около 700 штук, все рассортировано по категориям с удобным поиском. Скачать можно в SVG и паре других форматов.

Ссылка на библиотеку: css.gg

#css #frontend
Где и как подтянуть навыки JS или подготовиться к собеседованию?

Можно, например, в этом репозитории с 62К звёзд и 150 вопросами по JavaScript. Сложность от базовой до продвинутого и список вопросов периодически обновляется. Есть страница на русском:

Прокачиваем свой JS тут

#репозиторий #javascript #frontend #трудоустройство
Best шпаргалка по CSS Flexbox

У этой шпаргалки есть всё, что нужно для удобства: лаконичные описания, понятные объяснения в картинках и примеры кода.

Сохраняем, ведь оно по-любому однажды понадобится

#шпаргалка #css #frontend
Крутая шпаргалка по CSS

Тут можно найти множество свойств CSS с их подробным описанием, примерами кода и визуальным объяснением — всё, чтобы можно было разобраться даже в самых сложных ситуациях.

Мастхев для верстальщиков: cssreference.io

#шпаргалка #css #frontend #en
Большая и интерактивная шпаргалка по CSS

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

Такое терять нельзя

#шпаргалка #css #frontend
Что почитать по вёрстке сайтов?

— "HTML и CSS. Разработка и дизайн веб-сайтов" — Джон Дакетт. Красочная и понятная книга для изучения HTML и CSS с акцентом на визуал.

— "CSS для профессионалов" — Эрик А. Мейер. Глубокое руководство по CSS с разбором продвинутых техник и нюансов.

— "JavaScript и jQuery. Разработка интерактивных веб-сайтов" — Джон Дакетт. Простое введение в динамическое взаимодействие на веб-страницах с помощью JS и jQuery.

— "Адаптивный веб-дизайн" — Аарон Густафсон. Практики для создания сайтов, которые выглядят отлично на любых устройствах.

— "Секреты CSS" — Лиа Веру. Сборник эффективных приемов и трюков, которые помогут прокачать CSS.

— "Элементы пользовательских интерфейсов. CSS и HTML в действии" — Аарон Уолтер. Создание привлекательных и удобных интерфейсов с помощью базовых технологий.

— «Отзывчивый веб-дизайн. HTML5 и CSS3 в действии" — Итан Маркотт. Базовые принципы и практические примеры использования HTML5 и CSS3 в адаптивной вёрстке.

#подборка #книга #frontend #html #css
Топ-5 перспективных frontend-фреймворков на 2025 год

Забираем:

Solid.js — реактивный фреймворк без виртуального DOM, обновляющий только измененные части страницы для максимальной производительности.

Qwik — фреймворк с мгновенной загрузкой и оптимизированной интерактивностью благодаря откладыванию выполнения JavaScript.

— Svelte — компилирует компоненты в чистый JavaScript на этапе сборки, обеспечивая быстрые и легковесные приложения.

Astro — сочетает преимущества статических сайтов с возможностью добавлять интерактивные элементы только при необходимости.

Alpine.js — минималистичный фреймворк для добавления интерактивности на статические страницы, работающий прямо в HTML.

Подробней с примерами кода

#подборка #frontend #web
This media is not supported in your browser
VIEW IN TELEGRAM
Интерактивный тренажёр по фронтенду

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

Сразу начнёте работать с реальным кодом, решая задачи, похожие на те, что бывают в реальной жизни. А ещё там есть челленджи в духе «сделай, как в примере».

#frontend #web #ru
Что выбрать для микрофронтенда?

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

Как его правильно внедрить? Какие варианты организации существуют – iframe, Web Components, Module Federation? И самое главное – какие плюсы и подводные камни скрывает каждый из них? В статье разбираются ключевые аспекты микрофронтов и даются практические рекомендации по их использованию.

#статья #frontend #ru
С этим даже самый трушный программист сможет в дизайн

Этот репозиторий — подборка бесплатных ресурсов для работы с дизайном. Здесь есть UI-киты, стоковые фотографии, веб-шаблоны, CSS-фреймворки и библиотеки. Всё собрано в одном месте, чтобы не тратить время на поиски. А от размера подборки лагает Google Chrome.

Ссылка на репозиторий

#репозиторий #frontend #подборка
AI для фронтенда: модели для генерации интерфейса

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

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

В статье собраны лучшие инструменты и примеры — чтобы посмотреть, как это уже работает на практике.

#frontend #ai #ru