DEV Community: Javier Alvarado

The Knowledge Cutoff Problem

Javier Alvarado — Mon, 10 Feb 2025 21:10:42 +0000

Lately I've been thinking about one problem all LLMs have: the knowledge cutoff problem. Basically, all LLMs have a training cutoff date where they don't know anything after that date. Here are some examples:

ChatGPT's knowledge cutoff is October 2023
Claude 3.5 Sonnet's knowledge cutoff is April 2024
Gemini 2.0 Flash's knowledge cutoff is August 2024

Keep in mind, this doesn't mean the LLMs know about everything up to these dates either. For some topics, the knowledge cutoff might be even earlier. (It's also not clear if October 2023 means October 1 or October 31. 🤔)

In this article, I want to outline some potential solutions to this problem for LLMs and other AI tools.

tldr: For now, you can get around this issue by using an llms-full.txt file or using an AI tool's web search feature.

llms.txt Proposal

llms.txt is a relatively new proposal designed to make it easier for LLMs to understand information on the web.

llms.txt File

The llms.txt proposal seems to have 3 ideas. One idea is to have a file called llms.txt that lists out the URLs for a website in Markdown with some short descriptions. You can think of it as a sitemap specifically for LLMs. If I'm being honest though, I don't understand how someone would use this format today, since I'm not sure how to get an LLM to accurately follow links in a Markdown file.

To see what it looks like, you can view Svelte's llms.txt file.

llms-full.txt File

Some developers are creating a file called llms-full.txt which contains all of the documentation for their tool/library/framework in a single file, converted into Markdown. This idea makes more sense to me, since you can give the LLM all of the information at once and you don't have to worry about it visiting the right URLs. The only bad thing about the llms-full.txt file is that I haven't seen any info on how project creators' should manage multiple versions of the llms-full.txt file if their project has multiple major versions.

To see what it looks like, you can view Svelte's llms-full.txt file.

Markdown Files

llms.txt does have a third recommendation as well: documentation sites should have Markdown versions of each page. So if you have a page called installation.html, you should also be able to visit installation.html.md to see a clean Markdown version of that same information. Once again, I'm not sure how developers are supposed to use this format at the moment.

To see what it looks like, you can look at this page on the Tab feature from Cursor's documentation.

In the next sections, I'll go over how you can use the llms-full.txt file with LLMs, and also how other tools are working around the knowledge cutoff problem.

ChatGPT

ChatGPT has 4 ways of getting around the knowledge cutoff problem.

File Upload

First, you can take the llms-full.txt file, upload it in a chat, and then tell it to use the file to answer your questions.

Projects

Second, you can create a Project folder, upload the llms-full.txt file to the Project, and then add Instructions to the Project telling ChatGPT to answer questions using the file. The Projects feature lets you group related chats together and prevents you from having to upload the same file over and over again every time you start a new chat.

Custom GPT

Third, you can create a custom GPT, upload the file llms-full.txt under the Knowledge section, and then add Instructions telling the GPT to use the file to answer questions.

One interesting thing about these first 3 methods is that they seem to use some form of RAG under the hood.

Search

Finally, in a normal chat, you can tell ChatGPT to search the web or click the Search button to force it to search the web. Just remember, not every model has this feature. For example, o1 can't search the web.

Tips

If you use the llms-full.txt file, I recommend renaming it to something more descriptive to prevent hallucinations. For example, I've been using Svelte's llms-full.txt file and renamed it svelte-5-docs.md. Also, you may have noticed I kept saying you have to tell ChatGPT to use the file. If you don't explicitly tell it that, it won't know to use the file.

Claude

Claude also has the ability for users to upload files, so you could try uploading an llms-full.txt to teach it about a new library/framework.

It also has a Projects feature, so you could create a Project and upload the file there to stay more organized. This is a paid feature though, so I haven't tried it yet.

GitHub Copilot

GitHub Copilot doesn't have any special features that I'm aware of for working with documentation websites or llms-full.txt files, but one thing you could try is adding the llms-full.txt file to your project folder and then using it as context in your Chat or Edit sessions.

