Conjunction ‘and’

ref – https://dictionary.cambridge.org/us/grammar/british-grammar/and

And is a coordinating conjunction. We use and to connect two words, phrases, clauses or prefixes together:

[Televisions] and [computers] are dominating our daily life. (noun + noun)

I have to [shower] and [change]. (verb + verb)

The photos are [black] and [white]. (adjective + adjective)

[My best friend] and [my father’s father] both come from Wales. (phrase + phrase)

[She got to the door] and [put the key in the latch]. (clause + clause)

[The houses were a mix of pre-] and [post-war build]. (prefix + prefix)

There are two common questions related to coordinating conjunctions:

(Question 1) Do you put a comma before “and”?

Mostly no but sometimes yes. Unfortunately, the answer to this question isn’t short.

Here is a summary of the rules:

The Rule for Two Items

When “and” (or any coordinating conjunction) joins two items, don’t use a comma.

Lee has eaten all the cheese and biscuits. √
The whole world agrees on this point. So far so good. However, if you think it helps your reader, you can use a comma.

The Bakerloo line runs between Elephant and Castle, and Harrow and Wealdstone. √
(Using a comma with two list items is fairly common. It happens when the list items themselves contain commas. In this example, the comma before “and” helps readers to spot the list items faster. They could work it out, but the comma helps.)

I used to watch Colombo, and Cagney and Lacey. √
(This example also has two list items: “Colombo” and “Cagney and Lacey.” This time, the comma is more important because the list items could feasibly be “Colombo and Cagney” and “Lacey”.)

So, in summary, don’t use a comma when “and” (or any other coordinating conjunction) joins two items unless it helps your readers.

There’s an important exception to this rule though. It’s important because it’s common.

The Exception to the Rule for Two Items

When your coordinate conjunction joins two (or more) independent clauses (i.e., ones that could stand alone as individual sentences), then use a comma. Remember clause means it has a subj and verb:

I like sweet things, but I prefer savory dishes. √

(Here, the clauses being joined (shown in bold) could stand alone as sentences. They are independent clauses. That’s why there is a comma before “but.”)

Compare that with this:
I like sweet things but prefer savory dishes. √

(This is similar, but “prefer savory dishes” is not an independent clause. It’s not a sentence. That’s why there’s no comma before “but.”)

Here are some real-life examples:

The lion and the calf (subj) shall lie (verb) down together, but the calf (subj) won’t get (verb) much sleep. √

  • The first coordinating conjunction (“and”) joins two nouns, so no comma is required.
  • The second (“but”) joins two independent clauses, so a comma is required.

I’d (subj) be (verb) at home in my bath, and she’d (subj) come (verb) in and sink (verb) my boats. √

  • The first coordinating conjunction (“and”) joins two independent clauses, so a comma is required.
  • The second (“and”) joins two verbs, so no comma is required.

Hopefully, that’s all clear.

But, there’s a quirk: If the two “sentences” (i.e., the independent clauses) are both short, it is acceptable – for style purposes – to omit the comma.

Craig caught a bass and Lee caught a goby. √
Craig caught a bass, and Lee caught a goby. √
(Both versions are acceptable.)

Look at this though:

The man caught the boy and the girl caught the dog. X
(For a fleeting moment, your readers will think that the man caught “the boy and the girl”. You should try to write in a way that doesn’t cause your readers to stutter.)

The man caught the boy, and the girl caught the dog. √
(Your readers will not need to re-adjust now. This example captures why we need a comma before a coordinating conjunction that joins two independent clauses.)

The Rule for Three or More Items

When there are three or more list items, life starts getting a little more complicated because there is no unified position on whether to use a comma with the coordinating conjunction.

Some people will write this:
Bacon, eggs, and tomatoes
(The comma before the “and” is called an Oxford Comma. This is the convention followed by most (but not all) Americans.)
Some people will write this:
Bacon, eggs and tomatoes
(This is the convention followed by most (but not all) Brits. The most notable exception is the Oxford University Press, after which the Oxford Comma is named.)
There are plenty of people out there who would happily start a fight with you for not using an Oxford Comma, but there are also plenty of others who consider the Oxford Comma a waste of printer ink. In essence, it’s a battle of clarity versus economy.

