Code Ready | Frontend – Telegram

Code Ready | Frontend

20K subscribers

699 photos

313 videos

17 files

468 links

Авторский канал по Frontend разработке.
Ресурсы, гайды, задачи, шпаргалки.
Информация ежедневно пополняется!

Автор: @energy_it

РКН: https://clck.ru/3NJCKs

Реклама на бирже: https://telega.in/c/code_ready

Download Telegram

About

Blog

Apps

Platform

Code Ready | Frontend

20K subscribers

Code Ready | Frontend

👩‍💻

Настраиваемая маска в CSS

Cвойство mask устанавливает изображение, которое используется как слой маски для элемента.

Принимаемые аргументы:

• mask-clip — определяет область, на которую распространяется маска
• mask-size — определяет размер маски
• mask-position — размещает маску относительно элемента
• mask-repeat — указывает, что маска должна повторяться/не повторятся
• mask-composite — представляет собой операцию композиции, используемую для текущего слоя маски с расположенными под ним слоями
• mask-mode — определяет, будет ли ссылка на маску
• mask-origin — задает начало координат маски.

➡️

@code_ready | #свойство #css

Please open Telegram to view this post

VIEW IN TELEGRAM

👍70🔥31

5K views16:15

Code Ready | Frontend

👍5😁3🔥2👎1

4.49K views08:55

Code Ready | Frontend

Что будет в консоли?

Anonymous Quiz

👍18🔥7

1.27K voters4.27K views08:55

Code Ready | Frontend

✅ Вписывание изображения в область

Свойство object-fit позволяет управлять тем, как содержимое вписывается в размеры элемента.

Может принимать значение:
• fill — растягивает изображение на всю область
• contain — встраивает изображение с сохранением соотношений сторон
• cover — встраивает изображение с сохранением соотношений сторон, но обрезает его по размеру области
• none — размер замененного содержимого не изменяется
• scale-down — приведет к меньшему размеру конкретного объекта

➡️

@code_ready | #свойство #css

Please open Telegram to view this post

VIEW IN TELEGRAM

🔥23👍14👎1

4.53K views13:55

Code Ready | Frontend

👩‍💻 Сохраняйте полезную статью на Habr!

Там показывают полезные материалы для веб-разработчиков, такие как:
•

learn.javascript
• MDN Web Docs
• Фронтенд — это не больно
• Eloquent JavaScript
• Frontend masters

➡️

@code_ready | #статья

Please open Telegram to view this post

VIEW IN TELEGRAM

👍15🔥4👎1

4.91K views06:55

Code Ready | Frontend

This media is not supported in your browser

VIEW IN TELEGRAM

Tabler Icons – набор из более чем 5250 бесплатных высококачественных SVG-иконок, которые вы можете использовать в своих проектах

⛓

Ссылочка: https://tabler.io/icons

➡️

@code_ready | #ресурсы

Please open Telegram to view this post

VIEW IN TELEGRAM

🔥31👍7👎1

4.91K views15:55

Code Ready | Frontend

This media is not supported in your browser

VIEW IN TELEGRAM

👩‍💻

Универсальный помощник

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

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

➡️

@code_ready | #плагин

Please open Telegram to view this post

VIEW IN TELEGRAM

🔥32👍14👎1

5.1K views06:55

Code Ready | Frontend

This media is not supported in your browser

VIEW IN TELEGRAM

👨‍💻

Encrypted Password

Красивая анимация скрытия пароля с помощью нажатия на глаз в конце формы, следящего за курсором.

⛓ Ссылочка: https://codepen.io/jh3y/pen/wvNpQJe

➡️

@code_ready | #кодпен

Please open Telegram to view this post

VIEW IN TELEGRAM

👍24🔥16👎1

5.43K views15:29

Code Ready | Frontend

This media is not supported in your browser

VIEW IN TELEGRAM

Animate.css — это библиотека CSS-анимаций. Она предоставляет множество готовых эффектов анимации для элементов веб-страниц.

⛓ Ссылочка https://animate.style/

➡️

@code_ready | #ресурсы

Please open Telegram to view this post

VIEW IN TELEGRAM

👍26🔥9

4.82K views06:55

Code Ready | Frontend

👩‍💻

Свойство column-rule. Вёрстка с применением колонок

При его использовании элементы распределяются по колонкам. Обычно этот приём используется для выравнивания текстов, размещаемых в элементах <p>.

Кроме этого, данные аргументы можно прописать не только в одну линию как на картинке, но и следующим образом:

• column-rule-width — Ширину линии между колонками.
• column-rule-style — Стиль линии (solid, dashed, dotted).
• column-rule-color — Устанавливает цвет линии.

➡️

@code_ready | #свойство #css

Please open Telegram to view this post

VIEW IN TELEGRAM

👍27🔥10

4.51K views14:05

Code Ready | Frontend

👩‍💻

Вопрос с собеседования

Как работает оператор new в JavaScript?

Ответ:

Оператор new используется в JavaScript для создания новых объектов. Он вызывает конструктор функции, создает новый объект и возвращает его.

Когда мы используем оператор new перед вызовом функции, происходит следующее:

• Создается новый пустой объект.
• Этот объект наследует свойства и методы из прототипа функции.
• Этот объект передается в качестве контекста вызова функции (this внутри функции указывает на новый объект).
• Если функция не возвращает другой объект, то новый объект возвращается автоматически.

➡️

@code_ready | #собеседование

Please open Telegram to view this post

VIEW IN TELEGRAM

🔥25👍5

4.23K views06:29

Code Ready | Frontend

This media is not supported in your browser

VIEW IN TELEGRAM

👩‍💻

Адаптивный текст на 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

Please open Telegram to view this post

VIEW IN TELEGRAM

🔥19👎4👍3

5K views15:06

Code Ready | Frontend

📱

Продвинутые Комментарии

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

➡️

@code_ready | #плагин

Please open Telegram to view this post

VIEW IN TELEGRAM

👍32🔥6

5.1K views06:29

Code Ready | Frontend

This media is not supported in your browser

VIEW IN TELEGRAM

👨‍💻

Sliding Sign In Sign Up Page

Концепт формы авторизации и регистрации с интересной анимацией переключения. Написан на Html, Css и немного JS.

⛓ Ссылочка: https://codepen.io/code_ready/pen/OJeRZvR

➡️

@code_ready | #кодпен

Please open Telegram to view this post

VIEW IN TELEGRAM

🔥22👍10👎1

6.08K views14:55

Code Ready | Frontend

👍7🔥1

5.33K views08:55

Code Ready | Frontend

Что будет в консоли?

Anonymous Quiz

👍12🔥7

1.27K voters5.04K views08:55

Code Ready | Frontend

📱 Создание сайта с нуля + адаптивная вёрстка по макету

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

Всем советую к просмотру!

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

➡️

@code_ready | #ресурсы

Please open Telegram to view this post

VIEW IN TELEGRAM

👍25🔥9😁2

5.85K views18:03

Code Ready | Frontend

👩‍💻

Зеркальное отражение текста

Основным свойством для создание данного эффекта является 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

Please open Telegram to view this post

VIEW IN TELEGRAM

👍32🔥15

5.12K views09:29

Code Ready | Frontend

📱

Вопрос с собеседования

Как использовать таймеры в 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 | #техсобес

Please open Telegram to view this post

VIEW IN TELEGRAM

🔥31👍10

4.85K views09:00

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

Please open Telegram to view this post

VIEW IN TELEGRAM

👍39🔥7

4.93K viewsedited 06:35