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
👩‍💻 Работа с массивами: Array.filter и Array.find

Array.filter создает новый массив, содержащий все элементы, прошедшие проверку, заданную предоставленной функцией.

Array.find возвращает значение первого элемента массива, который удовлетворяет предоставленной функции. Если ни один элемент не удовлетворяет условию, метод вернет undefined.

📣 Code Ready | #метод
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
1👍32🔥11
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
5🔥34👍7
👩‍💻 Создание формы с эффектом фокуса

Создадим форму, которая будет реагировать на взаимодействие с полями ввода, используя CSS-анимацию.

Эта анимация улучшит визуальное восприятие формы при фокусировке на полях.

📣 Code Ready | #гайд #css
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
👍31🔥13🤝9
This media is not supported in your browser
VIEW IN TELEGRAM
CSS Gradient — Этот сайт позволяет легко создавать градиенты с помощью интуитивно понятного интерфейса и генератора кода. Вы можете настроить цвета и сохранить свои градиенты для дальнейшего использования.

📣 Code Ready | #ресурсы
Please open Telegram to view this post
VIEW IN TELEGRAM
👍25🤝7🔥6
👩‍💻 Шаблонные литералы в JavaScript — удобство работы со строками!

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

Это значительно упрощает создание динамических текстов и работу с многострочными строками, что делает код более чистым и читабельным!

📣 Code Ready | #собес
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
2👍23🤝5
This media is not supported in your browser
VIEW IN TELEGRAM
👩‍💻 Тег select

Select в HTML используется для создания выпадающих списков или множественных вариантов выбора.

Для <select> атрибут size может принимать значения, которые указывают, сколько строк элементов будет одновременно видно в списке.

size="1" — отображает только одну видимую строку, как в обычном списке.

size="3" — показывает сразу три видимые строки, превращая <select> в список, в котором можно прокручивать больше вариантов.


📣 Code Ready | #тег
Please open Telegram to view this post
VIEW IN TELEGRAM
1👍25🔥9
👩‍💻 Вопрос с собеседования

Как использовать модули в JavaScript?

Ответ:


1. Экспортирование модулей: Позволяет делать функции, объекты или переменные доступными для других файлов. Используется export для экспорта нескольких элементов из модуля.
// utils.js
export function add(a, b) {
return a + b;
}
export const pi = 3.14159;


2. Импортирование модулей: Позволяет использовать ранее экспортированные элементы. Используется import для импорта отдельных элементов из модуля.
// main.js
import { add, pi } from './utils.js';
console.log(add(2, 3)); // 5
console.log(`Value of pi: ${pi}`); // Value of pi: 3.14159


3. Экспорт по умолчанию: Используется для экспорта одного основного элемента из модуля. Это может быть функция, класс или объект. Используется export default для этого.
// math.js
export default function multiply(a, b) {
return a * b;
}


4. Импорт по умолчанию: Осуществляется без фигурных скобок. Можно дать импортируемому элементу любое имя.
// main.js
import multiply from './math.js';
console.log(multiply(2, 3)); // 6


5. Динамический импорт: Позволяет загружать модули асинхронно, что полезно для загрузки модулей по требованию. Используется import() для динамического импорта.
// main.js
async function loadModule() {
const { add } = await import('./utils.js');
console.log(add(5, 10)); // 15
}
loadModule();


6. Импорт всего содержимого модуля:
Иногда нужно импортировать все содержимое модуля под одним именем. Используется import * as для этого.

// main.js
import * as Utils from './utils.js';
console.log(Utils.add(2, 3)); // 5
console.log(`Value of pi: ${Utils.pi}`); // Value of pi: 3.14159


📣 Code Ready | #техсобес
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥26👍14😁2
This media is not supported in your browser
VIEW IN TELEGRAM
flexboxfroggy — игра, которая поможет вам выучить CSS-flexbox. Тут нужно писать нужные свойства во встроенном редакторе для решения головоломок.

📌 Ссылочка: flexboxfroggy.com

📣 Code Ready | #ресурсы
Please open Telegram to view this post
VIEW IN TELEGRAM
1👍37🔥10
👩‍💻 Работа с массивами: Array.some и Array.every

Array.some — проверяет, удовлетворяет ли хотя бы один элемент массива условию, заданному функцией. Если хотя бы один элемент возвращает true, метод вернёт true, иначе false.

Array.every — проверяет, удовлетворяют ли все элементы массива условию, заданному функцией. Если все элементы возвращают true, метод вернёт true, иначе false.

📣 Code Ready | #метод
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥27👍13😁2
This media is not supported in your browser
VIEW IN TELEGRAM
👩‍💻 Полезные горячие клавиши VSCode

Ctrl + F2 — Выделяет все вхождения текущего слова.

Ctrl + Backspace — Удаляет всё слово стоящее перед курсором.

Ctrl + Delete — Удаляет всё слово стоящее после курсора.

📣 Code Ready | #клавиши
Please open Telegram to view this post
VIEW IN TELEGRAM
1👍41🔥13
😁79🔥7👍4
This media is not supported in your browser
VIEW IN TELEGRAM
👩‍💻 Цвет курсора текста

Свойство caret-color в CSS позволяет управлять цветом мигающего курсора в текстовых полях, таких как <input>, <textarea> и элементы с атрибутом contenteditable.

Оно может принимать различные цветовые значения:

• Стандартный цвет — red, blue...
HEX-коды#ff0000, #00ff00
RGB — rgb(255, 0, 0)
HSL — hsl(120, 100%, 50%)


📣 Code Ready | #свойство #css
Please open Telegram to view this post
VIEW IN TELEGRAM
1👍27🔥12
This media is not supported in your browser
VIEW IN TELEGRAM
Cursor AI — нейросеть для разработки, представляющая собой интеллектуальный редактор кода, который помогает за счет подсказок, автоматизации и интеграции с расширениями VS Code.

📌 Ссылочка: https://www.cursor.com/

📣 Code Ready | #ресурс
Please open Telegram to view this post
VIEW IN TELEGRAM
👍12🔥5😁3🤝1