Anthropic just launched their most awaited Claude 4 Opus and Claude 4 Sonnet models. They tweeted:

Introducing the next generation: Claude Opus 4 and Claude Sonnet 4.

Claude Opus 4 is our most powerful model yet, and the world’s best coding model.

Claude Sonnet 4 is a significant upgrade from its predecessor, delivering superior coding and reasoning.

Claude 4 Sonnet is for "near instant response" whereas Claude 4 Opus is for extended thinking and deeper reasoning. And they both are significantly better than Claude's previous models as well as OpenAI's and Google's latest models (OpenAI Codex-1, OpenAI o3, OpenAI GPT-4.1, and Google Gemini 2.5 Pro) in terms of software engineering.

Starting today, Claude 4 Opus is available for the paid users and Claude 4 Sonnet is available for free users as well on claude.ai.

The SEO landscape is changing and it's going to be heavily influenced by AI in the coming years. And here is a list of some really useful research papers that one should study to stay relevant.

I asked Grok 3 DeeperResearch tool to find a list of technologies throughout the history that have claimed to replace software engineers, and it did pull up some cool mentions:

1. Automatic Programming and Compilers (1950s)

• Era: 1950s
• Description: Early efforts to automate programming, such as the A-0 compiler by Grace Hopper, focused on translating high-level languages like Fortran into machine code.
• Claims: Suggested that programming could be automated, reducing the need for low-level coding expertise.
• Impact: Enabled higher-level programming but did not eliminate the need for programmers to design algorithms and logic.
• Source: Wikipedia: Automatic Programming

2. Fourth-Generation Programming Languages (4GLs) (1970s-1990s)

• Era: 1970s-1990s
• Description: High-level languages like SQL and FoxPro designed to be closer to human language, enabling non-programmers to perform tasks like database queries.
• Claims: Hyped as potentially eliminating the need for traditional programmers, with - Claims: that they were the "last generation" requiring code writing.
• Impact: Simplified specific tasks but were limited for complex projects, requiring professional developers for broader applications.
• Source: Wikipedia: Fourth-generation programming language

3. Computer-Aided Software Engineering (CASE) Tools (1980s-1990s)

• Era: 1980s-1990s
• Description: Tools to automate software development stages, including analysis, design, and code generation, introduced by companies like Nastec.
• Claims: Promised significant productivity gains, potentially reducing manual coding needs, often oversold as "silver bullets."
• Impact: Faced adoption challenges due to complexity and cost, augmenting rather than replacing developers.
• Source: Wikipedia: Computer-aided software engineering

4. Visual Programming Languages (1990s)

• Era: 1990s
• Description: Languages like Visual Basic (introduced 1991) used graphical interfaces for rapid application development.
• Claims: Made programming accessible to non-experts, suggesting a reduced need for specialized skills for certain applications.
• Impact: Democratized app development but required skilled developers for complex projects.
• Source: Wikipedia: Visual Basic

5. Low-Code/No-Code Platforms (2000s-Present)

• Era: 2000s-Present
• Description: Platforms like Mendix and OutSystems enable application development with minimal coding, coined as "low-code" in 2014.
• Claims: Marketed as empowering citizen developers, potentially reducing reliance on professional programmers for routine tasks.
• Impact: Expanded development scope but professional developers remain essential for complex and custom solutions.
• Source: Wikipedia: Low-code development platform

6. AI-Assisted Coding Tools (2020s)

• Era: 2020s
• Description: Tools like GitHub Copilot (launched 2021) use AI to suggest and generate code, assisting developers in real-time.
• Claims: Sparked fears of replacing programmers, with discussions questioning if AI could automate coding tasks.
• Impact: Enhances productivity but requires human oversight for problem-solving and quality assurance.
• Source: Wikipedia: GitHub Copilot

Please note that these are completely AI-generated, I haven't edited a single thing here.

I came across a very interesting LinkedIn post by Judah Diament where he makes a point that vive coding won't be replacing software engineers. Below are some interesting fragments of the post:

Vibe coding enables people who aren't well trained computer scientists to create complete, working applications. Is this a breakthrough? Not even close - there have been such tools since the late 1980s. See, for example: Apple HyperCard, Sybase PowerBuilder, Borland Delphi, FileMaker, Crystal Reports, Macromedia (and then Adobe) Flash, Microsoft VisualBasic, Rational Rose and other "Model Driven Development" tools, IBM VisualAge, etc. etc. And, of course, they all broke down when anything sightly complicated or unusual needs to be done (as required by every real, financially viable software product or service), just as "vibe coding" does.

