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.
The resources are divided into the following categories:
- General
- Html
- CSS
- Javascript
- Node JS / Express JS
- Heroku
- React
- Libraries
- Landing Page
- MongoDB
- Design
- Git / GitHub
- VS Code
- Security, CORS and Authentication
- Auth0
- Videos
- Snippets and Commands
| Link | Description |
|---|---|
| fullstackopen.com | MOOC course for Modern Web Development |
| Sometimes Google and Youtube dont load: PR_END_OF_FILE_ERROR | Related to Firefox |
| When should one use a 'www' subdomain? | Are there any good reasons to use or not to use the 'www' subdomain? |
| How programmers find their startup ideas | |
| browser-extension-template | Barebones boilerplate with webpack, options handler and auto-publishing |
| Webstorm - Navigation Features That Will Make You Faster | Official Blogpost by Jetbrains |
| 4 Steps To Building A Bulletproof Beta Test | Find the right community, Trust your testers, Filter out the noise, Maintain long-term relationships. |
| 15+ Chrome extensions you should have in your pocket. | |
| AWS IP address ranges | |
| How to Launch on Product Hunt | Official guide by ProductHunt |
| Create good titles and snippets in Search Results | Guide by Google |
| CodeNewbie | A community of programmers |
| Sample Privacy Policy Template | |
| 6 Super cool Websites For Practicing Algorithms, Learning Programming | |
| FreeCodeCamp | Freecodecamp - Learn to code at home |
| Color model - Wikipedia | RGB, HSL and more |
| The color system - Material Design | Tools for picking colors |
| color-hex.com | Color Palettes |
| Callback (computer programming) | |
| Single-responsibility principle - | Wikipedia article |
| Input/output | Wikipedia article |
| weatherstack API | Retrieve instant, accurate weather information for any location in the world in lightweight JSON format |
| curl | command line tool and library |
| Markdown Tables generator | |
| Scaler | Explore the Web Development Roadmap! Learn about the latest trends and skills to stay ahead in the ever-changing world of web development. |
| Link | Description |
|---|---|
| What is Rel=”Noopener” | Article about link vulnerabilities |
| Performance and security of target=_blank links with rel=noopener | Article about link vulnerabilities |
| Target=”_blank” — the most underestimated vulnerability ever | Another article about the vulnerabilities of links |
| Explained: noopener, noreferrer, and nofollow Values | |
| HTML Encoding Reference | How to escape any character in Html |
| Internetingishard | Friendly web development tutorials for complete beginners |
| hyperlink - How to open link in new tab on html? | |
| input type="date" | MDN reference for date input |
| Character Entity Reference Chart | |
| Key shortcuts, Unicode and UTF-8 tables | A list of all HTML Entities for HTML 4.0 webpages |
| Link | Description |
|---|---|
| QuotaGuard Static IP's | How to serve Heroku apps from a static IP (e.g. for whitelisting) |
| 'heroku' does not appear to be a git repository | |
| Optimizing Dyno Usage | Official reference |
| Connecting Heroku App to Atlas MongoDB Cloud service | |
| Add a custom root domain | Official reference |
| Link | Description |
|---|---|
| Fireworks | Add fireworks to your website |
| HTML5sortable | Lightweight standalone library for creating sortable lists and grids using native HTML5 drag and drop API. |
| React beautiful DND | Beautiful and accessible drag and drop for lists with React |
| React DnD | A set of React utilities to help you build complex drag and drop interfaces while keeping your components decoupled |
| immutability-helper | React - Mutate a copy of data without changing the original source |
| react-lazyload | Lazyload your Components, Images or anything matters the performance. |
| nodemailer | Node.js Send an Email |
| Semantic UI | Semantic is a development framework that helps create beautiful, responsive layouts using human-friendly HTML. |
| heroku-ssl-redirect | Redirect users to the SSL version of your app. For ExpressJS running on Heroku. |
| bcrypt for NodeJs | |
| JSON Server | Get a full fake REST API with zero coding in less than 30 seconds |
| ExpressJS | Fast, unopinionated, minimalist web framework for Node.js |
| nodemon | automatic refresh for node |
| Body Parser | Node.js body parsing middleware. |
| morgan | HTTP request logger middleware for node.js |
| CORS | A node.js package for providing a Connect/Express middleware |
| Mongoose | MongoDB object modeling tool designed to work in an asynchronous environment |
| Mongoose encryption | Simple encryption and authentication plugin for Mongoose |
| Dotenv | zero-dependency module that loads environment variables from a .env file into process.env |
| SuperTest | library to help with testing API |
| cross-env | library to enable cross platform scripts |
| mongoose-unique-validator | check unique entries in MongoDB |
| jsonwebtoken | generate JSON webtokens |
| react-transition-group | animations on render |
| React bootstrap | UI Library for React |
| React Markdown | Markdown component for React using remark |
| Styled Components | Use the best bits of ES6 and CSS to style your apps without stress |
| Link | Description |
|---|---|
| Free Templates on Cruip.com | Download Landing Page templates |
| Pricing Page examples | |
| What is a Landing Page and How to Create One in 2020! | |
| Landing Page Feedback Trello Board | A Trello board with feedback on various landing pages |
| Rewriting landing pages with a pro copywriter | |
| Get free landing pages every week. | |
| Why Landing Page is Crucial for your App Success? | |
| Link | Description |
|---|---|
| mongodump and mongorestore | Official reference |
| Mongoose’s Model.Populate() | how to use populate() method |
| Secure Your Database With MongoDB Atlas | Official blog article |
| MongoDB Security Checklist & Best Practices | Official reference |
| Mongoose rename collection | |
| MongoDB’s field-level encryption protects private data | |
| Securing MongoDB using Let's Encrypt certificate | |
| Link | Description |
|---|---|
| CSS Tips for Better Color and Contrast Accessibility | |
| Applying Color Theory to Digital Displays | |
| Draw Pixel art | |
| How to start making pixel art #1 | |
| The Top 10 Web Design Mistakes of 1999 | |
| Material Design - color usage and palettes | |
| The Responsive Website Font Size Guidelines | |
| Converting Colors | Convert any color to various different formats |
| svgrepo.com | SVG Vectors and Icons |
| Nerd fonts | Iconic font aggregator |
| flaticon.com | |
| Font Awesome | |
| The 41 best free web fonts | |
| Link | Description |
|---|---|
| Change remote repository url | official reference |
| Managing your profile README | official reference |
| Searching issues and pull requests | official reference |
| Pushing commits to a remote repository | official reference |
| How can I delete a file from a Git repository? | Use git rm. |
| How to show or change your Git username or email address | git config --global user.name "username" |
| Getting Started - About Version Control | |
| How to Configure Git Username and Email Address | |
| How does one change the language of the command line interface of Git? | |
| Tell Git not to track a file any more (remove from repo) | |
| Why are there two ways to unstage a file in Git? | git reset |
| How To Create a Pull Request on GitHub | |
| How to restore older file versions in Git | |
| An Intro to Git and GitHub for Beginners (Tutorial) | |
| Link | Description |
|---|---|
| Learn these keyboard shortcuts to become a VS Code ninja | |
| Recommended VS Code Extensions | |
| Snippets in Visual Studio Code | |
| Link | Description |
|---|---|
| How to Check for TLS to Secure Your Email | |
| Security framework for building multi-user end-to-end encrypted data storage | |
| JWT.IO | allows you to decode, verify and generate JSON Web Tokens |
| Cross-Origin Resource Sharing (CORS) | |
| Cross-Site Request Forgery Prevention | |
| The Authorization Request | OAuth 2.0 Simplified |
| Single-Page Apps | OAuth 2.0 Simplified |
| 3 Ways to Fix the CORS Error | How the Access-Control-Allow-Origin Header Works |
| How and Why You Should Avoid CORS in Single Page Apps | |
| enable cross-origin resource sharing | |
| XMLHttpRequest cannot load XXX No 'Access-Control-Allow-Origin' header | |
| Link | Description |
|---|---|
| JWT Handbook | |
| Hacking It Out: When CORS won’t let you be great | |
| The Complete Guide to React User Authentication with Auth0 | official blog |
| Send Email Invitations for Application Signup | official reference |
| Link | Description |
|---|---|
| Higher-order functions - Part 1 of Functional Programming in JavaScript | YouTube |
| Map - Part 2 of Functional Programming in JavaScript | YouTube |
| Reduce basics - Part 3 of Functional Programming in JavaScript | YouTube |
| What the heck is the event loop anyway? | YouTube |
| Update Data in a List without Mutations | eggheadio |
| Getting Started with Redux | eggheadio |
| Understand JavaScript's this Keyword in Depth | eggheadio |
<!-- Escape the following characters with HTML entity encoding to prevent switching into any execution context, such as script, style, or event handlers. Using hex entities is recommended in the spec. In addition to the 5 characters significant in XML (&, <, >, ", '), the forward slash is included as it helps to end an HTML entity. -->
& --> &
< --> <
> --> >
" --> "
' --> '
/ --> /
<!-- ' not recommended because its not in the HTML spec (See: section 24.4.1) ' is in the XML and XHTML specs.
Forward slash is included as it helps end an HTML entity -->// 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'
});R*0.299 + G*0.587 + B*0.114//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""'
var linkRegex = /\<([^>]+)/g;
var relRegex = /rel="([^"]+)/g;
var linkArray = [];
var relArray = [];
var finalResult = {};
var temp;
while ((temp = linkRegex.exec(data)) != null) {
linkArray.push(temp[1]);
}
while ((temp = relRegex.exec(data)) != null) {
relArray.push(temp[1]);
}
finalResult = relArray.reduce((object, value, index) => {
object[value] = linkArray[index];
return object;
}, {});
console.log(finalResult);//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
} var today = new Date();
var newdate = new Date();
newdate.setDate(today.getDate()+29);
document.writeln(newdate); 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(","))
}
}
| 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 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
- 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) |