Как можно расставить автоматическую нумерацию элементов, не относящихся к спискам при помощи CSS?

Свойство content со значением counter() активно применяется в случаях, когда нужно расставить автоматическую нумерацию элементов, не относящихся к спискам:
<section>
<h2>Внутренний механизм</h2>
<p>Механизм счётчика состоит из:</p>
<ul>
<li>кнопки;</li>
<li>пронумерованных кругов;</li>
<li>колеса прокрутки;</li>
</ul>
</section>

<section>
<h2>Принцип действия</h2>
<p>Принцип действия..</p>
</section>

<section>
<h2>См. также</h2>
<ul>
<li>Механический счётчик</li>
<li>Электронный счетчик импульсов</li>
</ul>
</section>

body {
counter-reset: cnt;
}

section {
counter-increment: cnt;
position: relative;
}

section h2::before {
content: counter(cnt);
position: absolute;
left: -45px;
top: -2px;
}

👉 @frontendInterview

Интенсив по верстке - собери сайт Apple

Привет! Меня зовут Виктор Рябков, я - Senior Fullstack разработчик с 6летним стажем.

В своем тг-канале (@ViktorRyabkovIT) я планирую провести интенсив по основам верстки для новичков, на котором каждый сможет собрать свой первый сайт.

План интенсива:
▪️Пройдем основы HTML, CSS и верстки
▪️Соберем ваш первый сайт - пет-проект
▪️Построим вам четкий план дальнейшего изучения фронтэнда - до уровня джуниор

Сделают ли эти 3 дня вас сразу разработчиком? Нет. Но зато вы получите практические знания и первые прикладные результаты. Так и стоит учиться

P.S. На интенсиве будет конкурс работ. За лучшую работу будет денежный приз и бесплатный доступ к полноценному курсу по фронтэнд-разработке!

👉Это бесплатно. Как минимум, стоит попробовать, согласен?

Присоединиться - ссылка

Реклама. ИП Рябков Виктор Александрович ИНН 780448416731 erid = LjN8KSaWz

👉 @frontendInterview

В такой задаче у вас хотят проверить два навыка: владение методом массивов reduce и использование спред-синтаксиса в качестве аргумента функции.

Первое что мы сделаем — добавим спред-синтаксис в аргументы функции. Таким образом, не зависимо от количества переданных аргументов, внутри функции нам будет доступна переменная rest, которая будет массивом, включающим в себя все переданные при вызове параметры.
Следующий шаг - добавим к нашему массиву (переменная rest) метод reduce. За счёт этого лаконичного метода мы легко выполним условия задачи.
function sumOrConcat(...rest) {
return rest.reduce((sum, num) => (sum += num));
}

В данном случае метод reduce будет складывать и аккумулировать результат для значений типа number, а так же выполнит конкатенацию, если вдруг встретится со значением типа string.

👉 @frontendInterview

👉 @frontendInterview

👉 @frontendInterview

<figure>, <figcaption>

Элемент <figure> используется для вёрстки иллюстраций, изображений или другого автономного содержимого, которое может иметь поясняющую подпись в виде тега <figcaption>.

Пример
<figure>
<img src="elephant-sunset.jpg"
alt="Взрослый африканский слон стоит на фоне заката и задумчиво смотрит в
камеру.">
<figcaption>Слон на фоне заката</figcaption>
</figure>

Обычно тегом <figure> верстают изображение, иллюстрацию, кусок кода и тому подобное, на которые будут ссылаться из основного содержимого документа. При этом <figure> вместе со всем содержимым (картинкой, подписью) может быть перенесён в другую часть документа без нарушения целостности потока документа.

👉 @frontendInterview

Самый часто повторяющийся символ

Создайте функцию, которая принимает строку и возвращает самый часто повторяющий символ и количество его повторений

Примеры:
longestRepetition("aaaabb") => ["a",4]
longestRepetition("bbbaaabaaaa") => ["a",4]
longestRepetition("cbdeuuu900") => ["u",3]

👉 @frontendInterview

Руководство по DevOps

Профессиональное движение DevOps зародилось в 2009 году. Его цель — настроить тесные рабочие отношения между разработчиками программного обеспечения и отделами IT эксплуатации. Внедрение практик DevOps в повседневную жизнь организации позволяет значительно ускорить выполнение запланированных работ, увеличить частоту релизов, одновременно повышая безопасность, надежность и устойчивость производственной среды. Эта книга представляет собой наиболее полное и исчерпывающее руководство по DevOps, написанное ведущими мировыми специалистами.

