С ГитХаба

function getNoun(number, one, two, five) {
    let n = Math.abs(number);
    n %= 100;
    if (n >= 5 && n <= 20) {
      return five;
    }
    n %= 10;
    if (n === 1) {
      return one;
    }
    if (n >= 2 && n <= 4) {
      return two;
    }
    return five;
  }

Используется так:

alert("4 " + getNoun(4, 'слон', 'слона', 'слонов'));

Выведет сообщение 4 слона.

Вы сконцентрировались на попытке сделать ваше решение БД-ориентированным, в то время как вас не просили этого делать. Из за БД-ориентированности в вашем коде происходят странные вещи, можно сказать "магия". Некоторые вещи вообще странные, вроде списка статей внутри статьи.
Вас просили сделать описания классов, методов и свойств класса в формате PhpDoc, а вы этого не сделали.

Попробуйте ещё раз, но со следующими ограничениями:

• В классе User оставьте только свойство $name и свойство $articlesList = [] - который будет уже списком статей, которые написал автор. Пусть список храниться внутри объекта пользователя, в ORM типа Doctrine так и происходит. Уберите оттуда $id.
  
• Не забудьте добавить методы getName() и setName($newName) для работы со свойством name. Это является правильным для ООП - не позволять клиентам класса работать со свойствами напрямую, а лишь вызывая методы, которые вы предоставляете. Причина проста - в методе вы можете указать какое-нибудь дополнительное поведение, которое требуется при изменении свойства.
  
• Также придумайте методы, необходимые для работы со списком статей. Ну вот два уже напрашивается из задания: "возможность для автора создать новую статью" и "возможность получить все статьи конкретного пользователя". Но по хорошему статью ещё и удалить можно...
  
• Для статьи вам понадобятся 2 поля - это ссылка на автора (то есть сам объект класса User, а не магический id). То есть $author, и ещё, раз это статья, то ей неплохо бы добавить свойство $text.
  
• А теперь главное - не пишите вообще текста методов. Только открыли фигурные скобки и сразу закройте на следующей строке. От вас этого не просили. И даже явно указали этого не делать!
  

Если всё ещё сомневаетесь, то советую почитать обучалку по Doctrine. Там они постепенно создают совершенно коректные с точки зрения ООП классы User и Bug. (они это делают последовательно, так что не поленитесь докрутить до самого конца обучалки)

Наиболее оптимальный способ - вручную прорисовывать шаблон элемента. Той же кнопки, к примеру.
Первая попавшаяся ссылка с вменяемым по размеру примером:
https://professorweb.ru/my/WPF/Template/level17/17...
Общая суть:
Нужно указать параметр Template у объекта, углы которого скруглять вздумали.
Это можно сделать как в примере на странице через ссылку на StaticResource, либо по месту, указав

<Button.Template>
...
</Button.Template>

Сам шаблон описывается элементом <ControlTemplate TargetType="Button">. Ну или не Button, а тот элемент, который вы хотите выдать.
Внутри вы можете нарисовать кнопку так, как вам того хочется. Можно <Rectangle RadiusX="10" RadiusY="10">, можно <Border CornerRadius="10"> - на ваше усмотрение. Не забываете добавить <ContentPresenter>, чтобы отобразить содержимое кнопки (её текст или любые другие элементы, которые на ней должны размещаться). В реальности вам придётся ещё впоследствии добавить раскраску в зависимости от состояния (активная, курсор наведён, курсор не наведён), и возможно анимацию перехода между этими состояниями!

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

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

Если сложность картинки совсем уж запредельная, то всегда можно взять и использовать svg. Я так и сделал тут: внизу таймлайн с годами. Но тут надо синхронизировать размер, и в вашем случае видится решение проще.

Если ширина сайта фиксированная, то просто будет использовать 2 div-а: один над другим (то есть у второго position=absolute). Внутри верхрнего лежит ещё один с шириной сайта (А ещё у него должен быть position=absolute и right=0. В нём изображение серого таймлайна. Сам таймлайн можно сделать из обычных div-ов, расположенных слева направо во flexbox-е или с флоатами. div со скруглёнными углами - это точка, с margin сверху и меньшей высотой - линия. А в первом диве (который снизу) вы составляете тот-же таймлайн, но уже цветной. Посчитать цвета градиентов для него - задача не сложная. Ну и вся магия во втором блоке, который с absolute. У него проставлен right=0, и уменьшая его width вы будете понемного скрывать серый таймлайн, а на его месте будет появляться цветной