WebDev+ | Веб-разработка

🎉 Большой розыгрыш от крупнейшего IT-медиа 1337, легендарного паблика Рифмы и Панчи, канала Техно. Победителей будет много, а для участия нужны лишь пара кликов: 1. Подписаться на Рифмы и Панчи, 1337 и на Техно. 2. Нажать «Участвовать» под этим постом Что по призам:

1 место - Iphone 16 Pro 2 место - PS5 Slim 3 место - Nintendo Switch 2 4-10 места - 10 000 рублей на карту

Победителей определим 21 июля в 18:00 МСК. Всем удачи!

Знал ли ты, что в Chrome DevTools есть функция watch? Можно ввести любое JS-выражение — и оно будет обновляться в реальном времени. Отлично подходит для отслеживания активных элементов или атрибутов aria. @WebDev_Plus

Идеальная коллекция React-компонентов. С открытым исходным кодом, поддержкой Tailwind 4.1 и доступностью Называются UntitledUI. Просто копируй, вставляй и собирай интерфейс:

npx untitledui init

@WebDev_Plus

Инструмент для анализа производительности веб-сайта Сканирует всю страницу и выставляет оценку каждому разделу. Это как Lighthouse, но с глобальным обзором всего сайта. Запусти команду:

npx unlighthouse --site <твой-сайт>

@WebDev_Plus

Сайты для бесплатных HTML/CSS шаблонов 🔸html5up.net 🔸htmlrev.com 🔸free-css.com 🔸templated.co 🔸freehtml5.co 🔸startbootstrap.com 🔸bootstrapmade.com 🔸bootswatch.com 🔸bootstraptaste.com 🔸cruip.com 🔸styleshout.com 🔸tooplate.com 🔸html5xcss3.com @WebDev_Plus

Самые типовые лейауты для веба и приложений на CSS — с готовым кодом на Flex и Grid, который можно сразу копировать → http://layout.bradwoods.io @WebDev_Plus

CSS-подсказка: С помощью современных фич вроде sibling-index() и if() вы можете воспроизвести поведение селектора :nth-child(An + B). Зачем это нужно? Чтобы легко менять A и B, ведь теперь это переменные Да-да, для тех, кто вечно гуглит: «как обновить nth-child в чистом CSS?!» — вот решение. @WebDev_Plus

Новая синтаксис для адаптивной вёрстки Более понятный и с полной поддержкой во всех браузерах:

/* Новый способ с использованием синтаксиса диапазонов */
@media (width >= 300px) {}
@media (width < 1000px) {}
@media (640px <= width < 768px) {}

/* Классический способ */
@media (min-width: 300px) {}
@media (max-width: 1000px) {}
@media (min-width: 640px) and (max-width: 768px) {}

@WebDev_Plus

Вот самый простой способ прокачать JavaScript Просто вставляешь свой JS-код — и приложение наглядно показывает, как движок JavaScript исполняет его шаг за шагом. Идеальный инструмент, чтобы разобраться в работе JS под капотом. https://www.jsv9000.app/ @WebDev_Plus

Ищем новичков во фронтенд-разработке и вёрстке сайтов. Хотим показать, как получить реальный опыт в разработке сайтов и веб-приложений. А именно: - Сверстать веб-сайт на HTML + CSS; - Реализовать функционал на JavaScript; - Пощупать фронтенд-фреймворк Angular; - Подключить Backend и загрузить сайт на хостинг. Чтобы в итоге ты своими руками разработал качественный сайт, который не стыдно добавить в портфолио или продать. Такой опыт можно получить на бесплатном практикуме уже завтра с поддержкой от опытных кураторов на каждом этапе. 👉 Приходи на бесплатное обучение и зови с собой друзей Бонусом получишь гайд для поиска работы и заказов на фронтенд-разработку.

Опенсорсный интернет-магазин на Next.js: ✓ 100 баллов Web Performance «из коробки» ✓ SEO и мета-данные уже оптимизированы ✓ Современный минималистичный UI ✓ Интеграция с Shopify → http://github.com/vercel/commerce @WebDev_Plus

