📱 Извлечение значений параметров из URL

Используйте URLSearchParams для получения значения определенного параметра из URL, который можно использовать для выполнения действий на странице.

Это необходимо для динамической обработки данных, передаваемых через URL, что часто используется в веб-приложениях для фильтрации и сортировки, обработки данных, переданных через GET-запросы и сохранения состояния страницы.

Важно помнить, что метод get() возвращает null, если параметр отсутствует в URL. Поэтому стоит учитывать это при обработке значений.

➡️ @code_ready | #гайд #js

👩‍💻 Градиентное затемнение картинки

Чтобы создать эффект градиентного затемнения для картинки, нужно задать свойству background: linear-gradient следующие параметры:

• to right — задаёт направление градиента (to right - слева направо, to left - справа налево).

• rgba(0, 0.5, 0.4, 0.7) — первый цвет градиента.

• rgba(0, 0, 0, 0) — второй цвет градиента.

.overlay {
   background: linear-gradient(to right, 
   rgba(0, 0.5, 0.4, 0.7), rgba(0, 0, 0, 0));
}

➡️ @code_ready | #гайд #css

👩‍💻 Вопрос с собеседования

Что такое прототипное наследование в JavaScript и как его использовать?

Ответ:

1. Прототип объекта — каждый объект в JS имеет внутренний прототип, который можно получить через Object.getPrototypeOf() или свойство __proto__. Он может содержать методы и свойства, унаследованные объектом.

const animal = {
  speak() {
    console.log('Animal speaks');
  }
};
const dog = Object.create(animal);
dog.speak(); // Animal speaks

2. Конструкторы и прототипы — функции-конструкторы создают объекты с общим прототипом, который можно определить через свойство prototype.

function Person(name) {
  this.name = name;
}
Person.prototype.greet = function() {
  console.log(`Hello, ${this.name}`);
};
const alice = new Person('Alice');
alice.greet(); // Hello, Alice

3. Изменение прототипа объекта — можно изменить прототип объекта после его создания.

const person = { name: 'John' };
const employee = { job: 'Developer' };
Object.setPrototypeOf(employee, person);
console.log(employee.name); // John

➡️ @code_ready | #техсобес

👩‍💻 Использование метода reduce() для подсчета частоты элементов в массиве.

🔊Таким образом мы можем подсчитывать количество вхождений каждого элемента в массиве и возвращать объект с уникальными элементами в качестве ключей и их частотой в качестве значений.

Метод reduce используется для обработки массивов, сводя их к единственному значению. Он принимает функцию обратного вызова и необязательное начальное значение.

🔊В этом примере мы используем его, чтобы пройти по массиву и создать объект, где ключами являются элементы массива, а значениями — количество их вхождений. Это позволяет быстро получить информацию о частоте элементов.

➡️ @code_ready | #трюк #js

Web Skills — платформа, ориентированная на развитие навыков веб-разработки для всех уровней — от новичков до опытных специалистов. Здесь собраны все навыки для веб-разработчика с ссылками для изучения темы.

⛓ Ссылочка: https://andreasbm.github.io/web-skills/

➡️ @code_ready | #ресурсы

👩‍💻 Атрибут contenteditable

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

Он имеет два значения:

• contenteditable="true" (по умолчанию) — включает редактирование текста.

• contenteditable="false" — отключает редактирование текста.

➡️ @code_ready | #атрибут #html

👩‍💻 Прилипший заголовок

Свойство position управляет тем, как элемент размещается на странице.

Параметры свойства:

• static (по умолчанию) — Элементы располагаются на странице в обычном потоке документа.

• relative — Элементы могут быть смещены относительно их исходного положения с помощью свойств top, right, bottom и left.

• absolute — Относительно ближайшего предка, который имеет значение position отличное от static.

• fixed — Относительно окна браузера и остаются на месте при прокрутке страницы.

• sticky — комбинируют поведение relative и fixed. В начале они ведут себя как статические элементы, но как только они достигают заданной позиции при прокрутке они становятся фиксированными.

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

flexboxfroggy — игра, которая поможет вам выучить CSS-flexbox. Тут нужно писать нужные свойства во встроенном редакторе для решения головоломок.

⛓ Ссылочка: https://flexboxfroggy.com/

➡️ @code_ready | #ресурсы

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

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

Ответ:

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

Методы WeakMap:

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

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

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

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

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

📱 Красивые иконки файлов

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

➡️ @code_ready | #плагин

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

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

➡️ @code_ready | #ресурсы

👩‍💻 Свойство mix-blend-mode

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

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

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

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

👩‍💻 Тег details

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

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

➡️ @code_ready | #html