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
📱 Вопрос с собеседования

Что такое WeakMap в JavaScript?

Ответ:

WeakMap — это коллекция пар "ключ-значение", где ключи являются объектами, а значения могут быть любого типа. Ключи в WeakMap являются слабыми ссылками, что позволяет им быть собранными сборщиком мусора, если на них больше нет сильных ссылок.

Методы WeakMap:

• set(key, value) — Добавляет пару ключ-значение в WeakMap.

• get(key) — Возвращает значение, связанное с указанным ключом. Если ключ не найден, возвращает undefined.

• has(key) — Проверяет наличие ключа в WeakMap.

• delete(key) — Удаляет элемент по указанному ключу.


➡️ @code_ready | #собеседование #js
Please open Telegram to view this post
VIEW IN TELEGRAM
👍22🔥3
This media is not supported in your browser
VIEW IN TELEGRAM
📱 Красивые иконки файлов

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

➡️ @code_ready | #плагин
Please open Telegram to view this post
VIEW IN TELEGRAM
👍18🔥4👎2
📱 Работа с Fetch API для выполнения HTTP-запросов

Fetch API — это современный интерфейс для выполнения HTTP-запросов GET и POST. Он предоставляет простой и удобный способ взаимодействия с веб-сервисами и получения данных с серверов, что особенно важно для создания динамичных веб-приложений.

Fetch API отличается простотой использования, поддержкой промисов, возможностью настройки HTTP-запросов и обработкой различных форматов ответов (JSON, текст и др.)

➡️ @code_ready | #гайд #js
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
👍21🔥6
This media is not supported in your browser
VIEW IN TELEGRAM
learngitbranching — небольшая браузерная игра, которая поможет вам изучить Git. В ней вы познакомитесь с основными командами, которые пригодятся вам в повседневной работе.

Ссылочка: https://learngitbranching.js.org/?locale=ru_RU

➡️ @code_ready | #ресурсы
Please open Telegram to view this post
VIEW IN TELEGRAM
👍18🔥9
This media is not supported in your browser
VIEW IN TELEGRAM
👩‍💻 Свойство mix-blend-mode

Это свойство отвечает за режим наложения между элементом и его родительским элементом, а также между элементом и фоном.

У него есть следующие параметры:

multiply — умножает цвет элемента на цвет фона, создавая темный эффект.
screen — уменьшает темноту цвета, создавая свечение.
darken — выбирает самый тёмный цвет из двух (цвет элемента и цвет под ним).
lighten — выбирает самый светлый цвет из двух.
hue — устанавливает цвет элемента на цвет фона, сохраняя его яркость и насыщенность.
luminosity — устанавливает яркость цвета элемента на уровень яркости фона.
exclusion — создает эффект смешивания, который уменьшает контраст, производя более мягкий вид.


➡️ @code_ready | #свойство #css
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥36👍11
This media is not supported in your browser
VIEW IN TELEGRAM
👩‍💻 Тег details

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

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


➡️ @code_ready | #html
Please open Telegram to view this post
VIEW IN TELEGRAM
👍48🔥13
This media is not supported in your browser
VIEW IN TELEGRAM
Flexer — это CSS-песочница, в которой можно легко сгенерировать и расположить блоки. Нужно просто задать размеры и отступы элементам, а сайт сгенерирует CSS-код с flexbox.

Ссылочка: https://www.flexer.dev/

📣 Code Ready | #ресурсы
Please open Telegram to view this post
VIEW IN TELEGRAM
👍45🔥16👎1
👩‍💻 Шпаргалка Flexbox позиционирования

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

📣 Code Ready | #css
Please open Telegram to view this post
VIEW IN TELEGRAM
👍37🔥6
This media is not supported in your browser
VIEW IN TELEGRAM
📱 Меняем px в rem

px to rem — плагин, который позволяет с лёгкостью изменить единицы измерения px в rem. Нужно просто выделить нужный участок кода и нажать Alt + Z.

📣 Code Ready | #плагин
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥38👍10
📱 Как работает Array.prototype.reduce()

Array.prototype.reduce() — это метод массивов в JavaScript, который выполняет функцию редукции на каждом элементе массива, преобразуя его в одно значение. Он принимает два аргумента: функцию обратного вызова и необязательное начальное значение аккумулятора.

Редукция в JavaScript — это процесс преобразования массива в одно значение с использованием метода `reduce()`, который применяет заданную функцию к каждому элементу массива, аккумулируя результаты в одно итоговое значение, например, сумму, произведение или объект.


📣 Code Ready | #метод
Please open Telegram to view this post
VIEW IN TELEGRAM
👍25🔥9
📖 Javascript с нуля

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

Автор: Чиннатхамби К
Год: 2021


⬇️ Скачать книгу

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

Ссылочка: https://hcdev.ru/

📣 Code Ready | #ресурсы
Please open Telegram to view this post
VIEW IN TELEGRAM
👍24🔥9
Вёрстка сайта по макету из Figma 2024 — плейлист, состоящий из 8 практических уроков, в которых вы с нуля сверстаете сайт, используя готовый дизайн из программы Figma.

Ссылочка на курс: YouTube 🖤


📣 Code Ready | #курс
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥23👍8
This media is not supported in your browser
VIEW IN TELEGRAM
📱 CSS Preview

Плагин для VS Code, который позволяет просматривать стили CSS в реальном времени, отображая визуальный результат изменений прямо в редакторе.

📣 Code Ready | #плагин
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥70👍17👎1
🔥12👍4
Что будет в консоли?
Anonymous Quiz
29%
A
8%
B
13%
C
50%
D
🔥19👍10👎5😁3
This media is not supported in your browser
VIEW IN TELEGRAM
👩‍💻 Атрибут draggable

С помощью draggable можно создать интерактивные элементы на веб-странице, которые пользователи смогут перетаскивать.

Он имеет два значения:
• draggable="true" — элемент можно перетаскивать.

• draggable="false" — элемент нельзя перетаскивать.


📣 Code Ready | #атрибут
Please open Telegram to view this post
VIEW IN TELEGRAM
👍45🔥17👎2
This media is not supported in your browser
VIEW IN TELEGRAM
Webcode,tools — это онлайн-инструмент для генерации и настройки различных HTML, CSS и JS кода, который помогает разработчикам быстро создавать веб-элементы и видеть результаты в реальном времени.

Ссылочка: https://webcode.tools/

📣 Code Ready | #ресурсы
Please open Telegram to view this post
VIEW IN TELEGRAM
👍20🔥8
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
👍60🔥13