Олег программист | Фронтендер

Верстка сделанная с помощью chatGPT

Ссылка

В JavaScript есть несколько способов проверить, содержит ли строка определённое слово, например, слово legs.

1. Использование метода includes()
Метод includes() проверяет, содержит ли строка подстроку. Он чувствителен к регистру.

const str = "I have long legs and strong arms.";
const hasLegs = str.includes("legs");
console.log(hasLegs); // true

2. Использование метода indexOf()
Метод indexOf() возвращает индекс первого вхождения подстроки. Если подстрока не найдена, возвращается -1.

const str = "I have long legs and strong arms.";
const hasLegs = str.indexOf("legs") !== -1;
console.log(hasLegs); // true

Какой способ используете вы?

3D анимация с бегущей строкой

Смотреть код

Инкапсуляция в ООП и её реализация в JavaScript

Инкапсуляция — это один из фундаментальных принципов объектно-ориентированного программирования (ООП), наряду с наследованием, полиморфизмом и абстракцией.

Этимология слова "инкапсуляция"
Слово инкапсуляция происходит от латинского capsula — "коробочка" или "контейнер". Приставка "in-" означает "внутри". То есть инкапсуляция буквально означает "помещение чего-то в коробочку", что символизирует идею защиты содержимого от прямого внешнего воздействия.

Пример:
Начиная с ES2021, JavaScript предоставляет синтаксис для создания настоящих приватных свойств и методов с помощью #.

class Person {
    #name; // Приватное свойство

    constructor(name) {
        this.#name = name;
    }

    getName() {
        return this.#name;
    }
}

const person = new Person('Alice');
console.log(person.getName()); // Alice
console.log(person.#name); // Ошибка: Private field '#name' must be declared in an enclosing class

Селектор input:-webkit-autofill в CSS используется для стилизации полей ввода в HTML, которые автоматически заполняются браузером.

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

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

input:-webkit-autofill {
    background-color: yellow;
    color: red;
    border: 2px solid green;
}

Если браузер заполнит эти поля автоматически, к ним применится стиль, описанный в input:-webkit-autofill.

CSS Diner

Это игра для изучения css селекторов

Ссылка на игру

CSS свойство aspect-ratio

CSS-свойство aspect-ratio позволяет задать желаемое соотношение ширины и высоты поля элемента.
Это означает, что даже при изменении размера родительского контейнера или области просмотра браузер будет корректировать размеры элемента, чтобы сохранить заданное соотношение ширины и высоты.

aspect-ratio: 1 / 1;
aspect-ratio: 1;
aspect-ratio: auto 3/4;
aspect-ratio: 9/6 auto;

Подробнее

Большая шпаргалка по CSS

Выписаны все основные свойства

Интересный слайдер для сайта

Полный код

Выставление рейтинга в виде звезд

Полный код

Пользовательский интерфейс панели управления проектами

Технологии: html, scss, js

Код на codepen

Задача: Уникальные элементы массива

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

Пример:

uniqueArray([1, 2, 2, 3, 4, 4, 5]); // [1, 2, 3, 4, 5]
uniqueArray([7, 8, 8, 9, 10, 10, 10]); // [7, 8, 9, 10]

Условия:
1) Не используйте встроенные методы вроде Set для автоматического удаления дубликатов.
2) Порядок элементов должен быть сохранён.

Как использовать инстументы DevTools на максимум

Подробная статья

Коротко про слоты в Vue.js

Когда ты разрабатываешь интерфейсы на Vue.js, рано или поздно приходит момент, когда простые пропсы уже не спасают. Допустим, нужно сделать компонент не просто гибким, а настолько гибким, чтобы его можно было адаптировать под любые сценарии. Пропсами ты тут не отделаешься. И вот тут могут помочь слоты.

Ссылка на статью

Что такое IntersectionObserver в JavaScript

IntersectionObserver - это мощный браузерный API, который позволяет асинхронно наблюдать за пересечением элемента (target) с его родителем (root) или областью просмотра (viewport). Другими словами, этот API обеспечивает вызов определенной функции каждый раз при пересечении целевого элемента с root или viewport.

Для начала работы с IntersectionObserver необходимо с помощью конструктора создать объект-наблюдатель с двумя параметрами - функцией обратного вызова и настройками:

const observer = new IntersectionObserver(callback, options)

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

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

Вот простой пример использования IntersectionObserver:

const observer = new IntersectionObserver(entries => {
  entries.forEach(entry => {
    const intersecting = entry.isIntersecting
    entry.target.style.backgroundColor = intersecting ? "blue" : "orange"
  })
})

observer.observe(document.getElementById("test"))

В этом коде мы создаем наблюдателя, который меняет цвет фона элемента при пересечении границы viewport.

