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

Забавный JavaScript-эксперимент с событием resize:

Popup Trombone — ссылка

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

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

@WebDev_Plus

Не знаешь, какие цвета использовать на сайте?

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

> https://www.pokemonpalette.com/

@WebDev_Plus

Сделай свои 3D-файлы легче и быстрее

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

@WebDev_Plus

Мощный совет по JavaScript

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

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

@WebDev_Plus

Вам нужно вдохновение для следующего 3D-проекта?

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

> https://threejsresources.com/showcase

@WebDev_Plus

Это жесть какая-то

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

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

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

> https://horizon.shopify.com

@WebDev_Plus

Виртуальные туры и онбординг за 5 минут

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

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

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

@WebDev_Plus

Чёрт, не верится, что этот инструмент бесплатный и с открытым исходным кодом 🤯

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

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

> http://vert.sh

@WebDev_Plus

На мой взгляд, это самый красивый учебник по HTML и CSS, который можно найти в интернете. 😍

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

👉 internetingishard.netlify.app

@WebDev_Plus

Готовимся к собеседованию — 400 популярных вопросов и ответов для JavaScript-разработчика.

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

@WebDev_Plus

Лучшие расширения 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

Полная шпаргалка по HTML-тегам

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

@WebDev_Plus

Лучшие кнопки с темным режимом для вашего сайта

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

→ http://toggles.dev

@WebDev_Plus

Сегодня нашёл этот курс по Laravel

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

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

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

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

@WebDev_Plus

Как масштабировать сайт до 1 000 000 пользователей

Пошаговый план от Neo Kim — от MVP до продвинутой прод-системы:

> Prelaunch

— Статический фреймворк, минимум затрат

> 10 пользователей

— Одна виртуалка на всё, не усложняй

> 100 пользователей

— Раздели БД и бэкенд по виртуалкам
— Подготовься к масштабированию

> 1 000 пользователей

— Зоны доступности
— Serverless для редких задач
— Монолит (ещё можно)
— Репликация базы (лидер/фолловер)

> 10 000 пользователей

— Включи автоскейлинг
— Клонируй stateless-сервер
— Кэшируй популярные чтения
— Балансируй нагрузку
— CDN для статики и видео
— Введи 3-уровневую архитектуру

> 100 000 пользователей

— Микросервисы
— Ещё больше зон доступности
— Кэш между БД и бэком
— Контейнеры и Kubernetes

> 1 000 000 пользователей

— Федерация и шардинг БД
— Сервера по регионам
— Глобальный балансировщик

Сохраняй как шпору и влепи лайк ❤️

@WebDev_Plus

Хочешь разобраться в веб-разработке с нуля и бесплатно?

Курс CS50’s Web Programming with Python and JavaScript от Гарварда — топовый выбор.

> HTML, CSS, Git
> Python + Django
> JavaScript + API + AJAX
> PostgreSQL и ORM
> Безопасность, CI/CD, тесты

Всё бесплатно, онлайн, на английском

Сайт курса: https://cs50.harvard.edu/web/2020/

Идеально, если уже прошёл базовый CS50 или хочешь перейти от теории к практике ❤️

@WebDev_Plus

Все веб-разработчики ликуют

Вышел бесплатный инструмент Same.dev, который генерирует код, точно копирующий любой указанный сайт

На видео — примеры копирования сайтов вроде Nike, Apple TV, Minecraft.

—> cсылка на инструмент

#ресурсы

@WebDev_Plus

Совет для VS Code:

Используйте Ctrl + Shift + L, чтобы мгновенно выделить все вхождения выделенного текста в текущем файле.

Это отлично подходит для быстрых правок и массовых изменений

#советы

@WebDev_Plus

Принёс полезное с Хабра — перевод обновленного учебника по Flask от Мигеля Гринберга

Глава 1: Привет, мир! (тык);
Глава 2: Шаблоны (тык);
Глава 3: Веб-формы (тык);
Глава 4: База данных (тык);
Глава 5: Логины пользователей (тык);
Глава 6: Страница профиля и аватары (тык);
Глава 7: Обработка ошибок (тык);
Глава 8: Подписчики (тык);
Глава 9: Разбивка на страницы (тык);
Глава 10: Поддержка электронной почты (тык);
Глава 11: Дизайн приложения (тык);
Глава 12: Дата и время (тык);
Глава 13: I18n и L10n (тык);
Глава 14: Ajax (тык);
Глава 15: Улучшенная структура приложения (тык);
Глава 16: Полнотекстовый поиск (тык);
Глава 17: Развертывание на Linux (тык);
Глава 18: Развертывание на Heroku (тык);
Глава 19: Развертывание на контейнерах Docker (тык);
Глава 20: Немного магии JavaScript (тык);
Глава 21: Уведомления пользователей (тык);
Глава 22: Фоновые задания (тык);
Глава 23: Интерфейсы прикладного программирования (API) (тык).

Питонисты, налетайте ☕️

@IT_Portal

В коллекцию потрясающих ресурсов - бесплатные, лаконичные и максимально полезные

https://htmlreference.io - гид по HTML элементам

https://cssreference.io/ - визуальный гид по CSS свойствам

#ресурсы

@WebDev_Plus