Илья

SVG, и нужно разобраться с атрибутами stroke-dasharray и stroke-dashoffset:

Очевидно же раз - понизить используемую версию chart.js. Так, чтобы первой цифрой была 2, а не 3.

Очевидно же два - подождать, пока выйдет версия vue-chartjs с поддержкой третьего chart.js.

Очевидно же три - форкнуть vue-chartjs и реализовать поддержку третьего chart.js самостоятельно.

Вот как это делать согласно лучших практик:

<template>
<div>
    <!-- В шаблоне не вызывают какие-либо функций. Только выводят готовые значения -->
    {{localeDate}}
</div>
</template>

<script>
{
    data: () => ({
        // Дата хранится в виде числа. Не обязательно в state компонента. Но и в других местах тоже
        date: 1580558031264,
    }),
    
    computed: {
        localeDate() {
            // Конвертируем число в строку. Для этого существуют специальные методы
            // toLocaleDateString() или toLocaleString() или toLocaleTimeString()
            // Итоговая строка будет зависеть от локализации системы пользователя. 
            // Для русской локали это будет "01.02.2020", 
            // для американской "2/1/2020", 
            // для немецкой — "1.2.2020"
            // Вы НЕ должны устанавливать формат даты самостоятельно
            return (new Date(this.date)).toLocaleDateString() 
        },
    },

    // Если нужно изменять дату в реальном времени вешаем таймер
    created() {
        this.intervalId = setInterval(() => this.date = Date.now(), 1000); // Обновляем значения не чаще раза в секунду. А то и реже.
    },

    // Если повесили таймер, то его нужно отключать
    beforeDestroy() {
        if (this.intervalId) clearInterval(this.intervalId)
    },
}
</script>

Как вариант, так

Нужно использовать symbol, вот статьи с описанием методологии:
https://css-tricks.com/svg-sprites-use-better-icon...
https://css-tricks.com/svg-symbol-good-choice-icons/

В кратце, у нас есть один большой SVG со всеми изображениями в виде символов:

<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
  
  <symbol id="beaker" viewBox="214.7 0 182.6 792">
    <!-- <path>s and whatever other shapes in here -->  
  </symbol>
  
  <symbol id="shape-icon-2" viewBox="0 26 100 48">
    <!-- <path>s and whatever other shapes in here -->  
  </symbol>
  
</svg>

Подключаем картинки на странице:

<svg class="icon">
  <use xlink:href="#shape-icon-1" />
</svg>

<svg class="icon">
  <use xlink:href="#shape-icon-2" />
</svg>

Всё картинки можно стилизовать через CSS (например задать заливку fill: black и т. д.). Замечу, что атрибут viewBox для символов нужно задавать обязательно, что-бы картинки правильно масштабировались (например если вы будете изменять их размеры).
Если вы используете grunt, взгляните в сторону grunt-svgstore: https://github.com/FWeinb/grunt-svgstore для автоматизации сборки картинок и обётки оных в один SVG контейнер.

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

Геннадий Уваров, чтобы это сделать, вам нужно добавить в head страницы теги:

<meta property="og:title" content="">
<meta property="og:site_name" content="">
<meta property="og:url" content="">
<meta property="og:description" content="">
<meta property="og:image" content="">

Далее нужно каждому мета-тегу заполнить параметр content=""

За что отвечает каждый тег:
og:title - заглавие страницы, он же тайтл. Можете скопировать из тега title.
og:site_name - название сайта.
og:url - ссылка страницы, где вы добавляете этот код. Если это однастраничник, то это просто ссылка на главную сайта. Если сайт на CMS или самописный и у него много страниц, то вам придется для каждой указать свой тег, со своей ссылкой.
og:description - описание страницы. Можете скопировать из тега description для страницы, на которую добавляете теги.
og:image - ссылка на картинку, что характеризует страницу. Можете указать ссылку на лого сайта, или нарисовать конкретную картинку для этих целей.

Большая часть ресурсов - ситуативные (в основном это документации к конкретным библиотекам). Из более-менее часто используемого могу вспомнить:
MDN, DevDocs и Schema.org, чтобы вспоминать забытое.
Can I use, чтобы смотреть поддержку браузерами (+ doiuse).
WAVE и regex101, чтобы проверять себя.
В Browserhacks иногда полезно заглянуть.
FontPair и Coolors - если нужно без дизайнера подобрать шрифты и цвета.
Snazzy Maps, чтобы брать готовые цветовые схемы для карт.
Cubic-bezier, чтобы наглядно делать кривые для простых анимаций.
Google - если затупил.
Noisli - для фонового шума.
Cross Browser Testing, чтобы тестировать результат.

мне вот здесь понравилось

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

Добавить C:\Users\Smirnov.Denis\AppData\Roaming\npm\ в PATH.

SELECT `id`, `name`, SUBSTR(`text`, 1,20) AS `text` FROM `articles` ORDER BY `id` DESC

или

SELECT *, SUBSTR(`text`, 1,20) AS `shorttext` FROM `articles` ORDER BY `id` DESC

То ли через background то ли просто через img

img - это неотъемлемая часть контента, которая критически важна для пользователя, напр. картинка товара.
background - это часть интерфейса: иконки, фон блоков, спецэффекты, всё что касается дизайна;

DECIMAL(X,Y)
X - общее количество знаков в числе (с учетом дробной части)
Y - количество знаков в дробной части

json_decode(file_get_contents('php://input'));

Подобные анимации реализуют с помощью :hover + transition.
https://codepen.io/vincebrown/pen/bNNpmY
https://codepen.io/nathanlong/pen/MwOpxj
https://codepen.io/caesura/pen/EZpNjw
https://codepen.io/tonrudny/pen/KgaZoY