Lior Amsalem lior-amsalem

lior-amsalem / style.css

Created December 19, 2024 13:26

written in typescript and reactjs and typescript heres a toast

lior-amsalem / css-theme-example-index.html

Created July 16, 2022 11:08

	<!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">

lior-amsalem / css-theme-example-data-att.css

Created July 16, 2022 11:08

	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 */
	}

lior-amsalem / css-encapsulation.css

Created July 16, 2022 11:07

	.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 */

lior-amsalem / css-n-js-example.js

Created July 16, 2022 11:06

	// myComponent.scss
	.my-component-wrapper {
	/// our encapsulated code goes here
	}

	// myComponent.jsx

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

lior-amsalem / css-and-html.css

Created July 16, 2022 11:05

	.button {
	color: #000;
	}

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

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

lior-amsalem / css-vars.css

Created July 16, 2022 11:04

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

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

lior-amsalem / vite-show-config-plugin.js

Created June 28, 2022 18:07

show config in vite

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

lior-amsalem / vite-plugin-example.js

Created June 28, 2022 18:06

vite-plugin-example.js

lior-amsalem / debounce.js

Created January 6, 2022 09:59

debounce function to reduce calls to a target location (api/data writing etc)

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

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