Advocates of the Oxford Comma claim it eliminates ambiguity. They have a point. The Oxford Comma is certainly useful for showing the separations between the list items.
It’s a good price for a mug of tea, bacon and eggs and toast
(Without an Oxford Comma, this could mean (1) a mug of tea, (2) bacon, and (3) eggs and toast.)
It’s a good price for a mug of tea, bacon and eggs, and toast
(With an Oxford Comma, the list items are clear.)
Protestors to the Oxford Comma claim it introduces ambiguity because commas can be used like parentheses (brackets). Look at these two sentences:
Jack left the pub with John (a policeman) and Simon.
Jack left the pub with John, a policeman, and Simon.
(With an Oxford Comma, this could feasibly refer to two people (like in the top example) or three people.)
Advocates claim that the Oxford Comma actually eliminates, not creates, such ambiguity, and they routinely cite this probably apocryphal book dedication:
This book is dedicated to my parents, Ayn Rand and God.
(This could feasibly be read as “…my parents (Ayn Rand and God)”. The same “ambiguity” wouldn’t exist with an Oxford Comma before “and.”)
So, there are arguments for and against the Oxford Comma. As it happens, you probably don’t have a choice whether to adopt the Oxford Comma or not. If you live in the UK, you probably shouldn’t adopt it (unless you’re at Oxford). If you live in the US, you probably should. Whatever convention you go for, be consistent.

Well, actually, be flexibly consistent. If your chosen convention creates ambiguity, break the convention. There’s only one 100% rule when it comes to the Oxford Comma: clarity trumps convention.

In other words, everyone (regardless of what convention they follow) should write this when they mean four people:
I have the twins, Joe, and Callum. correct tick (for four people)
Remember that clarity comes first. Loyalty to, or hatred of, the Oxford Comma comes second.

Help by Ricky Tsao

Listening to Beethoven with my Bose headphones, I sat comfortably in first-class. I stared at a help button right below the overhead compartment. It was labeled “Press button for Help”. Suddenly, the cabin siren blared. The flight attendant motioned for everyone to keep their head down and brace for impact. With perfect timing, the beginning of Beethoven’s 5th symphony accompanied the twin engines catching fire.

It created an aerial diving sound that I still hate to this day. From my fetal position, I watched in horror as the skies outside the window view rotated ninety degrees clockwise, and the sound of the plane diving became deafening. The 5th Symphony’s familiar exposition hammered out again, and the Captain screamed into the intercom to brace for impact. My biggest fear was about to come true. The plane suddenly lurched forward, and I saw my family disappear into the seats in front of them. I felt a lump in my throat, and then nothing.

The chemical smell of fumes gently nudged me awake. I quickly sat up and saw that I was in the uneven embrace of a beige colored beach. I squinted and covered my eyes from the warm sun rays, and stared into the wide blue yonder. I looked around and saw some seashells, the breeze combed my hair gently. About twenty meters from me, I saw the wreckage of the plane. A trail of smoke from the still hot remnants floated up. I slowly shuffled towards what was left of the plane.

The wrecked plane was an ostrich. The tail end pointed straight up into the air. Its nose and cockpit was stuck several meters into the sand. When I got close enough, I plopped down onto the soft white sand and grieved. The tears tiptoed down my chubby cheeks and plunged down into the sea of white sand. They choreographed a good bye performance for my family, to express what my school grade vocabulary couldn’t. When they were done, my natural instincts took over. I had to survive. It was amazing how my body and adrenaline complemented each other. My feet moved and my arms pumped back and forth. I searched the wreckage. I found one food ration, two bottles of water, and a few charcoaled human body parts. They were scattered on a burning black pit like a barbecue that no one wanted to attend. Right next to it was the cockpit.

My initial thought was to use the radio transmitter. But the machine was smashed beyond recognition. The flips and switches were scrunched together so tightly that you would have thought they just ate a lemon. I found the help button lodged in the sand right besides my feet. It took me back to a previous life.

I snapped out of it and gave up. I was hungry so I quickly devoured my one and only food ration. As dusk turned to night, the temperature dropped and the island became a refrigerator. I woke up the next morning and saw a plane buzzing overhead. I yelled my lungs out but to no avail. I didn’t find any flare guns, nor any SOS pyrophoric signal materials. The only thing I thought of was to write the word ‘Help’ on the sand. I was a meerkat of the highest order. My legs carried me as far as they could and I started to dig sand. With every push, the letter H became more visible. With every dig, its bevel became deeper. The next thing that floated over the horizon will have no problem seeing ‘Help’ on the beach. I ran to the nearest cliff and rolled boulders onto the letters’ font space. That way the waves could not take away my hard work.

After two days, there were still no signs of any planes. I was famished, and I started to hallucinate. I stumbled around the wreckage like a drunken shaman, waving his magic arms, and trying to summon hallucinated gods. Then, I smelled it. It was meaty, with a smoky afterthought. I rubbed my eyes and couldn’t believe my eyes. Sitting perfectly scattered on a blackened barbecue pit were shanks of aromatic barbecued meats. The crispy skin glistened underneath the hot afternoon sun. Sirloin, chuck, rib, round, they were all there. Some even wrapped in cloth to keep in the moisture. The red hue of the fire hiding in the charcoals emanated ever so often, gently massaging and spit roasting the flesh. Intact blood within the meat slowly cooked, and became streaks of blurred, dimmed red running from the bone to the trotter. A deep sensation from my stomach whispered, and I felt my animal instincts pry my jaws open. I sprinted over, grabbed a trotter, and ripped into its flesh. Like the cartoons that we love on Saturday mornings, I dunked the meats into my mouth and pulled out the bone, savoring every morsel.

