Jawad Vajeeh

Leveling up.

[Jawad Vajeeh @JVajeeh]

Laziness is a symptom of not having an aim.

[Jawad Vajeeh @JVajeeh]

Reducing Largest Contentful Paint (LCP) is one of the most effective ways to improve perceived loading performance.

LCP measures how long does the browser takes to render the largest content element on the screen.

It basically consists of four sub parts that together forms LCP time:

1. Time To First Byte (TTFB) - It is the time from when user navigates to the page until the browser receives the first byte of HTML document.

2. Resource load delay - It is the time between TTFB and the moment when the browser discovers the LCP resource e.g Images, H1 title.

3. Resource load time - it is the time it takes for the browser to download the LCP resource after it has been discovered.

4. Element render delay - it is the time between the LCP resource finishing download and the element actually rendering on the screen.

When you begin to improve the LCP of your web page, start by identifying which sub part of LCP takes the longest and acts as a bottleneck.

[Jawad Vajeeh @JVajeeh]

Making web apps fast, starts by first asking to yourself "what blocks the user from seeing and using the page?"

Bowser does a lot of work behind the scenes before anything appears on the screen.

It has to read the HTML, load the CSS, run JavaScript, figure out the layout, and then finally draw everything on the screen.

This whole process is called the “Critical Rendering Path.”

The more work the browser has to do before showing something useful, the slower the website feels.

Big CSS files, heavy JavaScript, and too many things loading at once can all make users stare at a blank screen for longer.

One of the most important performance goals is optimizing the meaningful content visible inside the viewport as quickly as possible, also known as LCP (Largest Contentful Paint).

[Jawad Vajeeh @JVajeeh]

Instead of building large, monolithic components, we can divide our application into smaller components that are easier to develop, test and maintain.

[Jawad Vajeeh @JVajeeh]

Modularity and componentize code is one of the key principles of building large scale JavaScript applications.

[Jawad Vajeeh @JVajeeh]

In React, modules are often applied in a pattern called componentization where a larger component is broken down into sub components.

[Jawad Vajeeh @JVajeeh]

@abhitwt Elonburg

[Jawad Vajeeh @JVajeeh]

@pHequals7 I have this issue as well and I seriously didn't know why it was disabled. Though im not subscribed.

Surprised to know even Max users have this issue.

[Jawad Vajeeh @JVajeeh]

@Vaishali_sigh Invest time, money and energy in yourself as much as possible towards self development and get obsessed with taking action.

[Jawad Vajeeh @JVajeeh]

2. Development Phase

It is a cyclic process of building and improving application. It consists of following:

-> Prompt engineering
-> Patterns like Chain or Agent architecture
-> RAG or fine tuning to enhance LLM responses
-> Testing

[Jawad Vajeeh @JVajeeh]

LLMOps have broadly three phases:

1. Ideation phase
-> Understand business requirements through data sourcing and base model selection.
-> Data sourcing phase involves identifying data needs, finding sources and ensuring accessibility of the data we want to use.
-> The data should be relevant, available and should meet quality and governance standards
-> Base model selection involves making decision considering the benefits and trade-offs of different models.
-> Involves Selection from pre-trained, proprietary or open source models
-> Considering data privacy, ease of use, performance, model characteristics and customizability among other secondary factors.

[Jawad Vajeeh @JVajeeh]

LLMOps have broadly three phases:

1. Ideation phase
-> Understand business requirements through data sourcing and base model selection.
-> Data sourcing phase involves identifying data needs, finding sources and ensuring accessibility of the data we want to use.
-> The data should be relevant, available and should meet quality and governance standards
-> Base model selection involves making decision considering the benefits and trade-offs of different models.
-> Involves Selection from pre-trained, proprietary or open source models
-> Considering data privacy, ease of use, performance, model characteristics and customizability among other secondary factors.

[Jawad Vajeeh @JVajeeh]

LLMOps are essential for organizations wanting to use LLMs effectively.

It involves specialized practices, processes and infrastructure required to effectively manage, deploy and maintain large language models.

And ensures seamless integration of LLMs into the organization aligning them with existing processes.

[Jawad Vajeeh @JVajeeh]

LLMOps are essential for organizations wanting to use LLMs effectively.

It involves specialized practices, processes and infrastructure required to effectively manage, deploy and maintain large language models.

And ensures seamless integration of LLMs into the organization aligning them with existing processes.

[Jawad Vajeeh @JVajeeh]

Today I understood the concept of RAG in AI systems.

RAG - Retrieval Augmented Generation is a way that makes LLMs to give accurate and up-to-date responses by letting them look up information before responding.

LLMs by itself only know what they learned during their training. They can't access new information or specific documents.

RAG adds a search step. When you ask a question, the system first searches through the collection of documents or data you have given it, finds relevant pieces of information and then uses those pieces to write an answer.

This enables LLMs to give specific answers and not just general knowledge.

And you can update the data anytime and the LLM will use the new information.

It can also give citations so you can verify it.

[Jawad Vajeeh @JVajeeh]

You can't manage something if you don't measure it.

[Jawad Vajeeh @JVajeeh]

Here's what it means 🔖:

👉Page & Document Structure

• header — Intro or header for a page or section
• nav — Navigation links
• main — The primary content (one per page)
• section — A thematic group of content
• article — Standalone, reusable content (post, card, comment)
• aside — Tangential or supporting content
footer — Footer for a page or section

👉Text Meaning (not styling)

• h1–h6 — Content hierarchy (outline of the page)
• p — Paragraph
• blockquote — Quoted content
• cite — Source of a quote or work
• em — Emphasis (changes meaning)
•strong — Importance (not just bold)
• mark — Highlighted/relevant text
• abbr — Abbreviation
• time — Date or time

👉 Lists & Relationships

• ul — Unordered list
• ol — Ordered list
• li — List item
• dl — Description list
• dt — Term
• dd — Description

[Jawad Vajeeh @JVajeeh]

Want to write meaningful HTML ?

Write honest HTML tags.

If you can explain why a tag is used without mentioning CSS - its honest.

[Jawad Vajeeh @JVajeeh]

Want to write meaningful HTML ?

Write honest HTML tags.

If you can explain why a tag is used without mentioning CSS - its honest.

[Jawad Vajeeh @JVajeeh]

HTML is a language for meaning, not layout.

Getting the meaning right mostly takes care of accessibility.