From 8d7dcbcc8259e90c363d584b5ebfa5fef41124e1 Mon Sep 17 00:00:00 2001 From: Valentyn Vasylevskyy Date: Sat, 18 Jan 2025 19:16:55 +0200 Subject: [PATCH] add css and react docs --- .../Big_O.js | 0 .../_general.js | 0 .../depth-first-search.js | 0 .../tasks.js | 0 .../LeetCode => LeetCode}/1. Two Sum.js | 0 .../189. Rotate Array.js | 0 .../LeetCode => LeetCode}/412. Fizz Buzz.js | 0 .../LeetCode => LeetCode}/46. Permutations.js | 0 .../_top-interview-questions-leetcode.js | 0 README.md | 5 +- css/CSS.css | 141 +++++ css/SCSS.md | 496 ++++++++++++++++++ css/performance-and-optimization.md | 4 + {tech questions => db}/DB.md | 0 .../Angular.js | 0 .../AngularJS.js | 0 .../Ramda-Lodash-Underscore.js | 0 .../React.js | 0 frameworks_libs/React.md | 208 ++++++++ .../Redux-&-NgRx | 0 .../RxJS.js | 0 .../behavioral-questions.md | 0 .../general-questions.md | 0 .../offer-and-negotiation.md | 0 tech questions/GIT.md => git/git.md | 0 {tech questions => html}/HTML.html | 0 {tech questions/js => js}/Node.js | 0 {tech questions/js => js}/async.js | 0 .../js => js}/closure-scope-hoisting.js | 0 {tech questions/js => js}/js-general.js | 0 {tech questions/js => js}/prototypes.js | 0 {tech questions/js => js}/this.js | 0 tech questions/CSS.scss | 124 ----- ts/ts.md | 19 + .../js/TypeScript.js => ts/typescript.ts | 0 web/CORS.md | 5 + web/browser-dev-tools.md | 0 web/performance-and-optimization.md | 14 + 38 files changed, 889 insertions(+), 127 deletions(-) rename {tech questions/DS & Algorithms => DS & Algorithms}/Big_O.js (100%) rename {tech questions/DS & Algorithms => DS & Algorithms}/_general.js (100%) rename {tech questions/DS & Algorithms => DS & Algorithms}/depth-first-search.js (100%) rename {tech questions/DS & Algorithms => DS & Algorithms}/tasks.js (100%) rename {tech questions/LeetCode => LeetCode}/1. Two Sum.js (100%) rename {tech questions/LeetCode => LeetCode}/189. Rotate Array.js (100%) rename {tech questions/LeetCode => LeetCode}/412. Fizz Buzz.js (100%) rename {tech questions/LeetCode => LeetCode}/46. Permutations.js (100%) rename {tech questions/LeetCode => LeetCode}/_top-interview-questions-leetcode.js (100%) create mode 100644 css/CSS.css create mode 100644 css/SCSS.md create mode 100644 css/performance-and-optimization.md rename {tech questions => db}/DB.md (100%) rename {tech questions/frameworks_libs => frameworks_libs}/Angular.js (100%) rename {tech questions/frameworks_libs => frameworks_libs}/AngularJS.js (100%) rename {tech questions/frameworks_libs => frameworks_libs}/Ramda-Lodash-Underscore.js (100%) rename {tech questions/frameworks_libs => frameworks_libs}/React.js (100%) create mode 100644 frameworks_libs/React.md rename {tech questions/frameworks_libs => frameworks_libs}/Redux-&-NgRx (100%) rename {tech questions/frameworks_libs => frameworks_libs}/RxJS.js (100%) rename behavioral-questions.md => general/behavioral-questions.md (100%) rename {tech questions => general}/general-questions.md (100%) rename offer-and-negotiation.md => general/offer-and-negotiation.md (100%) rename tech questions/GIT.md => git/git.md (100%) rename {tech questions => html}/HTML.html (100%) rename {tech questions/js => js}/Node.js (100%) rename {tech questions/js => js}/async.js (100%) rename {tech questions/js => js}/closure-scope-hoisting.js (100%) rename {tech questions/js => js}/js-general.js (100%) rename {tech questions/js => js}/prototypes.js (100%) rename {tech questions/js => js}/this.js (100%) delete mode 100644 tech questions/CSS.scss create mode 100644 ts/ts.md rename tech questions/js/TypeScript.js => ts/typescript.ts (100%) create mode 100644 web/CORS.md create mode 100644 web/browser-dev-tools.md create mode 100644 web/performance-and-optimization.md diff --git a/tech questions/DS & Algorithms/Big_O.js b/DS & Algorithms/Big_O.js similarity index 100% rename from tech questions/DS & Algorithms/Big_O.js rename to DS & Algorithms/Big_O.js diff --git a/tech questions/DS & Algorithms/_general.js b/DS & Algorithms/_general.js similarity index 100% rename from tech questions/DS & Algorithms/_general.js rename to DS & Algorithms/_general.js diff --git a/tech questions/DS & Algorithms/depth-first-search.js b/DS & Algorithms/depth-first-search.js similarity index 100% rename from tech questions/DS & Algorithms/depth-first-search.js rename to DS & Algorithms/depth-first-search.js diff --git a/tech questions/DS & Algorithms/tasks.js b/DS & Algorithms/tasks.js similarity index 100% rename from tech questions/DS & Algorithms/tasks.js rename to DS & Algorithms/tasks.js diff --git a/tech questions/LeetCode/1. Two Sum.js b/LeetCode/1. Two Sum.js similarity index 100% rename from tech questions/LeetCode/1. Two Sum.js rename to LeetCode/1. Two Sum.js diff --git a/tech questions/LeetCode/189. Rotate Array.js b/LeetCode/189. Rotate Array.js similarity index 100% rename from tech questions/LeetCode/189. Rotate Array.js rename to LeetCode/189. Rotate Array.js diff --git a/tech questions/LeetCode/412. Fizz Buzz.js b/LeetCode/412. Fizz Buzz.js similarity index 100% rename from tech questions/LeetCode/412. Fizz Buzz.js rename to LeetCode/412. Fizz Buzz.js diff --git a/tech questions/LeetCode/46. Permutations.js b/LeetCode/46. Permutations.js similarity index 100% rename from tech questions/LeetCode/46. Permutations.js rename to LeetCode/46. Permutations.js diff --git a/tech questions/LeetCode/_top-interview-questions-leetcode.js b/LeetCode/_top-interview-questions-leetcode.js similarity index 100% rename from tech questions/LeetCode/_top-interview-questions-leetcode.js rename to LeetCode/_top-interview-questions-leetcode.js diff --git a/README.md b/README.md index 2e8ea92..081229d 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,3 @@ -# Readme.md +# About -- fold all: `Ctrl + K + 0` -- unfold all: `Ctrl + K + J` +Here I store crucial info to prepare to the interview for both, a candidate and interviewer. diff --git a/css/CSS.css b/css/CSS.css new file mode 100644 index 0000000..18928a9 --- /dev/null +++ b/css/CSS.css @@ -0,0 +1,141 @@ +/* + - ABCD, priority rules + - preprocessors (Sass, Less) + - frameworks (Bootstrap, Material) + - BEM (block__element--modifier) + - flex vs grid + - units (px, em, rem, %) +*/ + +/* Flexbox (1-dimensional layout system) */ +.flex-container { + display: flex; + flex-direction: row; + flex-wrap: wrap; + + /* horizontal alignment (flex-start, flex-end, center, space-around, space-between) */ + justify-content: center; + /* vertical alignment (flex-start, flex-end, center, baseline, stretch) */ + align-items: center; + + .flex-item { + order: 1; + /* flex: [grow] [shrink] [basis], default: 0 1 auto */ + flex: 1 1 100px; + /* distribute extra space, default: 0 */ + flex-grow: 1; + /* defines how box shrinks, default: 1 */ + flex-shrink: 3; + /* min width */ + flex-basis: 100px; + /* will overwrite vertical align-items (flex-start, flex-end, center) */ + align-self: flex-start; + } +} + +/* Grid (2-dimensional layout system) */ +.grid-container { + /* grid | inline-grid */ + display: grid; + /* 3 cols, divide remaining space evenly */ + grid-template-columns: 100px auto 20%; + /* 2 rows, divide remaining space evenly */ + grid-template-rows: auto auto; + + /* center, start, end, space-evenly, space-around */ + justify-content: center; + /* center, start, end, space-evenly, space-around, space-between */ + align-content: center; + + grid-row-gap: 200px; + grid-column-gap: 150px; + grid-gap: 200px 150px; /* row col */ + + .grid-item { + /* row-start / col-start / row-end / col-end */ + grid-area: 2 / 1 / span 2 / span 3; + /* grid-column-start / grid-column-end, == (1 / span 2) */ + grid-column: 1 / 3; + /* grid-row-start / grid-row-end, == (1 / span 2) */ + grid-row: 2 / 3; + } +} + +/* responsive design - media query*/ +@media only screen and (max-width: 800px) { +} + +/* keyframe, transition, animations */ +@keyframes bounce { +} +.keyframe { + animation: bounce 2s infinite; +} + +/* overflow: hidden */ + +* { + box-sizing: border-box; +} + +#display { + display: block; + display: inline; + display: inline-block; + + display: table; + display: flex; + display: grid; + + display: contents; + display: none; +} + +#position { + position: static; + position: relative; + position: absolute; + position: fixed; + position: sticky; +} + +/* Selectors */ +div.p + div p + div, p + div > p + div + p + div ~ p + [attr=value] + a:hover + a::before, a::after + +/* How to center an element? */ +.center-block { + text-align: center; + margin: o auto; +} + +.center-flex { + display: flex; + align-items: center; + justify-content: center; +} + +/* How to style React, what approach you know? + - global BEM + - Styled Components + - CSS Modules + - Inline styles +*/ + +/* box-sizing: content-box | padding-box | border-box */ +html { + box-sizing: border-box; +} + +*, +*:before, +*:after { + box-sizing: inherit; +} diff --git a/css/SCSS.md b/css/SCSS.md new file mode 100644 index 0000000..7422e41 --- /dev/null +++ b/css/SCSS.md @@ -0,0 +1,496 @@ +# SCSS + +SCSS is a CSS preprocessor (and CSS superset). + +[Playground](https://sass-lang.com/playground/) + +## Features + +### Variables, Maps + +```scss +$one: #333; +$two: #000 !default; // assigns only if it was not assigned so far +$colors-map: ( + "success": #28a745, + "info": #17a2b8, + "warning": #ffc107, + dark: ( + "success": #28a745, + "info": #17a2b8, + "warning": #ffc107, + ); +); + +.selector { + color: $one; // color: #333; + color: map.get($colors-map, "warning"); +} +``` + +### Nesting + +`&` is a parent selector. + +```scss +.selector { + $selector-ref: &; // $selector-ref: .selector; + &-item {} // .selector-item {} + &:hover {} // .selector:hover {} + &.selector {} // .selector.selector {} + .inner {} // .selector .inner {} + .outer & {} // .outer .selector {} + :not(&) {} // :not(.selector) {} + &__copy { // .selector__copy + &--open {} // .selector__copy--open + } +} +``` + +How to determine if `&` is present: + +```scss +@mixin app-background($color) { + #{if(&, '&.app-background', '.app-background')} { + background-color: $color; + } +} + +// .app-background { background-color: #036; } +@include app-background(#036); + +// .selector.app-background { background-color: #c6538c; } +.selector { + @include app-background(#c6538c); +} +``` + +### Partials + +Partial files should start with `_` name prefix. + +Partial files are not transpiled into css, meaning `_partial.scss` won't become `partial.css` but will be ignored by SCSS preprocessor. + +```scss +// using `_partial.scss` + +@use 'partial'; +``` + +### Modules + +`@use 'file'` - This rule loads another Sass file as a module, which means you can refer to its variables, mixins, and functions in your Sass file with a namespace based on the filename + +- No need to write a file extension. +- Generates a namespace same as a file name: + +```scss +// _base.scss + +$font-stack: Helvetica, sans-serif; +$primary-color: #333; + +body { + font: 100% $font-stack; + color: $primary-color; +} +``` + +```scss +// styles.scss + +@use 'colors'; +// @use 'colors' as alias; + +@use 'library' with ( + $black: #222, + $border-radius: 0.1rem +); + +.selector { + background-color: colors.$primary-color; + // background-color: alias.$primary-color; +} +``` + +```css +/* transpiled styles.css */ + +body { + font: 100% Helvetica, sans-serif; + color: #333; +} + +.selector { + background-color: #333; +} +``` + +#### Modules provided by SCSS + +```scss +@use "sass:math"; // +, -, *, %, math.div() +@use "sass:selector"; // selector.unify(...) +@use "sass:list"; +@use "sass:color"; +``` + +### Mixins + +`@mixin` is a group of reusable CSS declarations, it will be replaced with an actual code in places where it is included. + +```scss +//scss + +@mixin theme($theme: DarkGray) { + background: $theme; + box-shadow: 0 0 1px rgba($theme, .25); + color: #fff; +} + +.selector { + @include theme; + // @include theme($theme: DarkRed); + // @include theme($theme: DarkRed) { + // ...content + // }; +} +``` + +```scss +// css + +.selector { + background: DarkGray; + box-shadow: 0 0 1px rgba(169, 169, 169, 0.25); + color: #fff; +} +``` + +### Extend/Inheritance (Placeholder Selectors) + +`%shared` declares a group of css, and instead of being replaced in places where it is extended, only one selector will be created including all selectors which extent it via comma. + +```scss +//scss + +%shared { + border: 1px solid #ccc; + padding: 10px; + color: #333; +} + +.selector { + @extend %shared; + border-color: green; +} +``` + +```scss +// css + +.selector { + background: DarkGray; + box-shadow: 0 0 1px rgba(169, 169, 169, 0.25); + color: #fff; +} +``` + +### `@mixin` vs `%extendable` + +The difference lies in the resulting CSS and a way of usage: + +`@include mixin` will be replaced with the actual code in every place it is included. It might result in a code duplication in a separate selectors. Mixins can receive an arguments. + +```scss +// scss + +@mixin shared-bg { + background-color: #333; +} + +.one { + @include shared-bg; + color: red; +} + +.two { + @include shared-bg; + color: red; +} +``` + +```scss +// css + +.one { + background-color: #333; + color: red; +} + +.two { + background-color: #333; + color: red; +} +``` + +`@extend %extendable` won't be included into the target selector, instead there will be create one big selector for all it's usages separated by comma. Usually better to use when you are expressing a relationship between semantic classes (`.error` and `.error-serious`) + +```scss +// scss + +// .error-base { +%error-base { + background-color: #333; +} + +.error-one { + @extend %shared-bg; + color: red; +} + +.error-two { + @extend %shared-bg; + color: red; +} +``` + +```scss +// css + +.error-two, .error-one { + background-color: #333; +} + +.error-one { + color: red; +} + +.error-two { + color: red; +} +``` + +### Operators + +```scss +// +, -, *, %, math.div() +@use "sass:math"; + +.selector { + width: math.div(600px, 960px) * 100%; // 62.5% +} +``` + +### `@` at-rules + +#### Loading / Importing styles + +``` scss +// loads mixins, functions, and variables from other Sass stylesheets, and combines CSS from multiple stylesheets together. +@use './partial'; + +// loads a Sass stylesheet and makes its mixins, functions, and variables available when your stylesheet is loaded with the @use rule. +@forward './partial'; + +// extends the CSS at-rule to load styles, mixins, functions, and variables from other stylesheets. Does it during the compilation unlike CSS which sends HTTP requests during run-time. +// IMPORTANT: it is deprecated, and it is recommended to use `@use` instead. `@import` makes everything globally accessible which might result in naming collisions. @extent rule is also global +@import './partial'; +``` + +#### Mixins / Extensions / Functions + +``` scss +// makes it easy to re-use chunks of styles. +@mixin my-mixin {} +@include my-mixin; + +// allows selectors to inherit styles from one another. Generates GLOBAL styles +%placeholder {} +@extend %placeholder; +@extend .selector; +@extend .selector !optional; + +// defines custom functions that can be used in SassScript expressions. +@function my-func($arg, $optional: 'default-value', $rest...) { + @return 'return-value'; +}; +$prop: my-func(3); +$prop: my-func($arg, $optional: 3px); +$prop: my-func($arg, $optional: 3px, 1 2 3); +$list: 1,2,3; +$prop: my-func($arg, $optional: 3px, $list...); +``` + +#### `@at-root` + +``` scss +// puts styles within it at the root of the CSS document. +// It’s most often used when doing advanced nesting with the SassScript parent selector and selector functions. +@at-root .selector {} +``` + +#### Flow control + +``` scss +// if + +@if($rounded-corners, 5px, null) {}; + +@if not index($known-prefixes, $prefix) { + @warn "Unknown prefix #{$prefix}."; +} + +@if $property != left and $property != right { + @error "Property #{$property} is invalid."; +} + +$value: if($property == right, initial, $value); +``` + +``` scss +// each + +@each $item in $items {}; +``` + +#### Debugging + +``` scss +@debug $variable; +@debug "divider offset: #{$divider-offset}"; + +@warn $variable; +@warn "Unknown prefix #{$prefix}."; + +@error $variable; +@error $variable; +``` + +### Interpolation (dynamic properties) + +``` scss +// scss + +$id: 'one'; + +@mixin prefix($property, $value, $prefixes) { + @each $prefix in $prefixes { + -#{$prefix}-#{$property}: $value; + } + #{$property}: $value; +} + +.selector-#{$id} { + @include prefix(filter, grayscale(50%), moz webkit); +} +``` + +``` scss +// css + +.selector-one { + -moz-filter: grayscale(50%); + -webkit-filter: grayscale(50%); + filter: grayscale(50%); +} +``` + +Interpolation with numbers is a bad idea + +``` scss +$width-as-number: 20; +$width-as-px: 20px; + +// DON"T +prop: #{$width-as-number}px + +// DO +prop: $width-as-number * 1px +prop: $width-as-px +``` + +### `@content` + +A content block is lexically scoped, which means it can only see local variables in the scope where the mixin is included + +```scss +// @content in @keyframes + +@mixin keyframes($name) { + @-moz-keyframes #{$name}, + @-webkit-keyframes #{$name} + @keyframes #{$name} { + @content; + } +} + +@include keyframes(fadeIn) { + from { opacity: 0%; } + to { opacity: 100%; } +} +``` + +```scss +// @content in @mixin + +@mixin hover { + &:hover { + // list of default rules + @content; + } +} + +.selector { + @include hover { + border-width: 2px; + } +} + +// @content in @mixin (passing args) + +@mixin media($types...) { + @each $type in $types { + @media #{$type} { + @content($type); + } + } +} + +@include media(screen, print) using ($type) { + h1 { + @if $type == print { + font-family: Calluna; + } + } +} +``` + +```scss +// @content in @media queries + +@mixin small-screen { + @media screen and (min-width: 800px;) { + @content; + } +} + +@include small-screen { + .container { + width: 600px; + } +} + +// css result + +@media screen and (min-width: 800px;) { + .container { + width: 600px; + } +} +``` + +```scss +@content in Keyframes/Animations + +``` diff --git a/css/performance-and-optimization.md b/css/performance-and-optimization.md new file mode 100644 index 0000000..b476eec --- /dev/null +++ b/css/performance-and-optimization.md @@ -0,0 +1,4 @@ +# CSS performance & Optimization tips + +- @import is slow, don't use it. +Replace `@import url("imported.css");` with `` (or if you can't remove @import - use ``). Inside scss - use `@use`, `@forward` instead of `@import`. diff --git a/tech questions/DB.md b/db/DB.md similarity index 100% rename from tech questions/DB.md rename to db/DB.md diff --git a/tech questions/frameworks_libs/Angular.js b/frameworks_libs/Angular.js similarity index 100% rename from tech questions/frameworks_libs/Angular.js rename to frameworks_libs/Angular.js diff --git a/tech questions/frameworks_libs/AngularJS.js b/frameworks_libs/AngularJS.js similarity index 100% rename from tech questions/frameworks_libs/AngularJS.js rename to frameworks_libs/AngularJS.js diff --git a/tech questions/frameworks_libs/Ramda-Lodash-Underscore.js b/frameworks_libs/Ramda-Lodash-Underscore.js similarity index 100% rename from tech questions/frameworks_libs/Ramda-Lodash-Underscore.js rename to frameworks_libs/Ramda-Lodash-Underscore.js diff --git a/tech questions/frameworks_libs/React.js b/frameworks_libs/React.js similarity index 100% rename from tech questions/frameworks_libs/React.js rename to frameworks_libs/React.js diff --git a/frameworks_libs/React.md b/frameworks_libs/React.md new file mode 100644 index 0000000..0e98dae --- /dev/null +++ b/frameworks_libs/React.md @@ -0,0 +1,208 @@ +# React + +## React Essentials + +```tsx +// Importing stuff + +import { LIST } from "./data"; + +import Component from "./Component"; + +import "./Component.css"; // public styles + +import svg from "/vite.svg"; // import from public folder +import svg from "../../assets/react.svg"; // import from relative path +``` + +```tsx +// Simple component + +// Uppercase +export default function Component() { + return ( + // only one container allowed + <> +
Content
+ + + ) +} +``` + +```tsx +// Passing props + + + + +function Component(props) +function Component({ id, ...props }) // forward props pattern +function Component({ prop1, prop2, onCustomEventCallback }) +function Component({ element = 'div' }) // default props pattern +``` + +```tsx +// Passing content + + + Access content via `children` prop + +``` + +```tsx +// Passing extra jsx slot (ng-container select) + +export default function App() { + const buttons = ( + <> + handleClick('tab 1')} /> + handleClick('tab 2')} /> + + ); + + return ( + + {tabContent} + + ); +} + +export default function Tabs({children, tabs}) { + return ( + // only one container allowed + <> + {tabs} + {children} + + ) +} +``` + +```tsx +// Passing desired element or Component + + + + +export default function Tabs({tabsContainer}) { + const TabsContainer = tabsContainer; + return ( text ); +} +``` + +```tsx +// Render jsx and content + +// children prop contains passed content +function Component({ children }) { + const content = ''; + + if (condition) { + content = (
test
); + } + + return ( + {/* fragment (aka ng-container) - not rendered into DOM */} + <> + {/* render passed content */} + {children} + + {/* render previously prepared jsx */} + {content} + + {/* render conditional content */} + {condition &&

text

} + {!condition ?

text

: null} + {!condition ? (

text 1

) : (

text 2

)} + + + {/* render list */} + {[...].map((item, index) => ( + + + ))} + + {/* render icon */} + + + ) +} +``` + +```tsx +// Events, callbacks + + + handleTabClick("Tab 2")} /> + handleTabClick(args)} /> + +export default function Tab({ onTabClick}) { + return ( + + + ); +}; + +// or using forward props + + handleTabClick(index)} /> + +export default function Tab({ ...props }) { + return ( + + ); +}; + +``` + +```tsx +// Providing styles using `className` + + +``` + +```tsx +// State + + // when changed - component func is re-executed !!!!! + const [count, setCount] = useState(0); +``` + +## React Patterns + +### Forward/Proxy/Rest props + +Use `...props` into a wrapper components, and use those in its jsx + +```tsx + handleTabClick(index)} /> + +export default function Tab({ ...props }) { + return ( + + ); +}; +``` + +### Pass desired element/component type + +```tsx +// Passing desired element or Component + + + + +export default function Tabs({tabsContainer}) { + const TabsContainer = tabsContainer; + return ( text ); +} +// or +export default function Tabs({TabsContainer}) { + return ( text ); +} +``` diff --git a/tech questions/frameworks_libs/Redux-&-NgRx b/frameworks_libs/Redux-&-NgRx similarity index 100% rename from tech questions/frameworks_libs/Redux-&-NgRx rename to frameworks_libs/Redux-&-NgRx diff --git a/tech questions/frameworks_libs/RxJS.js b/frameworks_libs/RxJS.js similarity index 100% rename from tech questions/frameworks_libs/RxJS.js rename to frameworks_libs/RxJS.js diff --git a/behavioral-questions.md b/general/behavioral-questions.md similarity index 100% rename from behavioral-questions.md rename to general/behavioral-questions.md diff --git a/tech questions/general-questions.md b/general/general-questions.md similarity index 100% rename from tech questions/general-questions.md rename to general/general-questions.md diff --git a/offer-and-negotiation.md b/general/offer-and-negotiation.md similarity index 100% rename from offer-and-negotiation.md rename to general/offer-and-negotiation.md diff --git a/tech questions/GIT.md b/git/git.md similarity index 100% rename from tech questions/GIT.md rename to git/git.md diff --git a/tech questions/HTML.html b/html/HTML.html similarity index 100% rename from tech questions/HTML.html rename to html/HTML.html diff --git a/tech questions/js/Node.js b/js/Node.js similarity index 100% rename from tech questions/js/Node.js rename to js/Node.js diff --git a/tech questions/js/async.js b/js/async.js similarity index 100% rename from tech questions/js/async.js rename to js/async.js diff --git a/tech questions/js/closure-scope-hoisting.js b/js/closure-scope-hoisting.js similarity index 100% rename from tech questions/js/closure-scope-hoisting.js rename to js/closure-scope-hoisting.js diff --git a/tech questions/js/js-general.js b/js/js-general.js similarity index 100% rename from tech questions/js/js-general.js rename to js/js-general.js diff --git a/tech questions/js/prototypes.js b/js/prototypes.js similarity index 100% rename from tech questions/js/prototypes.js rename to js/prototypes.js diff --git a/tech questions/js/this.js b/js/this.js similarity index 100% rename from tech questions/js/this.js rename to js/this.js diff --git a/tech questions/CSS.scss b/tech questions/CSS.scss deleted file mode 100644 index a6c8554..0000000 --- a/tech questions/CSS.scss +++ /dev/null @@ -1,124 +0,0 @@ -/* - - ABCD, priority rules - - preprocessors (Sass, Less) - - frameworks (Bootstrap, Material) - - BEM (block__element--modifier) - - flex vs grid - - units (px, em, rem, %) -*/ - -// Flexbox (1-dimensional layout system) -.flex-container { - display: flex; - flex-direction: row; - flex-wrap: wrap; - - justify-content: center; // horisontal allignment (flex-start, flex-end, center, space-around, space-between) - align-items: center; // vertical allignment (flex-start, flex-end, center, baseline, stretch) - - & .flex-item { - order: 1; - flex: 1 1 100px; // grow shrink basis, default: 0 1 auto - flex-grow: 1; // distribute extra space, default: 0 - flex-shrink: 3; // defines how box shrinks, default: 1 - flex-basis: 100px; // min width - align-self: flex-start; // will overwrite vertical align-items (flex-start, flex-end, center) - } -} - -// Grid (2 dimentional layout system) -.grid-container { - display: grid; // grid | inline-grid - grid-template-columns: 100px auto 20%; // 3 cols, divide remaining space evenly - grid-template-rows: auto auto; // 2 rows, divide remaining space evenly - - justify-content: center; // center, start, end, space-evenly, space-around - align-content: center; // center, start, end, space-evenly, space-around, space-between - - grid-row-gap: 200px; - grid-column-gap: 150px; - grid-gap: 200px 150px; // row col - - & .grid-item { - grid-area: 2 / 1 / span 2 / span 3; // row-start / col-start / row-end / col-end - grid-column: 1 / 3; // grid-column-start / grid-column-end, == (1 / span 2) - grid-row: 2 / 3; // grid-row-start / grid-row-end, == (1 / span 2) - } -} - -/* responsive design - media query*/ -@media only screen and (max-width: 800px) { -} - -/* keyframe, transition, animations */ -@keyframes bounce { -} -.keyframe { - animation: bounce 2s infinite; -} - -/* overflow: hidden */ - -* { - box-sizing: border-box; -} - -#display { - display: block; - display: inline; - display: inline-block; - - display: table; - display: flex; - display: grid; - - display: contents; - display: none; -} - -#position { - position: static; - position: relative; - position: absolute; - position: fixed; - position: sticky; -} - -/* Selectors */ -div.p - div p - div, p - div > p - div + p - div ~ p - [attr=value] - a:hover - a::before, a::after - -/* How to center an element? */ -.center-block { - text-align: center; - margin: o auto; -} -.center-flex { - display: flex; - align-items: center; - justify-content: center; -} - -/* How to style React, what approach you know? - - global BEM - - Styled Components - - CSS Modules - - Inline styles -*/ - -// box-sizing: content-box | padding-box | border-box -html { - box-sizing: border-box; -} -*, -*:before, -*:after { - box-sizing: inherit; -} diff --git a/ts/ts.md b/ts/ts.md new file mode 100644 index 0000000..5cb17cb --- /dev/null +++ b/ts/ts.md @@ -0,0 +1,19 @@ +# TypeScript Cheat Sheets + +[Source](https://www.typescriptlang.org/cheatsheets/) + +## Interface + +![Interface](https://www.typescriptlang.org/static/TypeScript%20Interfaces-34f1ad12132fb463bd1dfe5b85c5b2e6.png) + +## Type + +![Type](https://www.typescriptlang.org/static/TypeScript%20Types-ae199d69aeecf7d4a2704a528d0fd3f9.png) + +## Class + +![Class](https://www.typescriptlang.org/static/TypeScript%20Classes-83cc6f8e42ba2002d5e2c04221fa78f9.png) + +## Control Flow Analysis + +![Control Flow Analysis](https://www.typescriptlang.org/static/TypeScript%20Control%20Flow%20Analysis-8a549253ad8470850b77c4c5c351d457.png) diff --git a/tech questions/js/TypeScript.js b/ts/typescript.ts similarity index 100% rename from tech questions/js/TypeScript.js rename to ts/typescript.ts diff --git a/web/CORS.md b/web/CORS.md new file mode 100644 index 0000000..a796685 --- /dev/null +++ b/web/CORS.md @@ -0,0 +1,5 @@ +# CORS (Cross-Origin Resource Sharing) + +JSONP + +Browser plugins diff --git a/web/browser-dev-tools.md b/web/browser-dev-tools.md new file mode 100644 index 0000000..e69de29 diff --git a/web/performance-and-optimization.md b/web/performance-and-optimization.md new file mode 100644 index 0000000..3c01b21 --- /dev/null +++ b/web/performance-and-optimization.md @@ -0,0 +1,14 @@ +# Web performance & Optimization tips + +- Get different performance info using: + - Browser Dev Tools (`Lighthouse`, `Performance`, `Network`) + - Framework-specific browser plugins + +- Optimize images: + - compress image size, + - convert to modern formats like WebP + - Resize images to the exact size you need them + - create responsive images with `srcset` to offer smaller sizes + - lazy load with `loading="lazy"` or prioritize loading with `fetchpriority="high"` + - use js framework tools for image optimization + - use CDN if that makes sense \ No newline at end of file