NPM : Node package Manager

- Packages for external modules.
- Bits of reusable codes that is written by someone.

1) cd <folderName>
2) npm init : Initialised npm and also creates the package.json file
3) npm install <packageName1> <packageName2> : Install the package name using npm
4) npm install -g nodemon : install nodemon globally using npm
5) npm install body-parser: 
6) npm install ejs:

Package.json file :-
Description of all the npm packages inside your file

Mongo DB

1. show dbs: show database names  

<!--Create Database & records—>

1. use [Database_Name] : create/switch to database 
2. db : show your current db
3. db.[tableName].insertOne({_id: 1, name: “Pen” }) : insert new record
4. show collections : show all the tables in the db 

<!— Read Database  —>

1. db.products.find() : select all records in the table “products”
2. db.products.find({ [column_name] : [value] }) : search a specific column and display all records. 
3. db.products.find({ price : {$gt: 1}}) : select * where price > 1 
4. db.products.find({ [column_name] : [value}, { [fields that we want back] })

<!— Update records—>

1. db.[tableName].updateOne({ [column_ name] : [field] }, {$set: { [column_name] : [value] }})
2. db.products.find() : select all records in the table “products”

<!— Delete records—>

1. db.[tableName].deleteOne({ [column_name] : [value]})
2. db.products.find() : select all records in the table “products”

<!— Relationship —>

1 Rubber to M review

On Mac

[Connect MongoDB to node.js]

1.  mkdir [folderName] : make a new directory
2. cd [folderName] : change directory
3. touch app.js : create a new file “app.js"
4. npm init -y: say yes to everything for npm init
   
5. npm i mongodb : install mongodb driver
6. code app.js : Open up app.js file in vscode.

Git Command [Working Directory to Local Repository]

1. cd to your local directory
2. git init : Initialised git   
3. ls -a : to view all the hidden files
4. git status : to check what files are inside the staging area
5. git add [filename.txt] : add files to the staging area
6. git rm —cached -r : to remove everything from the staging area
7. git status: to check what files are inside the staging area 
8. git commit -m “initial files” : commit files in the version control  
9. git log : see what commit has been made        

[If there is edits made to the files]

1. cd to your local directory
2. git status : to check what files are inside the staging area
3. git add . : add all files to the staging area
4. git status : to check what files are inside the staging area
5. git commit -m “initial files” : commit files in the version control  
6. git log : see what commit has been made
7. git diff [filename] : see what difference between current version and last save point     
8. git checkout [filename]:rollback to the previous versiong

[Compare the codes of your files in your working directory]

1. cd to your directory you have committed
2. git add . : git add all files
3. git diff . : check the difference between current version and last save point

Git Commands [Local Repository to Remote]

1. Create a repository in GitHub
2. Cd to the working directory folder you wanna commit eg Story
3. git log : to check for previous commits   

[Push commit to GitHub]

1.  git remote add origin [URL git directory] : create a remote
2. git push -u origin master: push our local repository to remote repository

[if got edit files]

1. git pull
2. git push -u origin master: push our local repository to remote repository

Git Commands [.gitignore file]

1. cd to your working directory
2. touch .gitignore : create a file called .gitignore 
3. ls -a : view hidden file inside console
4. open .gitignore : Open file and include the filename to be ignored
5. git init : Initialised git   
   
6. git status : to check what files are inside the staging area
7. git add [filename.txt] : add files to the staging area
8. git status : to check what files are inside the staging area
9. git commit -m “initial files” : commit files in the version control  

Inside the .gitignore file

• add files that wanna be ignored when adding and commit to git
• # for commenting
• *.txt : all the files with txt extension will be ignored

Git commands [Branching & Merging]

1. cd to your working directory
2. git log : see what commit has been made
3. git branch [branch_name] : create a new branch
4. git branch : list out all the branches (* shows you what branch you’re on)
5. git checkout [branch_name] : switch branch
6. git add .
7. git commit  -m “[message]”
8. git log
9. git merge [branch_name] 
10. git push origin [branch_name] -u

Regular Function vs Arrow Function

Regular Functions

1. May or may not have a name, can be anonymous
2. With name may be hoisted eg can declare function in a specific scope and call that function before its actually declare
3. Able to have access the arguments

Arrow Functions

1. always anonymous
2. Cannot be hoisted
3. Doesnt have own this so in arrow function, variables will be borrowed or taken from out of context.It may be useful in some node. It will refer to window like the global object hence you can’t perform some changes like the button or the dropdown menu
4. Doesnt have access to arguments
5. assign arrow function to variables and declaration of variables using const
6. Usually used as callback functions which is a function that is passed as a argument in a call to another function cos callback function dont required to be named.
7. Can be used as an immediately invoked arrow functions.

Declarative Programming vs Imperative Programming in React

 Declarative Programming 

Example 1
[in App.js]

var isDone = true;

  const strikeThrough = {textDecoration : "line-through"}

  return <p style={isDone ? strikeThrough : null}>Buy Milk</p>

 Imperative Programming

Example 1
[in index.js]

document.getElementById("root").style.textDecoration = "line-through";

Example 2 
[in App.js]

function strike(){

  document.getElementById("root").style.textDecoration="line-through";

}

function unstrike(){

  document.getElementById("root").style.textDecoration=null;

}

function App() {

  return(

    <div>

  <p>Buy Milk</p>

  <button onClick={strike}>Change to strike through</button>

  <button onClick={unstrike}>Undo</button>

  </div>

    ) };

Permission Error when trying to create new react app

npm ERR! code EPERM
npm ERR! syscall open
npm ERR! path C:\Users\pc~1\AppData\Roaming\npm-cache\_cacache\tmp\5f495f30
npm ERR! errno -4048
npm ERR! Error: EPERM: operation not permitted, open 'C:\Users\pc~1\AppData\Roaming\npm-cache\_cacache\tmp\5f495f30'
npm ERR!  [OperationalError: EPERM: operation not permitted, open 'C:\Users\pc~1\AppData\Roaming\npm-cache\_cacache\tmp\5f495f30'] {
npm ERR!   cause: [Error: EPERM: operation not permitted, open 'C:\Users\pc~1\AppData\Roaming\npm-cache\_cacache\tmp\5f495f30'] {
npm ERR!     errno: -4048,
npm ERR!     code: 'EPERM',
npm ERR!     syscall: 'open',
npm ERR!     path: 'C:\\Users\\pc~1\\AppData\\Roaming\\npm-cache\\_cacache\\tmp\\5f495f30'
npm ERR!   },
npm ERR!   isOperational: true,
npm ERR!   errno: -4048,
npm ERR!   code: 'EPERM',
npm ERR!   syscall: 'open',
npm ERR!   path: 'C:\\Users\\pc~1\\AppData\\Roaming\\npm-cache\\_cacache\\tmp\\5f495f30'
npm ERR! }
npm ERR!
npm ERR! The operation was rejected by your operating system.
npm ERR! It's possible that the file was already in use (by a text editor or antivirus),
npm ERR! or that you lack permissions to access it.
npm ERR!
npm ERR! If you believe this might be a permissions issue, please double-check the  
npm ERR! permissions of the file and its containing directories, or try running     
npm ERR! the command again as root/Administrator.
npm ERR! code EPERM
npm ERR! syscall open
npm ERR! path C:\Users\pc~1\AppData\Roaming\npm-cache\_cacache\tmp\21bcf4ec
npm ERR! errno -4048
npm ERR! Error: EPERM: operation not permitted, open 'C:\Users\pc~1\AppData\Roaming\npm-cache\_cacache\tmp\21bcf4ec'
npm ERR!  [OperationalError: EPERM: operation not permitted, open 'C:\Users\pc~1\AppData\Roaming\npm-cache\_cacache\tmp\21bcf4ec'] {
npm ERR!   cause: [Error: EPERM: operation not permitted, open 'C:\Users\pc~1\AppData\Roaming\npm-cache\_cacache\tmp\21bcf4ec'] {
npm ERR!     errno: -4048,
npm ERR!     code: 'EPERM',
npm ERR!     syscall: 'open',
npm ERR!     path: 'C:\\Users\\pc~1\\AppData\\Roaming\\npm-cache\\_cacache\\tmp\\21bcf4ec'
npm ERR!   },
npm ERR!   isOperational: true,
npm ERR!   errno: -4048,
npm ERR!   code: 'EPERM',
npm ERR!   syscall: 'open',
npm ERR!   path: 'C:\\Users\\pc~1\\AppData\\Roaming\\npm-cache\\_cacache\\tmp\\21bcf4ec'
npm ERR! }
npm ERR!
npm ERR! The operation was rejected by your operating system.
npm ERR! It's possible that the file was already in use (by a text editor or antivirus),
npm ERR! or that you lack permissions to access it.
npm ERR!
npm ERR! If you believe this might be a permissions issue, please double-check the  
npm ERR! permissions of the file and its containing directories, or try running     
npm ERR! the command again as root/Administrator.
npm ERR! code EPERM
npm ERR! syscall open
npm ERR! path C:\Users\pc~1\AppData\Roaming\npm-cache\_cacache\tmp\2deddd01
npm ERR! errno -4048
npm ERR! Error: EPERM: operation not permitted, open 'C:\Users\pc~1\AppData\Roaming\npm-cache\_cacache\tmp\2deddd01'
npm ERR!  [OperationalError: EPERM: operation not permitted, open 'C:\Users\pc~1\AppData\Roaming\npm-cache\_cacache\tmp\2deddd01'] {
npm ERR!   cause: [Error: EPERM: operation not permitted, open 'C:\Users\pc~1\AppData\Roaming\npm-cache\_cacache\tmp\2deddd01'] {
npm ERR!     errno: -4048,
npm ERR!     code: 'EPERM',
npm ERR!     syscall: 'open',
npm ERR!     path: 'C:\\Users\\pc~1\\AppData\\Roaming\\npm-cache\\_cacache\\tmp\\2deddd01'
npm ERR!   },
npm ERR!   isOperational: true,
npm ERR!   errno: -4048,
npm ERR!   code: 'EPERM',
npm ERR!   syscall: 'open',
npm ERR!   path: 'C:\\Users\\pc~1\\AppData\\Roaming\\npm-cache\\_cacache\\tmp\\2deddd01'
npm ERR! }
npm ERR!
npm ERR! The operation was rejected by your operating system.
npm ERR! It's possible that the file was already in use (by a text editor or antivirus),
npm ERR! or that you lack permissions to access it.
npm ERR!
npm ERR! If you believe this might be a permissions issue, please double-check the  
npm ERR! permissions of the file and its containing directories, or try running     

npm ERR! the command again as root/Administrator.

Solution:- 
1) run npm config edit in command prompt
-  change this line to ; cache=C:\Users\pc\AppData\Roaming\npm-cache

