#простымисловами: Что такое srcset и зачем он нужен
Обычный атрибут
Вот тут и приходит на помощь
🔍 Что здесь происходит:
—
—
—
В результате:
📱 На телефоне загрузится лёгкое изображение.
💻 На ноутбуке — среднее.
🖥 А на 4K-мониторе — чёткое и большое.
❗️ Важно:
#фронтенд #html
Обычный атрибут
src
в теге <img>
указывает одну-единственную картинку. Но что делать, если пользователи заходят с телефонов, ретина-экранов и 4K мониторов? Показывать одну и ту же версию — значит терять в качестве или перегружать страницу.Вот тут и приходит на помощь
srcset
. С его помощью можно указать несколько вариантов одного изображения, а браузер сам выберет нужное под конкретный экран.<img
src="image-400.jpg"
srcset="
image-400.jpg 400w,
image-800.jpg 800w,
image-1200.jpg 1200w
"
sizes="(max-width: 600px) 400px,
(max-width: 1000px) 800px,
1200px"
alt="Пример адаптивного изображения">
🔍 Что здесь происходит:
—
src
— запасной вариант на случай, если браузер не поддерживает srcset.—
srcset
— список изображений с их шириной.—
sizes
— помогает браузеру понять, сколько пикселей реально нужно на экране.В результате:
📱 На телефоне загрузится лёгкое изображение.
💻 На ноутбуке — среднее.
🖥 А на 4K-мониторе — чёткое и большое.
❗️ Важно:
src
обязателен, так как в браузере пользователя может отсутствовать поддержка srcset
.#фронтенд #html
👍25🔥4❤2
Forwarded from Точка входа в программирование
Промпт, который сделает из ChatGPT топового ментора по программированию. Это отличный лайфхак, чтобы не тратиться на дорогие и бесполезные курсы, а освоить темы самостоятельно и получить мощнейшую дозу практики.
ИИ выдаст вам теорию с домашками, сам проверит задания и будет поддерживать на пути освоения кодинга.
Сохраняйте себе и учитесь с кайфом.
ИИ выдаст вам теорию с домашками, сам проверит задания и будет поддерживать на пути освоения кодинга.
<System>
You are a Senior Software Engineer with 10+ years of full-stack development experience. You specialize in clean code practices, debugging, peer reviews, documentation, test-driven development (TDD), and performance optimization. Your responses should reflect industry best practices and clear, well-structured reasoning.
</System>
<Context>
The user is working on a software project and requires support with one or more of the following:
- Writing new code
- Debugging existing code
- Reviewing submitted code
- Explaining how a section of code works
- Refactoring inefficient or outdated code
- Writing or improving documentation
- Writing or improving test coverage
The user's goal is to improve code quality, maintainability, and performance.
</Context>
<Instructions>
1. Identify the specific type of task (write/debug/review/explain/refactor/document/test) based on the user's input.
2. Ask clarifying questions only if essential information is missing.
3. Provide detailed output with inline comments where helpful.
4. Suggest improvements aligned with modern best practices.
5. Include reasoning behind each major action or recommendation.
6. When writing or refactoring code, ensure it is modular, readable, and efficient.
7. When reviewing code, provide a bullet-point summary of observations and a suggestion section.
8. For documentation, write in clear, beginner-friendly language while also addressing intermediate-level concepts.
9. For testing, use the most suitable testing framework based on the programming language.
</Instructions>
<Constraints>
- Maintain readability and clean code principles.
- Avoid third-party libraries unless absolutely necessary.
- Prefer simplicity and clarity over clever or overly complex solutions.
- When unsure of the tech stack, ask the user to confirm.
- Keep each function under 50 lines unless context demands otherwise.
</Constraints>
<Output Format>
<TaskType> Write | Debug | Review | Explain | Refactor | Document | Test </TaskType>
<Language> Python | JavaScript | TypeScript | Java | C++ | Other (confirm with user) </Language>
<File/FunctionName> Specify target file or function name </File/FunctionName>
<Output>
[Insert code, explanation, or documentation as per task here, formatted with markdown-style code blocks]
</Output>
<Suggestions>
[List of improvements, next steps, or alternate methods the user may explore]
</Suggestions>
</Output Format>
<Reasoning>
Apply Theory of Mind to analyze the user's request, considering both logical intent and emotional undertones. Use Strategic Chain-of-Thought and System 2 Thinking to provide evidence-based, nuanced responses that balance depth with clarity.
</Reasoning>
<User Input>
Reply with: "Please enter your code request (e.g., Write, Debug, Review, Explain, Refactor, Document, or Test) and provide the code snippet or context, and I will start the process," then wait for the user to provide their specific task and code context.
</User Input>
Сохраняйте себе и учитесь с кайфом.
💩9🤩6👍3🗿3👎1🔥1
This media is not supported in your browser
VIEW IN TELEGRAM
Команда Google Chrome выпустила бесплатный учебник по веб-разработке
В нём собраны курсы по разным темам, нужным любому веб-разработчику: HTML, CSS, JS, PWA, Формы, тестирование и так далее. Главное, что платить ни за что не нужно.
Переходите по ссылке и стартуйте с любого курса: https://web.dev/learn?hl=ru
#курс
В нём собраны курсы по разным темам, нужным любому веб-разработчику: HTML, CSS, JS, PWA, Формы, тестирование и так далее. Главное, что платить ни за что не нужно.
Переходите по ссылке и стартуйте с любого курса: https://web.dev/learn?hl=ru
#курс
🔥14❤6👍2
Media is too big
VIEW IN TELEGRAM
Сайт-портфолио нового уровня
Следите за мыслью. Что будет, если сделать интерактивный 3D-офис, в котором стоит с ЭЛТ-монитором, в который встроено нечто напоминающее Windows 95, в которой есть игры и браузер, в который встроен реальный сайт с портфолио? А получится проект Генри Хеффернана, созданный с использованием React, Three.js и WebGL.
Это не просто демонстрация возможностей разработчика, но и явная любовь и уважение к технологиям прошлого — тут воссозданы мерцание монитора, дрожание изображения и даже отпечатки пальцев на экране.
Заценить и оценить можно тут: https://henryheffernan.com
#фронтенд #webgl #threejs #портфолио
Следите за мыслью. Что будет, если сделать интерактивный 3D-офис, в котором стоит с ЭЛТ-монитором, в который встроено нечто напоминающее Windows 95, в которой есть игры и браузер, в который встроен реальный сайт с портфолио? А получится проект Генри Хеффернана, созданный с использованием React, Three.js и WebGL.
Это не просто демонстрация возможностей разработчика, но и явная любовь и уважение к технологиям прошлого — тут воссозданы мерцание монитора, дрожание изображения и даже отпечатки пальцев на экране.
Заценить и оценить можно тут: https://henryheffernan.com
#фронтенд #webgl #threejs #портфолио
👍29🔥10❤3👎1
This media is not supported in your browser
VIEW IN TELEGRAM
Наглядный совет, как создавать простые анимации с помощью CSS
Здесь собраны 4 примера простых анимаций и код к ним. Они помогут разобраться, как пользоваться кейфреймами тем, кто лучше понимает наглядную демонстрацию, а не сухую теорию.
#совет #css
Здесь собраны 4 примера простых анимаций и код к ним. Они помогут разобраться, как пользоваться кейфреймами тем, кто лучше понимает наглядную демонстрацию, а не сухую теорию.
#совет #css
👍17❤4💩1
Forwarded from Типичный программист
Не понимаю, как я это упустил: Microsoft раскатила расширение, которое превращает VS Code в полноценную IDE для работы с PostgreSQL, без переключений между тулзами 👍
Внутри всё, что нужно:
• Визуализация схемы базы прямо в IDE.
• IntelliSense с автокомплитом и подсветкой и форматированием SQL-запросов.
• Запуск PostgreSQL в Docker.
• Быстрое подключение к любой базе (локально, в облаке).
• История запросов для быстрого повторного запуска.
• Просмотр и управление объектами БД.
• История запросов и запуск psql прямо из VS Code.
• Интеграция с GitHub Copilot — AI пишет и объясняет SQL
Поставить можно тут
Внутри всё, что нужно:
• Визуализация схемы базы прямо в IDE.
• IntelliSense с автокомплитом и подсветкой и форматированием SQL-запросов.
• Запуск PostgreSQL в Docker.
• Быстрое подключение к любой базе (локально, в облаке).
• История запросов для быстрого повторного запуска.
• Просмотр и управление объектами БД.
• История запросов и запуск psql прямо из VS Code.
• Интеграция с GitHub Copilot — AI пишет и объясняет SQL
Поставить можно тут
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥20👍4
Упрощаем работу с регулярками в JavaScript
RegExp может выглядеть как набор символов и скобок, но правильный подход — это чистый, понятный и протестированный код. Здесь собраны техники, которые помогут вам улучшить ваши навыки работы с регулярками и упростить их использование.
#фронтенд #javascript #regexp
RegExp может выглядеть как набор символов и скобок, но правильный подход — это чистый, понятный и протестированный код. Здесь собраны техники, которые помогут вам улучшить ваши навыки работы с регулярками и упростить их использование.
#фронтенд #javascript #regexp
😁9👍2
This media is not supported in your browser
VIEW IN TELEGRAM
Кнопка «удаления» с продуманной анимацией
Отличный вариант для вашего проекта. Конечно, если у вас есть в нём кнопка для удаления чего-либо.
Посмотреть код можно здесь: https://codepen.io/aaroniker/pen/BaNzEWe
#codepen
Отличный вариант для вашего проекта. Конечно, если у вас есть в нём кнопка для удаления чего-либо.
Посмотреть код можно здесь: https://codepen.io/aaroniker/pen/BaNzEWe
#codepen
👍12😁8❤3🤩1
Зачем нужен BFF: архитектура, которая избавит фронтенд от боли
Когда у вас один API сразу для разных платформ, это усложняет логику, удлиняет ответы и вообще делает отладку и работу с кодом сложнее. Здесь на помощь приходит BFF — Backend For Frontend — прослойка между клиентскими приложениями и основным API.
В статье понятно объясняется, зачем она нужна, какие задачи она решает (сбор и трансформация данных, адаптация под устройства, кэширование), а также её плюсы и минусы.
🤔 А как у вас организован диалог фронта и бэка?
#бэкенд #фронтенд #bff
Когда у вас один API сразу для разных платформ, это усложняет логику, удлиняет ответы и вообще делает отладку и работу с кодом сложнее. Здесь на помощь приходит BFF — Backend For Frontend — прослойка между клиентскими приложениями и основным API.
В статье понятно объясняется, зачем она нужна, какие задачи она решает (сбор и трансформация данных, адаптация под устройства, кэширование), а также её плюсы и минусы.
🤔 А как у вас организован диалог фронта и бэка?
#бэкенд #фронтенд #bff
😁5👍2❤1
This media is not supported in your browser
VIEW IN TELEGRAM
Добавляем питомцев прямо в редактор кода
Они не только бегают по экрану, но и могут указывать на ошибки в коде. А ещё поднимут настроение, если проект никак не хочет билдиться.
Устанавливается просто, как обычный плагин. Инструкция тут: https://marketplace.visualstudio.com/items?itemName=tonybaloney.vscode-pets
#vscode #плагины
Они не только бегают по экрану, но и могут указывать на ошибки в коде. А ещё поднимут настроение, если проект никак не хочет билдиться.
Устанавливается просто, как обычный плагин. Инструкция тут: https://marketplace.visualstudio.com/items?itemName=tonybaloney.vscode-pets
#vscode #плагины
😁9❤2🤣1
Присоединяйся к хакатону года в сфере travel-tech - О!Хакатону от Островка ❤️
Островок приглашает Go и Python разработчиков, а также аналитиков и продакт-менеджеров попробовать свои силы в реальных бизнес-задачах и побороться за денежный приз.
Мероприятие пройдет полностью в онлайн-формате, участвовать можно из любой точки мира, самостоятельно или в команде.
Призовой фонд: 1 000 000 ₽
Регистрация открыта до 18 сентября.
Старт 26 сентября!❤️
Подробности и регистрация
Реклама. ООО "БРОНИРОВАНИЕ ГОСТИНИЦ", ИНН 7703389880, erid: 2W5zFJuGSKr
Островок приглашает Go и Python разработчиков, а также аналитиков и продакт-менеджеров попробовать свои силы в реальных бизнес-задачах и побороться за денежный приз.
Мероприятие пройдет полностью в онлайн-формате, участвовать можно из любой точки мира, самостоятельно или в команде.
Призовой фонд: 1 000 000 ₽
Регистрация открыта до 18 сентября.
Старт 26 сентября!
Подробности и регистрация
Реклама. ООО "БРОНИРОВАНИЕ ГОСТИНИЦ", ИНН 7703389880, erid: 2W5zFJuGSKr
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥1
Сайт-рулетка для фильмов: создаём интерактивный развлекательный проект на Vue и TMDb
Рулетка для выбора случайного фильма по жанру — отличный способ попрактиковаться в работе со Vue, API и адаптивной верстки.
Это не просто урок — это реальный портфолио-проект, который вы можете повторить и улучшить.
#фронтенд #vue #петпроект
Рулетка для выбора случайного фильма по жанру — отличный способ попрактиковаться в работе со Vue, API и адаптивной верстки.
Это не просто урок — это реальный портфолио-проект, который вы можете повторить и улучшить.
#фронтенд #vue #петпроект
👎3🔥1
Forwarded from Типичный программист
Как искать работу в IT в 2025, не вызывая подозрений у санитаров
В отборе в IT страсти кипят не меньше, чем в хайлоаде. Вместе с Proglib мы провели исследование и спросили сотни айтишников: что реально выводит из себя в найме?
Собрали всё в удобный чек-лист:
– HR узнают, как не отпугивать сильных кандидатов.
– Айтишники поймут, где сразу маячат ред флаги и можно не терять время.
Надеемся, материал хоть и немного, но изменит процессы найма к лучшему. Поэтому сохраняйте, делитесь и прожимайте ❤️
В отборе в IT страсти кипят не меньше, чем в хайлоаде. Вместе с Proglib мы провели исследование и спросили сотни айтишников: что реально выводит из себя в найме?
Собрали всё в удобный чек-лист:
– HR узнают, как не отпугивать сильных кандидатов.
– Айтишники поймут, где сразу маячат ред флаги и можно не терять время.
Надеемся, материал хоть и немного, но изменит процессы найма к лучшему. Поэтому сохраняйте, делитесь и прожимайте ❤️
😁4
Август без феста — лето на ветер
В музее-заповеднике «Коломенское» пройдет ИТ-пикник для опытных специалистов.
В программе:
— Лекции топов индустрии. Будут разные темы: от R&D и аналитики до продуктового менеджмента и научпопа.
— Интерактивы, квесты, мастер-классы, робототехника и VR, карьерная и ИТ‑лаборатории.
— Общение, знакомства и выступления известных артистов.
Захватите друзей, семью и коллег — развлечения найдутся для каждого.
Подробности и билеты — на сайте ИТ-пикника
Это #партнёрский пост
В музее-заповеднике «Коломенское» пройдет ИТ-пикник для опытных специалистов.
В программе:
— Лекции топов индустрии. Будут разные темы: от R&D и аналитики до продуктового менеджмента и научпопа.
— Интерактивы, квесты, мастер-классы, робототехника и VR, карьерная и ИТ‑лаборатории.
— Общение, знакомства и выступления известных артистов.
Захватите друзей, семью и коллег — развлечения найдутся для каждого.
Подробности и билеты — на сайте ИТ-пикника
Это #партнёрский пост
❤2
Адаптивные изображения и подписи на CSS: сила container-queries и :has()
Теперь не обязательно «гадать», подгоняя стили картинок и подписей под медиазапросы — CSS получил мощные инструменты. В статье показано, как с помощью
#фронтенд #css #адаптивность
Теперь не обязательно «гадать», подгоняя стили картинок и подписей под медиазапросы — CSS получил мощные инструменты. В статье показано, как с помощью
container-queries
и :has()
адаптировать изображения к размеру блока и менять расположение и стили элементов в зависимости от размеров экрана или блока. Примеры кода и пояснения помогут освоить эти новые фишки CSS уже сегодня.#фронтенд #css #адаптивность
👍5🔥1