Lior Amsalem lior-amsalem
lior-amsalem
/ css-theme-example-index.html
Created
July 16, 2022 11:08
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .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
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // 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
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .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
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| :root { | |
| --app-background-color-200: #272727; | |
| --app-background-color-300: #474747; | |
| } | |
| .app-wrapper { | |
| background-color: var(--app-background-color-200); | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| (function viteshowconfig() { | |
| return { | |
| name: "show-config", | |
| config(config) { | |
| console.log("config", JSON.stringify(config, null, 4)); | |
| }, | |
| }; | |
| })() |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| function myPlugin(): Plugin { | |
| return { | |
| name: "examples of plugin api", | |
| transform: () => { | |
| console.log("transform!"); | |
| } | |
| } |
lior-amsalem
/ debounce.js
Created
January 6, 2022 09:59
debounce function to reduce calls to a target location (api/data writing etc)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // debounce.js | |
| export const debounce = (fnc, delay) => { | |
| let time; | |
| return function toBeExecuted(...args) { | |
| const later = () => { | |
| clearTimeout(time); | |
| fnc(...args); | |
| }; | |
lior-amsalem
/ store.js
Created
January 6, 2022 09:57
redux store with localstorage api stitch together
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // store.js | |
| import { configureStore } from "@reduxjs/toolkit"; | |
| import scoreBoardSlice from '../ScoreBoard/scoreBoardSlice'; // ignore | |
| import { loadState, saveState } from './localStorage'; // <-- our utility of localstorage | |
| import { debounce } from './index'; // <-- our utility to prevent writing too often. | |
| const persistedState = loadState(); | |
| const store = configureStore({ | |
| reducer: scoreBoardSlice.reducer, | |
| preloadedState: persistedState, // <--- where we pre-load data we saved to local storeage |
NewerOlder