Then he goes on to explaining why vibe coding won't be replacing software engineers:

To claim that "vibe coding" will replace software engineers, one must: 1) be ignorant of the 40 year history of such tools or 2) have no understanding of how AI works or 3) have no real computer science education and experience or 4) all of the above, OR, most importantly, be someone trying to sell something and make money off of the "vibe coding" fad.

I like how the last paragraph is framed, it's definitely some food for thought.

I collected a list of 28 less known but very useful HTML tags:

1. Abbreviation – abbr

Marks abbreviations and shows full form on hover.

Example:

HTML

HTML:

<abbr title="HyperText Markup Language">HTML</abbr>

2. Bi-directional Isolation – bdi

Isolates text that may have different writing directions.

Example:

User علي logged in.

HTML:

User <bdi>علي</bdi>

3. Calculation Result – output

Shows the result of a calculation or user input.

Example:

+ =

7

HTML:

<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
  <input name="a" type="number" value="3"> +
  <input name="b" type="number" value="4"> =
  <output name="result">7</output>
</form>

4. Citation – cite

Used to reference the title of a work like a book, movie, article, or website. Usually shown in italics by browsers.

Example:

The Great Gatsby is a novel by F. Scott Fitzgerald.

HTML:

<p><cite>The Great Gatsby</cite> is a novel by F. Scott Fitzgerald.</p>

5. Contact Information – address

Used to provide contact details for a person, group, or organization. Usually displayed in italics and often used in footers.

Example:

Contact us at support@example.com

HTML:

<p><address>Contact us at support@example.com</address></p>

6. Definition – dfn

Marks the term being defined, often used in technical writing.

Example:

Latency is the delay before a transfer of data begins.

HTML:

<dfn>Latency</dfn>

7. Deleted Text – del

Used to mark removed text. Often shown with a strike-through.

Example:

This was removed.

HTML:

<p>This was <del>removed</del>.</p>

8. Description List with Terms and Details – dl + dt + dd

Used to list terms and their descriptions. <dl> wraps the whole list, <dt> defines the term, and <dd> gives the description.

Example:

HTML

A markup language for web pages.

CSS

Used to style HTML content.

HTML:

<dl>
  <dt>HTML</dt>
  <dd>A markup language for web pages.</dd>
  <dt>CSS</dt>
  <dd>Used to style HTML content.</dd>
</dl>

9. Direction Override – bdo

Forces a section of text to display in a specified direction.

Example:

Hello World

HTML:

<bdo dir="rtl">Hello World</bdo>

10. Expandable Section – details + summary

Creates a collapsible content box that can be expanded by the user.

Example:

Click to expand

This text is hidden until clicked.

HTML:

<details>
  <summary>Click to expand</summary>
  This text is hidden until clicked.
</details>

11. Group Form Fields – fieldset + legend

Groups related form inputs and adds a caption using <legend>.

Example:

Login

HTML:

<fieldset>
  <legend>Login</legend>
  <input type="text" placeholder="Username">
  <input type="password" placeholder="Password">
</fieldset>

12. Heading Group – hgroup

Groups a set of headings (like h1 to h6) when a heading has a subtitle or multiple levels. Helps with document outline.

Example:

Main Title

Subtitle

HTML:

<hgroup>
  <h1>Main Title</h1>
  <h2>Subtitle</h2>
</hgroup>

13. Hidden Content – template

Stores HTML that is not rendered until used with JavaScript.

Example:

HTML:

<template>
  <p>This is hidden and not rendered.</p>
</template>

14. Highlight Text – mark

Used to highlight part of text, often shown with yellow background.

Example:

This is important text.

HTML:

<p>This is <mark>important text</mark>.</p>

15. Inline Quotation – q

Used for short quotations that are displayed inline. Browsers usually add quotation marks automatically.

Example:

She said, Always write clean code.

HTML:

<p>She said, <q>Always write clean code.</q></p>

16. Inserted Text – ins

Used to mark text that was added later. Often shows as underlined.

Example:

This is new text.

HTML:

<p>This is <ins>new</ins> text.</p>

17. Keyboard Input – kbd

Used to show keyboard input, like shortcuts or key presses.

Example:

Press Ctrl + V

HTML:

<kbd>Ctrl</kbd> + <kbd>V</kbd>

18. Option Group – optgroup

Used to group related options inside a <select> dropdown, making it easier for users to choose from categorized lists.

Example:

AppleBanana

HTML:

<select>
  <optgroup label="Fruits">
    <option>Apple</option>
    <option>Banana</option>
  </optgroup>
</select>

19. Program Output – samp

