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

Сайты для бесплатных 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

Наткнулся на крутую коллекцию фоновых паттернов для современных сайтов. Можно скопировать одним кликом — прям идеально для лендингов, hero-блоков или даже в качестве background у компонентов. Полезная штука, чтобы быстро прокачать визуал без лишней возни. → http://patterncraft.fun @WebDev_Plus

Наконец-то JavaScript начинает вести себя как взрослый язык. Вот набор новых методов для Set, которые должны были быть добавлены лет 15 назад, но ладно хотя бы сейчас. Поддержка уже есть в 87% браузеров, так что можно юзать без костылей.

const frontEnd = new Set(['JavaScript', 'HTML', 'CSS'])
const backEnd = new Set(['JavaScript', 'Python', 'Go', 'Java'])

🔹 .intersection(otherSet) Получить пересечение — то, что есть и в FrontEnd, и в BackEnd. frontEnd.intersection(backEnd) → ['JavaScript'] 🔹.union(otherSet) Объединение без дубликатов. frontEnd.union(backEnd) → ['JavaScript', 'HTML', 'CSS', 'Python', 'Go', 'Java'] 🔹.difference(otherSet) Разность: всё, что есть в FrontEnd, но нет в BackEnd. frontEnd.difference(backEnd) → ['HTML', 'CSS'] 🔹.symmetricDifference(otherSet) Симметричная разность: всё, что есть только в одном из двух. frontEnd.symmetricDifference(backEnd) → ['HTML', 'CSS', 'Python', 'Go', 'Java'] 🔹.isSubsetOf(otherSet) Проверка: все ли элементы FrontEnd есть в BackEnd? frontEnd.isSubsetOf(backEnd) → false 🔹 .isSupersetOf(otherSet) Проверка: содержит ли FrontEnd все элементы BackEnd? frontEnd.isSupersetOf(backEnd) → false 🔹.isDisjointFrom(otherSet) Есть ли вообще общие элементы? frontEnd.isDisjointFrom(backEnd) → false Array.from(set).filter(...), уже в прошлом. Это не 2008. Эти методы читаются лучше, работают быстрее и наконец-то делают Set тем, чем он должен быть: множество, а не декоративная коллекция для новичков. Use them. @WebDev_Plus

Чувак, это просто чума 4000+ 3D-иконок, сгенерированных ИИ — идеально для веба, фронта, UI, презентаций инвесторам, чего угодно. Каждая иконка выглядит так, будто её рисовал дизайнер из YC Вот линк, проверь сам: thiings.co 🥺 @WebDev_Plus

CSS Box Shadow и Drop Shadow 🔹box-shadow — добавляет тень к прямоугольной рамке элемента (включая фон и границы). 🔹drop-shadow — работает как фильтр, отбрасывает тень по форме самого элемента (полезно для PNG с прозрачностью). box-shadow → тень по коробке drop-shadow → тень по содержимому @WebDev_Plus