Некоторые полезные примеры использования IntersectionObserver:
- Ленивая загрузка изображений и контента
- Бесконечная прокрутка (infinite scrolling)
- Анимации, срабатывающие при скролле
- Отображение прогресса просмотра страницы

IntersectionObserver значительно улучшает производительность, позволяя отказаться от "дорогих" scroll-событий. Он работает асинхронно, не блокируя основной поток выполнения.

👩‍💻 Smooth Liquid Background Effect

Сцена с анимированным фоном. Сделана на SVG, CSS и JavaScript.

Ссылка

5 нейронок, которые помогут разработчику найти нужную информацию:

1. Perplexity AI
2. Elicit AI
3. Consensus AI
4. Scite AI
5. ChatPDF

Всем привет 😄
Давно не виделись ))
Я тут с новостью.

Сижу я значить пью кофе и пишет мне моя знакомая.
Короче они ищут Фронтенд разработчика себе в команду. Ну я и сказал что напишу пост у себя в канале, помогу им с поиском 😄 Как я понял опыт не важен.

Кому интересно, пишите ей @Davtyanka

А я дальше пить кофе ☕️ 😄

Runtime в node js

Node.js - это среда выполнения, которая позволяет выполнять JavaScript-код вне браузера. Это означает, что вы можете создавать серверные приложения на JavaScript, запускать скрипты локально на вашем компьютере и многое другое.

Когда мы говорим о времени выполнения (runtime), мы обычно имеем в виду период времени, в течение которого запущенная программа выполняется на компьютере. Это может быть период времени с момента запуска программы до ее завершения, или период времени, когда программа работает в фоновом режиме.

В JavaScript время выполнения начинается с момента запуска скрипта в браузере и заканчивается, когда скрипт завершает свое выполнение. Во время выполнения, интерпретатор JavaScript обрабатывает код, интерпретируя его строки по одной, и выполняет инструкции, которые он находит.

Например, если мы создадим функцию в JavaScript, она не будет выполнена, пока мы не вызовем ее в нашем коде.

Пример кода JavaScript:

function multiply(a, b) {
  return a * b;
}

// вызываем функцию multiply и сохраняем результат в переменную result
const result = multiply(10, 5);

// выводим результат в консоль
console.log(result);

Таким образом, время выполнения программы (runtime) в JavaScript - это период времени, в течение которого программа выполняется, включая выполнение функций и других инструкций.

Что такое примитивные типы данных в javascript ?

Попробую дать свою формулировку, на сколько это получится 😁

Итак, примитивы - это данные, которые не являются объектом и не имеют методов.

В JavaScript существует 8 основных типов данных.

Семь из них называют «примитивными» типами данных:

number
bigint
string
boolean
null 
undefined
symbol

И один не является «примитивным» и стоит особняком:

object

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

Пример для понимания:

let bar = "abc"
console.log(bar) // abc

// Примитив не изменился
bar.toUpperCase()
console.log(bar) // abc

// Присваиваем новой переменной
let bar2 = bar.toUpperCase()
console.log(bar2) // ABC

// А теперь массивы
let foo = []
console.log(foo) // []
foo.push("plugh")
console.log(foo) // ["plugh"]

Примитив может быть заменён, но он не может быть напрямую изменён.

И напоследок.

За исключением null и undefined, все примитивные значения имеют объектный аналог, который оборачивает значение примитивного типа:

String для string примитива.
Number для number примитива.
BigInt для bigint примитива.
Boolean для boolean примитива.
Symbol для symbol примитива.

Задача:

Создайте функцию, принимающую положительное целое число от 1 до 3999 (оба включены) в качестве параметра и возвращающую строку, содержащую представление этого целого числа римскими цифрами.

Современные римские цифры записываются путем выражения каждой цифры отдельно, начиная с самой левой цифры и пропуская любую цифру со значением ноль. Римскими цифрами обозначается 1990 год: 1000=М, 900=СМ, 90=ХС; в результате получается MCMXC. 2008 год записывается как 2000=ММ, 8=VIII; или ММВIII. В 1666 году каждый римский символ используется в порядке убывания: MDCLXVI.

Пример:

solution(1000); // should return 'M'

Помощь:
Symbol Value
I 1
V 5
X 10
L 50
C 100
D 500
M 1,000

Делитесь в комментариях что у вас получилось

Дорогие программисты! 👨‍💻

Поздравляю вас с Новым годом! 🎄
Желаю, чтобы в этом году ваш код стал ещё более чистым и эффективным.
Пусть в новом году каждый из вас станет мастером кодинга! 🦸‍♂️

Желаю вам, чтобы все ваши баги были только смешными 😄 и забавными, а не критическими.
Пусть ваши репозитории наполняются не только кодом, но и позитивными эмоциями, а каждый merge request будет сопровождаться улыбками и хорошим настроением. 😊

Методы объекта event stopPropagation и stopImmediateProparation

