СУПЕРФИШКА в VS Code 😜

Создавайте файл и его папки одним шагом

➡️ @byFrontDeveloper | #ресурсы

Анимация для веба 🔝

Animista — это онлайн-инструмент для создания и предварительного просмотра CSS-анимаций. Он предоставляет широкий выбор анимационных эффектов, которые можно легко применить к элементам веб-страницы.

☑️ На сайте можно настроить различные параметры анимаций, такие как скорость, направление и задержка, а затем сгенерировать готовый CSS-код для использования в своих проектах.

📑 @byFrontDeveloper | #cтатьи

Наткнулся тут на одну годную штуку — Mocky называется 🥳

В общем, если нужно быстро сгенерить какой-нибудь фейковый ответ от сервера — вот это как раз то, что надо

Заходишь на сайт, вбиваешь свой JSON-ответ, настраиваешь заголовки, коды ответов — и вуаля, у тебя уже есть URL, который можно дёргать как настоящий API

✓ Эндпоинты GET/POST/PUT/DELETE
✓ Настройка заголовков и ответов
✓ Без регистрации и бесплатно

➡️ @byFrontDeveloper | #ресурсы

Красивый эффект при наведении всего за несколько шагов: :hover, CSS anchor positioning, :has и ни единого JS-кода

🔎 Посмотреть код и поиграть можно здесь

➡️ @byFrontDeveloper | #ресурсы

Как создать сайт. Комикс-путеводитель по HTML, CSS и WordPress.

Автор: М.: Манн, Иванов и Фербер
Год издания: 2019

⬇️ Скачать книгу

➡️ @byFrontDeveloper | #книги

☃️ Адаптивные SVG на практике

Расширьте свои знания о работе с SVG, чтобы получить масштабируемый и адаптивный интерфейс.

🔜 Читать

➡️ @byFrontDeveloper | #cтатьи

Супер HTML шпаргалка 🖥

Сохраняй и делись с друзьями!

➡️ @byFrontDeveloper | #cтатьи

Апгрейдни свой гитхаб за пару секунд!

GitHub Profile Generator может быстро и легко создать красиво оформленный профиль.

Инструмент незаменим для разработчиков, студентов и тех, кто ищет работу.❤️

⛓Ссылка: тык

➡️ @byFrontDeveloper | #ресурсы

МЕГА-коллекция кастомных хуков для React.

Сэкономит вам много времени при разработке!

✓ 50 готовых хуков
✓ С примерами кода
✓ Совместимы с TypeScript

🔜 http://usehooks.com

➡️ @byFrontDeveloper | #ресурсы

Превращай изображения в КОД с помощью этого ИИ! 💻

► Бесплатно
► Измени результат по своему вкусу
► Экспортируй в различные фреймворки: React, Vue, Angular, Svelte и другие

Код копируется в один клик, без регистрации и премиум аккаунтов

⛓Ссылка: тык

➡️ @byFrontDeveloper | #ресурсы

Принёс вам очередную крутую тулзу — Unlighthouse

Это инструмент, который сканирует весь ваш сайт за пару минут, используя Google Lighthouse. Он помогает находить проблемы с производительностью, доступностью и SEO на всех страницах, а не только на главной.

Автоматически находит URL-адреса, визуализирует состояние сайта, имеет современные UI и полезные интеграции

Запустите это:

npx unlighthouse --site <ваш-сайт>

👉 https://next.unlighthouse.dev/

➡️ @byFrontDeveloper | #ресурсы

Крутое видео — Некоторые функции Dev Tools, на которые вы, возможно, раньше не обратили особого внимания

➡️ @byFrontDeveloper

Вопросы для интервью по JS 🖥

Сохраняй для подготовки!

➡️ @byFrontDeveloper | дать буст

👩‍💻 Vue.js 3 Design Patterns and Best Practices

Сайт предоставляет перевод книги, посвященной лучшим практикам и шаблонам проектирования в Vue.js 3. В книге рассматриваются основные принципы работы с фреймворком, инструменты разработки (Pinia, Router, Vite и др.) и эффективные подходы к созданию веб-приложений

Книга ориентирована на разработчиков, знакомых с Vue и JavaScript

⛓ Ссылка: https://vue-faq.org/ru/book/

➡️ @byFrontDeveloper | дать буст

Принёс вам очередной интересный сайт — CodeAnalogies

Вместо сухих объяснений здесь каждый концепт разбирается через забавные аналогии. Например, CSS позиционирование — как создание мороженого, а JavaScript переменные — как погрузка в грузовик.

Интерактивные уроки, иллюстрации, необычные сравнения — учиться становится не только проще, но и веселее 🦍

Держите: https://www.codeanalogies.com/

➡️ @byFrontDeveloper | дать буст

91 Вопросы и ответы на собеседовании по Css

🛑Что такое justify-content? (Свойство выравнивает элементы по главной оси: flex-start, flex-end, center и др.).
🛑Как работает правило @ media only screen and (max-width: 600px)?
🛑Как создать контейнер сетки? (Используйте display: grid; на элементе-контейнере).

➡️ @byFrontDeveloper | дать буст

➡️ @byFrontDeveloper | дать буст

Шпаргалка по Linux

➡️ @byFrontDeveloper | дать буст

Как создать плавающий ярлык ввода с помощью HTML и CSS | CSS Tutorial

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

📲 Cмотреть курс: тут

➡️ @byFrontDeveloper | дать буст

Как клонировать сайт

➡️ @byFrontDeveloper | дать буст