archelon

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

Никаких значительных изменений не было в плане вёрстки (html и css).
Максимум - мб какие-то вещи доехали до сафари. И IE окончательно устарел.

Большинство изменений сейчас - в подходах к разработке и инструментах. В том, как работают люди с js и разными его фреймворками.

Ну вот ещё список новых стандартов, которые опубликовали w3c:
https://www.w3.org/TR/?filter-tr-name=&status%5B%5...

После 2019 опубликовано всего 6:

• CSS Box Model Module Level 3
  
• CSS Containment Module Level 1
  
• Media Queries Level 3
  
• CSS Color Module Level 3
  
• CSS Cascading and Inheritance Level 3
  
• CSS Writing Modes Level 3
  

- this.sort обращается напрямую к свойству объекта.
- this[sort] использует вычисляемое имя свойства.

const obj = {
  sort: 1,
  noSort: 2,
}

const x = 'noSort';

console.log(obj.sort) // 1

console.log(obj[x]) // 2
// эквивалент в этом примере
console.log(obj['noSort']) // 2

Ещё в студенческие годы баловался в Delphi и вёрстке, это было чертовски интересно.

И зачем тогда себя мучать и пытаться залезть туда, куда вас вообще не тянет?

Я пробовал начать с "Грокаем алгоритмы" и с книги Никлауса Вирта по алгоритмам, но мало что понял. Читаю и, как говорится, "Смотрю в книгу, а вижу фигу"...

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

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

Я с этим тезисом согласен.
Ибо действительно ничего не сможешь понять.

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

Никакой смекалки и догадок в задачах на логику нет. На то это и задачи на логику.

искусством программирования

Скорее придирка, но программирование и программная инженерия очень далеки от искусства.
Называть программирование искусством - всё равно что назвать искусством покраску стен.

В прошлом окончил ВУЗ по IT-специальности

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

как развить абстрактно-логическое мышление?

Школьная математика.

Как изучить методику программирования?

Решай хоть какие-нибудь задачи при помощи какого-нибудь языка программирования.
Не торопись лезть на leetcode. Попробуй что-нибудь простое и чисто бытовое решить.

Александр, Любые курсы, которые могут кем-то котироваться, должны быть либо от производителя, либо от крупных образовательных организаций.

nodeJS кто владелец? OpenJS
Там можно посмотреть
https://openjsf.org/certification/

Ну или кого-то крупного поискать, может кто-то coursera котирует.

Assembler

Давайте расскажу, что вы делаете:
Грид на 2 равных столбца - ок.
Зачем-то у него отрицательные margin.
Ещё зачем-то он флекс на другой ширине. Почему бы ему не быть гридом всегда и без отриц отступов?
Дальше карточке задана ширина 320.
Но проверяете на ширине 469.
Было бы странно, если бы оно влезло.
Что происходит дальше?
Дальше вы решаете, что 320 тут лишние и убираете их.
Что остается?
Остается width: 50%.

Получаем карточку на половину ячейки грида.

Что делать?
Я бы избавилась от:
- флексов (не нужно будет задавать ширину карточкам)
- отрицательных margin
- ширины карточек (пусть грид определяет ширину карточки)

Также можно попробовать добавить в грид minmax и уменьшить количество media.

Если что, всё это написано в инструментах разработчика, хорошо видно какие свойства в итоге применились.

Ничего не изменилось: вы по-прежнему можете изменять стили напрямую у элемента.

при обращении к элементу в JS и изменении стилей методом style DOM дерево

Не скажу как раньше было, но и сейчас при неудачной вёрстке можно вызвать reflow для всего документа даже при применении класса. Изменение шрифта и так и так заставит браузер что-то пересчитать.
Другое дело, что сейчас есть техники позволяющие минимизировать вычисления: сказать браузеру, что пересчитывать нужно только определённую часть (утрирую).

Есть tailwindcss с новым (по отношению к 2015 году) подходом - чтобы поменять 1-2 стиля нужно добавить/удалить 1-2 класса. Часто это удобнее.

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

Впрочем, от style всё равно не уйти полностью. Например, динамически высчитываемые анимации - только class не обойтись.

В браузере:

// set localStorage
localStorage.setItem('myKey', 'myValue');

// get localStorage
let value = localStorage.getItem('myKey');

console.log(value); // myValue

На диске, используя NodeJS:

const fs = require('fs');

// write
fs.writeFile('myFile.txt', 'myValue', (err) => {
    if (err) throw err;
    console.log('The file has been saved!');
});

// read
fs.readFile('myFile.txt', 'utf8', (err, data) => {
    if (err) throw err;
    console.log(data); // myValue
});

Не работает, потому что вы в backgroung-image кроме картинки понаписали ещё кучу всего.
Пишите либо всё в сокращенное свойство либо всё по отдельности. А не кашей, как сейчас.

При такой структуре разметки вам не нужен для этого JS.

Поменяйте id="info_block" на class="info_block" и добавьте css

.info_block {
  disply: none;
}
.open_link:hover + .info_block {
  disply: block
}

Правда, лучше немножечко видоизменить, чтобы наведение было на общего родителя.

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

Чему к примеру равна горизонтальная линия вашего шрифтового плюса при размере 35px? Если у вас размер блока 45px, то линия должна быть так же с нечетным размером ровно 1px или 3px, или 5px в любом другом случае (1.2px, 3.6px, 4px) браузер начнет смещать ваш плюс вверх и вниз, что вы и наблюдаете.

Если же блок будет с четным значением, например 44px, тогда, чтобы плюс стал по центру у него должен быть размер 2px,4px и т.д..

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

setTimeout(myFunc, 5000)
5000 миллисекунд = 5 сек
вместо myFunc - ваша функция, которая закроет модалку.

По сути никакому.

Использование нижнего подчеркивания перед именем переменной, такого как наприме р this._data, является соглашением в некоторых языках программирования, включая JavaScript. Это не является частью синтаксиса языка или специальной функциональностью, а скорее соглашением об именовании, указывающим на то, что переменная является "приватной" или "внутренней" для твоего класса

В js вообще нет строгой приватности для переменных или свойств классов. Все свойства и методы класса по умолчанию доступны извне объекта. Использование символа _ перед именем переменной или свойства служит как некий сигнал или подсказка для других разработчиков о том, что эта переменная или свойство предназначены для внутреннего использования и не следует напрямую обращаться к ним извне класса.

Таким образом, this._data в вашем примере указывает на то, что _data предполагается использовать только внутри класса User. Если бы использовалось this.data без символа _, это могло бы дать впечатление, что свойство data предназначено для публичного доступа извне класса.

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

https://github.com/asvd/dragscroll

Dragscroll is a micro JavaScript library (910 bytes minified)

Если нужно будет больше опций, то рекомендую: Swiper https://github.com/nolimits4web/swiper