All resources and notes from the Complete Web Developer in 2018: Zero to Mastery course
Submarine Cable Map:
Maps that explain the Internet:
- https://www.vox.com/a/internet-maps First Webpage in the world:
- http://info.cern.ch/hypertext/WWW/TheProject.html
Install a text editor (Select one):
Reference websites:
Reference websites:
- https://css-tricks.com/
- https://www.supremo.co.uk/typeterms/
- https://css-tricks.com/snippets/css/a-guide-to-flexbox/
- https://waitbutwhy.com/
- https://unsplash.com/
- https://developer.mozilla.org/es/docs/Learn/CSS/Introduction_to_CSS/Cascada_y_herencia
- https://specificity.keegan.st/
Website for color check:
Website for fonts download:
Reference websites:
- http://flexboxfroggy.com/
- https://caniuse.com/
- https://www.w3schools.com/cssref/css3_browsersupport.asp
- http://shouldiprefix.com/
App for creating users list:
Website with animation examples:
Website for patterns:
- https://www.creative-tim.com/bootstrap-themes/ui-kit?direction=asc&sort=price
- http://mashup-template.com/templates.html
- https://startbootstrap.com/template-categories/all/
- https://mdbootstrap.com/freebies/
- https://www.creative-tim.com/
Generating animated patterns:
Installing Github:
Grid Cheat Sheet:
Grid Garden:
Free Design resources:
Reference websites:
- https://developer.mozilla.org/en-US/docs/web/Events
- https://www.cambiaresearch.com/articles/15/javascript-char-codes-key-codes
- https://jquery.com/
- http://youmightnotneedjquery.com/
- https://babeljs.io/
FOR MAC OR LINUX:
ls
Pwd
cd
cd ..
Clear
Cd / —> root director
Cd ~
Cd folder/folder/test
Mkdir name
Open folder
Touch index.html
Open index.html
Open -a “Sublime Text”
Open .
Mv index.html about.html
Up and down arrow.
Rm file
Rm -r folder
Say hello (only on Mac).FOR WINDOWS:
dir - list files
cd {directory name} - change directory
cd / - go to root (top) directory
cd .. - go up a level
mkdir {file name} - make a directory
echo > {filename} - create an empty file
del {filename} - remove a file
rmdir {directory name} - remove a directory and all files within
rename {filename} {new filename} - rename a file or folder
start {filename} - open file in default program
start . - open current directory
cls - clear the terminal screen Install Git:
- https://www.atlassian.com/git/tutorials/install-git#windows
- https://www.atlassian.com/git/tutorials/install-git
git clone “https:……”
git status
git add “filename”
git add .
git commit –m”message”
git push
git pull
git branch
git branch “name”
git checkout “name”
git merge “name”
Once you are in your forked project directory in your command prompt....
-
Type git remote -v and press Enter. You'll see the current configured remote repository for your fork.
a.
git remote -vb.
origin https://github.com/YOUR_USERNAME/YOUR_FORK.git (fetch)c.
origin https://github.com/YOUR_USERNAME/YOUR_FORK.git (push) -
Type git remote add upstream, and then paste the URL you would copy from the original repository if you were to do a git clone. Press Enter. It will look like this:
git remote add upstream https://github.com/zero-to-mastery/PROJECT_NAME.git -
To verify the new upstream repository you've specified for your fork, type
git remote -vagain. You should see the URL for your fork as origin, and the URL for the original repository as upstream. -
Now, you can keep your fork synced with the upstream repository with a few Git commands. One simple way is to do the below command from the master of your forked repository:
git pull upstream master
npm init
npm install
npm install –g browserify
Install node and npm:
Reference websites:
npm install –g create-react-app
create-react-app “name”
npm start
npm install tachyons
Website for fonts download:
Reference websites:
- https://reactjs.org/docs/react-component.html
- https://jsonplaceholder.typicode.com/
- http://atomicdesign.bradfrost.com/
- https://robohash.org
Action --> Reducer --> Store --> Make changes
npm install redux
npm install react-redux
npm install redux-logger
npm install redux-thunk
- https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd?hl=en
- https://reacttraining.com/react-router/
- https://ramdajs.com/
- https://lodash.com
- https://glamorous.rocks
- https://www.styled-components.com
- https://github.com/css-modules/css-modules
- https://www.gatsbyjs.org
- https://zeit.co/blog/next5
- www.material-ui.com/#/components/app-bar
- https://react.semantic-ui.com/elements/button
- https://github.com/reactjs/reselect
- https://redux-saga.js.org
- https://facebook.github.io/immutable-js/
- https://stripe.com/docs/api
- https://www.twilio.com/docs/api/messaging/send-messages
- https://apilist.fun
Animated objects library:
- https://www.npmjs.com/package/react-tilt
npm install –save react-tilt
Background patterns:
Animated background library:
-
https://vincentgarreau.com/particles.js/
npm install react-particles-js
Image and video recognition:
- https://clarifai.com/developer/guide/
npm install clarifai
Icons library:
Install Postman:
Express.js:
(Getting start guide)
npm install body-parser
npm install express --save
npm install --save-dev nodemon
Node.js Reference websites:
Storing passwords securely:
npm install bcrypt-nodejs
$ npm install bcrypt
1. /*
2. * You can copy and run the code below to play around with bcrypt
3. * However this is for demonstration purposes only. Use these concepts
4. * to adapt to your own project needs.
5. */
6.
7. import bcrypt from'bcrypt'
8. const saltRounds = 10 // increase this if you want more iterations
9. const userPassword = 'supersecretpassword'
10. const randomPassword = 'fakepassword'
11.
12. const storeUserPassword = (password, salt) =>
13. bcrypt.hash(password, salt).then(storeHashInDatabase)
14.
15. const storeHashInDatabase = (hash) => {
16. // Store the hash in your password DB
17. return hash // For now we are returning the hash for testing at the bottom
18. }
19.
20. // Returns true if user password is correct, returns false otherwise
21. const checkUserPassword = (enteredPassword, storedPasswordHash) =>
22. bcrypt.compare(enteredPassword, storedPasswordHash)
23.
24.
25. // This is for demonstration purposes only.
26. storeUserPassword(userPassword, saltRounds)
27. .then(hash =>
28. // change param userPassword to randomPassword to get false
29. checkUserPassword(userPassword, hash)
30. )
31. .then(console.log)
32. .catch(console.error)Change localhost:
If you don't want set environment variable, other option - modify scripts part of package.json from:
"start": "react-scripts start"
Linux (tested on Ubuntu 14.04/16.04) and MacOS (tested by @aswin-s on MacOS Sierra 10.12.4) to:
"start": "PORT=3006 react-scripts start"
or (maybe) more general solution by @IsaacPak to:
"start": "export PORT=3006 react-scripts start"
Windows @JacobEnsor solution to:
"start": "set PORT=3006 && react-scripts start"
Front-end and back-end connection:
- https://www.npmjs.com/package/cors
npm install cors
Front-end:
fetch('http://localhost:3000/image', {
method: 'put',
headers: {'Content-Type': 'application/json'},
body: JSON.stringify({
id: this.state.user.id
})
})
.then(response => response.json())
.then(count => {
this.setState(Object.assign(this.state.user, { entries:count}))
})Back-end:
const cors = require('cors')
app.use(cors());Install PostgreSQL:
-
en el terminal:
brew update brew doctor brew install postgresql brew services start postgresql brew services stop postgresql createdb ‘test’ psql ‘test’
for windows:
-
http://www.postgresqltutorial.com/install-postgresql/
@powershell -NoProfile -ExecutionPolicy unrestricted -Command "iex ((new-object net.webclient).DownloadString('https://s3.amazonaws.com/pgcentral/install.ps1'))" cd bigsql pgc install pg10 pgc start pg10
-
http://dc-apuntes.blogspot.com/2016/04/comandos-postgres-desde-cmd-windows.html
-
https://www.w3resource.com/PostgreSQL/connect-to-postgresql-database.php
data types
Terminal commands for windows:
Login: (-U usuario)
psql -h localhost -U postgres
Create database:
create database database_name;
Show all datatables:
\l
Create a user:
create user moni with password ‘moni’;
Delete a database:
drop database database_name;
Connect to a database:
\c database_name;
Create a schema:
create schema friends;
Create a table:
create table Friends.test( firstname CHAR(15), lastname CHAR(20));
create table Friends.login(id serial not null primary key, secret varchar (100) not null, name text unique not null, entries bigint default 0, joined timestamp not null);
Show all information of a table:
select * from friends.test;
Describe database:
\d friends.test
Insert data:
insert into friends.test values( ‘Mike’, ‘Smith’);
insert into friends.test (firstname, lastname )values( ‘Sally’, ‘Jones’);
Add a column to an existing table:
alter table Friends.test add age smallint;
Update data from the table:
update friends.test set age = 25 where firstname= ‘Mike’;
Delete data from the table:
delete from friends.test where firstname = ‘Mike’;
Delete column from a table:
alter table friends.test drop column age;
Delete a table:
drop table friends.test;
Functions:
select avg(age) from friends.test;
Join tables:
select * from friends.test join friends.login on friends.test.firstname = friends.login.name;
Exit:
\q
List all users in postgresSQL database server:
\du
List all tables in a schema:
\d+ schema_name.*
List all tables in a database:
\dt *.*
List a table in a schema:
\d+ schema_name . table_name
Show description of a table, columns, type, modifications, etc.:
\d+ table_name
Create a backup of a database:
pg_dump -h localhost -U postgres database_name > database_name.sql
Restore a database: 1. Create a new database where the restore file is going to be placed:
psql -U postgres -d new_database_name -f respaldo.sql
*Note: it is important to create the restore in the same root where the database copy is saved.
Enter to postgres with a user different to postgres:
psql -h localhost -d postgres -U usuario
Enter to a database with a different user:
psql -h localhost -d nombre_base -U nombre_usuario
Tool for db connection with back-end:
Environmental variables:
On terminal:
bash
-->PORT-3000 node server.js
On server.js:
const PORT = process.env.PORT
app.listen(PORT, ()=>{
console.log(`app is running on port ${PORT}`);
})On terminal:
bash
-->DATABASE_URL-123 node server.js
On server.js:
const DATABASE_URL = process.env. DATABASE_URL
app.listen(3000, ()=>{
console.log(`app is running on port ${ DATABASE_URL }`);
})On terminal:
fish
-->env DATABASE_URL-‘hello’ node server.js
Deploy apps:
Heroku:
Not the best one:
Commands for heroku on backend folder: Install heroku:
npm install -g heroku
heroku login
heroku create
In the terminal there will be a URL : ” https://limitless-bastion-10041.herokuapp.com/”
git remote –v
git push origin master
heroku git: remote –a limitless-bastion-10041
Changes required in:
- BACK END: PORT in server.js needs to be changed by an environment variable
- FRONT END: fetch URL needs to be changed by the URL of HEROKU + “:3000”
git push heroku master
for checking errors:
heroku logs --tail
heroku open
Connect to pg database:
- https://devcenter.heroku.com/articles/heroku-postgresql
- https://docs.aws.amazon.com/es_es/AmazonRDS/latest/UserGuide/USER_ConnectToPostgreSQLInstance.html
- https://msdn.microsoft.com/en-us/library/ms175043(v=sql.120).aspx#SSMSProcedure
Create a new postgres database using Heroku:
Data: Heroku postgres: create new: install heroku postgres: select the app created
heroku addons
heroku info
heroku pg:psql
The Complete Junior to Senior Web Developer Roadmap (2019):
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent