Code Ready | Frontend

📱 Псевдоэлемент ::marker Данный псевдоэлемент упрощает процесс стилизации маркеров списка, что делает его удобным инструментом для создания уникального и привлекательного дизайна списков. Принимаемые свойства: • content — можно выбирать иконку, как в примере • color — цвет первой строки • background-color — цвет фона • font-family — шрифт первой строки • font-size — размер шрифта • font-weight — жирность шрифта • line-height — высота строки • text-decoration — текстовое оформление (подчеркивание, перечеркивание) • text-transform — преобразование текста (заглавные буквы, прописные буквы) • word-spacing — расстояние между словами • letter-spacing — расстояние между буквами • text-indent — отступ первой строки ➡️ @code_ready | #псевдоэлемент #css

📱 Вопрос с собеседования Как использовать таймеры в JavaScript? Ответ: 1. setTimeout — для однократного выполнения кода с задержкой. Принимает функцию и задержку в миллисекундах.

setTimeout(() => {
  console.log('This message is displayed after 2 seconds');
}, 2000);

2. setInterval — для многократного выполнения кода с фиксированным интервалом. Принимает функцию и интервал в миллисекундах.

setInterval(() => {
  console.log('This message is displayed every 3 seconds');
}, 3000);

3. clearTimeout — отменяет выполнение функции, запланированной через setTimeout. Требует идентификатор таймера, возвращаемый setTimeout.

const timeoutId = setTimeout(() => {
  console.log('This message will not be displayed');
}, 5000);
clearTimeout(timeoutId);

4. clearInterval — останавливает выполнение функции, запланированной через setInterval. Требует идентификатор таймера, возвращаемый setInterval.

const intervalId = setInterval(() => {
  console.log('This message will stop displaying after 9 seconds');
}, 1000);
setTimeout(() => {
  clearInterval(intervalId);
}, 9000);

5. requestAnimationFrame — синхронизирует выполнение функции с обновлением экрана. Используется для создания плавных анимаций.

function animate() {
  console.log('Animation frame');
  requestAnimationFrame(animate);
}
requestAnimationFrame(animate);

➡️ @code_ready | #техсобес

👩‍💻 Зеркальное отражение текста Основным свойством для создание данного эффекта является transform, он позволяет трансформировать элементы различными способами. В нашем коде есть две главные строки, давайте разберем их:

• transform: scaleY(-1) — Создает зеркальное отражение текста по вертикальной оси, переворачивая его. • margin-top: -18px — Сдвигает отраженный текст вверх, ближе к оригинальному тексту, чтобы создать иллюзию отражения на поверхности.

Также не забывайте про html код, там не просто нужно добавить текст, а создать 2 отдельных параграфа, первый для оригинального текста, второй для отзеркаленного.

<div class="text-reflection">
  <p>Code Ready</p>
  <p class="reflection">Code Ready</p>
</div>

➡️ @code_ready | #гайд #css

📱 Создание сайта с нуля + адаптивная вёрстка по макету В данном видео вы создадите сайт на HTML и SCSS с нуля. Также там объяснят методологию БЭМ простым языком и покажут на реальном примере, как делается адаптивная верстка сайта. Всем советую к просмотру!

Ссылка на видео: YouTube 🖤

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

👋 Ребятки! Кто очень хорошо владеет Html, Css и особенно JavaScript, умеет писать веб-приложения, есть небольшая подработка, (долгосрочное оплачиваемое сотрудничество). Мне бы найти таких людей... Кому интересно, отпишие мне в личку https://t.me/energy_it

👨‍💻 Sliding Sign In Sign Up Page Концепт формы авторизации и регистрации с интересной анимацией переключения. Написан на Html, Css и немного JS. ⛓ Ссылочка: https://codepen.io/code_ready/pen/OJeRZvR ➡️ @code_ready | #кодпен

Для тех кто просил, недавно был создан новый канал с мемами для айтишников ⬇️ https://t.me/+MfN2Mi_VA8c1MWYy

📱 Продвинутые Комментарии Better Comments — это расширение для VSCode, способствующее улучшению структурирования комментариев в вашем коде. Оно предлагает возможность категоризировать комментарии и выделять их разными цветами, что поможет вам почеркнуть важные моменты, задачи или замечания. ➡️ @code_ready | #плагин

