23 Apr 2023
classNamesrcwidthDefine component:
function Avatar({person, size}) {
return (
<img
className="avatar"
src="www.avatarurl.com"
alt="person.name"
width="size"
height="size"
/>
);
}
Pass props:
export default function Profile() {
return (
<Avatar
person={{ name: "Carol", occupation: "Software Developer"}}
size={100}
/>
);
}
function Avatar(props) {
let person = props.person;
}
or
function Avatar({person, size}) {
// ...
}
You can also specify the default value of a prop:
function Avatar({person, size = 100}) {
// ...
}
Instead of this:
<div className="card">
<Avatar
person={person}
size={size}
/>
</div>
Do this:
<div className="card">
<Avatar {...props} />
</div>
children propYou can also pass JSX to a component. The component will receive it as a prop called children:
function Card({ children }) {
return (
<div className="card">
{children}
</div>
);
}
<Card>
<Avatar />
</Card>
18 Apr 2023
setState schedules an update to a component’s state object. When state changes, the component re-renders.setState are asynchronous for performance reasons.// Assume count starts at 0
incrementCount() {
this.setState({count: this.state.count + 1});
}
handleSomething() {
this.incrementCount();
this.incrementCount();
this.incrementCount();
When react re-renders this component the state will be 1 even though we called it three times.
→ Why? React doesn’t update this.state.count until the component is re-rendered. incrementCount() ends up reading count as 0 three times.
→ Fix: Pass an update function:
incrementCount() {
this.setState((state) => {
// Use state, not this.state cause it's a parameter
return {count: state.count + 1}
});
}
props get passed to the component (similar to function parameters)state is managed within the component15 Apr 2023
Double-click on each file and click "Install". This will make MesloLGS NF font available to all applications on your system.
Open Settings in Visual Studio Code: Code → Preferences → Settings.
Enter terminal.integrated.fontFamily in the search box at the top of Settings tab and set the value below to MesloLGS NF.
11 Apr 2023
The algorithm being used for hashing is not supported by your version of OpenSSL.
library: 'digital envelope routines',
reason: 'unsupported',
code: 'ERR_OSSL_EVP_UNSUPPORTED'
Add this to your .zshrc
export NODE_OPTIONS=--openssl-legacy-provider
09 Apr 2023
git clone https://gist.github.com/2e8440007c55d914e05ec61f3b20635a.git && cd 2e8440007c55d914e05ec61f3b20635a && sh install.sh
git clone https://github.com/vnctptr/dotfiles.git && cd dotfiles && sh bootstrap.sh
15 Mar 2023
Turing machine is an endless piece of tape with 2 heads, one for reading, one for writing. It can compute anything that can be computed.
A language that is Turing complete when it is able to do anything a Turing machine can do.
Fun fact: CSS is Turing-complete.
08 Mar 2023
Facade:
jQuery is a facade for JavaScript featuresclass House {
private plumbing = new Plumbing();
private electrical = new Electrical();
public turnOnSystems() {
this.plumbing.on();
this.electrical.setVoltage(120);
}
}
Proxy:
Why? For example you have a large object that you only need occasionally.Benefit: If you need to execute something either before or after the primary logic of the class, the proxy lets you do this without changing that class.06 Mar 2023
02 Mar 2023
class Settings {
static instance: Settings;
public readonly mode = "dark";
private constructor() { // a private constructor ensures no one else can create it
...
};
Prototype:
Builder:
Do:
addKetchup() {
this.ketchup = true;
}
Don’t:
constructor(
public ketchup: boolean;
) {};
Factory:
Do:
class ButtonFactory {
createButton(os: string) : IOSButton | AndroidButton {
if (os === 'ios') {
return new IOSButton();
else {
return new AndroidButton();
}
const button = ButtonFactory('ios');
Don’t:
const button = os === 'ios' ?
new IOSButton :
new AndroidButton;
16 Feb 2023
Used to get the output of the node. It is also known as the Transfer Function.
Output not confined behind any range.
f(x) = x
A more generalized logistic activation function, used for multiclass classification.
15 Feb 2023
31 Jan 2023
Creates a new page with model, view, and controller, including CRUD operations.
rails g scaffold Person name:string quote:text
rails db:migrate
Does not create a model or CRUD operations.
rails g controller Person index
18 Jan 2023
03 Jan 2023
Start the Rails server
rails s
Creates a table and pages to create new entires
rails g scaffold Note title:string description:text
rails db:migrate
Does not create a model or CRUD operations.
rails g controller Person index
03 Jan 2023
Latent (lat. being hidden) space is a representation on compressed data. Is used to simplify the data representation for the purpose of finding patterns.
In machine learning data is compressed (using lossy compression by definition) to learn important information about data points. This happens in the encoding stage,
The value of compression is that it allows us to discard the noise and only leave the information we need for learning →This “compressed state” is the Latent Space Representation.
The model needs to store all the relevant information, because it is then required to reconstruct the compressed data (in the decoding stage).
Latent space is usually a matrix that we can use to perform different operations on.
A useful property of the latent space is that “similar” values (eg. colour of object) will be closer to one another in the latent space.
(Note: “closeness” is is an ambiguous term as different models use different algorithms to denote “closeness”).
03 Nov 2022
→ In production environment
→ In development environment
10 Oct 2022
→ web security vulnerability
→ usually allows an attacker to masquerade as a victim user
alert() function for this purpose because it's short, harmless, and pretty hard to miss when it's successfully calledalert()
in a simulated victim's browserContent-Type
and X-Content-Type-Options to define content06 Oct 2022
18 Jul 2022
→ Total time of delay between the time a user takes an action and the time they receive a response.
→ Transmission Medium (eg. copper) can affect latency. Fibre optic cables are generally better than copper.
→ Routers and the speed at which they receive and forward data.
→ the amount of data that can pass through a network at a given time
→ The amount of data that can pass through, on average, over a specific period of time.
→ Bandwidth is the potential speed of a connection.
→ Throughput is the actual speed.
24 Jun 2022
Stored procedure is a prepared SQL code that you can save, so the code can be reused over and over again.
CREATE PROCEDURE procedure_name
AS
sql_statement
GO;
EXEC procedure_name;