WebDev+ | Веб-разработка
8.32K subscribers
505 photos
241 videos
10 files
700 links
Присоединяйтесь к нашему каналу и погрузитесь в мир веб-разработки

Связь: @devmangx
Download Telegram
Сегодня нашёл этот курс по Laravel

Это популярный фреймворк для веб-разработки на PHP, известный своими удобными встроенными функциями и дружелюбными инструментами для разработчиков.

В этом курсе ты научишься использовать Laravel для создания полноценного клона Medium.

Ты узнаешь о моделях, миграциях, шаблонизации Blade, компонентах, валидации форм и многом другом.

> https://freecodecamp.org/news/learn-laravel-by-building-a-medium-clone/ 🤍🤍

@WebDev_Plus
Please open Telegram to view this post
VIEW IN TELEGRAM
3
This media is not supported in your browser
VIEW IN TELEGRAM
Лучшие кнопки с темным режимом для вашего сайта

Для HTML/CSS и React. Скопируйте и вставьте:

http://toggles.dev

@WebDev_Plus
11👍2🔥2
Полная шпаргалка по HTML-тегам

Если ты хоть раз забывал, чем отличается <article> от <section>, или какой тег нужен для встраивания видео — сохраняй себе эту таблицу

@WebDev_Plus
10🔥3
Лучшие расширения VS Code для веб-разработчиков.

> LiveServer — запускает локальный сервер с автообновлением при сохранении файлов. Удобно для быстрой верстки.

> Prettier — автоформатирование кода по заданным правилам. Работает с HTML, CSS, JS и др.

> ESLint — анализирует JS/TS-код и находит потенциальные ошибки и несоблюдение стиля.

> Auto Rename Tag — автоматически переименовывает закрывающий тег при изменении открывающего.

> HTML CSS Support — даёт автодополнение и поддержку классов CSS прямо в HTML.

> CSS Peak — переход к определению CSS-класса из HTML-файла. Как Go to Definition.

> Bracket Pair Colorizer — подсвечивает парные скобки разными цветами, помогает читать вложенности.

> Code Spell Checker — проверка орфографии в коде (комментарии, строки и т.п.).

> Debugger for Chrome — отладка JavaScript-кода прямо из VS Code через Chrome.

> GitLens — расширенная работа с git: авторы строк, история, blame и визуализация изменений

😈😈

@WebDev_Plus
Please open Telegram to view this post
VIEW IN TELEGRAM
9🔥3👌3❤‍🔥1
400+ JS Interview Questions.pdf
4.4 MB
Готовимся к собеседованию — 400 популярных вопросов и ответов для JavaScript-разработчика.

Сохраняйте и изучайте.

@WebDev_Plus
👍2
This media is not supported in your browser
VIEW IN TELEGRAM
На мой взгляд, это самый красивый учебник по HTML и CSS, который можно найти в интернете. 😍

> Полностью бесплатный
> Потрясающая визуальная подача
> Подробные и понятные гайды для новичков

👉 internetingishard.netlify.app

@WebDev_Plus
Please open Telegram to view this post
VIEW IN TELEGRAM
👍8🔥3
This media is not supported in your browser
VIEW IN TELEGRAM
Чёрт, не верится, что этот инструмент бесплатный и с открытым исходным кодом 🤯

Идеальный конвертер файлов — без ограничений на размер, без рекламы и полностью open-source.

Конвертируй изображения, видео, документы и многое другое

> http://vert.sh

@WebDev_Plus
Please open Telegram to view this post
VIEW IN TELEGRAM
7🔥1
This media is not supported in your browser
VIEW IN TELEGRAM
Виртуальные туры и онбординг за 5 минут

Познакомься с Driver.js — это open-source библиотека, которая поможет сделать крутые пошаговые подсказки прямо в интерфейсе твоего сайта или веб-приложения:

Работает с React, Vue, Angular, Svelte и другими.

Установка: npm install driver.js

@WebDev_Plus
👍52
This media is not supported in your browser
VIEW IN TELEGRAM
Это жесть какая-то

Игра Horizon Drive, полностью на JavaScript + Three.js, сделана ребятами из Shopify.

Просто в браузере. Без движков. Без установок.

Вот насколько далеко ушёл веб.

> https://horizon.shopify.com

@WebDev_Plus
👍10😍4
Media is too big
VIEW IN TELEGRAM
Вам нужно вдохновение для следующего 3D-проекта?

На странице Three.js Showcase собраны потрясающие проекты, созданные талантливыми авторами.

> https://threejsresources.com/showcase

@WebDev_Plus
👍51🔥1
This media is not supported in your browser
VIEW IN TELEGRAM
Мощный совет по JavaScript

Используй filter(), чтобы удалить из массива ложные значения (такие как 0, null, undefined, false).

Чисто и лаконично
Без циклов

@WebDev_Plus
Please open Telegram to view this post
VIEW IN TELEGRAM
👍17
Media is too big
VIEW IN TELEGRAM
Сделай свои 3D-файлы легче и быстрее

GLB Optimizer помогает уменьшить размер файлов без потери качества — идеально для производительности в вебе

@WebDev_Plus
👍6🔥1
This media is not supported in your browser
VIEW IN TELEGRAM
Не знаешь, какие цвета использовать на сайте?

Эта штука соберёт тебе палитру, вдохновлённую покемоном

> https://www.pokemonpalette.com/

@WebDev_Plus
10👍3
This media is not supported in your browser
VIEW IN TELEGRAM
Забавный JavaScript-эксперимент с событием resize:

Popup Trombone — ссылка

Каждый раз, когда ты меняешь размер окна, звучит тромбон.

Абсолютно бесполезно, но весело и идеально, чтобы потроллить UX

@WebDev_Plus
😁14👍32
5 шпаргалок для веб-разработчиков

@WebDev_Plus
👍212
This media is not supported in your browser
VIEW IN TELEGRAM
Хочешь добавить крутые анимированные иконки на сайт или в приложение?

Эта библиотека — сборник красивых и лёгких анимаций Lottie, которые можно сразу вставлять в проект.

👉 https://useanimations.com/

@WebDev_Plus
Please open Telegram to view this post
VIEW IN TELEGRAM
👌84
В CSS добавили функцию if для создания условных конструкций, уже доступно в Chrome 137

Ещё из интересного — завезли reading-flow и reading-order. Теперь можно управлять таб-навигацией в flex и grid без костылей. Это решает старую проблему в макетах, когда порядок фокуса может не совпадать с визуальным расположением элементов

Подробнее: https://developer.chrome.com/blog/new-in-chrome-137

@WebDev_Plus
7🔥7