WebDev+ | Веб-разработка
前往频道在 Telegram
Присоединяйтесь к нашему каналу и погрузитесь в мир веб-разработки Связь: @devmangx
显示更多
网络:8 065
订阅者
-224 小时
-217 天
-10930 天
帖子存档
Chrome DevTools — без сомнений, мой любимый MCP-сервер.
Запустив всего две команды в терминале, ты можешь подключить Claude Code прямо к браузеру с полным доступом:
Запускаем Chrome:
google-chrome --remote-debugging-port=9222 --user-data-dir="$HOME/.config/google-chrome"claude mcp add chrome-devtools -- npx -y chrome-devtools-mcp@latest -u http://localhost:9222
Используй CSS-свойства вроде blur и opacity в анимациях, чтобы всё выглядело плавно, а не топорно.
Размытие, изменения прозрачности и пружинная анимация и есть причина, по которой анимации у Apple выглядят гладко.
@WebDev_Plus
Раньше: 30 минут перетаскивания и сортировки папок.
Теперь: "Warp, наведи порядок в этом беспорядке, пожалуйста".
Вот это ИИ, который делает мою жизнь лучше, хахаха.
→ http://midu.link/warp
@WebDev_Plus
Visual Effect теперь с открытым исходным кодом
https://github.com/kitlangton/visual-effect
Со звуком: https://effect.kitlangton.com/effect-repeat-while-output
@WebDev_Plus
может быть полезно → добавьте это в ваш css (сверху), это отменит избыточный вес шрифта tailwind на сайте, и вес шрифта будет выглядеть точно так же, как на figma.
@WebDev_Plus
Меняй значение border-radius в зависимости от размера контейнера или экрана — всего одной строкой кода.
Условный Border Radius на CSS
.box {
border-radius: calc(sign(100cqi - 100%) * 2rem);
}
Веб-дизайнеры и разработчики, это может стать библиотекой анимации следующего уровня
https://reactbits.dev/
@WebDev_Plus
Лучшая утилита для создания софтвэр диаграмм.
К тому же бесплатная и совместимая с GitHub!
Идеально подходит для UML, потоков и процессов.
Экспорт в изображение, PDF, HTML и другие форматы.
→ http://app.diagrams.net
@WebDev_Plus
Команда ядра React, наверное, спит, а я выкладываю еретические советы по React
Знаете ли вы, что хуки можно использовать прямо внутри JSX?
Конечно, так делать не стоит, но технически можно.
Это нарушает первое правило хуков, но всё равно работает, потому что хук вызывается в одном и том же порядке каждый раз.
@WebDev_Plus
ПРО СОВЕТ: REST — это переинжиниринг. Просто сделайте один эндпоинт /api, который напрямую принимает SQL-запросы.
Из соображений безопасности я добавил в сниппет AI-проверку.
@WebDev_Plus
Опа, тут бывший сеньор одного из IT-отделов Яндекса Игорь Никитин выкатил целый канал про Python — и это лучшее, что есть в рунете по теме.
Качественные гайды. Советы от известных прогеров. Тематические мемасы. Короче, ничего лишнего.
Хватит душить питона, учись его кодить: https://t.me/+MHz6ewg03OVkZjcy 🐍
Создайте анимацию входа на вашу веб-страницу с помощью SVG и нескольких строк CSS.
@WebDev_Plus
CSS-анимация автоизменения высоты с использованием grid
li > div[inert] {
grid-template-rows: 0fr;
}
li > div {
grid-template-rows: 1fr;
transition: grid-template-rows .26s;
}
Новость от OpenAI! Они выпустили Apps SDK для создания собственных приложений прямо внутри ChatGPT.
Что нового:
React для разработки интерфейса
MCP для работы с API и логикой
Сохранение состояния и доступ к моделям ИИ
Круто, правда?
@WebDev_Plus
Требуются парни и девушки в возрасте 19–40 лет, желающие работать в сфере IT.
Опыт в программировании не нужен.
Завтра запускаем бесплатный онлайн-интенсив по Frontend-разработке, где будем показывать, как разрабатывать сайты и веб-приложения используя ChatGPT.
За 7 дней обучения ты:
1. Создашь полноценный веб-сайт на HTML и CSS;
2. Оживишь страницу с помощью JavaScript;
3. Используешь фронтенд-фреймворк Angular;
4. Подключишь Backend и загрузишь сайт на хостинг;
5. Получишь советы по доработке своего проекта;
6. Научишься использовать ChatGPT и Giga во Frontend-разработке;
7. Узнаешь 9 способов найти первый заказ на фрилансе даже без опыта.
А главное, ты увидишь, что разрабатывать сайты и приложения не так сложно, как кажется. И поймёшь, как тебе развиваться в этой профессии, чтобы уже через пару месяцев зарабатывать от 1000$ на вёрстке сайтов.
👉 Проскочить на интенсив бесплатно
🔥 С 2019 стабильно помогаем с обучением, практикой, зарабатывать на фрилансе и проходить собеседования.
Если ты пришёл из CSS, особенно приятно, как Tailwind даёт утилиты для работы с прямыми потомками, всеми потомками, произвольными вариантами и не только.
Например, *:style применяется к прямым детям, **:style — ко всем потомкам, а [&.selector]:style позволяет создавать произвольные варианты.
Узнайте об этом в официальной документации Tailwind
@WebDev_Plus
Совет по JavaScript:
Можно использовать метод console.table(), чтобы вывести табличные данные в виде таблицы в консоли.
Ты, скорее всего, каждый день пользуешься console.log().
Но знаешь ли ты, что у объекта console есть и другие полезные методы — например, console.table() и console.error()?
Подробнее — в статье
Ещё больше трюков по JavaScript можно найти здесь
@WebDev_Plus
⚡️ Бесплатное обучение фронтенд-разработке с нуля: JavaScript, React, TypeScript, Nuxt, Next — с поддержкой от наставника
Для тех, кто хочет сократить путь до первой работы или фриланса и не тратить время на самостоятельный поиск инфомрации
На канале Интенсивный JavaScript действующий тимлид и опытный разработчик помогает изучить фронтенд на практических задачах, которые интересно кодить
С 8 октября стартует бесплтаное обучение, где он поможет разобраться в JavaScript и React; для тех, кто с опытом — покажет как работать с Nuxt и Next
Вот план учебных спринтов:
💡 с 8 октября напишете фронтенд для своего вайлдбериса, JS+Nuxt 👩💻👩💻
💡 с 18 октября фронтенд для озона на JS+Next 👩💻👩💻
💡 а затем To-do List 👩💻
Обучение подойдёт, даже если у вас минимальный опыт в программирвоании — всё объясняюе так, чтобы поняла даже бабуля
🔖Ещё этот парень регулярно набирает новичков в свою команду и знает, как попасть на работу джуну или разрабу с опытом
Помимо кода
— пошаговый план обучения современному фронтенду,
— способы поиска клиентов с помощью ИИ
— как взять первый заказ на фрилансе без перегретых бирж.
Подписывайтесь, чтобы участвовать, осталось 56 мест
Учиться самому можно бесконечно, если не знать, куда копать. На интенсивах вы сократите время на поиск инфы и получите понятный план от разработчика, который сам нанимает новичков.
➡️Участвовать бесплатно
Среди всех участников в октябре разыграет годовой доступ к топовому ИИ
Захватывает анимация, которую можно сделать с помощью GSAP всего за несколько строк кода:
@WebDev_Plus
Реализовал этот эффект прокрутки с помощью threejs. Он основан на этом коде
@WebDev_Plus
