├── REGEX.md ├── TimeManagement.md ├── JSON.md ├── Diagrams.md ├── Icons.md ├── WebAccessibility.md ├── Tools.md ├── ManageLead.md ├── AI.md ├── Infrastructure.md ├── Git.md ├── README.md ├── LICENSE ├── React.md ├── Architecture.md ├── CSS.md ├── DeepDiveConcepts.md └── TipsTricks.md /REGEX.md: -------------------------------------------------------------------------------- 1 | ### Useful Links for Regex 2 | --- 3 | 4 | Regular Expression visualizer - https://jex.im/regulex/ 5 | 6 | English to Regex and vice versa - https://www.autoregex.xyz/ 7 | -------------------------------------------------------------------------------- /TimeManagement.md: -------------------------------------------------------------------------------- 1 | ### Useful Links for Time Management 2 | --- 3 | 4 | Pomodoro Technique - https://todoist.com/productivity-methods/pomodoro-technique 5 | 6 | Eisenhower Matrix - https://addyosmani.com/blog/eisenhower-matrix 7 | -------------------------------------------------------------------------------- /JSON.md: -------------------------------------------------------------------------------- 1 | ### Useful Links working with JSON 2 | --- 3 | 4 | Convert JSON into typesafe code - https://quicktype.io/ 5 | 6 | Visualize JSON into diagram - https://jsoncrack.com/ 7 | 8 | Clean and beautiful UI packed JSON - https://jsonhero.io/ 9 | -------------------------------------------------------------------------------- /Diagrams.md: -------------------------------------------------------------------------------- 1 | ### Useful Links for Diagrams 2 | --- 3 | 4 | Excalidraw (sketch style) - https://excalidraw.com/ 5 | 6 | Diagram (comprehensive)- https://app.diagrams.net/ 7 | 8 | Miro - https://miro.com/ 9 | 10 | Eraser - https://www.eraser.io/ 11 | -------------------------------------------------------------------------------- /Icons.md: -------------------------------------------------------------------------------- 1 | ### Useful Links for Icons 2 | --- 3 | 4 | Animated icons - https://unicornicons.com/icons 5 | 6 | Consistent icons - https://atlasicons.vectopus.com 7 | 8 | Animated toggles - https://toggles.dev/ 9 | 10 | React Icons - https://react-icons.github.io/react-icons 11 | -------------------------------------------------------------------------------- /WebAccessibility.md: -------------------------------------------------------------------------------- 1 | ### Useful Links for working with Accessibility 2 | --- 3 | 4 | HTML & CSS Accessibility guide part 1 - https://www.smashingmagazine.com/2022/11/guide-keyboard-accessibility-html-css-part1 5 | 6 | JS Accessibility guide part 2 - https://www.smashingmagazine.com/2022/11/guide-keyboard-accessibility-javascript-part2/ 7 | -------------------------------------------------------------------------------- /Tools.md: -------------------------------------------------------------------------------- 1 | ### Useful Links for Tools 2 | --- 3 | 4 | Remove image Background - https://www.remove.bg/ 5 | 6 | Readme file helper - https://readme.so/editor 7 | 8 | WebP, PNG, and JPEG compression - https://tinypng.com/ 9 | 10 | Calculate package bundle's size - https://bundlephobia.com/ 11 | 12 | JWT decode, verify and generate - https://jwt.io 13 | 14 | Web performance checker - https://yellowlab.tools/ 15 | -------------------------------------------------------------------------------- /ManageLead.md: -------------------------------------------------------------------------------- 1 | Expectations from developer's rank - https://dafir.medium.com/what-we-expect-from-software-developers-on-each-level-f7b44abb71da 2 | 3 | Switching from Engineering to Management - https://vadimkravcenko.com/en/switching-from-engineering-to-management 4 | 5 | SMART goals - https://www.forgov.qld.gov.au/recruitment-performance-and-career/employee-management-conduct-and-performance/positively-manage-employees/smart-performance-goals 6 | -------------------------------------------------------------------------------- /AI.md: -------------------------------------------------------------------------------- 1 | ### Useful Links for AI related topics 2 | --- 3 | 4 | ChatGPT prompts for web developers - https://www.builder.io/blog/ai-prompts-for-web-developers-chatgpt 5 | 6 | Generative user interface system - https://v0.dev/ 7 | 8 | Generate meaningful tests and code explanations - https://www.codium.ai/ 9 | 10 | Graph generator - https://github.com/varunshenoy/GraphGPT 11 | 12 | Personal AI - https://pi.ai 13 | 14 | Icon image generator - https://icons8.com/illustration-generator/ 15 | 16 | Generate Visuals from Text - https://www.napkin.ai/ 17 | 18 | Generate Web Apps Code using AI - https://bolt.new/ 19 | 20 | How Gen AI text works (include animations) - https://ig.ft.com/generative-ai/ 21 | 22 | Generate Code using AI - https://lovable.dev/ 23 | 24 | Build App using AI - https://base44.com/ 25 | -------------------------------------------------------------------------------- /Infrastructure.md: -------------------------------------------------------------------------------- 1 | ### Useful Links for Code infrastructure 2 | --- 3 | 4 | Comment build files using Webpack - https://medium.com/nmc-techblog/comment-build-files-using-webpack-682db137b520 5 | 6 | Storybook with examples - https://medium.com/litslink/storybook-in-examples-beginners-guide-6179cf83e1b6 7 | 8 | Eslint, Prettier & Husky - https://artem-diashkin.medium.com/react-js-adding-eslint-with-prettier-husky-git-hook-480ad39e65e9 9 | 10 | Docker for Frontend developers - https://dev.to/akanksha_9560/docker-for-frontend-developers-1dk5 11 | 12 | Component generator using plop - https://medium.com/nmc-techblog/monorepo-components-generator-lerna-plop-2aa7f27a597a 13 | 14 | npm tips & tricks - https://javascript.plainenglish.io/as-a-front-end-engineer-8-useful-npm-coding-techniques-that-you-should-use-bc30b8503ba4 15 | 16 | How Yarn lock files work - https://robertcooper.me/post/how-yarn-lock-files-work-and-upgrading-dependencies 17 | -------------------------------------------------------------------------------- /Git.md: -------------------------------------------------------------------------------- 1 | ### Useful Links for Git 2 | --- 3 | 4 | Git concepts - https://dev.to/g_abud/advanced-git-reference-1o9j 5 | 6 | Effective pull request - https://nebulab.com/blog/a-guide-to-effective-pull-request-reviews 7 | 8 | Git cheatsheet - http://git-cheatsheet.com/ 9 | 10 | Specification for conventional commits - https://www.conventionalcommits.org/en/v1.0.0/ 11 | 12 | Find Git command by AI driven - https://www.gitfluence.com/ 13 | 14 | Git under the hood - https://towardsdatascience.com/how-git-truly-works-cd9c375966f6 (Good example - [gist](https://gist.github.com/branneman/6501d0d2310256396091400dc30b3e31)) 15 | 16 | Merge vs Rebase - https://www.atlassian.com/git/tutorials/merging-vs-rebasing 17 | 18 | Interactive Git Learning - https://learngitbranching.js.org/ 19 | 20 | Visualized Git Commands - https://dev.to/lydiahallie/cs-visualized-useful-git-commands-37p1 21 | 22 | Git Branch Strategy - https://www.gitkraken.com/learn/git/best-practices/git-branch-strategy 23 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |
2 | 3 | 4 | 5 |
6 | 7 | # Useful Links for Developers - Mostly Web developers. 8 | 9 | Each item is directed to md file with useful articles. 10 | 11 | [AI](AI.md) 12 | 13 | [Architecture](Architecture.md) 14 | 15 | [CSS tools](CSS.md) 16 | 17 | [Deep Dive concepts](DeepDiveConcepts.md) 18 | 19 | [Diagrams](Diagrams.md) 20 | 21 | [Git](Git.md) 22 | 23 | [Icons](Icons.md) 24 | 25 | [Infrastructure](Infrastructure.md) 26 | 27 | [Manage - Lead](ManageLead.md) 28 | 29 | [React](React.md) 30 | 31 | [Time Management](TimeManagement.md) 32 | 33 | [Tips & Tricks](TipsTricks.md) 34 | 35 | [Tools](Tools.md) 36 | 37 | [Web Accessibility](WebAccessibility.md) 38 | 39 | [Work with JSON](JSON.md) 40 | 41 | [Work with Regex](REGEX.md) 42 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2022 Yaronglp 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /React.md: -------------------------------------------------------------------------------- 1 | ### Useful Links for React 2 | --- 3 | 4 | Clean code & Naming conventions - https://dev.to/sathishskdev/part-1-naming-conventions-the-foundation-of-clean-code-51ng 5 | 6 | Folder Structure - https://dev.to/sathishskdev/part-2-folder-structure-building-a-solid-foundation-omh 7 | 8 | Component Structure - https://dev.to/sathishskdev/part-3-component-structure-building-reusable-and-maintainable-components-in-react-54n6 9 | 10 | Component rerender checking - https://alexsidorenko.com/blog/react-app-render-often/ 11 | 12 | When to use useMemo and useCallback - https://kentcdodds.com/blog/usememo-and-usecallback 13 | 14 | Dynamic imports and code splitting - https://blog.logrocket.com/react-dynamic-imports-route-centric-code-splitting-guide/ 15 | 16 | Rerender guide - https://www.developerway.com/posts/react-re-renders-guide 17 | 18 | Closures in React - https://www.developerway.com/posts/fantastic-closures 19 | 20 | Components Composition - https://www.developerway.com/posts/components-composition-how-to-get-it-right 21 | 22 | High Order Component (HOC) in react hooks era - https://www.developerway.com/posts/higher-order-components-in-react-hooks-era 23 | 24 | Component as prop, 3 different patterns - https://www.developerway.com/posts/react-component-as-prop-the-right-way 25 | 26 | Children parents render relations - https://www.developerway.com/posts/react-elements-children-parents 27 | 28 | Server Components - https://www.joshwcomeau.com/react/server-components 29 | 30 | Visualized React Explanation - https://react.gg/visualized 31 | 32 | Roadmap - https://roadmap.sh/react 33 | 34 | Compound Pattern - https://www.patterns.dev/react/compound-pattern 35 | -------------------------------------------------------------------------------- /Architecture.md: -------------------------------------------------------------------------------- 1 | ### Useful Links for Architecture 2 | --- 3 | 4 | Solid Principles - https://blog.bitsrc.io/solid-principles-every-developer-should-know-b3bfa96bb688 5 | 6 | JS RORO Pattern - https://medium.com/free-code-camp/elegant-patterns-in-modern-javascript-roro-be01e7669cbd 7 | 8 | JS Patterns - https://www.patterns.dev/posts/ 9 | 10 | Error handling TypeScript - https://kentcdodds.com/blog/get-a-catch-block-error-message-with-typescript 11 | 12 | Use function to return a frozen object - https://medium.com/free-code-camp/elegant-patterns-in-modern-javascript-ice-factory-4161859a0eee 13 | 14 | Magic Number (Anti-Pattern) - https://medium.com/@samaddico/programming-and-magic-numbers-f766e0cd1369 15 | 16 | BEM concept - https://medium.com/free-code-camp/a-quick-introduction-to-block-element-modifiers-bem-9df46d29b64c 17 | 18 | CSR, SSR and both - https://betterprogramming.pub/why-you-should-use-islands-architecture-b4f291708a02 19 | 20 | Design System guide - https://thedesignsystem.guide/ 21 | 22 | Brief on Design Tokens - https://spectrum.adobe.com/page/design-tokens/ 23 | 24 | Web apps opinionated model cheatsheet - https://dev.to/costica/web-apps-my-mental-cheat-sheet-41ah 25 | 26 | DRY, KISS, YAGNI principles - https://henriquesd.medium.com/dry-kiss-yagni-principles-1ce09d9c601f 27 | 28 | Optimistic update - https://ilxanlar.medium.com/better-ux-with-optimistic-ui-b72665e1afdf 29 | 30 | Inversion of Control - https://kentcdodds.com/blog/inversion-of-control 31 | 32 | JS Design Patterns - https://kinsta.com/blog/javascript-design-patterns/ 33 | 34 | Curry FN & Partial App - https://medium.com/dailyjs/why-the-fudge-should-i-use-currying-84e4000c8743 35 | 36 | Browser Process Model - https://webperf.tips/tip/browser-process-model/ 37 | -------------------------------------------------------------------------------- /CSS.md: -------------------------------------------------------------------------------- 1 | ### Useful Links for CSS 2 | --- 3 | 4 | CSS Object Model (CSSOM) - https://css-tricks.com/an-introduction-and-guide-to-the-css-object-model-cssom/ 5 | 6 | Interactive guide flexbox - https://www.joshwcomeau.com/css/interactive-guide-to-flexbox/ 7 | 8 | CSS Cheatsheet - https://htmlcheatsheet.com/css/ 9 | 10 | Background Gradients - https://webgradients.com/ 11 | 12 | Shadow Generator - https://neumorphism.io/ 13 | 14 | Color Pallete - https://mycolor.space/ 15 | 16 | Interactive game to learn flex - https://flexboxfroggy.com/ 17 | 18 | Interactive game to learn Grid - https://cssgridgarden.com/ 19 | 20 | Custom Border Radius - https://9elements.github.io/fancy-border-radius/ 21 | 22 | Clip Path Maker - https://bennettfeely.com/clippy/ 23 | 24 | Pie Chart Generator - https://bennettfeely.com/csspiechart/ 25 | 26 | Interactive flexbox - https://bennettfeely.com/flexplorer/ 27 | 28 | ::marker pseudo-element - https://css-tricks.com/almanac/selectors/m/marker/ 29 | 30 | The Power of :has pseudo-class - https://webkit.org/blog/13096/css-has-pseudo-class/ 31 | 32 | ::before & ::after pseudo elements - https://css-tricks.com/7-practical-uses-for-the-before-and-after-pseudo-elements-in-css/ 33 | 34 | Color Formats - https://www.joshwcomeau.com/css/color-formats/ 35 | 36 | Fallback font generator - https://screenspan.net/fallback 37 | 38 | CSS selectors visual guide - https://fffuel.co/css-selectors 39 | 40 | CSS cascade layers - https://www.smashingmagazine.com/2022/01/introduction-css-cascade-layers/ 41 | 42 | CSS @scope - https://developer.chrome.com/articles/at-scope/ 43 | 44 | CSS One-Line Upgrades (gems) - https://moderncss.dev/12-modern-css-one-line-upgrades/ 45 | 46 | Stack Contexts - https://www.joshwcomeau.com/css/stacking-contexts/ 47 | 48 | CSS Time Based Animations - https://yuanchuan.dev/time-based-css-animations 49 | -------------------------------------------------------------------------------- /DeepDiveConcepts.md: -------------------------------------------------------------------------------- 1 | ### Useful Links for How it works behind the hood 2 | --- 3 | 4 | CORS - https://dev.to/jpomykala/what-is-cors-11kf 5 | 6 | Visualized CORS - https://dev.to/lydiahallie/cs-visualized-cors-5b8h 7 | 8 | HTTPS comics (recommended) - https://howhttps.works/episodes/ 9 | 10 | V8 engine - https://blog.sessionstack.com/how-javascript-works-inside-the-v8-engine-5-tips-on-how-to-write-optimized-code-ac089e62b12e 11 | 12 | Visualized JS engine - https://dev.to/lydiahallie/javascript-visualized-the-javascript-engine-4cdf 13 | 14 | Visualized JS prototypal inheritance - https://dev.to/lydiahallie/javascript-visualized-prototypal-inheritance-47co 15 | 16 | Visualized JS Promises & async await - https://dev.to/lydiahallie/javascript-visualized-promises-async-await-5gke 17 | 18 | JS rendering engine and tips - https://blog.sessionstack.com/how-javascript-works-the-rendering-engine-and-tips-to-optimize-its-performance-7b95553baeda 19 | 20 | TypeScript Compiler - https://medium.com/jspoint/typescript-compilation-the-typescript-compiler-4cb15f7244bc 21 | 22 | Type declaration - https://medium.com/jspoint/typescript-type-declaration-files-4b29077c43 23 | 24 | Browser rendering - https://blog.logrocket.com/how-browser-rendering-works-behind-scenes/ 25 | 26 | Chrome Browser deep dive - https://developer.chrome.com/blog/inside-browser-part1/ 27 | 28 | Differences between concepts in FE development - https://thisthat.dev/ 29 | 30 | Performance optimization - https://medium.com/@ferencalmasi/10-critical-performance-optimization-steps-you-should-take-b560a3fcf658 31 | 32 | Web workers - https://blog.sessionstack.com/how-javascript-works-the-building-blocks-of-web-workers-5-cases-when-you-should-use-them-a547c0757f6a 33 | 34 | JS Execution context & Execution stack - https://blog.bitsrc.io/understanding-execution-context-and-execution-stack-in-javascript-1c9ea8642dd0 35 | 36 | JS Optimize long tasks on browsers - https://web.dev/optimize-long-tasks/ 37 | 38 | JS Critical rendering path - https://indepth.dev/posts/1498/101-javascript-critical-rendering-path 39 | -------------------------------------------------------------------------------- /TipsTricks.md: -------------------------------------------------------------------------------- 1 | ### Useful Links for Tips & Tricks 2 | --- 3 | 4 | Chrome Dev Tools awesome tips - https://dev.to/lissy93/awesome-dev-tool-tips-32oo 5 | 6 | A collection of keyboard shortcuts for different applications - https://usethekeyboard.com/ 7 | 8 | Javascript style guide - https://github.com/airbnb/javascript/blob/master/README.md 9 | 10 | Collection of TypeScript type challenges - https://github.com/type-challenges/type-challenges 11 | 12 | Clean Code JavaScript Practical Examples - https://github.com/ryanmcdermott/clean-code-javascript 13 | 14 | Optimal Images in HTML - https://www.builder.io/blog/fast-images 15 | 16 | Packages semantic version calculation - https://semver.npmjs.com/ 17 | 18 | HTTP codes - https://httpstat.us/ 19 | 20 | JS observer API (Mutation, Intersection) - https://indepth.dev/posts/1348/observer-apis-in-javascript-part-i 21 | 22 | JS observer API (Resize, Performance) - https://indepth.dev/posts/1350/observer-apis-in-javascript-part-ii 23 | 24 | Trunk Based Development - https://www.freecodecamp.org/news/what-is-trunk-based-development/amp/ 25 | 26 | Shell commands explanation by input - https://explainshell.com 27 | 28 | Above the Fold concept - https://www.semrush.com/blog/above-the-fold/ 29 | 30 | Console debugging - https://alan.norbauer.com/articles/browser-debugging-tricks 31 | 32 | Promise explained - https://www.freecodecamp.org/news/javascript-promise-object-explained/ 33 | 34 | HTML tags tricks - https://dev.to/yuridevat/html-can-do-this-part-1-3ab2 35 | 36 | Building SVG - https://svg-tutorial.com/ 37 | 38 | TS Type Safety with Branded Types - https://egghead.io/blog/using-branded-types-in-typescript 39 | 40 | NPM ci vs NPM install - https://blog.bitsrc.io/stop-using-npm-install-in-your-ci-cd-pipeline-ba0378bbebfb 41 | 42 | Garbage Collector experiments - https://dev.to/codux/experiments-with-the-javascript-garbage-collector-2ae3 43 | 44 | Snippet Tools - https://yaron-galperin.medium.com/exploring-snippet-tools-a-good-to-know-for-web-developers-652e6ac62e0e 45 | 46 | Object Structured Clone (Object Deep-Copy) - https://www.builder.io/blog/structured-clone 47 | 48 | Understanding CORS (not deep dive but a great explanation) - https://itnext.io/understanding-cors-4157bf640e11 49 | 50 | Color Scheme from OS - https://medium.com/@avielbitton/optimizing-user-experience-adapting-color-schemes-directly-from-operating-system-settings-a9b654711201 51 | 52 | Github Awesome Profile - https://dev.to/kshyun28/how-to-make-your-awesome-github-profile-hog 53 | 54 | Frontend Roadmap - https://roadmap.sh/frontend 55 | 56 | Local Overrides DevTools- https://yaron-galperin.medium.com/local-overrides-in-the-browser-guide-for-web-developers-aa5fb6b40476 57 | 58 | Memory Leaks - https://blog.logrocket.com/escape-memory-leaks-javascript 59 | 60 | Daily Logs - https://dev.to/teamcamp/daily-logs-for-devs-how-a-5-minute-habit-can-10x-your-weekly-output-4peb 61 | --------------------------------------------------------------------------------