👉 @frontendInterview

Привет всем начинающим  верстальщикам и фронтендерам! Меня зовут Болясов Илья я фрилансер с опытом более 10 лет и сейчас техлид команды веб-разработчиков АТОМ. 

На рынке мы более 5 лет и уже сделали более 200 проектов различной тематики - от магазинов нижнего белья до корпоративных сайтов банков

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

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

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

Еще раз ссылка на канал 👉 @html_practice

​В чем разница между оператором in и методом hasOwnProperty?

Оператор in и метод hasOwnProperty в JavaScript используются для проверки наличия свойств в объекте, но есть разница в том, как они работают.

Оператор in проверяет наличие указанного свойства в объекте или в его прототипе. Он возвращает true, если свойство найдено, включая свойства, унаследованные от прототипа объекта. Если свойство не найдено, оператор in возвращает false. Пример использования:

 const person = {
   name: 'John',
   age: 25
 };

 console.log('name' in person); // true
 console.log('gender' in person); // false

В этом примере, оператор in используется для проверки наличия свойства 'name' и 'gender' в объекте person. person имеет свойство 'name', поэтому результат первой проверки будет true, а свойство 'gender' отсутствует, поэтому результат второй проверки будет false.

Метод hasOwnProperty является методом объекта и проверяет, содержит ли объект указанное свойство только в своей собственной области видимости (не учитывая свойства, унаследованные от прототипа). Он возвращает true, если свойство присутствует только в текущем объекте. Если свойство отсутствует или унаследовано, метод hasOwnProperty возвращает false. Пример использования:

 const person = {
   name: 'John',
   age: 25
 };

 console.log(person.hasOwnProperty('name')); // true
 console.log(person.hasOwnProperty('gender')); // false

В этом примере, метод hasOwnProperty вызывается на объекте person для проверки наличия свойства 'name' и 'gender'. Так как свойство 'name' присутствует в самом объекте person, результат первой проверки будет true. Свойство 'gender' отсутствует в объекте person, поэтому результат второй проверки будет false.

Таким образом, основная разница между оператором in и методом hasOwnProperty заключается в том, что in проверяет наличие свойства и учитывает наследуемые свойства прототипа, в то время как hasOwnProperty проверяет только наличие свойства в текущем объекте, игнорируя наследованные свойства.

👉 @frontendInterview

👉 @frontendInterview

​Как работает boxing/unboxing в JavaScript?

Boxing (также известный как wrapping) происходит, когда примитивное значение (такое как число, строка или логическое значение) преобразуется в соответствующий объект-обертку (класс-оболочку). В JavaScript есть объект-обертки для каждого из примитивных типов данных: Number, String и Boolean. Например:

 const number = 42;
 const boxedNumber = new Number(number);
 console.log(typeof boxedNumber); // "object"

В этом примере мы берем число 42 и упаковываем его, создавая объект Number. В результате получается объект-обертка boxedNumber.

JavaScript выполняет boxing автоматически в течение времени выполнения, когда примитивные значения требуются в качестве объектов. Например, при вызове методов объектов-оберток или доступе к свойствам. В таких случаях JavaScript автоматически упакует (забоксирует) примитивное значение во временный объект-обертку.

Unboxing происходит наоборот - когда значение извлекается из объекта-обертки и преобразуется обратно в примитивный тип данных. Это может происходить автоматически или явным образом с помощью методов преобразования типов данных, таких как valueOf() или toString(). Например:

 const boxedString = new String("Hello");
 const unboxedString = boxedString.valueOf();
 console.log(typeof unboxedString); // "string"

В этом примере мы создаем объект String с помощью new String("Hello"), а затем с помощью метода valueOf() извлекаем значение из объекта и преобразуем его обратно в примитивный тип данных.

Важно отметить, что boxing и unboxing в JavaScript могут быть прозрачными и неочевидными при работе с примитивными типами данных и объектами-обертками. JavaScript позволяет нам работать с примитивами, как если бы они были объектами, автоматически выполняя boxing или unboxing при необходимости.

👉 @frontendInterview

👉 @frontendInterview