CodeRoll | Frontend

Библиотека, которая добавит классные проф анимации в проект 🚀 Motion (она же бывшая Framer Motion) — мощная библиотека для создания анимаций в React и других экосистемах. Что делает её уникальной:

— Простота использования: можно добавить сложные анимации в пару строк кода. — Гибкость: поддерживает кастомизацию для любых сценариев. — Производительность: создана для плавной работы даже в сложных интерфейсах. — Недавно Framer Motion стал независимым проектом под названием Motion и теперь доступен не только для React, но и для других платформ, включая Vanilla JS и Vue.

👀 Посмотреть-потыкать #инструменты

🎨 Дизайн-системы: Создание масштабируемых UI-компонентов 🎨 Дизайн-система — это набор повторно используемых компонентов и стандартов, которые помогают поддерживать единообразие и качество пользовательского интерфейса на протяжении всего проекта. Преимущества использования дизайн-систем: 1) Консистентность Использование единого стиля и компонентов улучшает восприятие бренда и упрощает разработку. 2) Масштабируемость Дизайн-системы позволяют легко добавлять новые элементы и поддерживать большие проекты. 3)Ускорение разработки Готовые компоненты и шаблоны сокращают время разработки и тестирования. Как создать дизайн-систему? Определите основные элементы Начните с типографики, цветовой палитры, сетки и базовых компонентов (кнопки, формы и т.д.). Создайте библиотеку компонентов Используйте инструменты, такие как Storybook или Figma, для документирования и визуализации компонентов. Интегрируйте в проект Реализуйте компоненты в коде с использованием React или других фреймворков, сохраняя их универсальность и настраиваемость. 💡 Полезные ресурсы: Storybook Documentation Atomic Design by Brad Frost Создание дизайн-системы позволяет обеспечить качество и масштабируемость интерфейсов на всех уровнях разработки. Это важный шаг для профессиональной работы над крупными проектами.

🔍 Google — В С Ё ? В 2024 году невозможно найти что-то полезное, просто загуглив: выдача поиска забита мусором из ChatGPT, а все годные материалы не попадают в топы поиска. Хорошо, что есть База Знаний — сеть каналов, в которой команда опытных айтишников постит лучшее из мира IT. Для вашего удобства всё отсортировано по категориям: 👩‍💻 Все языки: https://t.me/main_it_baza 👩‍💻 Frontend: https://t.me/frontend_baza 👣 Backend: https://t.me/backend_baza 🎨 Дизайн: https://t.me/design_baza 📊 Архив: https://t.me/knowledge_baza 🕔 Ссылки будут активны ещё 48 часов, успейте сохранить себе, чтобы не потерять

Оптимизация изображений 👀 Изображения могут значительно замедлять загрузку вашего сайта. Вот несколько инструментов, которые помогут оптимизировать их и улучшить производительность: 🛠 Инструменты: TinyPNG https://tinypng.com Сжимает PNG и JPEG без заметной потери качества. Squoosh https://https://squoosh.app/ От Google, позволяет настроить степень сжатия и получить максимальную гибкость. ImageOptim https://imageoptim.com/mac Для пользователей macOS — оптимизирует изображения прямо на устройстве. Avif.io https://avif.io Конвертация изображений в современный формат AVIF с минимальным весом. 📌 Советы:

Используйте векторные изображения (SVG) для иконок и простых графиков. Настраивайте атрибуты width и height, чтобы избежать смещения при загрузке. Загружайте изображения в разных разрешениях и используйте srcset для адаптивности.

#инструменты

Запустите рекламу в телеграм-каналах с Яндекс Директом Перфоманс-реклама теперь в телеграм-каналах ⚡ Яндекс Директ знает, как привлечь целевую аудиторию 💰👌 Попробовать #реклама yandex.ru О рекламодателе