Represents output from a program, like an error or log message.

Example:

Login failed: incorrect password

HTML:

<samp>Login failed: incorrect password</samp>

20. Progress Bar – progress

Shows progress of a task like loading or uploading.

Example:

HTML:

<progress value="40" max="100"></progress>

21. Ruby Annotations – ruby + rt + rp

Used in East Asian text to show pronunciation hints.

Example:

漢kan字ji

HTML:

<ruby>漢<rt>kan</rt>字<rt>ji</rt></ruby>

22. Shown If JS Disabled – noscript

Displays content only if JavaScript is disabled in the browser.

Example:

HTML:

<noscript>JavaScript is disabled in your browser.</noscript>

23. Subscript Text – sub

Displays text lower and smaller than the baseline, commonly used in chemical formulas or math expressions.

Example:

H₂O

HTML:

<p>H<sub>2</sub>O</p>

24. Superscript Text – sup

Displays text higher and smaller than the baseline, often used for exponents or footnotes.

Example:

E = mc²

HTML:

<p>E = mc<sup>2</sup></p>

25. Time or Date – time

Represents a specific time or date, useful for events or timestamps.

Example:

May 18, 2025

HTML:

<time datetime="2025-05-18">May 18, 2025</time>

26. Value Within Range – meter

Displays a value inside a known range, like disk or battery levels.

Example:

60%

HTML:

<meter value="0.6">60%</meter>

27. Variable Name – var

Used to show variables in math or programming context.

Example:

x + y = 10

HTML:

<var>x</var> + <var>y</var> = 10

28. Word Break Opportunity – wbr

Suggests a possible break point in a long word or URL.

Example:

www.examplelongword.com

HTML:

www.example<wbr>long<wbr>word.com

"Comedy hits you in the head, drama hits you in the heart. If you want people to remember your work, you need both: comedy to lower their guard, drama to make them feel."

– Michael Jamin, a Hollywood screenwriter

OpenAI launches Codex, a cloud-based agent that writes code and works on multiple tasks at once. It's just launched, and can be accessed from inside ChatGPT at chatgpt.com/codex but visiting this URL just redirected me back to ChatGPT as it's only for ChatGPT Pro users, and not Plus users.

Currently, it's in a research preview but it's said to have features like:

• writing code for you
• implementing new features
• answering questions about your codebase
• fixing bugs, etc.

The implementation is very interesting as it runs in its own cloud sandbox environment, and can be directly connected to your GitHub repo. It performs better than o1-high, o4-mini-high, and o3-high.

The cool thing is, it can also be guided by an AGENTS.md file placed within the repository. Very cool.

Today, we’re also releasing a smaller version of codex-1, a version of o4-mini designed specifically for use in Codex CLI.

Yes, they're also releasing something for Codex CLI as well. And about the pricing and availability:

Starting today, we’re rolling out Codex to ChatGPT Pro, Enterprise, and Team users globally, with support for Plus and Edu coming soon. [...] We plan to expand access to Plus and Edu users soon.

For developers building with codex-mini-latest, the model is available on the Responses API and priced at $1.50 per 1M input tokens and $6 per 1M output tokens, with a 75% prompt caching discount.

I am excited to see how this compares to Claude 3.7 Sonnet and Gemini 2.5 Pro in terms of coding, fixing bugs, designing UI, etc. I also uploaded a quick video about the same that you can watch on YouTube.

I have been coming across a lot of cool MCP server while browsing the internet, so decided to create a dedicated page and keep collecting MCPs here. I have a JSON file where I can add the new MCP servers, and it will automatically show in the card format here.

I will keep updating this list as I discover more such MCPs.

Connecting ChatGPT to Airtable gives you the superpower to get answers to 100s of questions in no time. Here's how to do that:

You need the following things to be able to connect ChatGPT to Airtable:

1. A paid Airtable account (the lowest plan is $24/month)
2. OpenAI API key (you'll have to set up a payment method on OpenAI, here)
3. The Scripting extension from Airtable (no additional cost), and
4. A script to call the OpenAI API inside Airtable

And below is the function that you can use to call the OpenAI from inside the Airtable and get the output.

async function getGPTResponse() {
    const userInput = "why is the sky blue?";
    const maxTokens = 500;
    const temperature = 0.7;
    const model = "gpt-4.1";
    const systemPrompt = "be precise";

    const messages = [
        { role: "system", content: systemPrompt },
        { role: "user", content: userInput },
    ];

    const res = await fetch('https://api.openai.com/v1/chat/completions', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'Authorization': `Bearer ${openaiApiKey}`,
        },
        body: JSON.stringify({
            model,
            messages,
            max_tokens: maxTokens,
            temperature,
        }),
    });

    const data = await res.json();
    return data.choices?.[0]?.message?.content || null;
}