When I had my fill, I laid down exhausted on the pristine white sand. My brain was alive again, and I stared into the beautiful blue skies. The cotton clouds shifted from one animal to the next. Then I heard a whisper. The voice forgiving, and paternal. It whispered that life was ordained by God, and whatever we did to sustain life will be forgiven. I sat up and scanned the skies quickly but saw no trace of a higher being. As if on cue, I heard the all too familiar sound of Beethoven. The piano notes that haunted me the last few days suddenly sounded different. The music got louder, and I heard the staccato of a plane’s rotor as it landed behind the wreckage.

My biggest fear is to be stuck on an island. And I now know the repercussions. I lost my prized possessions. I lost my beloved family. But most of all I lost my human innocence. It is something I can never get back, and I have to live with the consequences. Losing my family pains my heart. Losing my possessions pain my body. But losing my human dignity and having to sustain myself with the flesh of fellow men have morally decayed my spirit. It removed me of my human senses, and I now dwell in the dark abyss of hell.

Help.

Pagination using React and Mongodb

ref – https://www.freecodecamp.org/news/reveal-on-scroll-in-react-using-the-intersection-observer-api/

HomePage

We have a HomePage that calls getAllPhotos for the initial data retrieval.
We get the photos and next_cursor, but they are not rendered. Rather, we let a child component PageOne render these data.

notice here getAllPhotos’s parameter is empty.

But first, let us analyze getAllPhotos and how it retrieves data.

getAllPhotos

The function has a parameter searchParams. The searchParams indicates what next is. Next is the initial element that we are starting at when we grab the next ten elements from mongodb.

On the 1st pass, next is null because in HomePage getAllPhotos was called with empty param.

Which means if next exists do this:

if next is null (which it is here on the 1st pass) then we just use { $exists: true }, which means we match documents that contains the field ‘_id’.

Therefore, on the 1st pass, PhotosoModel model would return ten documents in mongodb.

Then we look at the 9th doc. We get the id for it. This is so that we know the location of where to start grabbing data for the next time around. If next_cursor is null, then we are done.

We return the next_cursor so that child rendering components know how to proceed like so:

So now, let’s take a look at how PageOne rendering comonent processes this:

PageOne

This is a component that renders data.

First thing’s first. Let’s save the param data to state.

Its basically renders photos like this:

In Inspect window, you will see that we are observing a reference’s current to see if its true or false.

So let me explain why.

Observing when a button appears in our ViewPort

First, we need to create a custom hook. Hooks are reusable functions.

We need to implement a useInView in order to put it in our PageOne and observe if a button appears in our viewport.

In order to do this, we create a reference and point it to the button.

So we first create a custom hook.

As you can see, we use a useRef to persist value of a button between renders. It can be used to store a mutable value that does not cause a re-render when updated.

Specifically, we return the ref from useInView and store a button in it:

We reference this button because we need to observe the ref’s current property. ref’s current is now button.btn_loadmore

Then create an observer and observe ref.current.

We use an IntersectionObserver to observe for if our button has appeared in our viewport. In other words, the Intersection Observer API allows you to configure a callback that is called when a target element intersects either the device’s viewport or a specified element. That specified element is called the root element or root for the purposes of the Intersection Observer API.

So in our case, our useInView custom hook observes to see if the referenced button has appeared on our viewport. If it has, then it update inView state in our custom hook useInView.

This variable (inView) is being monitored by useEffect in PageOne, and when it changes to a ‘true’, we would load more data. (as shown in the image above)

If it changes to a false (when the button is not in viewport), then inView is false, and the evaluation would in PageOne would see that inView is false, we don’t do anything.

So in other words, inView is returned from custom hook useInView. When we have not scrolled down to make button appear in viewport, isIntersecting is ‘false’. So we don’t load more.

When we’ve scrolled so that the button appears in viewport, IntersectionObserver’s entries[0] isIntersecting is true. So we would call this function handleLoadMore().

2nd Pass

Now we have to ask ourselves, so the BUTTON appears and we handleLoadMore. But what is handleLoadMore ?

It stops loading if next becomes null, or is loading. It locks the function from being called multiple times by setLoading to true.
That way, other calls will return.

Then it goes and getAllPost with the marker next (which should be fef)

when getAllPhotos returns, next_cursor has gone down the next 10 items ($lt: next) and put it in photos. next_cursor has been updated to the next 9th element.

But this time around since next !== null, we run:

We’re sorting by sort ‘-_id’ so it comes to $lt: next, which means get less than from the next initial marker.

We keep scrolling down to make the button appear, which will do more loading data, until we come to the end. The end is where when we grab the last few items in our mongdo that is less than 10. At that point next is null, and we don’t load anymore.