Вам нравится читать контент на этом канале? Возможно, вы задумывались о том, чтобы купить на нем интеграцию? Следуйте 3 простым шагам, чтобы сделать это: 1) Нажмите на ссылку: Вход 2) Пополняйтесь удобным способом 3) Размещайте публикацию Если тематика вашего поста подойдет нашему каналу, мы с удовольствием опубликуем его.

Hero Patterns Онлайн-коллекция готовых к использованию SVG-фонов, которые легко интегрировать в веб-проекты. Можно быстро находить и использовать стильные и легкие фоны в формате SVG и настраивать их под конкретные проекты 👀Посмотреть поближе #front

Вопрос с собеседования: ❓Что такое инкапсуляция? Инкапсуляция - это механизм, который объединяет данные и методы, манипулирующие этими данными, и защищает и то и другое от внешнего вмешательства или неправильного использования. Когда методы и данные объединяются таким способом, создается объект. Почитать подробнее на Хабре Ставь ❤️если знаешь ответ Если нет — ставь 💅 #web

Более 800гб курсов бесплатно😳 Среди опытных айтишников есть "ревизоры", которые проверяют платные курсы для онлайн-школ перед продажей. Автор этих каналов зарабатывает себе на жизнь таким образом. Но одна школа решила его кинуть, в отместку он слил все материалы в свои каналы. Он собрал всё в три подборки: 👉 Фронтенд 👉 Верстка 👉 Node.JS Сохраните себе эти каналы, чтобы не потерять.

date-fns — удобная JS-библиотека для работы с датами Легковесная библиотека для работы с датами и временем в JavaScript. Она позволяет обрабатывать даты без лишних зависимостей и сложностей, как в других библиотеках (например, Moment.js). В чём удобство библиотеки: ✅Она легкая — модульная структура: импортируешь только нужные функции. ✅Современная — работает с нативными объектами Date. ✅Мощная — более 200 функций для форматирования, парсинга, вычислений, локализации и других операций с датами. ✅Поддержка таймзон — через дополнение date-fns-tz. Подойдёт, когда нужно быстро работать с датами и важна производительность и модульность 👀 Посмотреть поближе #js

👨‍💻 Tabler Icons — легковесные иконки для ваших проектов Набор из более чем 4300 современных SVG-иконок с минималистичным дизайном. Они быстро загружаются, легко настраиваются по размеру, цвету и толщине линий, что делает их отличным выбором для использования в React, Vue и других фреймворках. Набор полностью бесплатный и подходит для коммерческих проектов. Благодаря Tabler Icons интерфейс становится более профессиональным, а интеграция занимает всего несколько минут. 👀 Посмотреть иконки #web

💻 Ты еще не в курсе последних IT-трендов? 🤯 Скорее всего, твои конкуренты уже внедряют новые фишки в проекты! 🚀 Эксклюзив в мире фронтенда, инсайды из мира технологий, лайфхаки для разработчиков – всё это уже ждёт тебя в моём блоге. Не пропусти – будь впереди всех! 👀 🌐 Подписывайся прямо сейчас и прокачай свои навыки быстрее, чем другие напишут console.log('hello world')! ➡️ Перейти в канал ⬅️

Вопрос с собеседования: ❓Что такое архитектурный паттерн MVP? Данный подход позволяет создавать абстракцию представления. Для этого необходимо выделить интерфейс представления с определенным набором свойств и методов. Презентер, в свою очередь, получает ссылку на реализацию интерфейса, подписывается на события представления и по запросу изменяет модель. Признаки презентера: Двухсторонняя коммуникация с представлением; Представление взаимодействует напрямую с презентером, путем вызова соответствующих функций или событий экземпляра презентера; Презентер взаимодействует с View путем использования специального интерфейса, реализованного представлением; Один экземпляр презентера связан с одним отображением. Подробнее — раз, два, три, четыре Ставь ❤️если знаешь ответ Если нет — ставь 💅 #web

Браузер для фронтенд-разработчиков Polypane позволяет одновременно просматривать сайт на разных экранах, тестировать доступность и контрастность, синхронизировать скроллинг и клики между всеми экранами, поддерживает hot-reload для фреймворков вроде React и Vue, а также предоставляет данные по SEO и производительности. 👀 Потыкать браузер #web