Here, userInput is the prompt that you give AI, maxTokens is the max tokens for the model, temperature is model temperature, and systemPrompt is the system prompt. The prompt here is hardcoded, but you can modify the script to dynamically fetch prompts from each row and then get the outputs accordingly.

ChatGPT is very good at doing this implementation as per your base data, you can just give the above script and other details in the prompt, and it will give you the final code that you can put inside the Scripting extension.

Also, there's a generic version of this script at InvertedStone that you can also get and use. You can generate almost any kind of content using this script, not just from ChatGPT but also from other AI models like Claude, Gemini, Perplexity, and more.

The ultimate test of whether I understand something is if I can explain it to a computer. I can say something to you and you’ll nod your head, but I’m not sure that I explained it well. But the computer doesn’t nod its head. It repeats back exactly what I tell it. In most of life, you can bluff, but not with computers.

– Donald Knuth

Saw a person editing 3D shapes using hand gestures in front of the webcam. The demo is built using Three.js, WebGL, and MediaPipe.

He has also shared the GitHub repo containing the entire code which is basically a 300 lines of main.js file and a simple index.html file.

Came to know that Google Docs now has a "Copy as Markdown" and "Paste from Markdown" option under the Edit menu at the top. You can select some text to highlight the copy option and then any Markdown is also pasted in the document with proper formatting.

Very cool!

By the way, Google Docs already had the option to download the entire document as a .md file, but these copy and paste options are even more user friendly.

“When action grows unprofitable, gather information; when information grows unprofitable, sleep.”

― Ursula K. LeGuin, The Left Hand of Darkness

I saw a person using the React Router inside Next.js and I have so many questions. Like the navigation is visibly very fast, but my questions are:

1. Is it good for public pages? Because I think, it will have same SEO issues as SPAs.
2. Does it make the codebase more complicated?

Upon looking I found a detailed blog post on building a SPA using Next.js and React Router. It mentions the reason for not using the Next.js router:

Next.js is not as flexible as React Router! React Router lets you nest routers hierarchically in a flexible way. It's easy for any "parent" router to share data with all of its "child" routes. This is true for both top-level routes (e.g. /about and /team) and nested routes (e.g. /settings/team and /settings/user).

I do understand why someone would want to use Next.js but I have yet to learn more about this React Router thing.

BRB.

Update:

Josh has written a new short blog post about how he did it, definitely worth reading and understanding the process.

Just noting this for myself for future reference that whenever I have to create cards, I must use this simpler method each time. If the HTML is like this:

<div class="card-container">
    <div class="card">
        <p>Card 1 content</p>
    </div>
    <div class="card">
        <p>Card 2 content</p>
    </div>
</div>

The CSS should be like this:

.card-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  margin: 0 auto;
}

/* and then whatever CSS for .card here */

It's clean and quick.

I’ve compiled a list of websites for important web technologies that are likely to have old but functional designs. These are fundamental tools for the internet, often open-source, and their websites prioritize functionality over aesthetics, reflecting their long-standing nature.

I will keep updating this list as I discover more such websites.

I came across a GitHub repo containing the complete Python code host and run a WhatsApp AI chatbot. I have forked the repo as I am thinking of making such a chatbot for myself. The requirements are mentioned as:

• WaSenderAPI: Only $6/month for WhatsApp integration
• Gemini AI: Free tier with 1500 requests/month
• Hosting: Run locally or on low-cost cloud options
• No WhatsApp Business API fees: Uses WaSenderAPI as an affordable alternative

I will learn more about the WhatsApp business API and how it can be used to create a WhatsApp chatbot for specific topics that people can interact with. And then how it can all be monetized.

Stripe has developed a new approach to analyze transactions using a new transformer-based foundation model. Earlier, they relied on a traditional machine learning model but these models had limitations, but the new model is supposed to even increase the conversion even more and significantly decrease the fraudulent transactions.

Gautam Kedia, an AI/ML engineer at Stripe, explained this in a detailed X post. He mentions:

So we built a payments foundation model—a self-supervised network that learns dense, general-purpose vectors for every transaction, much like a language model embeds words. Trained on tens of billions of transactions, it distills each charge’s key signals into a single, versatile embedding.

This approach improved our detection rate for card-testing attacks on large users from 59% to 97% overnight.

While I did have a loose knowledge of what a transformer is, I looked up its definition again to understand it better in the context of payments:

A Transformer is a type of neural network architecture that has revolutionized natural language processing (NLP) and is now being applied to other domains, as seen in the Stripe example. Its key innovation is the attention mechanism.

The attention mechanism allows the model to weigh the importance of different parts of the input sequence when processing any single part.

Further, I asked Gemini to explain this entire thing to me in a simpler words and here's how it explained:

Think of it like reading a book. An older model might read word by word and only remember the last few words. A Transformer, with its attention mechanism, can look back at earlier parts of the book to understand the meaning of the current sentence in the broader context. In the payment world, this means understanding the significance of a transaction not just in isolation, but in the context of previous transactions.

Very cool.

Someone added more than 81 MCP tools to their Cursor IDE and it started showing a warning saying "too many tools can degrade performance" and it suggested to use less than 40 tools.

Cursor CEO replied the following:

you'll be able to disable individual tools in 0.50 :)

But the problem still remains, if MCPs are the future, there has to be a way that they are automatically managed and I do not need manually enable or disable tools.

I came across this post on HackerNews that discussed that Firefox has moved its repo to GitHub for the first time and it's a huge deal, as a person mentioned on X.

I don't know how this changes things for Firefox, but there must be some reason to it. A person, who works at Mozilla, commented:

The Firefox code has indeed recently moved from having its canonical home on mercurial at hg.mozilla.org to GitHub. This only affects the code; bugzilla is still being used for issue tracking, phabricator for code review and landing, and our taskcluster system for CI.

On the backend, once the migration is complete, Mozilla will spend less time hosting its own VCS infrastructure, which turns out to be a significant challenge at the scale, performance and availability needed for such a large project.

But this comment made the most sense for me:

I think it's actually an understandable strategical move from Mozilla. They might loose some income from Google and probably have to cut the staff. But to keep the development of Firefox running they want to involve more people from the community and GitHub is the tool that brings most visibility on the market right now and is known by many developers. So the hurdle getting involved is much lower.

I think you can dislike the general move to a service like GitHub instead of GitLab (or something else). But I think we all benefit from the fact that Firefox's development continues and that we have a competing engine on the market.

Some folks seemed excited about the migration whereas some are upset about the move to the closed-source platform, GitHub. But if this really makes the browser better, I am excited for the move.

Xuan-Son Nguyen shared a video on X where he is analyzing his webcam video feed in real-time by using local LLaMA model via ggml and Huggingface SmolVLM.

Real-time webcam demo with @huggingface SmolVLM and @ggml_org llama.cpp server.

All running locally on a Macbook M3

He also shared the GitHub repo containing the instructions on how to do it. The steps are:

1. Install llama.cpp
2. Run llama-server -hf ggml-org/SmolVLM-500M-Instruct-GGUF
   Note: you may need to add -ngl 99 to enable GPU (if you are using NVidia/AMD/Intel GPU)
   Note (2): You can also try other models here
3. Open index.html
4. Optionally change the instruction (for example, make it returns JSON)
5. Click on "Start" and enjoy

Definitely worth trying.

I came across an article that deep-dives in the technology behind fast codebase indexing in Cursor AI:

1. Code chunking and processing
2. Merkle tree construction and synchronization
3. Embedding generation
4. Storage and indexing
5. Periodic updates using Merkle trees

I also came across this post from Simon that talks about the same thing. Very interesting to read.

A person on Reddit created a MCP to control a single LED bulb via natural language – it does look like an overkill, but that's not the point. The person asks it to blink the LED twice, and it does that. Beautiful.

The tech used are:

• Board/SoC: Raspberry Pi CM5 (a beast)
• Model: Qwen-2.5-3B (Qwen-3 l'm working on it)
• Perf: ~5 tokens/s, ~4-5 GB RAM

And the control pipeline is explained as:

MCP-server + LLM + Whisper (All on CM5) → RP2040 over UART → WS2812 LED

And not to mention that everything runs locally on the Raspberry Pi CM5 device, and here's the entire code on GitHub that one can use.

Came across a Reddit post where the person bought a second-hand Lenovo Thinkpad P53 for €150 and successfully removed the supervisor password from it.

I found it very cool how the person unlocked the BIOS, so saving this post for future references, in case I decide to get something like this for myself. There are some additional resources also shared for the same - like this forum post and this YouTube video.

The history of flatbread goes back to 550 BC when Persian soldiers used to bake this and the first mention of the word "pizza" was recorded in AD 997 in Italy.

Here's a cool timeline for the history of pizza that you can refer to. It has multiple major events listed from 550 BC till 2020 - very interesting to go through.