From 20cc4e213eb3765dc809b8c16fd3b8480e569506 Mon Sep 17 00:00:00 2001 From: Vanessa Lai Date: Thu, 25 Jul 2024 21:33:04 +0800 Subject: [PATCH] finished keyboard guide --- .../recommendation/forYou/forYou.jsx | 52 ++++---- src/pages/keyboardguide/KeyboardGuide.css | 31 +++++ src/pages/keyboardguide/KeyboardGuide.jsx | 116 ++++++++++-------- src/pages/registration/LoginSignupForm.css | 2 +- src/pages/search/SearchPage.jsx | 20 +-- 5 files changed, 132 insertions(+), 89 deletions(-) diff --git a/src/components/recommendation/forYou/forYou.jsx b/src/components/recommendation/forYou/forYou.jsx index 3943ad4..dcf2895 100644 --- a/src/components/recommendation/forYou/forYou.jsx +++ b/src/components/recommendation/forYou/forYou.jsx @@ -6,9 +6,9 @@ class ForYou { constructor(userId) { this.userId = userId; this.userHistory = { - likeHistory: [], - searchHistory: [], - reviewHistory: [] + likeHistory: [], + searchHistory: [], + reviewHistory: [] }; this.products = null; this.productFeatures = null; @@ -44,17 +44,17 @@ class ForYou { prepareProductFeatures() { this.productFeatures = this.products.map(product => [ - Number(product.price) || 0, - Number(product.weeklyClicks) || 0, - Number(product.likes) || 0, - Number(product.offers) || 0, + Number(product.price) || 0, + Number(product.weeklyClicks) || 0, + Number(product.likes) || 0, + Number(product.offers) || 0, ]); } ensureNumeric(arr) { return arr.map(val => { - const num = Number(val); - return isNaN(num) ? 0 : num; + const num = Number(val); + return isNaN(num) ? 0 : num; }); } @@ -74,13 +74,13 @@ class ForYou { async getRecommendations() { if (!this.userHistory || !this.products || !this.productFeatures) { - await this.initialize(); + await this.initialize(); } const userVector = this.createUserVector(); const similarities = this.productFeatures.map((features, index) => ({ - product: this.products[index], - similarity: this.calculateCosineSimilarity(userVector, features).dataSync()[0] + product: this.products[index], + similarity: this.calculateCosineSimilarity(userVector, features).dataSync()[0] })); similarities.sort((a, b) => b.similarity - a.similarity); @@ -91,23 +91,23 @@ class ForYou { const vector = [0, 0, 0, 0]; if (this.userHistory.likeHistory.length > 0) { - this.userHistory.likeHistory.forEach(like => { - const likedProduct = this.products.find(p => p.id === like.listingID); - if (likedProduct) { - vector[0] += Number(likedProduct.price) || 0; - vector[2] += 1; - } - }); + this.userHistory.likeHistory.forEach(like => { + const likedProduct = this.products.find(p => p.id === like.listingID); + if (likedProduct) { + vector[0] += Number(likedProduct.price) || 0; + vector[2] += 1; + } + }); } if (this.userHistory.reviewHistory.length > 0) { - this.userHistory.reviewHistory.forEach(review => { - const reviewedProduct = this.products.find(p => p.title === review.listing); - if (reviewedProduct) { - vector[0] += Number(reviewedProduct.price) || 0; - vector[3] += 1; - } - }); + this.userHistory.reviewHistory.forEach(review => { + const reviewedProduct = this.products.find(p => p.title === review.listing); + if (reviewedProduct) { + vector[0] += Number(reviewedProduct.price) || 0; + vector[3] += 1; + } + }); } const sum = vector.reduce((a, b) => a + b, 0); diff --git a/src/pages/keyboardguide/KeyboardGuide.css b/src/pages/keyboardguide/KeyboardGuide.css index 7f5eae2..2e1d785 100644 --- a/src/pages/keyboardguide/KeyboardGuide.css +++ b/src/pages/keyboardguide/KeyboardGuide.css @@ -8,6 +8,7 @@ z-index: 100; display: flex; flex-direction: column; + top: 70px; a { font-size: 12px; @@ -23,6 +24,9 @@ .guide-header { display: flex; flex-direction: column; + flex-wrap: wrap; + align-items: center; + padding: 16px; h1 { font-size: 28px; font-weight: 600; @@ -32,4 +36,31 @@ margin: 0; font-size: 12px; } +} + +.keyboard-guide { + display: flex; + flex-direction: column; + padding: 24px; + + h1 { + font-weight: 800; + font-size: 32px; + } + + h2, h3, h4 { + font-weight: 700; + } + + h3 { + margin: 8px 0 12px 0; + } + + b { + font-weight: 600; + } + + p { + margin: 4px 0 8px 0; + } } \ No newline at end of file diff --git a/src/pages/keyboardguide/KeyboardGuide.jsx b/src/pages/keyboardguide/KeyboardGuide.jsx index 01f475b..3617cb6 100644 --- a/src/pages/keyboardguide/KeyboardGuide.jsx +++ b/src/pages/keyboardguide/KeyboardGuide.jsx @@ -13,7 +13,7 @@ function KeyboardGuidePage() { return( +
{navigationOpen && (
@@ -31,85 +31,87 @@ function KeyboardGuidePage() {

(Mehcanical) Keyboards Are Great

-

written by Vanessa + Gemini

+

written by Vanessa + Gemini AI

-

Mechanical keyboards offer a truly unique typing experience, distinct from the mushy feel of standard membrane keyboards. Their responsiveness, durability, and satisfying keystroke sounds make them stand out. But what exactly sets them apart? Let's delve into the components and discover why you might be drawn to the world of mechanical keyboards. -
Do note that, the following content contains my highly biased opinions ┏ʕ •ᴥ•ʔ┛. But as with everything, taste is subjective. -

+

Mechanical keyboards offer a truly unique typing experience, distinct from the mushy feel of standard membrane keyboards. Their responsiveness, durability, and satisfying keystroke sounds make them stand out. But what exactly sets them apart? Let's delve into the components and discover why you might be drawn to the world of mechanical keyboards.

+

Do note that, the following content contains some of my biased opinions ┏ʕ •ᴥ•ʔ┛. But as with everything, taste is subjective.

+

The 'Key' Parts

Switches

-

Ah yes, my favourite topic when it comes to keyboards. ʕ ꈍᴥꈍʔ -
The heart of the keyboard. Each key sits on a switch, which registers your keypress. They come in various types, offering different typing feels (clicky, tactile, or linear) and actuation forces (how much pressure to register a keypress). -
-

+

Ah yes, my favourite topic when it comes to keyboards. ʕ ꈍᴥꈍʔ

+

The heart of the keyboard. Each key sits on a switch, which registers your keypress. They come in various types, offering different typing feels (clicky, tactile, or linear) and actuation forces (how much pressure to register a keypress).

+

Linear Switches

-

My Personal Favourite and is a switch that I recommend everyone starts with ʕ•ᴥ•ʔっ. -
As simple as it gets, linear switches will feel the same from the start until bottoming out, meaning a smooth feel with no tactile bumps. -
Popular Linear Switches: Gateron Yellow, Cherry MX Red, Akko Piano Pros (Recommended!), Gateron Oil King -

+

My Personal Favourite and is a switch that I recommend everyone starts with ʕ•ᴥ•ʔっ.

+

As simple as it gets, linear switches will feel the same from the start until bottoming out, meaning a smooth feel with no tactile bumps.

+

Popular Linear Switches: Gateron Yellow, Cherry MX Red, Akko Piano Pros (Recommended!), Gateron Oil King

+

Tactile Switches

-

Tactile switches have a little bump at the actuation point, which makes it a nice, responsive switch. These switches are fun to press, with the tactile bump without the sometimes annoyingly click sounds of clicky switches. -
Popular Tactile Switches: Akko Cream Blue V3, Glorious Holy Pandas, Gazzew Boba U4T -

+

Tactile switches have a little bump at the actuation point, which makes it a nice, responsive switch. These switches are fun to press, with the tactile bump without the sometimes annoyingly click sounds of clicky switches.

+

Popular Tactile Switches: Akko Cream Blue V3, Glorious Holy Pandas, Gazzew Boba U4T

+

Clicky Switches

-

Loud and Tactile, Clicky switches are popular amongst gaming keyboards. Clicky switches have a physical click jacket which gives them that audible 'click' sound. I would not recommend this switch for anyone in an office environment as they often are considered 'annoying'. ᶘಠᴥಠᶅ -
Popular Clicky Switches: Kailh Box Jade, Kailh Box Navy, Cherry MX Blue -

+

Loud and Tactile, Clicky switches are popular amongst gaming keyboards. Clicky switches have a physical click jacket which gives them that audible 'click' sound. I would not recommend this switch for anyone in an office environment as they often are considered 'annoying'. ᶘಠᴥಠᶅ

+

Popular Clicky Switches: Kailh Box Jade, Kailh Box Navy, Cherry MX Blue

+

Silent Switches

-

While not technically a type of switch, it will fall into one of the three abovementioned types. It is worth mentioning as this type of switch is up and coming in popularity, especially among office workers, as it still provides a unique, smooth typing experience while not distracting anyone else. -
Popular Silent Switches: Kailh Midnight, Outemu Silent Cream Yellow, Gazzew Boba U4 -

+

While not technically a type of switch, it will fall into one of the three abovementioned types. It is worth mentioning as this type of switch is up and coming in popularity, especially among office workers, as it still provides a unique, smooth typing experience while not distracting anyone else.

+

Popular Silent Switches: Kailh Midnight, Outemu Silent Cream Yellow, Gazzew Boba U4

+

Stabilisers

-

Stabilisers are an essential part of the keyboard, usually found under larger keys such as backspace, shift, and spacebar. They prevent the keyboard from shaking or rattling while typing. There are three common types of stabilisers: Cherry, Costar, and Optical. But I will only talk about Cherry as they are the most common ones and preferred amongst enthusiasts in the hobby. -
Cherry Stabilisers are named after their shape, which is that of a Cherry MX switch stem. They are easy to mod and have many different options on the market. Cherry Stabilisers comprise 3 main components: stabiliser housing, bar and insert, Where the bar will keep the key from tilting when typing. They usually come in a few mounting types: plate-mounted, screw-in (recommended!) and clip-in. +

Stabilisers are an essential part of the keyboard, usually found under larger keys such as backspace, shift, and spacebar. They prevent the keyboard from shaking or rattling while typing. There are three common types of stabilisers: Cherry, Costar, and Optical. But I will only talk about Cherry as they are the most common ones and preferred amongst enthusiasts in the hobby.

+

Cherry Stabilisers are named after their shape, which is that of a Cherry MX switch stem. They are easy to mod and have many different options on the market. Cherry Stabilisers comprise 3 main components: stabiliser housing, bar and insert, Where the bar will keep the key from tilting when typing. They usually come in a few mounting types: plate-mounted, screw-in (recommended!) and clip-in.
ʕ◉ᴥ◉ʔ -
Plate-mounted stabilisers are attached to the plate instead of the PCB. However, this may cause more rattling when typing, -
Screw-in are stabilisers that are directly mounted to the PCB using screws, allows the stabilisers to be more secure and have less rattling, -
Clip-ins are also mounted directly onto the PCB and are easier to install, but they are a bit less secure and far less common than their screw-in counterparts. -
Now, it is important to clip and lube stabilisers to allow them to function as intended; otherwise, there will be rattling. (Although most stabilisers are already cliped nowadays) -
Nowadays, most mechanical keyboard builds will come with stabilisers (which are usually pretty decent!). However, here are some popular stabilisers that you can consider switching to: Durock Stabilisers, GMK Stabilisers, EverGlide

+

+

Plate-mounted stabilisers are attached to the plate instead of the PCB. However, this may cause more rattling when typing,

+

Screw-in are stabilisers that are directly mounted to the PCB using screws, allows the stabilisers to be more secure and have less rattling,

+

Clip-ins are also mounted directly onto the PCB and are easier to install, but they are a bit less secure and far less common than their screw-in counterparts.

+

Now, it is important to clip and lube stabilisers to allow them to function as intended; otherwise, there will be rattling. (Although most stabilisers are already cliped nowadays)

+

Nowadays, most mechanical keyboard builds will come with stabilisers (which are usually pretty decent!). However, here are some popular stabilisers that you can consider switching to: Durock Stabilisers, GMK Stabilisers, EverGlide

+

Keycaps

-

- There are 2 main things to consider when picking keycaps: material and profile. \ʕ •ᴥ•ʔ +

There are 2 main things to consider when picking keycaps: material and profile. \ʕ •ᴥ•ʔ
I will go through the most popular options for each category -

Material

- ABS (Acrylonitrile Butadiene Styrene): The most common and affordable option. ABS keycaps offer a smooth feel and vibrant colours but can become shiny and greasy over time. They may also wear down faster with frequent use. -
PBT (Polybutylene Terephthalate): A more premium and durable material. PBT keycaps have a textured feel, resist shine and wear, and produce a deeper, thoccier typing sound. However, they can be slightly more expensive than ABS and may have a limited colour selection compared to ABS. -
POM (Polyoxymethylene): A high-end material known for its incredibly smooth texture and exceptional wear resistance. POM keycaps are slippery and may not be for everyone, especially gamers who need more grip. They are also considered a more expensive option. -
Ceramic: Arguably the most high-end material readily available for the consumer market. Ceramic Keycaps boast a deep, clacky sound signature and a high-end feel. Despite being made of ceramic, the keycaps are also durable and long-lasting. ʕ•͡-•ʔ -

Profile

- The profile refers to the shape and height of the keycaps. It significantly impacts typing comfort, sound, and aesthetics. -
Cherry Profile: A widely used, versatile profile with a medium height and slightly sculpted rows. It offers a good balance of comfort and typing accuracy. -
OEM Profile: Similar to Cherry profile but slightly taller. Popular on pre-built keyboards, it provides a comfortable typing experience for many users.

+

Material

+

ABS (Acrylonitrile Butadiene Styrene): The most common and affordable option. ABS keycaps offer a smooth feel and vibrant colours but can become shiny and greasy over time. They may also wear down faster with frequent use.

+

PBT (Polybutylene Terephthalate): A more premium and durable material. PBT keycaps have a textured feel, resist shine and wear, and produce a deeper, thoccier typing sound. However, they can be slightly more expensive than ABS and may have a limited colour selection compared to ABS.

+

Another common term you'll hear when talking about plastic keycaps is single shot and double shot. To put it simply, single shot keycaps are made from 1 layer of plastic while double shot keycaps are 2 layers of plastic that are molded together which means that double shot is usually more expensive but also more durable.

+

POM (Polyoxymethylene): A high-end material known for its incredibly smooth texture and exceptional wear resistance. POM keycaps are slippery and may not be for everyone, especially gamers who need more grip. They are also considered a more expensive option.

+

Ceramic: Arguably the most high-end material readily available for the consumer market. Ceramic Keycaps boast a deep, clacky sound signature and a high-end feel. Despite being made of ceramic, the keycaps are also durable and long-lasting. ʕ•͡-•ʔ

+

Profile

+

The profile refers to the shape and height of the keycaps. It significantly impacts typing comfort, sound, and aesthetics.

+

Cherry Profile: A widely used, versatile profile with a medium height and slightly sculpted rows. It offers a good balance of comfort and typing accuracy.

+

OEM Profile: Similar to Cherry profile but slightly taller. Popular on pre-built keyboards, it provides a comfortable typing experience for many users.

+

Plate

-

- A metal or plastic layer that stabilises the switches beneath the keycaps. It also affects the typing sound and the overall typing experience. -
I will not discuss each material in detail ʕ – ᴥ – ʔ, but here are some popular ones: polycarbonate (PC), FR4, aluminium, and carbon fibre. Different plates have different amounts of 'flexibility' and sound signature. -
It is also increasingly common to see gasket-mounted plates that aim to improve typing feel and sound, providing additional cushioning, 'flexibility', and dampening in keyboards. +

A metal or plastic layer that stabilises the switches beneath the keycaps. It also affects the typing sound and the overall typing experience.

+

I will not discuss each material in detail ʕ – ᴥ – ʔ, but here are some popular ones: polycarbonate (PC), FR4, aluminium, and carbon fibre. Different plates have different amounts of 'flexibility' and sound signature. +
It is also increasingly common to see gasket-mounted plates that aim to improve typing feel and sound, providing additional cushioning, 'flexibility', and dampening in keyboards.

+

Printed Circuit Board (PCB)

-

- The brain of the keyboard. It holds the electrical components that connect the switches to your computer. - PCBs can be either soldered or hot-swappable. I recommend hot-swappable PCBs as they allow you to change switches whenever you like, whereas soldered PCBs require knowledge of how to solder and don't allow you to change switches once soldered. - Another term you will see often when selecting PCBs is 'flex-cut'. - These supposedly soften the bottom-out feeling typically experienced with 'harder'builds however, it is to note that it will not severely affect your build quality (as some companies charge more for flex cuts) -

+

The brain of the keyboard. It holds the electrical components that connect the switches to your computer.

+

PCBs can be either soldered or hot-swappable. I recommend hot-swappable PCBs as they allow you to change switches whenever you like, whereas soldered PCBs require knowledge of how to solder and don't allow you to change switches once soldered.

+

Another term you will see often when selecting PCBs is 'flex-cut'. +
These supposedly soften the bottom-out feeling typically experienced with 'harder'builds however, it is to note that it will not severely affect your build quality (as some companies charge more for flex cuts)

+
+

Case

- The housing that holds all the other parts. It comes in various materials and designs, further affecting the typing sound and overall aesthetics. -
Common materials of cases include aluminium, which is often associated with a thockier, more luxurious feeling build and plastic. Although up to preferrence and budget, I would still recommend aluminium (or metal in general) builds. (Unless you plan to bring the build around, metal can be quite heavy! ʕ ˶•⤙•˶ ʔ ) +

The housing that holds all the other parts. It comes in various materials and designs, further affecting the typing sound and overall aesthetics.

+

Common materials of cases include aluminium, which is often associated with a thockier, more luxurious feeling build and plastic. Although up to preferrence and budget, I would still recommend aluminium (or metal in general) builds. (Unless you plan to bring the build around, metal can be quite heavy! ʕ ˶•⤙•˶ ʔ )

The Custom in Customisable...

@@ -117,7 +119,15 @@ function KeyboardGuidePage() {

Modding

- + Modding a mechanical keyboard is a popular hobby among enthusiasts, allowing for personalization and optimization of the typing experience. This involves altering various components to enhance performance, sound, or aesthetics. +
I will be covering 2 popular mods, the tape mod and damping. +

+

Tape Mod:Tape MOD is a simplest method by simply putting 2 to 3 layers of painters tape on the back of your keyboard's PCB. It is important to only use painter tape as any others may be a fire hazard. The mod would allow a deeper sound when keys are press and is easy and cost efficient, making it one of the most popular mods in the hobby.

+

Damping:Damping is a general term referred to reducing noise made by a keyboard. There are various ways to do it either by modding the switches, PCB or plate. You can read more about various damping methods here

+ +

Conclusively?

+

Well I hope you learned something from that it took me a bit of time to write ʕง•ᴥ•ʔง (credits to Gemini AI for the section on keycaps, plates and mods) +
Perhaps you'll be diving into the world of mechanical keyboards soon. Who knows, maybe you'll be sharing my own modding adventures in the future! (in the forum ofc)

} /> diff --git a/src/pages/registration/LoginSignupForm.css b/src/pages/registration/LoginSignupForm.css index 298b127..15c1246 100644 --- a/src/pages/registration/LoginSignupForm.css +++ b/src/pages/registration/LoginSignupForm.css @@ -1,5 +1,5 @@ -@import url('https://fonts.googleapis.com/css?family=Montserrat:400,800'); +@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap'); * { box-sizing: border-box; diff --git a/src/pages/search/SearchPage.jsx b/src/pages/search/SearchPage.jsx index cf30466..3eaba5a 100644 --- a/src/pages/search/SearchPage.jsx +++ b/src/pages/search/SearchPage.jsx @@ -52,6 +52,13 @@ function SearchPage() { } }; + const getWeekStart = () => { + const now = new Date(); + const dayOfWeek = now.getDay(); + const diff = now.getDate() - dayOfWeek + (dayOfWeek === 0 ? -6 : 1); + return new Date(now.setDate(diff)).setHours(0, 0, 0, 0); + }; + const getWeeklyClicks = async (listingId) => { const weekStart = getWeekStart(); const clickCountDoc = await getDoc(doc(db, 'listings', listingId, 'clickCount', weekStart.toString())); @@ -70,11 +77,9 @@ function SearchPage() { return offersSnapshot.size; }; - const getWeekStart = () => { - const now = new Date(); - const dayOfWeek = now.getDay(); - const diff = now.getDate() - dayOfWeek + (dayOfWeek === 0 ? -6 : 1); - return new Date(now.setDate(diff)).setHours(0, 0, 0, 0); + const calculateFeaturedScore = (product) => { + const { weeklyClicks, likes, offers } = product; + return (weeklyClicks * 0.5) + (likes * 0.3) + (offers * 0.2); }; useEffect(() => { @@ -132,10 +137,7 @@ function SearchPage() { return relevance; }; - const calculateFeaturedScore = (product) => { - const { weeklyClicks, likes, offers } = product; - return (weeklyClicks * 0.5) + (likes * 0.3) + (offers * 0.2); - }; + // For You recommendation const getRecommendations = async () => {