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

Занес классную находку для тех, кто учит JS и любит MMORPG. Deepest World — браузерная песочница, где ты пишешь бота на JavaScript, а он уже сам фармит, крафтит и чистит данжи. Игра в раннем доступе и бесплатна. 🤩 Поиграть: https://deepestworld.com/ @WebDev_Plus

Вышла версия 1.5 популярного React-компонента для карт Теперь разработчики могут работать с 3D-картами, использовать SSR, строить маршруты между двумя точками и рисовать собственные геометрические фигуры прямо на карте. Проект продолжает активно развиваться и становится ещё удобнее для интеграции в современные веб-приложения. Подробнее: react-google-maps1.5 @WebDev_Plus

Indexing Индексы нужны, чтобы ускорить выборку данных. Вместо полного сканирования таблицы база обращается к индексу, который работает как оглавление в книге. Пример: если создать индекс на поле email, то поиск пользователя по почте выполняется гораздо быстрее. Существуют разные виды индексов. Индекс может быть по одному столбцу или составным по нескольким. Уникальный индекс гарантирует отсутствие дубликатов, а полнотекстовый индекс используется для быстрого поиска по текстам. Главное преимущество индексов — заметное ускорение запросов, сортировок и фильтрации. Минусы заключаются в том, что индексы занимают дополнительное место и замедляют операции записи, такие как вставка, обновление и удаление. Joins Join это способ объединить строки из разных таблиц по связанному полю. INNER JOIN возвращает только совпадающие строки, LEFT JOIN оставляет все строки из левой таблицы и добавляет совпадения из правой, RIGHT JOIN делает то же самое, но наоборот, FULL OUTER JOIN объединяет всё при наличии совпадений, а CROSS JOIN выдаёт декартово произведение. Пример запроса:

SELECT users.name, orders.order_date
FROM users
INNER JOIN orders ON users.id = orders.user_id;

Transactions Транзакция это набор операций, который выполняется как единое целое. Если один шаг не проходит, база данных откатывает всё назад, сохраняя целостность. Классические свойства транзакций известны как ACID. Atomicity означает «всё или ничего». Consistency гарантирует, что база остаётся в валидном состоянии. Isolation даёт уверенность, что параллельные транзакции не мешают друг другу. Durability гарантирует, что закоммиченные изменения сохраняются навсегда. Пример транзакции для перевода денег:

BEGIN;
UPDATE accounts SET balance = balance - 100 WHERE id = 1;
UPDATE accounts SET balance = balance + 100 WHERE id = 2;
COMMIT;

В реальных системах индексы ускоряют поиск товаров по названию в интернет-магазине. Join позволяет объединить клиентов с их заказами в одной выборке. Транзакции обеспечивают корректность при переводе денег между счетами. @WebDev_Plus

HTML получил новые атрибуты command, которые позволяют вызывать методы DOM-элементов без написания JavaScript. Функция уже доступна в Chrome и Edge, а в ближайшее время появится и в Firefox и Safari. Теперь для открытия или закрытия модалки достаточно двух строк HTML. 🤗 @WebDev_Plus

Как одной строкой задать и min-width, и width Обычно это пишут так:

.box {
  width: 100%;
  min-width: 400px;
}

Но то же самое можно записать короче:

.box {
  width: max(400px, 100%);
}

Функция max() берёт большее значение из списка. Если ширина экрана меньше 400px — блок всё равно будет минимум 400px. Если ширина больше — тянется на 100%. Приятный бонус: значения в max() можно указывать в любом порядке. @WebDev_Plus

Хочешь аккуратные, пиксельно-точные SVG-флаги стран? Есть отличный ресурс с коллекцией профессионально прорисованных флагов. Можно просто скопировать SVG-код и сразу вставлять в проект. Идеально подходит для веб-разработчиков и дизайнеров, которые ценят качество и скорость. Источник : nucleoapp.com/svg-flag-icons Берите на заметку 📸 @WebDev_Plus

Этот HTML-тег никто не использует, а он реально крутой @WebDev_Plus

HTML Tip 🌟 Какие есть применения у thead, tbody и tfooter? Чтобы применять общие стили к шапке, подвалу или основной части таблицы. Чтобы при печати таблицы на каждой странице отображались шапка и подвал. Пример: thead — секция заголовков (шапка таблицы) tbody — основное содержимое таблицы tfoot — подвал таблицы @WebDev_Plus

Немного фана вам в ленту 🙂 @WebDev_Plus

Появилась библиотека компонентов для веба, которая позволяет собирать интерфейсы с настоящим мобильным ощущением. Она поддерживает React, Vue, Svelte и другие фреймворки, а в комплекте идёт множество элементов в стиле iOS и Material. Такой подход делает веб-приложения похожими на нативные. Особенно это актуально для PWA, гибридных приложений на Ionic или Capacitor и мобильных сайтов. Пользователи получают привычный мобильный UX, а конверсия растёт. Источник: konstaui.com @WebDev_Plus

