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

Автор: @energy_it

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

Реклама на бирже: https://telega.in/c/code_ready
Download Telegram
Значения свойства list-style-type

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

Также существует схожее свойство list-style-image. С помощью него можно задать свой маркер в виде изображения

@code_ready | #шпаргалка #css
🔥34👍12
Вопрос с собеседования

Чем отличается map от set в JavaScript?

Ответ:

Map и Set - это две различные структуры данных в JavaScript, которые предназначены для хранения уникальных значений.

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

set – коллекция уникальных значений, так называемое «множество». Используется для хранения уникальных значений, и не создает 2 и более одинаковых, во многих ЯПах эта структура называется множеством


@code_ready | #собеседование
👍36🔥61
This media is not supported in your browser
VIEW IN TELEGRAM
Загрузка файлов на JavaScript

Пожалуй лучшее решение для интуитивно понятного интерфейса для загрузки файлов, это так называемый "Drag and Drop".
Пользователь может,как просто перетащить файл в выделенное поле, так и выбрать его самостоятельно

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

@code_ready | #обучение #github
👍44🔥17
This media is not supported in your browser
VIEW IN TELEGRAM
Как создать loader на сайт?

Анимация довольно простая, но очень эффективная. Занимает немного строк кода в Html и Css. Всё что нужно, это создать keyframes анимацию и с помощью transform менять размер каждого блока в два раза.

<div class="loader">
<span class="loader__element"></span>
<span class="loader__element"></span>
<span class="loader__element"></span>
</div>

.loader {
display: flex;
align-items: center;
justify-content: center;
}
.loader__element {
border-radius: 100%;
border: 5px solid #555;
margin: calc(5px *2);
}
.loader__element:nth-child(1) {
animation: preloader .6s ease-in-out alternate infinite;}
.loader__element:nth-child(2) {
animation: preloader .6s ease-in-out alternate .2s infinite;}
.loader__element:nth-child(3) {
animation: preloader .6s ease-in-out alternate .4s infinite;}
@keyframes preloader {
100% { transform: scale(2); }}


@code_ready | #обучение #css
👍32🔥151
This media is not supported in your browser
VIEW IN TELEGRAM
Как отслеживать свое рабочее время?

WakaTime — это плагин отслеживания времени для разработчиков. Он интегрируется в текстовые редакторы и IDE, а также в браузеры, такие как Chrome.

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

@code_ready | #плагин
🔥28👍7
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
👍39🔥8
Фильтры к фрагментам элемента

Благодаря свойству backdrop-filter в CSS, вы можете применить фильтры к элементу, который находится за ним, создавая уникальные и привлекательные визуальные эффекты.

Может принимать следующие значения:

none — фильтры не применяются (по умолчанию)
blur (px) — размывает элемент
brightness (%) — изменяет яркость
contrast (%) — изменяет контрастность
grayscale (%) — преобразует элемент в оттенки серого
hue-rotate (градус) — вращает цветной круг элемента
invert (%) — инвертирует цвета
opacity (percentage) — изменяет прозрачность
saturate (%) — изменяет насыщенность цветов
sepia (%) — применяет сепийный фильтр к элементу

👉 @code_ready | #свойство #css
👍39🔥11
Вопрос с собеседования

Что такое деструктуризация в JavaScript?

Ответ:

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

• Кроме того, деструктуризация также позволяет нам обмениваться значениями переменных без использования дополнительной переменной.

В первом примере мы создаем объект с тремя свойствами. После, достаём эти свойства из объекта и присваиваем их переменным с теми же именами.

Во втором примере, в массиве достаем первые два значения без циклов, так же с помощью этой особенности языка.


👉 @code_ready | #собеседование
👍38🔥6👎1
Значения свойства filter

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

@code_ready | #шпаргалка #css
🔥25👍9👎1
This media is not supported in your browser
VIEW IN TELEGRAM
Готовое меню авторизации

Данный код представляет собой простое готовое меню авторизации для вашего сайта на градиентном фоне, написанное при помощи CSS.
Поле ввода пароля автоматически шифруется "*".

<form action="/login"method="post" class="login-form">
<label for="username" class="login-form__label">Username:</label>
<input type="text" id="username" name="username" class="login-form__input">
<label for="password" class="login-form__label">Password:</label>
<input type="password" id="password" name="password" class="login-form__input">
<button type="button" class="login-form__submit">Submit</button>
</form>

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


👉 @code_ready | #обучение #css
🔥43👍25👎6
Свойство 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