Метод event.stopImmediatePropagation() используется для предотвращения распространения события вверх по DOM дереву, однако он имеет более сильный эффект, чем event.stopPropagation(). Кроме того, что он предотвращает распространение события к вышестоящим элементам, он также останавливает вызов других обработчиков событий для текущего элемента.

Пример использования event.stopImmediatePropagation():

 document.getElementById('inner').addEventListener('click', function(event) {
   event.stopImmediatePropagation(); // Предотвращаем распространение события и вызов других обработчиков
   console.log('Inner element clicked');
 });

 document.getElementById('inner').addEventListener('click', function(event) {
   console.log('Additional inner element click handler');
 });

 document.getElementById('outer').addEventListener('click', function(event) {
   console.log('Outer element clicked');
 });

В этом примере, при клике на элемент с id "inner", обработчик первого события будет вызван и выведет в консоль сообщение "Inner element clicked". Однако, обработчик второго события не будет вызван из-за использования event.stopImmediatePropagation(). Таким образом, ожидаемый вывод будет только "Inner element clicked" без вывода "Additional inner element click handler" или "Outer element clicked".

Важно отметить, что порядок регистрации обработчиков событий может иметь значение при использовании event.stopImmediatePropagation(), так как это метод остановит вызов обработчиков, зарегистрированных после него для текущего элемента.

Итак, основное различие между event.stopPropagation() и event.stopImmediatePropagation() заключается в том, что первый метод предотвращает распространение события только вверх по DOM дереву, в то время как второй метод предотвращает как распространение события вверх по дереву, так и вызов других обработчиков событий для текущего элемента.

FRONTEND TRENDS

Ссылка на код

Зачем нужен конструктор Proxy?

Конструктор Proxy является мощным инструментом в JavaScript, который позволяет создавать объекты-обертки и предоставляет полный контроль над поведением этих объектов при доступе к ним и изменении их свойств.

Основная цель Proxy - обеспечить перехват и кастомизацию операций на объекте, таких как чтение (get), запись (set), удаление (deleteProperty) и других. Это позволяет нам создавать ловушки для операций и добавлять дополнительную логику в обработку объектов.

Пример:

 const obj = {
   name: 'John',
   age: 30
} ;

 const proxy = new Proxy(obj, {
   get(target, property) {
     console.log(`Чтение свойства ${property}`);
     return target[property];
   },
   set(target, property, value) {
     console.log(`Запись свойства ${property} со значением ${value}`);
     target[property] = value;
   }
 });

 console.log(proxy.name); // Вывод: Чтение свойства name, Значение: John
 
 proxy.age = 40; // Вывод: Запись свойства age со значением 40
 console.log(proxy.age); // Вывод: Чтение свойства age, Значение: 40

 console.log(obj.age); // Вывод: 40 (изменение значения age было отражено в оригинальном объекте)

В этом примере мы создали объект obj и создали его обертку с помощью Proxy. Затем мы определили ловушки get и set для перехвата чтения и записи свойств объекта. Когда мы обращаемся к свойствам обернутого объекта через proxy, ловушки выполняются, и мы можем добавить дополнительную логику перед выполнением операций.

Задача

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

Примечания:
- строка может иметь начальные/конечные пробелы — их не следует считать
- строки содержат только уникальные символы от aдоz
- порядок символов в возвращаемом массиве не имеет значения

Примеры:
"a b c" --> ["b"]
"a bcs d k" --> ["d"]
" a b sc p t k" --> ["p"]
"a b c de" --> ["b", "c"]
" a b c de " --> ["b"]
"abc" --> ["a", "b", "c"]

Ответы пишите в комментах 🙂

Преобразовываем объект в массив

Есть объект:
const person = { firstName: 'John', lastName: 'Doe' }

Нужно чтобы этот объект, как то магическим образом стал массивом 🙂

Пишем функцию:
function objectToArray(obj) {
return Object.entries(obj)
}

Вызываем функцию:
const personArray = objectToArray(person)

Кто хочет решить задачку? 😁

Функция принимает строку и возвращает строку в другом виде

accum("abcd") -> "A-Bb-Ccc-Dddd"
accum("RqaEzty") -> "R-Qq-Aaa-Eeee-Zzzzz-Tttttt-Yyyyyyy"
accum("cwAt") -> "C-Ww-Aaa-Tttt"

Пришла в голову идея 🙂

Давайте с вами сегодня разберем три способа, для проверки, является ли переменная числом:

1 способ

function isNumber(param) {
  return Number.isFinite(param);
}

2 способ

function isNumber(param) {
  return !isNaN(param);
}

3 способ

function isNumber(param) {
  return typeof param === "number";
}

Задача

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

isIsogram "Dermatoglyphics" = true
isIsogram "moose" = false
isIsogram "aba" = false