Code Ready | Frontend
20.1K subscribers
687 photos
308 videos
17 files
459 links
Авторский канал по Frontend разработке.
Ресурсы, гайды, задачи, шпаргалки.
Информация ежедневно пополняется!

Автор: @energy_it

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

Реклама на бирже: https://telega.in/c/code_ready
Download Telegram
Свойство direction в CSS

С помощью свойства direction, вы можете изменить направление текста.

Принимает следующие значения:

ltr — слева направо (по умолчанию)
rtl — справа налево
inherit — наследует значение от родительского элемента

Применяется к элементам, в которых важно учитывать направление текста, например, при работе с разными языками.

👉 @code_ready | #свойство #css
👍28🔥8
Какого метода строки не существует в JavaScript?
Anonymous Quiz
22%
charAt
11%
trim
56%
merge
11%
includes
👍21🔥5
This media is not supported in your browser
VIEW IN TELEGRAM
Конвертор валют на JavaScript

Данный код представляет собой конвертации между рублями, долларами и евро.
Задействован APi ЦБ РФ, для актуального курса валют.

<input type="number" id="amount" placeholder="Введите сумму">
<select id="from">
<option value="RUB">RUB</option>
<option value="USD">USD</option>
<option value="EUR">EUR</option>
</select>
<select id="to">
<option value="USD">USD</option>
<option value="EUR">EUR</option>
<option value="RUB">RUB</option>
</select>
<button onclick="convert()">Конвертировать</button>
<p id="result"></p>

JavaScript код оставлю в комментариях под этим постом, ставь реакцию и пользуйся) 👍🔥


👉 @code_ready | #обучение #js
👍40🔥28
Вопрос с собеседования

Что такое функция setTimeout в JavaScript?

Ответ:


setTimeout — это функция, которая позволяет отложить выполнение функции на определённое время. Функция будет вызвана один раз по истечении этого интервала.

Она принимает два обязательных аргумента: функцию, которую нужно выполнить, и время задержки в миллисекундах. Также можно передать дополнительные аргументы, которые будут переданы в вызываемую функцию.

В примере на картинке, мы задаем чтобы функция выполнилась через 5 секунд.

Однако, выполнение функции, переданной в setTimeout, отменяется с помощью clearTimeout, и сообщение "This will not be logged" никогда не появится в консоли.


👉 @code_ready | #собеседование
👍34🔥6
Псевдокласс ::firstletter

Данный псевдокласс позволяет стилизовать первую букву текстового элемента. Он часто используется для создания инициалов или других типографических эффектов.

Принимаемые свойства:

color — цвет первой буквы
background-color — цвет фона
font-family — шрифт первой буквы
font-size — размер шрифта
font-weight — жирность шрифта
line-height — высота строки
text-decoration — текстовое оформление (подчеркивание, перечеркивание)
text-transform — преобразование текста (заглавные буквы, прописные буквы)
margin — внешние отступы
padding — внутренние отступы
border — граница первой буквы
float — Выравнивание (например: слева, справа).
text-shadow — тень текста

👉 @code_ready | #псевдокласс #css
👍49🔥12
This media is not supported in your browser
VIEW IN TELEGRAM
Создание анимированного фона в тексте

Для создания красивого фона для текста используется свойство background-image, которое принимает значение в виде фото, либо ссылки на любое фото и видео через url()

• color: transparent — делает текст прозрачным. Это необходимо для того, чтобы текст был видимым только за счет фонового изображения.

• -moz-background-clip и -webkit-background-clip — специальные свойства для других браузеров, которые ограничивают отображение фонового изображения только областью текста.

