webdev

KO | EN

gitlite — search

#javascript #hacktoberfest #react #ai #typescript #llm #go #android #deep-learning #linux #docker #java #kubernetes #openai

(★ 93)

A collection of helpful resources for web development.

File Explorer

Download Latest Version (.zip)

LICENSE
README.md

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# A collection of helpful resources for web development

This repository contains a number of resources, cheat sheets and snippets that
have helped me in my web development projects. Most of it is aimed at beginners.

# Overview

The resources are divided into the following categories:

- [General](#General)
- [Html](#Html)
- [CSS](#CSS)
- [Javascript](#Javascript)
- [Node JS / Express JS](#Node-JS-/-Express-JS)
- [Heroku](#Heroku)
- [React](#React)
- [Libraries](#Libraries)
- [Landing Page](#Landing-Page)
- [MongoDB](#MongoDB)
- [Design](#Design)
- [Git / GitHub](#Git-/-GitHub)
- [VS Code](#VS-Code)
- [Security, CORS and Authentication](#Security-CORS-and-Authentication)
- [Auth0](#Auth0)
- [Videos](#Videos)
- [Snippets and Commands](#Snippets-and-Commands)

# General

# Html

# CSS

# Javascript

| Link                                                                                                                                                                                            | Description                                                                                          |
| ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------- |
| [How to make modals draggable and resizable](https://github.com/man-group/dtale/blob/master/docs/DRAGGABLE_RESIZABLE_MODALS.md)                                                                 | Tutorial                                                                                             |
| [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                                                                                             |
| [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                                                                                             |
| [How to add fireworks to your website](https://medium.com/front-end-weekly/how-to-add-some-fireworks-to-your-website-18b594b06cca)                                                              | Tutorial                                                                                             |
| [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 []                                                     |
| [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                                                         |
| [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 |
| [How to add whitespace in Javascript](https://www.xspdf.com/resolution/50015155.html)                                                                                                           | multiple ways to add whitespaces with Html and JS                                                    |
| [Deploying ES2015+ Code in Production Today](https://philipwalton.com/articles/deploying-es2015-code-in-production-today/)                                                                      | Article                                                                                              |
| [Determine font color based on background color](https://stackoverflow.com/questions/1855884/determine-font-color-based-on-background-color)                                                    |                                                                                                      |
| [35+ Amazing JavaScript Games with Source Code](https://www.digitaldesignjournal.com/javascript-games/)                                                                                         |                                                                                                      |
| [Understanding Lazy Loading](https://academind.com/tutorials/understanding-lazy-loading/)                                                                                                       |                                                                                                      |
| [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                                                                |
| [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()                            |
| [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)                            |                                                                                                      |
| [The blur event fires when an element has lost focus.](https://developer.mozilla.org/en-US/docs/Web/API/Element/blur_event)                                                                     | MDN reference                                                                                        |
| [Window.open() - Web APIs](https://developer.mozilla.org/en-US/docs/Web/API/Window/open#Window_functionality_features)                                                                          | MDN reference                                                                                        |
| [Working with objects - JavaScript ](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_Objects)                                                                        | MDN reference                                                                                        |
| [A re-introduction to JavaScript (JS tutorial)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript)                                                        | MDN reference                                                                                        |
| [Destructuring assignment](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment)                                                                | MDN reference                                                                                        |
| [Array Common Operations](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array)                                                                               | MDN reference                                                                                        |
| [WindowOrWorkerGlobalScope.fetch()](https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch)                                                                           | MDN reference                                                                                        |
| [Arrow function expressions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions)                                                                       | MDN reference                                                                                        |
| [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                                                                                        |
| [Understanding how a JavaScript ES6 debounce function works](https://chrisboakes.com/how-a-javascript-debounce-function-works/)                                                                 |                                                                                                      |
| [regex101.com](https://regex101.com/)                                                                                                                                                           | Regex tester                                                                                         |
| [How to create a link in JavaScript ?](https://www.geeksforgeeks.org/how-to-create-a-link-in-javascript/)                                                                                       | Tutorial                                                                                             |
| [JavaScript CreateElement](https://www.javascripttutorial.net/javascript-dom/javascript-createelement/)                                                                                         |                                                                                                      |
| [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                                                                         |
| [addEventListener, “change” and option selection](https://stackoverflow.com/questions/24875414/addeventlistener-change-and-option-selection)                                                    | Add items to a select list                                                                           |
| [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)    |                                                                                                      |
| [How To Copy to Clipboard](https://www.w3schools.com/howto/howto_js_copy_clipboard.asp)                                                                                                         | w3schools                                                                                            |
| [JavaScript Roundup](https://iamturns.com/javascript-roundup/)                                                                                                                                  |                                                                                                      |
| [David Walsh Blog](https://davidwalsh.name/)                                                                                                                                                    |                                                                                                      |
| [Regex tutorial](https://medium.com/factory-mind/regex-tutorial-a-simple-cheatsheet-by-examples-649dc1c3f285)                                                                                   | A quick cheatsheet by examples                                                                       |
| [Douglas Crockford's JavaScript](https://crockford.com/javascript/)                                                                                                                             |                                                                                                      |
| [javascript.info](https://javascript.info/)                                                                                                                                                     | The Modern JavaScript Tutorial                                                                       |
| [javascript.info](https://javascript.info/js-animation)                                                                                                                                         | Javascript animations                                                                                |
| [javascript.info](https://javascript.info/promise-chaining)                                                                                                                                     | Promises chaining                                                                                    |
| [Learn how to build a full-stack, production-ready JavaScript web application from scratch](https://builderbook.org/)                                                                           |                                                                                                      |
| [You Don't Know JS Yet (book series) - 2nd Edition](https://github.com/getify/You-Dont-Know-JS)                                                                                                 |                                                                                                      |
| [Index as a key is an anti-pattern](https://medium.com/@robinpokorny/index-as-a-key-is-an-anti-pattern-e0349aece318)                                                                            |                                                                                                      |
| [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)                                         |                                                                                                      |
| [ES7 async functions - a step in the wrong direction](https://blog.spion.dev/posts/es7-async-await-step-in-the-wrong-direction.html)                                                            |                                                                                                      |
| [How To Generate a Random Color in JavaScript](https://css-tricks.com/snippets/javascript/random-hex-color/)                                                                                    |                                                                                                      |
| [A Guide To The Reduce Method In Javascript](https://www.freecodecamp.org/news/reduce-f47a7da511a9/)                                                                                           |                                                                                                      |
| [ES6 In Depth: Arrow functions](https://hacks.mozilla.org/2015/06/es6-in-depth-arrow-functions/)                                                                                                |                                                                                                      |
|                                                                                                                                                                                                 |                                                                                                      |

# Node JS / Express JS

# Heroku

# React

| Link                                                                                                                                                                                                                            | Description                                             |
| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------- |
| [How to migrate from create-react-app to Next.js](https://www.pheuberger.com/convert-create-react-app-to-nextjs/)                                                                                                               | Tutorial                                                |
| [Production build not running on IE11](https://stackoverflow.com/questions/49649831/reactjs-script1010-expected-identifier-production-build-not-running-on-ie11)                                                                | `<meta http-equiv="X-UA-Compatible" content="IE=edge">` |
| [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                           |
| [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                     |
| [Start to Finish: Deploying a React App on DigitalOcean](https://hackernoon.com/start-to-finish-deploying-a-react-app-on-digitalocean-bcfae9e6d01b)                                                                             |                                                         |
| [milliseconds to days](https://stackoverflow.com/questions/7829571/milliseconds-to-days)                                                                                                                                        |                                                         |
| [What is React Fast Refresh](https://medium.com/javascript-in-plain-english/what-is-react-fast-refresh-f3d1e8401333)                                                                                                            |                                                         |
| [Getting Started With Next.js](https://www.smashingmagazine.com/2020/10/getting-started-with-next-js/)                                                                                                                          |                                                         |
| [React v17.0 blogpost](https://reactjs.org/blog/2020/10/20/react-v17.html)                                                                                                                                                      | Official blogpost                                       |
| [Tips for Using React’s UseEffect Effectively](https://medium.com/better-programming/tips-for-using-reacts-useeffect-effectively-dfe6ae951421)                                                                                  |                                                         |
| [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           |
| [Everything you need to know about react-scripts](https://blog.logrocket.com/everything-you-need-to-know-about-react-scripts/)                                                                                                  |                                                         |
| [Your new ReactJS on Sublime Text 3 workspace setup](https://medium.com/@dwardmr/your-new-reactjs-on-sublime-text-3-workspace-setup-9ce87c12e93a)                                                                               |                                                         |
| [A Complete Guide to useEffect](https://overreacted.io/a-complete-guide-to-useeffect/)                                                                                                                                          | VERY detailed article by Dan Abramov                    |
| [React Higher Order Components](https://www.robinwieruch.de/react-higher-order-components)                                                                                                                                      |                                                         |
| [The Wise Guide to React useState() Hook](https://dmitripavlutin.com/react-usestate-hook-guide/)                                                                                                                                |                                                         |
| [3 Essential Tools to Boost your React App’s SEO](https://medium.com/@prestonwallace/3-ways-improve-react-seo-without-isomorphic-app-a6354595e400)                                                                              |                                                         |
| [React SEO: The Best Optimization Methods for React Websites](https://zeo.org/blog/react-seo-the-best-optimization-methods-for-react-websites/)                                                                                 |                                                         |
| [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)                                                                                |                                                         |
| [How to implement Authentication in React using Auth0](https://medium.com/better-programming/how-to-implement-authentication-in-react-using-auth0-1b5ecb6c8fe0)                                                                 |                                                         |
| [React Production Deployment with Netlify](https://blog.bitsrc.io/react-production-deployment-part-1-netlify-703686631dd1)                                                                                                      |                                                         |
| [How To Implement Smooth Transitions in React](https://blog.bitsrc.io/how-to-implement-smooth-transitions-in-react-bd0497b06b8)                                                                                                 |                                                         |
| [An Opinionated Guide to React: Folder Structure & File Naming](https://dev.to/farazamiruddin/an-opinionated-guide-to-react-folder-structure-file-naming-1l7i)                                                                  |                                                         |
| [React Production Deployment with Heroku](https://blog.bitsrc.io/react-production-deployment-part-3-heroku-316319744885)                                                                                                        | Tutorial                                                |
| [React Confirm Dialog as a service](https://medium.com/quadminds/react-confirm-dialog-as-service-8929c88a6702)                                                                                                                  | Create custom confirm box                               |
| [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)                                             |                                                         |
| [How to use the useCallback React hook](https://flaviocopes.com/react-hook-usecallback/)                                                                                                                                        |                                                         |
| [How to Implement Authentication For Your React App](https://medium.appbase.io/how-to-implement-authentication-for-your-react-app-cf09eef3bb0b)                                                                                 |                                                         |
| [React Simple Auth: React + Redux + OAuth 2.0](https://medium.com/@mattmazzola/react-simple-auth-react-redux-oauth-2-0-de6ea9df0a63)                                                                                            | Tutorial                                                |
| [How to Securely Implement OAuth in React](https://fusionauth.io/blog/2020/03/10/securely-implement-oauth-in-react)                                                                                                             |                                                         |
| [How to send HTTP Requests in React](https://malcoded.com/posts/react-http-requests-axios/)                                                                                                                                     |                                                         |
| [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()                        |
| [Refs and the DOM](https://reactjs.org/docs/refs-and-the-dom.html)                                                                                                                                                              |                                                         |
| [The broken promise of Web Components](https://dmitriid.com/blog/2017/03/the-broken-promise-of-web-components/)                                                                                                                 |                                                         |
| [The React Cheatsheet for 2020 (+ real-world examples)](https://www.freecodecamp.org/news/the-react-cheatsheet-for-2020/)                                                                                                       |                                                         |
| [How to use realm on an electron app?](https://github.com/realm/realm-js/issues/1060)                                                                                                                                           |                                                         |
| [Electron Data Persistence](https://www.techiediaries.com/electron-data-persistence/)                                                                                                                                           |                                                         |
| [Useful resources for building apps with Electron](https://github.com/sindresorhus/awesome-electron)                                                                                                                            |                                                         |
| [Mongotron - A Mongo DB GUI built using Electron, and Angular Js](https://github.com/officert/mongotron)                                                                                                                        |                                                         |
|                                                                                                                                                                                                                                 |                                                         |

# Libraries

| Link                                                                                 | Description                                                                                                         |
| ------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------- |
| [Fireworks](https://github.com/fouad/fireworks#readme)                               | Add fireworks to your website                                                                                       |
| [HTML5sortable](https://lukasoppermann.github.io/html5sortable/index.html)           | Lightweight standalone library for creating sortable lists and grids using native HTML5 drag and drop API.          |
| [React beautiful DND](https://github.com/atlassian/react-beautiful-dnd)              | Beautiful and accessible drag and drop for lists with React                                                         |
| [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 |
| [immutability-helper](https://www.npmjs.com/package/immutability-helper)             | React - Mutate a copy of data without changing the original source                                                  |
| [react-lazyload](https://www.npmjs.com/package/react-lazyload)                       | Lazyload your Components, Images or anything matters the performance.                                               |
| [nodemailer](https://www.w3schools.com/nodejs/nodejs_email.asp)                      | Node.js Send an Email                                                                                               |
| [Semantic UI](https://semantic-ui.com/)                                              | Semantic is a development framework that helps create beautiful, responsive layouts using human-friendly HTML.      |
| [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.                                     |
| [bcrypt for NodeJs](https://github.com/kelektiv/node.bcrypt.js)                      |                                                                                                                     |
| [JSON Server](https://www.npmjs.com/package/json-server)                             | Get a full fake REST API with zero coding in less than 30 seconds                                                   |
| [ExpressJS](https://expressjs.com/)                                                  | Fast, unopinionated, minimalist web framework for Node.js                                                           |
| [nodemon](https://nodemon.io/)                                                       | automatic refresh for node                                                                                          |
| [Body Parser](https://www.npmjs.com/package/body-parser)                             | Node.js body parsing middleware.                                                                                    |
| [morgan](https://www.npmjs.com/package/morgan)                                       | HTTP request logger middleware for node.js                                                                          |
| [CORS](https://www.npmjs.com/package/cors)                                           | A node.js package for providing a Connect/Express middleware                                                        |
| [Mongoose](https://www.npmjs.com/package/mongoose)                                   | MongoDB object modeling tool designed to work in an asynchronous environment                                        |
| [Mongoose encryption](https://github.com/joegoldbeck/mongoose-encryption)            | Simple encryption and authentication plugin for Mongoose                                                            |
| [Dotenv](https://www.npmjs.com/package/dotenv)                                       | zero-dependency module that loads environment variables from a .env file into process.env                           |
| [SuperTest](https://www.npmjs.com/package/supertest)                                 | library to help with testing API                                                                                    |
| [cross-env](https://www.npmjs.com/package/cross-env)                                 | library to enable cross platform scripts                                                                            |
| [mongoose-unique-validator](https://www.npmjs.com/package/mongoose-unique-validator) | check unique entries in MongoDB                                                                                     |
| [jsonwebtoken ](https://www.npmjs.com/package/jsonwebtoken)                          | generate JSON webtokens                                                                                             |
| [react-transition-group](https://www.npmjs.com/package/react-transition-group)       | animations on render                                                                                                |
| [React bootstrap](https://react-bootstrap.github.io/)                                | UI Library for React                                                                                                |
| [React Markdown](https://www.npmjs.com/package/react-markdown)                       | Markdown component for React using remark                                                                           |
| [Styled Components](https://styled-components.com/)                                  | Use the best bits of ES6 and CSS to style your apps without stress                                                  |
|                                                                                      |                                                                                                                     |

# Landing Page

# Mongo DB

# Design

| Link                                                                                                                                                            | Description                                    |
| --------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------- |
| [CSS Tips for Better Color and Contrast Accessibility](https://webdesign.tutsplus.com/articles/css-tips-for-better-color-and-contrast-accessibility--cms-34472) |                                                |
| [Applying Color Theory to Digital Displays](https://www.uxmatters.com/mt/archives/2007/01/applying-color-theory-to-digital-displays.php)                        |                                                |
| [Draw Pixel art](https://www.pixilart.com/draw)                                                                                                                 |                                                |
| [How to start making pixel art #1](https://medium.com/pixel-grimoire/how-to-start-making-pixel-art-2d1e31a5ceab)                                                |                                                |
| [The Top 10 Web Design Mistakes of 1999](https://www.nngroup.com/articles/the-top-ten-web-design-mistakes-of-1999/)                                             |                                                |
| [Material Design - color usage and palettes](https://material.io/design/color/the-color-system.html#color-usage-and-palettes)                                   |                                                |
| [The Responsive Website Font Size Guidelines](https://learnui.design/blog/mobile-desktop-website-font-size-guidelines.html)                                     |                                                |
| [Converting Colors](https://convertingcolors.com/decimal-color-16777215.html)                                                                                   | Convert any color to various different formats |
| [svgrepo.com](https://www.svgrepo.com/)                                                                                                                         | SVG Vectors and Icons                          |
| [Nerd fonts](https://github.com/ryanoasis/nerd-fonts)                                                                                                           | Iconic font aggregator                         |
| [flaticon.com](https://www.flaticon.com/)                                                                                                                       |
| [Font Awesome](https://fontawesome.com/)                                                                                                                        |
| [The 41 best free web fonts](https://www.creativebloq.com/typography/free-web-fonts-1131610)                                                                    |                                                |
|                                                                                                                                                                 |                                                |

# Git / GitHub

# VS Code

| Link                                                                                                                                             | Description |
| ------------------------------------------------------------------------------------------------------------------------------------------------ | ----------- |
| [Learn these keyboard shortcuts to become a VS Code ninja](https://blog.logrocket.com/learn-these-keyboard-shortcuts-to-become-a-vs-code-ninja/) |             |
| [Recommended VS Code Extensions](https://dev.to/klamserdev/vs-code-extensions-i-use-daily-568i)                                                  |             |
| [Snippets in Visual Studio Code](https://code.visualstudio.com/docs/editor/userdefinedsnippets#_creating-your-own-snippets)                      |             |
|                                                                                                                                                  |             |

# Security, CORS and Authentication

# Auth0

| Link                                                                                                                                        | Description        |
| ------------------------------------------------------------------------------------------------------------------------------------------- | ------------------ |
| [JWT Handbook](https://auth0.com/resources/ebooks/jwt-handbook)                                                                             |                    |
| [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) |                    |
| [The Complete Guide to React User Authentication with Auth0](https://auth0.com/blog/complete-guide-to-react-user-authentication/)           | official blog      |
| [Send Email Invitations for Application Signup](https://auth0.com/docs/auth0-email-services/send-email-invitations-for-application-signup)  | official reference |
|                                                                                                                                             |                    |

## Videos

| Link                                                                                                                                                           | Description |
| -------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |
| [Higher-order functions - Part 1 of Functional Programming in JavaScript](https://www.youtube.com/watch?v=BMUiFMZr7vk&list=PL0zVEGEvSaeEd9hlmCXrk5yUyqUag-n84) | YouTube     |
| [Map - Part 2 of Functional Programming in JavaScript](https://www.youtube.com/watch?v=bCqtb-Z5YGQ&list=PL0zVEGEvSaeEd9hlmCXrk5yUyqUag-n84&index=2)            | YouTube     |
| [Reduce basics - Part 3 of Functional Programming in JavaScript](https://www.youtube.com/watch?v=Wl98eZpkp-c&t=31s)                                            | YouTube     |
| [What the heck is the event loop anyway?](https://www.youtube.com/watch?v=8aGhZQkoFbQ)                                                                         | YouTube     |
| [Update Data in a List without Mutations](https://egghead.io/lessons/react-update-data-in-a-list-without-mutations)                                            | eggheadio   |
| [Getting Started with Redux](https://egghead.io/courses/getting-started-with-redux)                                                                            | eggheadio   |
| [Understand JavaScript's this Keyword in Depth](https://egghead.io/courses/understand-javascript-s-this-keyword-in-depth)                                      | eggheadio   |
|                                                                                                                                                                |             |

# Snippets and Commands

## Html

### Escaping Characters

```Html

& --> &amp;
 < --> &lt;
 > --> &gt;
 " --> &quot;
 ' --> &#x27;
 / --> &#x2F;

<!-- &apos; not recommended because its not in the HTML spec (See: section 24.4.1) &apos; is in the XML and XHTML specs.

Forward slash is included as it helps end an HTML entity -->
```

## Javascript

### Scroll to top

```Javascript
// Scroll to specific values
// scrollTo is the same
window.scroll({
  top: 2500,
  left: 0,
  behavior: 'smooth'
});

// Scroll certain amounts from current position
window.scrollBy({
  top: 100, // could be negative value
  left: 0,
  behavior: 'smooth'
});

// Scroll to a certain element
document.querySelector('.hello').scrollIntoView({
  behavior: 'smooth'
});
```

### Convert RGB to gray

```Javascript
R*0.299 + G*0.587 + B*0.114
```

### Parse Link Header for rel

```Javascript
//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.

var data = 'link: "<http://localhost:3001/posts?_page=1>; rel="first", <http://localhost:3001/posts?_page=2>; rel="next", <http://localhost:3001/posts?_page=5>; rel="last""'

finalResult = relArray.reduce((object, value, index) => {
    object[value] = linkArray[index];
    return object;
}, {});

console.log(finalResult);
```

### Create random value

```Javascript
//create random value for STATE
const generateState = (length) => {

let result = ""
  const characters =
  "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789"
  var charactersLength = characters.length
  for ( var i = 0; i < length; i++ ) {
    result += characters.charAt(Math.floor(Math.random() * charactersLength))
  }
  return result
}
```

### Add days to current date

```Javascript
  var today = new Date();
  var newdate = new Date();
  newdate.setDate(today.getDate()+29);
  document.writeln(newdate);
```

### Read Cookie

```Javascript
  const decodedCookie = decodeURIComponent(document.cookie)

const cookieArray = decodedCookie.split(";")
  for (let i = 0; i < cookieArray.length; i++) {
    if (cookieArray[i].indexOf("category") >= 0) {
      const searchCookie = cookieArray[i].split("=")
      setPreviousSearch(searchCookie[1].split(","))
    }
  }

```

## Terminal (OSX, Linux ...)

| Command                                      | Description                                     |
| -------------------------------------------- | ----------------------------------------------- |
| clear                                        | scroll past visible content                     |
| touch ‘filename’                             | create filename                                 |
| mkdir ‘folder’                               | create directory                                |
| pwd                                          | present working directory                       |
| ls -al                                       | list of files and directories with hidden files |
| cd ..                                        | one directory level up                          |
| cd /                                         | go to root folder                               |
| nano filename                                | display and edit filename                       |
| openssl rand -base64 32                      | Create encrypted key                            |
| openssl rand -base64 64                      | Create encrypted key                            |
| pwd                                          | present working directory                       |
| which                                        | find location of variable                       |
| man ls                                       | help page of “ls”. Quit with q                  |
| cat filename                                 | display filecontent.                            |
| less filename                                | display filecontent, scroll with arrows         |
| nano filename                                | display and modify filecontent                  |
| open ~                                       | open home directly                              |
| open filename                                | open file in osx                                |
| touch filename                               | create filename                                 |
| mv filename newfilename, mv folder newfolder | rename/move filename to newfilename             |
| rm filename                                  | remove filename                                 |
| mkdir folder                                 | create directory                                |
| rmdir folder                                 | remove directory                                |
| rm -rf folder                                | remove directory with content                   |
| chown user filename                          | change ownership of filename to user            |
| whoami                                       | logged-in user                                  |
| chgrp group filename                         | change usergroup of filename to group           |
| alias newcmd=‘commands"                      | create new command                              |
|                                              |                                                 |

## GIT

```
- git push --set-upstream origin new-branch
- git config --global user.name "Your name"
- git config --global user.email "Your email"

//Create a new repository

//replace <username> and <repo> with your values
- git clone https://github.com/<username>/<repo>.git
- cd <repo>
- touch README.md
- git add README.md
- git commit -m "add README"
- git push -u origin master

//Push an existing folder
- cd existing_folder
- git init
- git remote add origin https://github.com/<username>/<repo>.git
- git add .
- git commit -m "Initial commit"
- git push -u origin master

//Push an existing Git repository
- cd existing_repo
- git remote rename origin old-origin
- git remote add origin https://github.com/<username>/<repo>.git
- git push -u origin --all
- git push -u origin --tags

//Unlink repository

- git remote rm origin
- rm .git/FETCH_HEAD

```

---

## Heroku

- create file "Procfile" with content “web: node index.js” in root of repo

| Command                           | Description                                           |
| --------------------------------- | ----------------------------------------------------- |
| heroku create appname --region eu | create app on heroku with name “appname” in region eu |
| git push heroku master            | deploy local app to heroku-repo                       |
| git init                          | create own git repo for heroku app                    |
| heroku git:remote -a yourapp      | add heroku app as remote                              |
| heroku ps:scale web=1             | check app is running                                  |
| heroku open                       | start app                                             |
| heroku logs --tail                | display logs                                          |
| heroku run bash                   | open shell for Heroku dyno (e.g. for debugging)       |
|                                   |                                                       |

webdev

File Explorer

Today's picks

Was this content helpful?

Recent Feedback

webdev

File Explorer

Today's picks

Was this content helpful?

Recent Feedback

Download README