Code Ready | Frontend

✅ Вопрос с собеседования

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

Ответ:

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

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

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

@code_ready | #собеседование

👍45🔥8

6.57K views07:30

✅ Прозрачность изображения

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

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

@code_ready | #cвойство #css

👍38😁11🔥6

7.14K views14:25

0:09

✅ Адаптивный текст на 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

7.75K views07:03

0514 (1)(4).gif

3.3 MB

✅ Готовые шаблоны

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

@code_ready | #плагин

🔥40👍14👎1

7.39K views16:14

0:10

✅ Список дел - 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

7.7K views07:12

✅ Вариации свойства animation в CSS

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

inherit — Значение наследуется от родительского элемента.
initial — Устанавливает значение по умолчанию.

@code_ready | #шпаргалка #css

👍38🔥10👎2

7.2K views15:03

✅ Преобразование элементов с transform

Свойство transform в CSS позволяет изменять положение, размеры и форму элементов на веб-страницах.

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

• translate (x, y) — перемещает элемент по осям X и Y на заданное количество пикселей
• rotate (angle) — поворачивает элемент на заданный угол в градусах
• scale (x, y) — масштабирует элемент по осям X и Y на заданное значение
• skew (x, y) — наклоняет элемент по осям X и Y на заданный угол в градусах
• transform-origin — изменяет точку, относительно которой происходят преобразования

@code_ready | #свойство #css

👍42😁7🔥6

7.02K views13:42

0517.gif

2.5 MB

✅ Splashed Toast Notifications

Всплывающие уведомления о помощи, успешном выполнении, предупреждении и ошибке. Написано без использования JavaScript

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

@code_ready | #кодпен

Please open Telegram to view this post

VIEW IN TELEGRAM

👍38🔥14👎1

7.09K views09:30

✅ Вопрос с собеседования

Что означает ключевое слово this в JavaScript?

Ответ:

В JavaScript, this — это ссылка на какой-то объект. То, на что, ссылается this, может меняться в зависимости от контекста вызова.

• В общем контексте, this ссылается на глобальный объект (в браузере это объект window).
• Внутри объектного метода, this ссылается на сущность, которая вызвала этот метод.
• При использовании конструктора, this ссылается на новую созданную сущность.
• При использовании методов call(), apply() или bind() ,можно явно задать значение this.

В данном примере this.brand внутри метода getBrand() ссылается на свойство brand объекта car, так как он его вызвал

@code_ready | #собеседование

👍46🔥12

7.38K views11:32

✅ Шпаргалка для CSS Grid

CSS Grid Layout — представляет собой двумерную систему сеток в CSS. Это пересекающийся набор горизонтальных и вертикальных линий, образующих колонки и строки.

@code_ready | #css #шпаргалка

👍62🔥14👎4😁2

8.14K views16:25

✅ GitHub's VS Code themes

GitHub Theme — это плагин для VSCode, который приносит внешний вид GitHub в вашу среду разработки. Этот плагин предлагает как светлую и тёмную темы, так и другие ихние оттенки, позволяя вам выбрать ту, которая подходит вашему стилю и предпочтениям.

@code_ready | #плагин

🔥28👍6👎2

7.58K views15:57

0:03

✅ Создание печатающего эффекта

Typing effect на чистом CSS.
.typing-demo устанавливает ширину блока для текста и создает анимацию typing, которая плавно расширяет его до конца. Затем анимация blink мигает границей, чтобы придать тексту более реалистичный вид.

<div class="wrapper">
  <div class="typing-demo">@code_ready for you!</div>
</div>

.typing-demo {
    width: 21ch;
    animation: typing 2.5s steps(22), blink .5s step-end infinite alternate;
    white-space: nowrap;
    overflow: hidden;
    border-right: 3px solid;
    font-family: monospace;
    font-size: 2rem;
}
  @keyframes typing {
    from {width: 0;}}
  @keyframes blink {
    50% {border-color: transparent;}}

@code_ready | #практика #css

🔥52👍14

8.56K views07:30

✅ Горячие клавиши для быстрой верстки

• Ctrl + Shift + K — Удаляет текущую строку целиком.

• Ctrl + / — Закомментирует или раскомментирует текущую строку.

• Shift + ← / → / ↓ / ↑ — Позволяет выделять текст в направлении, указанном стрелкой.

@code_ready | #клавиши

👍58🔥12👎3

8.54K views13:51

0:07

✅ Распознавание голоса на JS

Web Speech API позволяет взаимодействовать с голосовыми интерфейсами в ваших веб приложениях. Он состоит из двух частей: SpeechSynthesis (Текст-в-Речь), и SpeechRecognition (Асинхронное распознавание речи)

<h2>Распознавание голоса</h2>
<p id="transcription"></p>
<button id="startRecognitionButton">Запись</button>

const startRecognitionButton = document.getElementById("startRecognitionButton");
const transcription = document.getElementById("transcription");
startRecognitionButton.addEventListener("click", function () {
  const recognition = new webkitSpeechRecognition();
  recognition.lang = "ru-RU";
  recognition.onresult = function (event) {
   const transcript = event.results[0][0].transcript;
    transcription.textContent = transcript;};
  recognition.onerror = function (event) {
    console.error("Ошибка распознавания:", event.error);};
  recognition.start();});

@code_ready | #обучение #js

🔥77👍23

9.3K views06:31

✅ Шпаргалка по сравнению разных типов

Этот небольшой справочник предоставляет основные операции для сравнения различных типов данных в JavaScript. В нем содержатся примеры сравнения чисел, строк, логических значений, объектов, а также особенности сравнения null и undefined. 🔥

@code_ready | #шпаргалка #js

🔥32👍12

6.78K views07:03

✅ Стилизация списков с помощью list-style-type

Свойство list-style-type в CSS позволяет изменять маркеры (символы или изображения, которые стоят перед каждым элементом списка) у неупорядоченных (ul) и упорядоченных (ol) списков.

Маркированный список:

• none — удаляет маркеры у всех элементов списка
• disc — кружки (по умолчанию для ul)
• circle — пустые кружки
• square — квадраты

Нумерованный список:

• decimal — цифры(по умолчанию для ol)
• decimal-leading-zero — арабские цифры меньше 10 (01,02,03)
• lower-greek — строчные греческие буквы (α, β, γ, δ,...)
• lower-alpha — строчные буквы латинского алфавита
• upper-alpha — прописные буквы латинского алфавита
• lower-roman — римские цифры нижнего регистра
• upper-roman — маркеры заглавных римских цифр

@code_ready | #свойство #css

👍52🔥12

6.4K views15:30

0524(7).gif

269.5 KB

✅ Outline-to-Fill Tab Icon Animations

Меню для вашего сайта, с красивыми анимациями при наведении

Реализовано с помощью JavaScript и SCSS(Расширение для CSS)

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

@code_ready | #кодпен

Please open Telegram to view this post

VIEW IN TELEGRAM

🔥27👍13👎4

6.1K views07:03