Одно из самых недооценённых расширений для VS Code Позволяет визуализировать любой JSON-файл в виде красивого интерактивного графа — значительно упрощает разбор сложных структур данных. @WebDev_Plus

Интерактивные упражнения для изучения SQL ✓ Бесплатно, от простого до экспертного уровня ✓ Более 50 задач, которые нужно решить → sql-practice․com @WebDev_Plus

Вот это круто Рассмотри нестандартный способ управления 3D-сценой одновременно в нескольких окнах браузера. Всё реализовано с помощью библиотеки Three.js и localStorage. Он использует localStorage, чтобы определить новое окно и сохраняет счётчик. Это даёт каждому новому окну (при одинаковом origin) уникальный ID. Дальше взаимодействие между сферами, основанное на определении их позиций внутри окна. Для этого используется window.screenLeft чтобы узнать расстояние от левого края экрана до начала окна, и window.innerWidth чтобы получить ширину окна. Эти значения позволяют рассчитать позиции всех окон. Затем сцена рендерится с помощью Three.js. @WebDev_Plus

Жара в IT! Теперь популярные языки программирования можно легко выучить по гайдам в картинках Бесплатные инструменты, полезные ресурсы, а также советы и задачки. Выбирай нужное направление и учись не напрягаясь: 👩‍💻 Linux Ninja 🖥 CodHub | Курсы IT 📱 Python | Программирование 😷 Hacking | Кибербезопасность ⚙️ Webdev | Backend & Frontend 🖥 Программирование по мемам

С помощью CSS можно использовать новую функцию sibling-index(), чтобы определить позицию элемента среди его соседей. Также доступна функция sibling-count(), которая возвращает общее количество соседних элементов. Результаты этих функций можно использовать и в псевдоэлементах.

<div class="container">
  <div></div>
  <div></div>
  <div></div>
  ...
</div>

.container div { 
  border: calc(sibling-index() * 2px) solid;
  opacity: calc(sibling-index() / sibling-count());
}

.container div::before {
  content: counter(i) "/" counter(N);
  counter-reset: N sibling-count() i sibling-index(); /* работают с текущим div */
}

Функции довольно громоздкие, поэтому можно определить кастомные функции и сократить код.

@function --N() {
  result: sibling-count();
}
@function --i() {
  result: calc(sibling-index() - 1); /* начинаем с нуля, а не с единицы */
}

.container div { 
  border: calc(--i() * 2px) solid;
  opacity: calc(--i() / --N());
}

.container div::before {
  content: counter(i) "/" counter(N);
  counter-reset: N --N() i --i();
}

@WebDev_Plus

Это must-have инструмент для каждого веб-разработчика Он позволяет конвертировать любой URL в разные форматы Markdown, PDF, текст, изображения и другие — всего в пару кликов. https://www.urltoany.com/ @WebDev_Plus

Это, пожалуй, одно из самых безумных расширений для редактора, что я видел за последнее время. GitLantis превращает структуру проекта в 3D-модель подводного мира. Да-да, вы «ныряете» сквозь директории среди буйков и маяков Не спрашивайте зачем. Просто попробуйте. @WebDev_Plus

CSS-совет Сделал фигуру с помощью shape() и хочешь инвертировать её? Легко Пара строк кода и у тебя есть как основная форма, так и её вырезанная (обратная) версия. Бонусом ты также можешь управлять отступами вокруг инвертированной формы. @WebDev_Plus

Лучшие графики для твоего веба или приложения Lightweight Charts реально выделяются: ✓ Поддержка React, Vue и Web Components ✓ Адаптивны и отлично работают на мобилках ✓ Построены на JavaScript и canvas ✓ Оптимизированы для больших объёмов данных Идеально, если нужно что-то лёгкое, но мощное. → https://tradingview.com/lightweight-charts @WebDev_Plus