2) run npm uninstall -g create-react-app in command prompt as admin mode

3) npx create-react-app <folderName> : create a new react app

4) cd <folderName>

5) npm start : launch react app

Basic commands

 [Window]
1) dir : list out all the files and folder inside the directory
2) dir /w : dispay text horizontally 3) npm config edit : enter into your config file
4) echo "" >.gitignore : create a new file .gitignore

[Mac]

1) ls : list out all the files and folder inside the directory

Create new React App

 [Windows - run in admin mode]

1) Open Command Prompt/Hyper and run as administrator
2) cd <directoryName> :  Change directory to the folder where you want to store your react app.
3)  npx create-react-app <folderName> : create a new react app 4) cd <folderName> : Change directory. 5) npm start : To launch your react app

[Window - non admin mode]

1) Open Command Prompt/Hyper terminal
2) npx create-react-app <fileName> : Create a new react App
3) cd <folderName> : Change directory. 4) npm start : To launch your react app

Website designs

Here are some of the websites that i have done using AdobeDreamweaver, Adobe Illustrator and Adobe Fireworks.

Website One:

Website Two:

Home page

Website Design Three:

Website Design 4:

Spongebob faces

i was bored at home! so i started to draw the cartoons of spongebob faces again! :D

Designing with ThomastheCoach!