Cursor

In Cursor, you have the ability to use @ symbols in a chat. One of those symbols is @Docs. Cursor has already crawled and indexed the docs for many popular tools/libraries/frameworks. If you use @Docs and ask it about one of the things it's crawled and indexed, it can use that knowledge to answer your question. You can view the list of already crawled docs here.

If you want Cursor to know about something that it hasn't crawled or indexed yet, you can add custom docs. One interesting thing about this feature is that it seems to basically be creating llms-full.txt files behind the scenes based on this forum answer.

Windsurf

Windsurf also has @ symbols. More specifically, it has @web and @docs symbols. From what I can gather, @docs is used for documentation Windsurf already knows about, and @web is used for documentation it doesn't know about. I'm not sure if Windsurf is converting the web pages to Markdown behind the scenes like Cursor is.

Devin

I was curious how more advanced AI tools were solving this issue, so I looked up the docs for Devin, which was touted last year as the "first AI software engineer." According to Devin's documentation, you can provide links to documentation or Devin can search for documentation independently, so it seems like it's just using web search tools behind the scenes. Again, I'm not sure if Devin converts the documentation to Markdown behind the scenes.

Future Solutions

OpenAI recently did an AMA on Reddit and someone asked about the knowledge cutoff. Someone on the OpenAI team mentioned they are working on the knowledge cutoffs, but emphasized the search feature. In fact, Sam Altman said that now that they have search, he personally doesn't think about the knowledge cutoff anymore.

However, in my experience, I like the answers from llms-full.txt better than answers using search. From my perspective, the answers from search just feel more like a summary of the web results rather than a direct answer. I imagine there's a way to prompt the LLM to give better answers using search, but I'm not sure.

Given the fact that it'll be hard for every single project out there to adopt the llms.txt standard and the direction OpenAI, Windsurf, and Devin are moving in, I think search will be the ultimate solution in the end (although I do really like the idea behind llms.txt). I think what I'd like to see in the future is an ability to whitelist or prioritize certain URLs, that way I can get the LLM to search the documentation first before consulting the rest of the web.

Conclusion

What are your thoughts on this issue? Have you found other solutions? Let me know in the comments below!

How do you get around an LLM's knowledge cutoff?

Javier Alvarado — Sat, 25 Jan 2025 22:52:44 +0000

ChatGPT's knowledge cutoff is October 2023
Claude 3.5 Sonnet's knowledge cutoff is April 2024
Gemini 2.0 Flash's knowledge cutoff is August 2024

This means that, by default, the LLMs don't know about updates to languages/libraries/frameworks after these dates. What's your preferred method for working around this? Feel free to include answers for LLMs and/or other AI tools like Cursor, Windsurf, etc.

Introducing simpledev.css

Javier Alvarado — Mon, 16 Sep 2024 21:58:42 +0000

simpledev.css is a new CSS framework that I describe as a mostly classless framework. I call it mostly classless because a lot of the code uses type selectors, so you don't have to add many classes to style your web page. There are some classes, but we try to keep them to a minimum (so far there are only about 42 classes).

Let's go over some of the features below!

Features

