CodeRoll | Frontend

📶 С 1 декабря для граждан РФ открыт доступ к платным материалам по программированию Вот отсортированные базы с тонной материала(книги, курсы, ресурсы и гайды). Выбирай своё направление:: 👩‍💻 Frontend 👩‍💻 PHP ⚙️ Backend 👩‍💻 Моб. Dev 📱 GitHub 👩‍💻 GameDev 🤓 Всё айти 👩‍💻 DevOps 👩‍💻 Python 🖥 Data Science 👩‍💻 Java 🐞 Тестирование 👩‍💻 C# 🤔 Хакинг & ИБ 👩‍💻 С/С++ 📱 Маркетинг 🖥 SQL 🖥 Дизайн 👩‍💻 Golang 👣 Rust Скачивать ничего не нужно — все выложили в Telegram с доступом по ссылке

Codepip Сборник мини-игр для изучения веб-технологий: Flexbox, Grid, CSS-анимации и многое другое. 👀 Потыкать игры #тренажёры

⚡️ Бесплатное обучение фронтенд-разработке с нуля с поддержкой от наставника Опыт в программировании не нужен. На канале Интенсивный JavaScript действующий тимлид и опытный разработчик помогает изучить фронтенд на практических задачах, которые интересно кодить С 3 декабря стартует бесплтаное обучение, где он на практике поможет разобраться в основах — HTML/CSS и JavaScript, а также попробовать три фреймворка — Vue, Angular и React Вот план обучения: 💡 с 3 декабря напишете фронтенд для сервиса доставки 💡 с 10 декабря свой киносайт 💡 а с 17 по 21 декабря свою доску объявлений Обучение подойдёт, даже если у вас нет опыта в программировании — всё объясняют так, чтобы поняла даже ваша бабуля 🔖Ещё этот парень регулярно набирает новичков в свою команду и знает, как трудоустроиться и джуну, и разрабу поопытнее Помимо работы с кодом он даст пошаговый план изучения всего, что нужно современному фронтенду. Поделится способом трудоустройства с помощью ИИ. Расскажет, как взять свой первый заказ на фрилансе без фриланс-бирж с огромной конкуренцией Подписывайтесь, чтобы участвовать бесплатно Учиться самостоятельно можно бесконечно, если не знать, куда копать. На интенсиве сократите время на поиск информации и получите пошаговый план от разработчика, который нанимает новичков в команду 👉Участвовать бесплатно Первые уроки уже доступны

Вопрос с собеседования: ❓В чем разница между HTML и XHTML? — XHTML - это приложение XML, которое является довольно строгим языком с угловыми скобками. — HTML - это приложение SGML, которое является гораздо менее строгим языком с угловой скобкой. — (XML также является применением SGML.) При написании кода XHTML придерживаются того же синтаксиса, который характерен для HTML. При этом разница между HTML и XHTML состоит в наборе некоторых обязательных правил. Правила XHTML следующие. // Все теги и их атрибуты должны быть набраны в нижнем регистре (строчными символами). // Значения любых атрибутов необходимо заключать в кавычки. // Требуется закрывать все теги, даже такие, которым не сопоставлен закрывающий тег. // Должна соблюдаться правильная вложенность тегов. // Нельзя использовать сокращенные атрибуты тегов. // Вместо атрибута name следует указывать id. // Следует определять DTD (document type definition, описание типа документа) с помощью элемента DOCTYPE. Подробнее с примерами: http://htmlbook.ru/xhtml/sintaksis-xhtml Ставь ❤️если знаешь ответ Если нет — ставь 💅

Тренируем регулярки на Regex101 На Regex101 вы сможете тестировать регулярные выражения в реальном времени, разбирать их структуру с подробными объяснениями каждой части, а также находить и исправлять ошибки благодаря встроенным подсказкам. Ресурс поддерживает синтаксисы для популярных языков программирования, таких как JavaScript, Python и PHP, и позволяет легко проверять ваши регулярки на примерах. Это идеальный инструмент как для новичков, так и для опытных разработчиков, желающих упростить работу с текстовыми шаблонами. 👀 Перейти к сервису #тренажёр

Recharts: простая визуализация данных для React 👩‍💻 Recharts — библиотека, которая поможет добавить графики и диаграммы в ваш проект. Легко подключается, настраивается и отлично работает с React. Хотите показать тренды, сравнить показатели или сделать крутой аналитический дашборд? С этой библиотекой всё это можно сделать за пару строк кода. Выбирайте линейные графики, круговые диаграммы, гистограммы или что-то своё. 👀 Посмотреть библиотеку #инструменты

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

Вопрос с собеседования: ❓Что такое Secure ("безопасные") и HttpOnly cookies? "Безопасные" (secure) cookie отсылаются на сервер только если запрос выполняется по протоколу SSL и HTTPS. Однако важные данные никогда не следует передавать или хранить в cookies, поскольку сам их механизм весьма уязвим в отношении безопасности, а флаг secure никакого дополнительного шифрования или средств защиты не обеспечивает. Начиная с Chrome 52 and Firefox 52, незащищенные сайты (http:) не могут создавать куки с флагом secure. Куки HTTPonly не доступны из JavaScript через свойства Document.cookie, и через XMLHttpRequest и Request API, что помогает избежать межсайтового скриптинга (XSS). Устанавливайте этот флаг для тех cookie, к которым не требуется обращаться через JavaScript. В частности, если куки используются только для поддержки сеанса, то в JavaScript они не нужны, так что в этом случае следует устанавливать флаг HttpOnly.

Set-Cookie: id=a3fWa; Expires=Wed, 21 Oct 2015 07:28:00 GMT; Secure; HttpOnly

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

Что такое атрибут key? Для чего он нужен? Key помогает React определять, какие элементы были изменены, добавлены или удалены. Key нужен для лучшего определения порядка элементов в списке. Key всегда должен присваивается на верхнем уровне: Правильно:

const howUseKey = () => {
  const array = [1, 2, 3];
  return (
    <div>
      {array.map((item) => (
        <div key={item}>{item}</div>
      ))}
    </div>
  );
};

Неправильно (Приглядитесь к its a trap):

const howNotUseKey = () => { 
 const array = [1, 2, 3];
  return (
    <div>
      {array.map((item) => (
        <div className="its a trap">
          <div key={item}>{item}</div>
        </div>
      ))}
    </div>
  );
};

Если использовать индекс массива или другие значения которые могут меняться, то мы можем получить неприятные баги. Лучше всего использовать уникальный id объекта. Более подробно про key можете прочитать здесь

Как юридически защитить продукт своей компании или стартапа? Если вы: ✔️ разрабатываете ПО, базы данных; ✔️ Работаете сами на себя; ✔️ Учавствуете в госзакупках ✔️ выходите на зарубежные рынки ✔️ привлекаете инвестиции ✔️ Изобретаете, продаете, покупаете. Неважно… То рано или поздно вашу идею и разработки могут просто украсть 🏴‍☠️ пираты или конкуренты! Поэтому так важно: ✅регистрировать товарный знак; ✅регистрировать фирменный стиль; ✅депонировать свои продукты и разработки. ☝🏻Как все это сделать? 🫠 Подписаться на канал БРРРЕНДЫ и быть в безопасности 👉 https://t.me/brrrands

Библиотека, которая добавит классные проф анимации в проект 🚀 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