h1 {
font-family: sans-serif;
text-align: center;
font-size: 80px;
font-weight: 800;
text-transform: uppercase;
background-image: url(https://i.giphy.com/media/v1.Y2lkPTc5MGI3NjExYTlmN2h0MnhhNHFqcDFwaWYxMXd0NjlrZTE0NDBoY3N0M2hiNnY5ayZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/XQsEy59pNgaVu6QlGi/giphy-downsized-large.gif);
background-size: cover;
color: transparent;
-moz-background-clip: text;
-webkit-background-clip: text;
}


👉 @code_ready | #обучение #css
👍46🔥22
0604.gif
5.1 MB
Сжатие кода

Плагин Better Minify позволяет минифицировать html, css, js и многие другие языки.

Выбранный файл при команде minify files создает в текущей директории второй файл с названием "имя файла.min.расширение"

👉 @code_ready | #плагин
👍30🔥13😁7👎5
This media is not supported in your browser
VIEW IN TELEGRAM
Адаптивные таблицы

Пользователи сайта могут иметь разную ширину экрана, так как же дать всем удобный доступ к информации из таблицы?

Для таких случаев используют адаптивное изменение таблицы, при маленьком экране она становится вертикальной, при широком горизонтальной

😸 Готовый код для этого примера, я оставлю в моем репозитории на GitHub

👉 @code_ready | #github
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥33👍9👎2
Свойство z-index

С помощью свойства z-index, можно изменять порядок наложения элементов друг на друга по оси z.

Принимает следующие значения:

auto — не имеет z-индекса (по умолчанию)
number — целое число, которое задает порядок наложения элементов. Чем больше, тем выше других элементов с меньшим z-индексом.
inherit — наследует значение от родительского элемента
initial — устанавливает значение по умолчанию, заданное в браузере.

Применяется к элементам, которые имеют свойство position со значением, отличным от static, и которые перекрывают друг друга.

👉 @code_ready | #свойство #css
🔥26👍12😁3👎2
Вопрос с собеседования

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

Ответ:

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

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

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

В примере кода мы создаем новый объект с помощью new, так как у нас есть функция-конструктор MyFunction


👉 @code_ready | #собеседование
👍38🔥5👎2
Методы Map в JavaScript

map – коллекция пар ключ-значение, ключи могут быть любого типа данных. Используется для хранения пар ключ-значение,где у каждого элемента есть свой ключ, который не может повторяться

👉 @code_ready | #шпаргалка
🔥27👍14
Псевдоэлемент ::first-line

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

Принимаемые свойства:

color — цвет первой строки
background-color — цвет фона
font-family — шрифт первой строки
font-size — размер шрифта
font-weight — жирность шрифта
line-height — высота строки
text-decoration — текстовое оформление (подчеркивание, перечеркивание)
text-transform — преобразование текста (заглавные буквы, прописные буквы)
word-spacing — расстояние между словами
letter-spacing — расстояние между буквами
text-indent — отступ первой строки

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


👉 @code_ready | #псевдоэлемент #css
👍35🔥10
Фильтры для картинок

Свойство filter в CSS позволяет применять различные изменения на картинки.

Атрибут contrast изменяет контрастность картинки . Он принимает значения в: %, em, rem, vm, vh, px.
Атрибут grayscale изменяет степень серого в картинке. Он принимает значения в процентах.

Это свойство имеет еще несколько атрибутов, они будут описаны в следующих постах.

👉 @code_ready | #свойство #css
👍35🔥10
Шпаргалка по работе с DOM

Данная шпаргалка предоставляет основные команды для выбора, изменения и управления элементами веб-страницы в JavaScript. Включает в себя операции с текстовым и HTML-содержимым.

👉 @code_ready | #шпаргалка #js
👍43🔥15
This media is not supported in your browser
VIEW IN TELEGRAM
Создание кнопки для вырезания текста

Задача простая — вырезать текст из какого-то блока нажатием кнопки. Довольно таки удобно, вместо выделения и копирования просто нажать одну кнопку и нужный текст уже в буфере обмена.

 <textarea type="text" class="content"></textarea>
<button type="button" class="cut">Вырезать</button>

// Находим кнопку с классом "cut" и добавляем обработчик события "click"
document.querySelector(".cut").addEventListener("click", () => {
// Получаем текст из элемента с классом "content"
const txt = document.querySelector(".content").value;
// Записываем текст в буфер обмена с помощью Clipboard API
navigator.clipboard.writeText(txt).then(() => {
// После успешной записи текста в буфер обмена очищаем поле ввода
document.querySelector(".content").value = "";});
});


👉 @code_ready | #обучение #js
👍36🔥9
This media is not supported in your browser
VIEW IN TELEGRAM
Полезные горячие клавиши VSCode

Shift + Del — удаляет строку целиком. Не нужно будет выделять мышкой всю строку и потом нажимать Backspace.

Ctrl + L — выделяет всю строку целиком. Теперь копипастить еще проще.

👉 @code_ready | #клавиши
🔥53👍27👎7
Как работает JSON.parse() в JS?

Функция JSON.parse: Преобразует JSON-строку (текст, форматированный в соответствии с текущим стандартом) в объект или значение JavaScript

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

👉 @code_ready | #функция #js
👍47🔥11👎1
0613(3).gif
2 MB
Строим диаграммы прямо в VS Code

Плагин Draw.io Integration позволяет строить множество различных диаграмм, связанных с вашим кодом рядом с проектом.

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

👉 @code_ready | #плагин
👍49🔥11
This media is not supported in your browser
VIEW IN TELEGRAM
Эффект размытия фона при наведении

Если вы хотите добавить интересный эффект при наведении на картинку на вашем веб-сайте, то эффект размытия фона - лучшее решение.

Это позволяет сфокусировать внимание пользователя на картинке и сделать ее более выделенной.

😸 Готовый код для реализации этой анимации, я оставлю в моем репозитории на GitHub

👉 @code_ready | #github
Please open Telegram to view this post
VIEW IN TELEGRAM
👍28🔥8
This media is not supported in your browser
VIEW IN TELEGRAM
Создание анимации кадрирования фото

У нас есть два отличных свойства: object-fit и object-position. С их помощью можно изменять размеры изображения, не влияя на соотношение его сторон.

<input type="checkbox"/> <br>
<img src="img.png" alt="img"/>

img {
width: 330px;
height: 200px;
transition: 2s;
}
input:checked + br + img {
width: 500px;
height: 400px;
object-fit: cover;
object-position: left-top;
transition: width 2s, height 3s;
}


👉 @code_ready | #обучение #css
👍25🔥7👎1