Комплексная интерактивная шпаргалка для веб-разработчика

Сайт содержит в себе шпаргалки по: HTML+CSS+JS, PHP, jQuery и SEO. Все разбито на категории, наглядно проиллюстрировано.

Ссылка на шпаргалку

#шпаргалка #web

В рядах веб-дизайнеров начался сущий кошмар после этой новости

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

Инструмент сейчас доступен бесплатно, так что скорее пробуйте.

#дизайн

GitOps и Argo CD: новый подход к деплою

Один из трендов DevOps – GitOps: весь код и конфигурации инфры хранятся в Git-репозиториях. В статье описывается опыт перевода Kubernetes-кластера под управление через Argo CD. В модели GitOps изменения фиксируются в Git – и Argo CD «сам» следит за обновлениями и применяет их в кластере. Это удобно: все настройки под версионным контролем, можно откатиться в один клик. Но важно, чтобы команда синхронизировала изменения и поддерживала единую «истину» (SSOT): любой изменённый манифест должен попадать в репозиторий. GitOps с Argo CD позволяет безболезненно масштабировать деплой: достаточно запушить изменения – и кластер сам подтянет актуальные конфиги.

#gitops #kubernetes #devops

​Ничего необычного, просто веб-разработчик пытается освоить новый фреймворк до того, как он устареет:

​Создаём портфолио в формате 2D-игры на JavaScript

Это один из креативных способом показать свои скилы и впечатлить рекрутера/тимлида/интервьюера.

Гайд по разработке: https://youtu.be/wy_fSStEgMs
Демо: https://jslegenddev.github.io/portfolio/
Исходники: https://github.com/JSLegendDev/2d-portfolio-kaboom

#javascript

Old But Gold: 7 шагов к ускорению загрузки сайта

Медленная загрузка сайта может отпугнуть пользователей и снизить конверсии. В этой статье представлены семь проверенных методов оптимизации производительности веб-ресурса.

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

#фронтенд #производительность

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

Присылайте свои варианты в комментарии.

Переезд с Webpack на Vite: как ускорить React-проект и упростить сборку

Если сборка проекта на Webpack занимает вечность, а конфигурации становятся всё сложнее, возможно, пора взглянуть в сторону Vite. Этот инструмент предлагает молниеносную сборку, встроенный HMR и простую настройку. В статье описан реальный опыт перехода с Webpack и react-scripts на Vite, включая решение проблем с FontAwesome, настройку прокси и корректное размещение index.html.

И все-таки, Vite или Webpack?

❤️- Vite
🔥- webpack

#фронтенд #react #vite

Освойте Promises в JavaScript: пошаговое руководство

Асинхронный код — неотъемлемая часть современного JavaScript. Промисы (Promise) помогают управлять такими операциями, обеспечивая чистый и понятный синтаксис. В этом руководстве вы узнаете, как создавать промисы, обрабатывать их состояния (pending, fulfilled, rejected) и использовать методы .then(), .catch() и .finally() для управления результатами асинхронных операций. Примеры кода и наглядные схемы помогут закрепить материал и применять его на практике.

#фронтенд #javascript #асинхронность

CSS для печати на бумаге

Интересная статья, в которой рассмотрели особенности стилизации веб-страниц для экспорта в печатный вид: https://habr.com/ru/articles/798765/

#css@tproger_web

React 19 — новые хуки за 15 минут

Владилен Минин коротко демонстрирует useActionState, useOptimistic и улучшенный useDeferredValue, чтобы вы поняли, как ускорить UI без лишних перерендеров.

#react@tproger_web

Как сделать галерею обложек со Scroll-Driven анимацией

Отличная статья, в которой Эдди Османи показал, как сделать эффект галереи, как в iPod, используя современные возможности CSS. Подробнее: https://addyosmani.com/blog/coverflow/

#css

Относительные цвета в CSS

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

Посмотрите его и, возможно, вы сможете отказаться от препроцессоров в своих проектах:
https://ishadeed.com/article/css-relative-colors/

#css

Вот это действительно юзер френдли интерфейс

GSAP теперь доступна бесплатно

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

Все подробности в блоге команды GSAP: https://gsap.com/blog/3-13/

#новости #gsap

15 продвинутых приёмов TypeScript, о которых знают не все

Казалось бы, вы уверенно владеете TypeScript — аннотации, дженерики, утилитарные типы… Но язык прячет множество фишек, способных упростить код и сделать его безопаснее.

В этой статье вы найдете полезные трюки, которые пригодятся на продвинутых проектах.

#typescript@tproger_web #фронтенд@tproger_web

Расскажите про свой опыт поиска работы

Мы сейчас проводим исследование — хотим разобраться, как айтишники ищут работу: на что обращаете внимание в вакансии, что для вас точно красный флаг, а что — зеленая простыня. Мы хотим из первых уст узнать про все боли, подводные камни и нюансы рекрутинга в ИТ в 2025 году, поэтому просим вашей помощи — пройдите опрос, который займет у вас около 15 минут.

Давайте поможем компаниям и специалистам эффективнее и быстрее находить друг друга.

#опрос

curl-impersonate | Запросы к сайту, как от живого человека

Инструмент позволяет пользователям выполнять HTTP-запросы с использованием библиотеки curl, имитируя поведение различных браузеров и устройств. По заверениям создателей, умеет обходить ограничения и блокировщики веб-сайтов, направленные против автоматизированных систем.

Цена: бесплатно
Репозиторий проекта

@prog_tools

Container Queries: адаптивные компоненты без медиазапросов

Представьте карточку-виджет, которая сама подстраивается к ширине блоков сетки, не глядя на размеры экрана. Container Queries дают такую гибкость: элемент ориентируется на контейнер и меняет стили при порогах вроде @container (min-width: 40rem).

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

#фронтенд #css #адаптивность

Я: Зацени мои крутые проекты на GitHub

Также мои проекты: