When sending an email, a short snippet which is taken from the first few lines of our email content is shown right next to the email subject. This is called the preview text and can be a powerful tool for increasing the open rate.

However, the first few lines of our email might not always provide an accurate summary of what our email is about and this become important when working with HTML email template where first few lines might include elements like image alt text or navigational links.

To solve this problem, MJML have the mj-preview tag. This tag allows us to customize the preview text that appears in the recipient's inbox.

<mjml>
  <mj-head>
    <mj-preview>Check out our latest deals!</mj-preview>
  </mj-head>
  <mj-body>
    <!-- email content -->
  </mj-body>
</mjml>

When we create a branch and make numerous commits to it, and later decide to start fresh by removing those previous commits, we can do this by following these steps in the terminal:

1. Delete the branch locally: git branch -D <branch name>
2. Recreate the same branch from the ‘main’ branch: git checkout main git checkout -b <branch name>
3. Commit and push your changes: git commit -m "Your commit message" git push origin <branch name> -f By using the -f flag in the ‘git push’ command, you force-push the changes to the branch on the remote repository. This erases the previous commits from the branch, giving you a fresh start with your new commit.”

Namecheap allows you to modify DNS record types without deleting exiting records. Example an A record can be changed to CNAME record on the fly without deleting existing A record. This helps in zero downtime deployments.

while connecting rails local server with the client , if you get this error as mentioned below

could not connect to server: Operation timed out
	Is the server running on host "10.220.0.15" and accepting
	TCP/IP connections on port 5432? 

this means your postgres server is not connected to the host at address 10.220.0.15 . In order to see if it is connected or not we need to check the pg_hba.conf file. So that file must be present inside your postgresql directory . In order to get the path we can do ps aux | grep postgres it will look like this

...
user 46455   0.0  0.0 409138608   1248   ??  Ss   13Sep23   0:00.82 postgres: checkpointer
user 46372   0.0  0.0 408998640   2192   ??  S    13Sep23   0:16.79 /opt/homebrew/opt/postgresql@13/bin/postgres -D /opt/homebrew/var/postgresql@13

So from here we need the path that is present after the -D flag. So in my case it my path is /opt/homebrew/var/postgresql@13 Now we can cd into the path. Once we do that we need to do ls and we can find the file called pg_hba.conf . Then we need to run nano pg_hba.conf it will open the file and if you see that there is no host present , we need to write the following lines and press Ctrl + O then click Enter and Ctrl +X

host  YOUR_DB_NAME  YOUR_USER_NAME  10.220.0.15/32  md5

then start your postgres server for the desired database and you will successfully connect local rails server with your client.

HTTP/1 (1996) vs HTTP/2 (2015)

1. HTTP/1 req/res are sent sequentially, one after another. This means that if you have several resources (e.g., photos, stylesheets, scripts) to load for a single web page, each resource requires a separate connection, which can lead to latency and slower page loading times. Where as HTTP/2 introduces request multiplexing, which allows several requests and responses to be delivered and received in simultaneously over a single connection and thus minimising the latency and speeds up the loading of multi-resource web pages.
2. HTTP/1 headers are uncompressed. This can result in significant latency in the form of redundant header data being delivered with each request and response. HTTP/2, on the other hand, employs header compression (HPACK) to minimise the size of headers, hence reducing the amount of data delivered and enhancing efficiency.
3. HTTP/1 does not have built-in capability for prioritising requests. All requests are treated identically, which might lead to poor performance for essential resources. Whereas HTTP/2 supports stream prioritisation. This means that more critical resources can be prioritised, resulting in faster loading and a better user experience.
4. HTTP/1 requires the server to wait until the client requests additional resources before sending them. This can result in inefficiencies because the server may be aware of which resources will be required but must wait for the client to request them. HTTP/2, on the other hand, introduces server push, which allows the server to provide resources to the client that it expects the client will need. This minimises round-trip times and speeds up page loading.
5. I checked couple of websites, some use HTTP/1.1 and most of them use HTTP/2. Also HTTP/3 has been introduced in 2022

When your Gemfile.lock says BUNDLED WITH 2.2.4 , but while doing bundle -v or starting your rails server or rails console you get an error saying "You must use Bundler 2 or greater with this lockfile." . We can resolve that by running gem update --system .

There are a couple of performance metrics used to measure the loading and rendering speed of web pages.

1: First paint: It refers to the point in time when the browser starts rendering first pixels on screen. It does not needs to be recognisable. First Paint can include background colors or simple styling changes and doesn't guarantee that any content or text is visible yet.

2: First Contentful Paint (FCP): First Contentful Paint occurs when the browser renders the first piece of content from the DOM (Document Object Model). It can be text, an image, etc usually referring to something meaningful on the screen.

3. First Meaningful Paint (FMP): It refers to the point where a user can identify and understand the content that is loading. Usually includes layout changes the the font are loaded as well. FMP is depreciated.

4. Largest Contentful Paint (LCP): It measures the time it takes for the largest content element (such as an image, text block, or video) within the viewport to become fully visible and rendered on the user's screen. A webpage should have a LCP of 2.5 seconds or less.

5. Speed Index: It simply refers to how quickly the visible content of a web page is painted or rendered during the loading process. It depends on size of the viewport (mobile/desktop). Lower the score, the better it is.

Critical Rendering Path: The critical rendering path refers to the sequence of steps that a browser takes between getting the resources like HTML, CSS and JS and displaying a web page on a user's screen(turn them to pixels). It's crucial for web performance optimisation because it directly impacts how quickly a web page loads and becomes interactive.

The key steps involved are:

1. HTML parsing: The browser constructs the Document Object Model (DOM) tree by converting the HTML into a structured representation of the web page's content.
2. CSS parsing: The browser also parses the stylesheets and create CSS Object Model (CSSOM). The DOM and CSSOM is combined to create render tree.
3. Layout: Based on the render tree, the browser calculates the layout of each element, determining the size and position of each element, also called as reflow.
4. Paint: Finally, the browser paints pixels on the screen as per the calculated layout and it involves converting the elements into actual pixels on the screen.

Headless UI Tab

Headless ui is providing us the Tab component were we have

1. Tab.Group is the parent its wraps all this present inside it.
2. Tab.list in tab list we have defined our tab and we have selected as active tab.
3. Tab.Panels so tabs panels is the parent of all the Tab.
4. Tab.Panel so tab panel is defined under the Tab.Panels Note: if we have 3 tabs in Tab.list then we need to paced all 3 Tab.Panel in the same like we define tabs in Tab.List

example :

<Tab.Group>
    <Tab.List>
      <Tab
        className={({ selected })} => // apply active class
        key="must_pass_unique_key_1"
      >
        Tab Name 1
      </Tab>
    </Tab.List>

</Tab.Group>