👩‍💻 Атрибут download

Атрибут download используется в элементах <a> для указания того, что при нажатии на эту ссылку браузер должен загрузить указанный файл, а не открывать его в окне браузера.

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

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

👩‍💻 Неоновый эффект для текста

Для создания эффекта неонового текста используется несколько CSS-свойств, которые позволяют добавить тексту подсветку. Рассмотрим ключевое свойство, которое отвечает за этот эффект:

• text-shadow — Самое главное свойство, имеет много нюансов, используется для добавления тени к тексту.

• color: #fff — не столь важно, но для красоты пойдет) а то черный текст смотрится не очень.

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

👨‍💻 Gallery

Эффект плавного приближения фотографии из галереи. Реализовано с помощью Css и Js.

⛓ Готовый код: Ссылочка

➡️ @code_ready | #кодпен

📱 Питомцы прямо в редакторе))

vscode pets — это расширение для VS Code, которое добавляет животных прямо в редактор кода. Они могут не просто бегать, но и указывать на ошибки в коде. Очень веселая штука.

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

CSS Click Chart — с помощью этого  инструмента можно кликнуть на любое свойство, и сразу увидеть его пример и как оно работает. Также отображается поддержка браузерами.

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

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

👩‍💻 Мультиколонки в CSS

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

Шорткат columns объединяет два свойства:
• column-width — ширина каждой колонки
• column-count — количество колонок

Также есть и другие дополнительные свойства, которые помогают создавать улучшенные колонки:

• column-gap — Задает расстояние между колонками
• column-rule — Задает стиль, цвет и ширину линии между колонками. Сокращение для column-rule-style/color/rule.
• column-fill — Управляет тем, как браузер распределяет содержимое между колонками.

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

➡️ @code_ready |#мем

👩‍💻 Заливка текста картинкой

Чтобы добиться эффекта текста с изображением внутри, применяется несколько CSS-свойств, позволяющих заполнить текст любой картинкой. Вот пару свойств, с помощью которых можно создать этот эфффект:

• background-image — добавляет фоновое изображение

• background-size: cover — делает так, чтобы изображение полностью покрывало текст

• background-clip: text — обрезает фоновое изображение по форме текста.

• color: transparent — делает текст прозрачным, чтобы был виден только фон изображения.

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

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

Что такое рекурсия в JS и как ею пользоваться?

Ответ:

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

• Принцип работы — Рекурсивная функция должна иметь базовый случай (условие завершения), который предотвращает бесконечные вызовы. Каждый рекурсивный вызов решает более простую версию исходной задачи, пока не будет достигнут базовый случай.

• Проблемы с производительностью — Рекурсивные функции могут потреблять много памяти из-за хранения большого количества вызовов в стеке. Это может привести к ошибке переполнения стека (stack overflow), если глубина рекурсии слишком велика.

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

👩‍💻 Плавная прокрутка

Свойство scroll-behavior управляет поведением прокрутки страницы или элемента при переходе по якорным ссылкам и делает её плавной.

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

• auto — Стандартное поведение прокрутки. Происходит мгновенно без анимации.
• smooth — Плавная прокрутка с анимацией.

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

📱 Сниппеты для Javascript

JavaScript (ES6) Code Snippets — предоставляет коллекцию фрагментов кода, которые ускоряют процесс разработки, позволяя быстро вставлять распространённые конструкции и методы языка.

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

📱 Как работает Array.prototype,map() в JS?

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

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

Можно использовать map() для преобразования массива чисел в массив их квадратов или для извлечения определенных свойств из объектов.

➡️ @code_ready | #метод #js

👩‍💻 Атрибут translate

Атрибут translate управляет тем, должно ли содержимое элемента переводиться, если страница переведена с использованием автоматических переводчиков.

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

• translate="yes" (по умолчанию) — Должно быть переведено.

• translate="no" — Не должно быть переведено.

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

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

📱 Извлечение значений параметров из 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