Вопрос с собеседования: ❓Расскажите про тег keygen Используется для генерации пары ключей — закрытого и открытого. Когда форма отправляется на сервер, закрытый ключ сохраняется на локальном компьютере, а открытый ключ передается вместе с формой. Сами ключи необходимы для шифрования и расшифровки данных, создания и проверки цифровой подписи. Подробнее — раз, два Ставь ❤️если знаешь ответ Если нет — ставь 💅 #web

Успей ухватить 7 дней бесплатного обучения фронтенд-разработке! 🔥 С нас обучение, практика и помощь с выходом на фриланс.  💻 Чем ты займешься: 1. Верстка с нуля Освоишь HTML и CSS, создашь свой первый лендинг и полноценный веб-сайт. 2. JavaScript и интерактивность Оживишь сайт с помощью JavaScript, а затем поработаешь с Angular и TypeScript. 3. Продакшен и хостинг Подключишь Backend и выложишь сайт в интернет. 4. Адаптивность Сделаешь адаптивную верстку, чтобы сайт выглядел отлично на любом устройстве. 🔥 На каждом этапе тебя поддержит куратор и поможет с заданиями.  Для кого подходит интенсив?  - Тем, кто хочет попрактиковаться в вёрстке сайтов - Тем, кто хочет стабильно и уверенно зарабатывать на вёрстке сайтов - Тем, кто хочет в IT, но не знает, с чего начать 👉 Проскочить на интенсив бесплатно

Вопрос с собеседования: ❓Каким способом, возможно вложить js-объект в localstorage?

localStorage.setItem(‘Object’, JSON.stringify(Object))

Ставь ❤️если знаешь ответ Если нет — ставь 💅 #web

6 инструментов, которые облегчают работу веб-разработчику BundlePhobia Быстро оценивайте размер npm-пакетов, прежде чем добавлять их в проект. Поможет избежать перегрузки приложения лишними зависимостями и держать его быстрым. 👉 https://bundlephobia.com Polypane Браузер для веб-разработчиков с поддержкой всех экранов и устройств в одном окне. Отлично подходит для тестирования адаптивности и доступности. 👉 https://polypane.app CSS Grid Generator Легкий способ создать сложные макеты на CSS Grid за пару минут. Просто укажите нужное количество строк и столбцов — и код готов! 👉 https://cssgrid-generator.netlify.app CodeSandbox Онлайн-редактор для быстрого прототипирования на React, Vue, Angular и других фреймворках. Удобно для тестирования компонентов и мелких проектов. 👉 https://codesandbox.io Sizzy Браузер, заточенный под тестирование на множестве устройств одновременно. Идеален для кроссбраузерной проверки, поддерживает отладку и сразу показывает, как страница выглядит на разных экранах. 👉 https://sizzy.co Can I Use Быстро проверяйте поддержку фич HTML, CSS и JavaScript в разных браузерах. Прекрасный способ убедиться, что ваш код работает везде. 👉 https://caniuse.com Каждый из этих инструментов экономит время и помогает создавать более качественные и производительные веб-приложения👨‍💻 #web

Вопрос с собеседования: ❓Что такое HTTPS? HTTPS (HyperText Transfer Protocol Secure) — расширение протокола HTTP для поддержки шифрования в целях повышения безопасности. Данные в протоколе HTTPS передаются поверх криптографических протоколов SSL или TLS. В отличие от HTTP с TCP-портом 80, для HTTPS по умолчанию используется TCP-порт 443 Почитать подробнее Ставь ❤️если знаешь ответ Если нет — ставь 💅 #web

Запустите рекламу в телеграм-каналах с Яндекс Директом Перфоманс-реклама теперь в телеграм-каналах ⚡ Яндекс Директ знает, как привлечь целевую аудиторию 💰👌 Попробовать #реклама yandex.ru О рекламодателе