Сергей delphinpro

Я конечно стесняюсь спросить ... Но чего вы там собрались учить???
Изучайте CSS и основы разметки. Поверстайте float'ами и flex'ами.
Bootstrap "учится" по мануалу за день (если на за пару часов), а потом с ним же в обмнимку (с мануалом) верстается.

Задумывая дизайн новичок исходит из своих возможностей. У профи возможности ограничены только фантазией. Так что эти сайты сделаны на опыте и креативном мышлении, а так же большом количестве знаний. Хотите научится нет проблем - надо учить все что попадается под руку. Начать надо с отличных знаний html, css, javascript, canvas, svg, а дальше сами начнете понимать что еще надо.

На том же, на чем пишутся и обычные сайты, но с более активным использованием технологий для анимаций. Ключевые слова: canvas, css свойства (animate, transform, transition), web animation api, threejs (webgl), gsap (tweenlite, tweenmax), svg animation.

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

Элементарная сетка из блоков:
IE10+ => flexbox
IE9- => float + clearfix
IE9- и разная высота блоков в строке (картинка + 1-2 стоки текста под ней) => inline-block
в какой-то ситуации тут даже display: table будет иметь право на жизнь

"Прилипающее" при прокрутке меню:
position: fixed
position: absolute + js
position: sticky + js fallback

Кнопка с иконкой и текстом:
inline-block + vertical-align: middle для обоих элементов
position: absolute для иконки и padding для кнопки
display: flex для кнопки

Ну и т.д.

Учитесь решать конкретные задачи и искать для конкретных задач лучший способ.

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

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

Считаю, что БЭМ - как идея организации стилей, наименования и решения проблемы отсутствия неймспэйсов в css - лучшее, что есть на сегодняшний день. Да, css-модули это интересно, но их просто открыв в блокноте styles.css не реализуешь.

Получается следующая идея.

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

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

Это позволяет быстро разметить страницу и реализовать адаптив, а так же не изобретать классы вроде header-left, footer-right в каждом блоке.

Правильно ли я понимаю что для хранение файлов их нужно разбивать по папкам,

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

Проблемы, про которые Вы могли слышать, связаны лишь с получением полного списка файлов в директории. Да, это долго и тормознуто, но никак не влияет на скорость чтения конкретного файла.

А на боевых серверах использование хранилища в локальной файловой системе и вовсе нонсенс. Там эта проблема не стоит в принципе.

Сегментацию можно сделать для, скажем так, красоты. Или чтобы было понятно, кому принадлежит тот или иной файл. Но практическая польза от неё сомнительна. Вреда, впрочем, тоже нет :)

допустим на сервер пользователь с Ником username заливает файл file.mp4, и я сохраняю этот файл по пути u/us/use/user/usern/file.mp4 и такой путь формируется для каждого пользователя

Опять неправильно.

Во-первых, никогда, НИКОГДА не доверяйте данным, пришедшим от пользователя. Сохраняете загруженный файл – сгенерируйте имя сами. А оригинальное имя не возбраняется сохранить и в другом месте. Если понадобится дать возможность пользователю сохранить файл под оригинальным именем, это делается в несколько строк.

Во-вторых, Ваша сегментация слишком агрессивная. Если представить, что юзернейм может состоять только из строчных латинских букв и цифр (итого алфавит 26+10=36 символов), то такое хранилище сможет вместить 36 ^ (1 + 2 + 3 + 4 + 5) = 36^15 = 2.21 * 10^23 файлов без повторений. А что если юзернейм короче 5 символов? А что если он переименуется?

Помните "во-первых"? Так как нам нужно самим придумать имя файла, почему бы не воспользоваться либо UUID и сгенерировать уникальное (с высокой достоверностью) значение вида 28c5a6d8-f7b5-440f-aeaa-150e4fd0bebc, а его уже сегментировать? Например, два сегмента по два символа датут прикольные ссылки вида 28/c5/28c5a6d8-f7b5-440f-aeaa-150e4fd0bebc и возможность разместить 65 тысяч файлов так, чтобы они были по одной штуке в директории :)

Есть также вариант использовать не UUID, а посчитать контрольную сумму файла и взять её в качестве имени. Практическая ценность такого хеша, правда, тоже стремится к нулю :)

если будет 2 одинаковых названия файла у одного пользователя то просто добавляю к новому файлу номер (file1.mp4)

Если речь идёт о Джанге, то она сама так делает, это штатная функция хранилища.

replace("\\","")

Бонус

// vanilla js
const input = document.querySelector('.glass');
input.setAttribute('name', 'param-pam-pam');
// jQuery
$('.glass').attr('name', 'param-pam-pam');

Обычно делают по паузе между нажатиями. То есть keyUp сбрасывает таймер, если он есть, и запускает новый. По сработке таймера уже делается запрос. Также можно предусмотреть события cut, paste и т.п.

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