👩‍💻 Адаптивный текст на CSS Адаптивный дизайн обеспечивает оптимальное отображение на различных устройствах, включая мобильные телефоны и планшеты. • Метатег viewport, задающийся внутри тега <head> позволяет браузеру правильно масштабировать изображение под ширину экрана. • Медиавыражения же (media) позволяют проверить ширину страницы, и в зависимости от заданного условия применить вложенный css

@media screen and (min-width: 600px) {
    .wrapper {
      display: grid;
      grid-template-columns: 1fr 2fr; 
      column-gap: 5%;
       }
     }

➡️ @code_ready | #адаптив #css

🎓 Доступ в к крупнейшей коллекции курсов и книг в телеграмме! Заходите, скачивайте в один клик нужный курс, книгу или лекцию и начинайте учиться: >Frontend (98гб курсов) >Java (23гб видео) >Python (96гб видео) >Базы данных (50гб курсов) >C# (45гб курсов) >Английский (101гб курсов) >PHP (43гб видео) >Мобильная разработка (22гб курсов) >Go ( 132гб видео) >Rust (35 гб видео) >SQL (43гб видео) >MySQL (31гб видео) >Другое (1679 гб видео) ⚡️ Огромный кладезь знаний в одном месте: @datacours

👩‍💻 Вопрос с собеседования Как работает оператор new в JavaScript? Ответ: Оператор new используется в JavaScript для создания новых объектов. Он вызывает конструктор функции, создает новый объект и возвращает его. Когда мы используем оператор new перед вызовом функции, происходит следующее: • Создается новый пустой объект. • Этот объект наследует свойства и методы из прототипа функции. • Этот объект передается в качестве контекста вызова функции (this внутри функции указывает на новый объект). • Если функция не возвращает другой объект, то новый объект возвращается автоматически. ➡️ @code_ready | #собеседование

👩‍💻 Свойство column-rule. Вёрстка с применением колонок При его использовании элементы распределяются по колонкам. Обычно этот приём используется для выравнивания текстов, размещаемых в элементах <p>. Кроме этого, данные аргументы можно прописать не только в одну линию как на картинке, но и следующим образом: • column-rule-width — Ширину линии между колонками. • column-rule-style — Стиль линии (solid, dashed, dotted). • column-rule-color — Устанавливает цвет линии. ➡️ @code_ready | #свойство #css

Рекомендуем канал Java | Фишки и трюки! ⌨️ Ответы на вопросы с собеседований ⌨️ Разбор полезных классов и методов ⌨️ Заковыристые тесты на знание Java ⌨️ Полезные Java либы и фреймворки И многое другое! 👉 Присоединиться

Animate.css — это библиотека CSS-анимаций. Она предоставляет множество готовых эффектов анимации для элементов веб-страниц. ⛓ Ссылочка https://animate.style/ ➡️ @code_ready | #ресурсы

👨‍💻 Encrypted Password Красивая анимация скрытия пароля с помощью нажатия на глаз в конце формы, следящего за курсором. ⛓ Ссылочка: https://codepen.io/jh3y/pen/wvNpQJe ➡️ @code_ready | #кодпен

Frontend теперь в телеграм! Собрали крупные русскоязычные каналы, где вы найдете всю информацию о последних трендах и лучших практиках: Логово Верстальщика — научит верстать продающие сайты. Node.JS — поможет узнать все тонкости и секреты JavaScript и его фреймворков. Frontender's notes — советы и полезные приемы для каждого разработчика.

👩‍💻 Универсальный помощник Error Lens — мощный плагин, который помогает улучшить вашу производительность при разработке, выявляя ошибки и предупреждения прямо в коде.

Он мгновенно выделяет ошибки, предупреждения и другие типы сообщений об ошибках прямо в редакторе, делая их более заметными и обеспечивая быстрый доступ к информации о них.

➡️ @code_ready | #плагин

Tabler Icons – набор из более чем 5250 бесплатных высококачественных SVG-иконок, которые вы можете использовать в своих проектах ⛓ Ссылочка: https://tabler.io/icons ➡️ @code_ready | #ресурсы