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

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

@webdev_plus

Присоединяйтесь к нашему каналу и погрузитесь в мир веб-разработки

Связь: @devmangx
Subscribers
7.9K
Photos
657
Videos
294
Links
811

Showing posts older than #877 · Back to latest

Older Posts 20 shown
Post #876 1.4K
Animate UI только что выпустила свою версию 1.0

✓ React, TypeScript, Tailwind CSS и Motion
✓ Полностью настраиваемая
✓ 170 анимированных иконок

Открытый исходный код: https://github.com/imskyleen/animate-ui

@WebDev_Plus
Post #874 1.25K
Чит-лист неизменяемых альтернатив 9 методов, изменяющих массивы в JavaScript

@WebDev_Plus
Post #873 1.37K
Хочешь создавать лучшие анимации для своего сайта или приложения? Вот 12 принципов, которым нужно следовать:

① Эластичность: деформация для передачи веса и гибкости
② Антиципация: подготовка пользователя перед действием
③ Сцена: привлечение внимания к важному
④ Действие: покадровая анимация или ключевые позы
⑤ Непрерывность: ничего не останавливается и не начинается резко
⑥ Плавность: плавные входы и выходы
⑦ Арки: плавные движения для большего реализма
⑧ Контекст: детали, поддерживающие основное действие
⑨ Время: правильная продолжительность для плавности или скованности
⑩ Преувеличение: акценты для лучшего донесения идеи
⑪ Объем: добавление согласованности, глубины и реализма
⑫ Привлекательность: приятные, запоминающиеся анимации с характером

Вот полная статья с примерами: 12 принципов анимации

@WebDev_Plus
Post #872 1.27K
ml5.js — это библиотека машинного обучения для JavaScript, которая даёт доступ к ML-моделям прямо в браузере. С её помощью можно не только использовать готовые модели, но и обучать нейросети локально.

В этом курсе ты узнаешь, как работать с ml5.js, и закрепишь навыки на практике, собирая реальные проекты

@WebDev_Plus
Post #871 1.31K
Хочешь выучить React, Svelte, Vue или Angular?

Вот страница, где сравнивается синтаксис всех четырёх фреймворков. Если уже знаешь один, то легко разберёшься в другом:

→ http://component-party.pages.dev

@WebDev_Plus
Post #869 1.36K
Большинство разработчиков об этом даже не догадываются… любую веб-страницу можно превратить в текстовый редактор одной строкой JavaScript

Просто вбей в консоль браузера:

document.designMode = "on";


И сразу получаешь страницу, где весь контент можно редактировать. Можно включать и выключать этот режим в любой момент, работает во всех популярных браузерах — Chrome, Firefox, Safari, Edge.

Удобно для быстрых мокапов, теста идей по UI или просто чтобы поиграться.

Напоминание: некоторые из самых мощных фич в технике годами лежат прямо на поверхности 🙂

@WebDev_Plus
Post #868 1.23K
Сохраняй себе 5 топовых тулз для веб-разработчиков

Эти штуки реально ускоряют работу, делают код чище и экономят время. Полезный набор, который стоит держать под рукой.

SVG Flag Icons — nucleoapp.com/svg-flag-icons

EmbedPDF — embedpdf.com

FliiipBook — fliiipbook.com

use-mcp — github.com/modelcontextprotocol/use-mcp

DayPicker — daypicker.dev

Пригодятся в любом проекте

@WebDev_Plus
Post #867 1.27K
Подогнал классную находку для веб-разработчиков

Cursor Effects — набор ретро-эффектов курсора с кучей вариаций. Бесплатно, open source, и встраивается в проект буквально за пару строк кода.

Мгновенно добавляет сайту креатива и выделяет его среди остальных :)

github.com/tholman/cursor-effects

@WebDev_Plus
Post #866 1.18K
freeCodeCamp выкатил ежедневные задачи по программированию. Решать их можно прямо в мобильном приложении или в /learn

Это отличный способ прокачать навыки: можно тренироваться параллельно с прохождением курса или просто для практики на каждый день.

Сегодняшний челендж — валидатор IPv4. Попробуйте решить

Подробнее тут

@WebDev_Plus
Post #864 1.2K
Занес классную находку для тех, кто учит JS и любит MMORPG. Deepest World — браузерная песочница, где ты пишешь бота на JavaScript, а он уже сам фармит, крафтит и чистит данжи. Игра в раннем доступе и бесплатна. 🤩

Поиграть: https://deepestworld.com/

@WebDev_Plus
Post #863 1.31K
Вышла версия 1.5 популярного React-компонента для карт

Теперь разработчики могут работать с 3D-картами, использовать SSR, строить маршруты между двумя точками и рисовать собственные геометрические фигуры прямо на карте.

Проект продолжает активно развиваться и становится ещё удобнее для интеграции в современные веб-приложения.

Подробнее: react-google-maps1.5

@WebDev_Plus
Post #862 1.17K
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
Post #861 1.27K
HTML получил новые атрибуты command, которые позволяют вызывать методы DOM-элементов без написания JavaScript.

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

@WebDev_Plus
Post #860 1.36K
Как одной строкой задать и min-width, и width

Обычно это пишут так:

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


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

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


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

Приятный бонус: значения в max() можно указывать в любом порядке.

@WebDev_Plus
Post #859 1.35K
Хочешь аккуратные, пиксельно-точные SVG-флаги стран?

Есть отличный ресурс с коллекцией профессионально прорисованных флагов. Можно просто скопировать SVG-код и сразу вставлять в проект.

Идеально подходит для веб-разработчиков и дизайнеров, которые ценят качество и скорость.

Источник : nucleoapp.com/svg-flag-icons

Берите на заметку 📸

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

@WebDev_Plus
Post #857 1.47K
HTML Tip 🌟

Какие есть применения у thead, tbody и tfooter?

Чтобы применять общие стили к шапке, подвалу или основной части таблицы.

Чтобы при печати таблицы на каждой странице отображались шапка и подвал.

Пример:

thead — секция заголовков (шапка таблицы)

tbody — основное содержимое таблицы

tfoot — подвал таблицы

@WebDev_Plus
Post #855 1.41K
Появилась библиотека компонентов для веба, которая позволяет собирать интерфейсы с настоящим мобильным ощущением.

Она поддерживает React, Vue, Svelte и другие фреймворки, а в комплекте идёт множество элементов в стиле iOS и Material. Такой подход делает веб-приложения похожими на нативные.

Особенно это актуально для PWA, гибридных приложений на Ionic или Capacitor и мобильных сайтов. Пользователи получают привычный мобильный UX, а конверсия растёт.

Источник: konstaui.com

@WebDev_Plus
Post #854 1.31K
Новый инструмент для фронтендеров и дизайнеров

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

Источник: gradient.style 🤩

@WebDev_Plus
Older posts →
Threads Profile ViewerView any public Threads profile without an account.Open ThreadLook →Writing with AI? Make it sound human.Metric37 rewrites AI drafts so they read naturally. Free AI detector, 1,500 words free.Try Metric37 →