Mostly classless design: It's mostly classless, so you'll see your plain HTML page transform as soon as you add the framework.
Minimal classes for common elements: We provide classes for things that are really common: a navbar, making links look like buttons, a basic footer, etc.
Accessibility-focused: I'm not an accessibility expert, but I tried my best to incorporate accessibility best practices into the framework. Therefore, the framework has a skip link component, a visually-hidden class, and we use rems for font sizes.
Theme support: simpledev.css supports different themes. You can use just light mode, just dark mode, or both.
Minimal JavaScript: It's very light on JS. We only use JS for the navbar component. If you're not using the navbar (or you're using the simple navbar component instead), you can skip the JS entirely!
Easy to get started: We have a Get Started page that has basic and advanced templates that you can copy or download, a GitHub repo that you can download or use to start a new repo, and a Pen from CodePen to try it directly in your browser.
Recipes: We also have a Recipes page where you can copy and paste CSS rules into your custom.css file to get things like a sticky navbar, rounded corners, striped tables, and smooth scrolling!
Custom color palettes: You can bring your own color palette. simpledev.css doesn't really have any colors by default, so you can pick your own colors and add it to the framework.
Modular components: You can technically download some of the components and use them individually if you want. Just visit the GitHub repo and download the CSS files you want. Just keep in mind we developed our components on top of Modern Normalize, so you might need to incorporate Modern Normalize to get the same look.

Background

Last year I discovered the awesome-css-frameworks repo on GitHub. It contains a long list of CSS frameworks grouped into different categories. I was particularly interested in the section on Classless CSS frameworks. I liked the idea of linking to a CSS file and instantly changing the way an HTML page looks without having to modify your HTML.

Initially, I was inspired by the framework called Water.css in the list, but later on I drew more inspiration from Pico.css, another classless framework.

Eventually I decided to try to create my own framework. However, I wanted it to be a little different:

I decided to just use vanilla CSS instead of Sass. This is because I wanted it to be easy for other people to try the framework and also learn from the source code.
I didn't want it to be purely classless, because I think there are some things that require CSS classes.
Pico is probably the best looking classless CSS framework, but I feel that some of the elements/components are a little big, so I wanted my elements/components to be smaller.

Conclusion

Thanks for reading this post! I have a few favors to ask:

Please star the repo on GitHub!
Try building a small project with the framework
If you notice any problems, please create an issue on GitHub
If you have any feature requests, please start a discussion on GitHub
If you have an idea for component, try building it on CodePen!

Leave a comment below if you have any questions or suggestions! I'll also probably follow up with a tutorial on simpledev.css later on.

All Simple Dev tutorials are now FREE!

Javier Alvarado — Wed, 17 Aug 2022 19:04:15 +0000

All Simple Dev tutorials are now free! We recently decided to make all of our tutorials publicly available. Previously, only the HTML course was free, and a few other courses could be unlocked with a free membership. A paid membership was required for full access.

Memberships

Now you can read any tutorial on the site for free. You can still sign up for a paid membership, which allows you to track your progress and mark tutorials complete. This is a great option if you'd like to support the site on a monthly basis. We hope to add more features to the paid membership in the future. Also, if you sign up for a paid membership, the Donate button in the corner and the Donation/Member banner at the top of each tutorial is hidden.

Donations

Speaking of donations, you can now donate to Simple Dev using the Donate button in the corner! The Donate button is powered by Ko-fi, which is a service that allows websites and creators to accept donations without taking a fee. You can also donate directly on our Ko-fi page. This is a great option if you'd like to make a one-time donation to support the site.

Conclusion

If you're new to Simple Dev, it's a website designed to teach coding through short, easy-to-read, and up-to-date tutorials. There are over 300 tutorials on the site, covering HTML, CSS, JavaScript, VS Code, and more, and now you can read them all for free. Visit Simple Dev today to get started.

Simple Dev Improvements

Javier Alvarado — Wed, 30 Jun 2021 22:02:59 +0000

We've been making several changes to Simple Dev recently. Our overarching goal with these changes is to make the site better for beginners (although intermediate developers may still benefit from these changes as well).

All of these changes are still ongoing, so you can expect to see more in the future. Read on to learn more.

Downloadable exercises

The biggest change is that we've created downloadable exercises to go with our tutorials. This will make it easier to practice your coding skills with our tutorials. We've created exercises for most sections so far and will finish creating exercises for the other sections soon.

More Pens

We've added Pens from CodePen to tutorials that were missing them before, including our JavaScript and Markdown tutorials.

More screenshots

We've added more screenshots to different tutorials on the site. We especially focused on adding relevant screenshots to our VS Code tutorials.

More info

We've been adding more info to our tutorials to make them more beginner-friendly, especially our JavaScript tutorials. Now you can learn how to write the code and have a better understanding of what it means.

VS Code Tips

We've started including VS Code Tips directly inside our HTML, CSS, and other tutorials where possible. This makes it easier to learn how to quickly generate tags, properties, values and more and become a more productive developer. (We still have a separate VS Code Tips section as well for tutorials on productivity and customization.)

Minor changes

Rearranged Path

The Path has been rearranged. We've divided the first set of tutorials into Text Editors 1, Web 1, Text Editors 2, and Web 2. Since we're focused on teaching VS Code now, the Atom sections have been moved to the bottom as bonus sections. Bootstrap also comes before JavaScript now.

Projects

We created some simple projects to cap off our HTML, CSS, and Bootstrap sections. We hope to add more projects in the future.

Feedback

We hope you enjoy these changes we've made to Simple Dev, especially those of you just starting out on your coding journey. If you have any feedback, leave a comment below!

New: Exercises on Simple Dev!

Javier Alvarado — Tue, 22 Jun 2021 22:24:40 +0000

We recently created downloadable exercises to go along with the tutorials on Simple Dev. We created exercises for the HTML, Markdown, CSS, Bootstrap 4, and JavaScript sections. The goal here is to let users practice coding skills inside their text editor.

You can find the exercises by visiting the Topic pages above. You can find a link to download the exercises in the Summary section.

The exercises are hosted on GitHub. You can download them by clicking the green Code button and selecting Download ZIP. You can then extract the files into a new folder and then open that folder in your favorite text editor.

Each tutorial has its own exercise folder, and the exercise folders are grouped into sections. Each exercise folder has its own README file that contains the instructions for what to do.

This is still a new feature on Simple Dev, so we'd appreciate any feedback you have. You can fill out our feedback form if you have comments, questions, or suggestions on this feature.

New: VS Code and Atom sections!

Javier Alvarado — Tue, 02 Mar 2021 20:57:27 +0000

Recently we added 4 new sections to Simple Dev: VS Code Basics, VS Code Tips, Atom Basics, and Atom Tips.

Technically speaking, these are not brand new sections. Previously, we had 2 sections that already covered VS Code and Atom: Text Editor Basics and Text Editor Tips. Each tutorial in those sections covered how to perform a certain action in both VS Code and Atom. However, we felt that now was a good time to split those tutorials up so that VS Code users could focus on their content and Atom users could focus on their own content.

The hope is that now we can add more tutorials on VS Code with this new structure. Acccording to the Stack Overflow 2019 Developer Survey, VS Code is the most popular developer tool, and it's much more popular than Atom. Because of those facts, we feel that we should focus more on VS Code for now (although we may add some new Atom tutorials here and there).

One of our goals with Simple Dev is to teach developers how to code locally on their own devices, so these are very important sections to us. Not every course spends time explaining how to use a text editor. We pride ourselves in teaching coders how to code from the very beginning, starting with how to use a text editor.

If you have any questions or suggestions, leave a comment below!

More intuitive shell commands

Javier Alvarado — Thu, 10 Dec 2020 18:47:26 +0000

Recently I experimented with an idea to create natural language shell commands. Some of the shell commands can be unintuitive and a little hard to remember, so I decided to use aliases to make them easier to remember.

I'm on macOS, so I'm using zsh for my shell. However, the snippet below should work in bash as well (you would have to add the snippet to your ~/.bashrc or ~/.bash_profile file instead).

I added the following code snippet to my ~/.zshrc file.

alias help='man'
alias show='less -S'
alias view='less -S'
alias create='touch'
alias copy='cp -iv'
alias move='mv -iv'
alias rename='mv -iv'
alias delete='rm -iv'

After adding these aliases and opening a new terminal tab or window, I was able to start using them. Here are some examples of commands you can use:

show index.html
create index.html
copy index.html about.html
move index.html folder-name
rename folder-name other-folder-name
delete index.html

Goals

I had 2 goals in mind while creating these aliases. The first was to make the command names a little more intuitive, without making them too long. The other goal was to add in options that would make the commands a little more user-friendly. For example, the -i option makes the copy, move, rename, and delete commands interactive to prevent users from accidentally overwriting or deleting files.

Notes

I noticed a couple of things while making these aliases. The first is that a couple of commands have 2 aliases. For example, I wasn't sure whether show or view would be a better alias for the less command, so I added both. The mv command is used to move and rename files, so I created 2 aliases to correspond with these 2 actions.

I also realized the help command doesn't work with these aliases (so something like help show doesn't work, for example). The one exception is help help, which does bring up the man page for the man command.