Package 1:

Package 2:

Design 2:

I was being given this task to actually spend 3 hours to design 2 flyers for Thomas and here are some of my works.

Wohoo! Hope that it wont look werid ba! =x

I know its not very creative but feeling so happy that i'm able to come up with some designs for the whole afternoon. Even though Thomas has instructed me to finish it within 3 hours.

However, my computer crashes! Thats why i have to redo everything again LOL! ):

But Thomas still asked me to do some improvement on it. Still wondering, how can i improve on it..

Still I am contented to be able to work with Thomas this time round. Hope that we can work together next time.

Cheers,

♥♥♥Abrial♥♥♥

Thomas the coach! :D

Found an event job through gumtree and ended up being hired as a designer for http://www.thomasthecoach.com. ^-^

Even though i major in web designing but i don't mind trying out new stuff Cos I loves to take up challenges.

Went for this talk at ThomasTheCoach and it teaches us how to play with stocks.

It seemed interesting to me and personally, I feel that the trainers are very professional, especially Thomas, who has taught us many tips in dealing with stocks. The trainers are very professional as they have guided us step-by-step in how to use the program. Besides that, by signing up for their course, students will receive free goodies!

Call 6384 0143 NOW FOR MORE DETAILS!

There's a seminar this October. Stay tuned! :)

♥♥♥Abrial♥♥♥

♥Illustration and SHOPPING! ♥

The cartoon illustration has replied to my email! YAY! ^_^

So it means that i can start to draw again le.. But wait...

I have to draw like 800 images in a month!

I just wonder whether i can finish it or not. But luckily Desmond has send me the categories for my illustration!

And now i need to draw different images. and THIS IS REALLY CRAZYYY! ):

But.. but.. but..

I'll still perserve no matter what happen. i just hope that i can finish all the illustration on time! :D

However on the happier side, i went to SHOP today! Bought lots and lots of stuff today! Including 3 tops, 1 bottom, 1 bag and 3 earingss! && i spend alot today, i think i'm broke. T_T

Gotta finish all my illustration and get back the money that i have spend! So that i can spend even more! =D

♥♥♥Abrial♥♥♥

Cartoon father and mother!

here's my illustration for mother and father! wohoo first time drawing it lol.. hope that its nice! I just do it during my free time! :D

Spongebob for my blog!

YAY! I have finally finished my spongebob icon! Hope that its cute enough and nice ba! :D

The different faces of spongebob! I always wanted to draw pictures of spongebob and here are my illustrations! :))

Photography

Photography

Fresh at 25!

Wohoo this is my first time joining a competition! Hope that i can get into the top 25 ba! :D My design is titled: Freshly Juiced! Straight from the juicer!! :D