DevMasterX

/* 1. Use a more-intuitive box-sizing model */
*, *::before, *::after {
  box-sizing: border-box;
}

/* 2. Remove default margin */
* {
  margin: 0;
}

DevMasterX

function createCollection(arr, list, options = {}) {
  const {
    template,
    emptyMessage = 'No items to display.',
    emptyImage = '',
  } = options;

  if (!Array.isArray(arr)) {
    throw new Error('Invalid argument: "arr" should be an array.');
  }

DevMasterX

function createMarkup(arr, list, options = {}) {
  // Default options
  const { imgWidth = 300 } = options;

  if (!Array.isArray(arr)) {
    throw new Error('Invalid argument: "arr" should be an array.');
  }

  if (!(list instanceof HTMLElement)) {
    throw new Error('Invalid argument: "list" should be a valid DOM element.');

DevMasterX

const save = (key, value) => {
 try {
   const serializedState = JSON.stringify(value);
   localStorage.setItem(key, serializedState);
 } catch (error) {
   console.error('Set state error: ', error.message);
 }
};

DevMasterX

{
  "liveSassCompile.settings.formats": [
    {
      "format": "expanded",
      "extensionName": ".css",
      "savePath": "/css"
    },
    {
      "format": "compressed",
      "extensionName": ".min.css",

DevMasterX

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/modern-normalize/1.1.0/modern-normalize.min.css" integrity="sha512-wpPYUAdjBVSE4KJnH1VR1HeZfpl1ub8YT/NKx4PuQ5NmX2tKuGu6U/JRp5y+Y8XG2tV+wKQpNHVUX03MfMFn9Q==" crossorigin="anonymous" referrerpolicy="no-referrer" />

DevMasterX

{
  "printWidth": 100,
  "tabWidth": 2,
  "useTabs": false,
  "semi": true,
  "singleQuote": true,
  "trailingComma": "es5",
  "bracketSpacing": true,
  "jsxBracketSameLine": false,
  "arrowParens": "avoid",

DevMasterX

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  border: 0;
  padding: 0;
  
  white-space: nowrap;
  clip-path: inset(100%);