Learn more about the shell

If you want to learn more about using the terminal and shell, you can visit my website Simple Dev. You can learn about the shell, Git, and web technologies like HTML and CSS.

New: Improved site navigation

Javier Alvarado — Mon, 16 Nov 2020 19:08:22 +0000

We recently added a new navigation feature to Simple Dev called module navigation. With our new module navigation, links to related tutorials will appear on the right side of the tutorial you're currently viewing (or on the bottom if you're viewing the site on a smartphone).

For example, if you're currently looking at a tutorial on a CSS selector, you will see all of the other tutorials on CSS selectors on the side of the screen, like in the picture below:

This makes it easier to jump around related tutorials.

What's a module?

Currently, we group related tutorials into what we call Topic pages. We have Topic pages for HTML, CSS, Git, and many other topics. The modules for the topic are the subsections listed on the Topic page. For example, the CSS Topic page has the following modules: Introduction, Syntax, Values, Properties, and Selectors, as well as a few others.

Some modules only contain one tutorial at the moment, but most contain several tutorials.

Moving between modules

If you want to move between different modules, you have a couple of options. The easiest thing to do is to click on the Topic link that is listed on the top of each tutorial to go back to the main Topic page. There you can see all of the modules and all of the tutorials in that topic.

Alternatively, if you're at the first or last tutorial in a module, you can use the Next and Previous navigation links at the bottom of the tutorial to get to the next or previous module (if there is one).

