Forem: Ruxin Qu

Wordpress: functions

Ruxin Qu — Wed, 20 Mar 2024 03:30:38 +0000

To integrate links into WordPress, follow these steps:

Begin by creating a functions.php file within your WordPress theme directory. Within this file, define a function to enqueue external resources, ensuring that WordPress can load them as needed.

Within the function, when incorporating a CSS library, utilize wp_enqueue_style(). Within its parentheses, the first parameter serves as a descriptor, which can be any string. The second parameter is the URL link to the resource. Note that the link need not include 'https:' since, in some instances, HTTPS may not be available in local environments.

If you intend to include a JavaScript library, employ wp_enqueue_script(). This function accepts five parameters: the first is a descriptor, followed by the URL link to the script. Next is an array specifying any dependencies the script relies upon. Subsequently, indicate the version number, followed by a boolean value indicating whether the script should load after the page has fully loaded (set to true to ensure the JavaScript loads at the page's end).

After defining the function, within the PHP code's conclusion, call the function using add_action('wp_enqueue_scripts','functionName'). This ensures that the function is invoked when necessary.

wordpress: the loop

Ruxin Qu — Wed, 13 Mar 2024 19:05:41 +0000

use Local for dev development. The theme files are saved in the path: /Local Sites/site-name/app/public/wp-content/themes/theme-name/.
index.php is normally used as a homepage that display all the posts and single.php displays the single post.
php the loop:

while(have_posts()){
the_post() 
}

the_post()function keeps track of the current post.
When reaching the loop, Wordpress first determines if the page is single.php or not. If not, Wordpress retrieves multiple posts based on the requested criteria. If the loop is in the single.php page, Wordpress will only retrieve the current post.

using html in php functions, use ?> <html here> <?php can display the post data retrieved from Wordpress database to the page. For example: ?><h2><?php the_title()?></h2><?php displays the title of the post
adding a new page: go to the admin and click 'add new page'. The url will be shown on page setting. Update the page template in page.php file.
page.php displays the template that will apply to all pages except the home and single page. To do conditional rendering, use if statement. For example:

if(is_page('test'){
?><h1>This is a test page</h1><?php
}

JS array methods

Ruxin Qu — Sun, 25 Feb 2024 16:29:30 +0000

array.split() turns a string into an array and returns the array

const text = "I love doing web development";
const myArray = text.split(" ");
//output: [ 'I', 'love', 'doing', 'web', 'development' ]
const newArray = text.split("");
//output: [
  'I', ' ', 'l', 'o', 'v', 'e',
  ' ', 'd', 'o', 'i', 'n', 'g',
  ' ', 'w', 'e', 'b', ' ', 'd',
  'e', 'v', 'e', 'l', 'o', 'p',
  'm', 'e', 'n', 't'
]

array.slice() take a cut of the original array and return the cut part

const myArr = ['apple','pear','strawberry']
const cut = myArr.slice(0,1)
//output: 'apple' it slice between the zero index and the first index

string.slice() can also be used on a string. Note: .slice doesn't change the original string or array. The cut includes the start and excludes the end

const myText="I have a golden retriever"
const cut = myText.slice(3,5)
//output: 'av'

array.splice() can be used to add/remove one or multiple elements in an array. Note: it does change the original array

for removing element(s):

const array = ["I", "love", "doing", "web", "development"];
console.log(array.splice(0, 2));
//output: [ 'I', 'love' ]
console.log(array);
//output: [ 'doing', 'web', 'development' ]

for adding element(s):

array.splice(0, 2, "hello");
console.log(array);
//output: [ 'hello', 'doing', 'web', 'development' ] it removes the elements between index 0 and 2 and adds the provided element to the 0th index
array.splice(5, 0, "very", "much", "!");
console.log(array);
//output: [ 'I', 'love', 'doing', 'web', 'development', 'very', 'much', '!' ] it found the 5th index and remove 0 element and add the provided elements to the 5th index

C#: Console and datatypes

Ruxin Qu — Thu, 09 Nov 2023 08:59:58 +0000

Console.WriteLine("Hello World") prints the output on the existing line and appends a new line after it. Console.Write("hello"); Console.Write("World"); print in the same line
.WriteLine() and .Write() are both methods in the class Console
comparison operators: > < >= <=
equality and inequality operator: == !==
logical negation operator: !
declare a string : string myString = "This is a string";
string method: Contains(), StartsWith(), EndsWith(), ToLower(), ToUpper(), Trim()
A literal value is a constant value that never changes. There are 5 common literal data types.

character literals: one single alphanumeric character, Console.WriteLine('b') single quotes create a char literal and double quotes create a string literal
integer literals: int
floating-point number: float append letter F after the number,double and decimal add letter m or M will both work
boolean

implicitly typed: var (Note: This doesn't equal to dynamically typed)
Using template literals and string interpolation allows easy way to interpolate variables and expressions Console.WriteLine($"Hello {firstName}!")

express-session & cookie

Ruxin Qu — Wed, 16 Nov 2022 04:11:07 +0000

HTTP is stateless, after a response is sent, the client and the server will forgot about each other. Cookies and URL parameters can store data but it's readable to client side. Session can store data on the server side. When a session is created, an ID will be assigned to the user, and the further requests are made with the ID, so the server can recognize the user.
A session middleware example. connect-session-sequelize package is used to store session data.

app.use(
    session({
        secret: 'dahuang',
        cookie: { maxAge: 172800000, secure: false, sameSite: 'strict' },
        resave: false,
        saveUninitialized: false,
        store: new SequelizeStore({
            db: sequelize,
        })
    })
);

3 The difference between session and cookie: Cookies are client-side files on a local computer that hold user information. Sessions are server-side files that contain user data. Cookies end on the lifetime set by the user. When the user quits the browser or logs out of the programmed, the session is over.

4 To make it easy for client side to attach the session id onto every request, session id are saved in client side in cookies. Cookies are small pieces of data in key-value pairs. A session cookie is set with the first HTTP response from the server and persists until the browser is closed or cookie expires. Cookies are in HTTP header.

5 The flow of how session is implemented with cookie:

- A user goes to a site(a request is sent), the server creates a session and a session id
- The server sends the session id back to browser in HTTP header, and the browser stores the session id in cookie
- The session cookie automatically attaches to all the following request to the server.
- The server receives the request sent with session id, it responses with the data associated with the ID.

6 passport.js is an authentication package. Here's example of passport local strategy with sequelize. In the server.js file, we need to initialize passport after the session middleware.

app.use(passport.initialize());
app.use(passport.session());

passport.use(
    new LocalStrategy(
        {
            usernameField: 'email',
            passwordField: 'password',
        },
        async (email, password, done) => {
            try {
                const user = await User.findOne({ where: { email: email } });
                if (!user) {
                    return done(null, false, {
                        message: 'email not registered',
                    });
                }
                const matchPassword = await user.checkPassword(password);
                return matchPassword
                    ? done(null, user)
                    : done(null, false, { message: 'Incorrect password' });
            } catch (error) {
                done(error);
            }
        }
    )
);

passport.serializeUser(function(user, done) {
    done(null, user.id);
});

passport.deserializeUser(function(id, done) {
    User.findByPk(id).then(function(user) { done(null, user); });
});

SerializeUser: to persist user data into session. Here we saved the user id, eg: req.session.passport.user = 1. DeserializeUser to get the user data from session, attach the user data to req as req.user. For more detail about serialize and deserialize user.
for passport middleware, it takes three params, username(or email), password, and a callback function done(), if there's error, return done(error), if no user is found, return done(null, false), null means no error. If the password doesn't match, return done(null, false). If the username and password both match the data from db, return done(null, user).

ORM : Sequelize

Ruxin Qu — Wed, 16 Nov 2022 00:57:15 +0000

Sequelize only provides ORM, to interact with a database, a database driver is still needed, like mysql2.
In sequelize, database tables are referred as models. A model is an abstraction that represents a table in the database.
To create a database connection, put the database name, username and password in an environment variable.

require('dotenv').config()
const {Sequelize} = require('sequelize')
sequelize = new Sequelize(
        process.env.DB_NAME,
        process.env.DB_USERNAME,
        process.env.DB_PASSWORD,
        {
            host: process.env.DB_HOST,
            dialect: 'mysql'
        }
    );

4 To create an instance of Model, use sequelize.define() or class User extends Model. The instance can have method.

const { Model, DataTypes } = require('sequelize');
class User extends Model {
    async checkPassword(password) {
        try {
            const matchPassword = await bcrypt.compare(password, this.password);
            return matchPassword;
        } catch (err) { console.error(err); }
    }
}

5 By default, sequelize add createAt and updateAt columns, to prevent it use timestamps: false. freezeTableName: true will make the table name same with model name.

6 sequelize.sync({force: true}) will synchronize the model to database. It creates a new table and drops the existing one first.

7 Sequelize hooks are functions called before or after sequelize calls are executed. The code below will hash the password everytime before a new user is created and saved.

hooks: {
    beforeCreate: async (userData) => {
        const salt = await bcrypt.genSalt(10);
        const hashedPassword = await bcrypt.hash(userData.password, salt);
        userData.password = hashedPassword;
    },
},

8 Populate the database: model.create() or model.bulkCreate(). model.update() to update the data. model.destroy() to delete the data.

9 Three common types between tables: one to one, one to many and many to many.

One to One

User.hasOne(Passport)
Passport.belongsTo(User)

One to many

User.hasMany(Post)
Post.belongsTo(User)

Many to many: The studentClass table will have three columns: id, student_id and class_id

Student.belongsToMany(Class, {through: studentClass, foreighKey: student_id})
Class.belongsToMany(Student, {through: studentClass, foreignKey: class_id})

10 model.findAll() can find all the data in the mobel. It can be used with where clause and operators

 const postData = await Post.findAll(
    {
        where: { user_id: req.user.id },
        include: { model: User }
    });

11 model.findOne() will return the one matching data. It can include the data from other models.

 const postData = await Post.findOne({
    where: { id: req.params.id },
        include: [
            { model: User },
            { 
                model: Comment,
                include: [User] // here is a join of comment and user table
            }]
    });

JavaScript: Test with mocha

Ruxin Qu — Sat, 15 Oct 2022 20:36:53 +0000

test suite is a collection of tests for a web application. To run a test suite, do npm test
the test file for index.js should be named as index-test.js
testing types:
- unit test: test the smallest unit of the code
- integration test: test the interaction between internal services inside the web application
- End to End test: real user experience
test with mocha:
- npm init -y to create a package.json file for managing packages.
- install mocha by npm install mocha -D so it's saved under devDependencies in package.json, which means it's only included during development mode not in the production bundle.
- change the value of "test" in "script" object to mocha
- run npm test to start the test
describe and it funcitons accept two parameters, one is the descriptive message, the second one is the call back funciton.
The callback function should has setup, execise, verify and teardown sections.
- variables are declared in setup section
- execute functions in execise section
- and verify the result with the expectedValue
- teardown makes the tests isolated so it's not affected or affecting other tests.
Hooks can make setup and teardown easier. (Note: The example below works for mocha, it may vary in other test package)
- beforeEach(callback) callback is run before each test
- afterEach(callback) callback is run after each test
- before(callback) callback is run before the first test
- after(callback) callback is run after the last test
TDD stand for test driven development, it is guided by red-green-refactor cycle. The test is first written, then write the minimum amound of implement code to pass the test and then refactor the code.
code coverage can depend on:
- function coverage: all the funcitons are called
- statement coverage: all the statements are run?
- path coverage: every edge?
- condition coverage: both the boolean value tested?

reference from codecademy

JavaScript: Node.js (built in modules)

Ruxin Qu — Fri, 14 Oct 2022 23:05:39 +0000

An error must be thrown to halt the program. console.log(new Error('this is an error')) doesn't stop program from running.
console.table() print out the elements in an object as a table
console.assert() print out false if the statement in the parenthesis is falsy.
process is a global module. (Buffer, Error are also global module)

process.argv[0] returns the path of node;
process.argv[1] returns the file name;
process.argv[2] returns the first word in user input;

5.node uses error-first call back function

const callbackFunc = (err, data)=>{err? console.log(err): console.log(data)}

6.fs is the built in module to interact with file system
Difference between fs.writeFile() and fs.createWriteStream()

fs.writeFile() requires all the content of the file at once;
fs.createWriteStream() supports sequential writing.

const writeableStream = fs.createWriteStream('text.txt')
process.stdin.pipe(writableStream);
//output: all the input from terminal when the terminal is open.

fs.createWriteStream() can also work with fs.createReadStream() to copy file from one to another

let readableStream = fs.createReadStream("test.txt");
let writableStream = fs.createWriteStream("test2.txt");

readableStream.on("data", function(chunk) {
    writableStream.write(chunk);
});

7.event module provides an EventEmitter class. Example of creating an instance of EventEmitter class:

const events = require('events');
const myEmitter = new events.EventEmitter();

Each instance has a .on() method which assigns a callback function to a named event. The first argument is the name of the event as a string, the second argument is the callback.
Each instance also has a .emit() method which announces the named event has occured. The first argument is the name of the event, the second argument is the data that should be passed into the callback function.

8.console.log() is a thin wrapper of process.stdout.write(), to receive input from a terminal, use process.stdin.on()
9.Buffer module has several methods to handle binary data.

.alloc() creates a new Buffer object.
.toString() transfer the Buffer object to a string.
.from() can create an Buffer from a string
.concat() joins all the buffer objects in an array into one buffer object.(this method comes in handy because a Buffer object can't be resized.)

const buffer = Buffer.alloc(5,'b');
console.log(buffer); //output: <Buffer 62 62 62 62 62>
console.log(buffer.toString()) //output: bbbbb
const buffer1 = Buffer.from('hello')
const buffer2 = Buffer.from('world')
console.log(buffer1) //output: <Buffer 68 65 6c 6c 6f>
const bufferConcat = Buffer.concat([buffer1, buffer2])
console.log(bufferConcat) //output: <Buffer 68 65 6c 6c 6f 77 6f 72 6c 64>

10.setImmediate() execute the callback function inside after the current poll is completed.

JavaScipt: Express.js

Ruxin Qu — Fri, 14 Oct 2022 22:05:56 +0000

Node.js is a runtime environment that allows Javascript files to run outside of browser runtime; Express.js is a server-side framework built to work with Node.js
CRUD means the api allows clients to create, read, update and delete information.
Require the express module and invoke an instance.

const express = require('express')
const app = express()

app.listen(PORT, callback) can start a server. The first parameter is the port number argument tells the server where to listen; the callback function is executed when the server is listening and ready for response.
route is a section of Express code that is associated with an HTTP verb, a url path, and a function that is called to handle that pattern.
Express searches through the routes and responses with the first route matches the request url.
path is part of the requested url after the hostname and port.

HTTP verb(GET,PUT,UPDATE,DElETE)

app.get() is used to match the route with GET request. The first parameter is the route path(string), the second parameter is the callback function to handle the request and send a response. When a requested url arrives, req.params object will store the information from the requested url path. (query string is not necessary)

app.get('/monsters/:name', (req, res, next) => {
  res.send(...); // or res.json() to send json format response
});
//request url : 'monsters/rx'  req.params = {name: 'rx'}

app.put() is used to update existing data from the database. It needs data from query string.
app.post() is used to create a new resources. It needs data from query string.
app.delete() is used to delete a resource. (query string is not necessary)

req.params and req.query

route parameter is in route path and begins with ':' it. req.params stores route parameters in an object. It is like a unique identifier for the database, so the server can send the requested resource.
query string is the part of url after '?'. Express parse the information into req.query object. The value of the key is a string. It stores information the client send to the server.

Router

using router can make code cleaner. It adds the router path to the path in app.use() Eg:

// in router.js file:
const monserRouter = express.Router()
monsterRouter.get('/:name',(req,res,next)=>{....})
module.exports = monsterRouter;

// in main.js file
const monsterRouter = require('./router.js')
app.use('/monster',monsterRouter)

res.status

JavaScript: Module export and import (browser and Node.js runtime)

Ruxin Qu — Thu, 06 Oct 2022 23:31:56 +0000

====================================

Browser runtime

Open a HTML file with js modules directly from default browser will throw an error. You need to create a local server with VSCode.
The script.js file has imported module should have an attribute type= 'module' when linking to HTML, the file has exported module doesn't need to be linked to HTML.
To export several functions, export {func1, func2...} or add export before declare the function
To import a function func and rename it to newfunc, import {func as newfunc} from 'path'
To export a function as default, use export {func as default} or simply export default func
To import a default value, import importfunc from path works the same with import { default as importedResources } from 'path'
object-destructuring in import. MDN Web Docs on object destructuring

const resources = {
  func1,
  func2
}
export default resources;

import resources from 'path'
const {func1, func2} = resources

====================================

Node.js runtime

module.exports.func1 = func1 to export function1.
const func1 = require('./path') to import values. For built in module, no need to provide the path.
object-destructuring in import:

module.exports = {
  func1,
  func2
}

import way 1:
const func = require('path');
const func1Value = func.func1;
const func2Value = func.func2;

import way 2:
const {func1, func2} = require('path')

JavaScript: OOP-Class

Ruxin Qu — Sat, 17 Sep 2022 05:32:43 +0000

Classes are templates for objects. The name of a class should have the first letter capital and the rest in camalcase.
An instance is an object that contains the property name and method of a class.
When we create a new instance with the keyword new, the constructor method is called. Note: class methods and getter syntax are the same with objects. BUT no commas between methods.
To call a method: instance.methodname()
Inheritance allows the child class to use share property and method. The extend keyword makes the method and getters of parent class available in the child class. The super keyword calls the constructor method in the parent class.
Static method can only be called directly from the class. It can't be used on an instance of a class or subclass. (don't forget the () at the end) example code:

class Animal {
    constructor(breed, gender) {
        this._breed = breed;
        this._gender = gender;
        this._vaccine = 0;
    }
    get breed() {
        return this._breed;
    }
    get gender() {
        return this._gender;
    }
    get vaccine() {
        return this._vaccine;
    }
    vaccineShot(num) {
        this._vaccine += num;
    }
    static generateName(){
        const nameArr=['Milo','Cookie','Sandy','Odin'];
        return nameArr[Math.floor(Math.random()*3)]
    }
}
class Dog extends Animal {
    constructor(breed, gender, age) {
        super(breed, gender);
        this._age = age;
    }
    get age(){
        return this._age;
    }
    increaseAge(num){
        this._age+=num;
    }
}
const dahuang = new Dog('Golden Retriever', 'Male',1);
dahuang.vaccineShot(2)
console.log(dahuang)
//Output: DogHome { _breed: 'Golden Retriever', _gender: 'Male', _vaccine: 2, _age: 1 }
console.log(dahuang.vaccine)
//Output: 2
dahuang.increaseAge(1);
console.log(dahuang.age)
//Output: 2
console.log(Animal.generateName());
//Output: Milo

JavaScript: Async and Request

Ruxin Qu — Thu, 15 Sep 2022 23:46:42 +0000

JavaScript is a single-thread language. But the event loop allows it to run asynchronous code.
The event loop has four parts: memory heap, call stack, event queue and event loop.
- The heap stores the variable and object currently in use.
- The call stack tracks the function that's currently running. When a function is invoked, a frame is added to the call stack in a LIFO(last in first out) order.
- The messages returned from API will be sent to wait in the queue.
- And the event loop always brings the first message to the stack if the stack is empty. Note: setTimeout() is a Node function which delays the execution of a callback function using the event-loop.
Promises are objects that represent the eventual outcome of an asynchronous operation. A promise can have three states: pending, fulfilled, rejected.A promise is settled if it is either resolved or rejected.
- Example of a promise is handled by two callback functions

const handleSuccess = (res) => {
    console.log(res);
}
const handleFailure = (rej) => {
    console.log(rej);
}
const checkNum = (num) => {
    return new Promise((resolve, reject) => {
        if (num > 2) {
            resolve('this num is larger than 2');
        }
        else {
            reject('this num is less than 2');
        };
    })
};
checkNum(5).then(handleSuccess).catch(handleFailure);
// output: this num is larger than 2

.then(handleSuccess,handleFailure) is equal to .then(handleSuccess).catch(handleFailure)

4.When three functions are independent, use Promise.all([fun1, fun2, fun3])

The async keyword is used to write functions with asynchronous actions. Async functions will always return a promise.

const exampleFunction = async ()=>{
    return 5
}
exampleFunction()
.then((res)=>{
    console.log(res)
})
.catch((rej)=>{
    console.log(rej)
})
//Output: 5

2.await halts the execution of a function until a given promise is resolved. If a promise is still pending, the log result will be pending promise.
3.try{}catch(err){console.log(err)} can be used to handle error.
4.When multiple functions can happen simultaneously, use await Promise.all(). The resolved value is an array with all the resolved promise from the argument array. The soon as one promise is rejected, it rejects and returns the reject reason from that promise.

async function asyncPromAll() {
  const resultArray = await Promise.all([asyncTask1(), asyncTask2(), asyncTask3(), asyncTask4()]);
  for (let i = 0; i<resultArray.length; i++){
    console.log(resultArray[i]); 
  }
}

fetch url is made by ${baseUrl}${endPoint}${requestParams}
GET request

fetch('http://api-to-call.com/endpoint')
.then(response => {
  if (response.ok) {
    return response. json();
  }
  throw new Error('Request failed!');
}, networkError => console.log(networkError.message)
). then (isonResponse => {
// Code to execute with isonResponse
};

const getData = async () => {
    try {
        const response = await fetch('https://api-to-call.com/endpoint');
        if (response.ok) {
            const jsonResponse = await response.json();
            //code to do with response
        }
        throw new Error('Request failed!');
    } catch (error) {
        console.log(error);
    }
}

3.POST request

fetch('http: //api-to-call.com/endpoint', {
    method: 'POST',
    body: JSON.stringify({ id: '200' })
}).then(response => {
    if (response.ok) {
        return response.ison();
    }
    throw new Error('Request failed!');
}, networkError => console.log(networkError.message)
).then(jsonResponse => {
    // Code to execute with isonResponse
});

const getData = async () => {
    try {
        const response = await fetch('https://api-to-call.com/endpoint', {
            method: 'POST',
            body: JSON.stringify({ id: 200 })
        });
        if (response.ok) {
            const jsonResponse = await response.json();
            //code to do with response
        }
        throw new Error('Request failed!');
    } catch (error) {
        console.log(error);
    }
}

Resource referenced: Codecademy.com