├── LICENSE └── README.md /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2021 Marian Beck 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 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # A collection of helpful resources for web development 2 | 3 | This repository contains a number of resources, cheat sheets and snippets that 4 | have helped me in my web development projects. Most of it is aimed at beginners. 5 | 6 | # Overview 7 | 8 | The resources are divided into the following categories: 9 | 10 | - [General](#General) 11 | - [Html](#Html) 12 | - [CSS](#CSS) 13 | - [Javascript](#Javascript) 14 | - [Node JS / Express JS](#Node-JS-/-Express-JS) 15 | - [Heroku](#Heroku) 16 | - [React](#React) 17 | - [Libraries](#Libraries) 18 | - [Landing Page](#Landing-Page) 19 | - [MongoDB](#MongoDB) 20 | - [Design](#Design) 21 | - [Git / GitHub](#Git-/-GitHub) 22 | - [VS Code](#VS-Code) 23 | - [Security, CORS and Authentication](#Security-CORS-and-Authentication) 24 | - [Auth0](#Auth0) 25 | - [Videos](#Videos) 26 | - [Snippets and Commands](#Snippets-and-Commands) 27 | 28 | # General 29 | 30 | | Link | Description | 31 | | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------- | 32 | | [fullstackopen.com](https://fullstackopen.com/en) | MOOC course for Modern Web Development | 33 | | [Sometimes Google and Youtube dont load: PR_END_OF_FILE_ERROR](https://support.mozilla.org/en-US/questions/1267074) | Related to Firefox | 34 | | [When should one use a 'www' subdomain?](https://stackoverflow.com/questions/486621/when-should-one-use-a-www-subdomain) | Are there any good reasons to use or not to use the 'www' subdomain? | 35 | | [How programmers find their startup ideas](https://medium.com/swlh/how-programmers-find-their-startup-ideas-980a92fcd640) | | 36 | | [browser-extension-template](https://github.com/notlmn/browser-extension-template) | Barebones boilerplate with webpack, options handler and auto-publishing | 37 | | [Webstorm - Navigation Features That Will Make You Faster](https://blog.jetbrains.com/webstorm/2020/07/navigation-features-that-will-make-you-faster/) | Official Blogpost by Jetbrains | 38 | | [4 Steps To Building A Bulletproof Beta Test](https://www.fastcompany.com/3002926/4-steps-building-bulletproof-beta-test) | Find the right community, Trust your testers, Filter out the noise, Maintain long-term relationships. | 39 | | [15+ Chrome extensions you should have in your pocket.](https://dev.to/tracycss/chrome-extensions-you-should-have-in-your-pocket-11mb) | | 40 | | [AWS IP address ranges](https://docs.aws.amazon.com/general/latest/gr/aws-ip-ranges.html) | | 41 | | [How to Launch on Product Hunt](https://blog.producthunt.com/how-to-launch-on-product-hunt-7c1843e06399) | Official guide by ProductHunt | 42 | | [Create good titles and snippets in Search Results](https://developers.google.com/search/docs/advanced/appearance/good-titles-snippets?hl=en&visit_id=637456787649697805-1715259187&rd=1) | Guide by Google | 43 | | [CodeNewbie](https://www.codenewbie.org/) | A community of programmers | 44 | | [Sample Privacy Policy Template](https://www.websitepolicies.com/blog/sample-privacy-policy-template) | | 45 | | [6 Super cool Websites For Practicing Algorithms, Learning Programming](https://levelup.gitconnected.com/6-super-cool-websites-for-practicing-algorithms-learning-programming-4cda65a64b7e) | | 46 | | [FreeCodeCamp](https://www.freecodecamp.org/) | Freecodecamp - Learn to code at home | 47 | | [Color model - Wikipedia](https://en.wikipedia.org/wiki/Color_model) | RGB, HSL and more | 48 | | [The color system - Material Design](https://material.io/design/color/the-color-system.html#tools-for-picking-colors) | Tools for picking colors | 49 | | [color-hex.com](https://www.color-hex.com/color-palettes/) | Color Palettes | 50 | | [Callback (computer programming) ]() | | 51 | | [Single-responsibility principle -](https://en.wikipedia.org/wiki/Single-responsibility_principle) | Wikipedia article | 52 | | [Input/output ](https://en.wikipedia.org/wiki/Input/output) | Wikipedia article | 53 | | [weatherstack API](https://weatherstack.com/documentation) | Retrieve instant, accurate weather information for any location in the world in lightweight JSON format | 54 | | [curl](https://curl.se/) | command line tool and library | 55 | | [Markdown Tables generator](https://www.tablesgenerator.com/markdown_tables) | | 56 | | [Scaler](https://www.scaler.com/blog/web-development-roadmap/) | Ideal roadmap for web development | 57 | | [Career Roadmap](https://www.scaler.com/blog/how-to-get-a-job-in-it/) | This guide outlines a 7-step roadmap to secure an IT job, covering skill-building, certifications, networking, and interview preparation. | 58 | | [Applied AI](https://www.appliedaicourse.com/blog/) 59 | | Ultimate Resource for AI, Data Science, and Machine Learning Insights. 60 | | 61 | 62 | 63 | # Html 64 | 65 | | Link | Description | 66 | | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------- | 67 | | [What is Rel=”Noopener”](https://www.elegantthemes.com/blog/wordpress/what-is-relnoopener) | Article about link vulnerabilities | 68 | | [Performance and security of target=\_blank links with rel=noopener](https://blog.dareboost.com/en/2017/03/target-blank-links-rel-noopener-performance-security/) | Article about link vulnerabilities | 69 | | [Target=”\_blank” — the most underestimated vulnerability ever](https://medium.com/@jitbit/target-blank-the-most-underestimated-vulnerability-ever-96e328301f4c) | Another article about the vulnerabilities of links | 70 | | [Explained: noopener, noreferrer, and nofollow Values](https://pointjupiter.com/what-noopener-noreferrer-nofollow-explained/) | | 71 | | [HTML Encoding Reference](https://krypted.com/utilities/html-encoding-reference/) | How to escape any character in Html | 72 | | [Internetingishard](https://www.internetingishard.com/) | Friendly web development tutorials for complete beginners | 73 | | [hyperlink - How to open link in new tab on html?](https://stackoverflow.com/questions/17711146/how-to-open-link-in-new-tab-on-html) | 74 | | [input type="date"](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date) | MDN reference for date input | 75 | | [Character Entity Reference Chart](https://dev.w3.org/html5/html-author/charref) | | 76 | | [Key shortcuts, Unicode and UTF-8 tables](https://www.key-shortcut.com/en/) | A list of all HTML Entities for HTML 4.0 webpages | 77 | | | | 78 | 79 | # CSS 80 | 81 | | Link | Description | 82 | | ------------------------------------------------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------------- | 83 | | [How to keep your footer where it belongs ?](https://www.freecodecamp.org/news/how-to-keep-your-footer-where-it-belongs-59c6aa05c59c/) | 84 | | [Prevent line-break of span element](https://stackoverflow.com/questions/7300760/prevent-line-break-of-span-element) | white-space:nowrap | 85 | | [Media Queries for Standard Devices](https://css-tricks.com/snippets/css/media-queries-for-standard-devices/) | List a ton of different devices and media queries | 86 | | [box-shadow](https://css-tricks.com/almanac/properties/b/box-shadow/) | Guide to box-shadows | 87 | | [Pleasing Color Palettes](https://css-tricks.com/re-pleasing-color-palettes/) | Examples of pleasing color palettes | 88 | | [Beautiful CSS box-shadow examples](https://getcssscan.com/css-box-shadow-examples) | copy the code of box-shadow examples of various websites | 89 | | [styling scrollbars](https://css-tricks.com/almanac/properties/s/scrollbar/) | | 90 | | [CSS Language Speak: Container vs Wrapper?](https://stackoverflow.com/questions/4059163/css-language-speak-container-vs-wrapper) | There is no difference between them. | 91 | | [This site teaches the CSS fundamentals that are used in any website's layout.](https://learnlayout.com/) | Guide to learn CSS layout | 92 | | [almost all CSS2 and 3 selectors, and the CSS3 UI selectors](https://www.quirksmode.org/css/selectors/) | 93 | | [CSS '>' selector; what is it?](https://stackoverflow.com/questions/4459821/css-selector-what-is-it) | > selects immediate children | 94 | | [How should I organize the contents of my CSS file(s)?](https://stackoverflow.com/questions/146106/how-should-i-organize-the-contents-of-my-css-files) | Firstly, and most importantly, document your CSS. | 95 | | [What Is A CSS Reset?](https://cssreset.com/what-is-a-css-reset/) | Reset the styling of all HTML elements to a consistent baseline | 96 | | [Which CSS Reset Should I Use?](https://cssreset.com/which-css-reset-should-i-use/) | | 97 | | [CSS height property](https://www.w3schools.com/cssref/pr_dim_height.asp) | w3schools | 98 | | [How To Create Custom Select Menus](https://www.w3schools.com/howto/howto_custom_select.asp) | w3schools | 99 | | [BEM — Block Element Modifier](http://getbem.com/introduction/) | | 100 | | [mediaqueri.es](https://mediaqueri.es/) | Media Queries | 101 | | [Staggered Animations with CSS Custom Properties](https://cloudfour.com/thinks/staggered-animations-with-css-custom-properties/) | | 102 | | [Learn how to shake/wiggle an image with CSS](https://www.w3schools.com/howto/howto_css_shake_image.asp) | w3schools | 103 | | [CSS Pagination Examples](https://www.w3schools.com/css/css3_pagination.asp) | w3schools | 104 | | [Vertical align anything with just 3 lines of CSS](http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/) | | 105 | | [Cursor Styles](https://quirksmode.org/css/user-interface/cursor.html#note) | | 106 | | | | 107 | 108 | # Javascript 109 | 110 | | Link | Description | 111 | | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------- | 112 | | [How to make modals draggable and resizable](https://github.com/man-group/dtale/blob/master/docs/DRAGGABLE_RESIZABLE_MODALS.md) | Tutorial | 113 | | [Check if Shift Key is pressed during mouse-click](http://www.java2s.com/Tutorials/Javascript/Event/Mouse/Check_if_Shift_key_is_pressed_during_the_mouse_click_in_JavaScript.htm) | Tutorial | 114 | | [How to Fix the Refresh Button When Using Service Workers](https://redfin.engineering/how-to-fix-the-refresh-button-when-using-service-workers-a8e27af6df68) | Tutorial | 115 | | [How to add fireworks to your website](https://medium.com/front-end-weekly/how-to-add-some-fireworks-to-your-website-18b594b06cca) | Tutorial | 116 | | [How to convert an Object {} to an Array [] of key-value pairs in JavaScript?](https://www.geeksforgeeks.org/how-to-convert-an-object-to-an-array-of-key-value-pairs-in-javascript/) | 3 Methods to convert an Object {} to an Array [] | 117 | | [Check If An Object Is Empty or not In JavaScript](https://www.arungudelli.com/tutorial/javascript/how-to-check-if-an-object-is-empty-in-javascript-examples/) | 8 ways To Check If An Object Is Empty or not | 118 | | [Convert array to JSON](https://stackoverflow.com/questions/2295496/convert-array-to-json) | all modern browsers include the JSON object as standard, which means that you don't need this script | 119 | | [How to add whitespace in Javascript](https://www.xspdf.com/resolution/50015155.html) | multiple ways to add whitespaces with Html and JS | 120 | | [Deploying ES2015+ Code in Production Today](https://philipwalton.com/articles/deploying-es2015-code-in-production-today/) | Article | 121 | | [Determine font color based on background color](https://stackoverflow.com/questions/1855884/determine-font-color-based-on-background-color) | | 122 | | [35+ Amazing JavaScript Games with Source Code](https://www.digitaldesignjournal.com/javascript-games/) | | 123 | | [Understanding Lazy Loading](https://academind.com/tutorials/understanding-lazy-loading/) | | 124 | | [Can I insert elements to the beginning of an element using .appendChild()?](https://stackoverflow.com/questions/618089/can-i-insert-elements-to-the-beginning-of-an-element-using-appendchild) | DOM nodes have an insertBefore method | 125 | | [What's the effect of adding 'return false' to a click event listener?](https://stackoverflow.com/questions/128923/whats-the-effect-of-adding-return-false-to-a-click-event-listener) | The modern way of achieving this effect is to call event.preventDefault() | 126 | | [How to detect Safari, Chrome, IE, Firefox and Opera browser?](https://stackoverflow.com/questions/9847580/how-to-detect-safari-chrome-ie-firefox-and-opera-browser) | | 127 | | [The blur event fires when an element has lost focus.](https://developer.mozilla.org/en-US/docs/Web/API/Element/blur_event) | MDN reference | 128 | | [Window.open() - Web APIs](https://developer.mozilla.org/en-US/docs/Web/API/Window/open#Window_functionality_features) | MDN reference | 129 | | [Working with objects - JavaScript ](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_Objects) | MDN reference | 130 | | [A re-introduction to JavaScript (JS tutorial)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript) | MDN reference | 131 | | [Destructuring assignment](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment) | MDN reference | 132 | | [Array Common Operations](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array) | MDN reference | 133 | | [WindowOrWorkerGlobalScope.fetch()](https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch) | MDN reference | 134 | | [Arrow function expressions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions) | MDN reference | 135 | | [https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions/Cheatsheet](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions/Cheatsheet) | MDN reference | 136 | | [Understanding how a JavaScript ES6 debounce function works](https://chrisboakes.com/how-a-javascript-debounce-function-works/) | | 137 | | [regex101.com](https://regex101.com/) | Regex tester | 138 | | [How to create a link in JavaScript ?](https://www.geeksforgeeks.org/how-to-create-a-link-in-javascript/) | Tutorial | 139 | | [JavaScript CreateElement](https://www.javascripttutorial.net/javascript-dom/javascript-createelement/) | | 140 | | [Sort array by firstname (alphabetically) in Javascript](https://stackoverflow.com/questions/6712034/sort-array-by-firstname-alphabetically-in-javascript) | How to use the `sort` method | 141 | | [addEventListener, “change” and option selection](https://stackoverflow.com/questions/24875414/addeventlistener-change-and-option-selection) | Add items to a select list | 142 | | [how to pass a function name via JSON and call it in javascript/jQuery?](https://stackoverflow.com/questions/13792329/how-to-pass-a-function-name-via-json-and-call-it-in-javascript-jquery) | | 143 | | [How To Copy to Clipboard](https://www.w3schools.com/howto/howto_js_copy_clipboard.asp) | w3schools | 144 | | [JavaScript Roundup](https://iamturns.com/javascript-roundup/) | | 145 | | [David Walsh Blog](https://davidwalsh.name/) | | 146 | | [Regex tutorial](https://medium.com/factory-mind/regex-tutorial-a-simple-cheatsheet-by-examples-649dc1c3f285) | A quick cheatsheet by examples | 147 | | [Douglas Crockford's JavaScript](https://crockford.com/javascript/) | | 148 | | [javascript.info](https://javascript.info/) | The Modern JavaScript Tutorial | 149 | | [javascript.info](https://javascript.info/js-animation) | Javascript animations | 150 | | [javascript.info](https://javascript.info/promise-chaining) | Promises chaining | 151 | | [Learn how to build a full-stack, production-ready JavaScript web application from scratch](https://builderbook.org/) | | 152 | | [You Don't Know JS Yet (book series) - 2nd Edition](https://github.com/getify/You-Dont-Know-JS) | | 153 | | [Index as a key is an anti-pattern](https://medium.com/@robinpokorny/index-as-a-key-is-an-anti-pattern-e0349aece318) | | 154 | | [You Don't Know JS: Async & Performance - Chapter 3: Promises](https://github.com/getify/You-Dont-Know-JS/blob/1st-ed/async%20%26%20performance/ch3.md) | | 155 | | [ES7 async functions - a step in the wrong direction](https://blog.spion.dev/posts/es7-async-await-step-in-the-wrong-direction.html) | | 156 | | [How To Generate a Random Color in JavaScript](https://css-tricks.com/snippets/javascript/random-hex-color/) | | 157 | | [A Guide To The Reduce Method In Javascript​](https://www.freecodecamp.org/news/reduce-f47a7da511a9/) | | 158 | | [ES6 In Depth: Arrow functions](https://hacks.mozilla.org/2015/06/es6-in-depth-arrow-functions/) | | 159 | | | | 160 | 161 | # Node JS / Express JS 162 | 163 | | Link | Description | 164 | | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------- | 165 | | [Node / Express: EADDRINUSE, Address already in use – Kill server](https://exceptionshub.com/node-express-eaddrinuse-address-already-in-use-kill-server.html) | How to kill node server, if it is still running | 166 | | [Learn how caching your web page's static resources can improve performance and reliability for repeat visitors.](https://web.dev/uses-long-cache-ttl/?utm_source=lighthouse&utm_medium=devtools) | | 167 | | [Redirecting HTTP to HTTPS with Node.js & Express](https://www.tonyerwin.com/2014/09/redirecting-http-to-https-with-nodejs.html) | | 168 | | [Force SSL with expressjs 3](https://stackoverflow.com/questions/10697660/force-ssl-with-expressjs-3) | | 169 | | [How to send urlencoded data using Axios](https://flaviocopes.com/axios-urlencoded/) | | 170 | | [Express 4.x - API Reference](https://expressjs.com/en/api.html) | API reference | 171 | | [Persisting your React state in 9 lines](https://dev.to/selbekk/persisting-your-react-state-in-9-lines-of-code-9go) | | 172 | | [Understanding Express.js](https://evanhahn.com/understanding-express/) | | 173 | | [Express cors middleware](https://expressjs.com/en/resources/middleware/cors.html) | | 174 | | [How to Make HTTP Requests using Axios in Node.js](https://attacomsian.com/blog/http-requests-axios) | | 175 | | | | 176 | 177 | # Heroku 178 | 179 | | Link | Description | 180 | | --------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------- | 181 | | [QuotaGuard Static IP's](https://devcenter.heroku.com/articles/quotaguardstatic#transparent-mode) | How to serve Heroku apps from a static IP (e.g. for whitelisting) | 182 | | ['heroku' does not appear to be a git repository](https://stackoverflow.com/questions/18406721/heroku-does-not-appear-to-be-a-git-repository) | | 183 | | [Optimizing Dyno Usage](https://devcenter.heroku.com/articles/optimizing-dyno-usage) | Official reference | 184 | | [Connecting Heroku App to Atlas MongoDB Cloud service](https://stackoverflow.com/questions/42159175/connecting-heroku-app-to-atlas-mongodb-cloud-service) | | 185 | | [Add a custom root domain](https://devcenter.heroku.com/articles/custom-domains#add-a-custom-root-domain) | Official reference | 186 | | | | 187 | 188 | # React 189 | 190 | | Link | Description | 191 | | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------- | 192 | | [How to migrate from create-react-app to Next.js](https://www.pheuberger.com/convert-create-react-app-to-nextjs/) | Tutorial | 193 | | [Production build not running on IE11](https://stackoverflow.com/questions/49649831/reactjs-script1010-expected-identifier-production-build-not-running-on-ie11) | `` | 194 | | [Showing "new version available" notification on create-react-app PWAs](https://dev.to/daniellycosta/showing-new-version-available-notification-on-create-react-app-pwas-3jc9) | How to refresh service worker | 195 | | [How to Create a Right-click Menu in React](https://www.pluralsight.com/guides/how-to-create-a-right-click-menu-using-react) | How to create a custom context menu | 196 | | [Start to Finish: Deploying a React App on DigitalOcean](https://hackernoon.com/start-to-finish-deploying-a-react-app-on-digitalocean-bcfae9e6d01b) | | 197 | | [milliseconds to days](https://stackoverflow.com/questions/7829571/milliseconds-to-days) | | 198 | | [What is React Fast Refresh](https://medium.com/javascript-in-plain-english/what-is-react-fast-refresh-f3d1e8401333) | | 199 | | [Getting Started With Next.js](https://www.smashingmagazine.com/2020/10/getting-started-with-next-js/) | | 200 | | [React v17.0 blogpost](https://reactjs.org/blog/2020/10/20/react-v17.html) | Official blogpost | 201 | | [Tips for Using React’s UseEffect Effectively](https://medium.com/better-programming/tips-for-using-reacts-useeffect-effectively-dfe6ae951421) | | 202 | | [This hook makes it super easy to dynamically load an external script and know when its loaded](https://usehooks.com/useScript/) | custom hook to load external scripts in React | 203 | | [Everything you need to know about react-scripts](https://blog.logrocket.com/everything-you-need-to-know-about-react-scripts/) | | 204 | | [Your new ReactJS on Sublime Text 3 workspace setup](https://medium.com/@dwardmr/your-new-reactjs-on-sublime-text-3-workspace-setup-9ce87c12e93a) | | 205 | | [A Complete Guide to useEffect](https://overreacted.io/a-complete-guide-to-useeffect/) | VERY detailed article by Dan Abramov | 206 | | [React Higher Order Components](https://www.robinwieruch.de/react-higher-order-components) | | 207 | | [The Wise Guide to React useState() Hook](https://dmitripavlutin.com/react-usestate-hook-guide/) | | 208 | | [3 Essential Tools to Boost your React App’s SEO](https://medium.com/@prestonwallace/3-ways-improve-react-seo-without-isomorphic-app-a6354595e400) | | 209 | | [React SEO: The Best Optimization Methods for React Websites](https://zeo.org/blog/react-seo-the-best-optimization-methods-for-react-websites/) | | 210 | | [How to Use the Enter Key Event Handler](https://www.pluralsight.com/guides/how-to-enter-key-event-handler-on-a-react-bootstrap-input-component) | | 211 | | [How to implement Authentication in React using Auth0](https://medium.com/better-programming/how-to-implement-authentication-in-react-using-auth0-1b5ecb6c8fe0) | | 212 | | [React Production Deployment with Netlify](https://blog.bitsrc.io/react-production-deployment-part-1-netlify-703686631dd1) | | 213 | | [How To Implement Smooth Transitions in React](https://blog.bitsrc.io/how-to-implement-smooth-transitions-in-react-bd0497b06b8) | | 214 | | [An Opinionated Guide to React: Folder Structure & File Naming](https://dev.to/farazamiruddin/an-opinionated-guide-to-react-folder-structure-file-naming-1l7i) | | 215 | | [React Production Deployment with Heroku](https://blog.bitsrc.io/react-production-deployment-part-3-heroku-316319744885) | Tutorial | 216 | | [React Confirm Dialog as a service](https://medium.com/quadminds/react-confirm-dialog-as-service-8929c88a6702) | Create custom confirm box | 217 | | [How To Build a Secure Login Flow With OAuth 2, OpenId, and React](https://medium.com/better-programming/building-secure-login-flow-with-oauth-2-openid-in-react-apps-ce6e8e29630a) | | 218 | | [How to use the useCallback React hook](https://flaviocopes.com/react-hook-usecallback/) | | 219 | | [How to Implement Authentication For Your React App](https://medium.appbase.io/how-to-implement-authentication-for-your-react-app-cf09eef3bb0b) | | 220 | | [React Simple Auth: React + Redux + OAuth 2.0](https://medium.com/@mattmazzola/react-simple-auth-react-redux-oauth-2-0-de6ea9df0a63) | Tutorial | 221 | | [How to Securely Implement OAuth in React](https://fusionauth.io/blog/2020/03/10/securely-implement-oauth-in-react) | | 222 | | [How to send HTTP Requests in React](https://malcoded.com/posts/react-http-requests-axios/) | | 223 | | [React Warning: Cannot update a component from inside the function body of a different component](https://stackoverflow.com/questions/60526786/react-warning-cannot-update-a-component-from-inside-the-function-body-of-a-diff) | wrap state update in useEffect() | 224 | | [Refs and the DOM](https://reactjs.org/docs/refs-and-the-dom.html) | | 225 | | [The broken promise of Web Components](https://dmitriid.com/blog/2017/03/the-broken-promise-of-web-components/) | | 226 | | [The React Cheatsheet for 2020 (+ real-world examples)](https://www.freecodecamp.org/news/the-react-cheatsheet-for-2020/) | | 227 | | [How to use realm on an electron app?](https://github.com/realm/realm-js/issues/1060) | | 228 | | [Electron Data Persistence](https://www.techiediaries.com/electron-data-persistence/) | | 229 | | [Useful resources for building apps with Electron](https://github.com/sindresorhus/awesome-electron) | | 230 | | [Mongotron - A Mongo DB GUI built using Electron, and Angular Js](https://github.com/officert/mongotron) | | 231 | | | | 232 | 233 | # Libraries 234 | 235 | | Link | Description | 236 | | ------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------- | 237 | | [Fireworks](https://github.com/fouad/fireworks#readme) | Add fireworks to your website | 238 | | [HTML5sortable](https://lukasoppermann.github.io/html5sortable/index.html) | Lightweight standalone library for creating sortable lists and grids using native HTML5 drag and drop API. | 239 | | [React beautiful DND](https://github.com/atlassian/react-beautiful-dnd) | Beautiful and accessible drag and drop for lists with React | 240 | | [React DnD](https://react-dnd.github.io/react-dnd/about) | A set of React utilities to help you build complex drag and drop interfaces while keeping your components decoupled | 241 | | [immutability-helper](https://www.npmjs.com/package/immutability-helper) | React - Mutate a copy of data without changing the original source | 242 | | [react-lazyload](https://www.npmjs.com/package/react-lazyload) | Lazyload your Components, Images or anything matters the performance. | 243 | | [nodemailer](https://www.w3schools.com/nodejs/nodejs_email.asp) | Node.js Send an Email | 244 | | [Semantic UI](https://semantic-ui.com/) | Semantic is a development framework that helps create beautiful, responsive layouts using human-friendly HTML. | 245 | | [heroku-ssl-redirect](https://www.npmjs.com/package/heroku-ssl-redirect) | Redirect users to the SSL version of your app. For ExpressJS running on Heroku. | 246 | | [bcrypt for NodeJs](https://github.com/kelektiv/node.bcrypt.js) | | 247 | | [JSON Server](https://www.npmjs.com/package/json-server) | Get a full fake REST API with zero coding in less than 30 seconds | 248 | | [ExpressJS](https://expressjs.com/) | Fast, unopinionated, minimalist web framework for Node.js | 249 | | [nodemon](https://nodemon.io/) | automatic refresh for node | 250 | | [Body Parser](https://www.npmjs.com/package/body-parser) | Node.js body parsing middleware. | 251 | | [morgan](https://www.npmjs.com/package/morgan) | HTTP request logger middleware for node.js | 252 | | [CORS](https://www.npmjs.com/package/cors) | A node.js package for providing a Connect/Express middleware | 253 | | [Mongoose](https://www.npmjs.com/package/mongoose) | MongoDB object modeling tool designed to work in an asynchronous environment | 254 | | [Mongoose encryption](https://github.com/joegoldbeck/mongoose-encryption) | Simple encryption and authentication plugin for Mongoose | 255 | | [Dotenv](https://www.npmjs.com/package/dotenv) | zero-dependency module that loads environment variables from a .env file into process.env | 256 | | [SuperTest](https://www.npmjs.com/package/supertest) | library to help with testing API | 257 | | [cross-env](https://www.npmjs.com/package/cross-env) | library to enable cross platform scripts | 258 | | [mongoose-unique-validator](https://www.npmjs.com/package/mongoose-unique-validator) | check unique entries in MongoDB | 259 | | [jsonwebtoken ](https://www.npmjs.com/package/jsonwebtoken) | generate JSON webtokens | 260 | | [react-transition-group](https://www.npmjs.com/package/react-transition-group) | animations on render | 261 | | [React bootstrap](https://react-bootstrap.github.io/) | UI Library for React | 262 | | [React Markdown](https://www.npmjs.com/package/react-markdown) | Markdown component for React using remark | 263 | | [Styled Components](https://styled-components.com/) | Use the best bits of ES6 and CSS to style your apps without stress | 264 | | | | 265 | 266 | # Landing Page 267 | 268 | | Link | Description | 269 | | ---------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------- | 270 | | [Free Templates on Cruip.com](https://cruip.com/free-templates/) | Download Landing Page templates | 271 | | [Pricing Page examples](https://saaslandingpage.com/pricing/) | | 272 | | [What is a Landing Page and How to Create One in 2020!](https://moosend.com/blog/how-to-create-a-landing-page/) | | 273 | | [Landing Page Feedback Trello Board](https://trello.com/b/MlNHBsL2/landing-page-feedback) | A Trello board with feedback on various landing pages | 274 | | [Rewriting landing pages with a pro copywriter](https://marketingexamples.com/copywriting/rewriting-landing-pages) | | 275 | | [Get free landing pages every week.](https://startuplanding.redq.io/) | | 276 | | [Why Landing Page is Crucial for your App Success?](https://medium.com/alphalogicinc/why-landing-page-is-crucial-for-your-mobile-app-success-cd33fa514a31) | | 277 | | | | 278 | 279 | # Mongo DB 280 | 281 | | Link | Description | 282 | | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | 283 | | [mongodump and mongorestore](https://docs.atlas.mongodb.com/command-line-tools#command-line-tools-mongodump) | Official reference | 284 | | [Mongoose’s Model.Populate()](https://medium.com/@nicknauert/mongooses-model-populate-b844ae6d1ee7) | how to use populate() method | 285 | | [Secure Your Database With MongoDB Atlas](https://www.mongodb.com/blog/post/secure-your-mongodb-database-on-the-aws-cloud) | Official blog article | 286 | | [MongoDB Security Checklist & Best Practices](https://www.mongodb.com/security-best-practices) | Official reference | 287 | | [Mongoose rename collection](https://stackoverflow.com/questions/43391592/mongoose-rename-collection) | | 288 | | [MongoDB’s field-level encryption protects private data](https://arstechnica.com/information-technology/2020/04/mongodbs-field-level-encryption-protects-private-data-even-from-dbas/) | | 289 | | [Securing MongoDB using Let's Encrypt certificate](https://zohaib.me/securing-mongodb-using-lets-encrypt/) | | 290 | | | | 291 | 292 | # Design 293 | 294 | | Link | Description | 295 | | --------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------- | 296 | | [CSS Tips for Better Color and Contrast Accessibility](https://webdesign.tutsplus.com/articles/css-tips-for-better-color-and-contrast-accessibility--cms-34472) | | 297 | | [Applying Color Theory to Digital Displays](https://www.uxmatters.com/mt/archives/2007/01/applying-color-theory-to-digital-displays.php) | | 298 | | [Draw Pixel art](https://www.pixilart.com/draw) | | 299 | | [How to start making pixel art #1](https://medium.com/pixel-grimoire/how-to-start-making-pixel-art-2d1e31a5ceab) | | 300 | | [The Top 10 Web Design Mistakes of 1999](https://www.nngroup.com/articles/the-top-ten-web-design-mistakes-of-1999/) | | 301 | | [Material Design - color usage and palettes](https://material.io/design/color/the-color-system.html#color-usage-and-palettes) | | 302 | | [The Responsive Website Font Size Guidelines](https://learnui.design/blog/mobile-desktop-website-font-size-guidelines.html) | | 303 | | [Converting Colors](https://convertingcolors.com/decimal-color-16777215.html) | Convert any color to various different formats | 304 | | [svgrepo.com](https://www.svgrepo.com/) | SVG Vectors and Icons | 305 | | [Nerd fonts](https://github.com/ryanoasis/nerd-fonts) | Iconic font aggregator | 306 | | [flaticon.com](https://www.flaticon.com/) | 307 | | [Font Awesome](https://fontawesome.com/) | 308 | | [The 41 best free web fonts](https://www.creativebloq.com/typography/free-web-fonts-1131610) | | 309 | | | | 310 | 311 | # Git / GitHub 312 | 313 | | Link | Description | 314 | | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------ | 315 | | [Change remote repository url](https://docs.github.com/en/free-pro-team@latest/github/using-git/changing-a-remotes-url) | official reference | 316 | | [Managing your profile README](https://docs.github.com/en/free-pro-team@latest/github/setting-up-and-managing-your-github-profile/managing-your-profile-readme) | official reference | 317 | | [Searching issues and pull requests](https://help.github.com/en/github/searching-for-information-on-github/searching-issues-and-pull-requests) | official reference | 318 | | [Pushing commits to a remote repository](https://docs.github.com/en/free-pro-team@latest/github/using-git/pushing-commits-to-a-remote-repository) | official reference | 319 | | [How can I delete a file from a Git repository?](https://stackoverflow.com/questions/2047465/how-can-i-delete-a-file-from-a-git-repository) | Use `git rm`. | 320 | | [How to show or change your Git username or email address](https://alvinalexander.com/git/git-show-change-username-email-address/) | `git config --global user.name "username"` | 321 | | [Getting Started - About Version Control](https://git-scm.com/book/en/v2/Getting-Started-About-Version-Control) | | 322 | | [How to Configure Git Username and Email Address](https://linuxize.com/post/how-to-configure-git-username-and-email/) | | 323 | | [How does one change the language of the command line interface of Git?](https://stackoverflow.com/questions/10633564/how-does-one-change-the-language-of-the-command-line-interface-of-git) | | 324 | | [Tell Git not to track a file any more (remove from repo)](https://alvinalexander.com/git/git-rm-file-git-repository-dont-track-accidentally-added/) | | 325 | | [Why are there two ways to unstage a file in Git?](https://stackoverflow.com/questions/6919121/why-are-there-two-ways-to-unstage-a-file-in-git) | git reset | 326 | | [How To Create a Pull Request on GitHub](https://www.digitalocean.com/community/tutorials/how-to-create-a-pull-request-on-github) | | 327 | | [How to restore older file versions in Git](https://opensource.com/life/16/7/how-restore-older-file-versions-git) | | 328 | | [An Intro to Git and GitHub for Beginners (Tutorial)](https://product.hubspot.com/blog/git-and-github-tutorial-for-beginners) | | 329 | | | | 330 | 331 | # VS Code 332 | 333 | | Link | Description | 334 | | ------------------------------------------------------------------------------------------------------------------------------------------------ | ----------- | 335 | | [Learn these keyboard shortcuts to become a VS Code ninja](https://blog.logrocket.com/learn-these-keyboard-shortcuts-to-become-a-vs-code-ninja/) | | 336 | | [Recommended VS Code Extensions](https://dev.to/klamserdev/vs-code-extensions-i-use-daily-568i) | | 337 | | [Snippets in Visual Studio Code](https://code.visualstudio.com/docs/editor/userdefinedsnippets#_creating-your-own-snippets) | | 338 | | | | 339 | 340 | # Security, CORS and Authentication 341 | 342 | | Link | Description | 343 | | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------- | 344 | | [How to Check for TLS to Secure Your Email](https://www.paubox.com/blog/check-tls-secure-email/) | | 345 | | [Security framework for building multi-user end-to-end encrypted data storage ](https://github.com/cossacklabs/hermes-core) | | 346 | | [JWT.IO](https://jwt.io/) | allows you to decode, verify and generate JSON Web Tokens | 347 | | [Cross-Origin Resource Sharing (CORS)](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS) | | 348 | | [Cross-Site Request Forgery Prevention](https://cheatsheetseries.owasp.org/cheatsheets/Cross-Site_Request_Forgery_Prevention_Cheat_Sheet.html#samesite-cookie-attribute) | | 349 | | [The Authorization Request](https://www.oauth.com/oauth2-servers/authorization/the-authorization-request/) | OAuth 2.0 Simplified | 350 | | [Single-Page Apps](https://www.oauth.com/oauth2-servers/single-page-apps/) | OAuth 2.0 Simplified | 351 | | [3 Ways to Fix the CORS Error](https://medium.com/@dtkatz/3-ways-to-fix-the-cors-error-and-how-access-control-allow-origin-works-d97d55946d9) | How the Access-Control-Allow-Origin Header Works | 352 | | [How and Why You Should Avoid CORS in Single Page Apps](https://blog.bitsrc.io/how-and-why-you-should-avoid-cors-in-single-page-apps-db25452ad2f8) | | 353 | | [enable cross-origin resource sharing](https://enable-cors.org/) | | 354 | | [XMLHttpRequest cannot load XXX No 'Access-Control-Allow-Origin' header](https://stackoverflow.com/questions/35553500/xmlhttprequest-cannot-load-xxx-no-access-control-allow-origin-header) | | 355 | | | | 356 | 357 | # Auth0 358 | 359 | | Link | Description | 360 | | ------------------------------------------------------------------------------------------------------------------------------------------- | ------------------ | 361 | | [JWT Handbook](https://auth0.com/resources/ebooks/jwt-handbook) | | 362 | | [Hacking It Out: When CORS won’t let you be great](https://medium.com/netscape/hacking-it-out-when-cors-wont-let-you-be-great-35f6206cc646) | | 363 | | [The Complete Guide to React User Authentication with Auth0](https://auth0.com/blog/complete-guide-to-react-user-authentication/) | official blog | 364 | | [Send Email Invitations for Application Signup](https://auth0.com/docs/auth0-email-services/send-email-invitations-for-application-signup) | official reference | 365 | | | | 366 | 367 | ## Videos 368 | 369 | | Link | Description | 370 | | -------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | 371 | | [Higher-order functions - Part 1 of Functional Programming in JavaScript](https://www.youtube.com/watch?v=BMUiFMZr7vk&list=PL0zVEGEvSaeEd9hlmCXrk5yUyqUag-n84) | YouTube | 372 | | [Map - Part 2 of Functional Programming in JavaScript](https://www.youtube.com/watch?v=bCqtb-Z5YGQ&list=PL0zVEGEvSaeEd9hlmCXrk5yUyqUag-n84&index=2) | YouTube | 373 | | [Reduce basics - Part 3 of Functional Programming in JavaScript](https://www.youtube.com/watch?v=Wl98eZpkp-c&t=31s) | YouTube | 374 | | [What the heck is the event loop anyway?](https://www.youtube.com/watch?v=8aGhZQkoFbQ) | YouTube | 375 | | [Update Data in a List without Mutations](https://egghead.io/lessons/react-update-data-in-a-list-without-mutations) | eggheadio | 376 | | [Getting Started with Redux](https://egghead.io/courses/getting-started-with-redux) | eggheadio | 377 | | [Understand JavaScript's this Keyword in Depth](https://egghead.io/courses/understand-javascript-s-this-keyword-in-depth) | eggheadio | 378 | | | | 379 | 380 | # Snippets and Commands 381 | 382 | ## Html 383 | 384 | ### Escaping Characters 385 | 386 | ```Html 387 | 388 | 389 | & --> & 390 | < --> < 391 | > --> > 392 | " --> " 393 | ' --> ' 394 | / --> / 395 | 396 | 399 | ``` 400 | 401 | ## Javascript 402 | 403 | ### Scroll to top 404 | 405 | ```Javascript 406 | // Scroll to specific values 407 | // scrollTo is the same 408 | window.scroll({ 409 | top: 2500, 410 | left: 0, 411 | behavior: 'smooth' 412 | }); 413 | 414 | // Scroll certain amounts from current position 415 | window.scrollBy({ 416 | top: 100, // could be negative value 417 | left: 0, 418 | behavior: 'smooth' 419 | }); 420 | 421 | // Scroll to a certain element 422 | document.querySelector('.hello').scrollIntoView({ 423 | behavior: 'smooth' 424 | }); 425 | ``` 426 | 427 | ### Convert RGB to gray 428 | 429 | ```Javascript 430 | R*0.299 + G*0.587 + B*0.114 431 | ``` 432 | 433 | ### Parse Link Header for rel 434 | 435 | ```Javascript 436 | //API's usually don't provide all entries at once and we have to use pagination to access more entries than the initial dataset. To do this, we don't have to build our own links, but can use the ones provided by the API. 437 | 438 | var data = 'link: "; rel="first", ; rel="next", ; rel="last""' 439 | 440 | var linkRegex = /\<([^>]+)/g; 441 | var relRegex = /rel="([^"]+)/g; 442 | var linkArray = []; 443 | var relArray = []; 444 | var finalResult = {}; 445 | var temp; 446 | while ((temp = linkRegex.exec(data)) != null) { 447 | linkArray.push(temp[1]); 448 | } 449 | while ((temp = relRegex.exec(data)) != null) { 450 | relArray.push(temp[1]); 451 | } 452 | 453 | finalResult = relArray.reduce((object, value, index) => { 454 | object[value] = linkArray[index]; 455 | return object; 456 | }, {}); 457 | 458 | console.log(finalResult); 459 | ``` 460 | 461 | ### Create random value 462 | 463 | ```Javascript 464 | //create random value for STATE 465 | const generateState = (length) => { 466 | 467 | let result = "" 468 | const characters = 469 | "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789" 470 | var charactersLength = characters.length 471 | for ( var i = 0; i < length; i++ ) { 472 | result += characters.charAt(Math.floor(Math.random() * charactersLength)) 473 | } 474 | return result 475 | } 476 | ``` 477 | 478 | ### Add days to current date 479 | 480 | ```Javascript 481 | var today = new Date(); 482 | var newdate = new Date(); 483 | newdate.setDate(today.getDate()+29); 484 | document.writeln(newdate); 485 | ``` 486 | 487 | ### Read Cookie 488 | 489 | ```Javascript 490 | const decodedCookie = decodeURIComponent(document.cookie) 491 | 492 | const cookieArray = decodedCookie.split(";") 493 | for (let i = 0; i < cookieArray.length; i++) { 494 | if (cookieArray[i].indexOf("category") >= 0) { 495 | const searchCookie = cookieArray[i].split("=") 496 | setPreviousSearch(searchCookie[1].split(",")) 497 | } 498 | } 499 | 500 | 501 | ``` 502 | 503 | ## Terminal (OSX, Linux ...) 504 | 505 | | Command | Description | 506 | | -------------------------------------------- | ----------------------------------------------- | 507 | | clear | scroll past visible content | 508 | | touch ‘filename’ | create filename | 509 | | mkdir ‘folder’ | create directory | 510 | | pwd | present working directory | 511 | | ls -al | list of files and directories with hidden files | 512 | | cd .. | one directory level up | 513 | | cd / | go to root folder | 514 | | nano filename | display and edit filename | 515 | | openssl rand -base64 32 | Create encrypted key | 516 | | openssl rand -base64 64 | Create encrypted key | 517 | | pwd | present working directory | 518 | | which | find location of variable | 519 | | man ls | help page of “ls”. Quit with q | 520 | | cat filename | display filecontent. | 521 | | less filename | display filecontent, scroll with arrows | 522 | | nano filename | display and modify filecontent | 523 | | open ~ | open home directly | 524 | | open filename | open file in osx | 525 | | touch filename | create filename | 526 | | mv filename newfilename, mv folder newfolder | rename/move filename to newfilename | 527 | | rm filename | remove filename | 528 | | mkdir folder | create directory | 529 | | rmdir folder | remove directory | 530 | | rm -rf folder | remove directory with content | 531 | | chown user filename | change ownership of filename to user | 532 | | whoami | logged-in user | 533 | | chgrp group filename | change usergroup of filename to group | 534 | | alias newcmd=‘commands" | create new command | 535 | | | | 536 | 537 | ## GIT 538 | 539 | ``` 540 | - git push --set-upstream origin new-branch 541 | - git config --global user.name "Your name" 542 | - git config --global user.email "Your email" 543 | 544 | //Create a new repository 545 | 546 | //replace and with your values 547 | - git clone https://github.com//.git 548 | - cd 549 | - touch README.md 550 | - git add README.md 551 | - git commit -m "add README" 552 | - git push -u origin master 553 | 554 | //Push an existing folder 555 | - cd existing_folder 556 | - git init 557 | - git remote add origin https://github.com//.git 558 | - git add . 559 | - git commit -m "Initial commit" 560 | - git push -u origin master 561 | 562 | //Push an existing Git repository 563 | - cd existing_repo 564 | - git remote rename origin old-origin 565 | - git remote add origin https://github.com//.git 566 | - git push -u origin --all 567 | - git push -u origin --tags 568 | 569 | //Unlink repository 570 | 571 | - git remote rm origin 572 | - rm .git/FETCH_HEAD 573 | 574 | 575 | 576 | ``` 577 | 578 | --- 579 | 580 | ## Heroku 581 | 582 | - create file "Procfile" with content “web: node index.js” in root of repo 583 | 584 | | Command | Description | 585 | | --------------------------------- | ----------------------------------------------------- | 586 | | heroku create appname --region eu | create app on heroku with name “appname” in region eu | 587 | | git push heroku master | deploy local app to heroku-repo | 588 | | git init | create own git repo for heroku app | 589 | | heroku git:remote -a yourapp | add heroku app as remote | 590 | | heroku ps:scale web=1 | check app is running | 591 | | heroku open | start app | 592 | | heroku logs --tail | display logs | 593 | | heroku run bash | open shell for Heroku dyno (e.g. for debugging) | 594 | | | | 595 | --------------------------------------------------------------------------------