Lior Amsalem lior-amsalem

## localstorage.js
//localStorage.js
export const loadState = () => {
   try {
     const serializedState = localStorage.getItem('state');
     if (serializedState === null) {
       return undefined;
     }
     return JSON.parse(serializedState);
   } catch (err) {
     return undefined;

## css-theme-example-index.html
<!DOCTYPE html>
<html>
<body>
	<div id="app">
<h1>Hello Vanilla!</h1>
<div class="app-wrapper">
  We use the same configuration as Parcel to bundle this sandbox, you can find more
  info about Parcel
  <hr />
  <div class="inner-block-card">

## css-theme-example-data-att.css
body[data-theme="light"] {
  --app-background-color-200: #272727;
  /* we can apply more css selectors colors here */
}

body[data-theme="dark"] {
  --app-background-color-200: #787878;
  /* we can apply more css selectors colors here  */
}

## css-encapsulation.css
.app-name-wrapper {
  /* lots of code that wrapper covers */
}

.page-name-wrapper {
  /* For example, in amazon it would be .catalog-tv {} to apply css styles for tv catalog pages. */
}

/* As we continue we'll get and become more granular, smaller in responsibility, and encapsulating less and less code. For more part it can be achieved with 3-4 levels of responsibility  */

## css-n-js-example.js
// myComponent.scss
.my-component-wrapper {
/// our encapsulated code goes here
}

// myComponent.jsx

Import './my-component.css';
export default const MyComponent = () => {
// my component code

## css-and-html.css
.button {
  color: #000;
}

/* you can go above 100% */
.button:hover {
  filter: brightness(85%);
}

<button class="button">some text of a button</button>

## css-vars.css
:root {
  --app-background-color-200: #272727;
  --app-background-color-300: #474747;
}

.app-wrapper {
  background-color: var(--app-background-color-200);
}

## vite-show-config-plugin.js
(function viteshowconfig() {
    return {
      name: "show-config",
      config(config) {
      	console.log("config", JSON.stringify(config, null, 4));
      },
    };
})()

## vite-plugin-example.js
function myPlugin(): Plugin {
  return {
    name: "examples of plugin api",
    transform: () => {
         console.log("transform!");
    }
}

## debounce.js
// debounce.js
export const debounce = (fnc, delay) => {
   let time;

   return function toBeExecuted(...args) {
       const later = () => {
           clearTimeout(time);
           fnc(...args);
       };
	//localStorage.js
	export const loadState = () => {
	try {
	const serializedState = localStorage.getItem('state');
	if (serializedState === null) {
	return undefined;
	}
	return JSON.parse(serializedState);
	} catch (err) {
	return undefined;
	<!DOCTYPE html>
	<html>
	<body>
	<div id="app">
	<h1>Hello Vanilla!</h1>
	<div class="app-wrapper">
	We use the same configuration as Parcel to bundle this sandbox, you can find more
	info about Parcel
	<hr />
	<div class="inner-block-card">
	body[data-theme="light"] {
	--app-background-color-200: #272727;
	/* we can apply more css selectors colors here */
	}

	body[data-theme="dark"] {
	--app-background-color-200: #787878;
	/* we can apply more css selectors colors here */
	}
	.app-name-wrapper {
	/* lots of code that wrapper covers */
	}

	.page-name-wrapper {
	/* For example, in amazon it would be .catalog-tv {} to apply css styles for tv catalog pages. */
	}

	/* As we continue we'll get and become more granular, smaller in responsibility, and encapsulating less and less code. For more part it can be achieved with 3-4 levels of responsibility */
	// myComponent.scss
	.my-component-wrapper {
	/// our encapsulated code goes here
	}

	// myComponent.jsx

	Import './my-component.css';
	export default const MyComponent = () => {
	// my component code
	.button {
	color: #000;
	}

	/* you can go above 100% */
	.button:hover {
	filter: brightness(85%);
	}

	<button class="button">some text of a button</button>
	:root {
	--app-background-color-200: #272727;
	--app-background-color-300: #474747;
	}

	.app-wrapper {
	background-color: var(--app-background-color-200);
	}
	(function viteshowconfig() {
	return {
	name: "show-config",
	config(config) {
	console.log("config", JSON.stringify(config, null, 4));
	},
	};
	})()
	function myPlugin(): Plugin {
	return {
	name: "examples of plugin api",
	transform: () => {
	console.log("transform!");
	}
	}
	// debounce.js
	export const debounce = (fnc, delay) => {
	let time;

	return function toBeExecuted(...args) {
	const later = () => {
	clearTimeout(time);
	fnc(...args);
	};