Новый инструмент для фронтендеров и дизайнеров Появился сервис gradient.style , который позволяет в пару кликов собирать CSS-градиенты с тонкой настройкой. Инструмент даёт массу вариантов кастомизации и помогает быстро создавать стильные переходы для сайтов и приложений. Источник: gradient.style 🤩 @WebDev_Plus

CSSBattle набирает популярность среди разработчиков. Это онлайн-платформа в стиле Code Golfing, где игроки со всего мира соревнуются в умении воспроизвести заданные «таргеты» минимальным количеством кода на CSS. Для участников доступен общий рейтинг с топовыми результатами, что добавляет азарт и дух соревнования. https://cssbattle.dev/ @WebDev_Plus

👩‍💻 Всем программистам посвящается! Вот 17 авторских обучающих IT каналов по самым востребованным областям программирования: Выбирай своё направление: 👩‍💻 Python — t.me/python_ready 🤔 InfoSec & Хакинг — t.me/hacking_ready 🖥 SQL & Базы Данных — t.me/sql_ready 👩‍💻 Linux — t.me/linux_ready 🖼️ DevOps — t.me/devops_ready 🤖 Нейросети — t.me/neuro_ready 👩‍💻 C/C++ — https://t.me/cpp_ready 👩‍💻 C# & Unity — t.me/csharp_ready 👩‍💻 Java — t.me/java_ready 📖 IT Книги — t.me/books_ready 👩‍💻 Frontend — t.me/frontend_ready 📱 JavaScript — t.me/javascript_ready 👩‍💻 Backend — t.me/backend_ready 📱 GitHub & Git — t.me/github_ready 👩‍💻 Весь IT — t.me/it_ready 👩‍💻 Bash & Shell — t.me/bash_ready 🖥 Design — t.me/design_ready 📌 Гайды, шпаргалки, задачи, ресурсы и фишки для каждого языка программирования!

Разработчик поделился новыми экспериментами с CSS и JavaScript Как вам? 😳 @WebDev_Plus

Вышел курс по Three.js — библиотеке для 3D-рендеринга прямо в браузере. На практике через пять проектов показывают, как работать с текстурами, подключать GeoJSON-данные и настраивать динамические партиклы. @WebDev_Plus

Вышла новая библиотека для пользователей Tailwind CSS. В ней собраны готовые анимации, которые можно применять без написания собственного CSS. Достаточно скопировать нужный фрагмент и вставить его в проект. Библиотека подойдёт для тех, кто хочет быстро добавить анимацию в интерфейс. Доступна по ссылке: tailwindcss-animations.vercel.app @WebDev_Plus

Типы ввода HTML @WebDev_Plus

⚡️Бесплатное обучение фронтенд-разработке с нуля с личной поддержкой от наставника На канале Интенсивный JavaScript разработчик и действующий тимлид помогает изучить фронтенд на практике Когда-то он работал крупье в казино, а сейчас помогает новичкам попасть в IT и собеседует людей в свою команду С 30 августа по 2 сентября он проводит бесплатный интенсив, где поможет разобраться во фронтенде с нуля Что получите на интенсиве ✅ Напишете свой проект на JS: сайт с аниме ✅ Узнаете, как вам сейчас попасть в сферу, каких ошибок избегать ✅ Что делать с ИИ: стоит ли заходить в ИТ, или уже поздно, и нас всех заменят ✅ и получите пошаговый план изучения фронтенда с нуля до трудоустройства или стабильных 50 тысяч на фрилансе Интенсив подойдёт, даже если вы новичок — всё объясняют так, чтобы поняла даже ваша бабушка Подписывайтесь, осталось 27 мест Учиться самостоятельно можно бесконечно, если не знать, куда копать. На интенсиве сократите время на поиск информации и получите пошаговый план от разработчика, который нанимает новичков в команду 📌 Если вы уже пробовали изучать фронтенд, но каждый шаг — это гуглинг, страдание и тысяча вкладок, — приходите на интенсив. Увидите путь от вёрстки до Angular и сможете продолжать изучать фронтенд без хаоса в голове. 👉Участвовать бесплатно 🔥Первый урок уже доступен

Хочешь добавить AI-чатботов в проекты на React? 🤖 Есть опенсорсная библиотека для React, которая позволяет быстро собирать свои чатботы. Её можно подключить к разным LLM, включая OpenAI и другие. Поддерживает кучу кастомизаций, темы и гибкие настройки. Где пригодится: - поддержка пользователей прямо в приложении - встроенные AI-ассистенты - эксперименты с интеграцией LLM Установка: npm install react-chatbotify react-chatbotify.com @WebDev_Plus

Совет по CSS Не нужно готовить отдельные версии логотипа в градациях серого для тёмной и светлой темы. Это легко делается с помощью CSS-фильтров.

/* Для светлой темы */
.logos-container img {
  filter: brightness(0);
  opacity: 0.6;
}

/* Для тёмной темы */
.logos-container img {
  filter: invert(1) saturate(0) brightness(4);
  opacity: 0.6;
}

То есть, не нужно хранить отдельные изображения для светлого и тёмного режима — фильтры решают эту задачу. @WebDev_Plus