Conclusion

As always, if you want to find information even faster, you can always use our powerful search feature to instantly find any tutorial on the site.

Let us know what you think of this new feature in the comments below!

New: Jekyll tutorials!

Javier Alvarado — Fri, 13 Nov 2020 23:33:27 +0000

We recently released the first batch of our Jekyll tutorials! You can see them on our Jekyll Basics topic page.

What is Jekyll?

Jekyll is a static site generator, which means it's a tool that makes it easier to build static sites. When building a multi-page static site using just HTML, you end up with a lot of code you have to repeat on each page (if each page is using the same general layout). Jekyll, on the other hand, lets you reuse code by creating common layouts and template parts that can be used with each page, without having to copy and paste large chunks of code.

Before You Start

To get the most out of these tutorials, you should be familiar with HTML, CSS, Sass, and the terminal (though you don't have to be an expert at all of them). Luckily for you, we have tutorials for all of these topics! Check out our home page for links to all of our tutorials.

Conclusion

Let us know what you think of these tutorials in the comments below! We'll be adding more Jekyll tutorials soon.

New: "Cheat sheet" view for Topic pages

Javier Alvarado — Fri, 02 Oct 2020 00:23:32 +0000

We recently added code snippets directly to some of our Topic pages. Now users can easily skim through them to find what they're looking for.

The new Topic pages look like this:

We're calling this new layout the "cheat sheet" view because it allows you to get information at a glance.

For comparison, our old Topic pages consisted of lists of links, like this:

They were functional, but hard to skim through, especially on the pages with a lot of tutorials. To be clear, some of the Topic pages are still keeping the old format for now (like the Text Editor Basics page in the example above), but that may change in the future.

You can check out our list of Topic pages on the Simple Dev home page. Try viewing the HTML, CSS, Git, and npm pages to see examples of the new layout.

If you want to find information even faster, don't forget that you can always use our powerful search feature to instantly find any tutorial on the site.

Have fun coding!