maralov

Простейший способ - запоминаем использованные айдишки в отдельном объекте и проверяем, повторилось ли.

const test = [{
    name: 'name1',
    id: 1
  },
  {
    name: 'name2',
    id: 1
  },
];

function checkForRepeatIDs(arr) {
  const memo = {};

  for (let item of arr) {
    const { id } = item;
    if (memo[id]) return true;
    memo[id] = true;
  }

  return false;
}

console.log(checkForRepeatIDs(test)); // true

не могу найти в поиске

SVG-маски, маски с помощью clip-path в CSS, маски на канвасе, маски в шейдерах, и.т.д. В общем гуглите все, что связано со словом "маска". Вариант с шейдерами самый производительный, с SVG - самый простой.

Пример с SVG:


Пример с шейдерами (не совсем такой, но для передачи идеи пойдет):

<svg style="border: 1px solid #000" width="130" height="130" viewBox="0 0 130 130" >
  <defs>
    <path 
          d="M65,65m-50,0a23,23 0 1,1 103,0a23,23 0 1,1 -103,0" fill="transparent" id="tophalf"/>
  </defs>
  
  <circle cx="50%" cy="50%" r="6" fill="#4C6492"/>
  
  <text style="font-size: 14px;" dx="0" letter-spacing="5.7">
    <textPath xlink:href="#tophalf">
      memories that last fomaking
    </textPath>
  </text>
</svg>

В целом согласен. До пункта №7.

Я обычно придерживаюсь принципа верстки независимыми блоками.
Поэтому после анализа макетов, я делаю одну-две-три (смотря по объему макетов) вспомогательных страниц, на которых верстаю:

1. Базовые элементы. Общая типографика, кнопки, ссылки и т.п.
2. Общие блоки. То что повторяется на нескольких страницах и/или может быть переиспользовано, какие-то виджеты, менюшки, и т.п.

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

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

Это лишняя трата времени. Пусть небольшая, но все же. Плюс, отслеживать качество верстки все-таки удобнее в процессе, а не по окончании подкручивать.
Поэтому используем browser-sync. Поднимается сайт, доступный по IP в домашней локалке с любого устройства. Совет: использовать всегда один порт в browser-sync, а на устройствах сделать закладки на этот адрес. Любой сайт, который в данное время разрабатывается, открывается одним тапом по закладке.
Кроме того BS дает бонус в виде синхронизации действий сразу на всех устройствах: клики, прокрутка, ввод. Это мега-удобно — кликаешь на компе, краем глаза смотришь в планшет и телефоны, сразу видишь там все изменения и поведение.

Всё готово, сжимаю CSS, JS. через веб-сервисы.

Опять тратите время. Настроенный Gulp в одну команду проделает все оптимизации (на больших проектах даже кофе можно успеть сделать, пока собирается билд=).

Еще обратите внимание на инструмент lighthouse в инструментах разработчика.



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

Про CMS ничего не скажу. Клиенту удобнее кнопочки тыкать в условном вордпрессе.

Я не упомянул SASS-фигас и т. д, так как не увидел практической пользы для проектов на 1-15 страниц.

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

Ну вот зачем PUG? Как конкретно он помогает на небольших проектах 1-15 шаблонов страниц.

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

Префиксы? В кодовом редакторе они и так есть.

Я считаю, что исходный код должен быть чистым, без префиксов. Это лишний визуальный мусор. Пусть лучше автопрефиксер этим занимается. К тому же этот плагин использует актуальную базу caniuse на основе вашего .browserlist. Пусть профит и не большой, но все же поменьше на выходе неактуальных свойств.

Сделал я для себя такой шаблон.
Создал папку gulp, она находится на одном уровне со всеми проектами.
Захожу в ней и запускаю команду gulp.
И теперь, при изменении файлов php, scss, css, js, браузер с задержкой в 2000ms перезагружается.
Задержка нужна, так как я работаю в шторме и нужно запулить изменения на сервер.
Вот содержимое gulpfile.js

'use strict';

let gulp = require('gulp'),
	//css
	// stylus = require('gulp-stylus'),
	sass = require('gulp-sass'),
	autoprefixer = require("gulp-autoprefixer"),
	sourcemaps = require('gulp-sourcemaps'),
	wait = require('gulp-wait'),
	notify = require("gulp-notify"),
	plumber = require("gulp-plumber"),
	browserSync = require('browser-sync').create(),
	replace = require('gulp-replace');

let siteUrl = 'http://wc-estore.host1670806.hostland.pro/';
let siteDir = '../wc-estore/';

gulp.task("scss", function () {
	return gulp.src(siteDir + 'assets/scss/my.scss')
		// .pipe(plumber())
		.pipe(sourcemaps.init())
		.pipe(wait(500))
		.pipe(sass({
			outputStyle: 'expanded'
		}).on('error', notify.onError(function (error) {
			return 'An error occurred while compiling sass.\nLook in the console for details.\n' + error;
		})))
		.pipe(autoprefixer({
			cascade: false
		}))
		.pipe(sourcemaps.write('.'))
		.pipe(gulp.dest(siteDir + 'assets/css/'))
		.pipe(browserSync.reload({stream: true}))
		.pipe(notify("Change css"));
});

gulp.task("watch", function () {
	gulp.watch(siteDir + 'assets/scss/**/*.scss', gulp.series('scss'));
});

gulp.task('browser-sync', function () {
	browserSync.init({
		proxy: {
			target: siteUrl,
			ws: true
		},
		reloadDelay: 2000
	});
	gulp.watch(siteDir + "**/*.php").on('change', browserSync.reload);
	gulp.watch(siteDir + "**/*.css").on('change', browserSync.reload);
	gulp.watch(siteDir + "**/*.js").on('change', browserSync.reload);
});

gulp.task('default', gulp.parallel('watch', 'browser-sync'));

<meta property="og:image" content="http://site.com/example.jpg" />

<meta property="og:image:secure_url" content="https://site.com/example.jpg" />

<meta property="og:image:type" content="image/jpeg" />

<meta property="og:image:width" content="500" />

<meta property="og:image:height" content="400" />

У всех кроме каждого 4го левую границу.
У всех кроме первых 4х верхнюю.

:not(:nth-child(4n))
:not(:nth-child(-n - 4))

p.s. И еще это не table.

как-то так? я правда первоначальную анимацию не видел

Вот так: https://codepen.io/garisun/full/qBNNOpg
Но вообще читайте — это полезно. Хотя бы статьи, а лучше ещё книги и твиттеры ведущих разработчиков.
Вот Вам статья про основные раскладки блоков: https://habr.com/ru/post/522880/

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