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
Обрезка элемента по заданной области

Для создания красивого современного дизайна часто возникает потребность обрезать фотографии на сайте. А ведь они могут меняться по несколько раз в день!

Очень кстати, приходится CSS свойство clip-path, позволяющее изменять форму изображений как угодно.

Основными значениями являются:
polygon() — для фигуры,заданной по точкам
inset (верх, право, низ,лево) — для прямоугольной области с внутренней тенью
circle (радиус, центр круга) — для скругления области
ellipse (радиусы по x и y) — для создания эллиптической области обрезки

@code_ready | #свойство #css
👍51🔥10😁1
This media is not supported in your browser
VIEW IN TELEGRAM
Анимация текста в пару строк

С помощью библиотеки cssanimation, можно создать интересные анимации на свой текст.
Подключаем библиотеку через тег <link>, и указываем значения анимации в классе нужного тега, прямо в html.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
<h1 class="welcome-text animate__animated animate__lightSpeedInLeft">Добро пожаловать!</h1>
Css код для стилизации текста, оставлю в комментариях.


@code_ready | #обучение #css
👍31🔥11😁2
0507 (1)(6).gif
2.4 MB
Создание CSS-шаблона для html

eCSStractor - это плагин для VSCode, который помогает разработчикам извлекать CSS-стили из HTML-файлов. Он предоставляет инструменты для автоматического извлечения стилей из HTML-кода и создания соответствующих CSS-правил.

@code_ready | #плагин
👍51🔥15
👋🏼 Всем привет! Я автор данного канала, и на днях я решил создать абсолютно новый канал про дизайн — @time_design. Почему про дизайн? Не знаю, так получилось 😁. Но в планах создать в мае ещё 1 канал для fullstack разработчиков (общее IT) и примерно в июне наконец-то про бэкенд. 👩‍💻

Но пока что, подписывайтесь на мой новый авторский
✈️ канал @time_design.

Там я делюсь полезными обучениями в таких программах, как Figma, Photoshop, Illustrator, Blender3D, рассказываю про актуальные тренды, фишки и новости в мире дизайна 🕘
Please open Telegram to view this post
VIEW IN TELEGRAM
👍30🔥9👎5
This media is not supported in your browser
VIEW IN TELEGRAM
Переключение языка страницы

Данный код представляет собой реализацию переключения языка страницы, код упрощен с благодаря библиотеки JQuery.
Устанавливается она с помощью тега script по ссылке.

<h1 data-i18n="title"></h1>
<p data-i18n="description"></p>
<button class="lang-button" data-lang="en">EN</button>
<button class="lang-button" data-lang="ru">RU</button>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

const translations = {
en: {
title: "Welcome to my website!",
description: "This is a simple website example.",},
ru: {
title: "Добро пожаловать на мой сайт!",
description: "Это простой пример сайта.",},};
function setLanguage(lang) {
$("[data-i18n]").each(function () {
const key = $(this).data("i18n");
$(this).text(translations[lang][key]);
});}
$(".lang-button").click(function () {
const lang = $(this).data("lang");
setLanguage(lang);});
setLanguage("en");


@code_ready | #обучение #js
👎43👍28🔥6😁1
Специальные символы для регулярных выражений

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

@code_ready | #шпаргалка #js
👍63🔥15
Что будет в консоли?
Anonymous Quiz
37%
5
13%
ReferenceError
40%
6
10%
TypeError
👍41😁21👎8🔥6
0510(2).gif
9.5 MB
Галерея фото со slide эффектом

Анимированный слайдер для фоток, прокручивать можно как ЛКМ так и колесиком мыши

👨‍💻 Готовый код: Ссылочка

@code_ready | #кодпен
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥26👍12👎9
0511(1).gif
2.5 MB
Плагин для регулярных выражений

Сложно разобраться с регулярными выражениями? Специально для таких случаев есть плагин Explain RegExp.
Прямо в VSCode генерируются уникальные схемы для каждого регулярного выражения.

На канале есть 2 шпараглки на эту тему:
методы и специальные символы

@code_ready |#плагин
🔥46👍14
Вопрос с собеседования

В чем отличие между Observable и Promise в JavaScript?

Ответ:

Observable и Promise - это два способа для работы с асинхронными операциями в JS.

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

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

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


@code_ready | #собеседование
👍48🔥15
Шпаргалка с функциями обработчиков событий

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

@code_ready | #шпаргалка #js
👍44🔥11😁1
Что будет в консоли?
Anonymous Quiz
55%
[a, b, c]
16%
TypeError
10%
['a, b, c']
19%
ReferenceError
👍45😁9🔥6👎4
This media is not supported in your browser
VIEW IN TELEGRAM
Таймер обратного отсчета на JavaScript

В этом примере создается таймер обратного отсчета до определенной даты (в данном случае, до 31 декабря 2025 года). Каждую секунду таймер обновляется, показывая сколько дней, часов, минут и секунд осталось до указанной даты.

<form id="dateForm">
<label for="countdownDate">Введите дату:</label>
<input type="date" id="countdownDate" required>
<button type="submit">Установить таймер</button>
</form>
<div id="timer"></div>

JavaScript код я оставил в комментариях (т.к его достаточно много)


@code_ready | #обучение #js
👍39🔥12😁1
Вопрос с собеседования

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

Ответ:

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

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

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


@code_ready | #собеседование
👍45🔥8
Прозрачность изображения

Свойство opacity позволяет задавать прозрачность элемента.
Принимает значения от 0 до 1 включительно, где 1 - полная непрозрачность.

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

@code_ready | #cвойство #css
👍38😁11🔥6
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 #обучение
👍55🔥16😁4
0514 (1)(4).gif
3.3 MB
Готовые шаблоны

Плагин HTML/CSS/JavaScript Snippets для VSCode позволяет ускорить процесс написания кода, предоставляя готовые шаблоны и фрагменты кода

@code_ready | #плагин
🔥40👍14👎1
This media is not supported in your browser
VIEW IN TELEGRAM
Список дел - To Do List

Данный код представляет собой готовый пример реализации To Do List на чистом JavaScript.
При пустом вводе не будет происходить ничего, так как основной код работает, при условии что строка не пустая

<h2>Мои задачи</h2>
<div>
<input type="text" id="noteInput" placeholder="Введите задачу...">
<button onclick="addNote()">Добавить задачу</button>
</div>
<ul id="noteList"></ul>

Готовый JavaScript код, я оставляю в комментариях под этим постом (т.к его немало)

@code_ready | #обучение #js
👍39🔥12