[{"content":"What NavShelf is NavShelf is a free, no-signup start page that runs in your browser. A nested folder tree on the left, link cards on the right: you put the dozen sites you actually use into your own categories and see them the moment you open a new tab — no feed, no pop-ups to dismiss. It ships in English, Simplified Chinese and Traditional Chinese, with light and dark themes and a tools column of browser-based utilities (Base64, JSON formatting, timestamps). Folders, links and search settings live in your browser; nothing is uploaded, and there is no account.\nTwo kinds of content, one dashboard A navigation page tends to hold two very different things: the links you saved yourself, and the links someone else already vetted and organised. NavShelf keeps them in separate modes rather than mixing them into one list.\nThe switch is the star button in the toolbar, next to Blog. Off, the page shows My collection — your folders, your links. On, the same page shows the Tools directory that ships with the app. Clicking it again takes you back.\nWhat the Tools column actually contains Currently it is five categories — Development, Design, AI, Productivity and Writing — holding 28 entries that open the site\u0026rsquo;s own utilities (Base64, JSON formatting, timestamp conversion, image compression, QR codes, and the rest of the Free Tools), plus 17 external sites worth keeping around: GitHub, VS Code, Cloudflare, CodePen, Figma, Dribbble, Coolors, ChatGPT, Claude, Perplexity, Notion, Slack, Trello, Grammarly, DeepL, Hemingway.\nTwo visual signals tell you that you have left your own collection:\nThe breadcrumb starts with System instead of My collection, and clicking it returns you to the root of the directory. An amber strip across the top of the content area reads \u0026ldquo;Read-only system directory\u0026rdquo;, with a reminder that clicking Tools again goes back. Folder cards in this mode carry a small System badge, and the folder tree marks them with a star instead of a coloured dot.\nRead-only means read-only In this mode the right-click menu collapses to a single item: Open. There is no New folder, no Edit, no Delete, and nothing is draggable. The built-in directory cannot be reorganised by accident, and nothing you do here can damage the list.\nIt also sits outside your data entirely:\nIt is bundled with the app and updated when the app updates, so it never drifts into a half-edited state. It is not part of an export. Export your collection and you get your folders and links; the system directory is not in that file, and importing a file never overwrites it. Its text follows your interface language. Switch the interface to Traditional Chinese and the folder names and descriptions switch with it. Your own collection is untouched while you browse it, and the toggle remembers where you were: turn Tools on, look around, turn it off, and you land back in the folder you were reading.\nThe one thing it does not do A built-in directory cannot be edited, which is a deliberate trade: if it were editable, the next update would either overwrite your changes or leave you wondering which version you are looking at. So it is a reference shelf, not a second collection.\nIf you want part of it as your own, build it yourself: right-click in your collection and create the links you actually use. The mechanics are the ones in Right-Click to Manage — a new link needs only a title and a URL, and a description is worth the ten seconds.\nWhen to actually use it Finding a tool. The 26 utilities run in the browser without an account, and the directory is a faster way in than remembering a URL. Starting from zero. On a new device with an empty collection, the built-in directory gives you something useful to click before you import or rebuild anything. Passing the screen around. It is a presentable, read-only list of what the site offers, which is handy when showing someone what NavShelf is. Borrowing structure. Seeing how five categories are drawn is a reasonable starting point for your own top level, as discussed in Five Levels of Folders. FAQ Is the built-in content written by other users? No. It is curated by the site and published with each app version.\nCan I copy the whole directory into my collection in one click? Not currently. Recreate the links you want with the right-click menu; a handful is usually enough.\nDid turning it on change my bookmarks? No. The two sets of content are completely separate, and switching back returns you to the folder you were in.\nWhy are some entries internal and some external? Internal entries open NavShelf\u0026rsquo;s own tools, which run locally in your browser. External ones are sites that are broadly useful to have one click away.\nDoes the directory appear in my export file? No. Export gives you your own folders, links, search engines and settings only. The background is covered in Your Data Stays in Your Browser.\nDoes it work on a phone? Yes — the same toolbar button switches modes on mobile.\nTwo lists, one page One list is yours and editable; the other is a maintained reference that cannot be broken. The star button is the line between them, and that line is the point: nothing you do to your own collection can affect the built-in one, and vice versa.\nOpen NavShelf and click the star in the toolbar to see both sides.\n","permalink":"https://navshelf.com/en/posts/tools-column-guide/","summary":"\u003ch2 id=\"what-navshelf-is\"\u003eWhat NavShelf is\u003c/h2\u003e\n\u003cp\u003e\u003ca href=\"/app/\"\u003eNavShelf\u003c/a\u003e is a free, no-signup start page that runs in your browser. A nested folder tree on the left, link cards on the right: you put the dozen sites you actually use into your own categories and see them the moment you open a new tab — no feed, no pop-ups to dismiss. It ships in English, Simplified Chinese and Traditional Chinese, with light and dark themes and a tools column of browser-based utilities (Base64, JSON formatting, timestamps). Folders, links and search settings live in your browser; nothing is uploaded, and there is no account.\u003c/p\u003e","title":"The Tools Column: Built-In Directory vs Your Own Bookmarks"},{"content":"NavShelf is a free, no-signup start page that works like Windows Explorer: a nested folder tree on the left, link cards on the right, and the sites you actually use filed under categories you picked. Folders, links and search settings live in your own browser — nothing is uploaded, and there is no account. It also has no cloud and no mobile app, so it cannot be for everyone. Below are five types of users, what NavShelf saves them, and who should wait.\n1. People whose bookmarks bar ran out of room The bar holds maybe a dozen shortcuts, so everything else lands in a folder you never open. Six hundred links later, the page you know you saved is not findable.\nWhat works is treating the browser\u0026rsquo;s bookmark list as an inbox and NavShelf as the shelf: split the first level into broad categories (Work / Study / Life), then keep going by project or topic, five nested levels deep if needed. Every link is a card with an index number, the domain, and a description you wrote yourself — one screen tells you far more than a bookmarks bar did, and you need not open links one by one to check what is behind them.\n2. People who don\u0026rsquo;t want another account just for links You already have dozens of logins, and creating one more to store a few URLs — while letting someone analyse what you read — is not appealing.\nNavShelf has no account system: open it and use it. Your data sits in the browser\u0026rsquo;s local storage, so it survives closing the browser and disappears the moment you switch machines — that is exactly what \u0026ldquo;local\u0026rdquo; means. The trade-off is blunt: export a JSON file before you clear browsing data or reinstall. Once a week or once a month is enough. How that works: Your Data Stays in Your Browser.\n3. People who treat the browser as a workbench One project needs fifteen tabs, one article needs thirty sources — plainly not the same thing as \u0026ldquo;sites I visit often\u0026rdquo;.\nThis is where the folder tree earns its keep: folders can be dragged into a new position and links reordered inside a level; drop a folder somewhere it cannot go and it is refused with a message (five levels maximum, and a folder can never be dropped into its own subfolder). Right-click creates, edits and deletes folders and links — no selecting first and then hunting for a button. Details: Drag and Drop Bookmarks and Right-Click Is Enough.\n4. People who want their own start page A new tab opens on a feed, a trending list and an ad-bearing search box — dismissed several times a day.\nSet /app/ as your homepage or new-tab page and the first thing you see is your own shelf. The search overlay matters too: type a query, press Enter to search with the default engine, and you can add, edit or delete engines, mark one as default and use {query} as the placeholder — rebuilding the search box around how you search. There are light and dark themes and three interface languages as well.\n5. Developers and site owners Base64, JSON formatting, timestamp conversion, regex testing, image compression, QR codes: things you need weekly and would rather not install software for.\nNavShelf ships a tools column with 26 browser-based utilities (the same set as Free Tools); one click switches from My collection to that list. The list is read-only, updates with the app, never mixes into your own collection and never appears in an export. The JSON you export is plain text — folders and links — so it can live in a repository or be reshaped by a script.\nWho should wait Spelling out the limits saves everyone time:\nYou need \u0026ldquo;open it anywhere and it is current.\u0026rdquo; There is no cloud connection; changes travel as files. You want one collection shared with a team. There is no sharing or collaboration. You want one-click import from a browser. Only NavShelf\u0026rsquo;s own JSON is accepted today; the HTML file browsers export cannot be imported directly. You want full-text search across your saved links. The search box searches the web, not your collection; with hundreds of links, folders and card titles do the finding. You want a mobile or desktop app. There is only the web version. The same address opens in a phone browser (narrow screens collapse some button labels), but there is no standalone client. A three-minute self-check More than a hundred bookmarks, and \u0026ldquo;I know I saved it\u0026rdquo; happens weekly → worth trying. Your links need three or more levels of structure → worth trying. You are willing to move a file by hand when you change devices → worth trying. Everything must be current everywhere, or shared with someone → wait. FAQ Does it conflict with the browser\u0026rsquo;s own bookmarks? No. The two do not touch each other, and you can move one category across and leave the rest.\nWon\u0026rsquo;t data in a browser get lost? It will, if you clear browsing data, change devices or reinstall — which is why the habit is to export a JSON file weekly or monthly and keep it on your own drive.\nDo I have to move hundreds of bookmarks at once? No. One category and a dozen links are enough to start; the rest can wait.\nHow is this different from saving links in a notes app? Notes apps are better at long text and quoting. NavShelf does one thing: makes filing, ordering and opening a link fast — \u0026ldquo;found it in a second\u0026rdquo;, not \u0026ldquo;jotted it down as well\u0026rdquo;.\nThe last thing What these users share is not the number of bookmarks but the fact that their links need structure. Once \u0026ldquo;these categories no longer hold it\u0026rdquo; starts to sound familiar, five levels will carry you a long way. If you only want a dozen favourite sites in some order, the browser\u0026rsquo;s built-in bookmarks are enough — come back when they are not.\nTry it now: open NavShelf, right-click to create one folder, and file three links you will actually click today.\n","permalink":"https://navshelf.com/en/posts/who-is-navshelf-for/","summary":"\u003cp\u003e\u003ca href=\"/app/\"\u003eNavShelf\u003c/a\u003e is a free, no-signup start page that works like Windows Explorer: a nested folder tree on the left, link cards on the right, and the sites you actually use filed under categories you picked. Folders, links and search settings live in your own browser — nothing is uploaded, and there is no account. It also has no cloud and no mobile app, so it cannot be for everyone. Below are five types of users, what NavShelf saves them, and who should wait.\u003c/p\u003e","title":"Who Is NavShelf For? Five Types of Users"},{"content":"What NavShelf is NavShelf is a free, no-signup start page that runs in your browser. A nested folder tree on the left, link cards on the right: you put the dozen sites you actually use into your own categories and see them the moment you open a new tab — no feed, no pop-ups to dismiss. It ships in English, Simplified Chinese and Traditional Chinese, with light and dark themes and a tools column of browser-based utilities (Base64, JSON formatting, timestamps). Folders, links and search settings live in your browser; nothing is uploaded, and there is no account.\nTwo settings you touch once and benefit from daily A start page is one of the few pages you open dozens of times a day. That makes two settings disproportionately valuable: how it looks in the light you are actually sitting in, and which language its interface speaks.\nBoth live in the toolbar and both are remembered. Neither one touches your actual bookmarks.\nSwitching the theme Click the theme button in the toolbar and the interface flips between day and night. That is the whole interaction: one button, no settings page.\nDay is the default. White cards on a light grey field, hairline borders, a single blue accent. The choice is stored with your data, so the next time you open the page it is already the way you left it. Night mode is not an inverted screenshot Flipping a light interface to dark by inverting colours produces the washed-out grey-on-grey look everyone recognises as an afterthought. NavShelf\u0026rsquo;s night theme is a separate set of colours:\nPart of the UI Day Night Background and cards light grey field, white cards near-black field, dark grey cards Accent (active folder, links, focus) deep blue a lighter blue that stays readable on dark Built-in Tools column amber marking for system content amber re-tuned for a dark background Ad slots light paper strip dark strip with the same amber label The practical effect is that contrast stays high in a dark room without the page glowing at you.\nOne honest note: the theme does not follow your operating system. There is no automatic switch at sunset — it is a manual toggle, and it remembers what you chose. If you want it dark at night, click it once; it stays dark until you change it.\nThree interface languages The language selector next to the theme button switches the whole interface between English, Traditional Chinese and Simplified Chinese. It applies immediately, with no reload.\nOn the very first visit the interface is English, regardless of what your browser reports. That is deliberate: it means your collection looks the same on every device you open it on, instead of one machine showing Chinese and another English because of a browser setting. Change it once and your choice is remembered.\nWhat the language setting does translate Every control in the toolbar, the search overlay, the context menus and the dialogs. Empty states, notices and error messages — including \u0026ldquo;Maximum of 5 folder levels reached.\u0026rdquo; The built-in Tools column: every folder name and link description is written in all three languages, so switching languages switches that content too. The Blog button: it opens the blog in the language you are currently using, rather than dumping you into the English site. What it does not translate Your own bookmarks. Titles, URLs and descriptions are exactly what you typed, in whatever language you typed them — the interface language is a preference, not a translator. Folder structure, ordering and search engines are equally untouched.\nWhere these settings live Theme and language are stored inside the same local JSON as your folders and links, in the settings part of that object. Two consequences worth knowing:\nThey travel with an export. Export your data and import it on a new device, and your theme and language come along with the bookmarks. They are covered by \u0026ldquo;no cloud\u0026rdquo; the same way everything else is: nothing is synced, and clearing site data resets the interface to English and day mode, because the preference was part of that data. See Your Data Stays in Your Browser. FAQ Does the theme follow my system dark mode? Not currently. It is a manual toggle with memory, which also means one thing less to fight with when the system and the app disagree.\nIf I switch to Traditional Chinese, do my bookmarks get translated? No. Only the interface and the built-in Tools column change.\nWhy is the default English if I am not an English speaker? Consistency on first contact. The default is configured at build time, and your own choice overrides it permanently afterwards.\nDoes the blog switch language too? The Blog button follows your interface language. The blog itself lives at /en/, /zh-cn/ and /zh-tw/, so you can always link to any edition directly.\nDoes this work on a phone? Yes — the theme button and the language selector are both in the mobile toolbar, and the settings are the same ones.\nI changed devices and my interface is back to English. The preference lives in local browser data, so a new browser starts fresh. Import your JSON and it comes back with everything else.\nSmall settings, daily payoff Neither of these is a headline feature. They are the kind of thing you set on day one and then stop thinking about — which is exactly what you want from the page you open every morning.\nOpen NavShelf, pick your light and your language, and they will be waiting the next time you do.\n","permalink":"https://navshelf.com/en/posts/dark-mode-and-languages/","summary":"\u003ch2 id=\"what-navshelf-is\"\u003eWhat NavShelf is\u003c/h2\u003e\n\u003cp\u003e\u003ca href=\"/app/\"\u003eNavShelf\u003c/a\u003e is a free, no-signup start page that runs in your browser. A nested folder tree on the left, link cards on the right: you put the dozen sites you actually use into your own categories and see them the moment you open a new tab — no feed, no pop-ups to dismiss. It ships in English, Simplified Chinese and Traditional Chinese, with light and dark themes and a tools column of browser-based utilities (Base64, JSON formatting, timestamps). Folders, links and search settings live in your browser; nothing is uploaded, and there is no account.\u003c/p\u003e","title":"Dark Mode and Multilingual UI: Making the Dashboard Yours"},{"content":"What NavShelf is NavShelf is a free, no-signup start page that runs in your browser. A nested folder tree on the left, link cards on the right: you put the dozen sites you actually use into your own categories and see them the moment you open a new tab — no feed, no pop-ups to dismiss. It ships in English, Simplified Chinese and Traditional Chinese, with light and dark themes and a tools column of browser-based utilities (Base64, JSON formatting, timestamps). Folders, links and search settings live in your browser; nothing is uploaded, and there is no account.\nThe short version NavShelf has no accounts and no server-side database. Folders, links, search engines and interface settings live on the device and browser you are using right now. Close the tab, come back next month, and they are still there — and nobody else, including the people who run the site, can see them.\nWhere the data actually lives Everything is in one browser storage key called navProjectData, holding a single JSON object with four parts: directories, links, searchEngines and ui. Every change — a new link, a rename, a drag — is written there immediately.\nThat is the whole storage story. There is no background sync, no queue of changes waiting to be pushed anywhere, no backup copy on a server.\nYou can see it yourself: open the browser dev tools, go to Application → Local Storage, and the entire contents of your collection are visible as plain JSON. Nothing is hidden from you, because nothing is stored anywhere else.\nWhat local-first buys you No account. No sign-up, no password to forget, no monthly email, no risk of losing access to your own links because a login broke. No server-side copy to leak. The most common way bookmark data gets exposed is a database someone else runs. There is no database here. No dependency on a service staying alive. Your structure does not stop working if a company shuts down. The same is true of the tools. The utilities on this site — Base64, JSON formatting, timestamps, image compression — also run inside the browser. What you paste into them is not uploaded. What it costs (the honest part) Nothing follows you to another browser. Switch browsers or devices and your collection does not come along. You move it deliberately with export and import. Clearing browser data deletes it. \u0026ldquo;Clear browsing data\u0026rdquo; with site data selected will take your collection with it, and private windows throw it away when they close. No recycle bin, no undo. Deleting a folder takes its subfolders and links with it. A JSON export is the only way back. There is a size ceiling. Browser storage typically allows about 5–10 MB, which is thousands of links but not unlimited. Export and tidy when you get close. No collaboration, no sharing, no sync. Nobody else can edit your collection, and it does not update live on another screen. What does leave your browser The bookmarks never do. Loaded pages are a different matter, and it is worth being precise:\nThe site carries page-level analytics that count visits, and — once advertising is enabled — ad scripts. Ad slots do not load at all when the app is opened as a local file. Those scripts operate at the page level. NavShelf does not hand your bookmark data to them. If you would rather not run third-party scripts at all, block them in your browser. The ad components are built to fail silently, so blocking them does not break any bookmark feature. That is the tradeoff in plain terms: your data stays local, and the page you load it from is still a web page with the usual web analytics.\nVerify it in ninety seconds Look at the storage. Dev tools → Application → Local Storage → one key, all of your data, readable JSON. Watch the network. Open the Network tab and start editing links. No requests fire — the app is not sending anything anywhere. Pull the plug. With the page already open, disconnect from the network and keep adding, renaming and deleting. Everything works, because none of it depends on a server. Read the policy. The specifics are written up on the privacy page. FAQ Is my data uploaded? No. There is no endpoint to upload it to.\nCan support recover a collection I deleted? No — and that is the point. Nobody has a copy, which is why the export habit matters.\nWhy not offer cloud sync? Sync needs accounts, a database and someone to be responsible for both, which turns a free local tool into a service with a subscription attached. Export and import cover the occasional device move; strong synchronisation is a separate product.\nDoes it work in a private window? Yes, and the collection disappears the moment that window closes.\nCan my phone and laptop share one collection? Not automatically. Moving it takes an export and an import.\nWhat if I run out of storage? Export first, then delete what you no longer need. The app keeps working; the export is your reset button.\nWhy it is built this way A bookmark collection is one of the more personal things you keep online: it is a map of what you are working on, worrying about and planning. Local-first means the map stays yours. In exchange you accept a bit more responsibility — an export now and then, a deliberate move when you change devices.\nOpen NavShelf and check the storage tab if you like. Seeing your own JSON sitting in your own browser is a more convincing privacy claim than any wording on a marketing page.\n","permalink":"https://navshelf.com/en/posts/local-first-bookmark-data/","summary":"\u003ch2 id=\"what-navshelf-is\"\u003eWhat NavShelf is\u003c/h2\u003e\n\u003cp\u003e\u003ca href=\"/app/\"\u003eNavShelf\u003c/a\u003e is a free, no-signup start page that runs in your browser. A nested folder tree on the left, link cards on the right: you put the dozen sites you actually use into your own categories and see them the moment you open a new tab — no feed, no pop-ups to dismiss. It ships in English, Simplified Chinese and Traditional Chinese, with light and dark themes and a tools column of browser-based utilities (Base64, JSON formatting, timestamps). Folders, links and search settings live in your browser; nothing is uploaded, and there is no account.\u003c/p\u003e","title":"Your Data Stays in Your Browser: What Local-First Bookmark Management Actually Means"},{"content":"What NavShelf is NavShelf is a free, no-signup start page that runs in your browser. A nested folder tree on the left, link cards on the right: you put the dozen sites you actually use into your own categories and see them the moment you open a new tab — no feed, no pop-ups to dismiss. It ships in English, Simplified Chinese and Traditional Chinese, with light and dark themes and a tools column of browser-based utilities (Base64, JSON formatting, timestamps). Folders, links and search settings live in your browser; nothing is uploaded, and there is no account.\nThe most overlooked part of that page is the search box at the top: most people only ever use the default Google entry, never noticing the rest of the list — or that they can add their own.\nThe search box is not one engine, it is a list At the top of the sidebar is a \u0026ldquo;Search the web\u0026rdquo; button. Open it and you get an input field with an engine list underneath: which site handles your words depends on which row you pick. Three engines ship by default — Google, Bing and Baidu — and Google carries the \u0026ldquo;Default\u0026rdquo; tag.\nSearching takes three steps Click \u0026ldquo;Search the web\u0026rdquo; at the top of the sidebar. The input is already focused, so just start typing. Pick the engine you want; the selected row highlights — by default, the one marked \u0026ldquo;Default\u0026rdquo;. Press Enter, or click the ↵ button. The results open in a new tab and the overlay closes. Two details: the new tab opens without handing it a reference to your page, and a temporary engine switch is not remembered — reopening the overlay puts you back on the default. That is deliberate: nine searches out of ten go to the default engine.\nSwitching and managing live in the same overlay Click \u0026ldquo;Manage\u0026rdquo; at the top right of the engine list. In manage mode each row grows three small buttons, and an \u0026ldquo;＋ Add engine\u0026rdquo; row appears at the bottom:\nButton What it does ★ Set as default ✎ Edit name, search URL and icon ✕ Delete this entry ＋ Add engine Append a new engine to the list The \u0026ldquo;Manage\u0026rdquo; button turns into \u0026ldquo;Done\u0026rdquo; at the same time; click it again to put those controls away and go back to plain picking. Clicking the empty space outside the overlay closes it.\nAdding and editing use the same three fields:\nName (required): shown in the list, and the source of the letter icon when you leave that one blank. Search URL (required): must contain the {query} placeholder and be an http(s) link. Icon (optional): one character, two at most, to tell rows apart; left empty, it becomes the first letter of the name. Mistakes are rejected with \u0026ldquo;Enter a name and an http(s) search URL containing {query}.\u0026rdquo; — an unusable engine never reaches the list.\n{query} is the whole secret {query} marks where the keywords go. All NavShelf does is swap in the URL-encoded keywords and open the rest as-is — so it need not sit at the end, and it can live alongside other parameters:\nhttps://www.google.com/search?q={query} https://www.bing.com/search?q={query} https://duckduckgo.com/?q={query} https://www.baidu.com/s?wd={query} https://zh.wikipedia.org/w/index.php?search={query} https://github.com/search?q={query} https://www.google.com/search?q={query}\u0026amp;hl=en\u0026amp;num=20 That last line uses the same trick differently: put the language and page size in the URL and the engine becomes permanently \u0026ldquo;English results, 20 per page\u0026rdquo;. Because keywords are URL-encoded, Chinese terms reach Baidu, Zhihu and Bilibili just as happily.\nThe same rule builds two genuinely useful kinds of engine:\nSite search. Paste a site\u0026rsquo;s own search URL — the GitHub line above. To look something up there, pick that engine from your start page instead of opening the site and hunting for its search field. Vertical tools. Dictionaries, translators, maps, shops: anything whose search page follows a ?q= shape can become a row in the list. Two hard rules At least one engine survives. Once you are down to a single engine the ✕ button goes dead, and forcing it only shows \u0026ldquo;Keep at least one search engine.\u0026rdquo; Delete the default and the first row takes over. Remove the row marked default and the top engine in list order becomes the default automatically. Where those engines are stored Like folders and links, the engine list lives only in this browser, under searchEngines in the navProjectData key: a JSON export carries it along, and an import restores it (see Your data stays in your browser).\nImports are cleaned on the way in: entries missing a name, missing {query} or not using http(s) are dropped, and exactly one default is guaranteed. If nothing usable is left, it falls back to the Google / Bing / Baidu trio.\nWorth stating plainly: search hands you straight to the target engine from your browser. NavShelf has no backend and no idea what you searched for — the engine you picked does, as it would if you typed in the address bar.\nFAQ Can I add Chinese-language engines? Yes. Baidu, Zhihu, Weibo, Douban, Bilibili — any of them, as long as the URL carries {query}; Chinese keywords are encoded automatically.\nWhat if the URL has no {query}? It will not save. Without the placeholder the engine does not know where the keywords belong, so the dialog rejects it.\nIs there a keyboard shortcut for search? Not today — the entry point is the button at the top of the sidebar. The convenient workaround: make this page your browser start page, so a new tab is one click away (see Turn your browser start page into your own dashboard).\nCan I get a deleted engine back? There is no recycle bin. Re-add it with the templates above, or import a JSON export that still contains it.\nDoes searching upload my keywords to NavShelf? No. There is no backend and nothing collecting search terms; the keywords travel with the new tab\u0026rsquo;s URL, straight to the engine you chose.\nThe short version The default engine handles nine searches out of ten, the extras cover the rest, and custom engines cover \u0026ldquo;that thing that only exists inside one site\u0026rdquo; — all three edited in the same place: \u0026ldquo;Search the web\u0026rdquo; → \u0026ldquo;Manage\u0026rdquo;.\nOpen NavShelf, add one on-site search from the templates above, and you will use it tomorrow.\n","permalink":"https://navshelf.com/en/posts/custom-search-engines/","summary":"\u003ch2 id=\"what-navshelf-is\"\u003eWhat NavShelf is\u003c/h2\u003e\n\u003cp\u003e\u003ca href=\"/app/\"\u003eNavShelf\u003c/a\u003e is a free, no-signup start page that runs in your browser. A nested folder tree on the left, link cards on the right: you put the dozen sites you actually use into your own categories and see them the moment you open a new tab — no feed, no pop-ups to dismiss. It ships in English, Simplified Chinese and Traditional Chinese, with light and dark themes and a tools column of browser-based utilities (Base64, JSON formatting, timestamps). Folders, links and search settings live in your browser; nothing is uploaded, and there is no account.\u003c/p\u003e","title":"Switch Between Search Engines, or Add Your Own: Rethinking the Search Box"},{"content":"What NavShelf is NavShelf is a free, no-signup start page that runs in your browser. A nested folder tree on the left, link cards on the right: you put the dozen sites you actually use into your own categories and see them the moment you open a new tab — no feed, no pop-ups to dismiss. It ships in English, Simplified Chinese and Traditional Chinese, with light and dark themes and a tools column of browser-based utilities (Base64, JSON formatting, timestamps). Folders, links and search settings live in your browser; nothing is uploaded, and there is no account.\nWhy everything starts with a right click The toolbar in NavShelf holds search, theme, language, the Tools switch and About — there is no New, Edit or Delete button anywhere. Every change begins with a right click, and the menu changes depending on what you clicked.\nThe benefit: actions sit on the object itself. You never select something first and then hunt for a button elsewhere. The cost: three different menus to learn, and they are all listed below.\nThe three menus What you right-click What the menu offers A link card Open / Edit / Delete A folder (tree node or folder card) Open / New folder / New link / Edit / Delete Empty space in the content area or the tree New folder / New link The Tools column (built-in content) Open only Two details: Delete is tinted red and always sits last, so it is hard to hit by accident; and the menu opens where your pointer is, closing when you click anywhere else, right-click somewhere else, or press Escape.\nCreating a link: three fields Right-click → New link and the dialog asks for three things:\nTitle (required) URL (required — prefilled with https://, just keep typing) Description (optional, multi-line) If the title or the URL is empty, pressing Save does nothing at all: no half-created entry. Leave the description empty and the card shows just the title and the domain.\nThe URL field is deliberately not validated. Relative paths, mailto: links and intranet addresses all save fine, and clicking them follows whatever the browser does with them. It is an escape hatch on purpose — just be sure about what you paste.\nThe description is worth writing properly. Three months from now you will not remember why you saved a link; \u0026ldquo;when I need this\u0026rdquo; beats \u0026ldquo;official site\u0026rdquo;, and it beats a tagging system for effort.\nFolders: create, rename, delete New folder asks for one thing, the folder name. If you are already five levels deep, you get a notice reading \u0026ldquo;Maximum of 5 folder levels reached.\u0026rdquo; rather than a silent failure — the depth rules live in Five Levels of Folders. Edit renames it. The new name shows up immediately in the tree, on the folder card and in the breadcrumb. Delete removes every subfolder and link inside, so it asks first: \u0026ldquo;Delete this folder with all subfolders and links?\u0026rdquo; Check which folder is actually selected before confirming — this is the one irreversible action in the app. Editing: what changes, and what does not For a link you can change the title, the URL and the description. An empty title cancels the whole edit; an empty URL keeps the previous URL rather than blanking the link.\nWhat you cannot change here is the folder a link lives in — moving things is a different gesture. Folder positions change by dragging in the tree, and links reorder or drop into a subfolder by dragging in the content area, as covered in Drag and Drop Bookmarks. Short version: the right-click menu edits content, dragging edits position.\nFour rails against mistakes Required fields are enforced quietly. Leave one empty and nothing happens — no partial rows. Deletion always asks. Removing a folder spells out that subfolders and links go with it. The Tools column is read-only. Turn it on and the menu collapses to Open; built-in content cannot be edited by accident. Your data lives in your browser only. Changes save to localStorage immediately, which also means there is no recycle bin. A periodic JSON export is the last line of defence. FAQ Does the browser menu get in the way? No. NavShelf takes over right-click inside the content area and the tree, so the browser\u0026rsquo;s own menu does not appear there.\nCan I edit several links at once? Not currently — one at a time. When cleaning up a large collection, drag things into place first and add descriptions afterwards.\nDo I need to confirm deleting a single link? Yes. It is only one link, but it is gone for good; the confirmation is cheap.\nI renamed an item but its position did not change. Renaming never reorders anything. Position is decided by dragging.\nHow does this work on a phone? Mobile browsers generally fire the same menu on a long press (which menu appears depends on the browser), and the dialogs are identical to the desktop ones.\nThe short version The toolbar is for looking things up; the right-click menu is for changing them. Create with title, URL and a description worth reading, rename freely, delete carefully — and export now and then, because that is the only undo the app has.\nOpen NavShelf and right-click an empty spot: two items appear, and one of them is where every bookmark you own starts.\n","permalink":"https://navshelf.com/en/posts/right-click-bookmark-actions/","summary":"\u003ch2 id=\"what-navshelf-is\"\u003eWhat NavShelf is\u003c/h2\u003e\n\u003cp\u003e\u003ca href=\"/app/\"\u003eNavShelf\u003c/a\u003e is a free, no-signup start page that runs in your browser. A nested folder tree on the left, link cards on the right: you put the dozen sites you actually use into your own categories and see them the moment you open a new tab — no feed, no pop-ups to dismiss. It ships in English, Simplified Chinese and Traditional Chinese, with light and dark themes and a tools column of browser-based utilities (Base64, JSON formatting, timestamps). Folders, links and search settings live in your browser; nothing is uploaded, and there is no account.\u003c/p\u003e","title":"Right-Click to Manage: Creating, Editing and Deleting Links in NavShelf"},{"content":"What NavShelf is NavShelf is a free, no-signup start page that runs in your browser. A nested folder tree on the left, link cards on the right: you put the dozen sites you actually use into your own categories and see them the moment you open a new tab — no feed, no pop-ups to dismiss. It ships in English, Simplified Chinese and Traditional Chinese, with light and dark themes and a tools column of browser-based utilities (Base64, JSON formatting, timestamps). Folders, links and search settings live in your browser; nothing is uploaded, and there is no account.\nWhat dragging changes, and what it does not The most tedious part of cleaning up bookmarks is relocating things that are already saved: create a folder, re-add twenty links one by one, and you have effectively redone the work. Drag and drop exists for exactly that step.\nIn NavShelf there are two kinds of dragging, and they do different jobs:\nDragging a folder happens in the tree on the left and changes where the folder sits in the hierarchy. Dragging a link happens in the content area on the right and changes the order of links, or files a link into one of the current folder\u0026rsquo;s subfolders. Neither one edits the link itself — the title, URL and description survive untouched, and the change is saved the moment you let go. The structure they operate on is the five-level folder tree from the previous article; that one is worth reading first.\nMoving folders in the tree Every node in the tree can be dragged, and there are two places to drop it:\nOnto another folder: the dragged folder becomes a subfolder of that one, placed after its existing subfolders. Subfolders and links travel with it — you never re-file them by hand. Onto the empty space of the tree: the dragged folder goes back to the top level. While you drag, the valid target highlights, so you can see where the drop will land before you release.\nOne detail that is easy to miss: a moved folder always lands last among its new siblings, and there is no \u0026ldquo;insert before the third child\u0026rdquo; precision. Sibling order follows the order you dragged things in — drag again if you want to change it.\nReordering links in the content area Link cards accept two kinds of drop:\nOnto another link card: the dragged link is inserted before that card. A few drags in a row move your most-used links into the top-left corner. Onto a subfolder card: the link moves into that folder and lands at the end of its current links. One current limit is worth stating plainly: link dragging only works within the current folder — you can reorder in place, or push a link down into one of this folder\u0026rsquo;s subfolders, but you cannot drag a link back up a level or across to another branch. For those moves, create the link again in the target folder.\nAfter a reorder, the numbers on the cards are renumbered. That is expected and does not affect the links themselves.\nThe two drops that get refused A move that would exceed five levels. If dragging a branch would push it past the depth limit, there is simply no target to drop on. A folder dropped into its own subfolder. Also no valid target — that would create a cycle and break the tree. Neither case stops you with an error dialog; the drop target never appears in the first place.\nA cleanup sequence that works Create the destination first. Right-click in the tree and build the folder you need; do not improvise mid-drag. Collapse what you are not touching. A short sidebar makes the drop targets obvious. Move folders before links. Once the folder layer is settled, everything inside follows automatically and only ordering is left. Order by frequency. Drag the two or three links you open daily to the front. Fixed positions are what make a start page thoughtless to use. Export when you are done. Dragging is reversible; deleting is not, and there is no recycle bin. When not to drag Creating a folder for a single link. The path gets longer and finding it gets slower; leave the link one level up. Filing hundreds of links in one sitting. Move one branch, live with it for a few days, then continue. Micro-tuning for neatness. If the levels are right, sibling order barely matters. FAQ Can I undo a drag? There is no undo button, but a drag only changes position — drag it back. The genuinely irreversible action is deleting a folder, which cascades to its subfolders and links. That is what makes the JSON export habit matter.\nDoes dragging work on a phone? Dragging relies on desktop browser drag-and-drop, which touch screens do not trigger. To restructure on a phone, open the same URL in a desktop browser. Bookmarks live in each browser separately, as covered in Turn Your Browser Start Page Into a Personal Dashboard.\nCan I drag inside the Tools column? No. The Tools column is read-only system content: its nodes cannot be dragged and do not accept drops.\nDoes dragging move me somewhere else? No. After a drop you stay in the current folder, unless the link itself moved into another one.\nHow does this relate to the right-click menu? The menu creates, edits and deletes; dragging relocates. They complement each other rather than overlapping.\nThe point of all this Dragging solves one class of problem: the thing is already saved, it is just in the wrong place. Folders move around the tree, links reorder in place or drop down a level, and anything that would break the structure simply refuses to land.\nOpen NavShelf and drag one folder onto another — watching a whole subtree move at once is the fastest way to see why this beats re-creating anything.\n","permalink":"https://navshelf.com/en/posts/drag-and-drop-bookmarks/","summary":"\u003ch2 id=\"what-navshelf-is\"\u003eWhat NavShelf is\u003c/h2\u003e\n\u003cp\u003e\u003ca href=\"/app/\"\u003eNavShelf\u003c/a\u003e is a free, no-signup start page that runs in your browser. A nested folder tree on the left, link cards on the right: you put the dozen sites you actually use into your own categories and see them the moment you open a new tab — no feed, no pop-ups to dismiss. It ships in English, Simplified Chinese and Traditional Chinese, with light and dark themes and a tools column of browser-based utilities (Base64, JSON formatting, timestamps). Folders, links and search settings live in your browser; nothing is uploaded, and there is no account.\u003c/p\u003e","title":"Drag and Drop Bookmarks: Moving Folders and Reordering Links"},{"content":"What NavShelf is NavShelf is a free, no-signup start page that runs in your browser. A nested folder tree on the left, link cards on the right: you put the dozen sites you actually use into your own categories and see them the moment you open a new tab — no feed, no pop-ups to dismiss. It ships in English, Simplified Chinese and Traditional Chinese, with light and dark themes and a tools column of browser-based utilities (Base64, JSON formatting, timestamps). Folders, links and search settings live in your browser; nothing is uploaded, and there is no account.\nWhy bookmarks need a hierarchy Browser bookmarks are flat by default: one long list, plus a folder or two if you were feeling organised. Somewhere past a few hundred links you stop browsing and start searching — and searching only works if you already remember roughly what the link was called. If you cannot remember it, you effectively never saved it.\nA folder hierarchy solves a different problem: you do not need to remember, you only need to know where it is. The same way you find a two-year-old contract on a hard drive — not by searching the filename, but by clicking Client → 2026 → Contracts.\nNavShelf uses that file-manager model, and gives it enough depth to be useful: up to five folder levels.\nWhat the tree and the content area each do The interface splits in two, and each half has one job:\nThe folder tree on the left holds structure only, never links. Every node has a fixed colour chip, so sibling folders stay visually distinct and you start navigating by colour rather than by reading; folders that contain subfolders get a small triangle you can click to collapse or expand the whole branch. The content area on the right shows what is inside the current folder, split into two blocks — Folders and Links. The number on each folder card is the link count for that folder including everything in its subfolders, so you can see at a glance which branch is still empty. Click any node in the tree and the right side follows immediately. The breadcrumb in the toolbar keeps the full path in view.\nWhat each level should answer Five levels sounds like a lot until you realise the trick: each level should answer a different question. If two levels answer the same question, one of them is redundant.\nLevel The question it answers Example 1 Which part of my life is this? Work / Learning / Personal 2 Which project or subject? Client A / Website redesign 3 What kind of thing is it? Contracts / Mockups / Reference 4 Is there a time or version axis? 2026 / Old version 5 The rare long-lived subdivision Signed Most content belongs at level three. Levels four and five are not goals — they are for things that genuinely accumulate over years: contracts filed by year, mockups that get revised, receipts split by tax year.\nWhen to stop nesting: if a new folder is going to hold exactly one link, it should not be a folder. Put the link one level up. That single rule does more work than any depth guideline.\nA complete example My collection ├── Work level 1 │ ├── Client A level 2 │ │ ├── Contracts level 3 │ │ │ └── 2026 level 4 │ │ └── Mockups │ └── Website redesign ├── Learning │ ├── Programming │ └── Languages └── Personal ├── Home └── Travel To find the contract you signed with Client A last year: Work → Client A → Contracts → 2026. Four clicks, and every one of them is a category you already had in your head. No guessing which folder you used back then, no remembering a filename.\nIf you are still deciding what the top level should be, start with three broad folders — Work, Study, Life — and adjust once you have lived with them for a while.\nEveryday actions: create, collapse, jump Create a subfolder: right-click in the tree → New folder, or right-click any empty space in the content area. The new folder is created wherever you currently are. Collapse and expand: the triangle in front of a folder name folds its whole branch. Everything starts expanded — collapse the branches you rarely visit when the sidebar gets long. Jump around: click a folder name to go into it, click any level of the breadcrumb to go back to it, and click \u0026ldquo;My collection\u0026rdquo; at the start of the breadcrumb to return to the root from anywhere. On mobile: the breadcrumb collapses to a single line; tap \u0026ldquo;Show the full path\u0026rdquo; to expand it and pick a level. Three rules that protect the structure Five levels, hard stop. Try to create a subfolder while you are already five levels deep and the app refuses with \u0026ldquo;Maximum of 5 folder levels reached.\u0026rdquo; No dragging a folder into its own subfolder. The drop is blocked, because that would create a cycle and break the tree. Deleting cascades. Removing a folder removes every subfolder and link inside it, so you get a confirmation dialog first — the one prompt in the app worth reading carefully. FAQ How many top-level folders is right? Five to seven. The room you actually use is in levels two and three, so there is no need to ration the total.\nCan I move a folder with everything inside it? Yes — subfolders and links travel with it. If the move would push a branch past five levels, it is refused instead. The full set of drag-and-drop rules gets its own article.\nWhat is the number on a folder card? The total link count for that folder, including links inside its subfolders. A folder showing 12 may open to reveal only three links, with the other nine one level deeper.\nWhat if I delete the wrong folder? Deletion is immediate; there is no recycle bin. This is why the periodic Export JSON habit matters — it is the only way back to a previous state.\nFolders or tags? Anything you need to find again by position belongs in the tree. Things you only want to grab once, with no lasting structure, are better left in your browser\u0026rsquo;s temporary bookmarks.\nHow does this relate to the start page article? That one covers making NavShelf your browser\u0026rsquo;s start page (set up in 10 minutes); this one covers the tree at the centre of it. Build the skeleton first, fill it afterwards.\nStart with a small structure Do not design a perfect five-level hierarchy on day one — designs like that rarely survive three months. Create three top-level folders, add the links you genuinely open daily, and split a level further only when it actually overflows.\nOpen NavShelf, right-click to create your first subfolder, and let the structure grow out of your habits.\n","permalink":"https://navshelf.com/en/posts/five-level-folder-tree/","summary":"\u003ch2 id=\"what-navshelf-is\"\u003eWhat NavShelf is\u003c/h2\u003e\n\u003cp\u003e\u003ca href=\"/app/\"\u003eNavShelf\u003c/a\u003e is a free, no-signup start page that runs in your browser. A nested folder tree on the left, link cards on the right: you put the dozen sites you actually use into your own categories and see them the moment you open a new tab — no feed, no pop-ups to dismiss. It ships in English, Simplified Chinese and Traditional Chinese, with light and dark themes and a tools column of browser-based utilities (Base64, JSON formatting, timestamps). Folders, links and search settings live in your browser; nothing is uploaded, and there is no account.\u003c/p\u003e","title":"Five Levels of Folders: Managing Bookmarks Like Files"},{"content":"What NavShelf is NavShelf is a no-signup start page that runs in your browser — some people call it a dashboard or a personal home page. A nested folder tree on the left, link cards on the right: you put the dozen sites you actually use into your own categories and see them the moment the browser opens, with no feed and no pop-up to dismiss. Beyond bookmarks it includes three interface languages, light and dark themes, and a tools column of browser-based utilities (Base64, JSON formatting, timestamps). Folders, links and search settings all live in your own browser: nothing is uploaded, and no account is needed.\nThis post covers one thing: how to set it up in ten minutes and make it the first page you see.\nUse the hosted version — just open it The hosted version is the main one: open the URL and you can start building folders and adding links. No download, no install, no account. New tools and interface changes ship there first, so there are no files to replace by hand.\nOne thing worth being precise about: \u0026ldquo;hosted\u0026rdquo; describes where the page is served from, not where your bookmarks go. On data ownership it is no different from running the app as a local file — neither stores anything on a server.\nStep 1: Build the folder skeleton (~3 minutes) The page opens with a search area and folder tree on the left, a content area on the right — no feed, no card to dismiss.\nRight-click anywhere in the empty area or on a folder and you get four actions: New folder, New link, Edit, Delete. The whole app works from that menu — nothing else to memorise.\nStart with four to six top-level folders — Work, Learning, Tools, Read Later. Folders nest up to five levels deep, but depth is not the goal: if a folder holds exactly one link, it probably should not be a folder.\nStep 2: Add your first links (~3 minutes) Right-click → New link. Fill in the title and URL, then the optional description. It shows on the card, so writing down when you use the link beats writing \u0026ldquo;official site\u0026rdquo; — three months from now, that sentence is how you find it again.\nOne piece of advice: do not migrate hundreds of bookmarks at once. Add the eight to ten links you genuinely open every day, live with the page for a week, then consider a second batch. Big migrations tend to have exactly one enthusiastic day.\nDrag and drop works too: links reorder inside a folder, and folders can be dragged into other folders. Two moves are blocked — going past five levels, and dropping a folder into one of its own subfolders — with a warning while you drag.\nStep 3: Make it your start page (~2 minutes) Chrome: Settings → On startup → Open a specific page or set of pages → Add a new page → https://navshelf.com/app/ Edge: Settings → Start, home, and new tabs → Start page → Add a new page Firefox: Settings → Home → Homepage and new windows → Custom URLs Safari (macOS): Settings → General → Homepage One caveat up front: browsers do not offer a built-in setting for a custom new tab page. Replacing the new tab takes an extension such as New Tab Redirect; if you would rather not install one, \u0026ldquo;open on startup\u0026rdquo; plus keeping the dashboard first on your bookmarks bar covers most of the benefit.\nStep 4: Adjust three settings (~2 minutes) Theme: the Theme button switches between day and night, and the whole colour scheme follows. Language: English, Traditional Chinese and Simplified Chinese are included; switching applies immediately and is remembered. Search engines: Google, Bing and Baidu come preloaded. Click the search button for the search overlay, then use \u0026ldquo;Search engines\u0026rdquo; to add your own: a name plus a URL template where {query} stands for your search terms. Internal wikis and site-specific searches work this way too; clicking outside closes the overlay. Where your data lives Bookmarks are kept in your browser\u0026rsquo;s localStorage and never uploaded. Two consequences: switching browsers, switching devices or clearing browser data will not bring them along — and they cannot vanish because some company shut a service down, because they were never on anyone else\u0026rsquo;s servers.\nSo the one habit worth building is a periodic export. About dialog → Export JSON gives you one file with folders, links, search engines and interface settings. On a new device, Import JSON restores it; a malformed file reports an error and leaves your existing data untouched.\nBonus: the Tools column There is one more switch in the toolbar: Tools, off by default. Turn it on and the content area becomes a built-in directory — Development, Design, AI, Productivity and Writing, with links to the site\u0026rsquo;s own utilities. It is read-only and never appears in an export. Click it again to return to My collection.\nFAQ Do I still need the browser bookmarks bar? They can coexist. Keep the bar for temporary saves and this week\u0026rsquo;s project; keep the dashboard for the links you use month after month.\nIf I open it in another browser, are my bookmarks there? No. The data belongs to the browser you created it in — export to JSON first, then import on the other side.\nDoes it work on a phone? Yes. The layout adapts and the sidebar collapses. Open the same URL on your phone; bookmarks are stored in that device\u0026rsquo;s browser.\nIs ten minutes realistic? For a minimum viable setup, yes: folders, a dozen links, one settings change to make it your start page. The rest is a matter of whether you actually want to see it every morning.\nStart now Open NavShelf, create one folder, add three links, and set it as your start page. Tomorrow morning the first thing you see will be your own entry points instead of someone else\u0026rsquo;s feed.\n","permalink":"https://navshelf.com/en/posts/personal-start-page-guide/","summary":"\u003ch2 id=\"what-navshelf-is\"\u003eWhat NavShelf is\u003c/h2\u003e\n\u003cp\u003e\u003ca href=\"/app/\"\u003eNavShelf\u003c/a\u003e is a no-signup start page that runs in your browser — some people call it a dashboard or a personal home page. A nested folder tree on the left, link cards on the right: you put the dozen sites you actually use into your own categories and see them the moment the browser opens, with no feed and no pop-up to dismiss. Beyond bookmarks it includes three interface languages, light and dark themes, and a tools column of browser-based utilities (Base64, JSON formatting, timestamps). Folders, links and search settings all live in your own browser: nothing is uploaded, and no account is needed.\u003c/p\u003e","title":"Turn Your Browser Start Page Into a Personal Dashboard in 10 Minutes"},{"content":"Two bills, two different shapes A hosting bill is capacity. You add CPU, bandwidth or storage, and the meter follows the traffic curve. Once you have seen a month, you can predict the next one within a few percent.\nA token bill is behaviour. Two teams with identical traffic can differ by 20× because one sends 12,000 tokens of retrieved context per request and the other caches a 400-token system prompt and sends nothing else. Same users, same features, wildly different invoices.\nThat is not a pricing trick, it is the shape of the meter: you pay per token, and the number of tokens is a design decision.\nThe three effects that make spend jumpy 1. Input usually dwarfs output — and they are priced differently. In most chat and retrieval features, input tokens outnumber output tokens by five to twenty times. Output tokens are typically several times more expensive per token than input. So \u0026ldquo;we only generate a short answer\u0026rdquo; tells you nothing about the cost.\n2. Cached input has its own rate. Providers offer a cheaper rate for input that repeats between calls — a system prompt, a stable document, a long instruction block. Ignoring caching means paying full price for the same 3,000 tokens on every request.\n3. Context per request swings by an order of magnitude. A summarisation job that appends conversation history every turn re-sends the whole transcript each time. Cost grows faster than the number of turns: turn 20 is expensive because turns 1 to 19 are on the bill again.\nRetries and tool calls add a fourth multiplier that is invisible in every usage chart: a failed call that is retried is billed twice, and an agent that calls four tools per turn is billed five times per turn.\nThe levers, in the order they pay off Teams usually reach for the model dropdown first. That is rarely the biggest lever. Try these in order:\nTrim the context. Cut retrieved documents that do not change the answer, cap the history you replay, and cache the part that never changes. This is usually the largest single win. Cap the output. Ask for the shape you want (\u0026ldquo;three bullets, no preamble\u0026rdquo;) instead of a generous token limit. The model generating 900 tokens of politeness is on your invoice. Batch what is not urgent. Nightly enrichment, backfills and evaluation runs can often take a slower, discounted path. Then choose the model. Downgrading a summariser to a smaller model is a real saving — but it is a saving applied to a number that the first three steps should already have reduced. Estimate before you ship You need two numbers per request: input tokens and output tokens. If the feature exists, read them from the API response — do not estimate. If it does not exist yet, you need a guess:\nmonthly cost ≈ requests/day × 30 × (input ÷ 1M × rate_in + output ÷ 1M × rate_out) Two traps when guessing: averages hide the expensive request (a p95 request with a long document can cost 30× the median, and it is the one that sets your bill), and multi-turn features make the average meaningless because every turn carries the whole history.\nThe AI cost calculator does that arithmetic with an editable rate table: paste a usage log to get a per-model total, or describe a workload (tokens per request, requests per day, cache hit rate, batch discount) to get per-request, daily, monthly and yearly figures. The comparison tab runs the same workload across every rate you entered, which is the fastest way to see whether switching models is even worth the migration.\nSubscription or per-token? This is a volume question, not a plan preference. If your measured API cost per month is below a subscription price, the subscription is a convenience you are paying extra for; if it is far above, the plan usually wins — until you hit its usage limits, which is a separate constraint that the break-even number does not capture.\nThe useful output is the break-even volume: given your own per-request cost, how many requests per day must you exceed before a flat plan wins. Compare that with your actual traffic, and the decision stops being a feeling.\nOne honest caveat about the numbers Prices change, plans change, and a calculator that ships with a hard-coded price list is wrong the moment someone updates a pricing page. So the tool ships with example placeholders and asks you to enter your own rates from your invoice; your edits stay in your browser and nothing is fetched, uploaded or cached on a server.\nThe arithmetic is the part that can be exactly right. The rates are the part only your account can answer.\nIf AI output also feeds reports, two related tools cover the neighbouring problems: the AI number checker flags figures with no traceable source, and the guardrails generator writes the rules file and permission lists that keep a coding agent inside its lane.\n","permalink":"https://navshelf.com/en/posts/ai-cost-predictable/","summary":"\u003ch2 id=\"two-bills-two-different-shapes\"\u003eTwo bills, two different shapes\u003c/h2\u003e\n\u003cp\u003eA hosting bill is capacity. You add CPU, bandwidth or storage, and the meter follows the traffic curve. Once you have seen a month, you can predict the next one within a few percent.\u003c/p\u003e\n\u003cp\u003eA token bill is behaviour. Two teams with identical traffic can differ by 20× because one sends 12,000 tokens of retrieved context per request and the other caches a 400-token system prompt and sends nothing else. Same users, same features, wildly different invoices.\u003c/p\u003e","title":"Why Your AI Bill Is Harder to Predict Than Your Hosting Bill"},{"content":"The failure is social before it is technical The pattern repeats across teams. Someone turns on an agent, watches it work, and then one day the read-only dropdown is gone, or the agent keeps editing while they are still reviewing the first diff. An hour later the branch has forty changed files, half of them unrelated, and nobody can say why src/legacy/ was touched.\nThe complaint that follows is always the same shape: I no longer know this code, or how it works.\nThat is not really a bug in the agent. It is a policy that was never written down, being discovered one incident at a time.\nA better prompt does not fix this The instinct is to write a longer prompt: \u0026ldquo;do not modify unrelated files, do not delete tests, do not touch the deploy config.\u0026rdquo; It works for the rest of the session and then evaporates.\nA prompt is per-session and per-person. A file in the repository is read by every session, every teammate and every agent you switch to — and, crucially, it can be reviewed like code. The team argues about the rules once, in a pull request, instead of every time an agent surprises somebody.\nFour guardrails, in the order they pay off 1. A rules file. AGENTS.md (or CLAUDE.md, or whatever your agent reads from the project root) states what \u0026ldquo;done\u0026rdquo; means: the commands that verify a change, the paths that are off limits, and the things the agent must never do on its own. Keep it short enough that a human reads it too.\n2. Permission lists. Three lists, and the shape matters more than the syntax:\nList What belongs there Example allow read-only inspection, plus the test/lint/build commands the project already uses Bash(pnpm test:*) ask anything that rewrites history, installs packages or reaches the network Bash(git push:*) deny secrets, production config, deployment pipelines, destructive shell commands Read(./.env) Anything not listed should fall back to asking a human. The failure mode to avoid is a permission set so permissive that nobody reads it.\n3. Protected paths. Secrets, production configuration, database migrations and CI definitions should be named explicitly, both in the rules file and in .gitignore. This turns a judgement call into a mechanical check, which is the only kind of check that survives a deadline.\n4. A pre-merge review checklist. Guardrails cannot judge design, so the checklist covers what they cannot: is the diff the size the task deserved, were tests deleted or loosened, was error handling swallowed, does every number in the summary trace back to a command output.\nThe guardrails generator produces all four from a short form — commands, allowed paths, protected paths, and the rules you want enforced — and switches language with the page.\nWhat guardrails do not do It is worth being blunt about the limits, because overclaiming is how teams end up trusting the wrong thing:\nThey do not review design. A change can be in scope, pass every test and still make the architecture worse. They do not make the agent honest, only constrained. An agent that cannot push can still write the wrong thing locally. They do not replace git discipline. Branch protection and small commits remain the real rollback mechanism. They do not stop a determined human. Someone will eventually edit the deny list to get unblocked — that is why the config is worth reviewing. Treat them as blast-radius control: the point is that a mistake costs a revert, not a weekend.\nMake it a habit The most useful ritual is boring: after every incident where an agent did something surprising, add one line to the rules file and one rule to the deny list. Within a month the file describes how your team actually works, and new agents inherit it for free.\nTwo supporting habits help: ask for the working, not just the answer (\u0026ldquo;list the files you changed and why\u0026rdquo;), and verify before the meeting rather than after — a check that takes minutes beats a correction email that takes hours.\nIf your reports also contain numbers the agent produced, the AI number checker covers the other half of the same problem: figures that look right and have no source.\n","permalink":"https://navshelf.com/en/posts/ai-agent-guardrails/","summary":"\u003ch2 id=\"the-failure-is-social-before-it-is-technical\"\u003eThe failure is social before it is technical\u003c/h2\u003e\n\u003cp\u003eThe pattern repeats across teams. Someone turns on an agent, watches it work, and then one day the read-only dropdown is gone, or the agent keeps editing while they are still reviewing the first diff. An hour later the branch has forty changed files, half of them unrelated, and nobody can say why \u003ccode\u003esrc/legacy/\u003c/code\u003e was touched.\u003c/p\u003e\n\u003cp\u003eThe complaint that follows is always the same shape: \u003cem\u003eI no longer know this code, or how it works.\u003c/em\u003e\u003c/p\u003e","title":"AI Coding Agents Need Guardrails, Not More Trust"},{"content":"The failure mode nobody notices in time Ask an assistant to summarise a CI pipeline and you get a tidy paragraph: the lint stage took 42 seconds, the build 3.5 minutes, the whole pipeline 16.4 minutes, 18% faster than last week. It reads like a report. Two hours later someone notices the build job never took 3.5 minutes, and the failure rate was copied from a different week.\nNothing about the paragraph looked suspicious. That is the entire problem: a fabricated number and a real number are typographically identical.\nWhy models do this An assistant writing a summary is not looking up rows in your export. It is producing the most plausible next tokens, and plausible is not the same as sourced. Two failure patterns dominate:\nFabrication — a number invented because a number belongs there. \u0026ldquo;Failure rate 2.4%\u0026rdquo; appears because failure rates belong in pipeline summaries, not because 2.4% exists anywhere. Drift — a real number that changed on the way: rounded twice, converted from seconds to minutes badly, or lifted from a neighbouring row, week or project. Both survive review, because review checks the prose, not the arithmetic.\nA five-minute workflow that catches most of it 1. Keep the raw export, not the summary. Give the assistant the CSV, the log, the SQL result. If the source itself is already a summary, there is nothing left to verify against.\n2. Treat every number as a claim with a required citation. The rule that makes this practical: no number in a report until you can point at the row it came from. This is the same discipline as a source citation in journalism, applied to arithmetic.\n3. Check units before you check values. 1500 ms, 1.5 s and 0.025 min are the same duration. Most \u0026ldquo;wrong\u0026rdquo; numbers in AI summaries are unit or rounding artefacts, and most genuine fabrications hide behind that noise.\n4. Keep a tolerance. A figure rounded to three significant digits in the summary will not match the raw 4183000 exactly. Allow a small relative tolerance (1% is a reasonable default) and treat anything outside it as unverified rather than wrong.\n5. Separate \u0026ldquo;unverified\u0026rdquo; from \u0026ldquo;wrong\u0026rdquo;. An unverified number has no source in what you pasted. It might be right and simply come from data you did not include — but until you find that source, it cannot go into a report.\nThe AI Number Checker automates steps 3 to 5: paste the AI answer and the source, and it extracts every number, normalises units and multipliers, matches each one against the source, and flags what it cannot trace — with the source line as evidence.\nWhat to do with a flagged number Work through the flagged list in order of impact, and classify each one:\nFinding Typical cause Action No match at all, plausible magnitude Fabrication Delete it or ask for the source Off by a few percent Rounding, different week, different scope Confirm the reference period before publishing Matches only after unit conversion Summarisation artefact Fine — keep the converted value, state the unit Matches a nearby but different row Row drift Correct it and re-check the neighbours Where this approach still fails Honesty matters more than the pitch: a checker verifies traceability, not truth.\nCorrect numbers can support a wrong conclusion — the classifier still needs a human. If the source you pasted is stale, wrong or itself generated, every check passes. Screenshots and chat summaries work badly as sources, because the numbers you want may have been rounded away before you copied them. Numbers that exist only in a system you did not paste stay unverified, which is correct behaviour but not a verdict. Use the checker as a fast first pass that removes the expensive failure mode — a fabricated figure that reaches a stakeholder — and keep judgement for the argument.\nMake it a habit, not a rescue Two practices make this cheap enough to sustain:\nAsk for the working, not just the answer. \u0026ldquo;Show the pipeline commands and raw numbers you used\u0026rdquo; produces a checkable answer most of the time. Verify before the meeting, not after. Verification is minutes; the correction email after a fabricated metric has shipped is hours. The checker runs entirely in your browser — internal reports, CI logs and financial figures never leave your machine — and the JSON formatter is a useful stop on the way in when the source arrives as an API dump.\n","permalink":"https://navshelf.com/en/posts/verify-ai-numbers/","summary":"\u003ch2 id=\"the-failure-mode-nobody-notices-in-time\"\u003eThe failure mode nobody notices in time\u003c/h2\u003e\n\u003cp\u003eAsk an assistant to summarise a CI pipeline and you get a tidy paragraph: the lint stage took 42 seconds, the build 3.5 minutes, the whole pipeline 16.4 minutes, 18% faster than last week. It reads like a report. Two hours later someone notices the build job never took 3.5 minutes, and the failure rate was copied from a different week.\u003c/p\u003e\n\u003cp\u003eNothing about the paragraph looked suspicious. That is the entire problem: a fabricated number and a real number are typographically identical.\u003c/p\u003e","title":"How to Check Whether an AI Assistant Made Up the Numbers in Its Answer"},{"content":"Two forces, one number Your assets grow from exactly two sources: money you add and returns on money already there. Early on, the first dominates. Later, the second takes over — and that crossover is where most long-term wealth actually comes from.\nSimple interest grows linearly: 100 at 7% earns 7 every year, forever. Compounding grows geometrically, because each year\u0026rsquo;s return is calculated on a bigger base. That single difference is the whole story.\nThe formula this calculator uses end of year = start of year × (1 + return rate) + money added Two modelling choices are worth being explicit about, because they change the answer:\nReturns are calculated on the balance at the start of the year — that is what makes it compound. Money added during the year does not earn a return until the following year. This is the conservative assumption. If you invest monthly, reality will be slightly better than the projection. You can run the numbers yourself in the asset growth calculator — everything happens in your browser.\nA worked example: 10 + 10 a year at 7% Start with 10 (think: 10k), add 10 every year, earn 7% a year.\nYear Start of year Return Added End of year 1 10.00 0.70 10.00 20.70 2 20.70 1.45 10.00 32.15 3 32.15 2.25 10.00 44.40 4 44.40 3.11 10.00 57.51 5 57.51 4.03 10.00 71.53 6 71.53 5.01 10.00 86.54 7 86.54 6.06 10.00 102.60 8 102.60 7.18 10.00 119.78 9 119.78 8.38 10.00 138.16 10 138.16 9.67 10.00 157.84 After ten years you contributed 100 and ended with 157.84 — so 47.84, just under a third of the final balance, came from returns rather than your own money.\nThe interesting part: year 11 In year 1, returns contributed 0.70 against 10 of deposits — about 7% of the growth. By year 11, the annual return (11.05) exceeds the whole year\u0026rsquo;s contribution (10.00).\nThat is the moment compounding stops being a rounding error and starts being the main engine. Everything after it is a different kind of game: your portfolio grows even in years when you add nothing.\nThe rule of 72 A useful mental shortcut: divide 72 by the annual return to get the approximate doubling time.\nReturn Doubling time 3% ~24 years 7% ~10.3 years 10% ~7.2 years It is approximate, and it ignores additions — but it calibrates your intuition fast. A \u0026ldquo;safe\u0026rdquo; 3% and an aggressive 10% are not 3× apart in outcome; they are decades apart.\nSmall rate differences are enormous over long horizons Same inputs (start 10, add 10 a year), 20 years, only the return rate differs:\nReturn Final assets Contributed From returns 5% 357.19 200.00 157.19 10% 640.02 200.00 440.02 Same effort, nearly double the outcome. This is why fees of \u0026ldquo;just 1%\u0026rdquo; are not a detail over 30-year horizons — they are a permanent tax on the compounding base.\nInflation is the assumption people forget Run 30 years with 10 a year:\nAssumption Final assets 10% nominal return 1,819.43 7% (10% minus ~3% inflation) 1,020.73 The \u0026ldquo;real\u0026rdquo; number is roughly half. If you want to know what the money will actually buy, subtract expected inflation from the return before you enter it.\nFour assumptions that quietly break projections Using nominal returns and calling it wealth. Subtract inflation. Ignoring taxes and fees. In taxable accounts, the drag is permanent. Assuming a smooth return. Markets do not deliver 7% every year; a 30% drawdown in year 3 changes behaviour far more than the math suggests. Forgetting that contributions stop. Job loss, childcare, a house purchase — most people\u0026rsquo;s savings rate is not constant for 30 years. None of that makes the projection useless. It makes it a best case, which is exactly how you should read it.\nHow to use the calculator well Enter your current assets, not your goal. Use a conservative return (5–6% real is a common planning figure). Add savings growth if you expect raises. Run it twice — once at 5%, once at 8% — and plan against the lower one. Re-run it once a year. The projection is a compass, not a promise. Try it: Asset Growth Calculator. It runs entirely in your browser, stores nothing, and works offline.\nFAQ What is a realistic return rate? Historically, broad equity indices have returned roughly 7–10% a year before inflation and taxes, with large drawdowns along the way. For planning, many people use 5% real. Your own number should reflect your actual asset mix.\nIs the return calculated monthly or yearly? Yearly, on the balance at the start of each year. Monthly investing would do slightly better; annual compounding keeps the model readable.\nShould I include my pension? Yes — add its current value to the starting balance and blend its expected return into the rate.\nDoes this account for withdrawing money later? Not directly. Run the accumulation phase, then use the final number as the starting point for a withdrawal projection.\nRelated reading Unix timestamps explained — for reading the dates in your statements How to format and validate JSON All NavShelf tools This article is educational and is not investment advice. Return assumptions are yours to choose and will determine the result.\n","permalink":"https://navshelf.com/en/posts/compound-interest-explained/","summary":"\u003ch2 id=\"two-forces-one-number\"\u003eTwo forces, one number\u003c/h2\u003e\n\u003cp\u003eYour assets grow from exactly two sources: \u003cstrong\u003emoney you add\u003c/strong\u003e and \u003cstrong\u003ereturns on money already there\u003c/strong\u003e. Early on, the first dominates. Later, the second takes over — and that crossover is where most long-term wealth actually comes from.\u003c/p\u003e\n\u003cp\u003eSimple interest grows linearly: 100 at 7% earns 7 every year, forever. Compounding grows geometrically, because each year\u0026rsquo;s return is calculated on a bigger base. That single difference is the whole story.\u003c/p\u003e","title":"Compound Interest Explained: The Math Behind Long-Term Asset Growth"},{"content":"The question everyone asks Most calculators tell you what you will have. The question people actually ask is the other direction: \u0026ldquo;I want to reach a number by a date — how much do I need to put aside each month?\u0026rdquo;\nThat is a solvable equation, and the answer is often more encouraging than people expect, because the growth does part of the work.\nTry it yourself in the savings goal calculator while reading.\nStart with the baseline: what 0% looks like Goal: 1,000,000. Already saved: 50,000. Time frame: 10 years.\nWith no return at all, you need the remaining 950,000 spread over 120 months:\n950,000 ÷ 120 = 7,916.67 per month That is the \u0026ldquo;pure discipline\u0026rdquo; number. Every bit of return below simply reduces it.\nThe return rate does a surprising share of the work Same goal, same 10 years, same starting balance — only the assumed return changes:\nAnnual return Required per month Total you deposit From returns 0% 7,916.67 950,000.00 0.00 3% 6,673.27 800,792.49 149,207.51 5% 5,909.56 709,146.87 240,853.13 8% 4,859.45 583,134.58 366,865.42 At 5%, you contribute about 709,000 instead of 950,000 — a quarter of the goal is paid for by growth. At 8% it is nearly 40%.\nBut do not treat the rate row as a menu. A higher assumed return means more risk and a wider range of outcomes. The honest planning move is to use a conservative number (5% or even lower, net of fees and inflation) and be pleasantly surprised.\nTime is the lever with the most power Same 1,000,000 goal, same 50,000 start, same 5% return:\nTime frame Required per month Total deposited 5 years 13,761.01 825,660.32 10 years 5,909.56 709,146.87 20 years 2,102.91 504,699.09 Going from 10 to 20 years cuts the required monthly amount from 5,910 to 2,103 — less than half. And you end up depositing less overall, because compounding has twice as long to work.\nThis is the single most useful insight on the page: if the required amount feels impossible, the answer is usually the deadline, not the budget.\nThe other direction: how long will my current rate take? If you already know what you can save, the calculator answers the timing question instead. Goal 1,000,000, start 50,000, 5% return:\nMonthly saving Time to goal Total deposited 3,000 16 years 1 month 582,000 5,000 11 years 4 months 680,000 8,000 7 years 11 months 760,000 Notice the pattern: saving more is faster, but the total you deposit goes up (582k → 680k → 760k), because a slower plan has more time to earn. Speed has a price; patience pays part of the bill.\nYour starting balance matters more than it feels like Same 3,000 a month, same 5% return, different starting points:\nAlready saved Time to 1,000,000 0 17 years 5 months 50,000 16 years 1 month 200,000 12 years 6 months 200,000 upfront removes almost five years. Money already invested is doing work every single month, whether or not you add anything.\nA practical routine Pick a conservative return. Net of fees, and after inflation if you want today\u0026rsquo;s purchasing power. Round the monthly number up, not down. The difference between 5,900 and 6,000 is small monthly and large after a decade. Automate the transfer on payday. A savings plan that depends on willpower is a plan with a bug. Re-run it once a year. A raise, a bonus or a market drop all change the answer. Keep an emergency fund outside the plan. Selling investments to cover a broken boiler is how long-term plans die. FAQ Should I use nominal or real returns? Use whatever matches the goal. If the goal is \u0026ldquo;1,000,000 in today\u0026rsquo;s money\u0026rdquo;, use a real return (return minus inflation). Mixing a nominal return with a real goal overstates progress.\nWhat if my return assumption is wrong? The plan degrades gracefully — you simply save a bit longer or contribute a bit more. What breaks plans is not a wrong assumption, it is stopping entirely.\nDoes the order of deposits matter? Yes, slightly. This calculator assumes deposits at the end of each month; depositing at the start earns one extra month of growth each time.\nAre taxes included? No. For taxable accounts, use a lower net return.\nRelated reading Compound interest explained — the forward direction of the same maths Mortgage math explained — the same formulas, from the borrower\u0026rsquo;s side All NavShelf tools This article is educational and is not financial advice. Return assumptions are yours to choose and will determine the result.\n","permalink":"https://navshelf.com/en/posts/savings-goal-explained/","summary":"\u003ch2 id=\"the-question-everyone-asks\"\u003eThe question everyone asks\u003c/h2\u003e\n\u003cp\u003eMost calculators tell you what you \u003cem\u003ewill\u003c/em\u003e have. The question people actually ask is the other direction: \u003cstrong\u003e\u0026ldquo;I want to reach a number by a date — how much do I need to put aside each month?\u0026rdquo;\u003c/strong\u003e\u003c/p\u003e\n\u003cp\u003eThat is a solvable equation, and the answer is often more encouraging than people expect, because the growth does part of the work.\u003c/p\u003e\n\u003cp\u003eTry it yourself in the \u003ca href=\"/tools/savings-goal-calculator/\"\u003esavings goal calculator\u003c/a\u003e while reading.\u003c/p\u003e","title":"How Much Should You Save Each Month? Work the Goal Backwards"},{"content":"The number that surprises everyone Borrow 1,000,000 at 4.5% over 30 years. The monthly payment is 5,066.85. Multiply it out and you pay back 1,824,067 — of which 824,067 is interest, about 82% of the amount you borrowed.\nNow the part that really catches people: in the first five years you hand over 304,011, but only 88,421 of it reduces the loan. The other 215,590 is interest. Five years of payments, and the balance has barely moved.\nThat is not a trick or a trap — it is what declining-balance interest looks like when the term is long. Understanding the shape of it is the difference between choosing a loan deliberately and choosing one by monthly payment alone.\nYou can run your own numbers in the loan calculator while reading this.\nTwo repayment structures Annuity (equal instalment, 等额本息). The monthly payment never changes. Early payments are mostly interest; later payments are mostly principal. Easy to budget, more total interest.\nEqual principal (等额本金). The principal repaid each month is constant, so interest falls every month and so does the payment. The first payment is the highest, the last is the lowest, and total interest is lower.\nThe formula Annuity: M = P × r × (1+r)^n / ((1+r)^n − 1) Equal principal: principal = P / n, interest = balance × r Where P is the principal, r the monthly rate (annual ÷ 12) and n the number of months. M is the fixed monthly payment for an annuity loan.\nTerm matters more than the rate Same 1,000,000 at 4.5%, only the term changes:\nTerm Monthly payment Total interest Total repaid 10 years 10,363.84 243,660.91 1,243,660.91 20 years 6,326.49 518,358.50 1,518,358.50 30 years 5,066.85 824,067.12 1,824,067.12 Stretching from 20 to 30 years cuts the monthly payment by 20% but adds 305,709 in interest. That is the real price of the extra ten years.\nThe rate: small changes, large money Rate Monthly payment Total interest 3.5% 4,490.45 616,560.88 4.5% 5,066.85 824,067.12 5.5% 5,677.89 1,044,040.40 One percentage point changes the monthly payment by about 576 — and the total interest by more than 219,000 over 30 years. When comparing offers, negotiate the rate before you negotiate anything else.\nAnnuity vs equal principal, on the same loan Annuity Equal principal First payment 5,066.85 6,527.78 Last payment 5,066.85 2,788.19 Total interest 824,067.12 676,875.00 Equal principal saves 147,192 in interest — but asks for 1,461 more in the first month. Whether that trade is worth it depends on your cash flow, not on the maths: if the higher payment is uncomfortable, the \u0026ldquo;cheaper\u0026rdquo; option is the wrong one.\nWhat an extra payment actually does Add 2,000 a month to the same 30-year annuity loan:\nWithout extra With 2,000/month Term 30 years 16 years 11 months Total interest 824,067.12 428,101.16 You finish 157 months early and save roughly 396,000 in interest. Two reasons it works so well:\nEvery extra goes entirely to principal, so it also cancels all future interest on that amount. It compounds in reverse: the earlier the extra, the more future interest it removes. This is why \u0026ldquo;pay a little extra from year one\u0026rdquo; beats \u0026ldquo;pay a lot extra in year twenty\u0026rdquo;.\nFive mistakes worth avoiding Choosing by monthly payment only. The cheapest month is often the most expensive loan. Ignoring the total. Always look at total interest, not just the instalment. Forgetting escrow. Property tax and insurance are usually collected on top; they can add 20–30% to the real monthly outflow. Assuming the rate is fixed. For adjustable-rate products, model the worst realistic rate. Overlooking early-repayment terms. Some loans charge a fee, which can wipe out the benefit. FAQ Which is better, annuity or equal principal? Equal principal costs less in total interest; annuity is easier on early cash flow. If you can afford the higher first payment and plan to keep the loan, equal principal wins on cost.\nIs a shorter term always better? On cost, yes. On flexibility, no — a shorter term means a higher mandatory payment. Many people take the longer term and pay it down faster voluntarily, which keeps the option to slow down if life changes.\nHow much does one extra payment a year help? Meaningfully, and it costs almost nothing to arrange. Model it in the calculator with the annual amount divided by twelve.\nDoes this include taxes and insurance? No. The calculator models principal and interest only.\nRelated reading Compound interest explained — the same maths from the saver\u0026rsquo;s side All NavShelf tools This article is educational and is not financial advice. Rates and terms vary by lender and country — always read the actual contract.\n","permalink":"https://navshelf.com/en/posts/mortgage-math-explained/","summary":"\u003ch2 id=\"the-number-that-surprises-everyone\"\u003eThe number that surprises everyone\u003c/h2\u003e\n\u003cp\u003eBorrow 1,000,000 at 4.5% over 30 years. The monthly payment is \u003cstrong\u003e5,066.85\u003c/strong\u003e. Multiply it out and you pay back \u003cstrong\u003e1,824,067\u003c/strong\u003e — of which \u003cstrong\u003e824,067 is interest\u003c/strong\u003e, about 82% of the amount you borrowed.\u003c/p\u003e\n\u003cp\u003eNow the part that really catches people: in the \u003cstrong\u003efirst five years\u003c/strong\u003e you hand over 304,011, but only \u003cstrong\u003e88,421\u003c/strong\u003e of it reduces the loan. The other \u003cstrong\u003e215,590 is interest\u003c/strong\u003e. Five years of payments, and the balance has barely moved.\u003c/p\u003e","title":"Mortgage Math: How Monthly Payments, Interest and Amortization Really Work"},{"content":"Base64 encoder/decoder\nTwo encodings, two different jobs Both Base64 and URL encoding replace \u0026ldquo;unsafe\u0026rdquo; characters with safe ones. That surface similarity is why they get mixed up — and why people sometimes apply both when one would do, or apply the wrong one entirely.\nThe short version:\nBase64 makes binary data survive a text-only channel. Percent-encoding makes text survive a URL. What each one actually does Base64 rewrites bytes using a 64-character alphabet (A–Z a–z 0–9 + /, plus = padding). Every 3 bytes become 4 characters, so output grows by about 33%.\nMan → TWFu Hello → SGVsbG8= Percent-encoding replaces characters that are unsafe in a URL with % plus two hex digits representing the UTF-8 byte.\na b → a%20b 书签管理 → %E4%B9%A6%E7%AD%BE%E7%AE%A1%E7%90%86 a\u0026amp;b → a%26b The key difference Base64 Percent-encoding Purpose Move binary through text channels Keep text safe inside a URL Alphabet 64 fixed characters Any byte, as %XX Size change +33% Varies wildly Reversible by anyone Yes Yes Provides security No No Typical home JSON fields, data URIs, MIME, JWT Query strings, path segments When to use Base64 Embedding a small image in CSS or HTML as a data URI Sending a file or signature inside a JSON payload Email attachments via MIME Building an Authorization: Basic header Any JWT header or payload segment Reach for the Base64 encoder/decoder when you need to convert in either direction without installing anything.\nWhen to use percent-encoding A query parameter value that contains \u0026amp;, =, #, ?, a space, or non-ASCII text A filename or slug placed in a path Passing a URL as a parameter of another URL (this is where double-encoding bugs come from) The URL encoder/decoder uses encodeURIComponent, which is the behaviour you want for parameter values.\nThe three mistakes that cause most bugs 1. Using Base64 where percent-encoding is needed. A Base64 string contains + and /. Put it directly into a query string unencoded and the + will be read as a space by many parsers. Fix: use the URL-safe alphabet (- and _), or percent-encode the result.\n2. Double encoding. Encoding an already-encoded string produces something that still looks valid but means nothing. The tell-tale sign is %25 at the start of a percent-encoded payload (%25 is %).\n3. Treating either as security. Both are fully reversible with no key. If you need confidentiality, encrypt then encode.\nWhich one does my case need? Ask one question: is the destination a URL or a text container?\nA URL (query string, path) → percent-encoding A text container (JSON, HTML attribute, email body, CSS) → Base64 if the payload is binary; plain text otherwise Try both side by side Base64 encoder / decoder — text and binary, UTF-8 safe, runs offline URL encoder / decoder — query parameters and paths Base64 encoding explained — the longer guide URL encoding explained — percent-encoding in depth FAQ Can I Base64 something and then put it in a URL? Yes, but percent-encode the Base64 first (or use Base64URL). Otherwise +, / and = will cause trouble.\nIs percent-encoding ever longer than Base64? Often yes — non-ASCII text expands to 9 characters per CJK character in UTF-8 encoding, far more than Base64\u0026rsquo;s 33% overhead.\nDoes either one compress data? Neither. Compress first (gzip/Brotli), then encode.\nWhich one should I use for a password? Neither. Use a password manager and real encryption — encoding is not protection.\n","permalink":"https://navshelf.com/en/posts/base64-vs-url-encoding/","summary":"\u003cp\u003e\u003ca href=\"/tools/base64/\"\u003eBase64 encoder/decoder\u003c/a\u003e\u003c/p\u003e\n\u003ch2 id=\"two-encodings-two-different-jobs\"\u003eTwo encodings, two different jobs\u003c/h2\u003e\n\u003cp\u003eBoth Base64 and URL encoding replace \u0026ldquo;unsafe\u0026rdquo; characters with safe ones. That surface similarity is why they get mixed up — and why people sometimes apply both when one would do, or apply the wrong one entirely.\u003c/p\u003e\n\u003cp\u003eThe short version:\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003e\u003cstrong\u003eBase64\u003c/strong\u003e makes \u003cem\u003ebinary data\u003c/em\u003e survive a text-only channel.\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003ePercent-encoding\u003c/strong\u003e makes \u003cem\u003etext\u003c/em\u003e survive a URL.\u003c/li\u003e\n\u003c/ul\u003e\n\u003ch2 id=\"what-each-one-actually-does\"\u003eWhat each one actually does\u003c/h2\u003e\n\u003cp\u003e\u003cstrong\u003eBase64\u003c/strong\u003e rewrites bytes using a 64-character alphabet (\u003ccode\u003eA–Z a–z 0–9 + /\u003c/code\u003e, plus \u003ccode\u003e=\u003c/code\u003e padding). Every 3 bytes become 4 characters, so output grows by about 33%.\u003c/p\u003e","title":"Base64 vs URL Encoding: What's the Difference and When to Use Each"},{"content":"The number that means nothing at a glance 1735689600 is a perfectly valid date. So is 1735689600000. They are a second apart in meaning and a thousand times apart in magnitude, and telling them apart by eye is the first thing that trips people up.\nBoth are Unix timestamps: the count of time since 1970-01-01T00:00:00Z, known as the epoch. Databases store them, APIs return them, logs are full of them — and humans cannot read them.\nSeconds or milliseconds? The rule is simple once you know it:\nDigits Unit Typical range 10 seconds 2001 → 2286 13 milliseconds same dates, ×1000 JavaScript\u0026rsquo;s Date.now() returns milliseconds. Most backend languages and Unix commands return seconds. That mismatch is a genuine classic: a millisecond value divided by 1000 gives a date in 1970, and a second value treated as milliseconds lands somewhere in 1970 too.\nThe Unix timestamp converter detects the difference automatically and shows both.\nWhy your conversion looks wrong: time zones A timestamp has no time zone — it is an absolute instant. Your rendering of it does.\n2026-01-01T00:00:00Z (UTC) is 2026-01-01 08:00:00 in Beijing It is 2025-12-31 19:00:00 in New York So when a timestamp \u0026ldquo;shows the wrong day\u0026rdquo;, the bug is almost always a missing Z, a missing time zone offset, or a server that formats in local time while the client expects UTC.\nThe converter shows an ISO 8601 (UTC) row and a local time row side by side, which makes the difference obvious.\nReading timestamps in practice In a database: store UTC, render in the user\u0026rsquo;s time zone. Storing local time is one of the few date decisions that is genuinely hard to undo.\nIn logs: a 10-digit number next to a request is almost always seconds since epoch.\nIn an API: check the field name — created_at, createdAt and timestamp all tend to be epoch values, but you cannot assume the unit. Look at the digit count.\nIn JavaScript:\n// seconds → Date new Date(1735689600 * 1000) // milliseconds → Date new Date(1735689600000) // Date → seconds Math.floor(Date.now() / 1000) Common pitfalls Mixing units. Multiply or divide by 1000 exactly once — the bug is usually a double conversion. Assuming local time. new Date('2026-01-01') is parsed as UTC, while new Date('2026-01-01 00:00:00') (with a space) is treated as local in most engines. Leap seconds. Unix time ignores them; do not try to be clever. Year 2038. 32-bit signed timestamps overflow on 2038-01-19. Use 64-bit or milliseconds. Negative values. They are valid and mean dates before 1970. Converting by hand vs with a tool For a one-off check, the browser console is fine. For anything repetitive — debugging an API, lining up log entries with user reports, writing tests — a converter that shows seconds, milliseconds, UTC, local time, weekday and a relative description in one view saves a surprising amount of time. Try the converter; it runs locally and works offline.\nFAQ Does a Unix timestamp include a time zone? No. It is a single instant; time zones only appear when you format it.\nWhy is my timestamp in 1970? Almost always a unit mismatch — you divided seconds by 1000, or passed seconds where milliseconds were expected.\nWhat about ISO 8601 strings? They are the human-readable alternative (2026-01-01T00:00:00Z). Prefer them in APIs you design, and accept both when consuming.\nCan a timestamp be negative? Yes, for dates before 1970.\nRelated reading How to format and validate JSON — timestamps usually arrive inside a JSON payload Base64 vs URL encoding All NavShelf tools ","permalink":"https://navshelf.com/en/posts/unix-timestamp-converter-guide/","summary":"\u003ch2 id=\"the-number-that-means-nothing-at-a-glance\"\u003eThe number that means nothing at a glance\u003c/h2\u003e\n\u003cp\u003e\u003ccode\u003e1735689600\u003c/code\u003e is a perfectly valid date. So is \u003ccode\u003e1735689600000\u003c/code\u003e. They are a second apart in meaning and a thousand times apart in magnitude, and telling them apart by eye is the first thing that trips people up.\u003c/p\u003e\n\u003cp\u003eBoth are Unix timestamps: the count of time since \u003cstrong\u003e1970-01-01T00:00:00Z\u003c/strong\u003e, known as the epoch. Databases store them, APIs return them, logs are full of them — and humans cannot read them.\u003c/p\u003e","title":"Unix Timestamps Explained: How to Convert Epoch Time to a Date"},{"content":"Why unreadable JSON is a daily problem Every API response, config file and log line is JSON. Minified, it is a single wall of characters; pretty-printed, the same data becomes something you can scan in two seconds. The data is identical — only the whitespace differs — which is why \u0026ldquo;formatting\u0026rdquo; is one of the most common developer searches on the web.\nThis guide covers what formatting actually does, how validation works, and the handful of errors responsible for almost every \u0026ldquo;invalid JSON\u0026rdquo; message you will see.\nFormatting vs minifying vs validating Operation What it changes When to use it Format (pretty-print) Adds indentation and line breaks Reading, reviewing, debugging Minify Removes all optional whitespace Sending payloads, storing configs Validate Changes nothing; reports syntax errors Before you ship a config or a request body All three are one click apart in the JSON formatter, which runs entirely in your browser.\nWhat actually counts as valid JSON JSON has a very small grammar, and it is stricter than JavaScript:\nKeys must be double-quoted strings Strings must use double quotes — single quotes are invalid No trailing commas, ever No comments (// or /* */) Only these value types: object, array, string, number, true, false, null Numbers cannot have leading zeros, and NaN/Infinity are not valid If you have used JSON5, JSONC (VS Code config files) or a JavaScript object literal, some of your habits are illegal in JSON.\nThe five errors that cause most failures 1. Trailing comma\n{ \u0026#34;name\u0026#34;: \u0026#34;NavShelf\u0026#34;, \u0026#34;version\u0026#34;: \u0026#34;1.0\u0026#34;, } The comma after \u0026quot;1.0\u0026quot; is the single most common cause of invalid JSON.\n2. Single quotes\n{ \u0026#39;name\u0026#39;: \u0026#39;NavShelf\u0026#39; } Valid JavaScript, invalid JSON.\n3. Unquoted keys\n{ name: \u0026#34;NavShelf\u0026#34; } Also valid JavaScript, also invalid JSON.\n4. Comments\nDevelopers add // TODO to a config file and then wonder why the app refuses to start. Standard JSON has no comment syntax — strip them, or use a format that allows them.\n5. Truncated or concatenated payloads\nTwo objects pasted together, or a log line that was cut mid-string. This is the error you will see most often when scraping logs.\nHow to read a JSON error message Browser and Node error messages look like this:\nUnexpected token } in JSON at position 84 The position is a character offset from the start of the string, not a line number. Convert it by counting characters, or let a tool do it: the formatter reports the failure as line N, column M, which is what you actually need to fix it.\nA workflow that works Paste the raw payload into the JSON formatter Press Validate to confirm it parses at all Press Format and read the structure — this is usually where you spot the missing key or the wrong nesting Fix the source, then Minify only when you are sending or storing it Keep the pretty version in your repo; minify at build or transport time Common questions about size Minifying typically saves 10–30% depending on nesting depth — rarely enough to matter on its own, because gzip over the wire compresses far more. The real reason to minify is consistency: you avoid merge conflicts caused by whitespace and you keep payload sizes predictable.\nFAQ Does formatting change my data? No. Whitespace outside of strings is insignificant in JSON, so formatting and minifying are lossless.\nCan JSON have duplicate keys? Technically the spec does not forbid it, but the behaviour is undefined — most parsers keep the last value. Avoid duplicates.\nWhy does my JSON work in JavaScript but not in a validator? Because you are not writing JSON, you are writing a JavaScript object literal. Convert it with JSON.stringify(obj) first.\nDoes the tool upload anything? No — parsing happens locally with the browser\u0026rsquo;s own JSON parser. You can even use it offline.\nRelated reading Base64 vs URL encoding — the other two formats you meet daily Unix timestamps explained — reading the numbers in your logs All NavShelf tools ","permalink":"https://navshelf.com/en/posts/json-formatter-guide/","summary":"\u003ch2 id=\"why-unreadable-json-is-a-daily-problem\"\u003eWhy unreadable JSON is a daily problem\u003c/h2\u003e\n\u003cp\u003eEvery API response, config file and log line is JSON. Minified, it is a single wall of characters; pretty-printed, the same data becomes something you can scan in two seconds. The data is identical — only the whitespace differs — which is why \u0026ldquo;formatting\u0026rdquo; is one of the most common developer searches on the web.\u003c/p\u003e\n\u003cp\u003eThis guide covers what formatting actually does, how validation works, and the handful of errors responsible for almost every \u0026ldquo;invalid JSON\u0026rdquo; message you will see.\u003c/p\u003e","title":"How to Format and Validate JSON (and Fix the Errors You'll Actually Hit)"},{"content":"The broken link problem You build a search URL and it works fine in English, then breaks the moment a user types anything interesting:\nhttps://example.com/search?q=书签管理 \u0026amp; page=2 The server sees q=书签管理 and a stray parameter called page. The \u0026amp; that was supposed to be part of the query value has been read as a separator. The same thing happens with #, =, ?, + and spaces.\nThe fix is percent-encoding (URL encoding): replace unsafe characters with % followed by two hexadecimal digits representing the UTF-8 byte.\n书签管理 → %E4%B9%A6%E7%AD%BE%E7%AE%A1%E7%90%86 \u0026amp; → %26 空格 → %20 Which characters are safe? RFC 3986 divides characters into unreserved and reserved. Only unreserved characters may appear literally:\nClass Characters Notes Unreserved A–Z a–z 0–9 - _ . ~ Safe anywhere Reserved (gen-delims) : / ? # [ ] @ Structural meaning in a URL Reserved (sub-delims) ! $ \u0026amp; ' ( ) * + , ; = Meaningful inside query strings Other space, \u0026quot;, \u0026lt;, \u0026gt;, %, {, }, 中文… Must always be encoded Reserved characters aren\u0026rsquo;t \u0026ldquo;forbidden\u0026rdquo; — they\u0026rsquo;re meaningful. The question is always: do I mean this \u0026amp; as structure, or as data? If it\u0026rsquo;s data, encode it.\nencodeURI vs encodeURIComponent JavaScript ships two built-in encoders and they behave differently:\nconst raw = \u0026#39;https://example.com/search?q=书签 \u0026amp; page=2\u0026#39; encodeURI(raw) // https://example.com/search?q=%E4%B9%A6%E7%AD%BE%20\u0026amp;%20page=2 // keeps : / ? \u0026amp; = intact — designed to encode a WHOLE URL encodeURIComponent(raw) // https%3A%2F%2Fexample.com%2Fsearch%3Fq%3D%E4%B9%A6%E7%AD%BE%20%26%20page%3D2 // escapes : / ? \u0026amp; = too — designed to encode a VALUE The rule of thumb:\nEncoding a complete URL (that you built yourself)? Use encodeURI. Encoding a parameter value that will be inserted into a URL? Use encodeURIComponent. Most bugs come from using the wrong one. If your query string contains a nested URL, encodeURIComponent is almost always what you want.\nSpaces: %20 or +? Both appear in the wild, and the difference is historical:\nThe path and the standard say %20. application/x-www-form-urlencoded (HTML forms, many query parsers) encodes spaces as +. A + in a path segment is a literal plus, not a space. That\u0026rsquo;s why \u0026ldquo;why does my + turn into a space?\u0026rdquo; is such a common question: the parser is treating input as form-encoded data.\nWhy decoding fails decodeURIComponent('%E4%B9%A6') works. decodeURIComponent('%E4%B9') throws, and decodeURIComponent('100%') throws too, because a lone % is not a complete escape sequence.\nIf you see a URIError, look for:\nTruncated sequences — a % without two hex digits after it. Double encoding — %25E4... decodes once to %E4...; you need to decode twice (a sign that something upstream encoded twice). Wrong layer — decoding something that was never encoded, e.g. a raw % in a discount code. How to encode or decode in your browser The URL encoder and decoder runs entirely in your browser — no upload, works offline.\nChoose Encode or Decode. Paste the text, URL or encoded string. Press Convert (or Ctrl/⌘ + Enter). Copy the result into your code or address bar. It uses encodeURIComponent / decodeURIComponent, which is the behaviour you want for query parameter values.\nFAQ Should I encode the whole URL or just the parameter? Just the parts that are data. Build the structure yourself, then encode each value with encodeURIComponent.\nWhy does %20 sometimes appear as +? Form-encoded data uses + for spaces. Convert between them when talking to parsers that expect the other convention.\nDo I need to encode Chinese characters? Yes. They are not ASCII, so they must be percent-encoded as UTF-8 bytes.\nCan I decode a URL by hand? You can read a percent table, but for anything longer than a token, use the tool.\nRelated Base64 encoding explained — the other encoding you meet every day All NavShelf tools — free, no upload, offline-capable NavShelf — organize the links you keep coming back to ","permalink":"https://navshelf.com/en/posts/url-encoding-explained/","summary":"\u003ch2 id=\"the-broken-link-problem\"\u003eThe broken link problem\u003c/h2\u003e\n\u003cp\u003eYou build a search URL and it works fine in English, then breaks the moment a user types anything interesting:\u003c/p\u003e\n\u003cpre tabindex=\"0\"\u003e\u003ccode\u003ehttps://example.com/search?q=书签管理 \u0026amp; page=2\n\u003c/code\u003e\u003c/pre\u003e\u003cp\u003eThe server sees \u003ccode\u003eq=书签管理 \u003c/code\u003e and a stray parameter called \u003ccode\u003epage\u003c/code\u003e. The \u003ccode\u003e\u0026amp;\u003c/code\u003e that was supposed to be \u003cem\u003epart of the query value\u003c/em\u003e has been read as a separator. The same thing happens with \u003ccode\u003e#\u003c/code\u003e, \u003ccode\u003e=\u003c/code\u003e, \u003ccode\u003e?\u003c/code\u003e, \u003ccode\u003e+\u003c/code\u003e and spaces.\u003c/p\u003e\n\u003cp\u003eThe fix is \u003cstrong\u003epercent-encoding\u003c/strong\u003e (URL encoding): replace unsafe characters with \u003ccode\u003e%\u003c/code\u003e followed by two hexadecimal digits representing the UTF-8 byte.\u003c/p\u003e","title":"URL Encoding Explained: How to Encode Query Parameters Correctly"},{"content":"The problem Base64 solves Many systems only transport text. Email was designed for 7-bit ASCII, JSON is defined as text, and HTML attributes hold strings. But the things we actually want to move around — images, PDFs, encryption keys, binary protocol buffers — are bytes that can easily include control characters, quotes, or newlines.\nIf you paste raw binary into a text channel, something will eventually eat a byte: a line ending gets rewritten, a quote terminates a string early, a proxy strips a NUL. Base64 gives you a safe envelope by re-encoding those bytes using only 64 characters that every text system agrees on:\nA–Z a–z 0–9 + / = is used only for padding at the end. That\u0026rsquo;s the entire alphabet.\nHow Base64 works Base64 processes input in groups of 3 bytes (24 bits) and rewrites them as 4 characters (4 × 6 bits):\nInput bytes Bits Base64 output Man 24 bits TWFu Ma 16 bits + padding TWE= M 8 bits + padding TQ== Two consequences follow directly from that design:\nOutput is about 33% larger than the input (4 characters instead of 3 bytes). Padding tells the decoder what to ignore. One or two = at the end means the last group was short. The encoding is fully reversible and completely public. There is no key and no secret.\nWhere you meet Base64 in practice Data URIs — background-image: url(data:image/png;base64,iVBORw0KGgo...) embeds tiny images directly in CSS or HTML. JSON APIs — sending a file, a thumbnail, or a cryptographic signature inside a JSON field. Email attachments — MIME encodes attachments with Base64 so they survive text-only mail servers. HTTP Basic auth — Authorization: Basic dXNlcjpwYXNz is just user:pass encoded. JWTs — the header and payload segments of a JSON Web Token are Base64URL strings. Base64 is not encryption This is the single most important thing to understand: Base64 provides zero confidentiality.\nAnyone who sees a Base64 string can decode it in one line — no key, no tooling beyond a browser console. Encoding is a transport concern; encryption is a security concern. If you need confidentiality, use TLS in transit and real encryption (AES-GCM, libsodium, age…) at rest, then Base64 the ciphertext if the transport requires text.\nHow to encode or decode Base64 in your browser You don\u0026rsquo;t need to install anything. The Base64 encoder and decoder on this site runs entirely in your browser: nothing is uploaded, and it works offline.\nPick Encode or Decode. Paste your text, or the Base64 string, into the input box. Press Convert (or Ctrl/⌘ + Enter). Copy or download the result. Because the tool is a plain HTML file with no backend, it is safe for internal IDs, config fragments and log snippets — but still never paste production secrets into any online tool you don\u0026rsquo;t control.\nFive pitfalls worth knowing 1. URL-safe Base64 uses a different alphabet. Standard Base64 has + and /, which are meaningful in URLs. The URL-safe variant (RFC 4648 §5) replaces them with - and _. If a decoder rejects a string that \u0026ldquo;looks fine\u0026rdquo;, check the alphabet first.\n2. Padding is sometimes stripped. Many encoders remove trailing = to save space. Decoders must then infer the missing bytes. Most libraries handle this, but a strict one will throw.\n3. Whitespace and line breaks. Classic MIME output wraps lines at 76 characters. Most decoders ignore \\n and spaces — ours does — but you should not assume every decoder will.\n4. btoa() is not UTF-8 aware. In the browser, btoa('中文') throws an InvalidCharacterError, because btoa only accepts Latin-1. The fix is to convert the string to UTF-8 bytes first (TextEncoder) and only then encode. Good tools do this for you — ours does.\n5. Double encoding. Encoding a string that is already Base64 produces a second layer that looks valid but means nothing. If your decoded output is still gibberish, you probably encoded twice — or you encoded binary data that isn\u0026rsquo;t text at all.\nFAQ How much bigger does Base64 make my data? About 33% before compression. A 1 MB image becomes roughly 1.37 MB of text.\nCan I decode Base64 by hand? In principle yes — it\u0026rsquo;s a 6-bit mapping table. In practice, use a decoder and save the afternoon.\nDoes Base64 compress data? No. It expands it. If you want smaller payloads, compress first (gzip, Brotli, zstd), then encode.\nIs it safe to put Base64 in a URL? Only the URL-safe alphabet. Otherwise you should percent-encode the result — our URL encoder does exactly that.\nTry it Base64 Encoder / Decoder — free, offline-capable, no upload URL Encoder / Decoder — for the query-string case All NavShelf tools If you are the kind of person who accumulates a hundred useful links a month, you may also like NavShelf — a file-manager style bookmark manager where everything stays in your browser.\n","permalink":"https://navshelf.com/en/posts/base64-encoding-explained/","summary":"\u003ch2 id=\"the-problem-base64-solves\"\u003eThe problem Base64 solves\u003c/h2\u003e\n\u003cp\u003eMany systems only transport \u003cem\u003etext\u003c/em\u003e. Email was designed for 7-bit ASCII, JSON is defined as text, and HTML attributes hold strings. But the things we actually want to move around — images, PDFs, encryption keys, binary protocol buffers — are bytes that can easily include control characters, quotes, or newlines.\u003c/p\u003e\n\u003cp\u003eIf you paste raw binary into a text channel, something will eventually eat a byte: a line ending gets rewritten, a quote terminates a string early, a proxy strips a NUL. Base64 gives you a safe envelope by re-encoding those bytes using only 64 characters that every text system agrees on:\u003c/p\u003e","title":"Base64 Encoding Explained: What It Is and When to Use It"},{"content":"What is NavShelf? NavShelf is a free, open-source web navigation manager that organizes your bookmarks like a file system. It helps you manage hundreds of saved links with a clean, intuitive interface.\nWhy We Built It Browser bookmarks haven\u0026rsquo;t evolved much in 20 years. They\u0026rsquo;re flat, hard to search, and impossible to organize at scale. We wanted a tool that:\nWorks like Windows Explorer for your web links Stores data locally (privacy first) Supports multiple languages out of the box Works offline without any server Features 5-level nested directory structure Drag-and-drop reordering Visual card previews with auto-generated thumbnails Right-click context menus for all operations Full search across bookmarks Import/Export via JSON Dark/Light theme 3 language support (EN, ZH-TW, ZH-CN) Try It Now → Open NavShelf\nFeedback Have suggestions or found a bug? We\u0026rsquo;d love to hear from you!\n📧 Send us an email\n","permalink":"https://navshelf.com/en/about/","summary":"\u003ch2 id=\"what-is-navshelf\"\u003eWhat is NavShelf?\u003c/h2\u003e\n\u003cp\u003e\u003ca href=\"/app/\"\u003eNavShelf\u003c/a\u003e is a \u003cstrong\u003efree, open-source web navigation manager\u003c/strong\u003e that organizes your bookmarks like a file system. It helps you manage hundreds of saved links with a clean, intuitive interface.\u003c/p\u003e\n\u003ch2 id=\"why-we-built-it\"\u003eWhy We Built It\u003c/h2\u003e\n\u003cp\u003eBrowser bookmarks haven\u0026rsquo;t evolved much in 20 years. They\u0026rsquo;re flat, hard to search, and impossible to organize at scale. We wanted a tool that:\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003eWorks like Windows Explorer for your web links\u003c/li\u003e\n\u003cli\u003eStores data locally (privacy first)\u003c/li\u003e\n\u003cli\u003eSupports multiple languages out of the box\u003c/li\u003e\n\u003cli\u003eWorks offline without any server\u003c/li\u003e\n\u003c/ul\u003e\n\u003ch2 id=\"features\"\u003eFeatures\u003c/h2\u003e\n\u003cul\u003e\n\u003cli\u003e\u003cstrong\u003e5-level nested directory structure\u003c/strong\u003e\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003eDrag-and-drop\u003c/strong\u003e reordering\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003eVisual card previews\u003c/strong\u003e with auto-generated thumbnails\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003eRight-click context menus\u003c/strong\u003e for all operations\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003eFull search\u003c/strong\u003e across bookmarks\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003eImport/Export\u003c/strong\u003e via JSON\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003eDark/Light theme\u003c/strong\u003e\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003e3 language support\u003c/strong\u003e (EN, ZH-TW, ZH-CN)\u003c/li\u003e\n\u003c/ul\u003e\n\u003ch2 id=\"try-it-now\"\u003eTry It Now\u003c/h2\u003e\n\u003cp\u003e→ \u003ca href=\"/app/\"\u003eOpen NavShelf\u003c/a\u003e\u003c/p\u003e","title":"About NavShelf"},{"content":"Privacy Policy Last updated: January 1, 2025\nOur Commitment to Privacy NavShelf is designed with privacy as a core principle. Here\u0026rsquo;s what you need to know:\nData Storage All data is stored locally in your browser\u0026rsquo;s localStorage No data is sent to any server No analytics or tracking scripts are included in the tool itself What We Don\u0026rsquo;t Collect We do NOT collect any personal information We do NOT track your browsing habits We do NOT sell or share any data We do NOT use cookies for tracking Google AdSense (Blog Only) Our blog pages may display Google AdSense advertisements. Google uses cookies to serve ads based on your prior visits to our website or other websites. You may opt out of personalized advertising by visiting Google Ads Settings.\nThird-Party Links Our blog may contain links to third-party websites. We are not responsible for the privacy practices of those sites.\nContact If you have questions about this privacy policy, please contact us at: 📧 bonn202303@gmail.com\n","permalink":"https://navshelf.com/en/privacy/","summary":"\u003ch2 id=\"privacy-policy\"\u003ePrivacy Policy\u003c/h2\u003e\n\u003cp\u003e\u003cstrong\u003eLast updated: January 1, 2025\u003c/strong\u003e\u003c/p\u003e\n\u003ch3 id=\"our-commitment-to-privacy\"\u003eOur Commitment to Privacy\u003c/h3\u003e\n\u003cp\u003eNavShelf is designed with privacy as a core principle. Here\u0026rsquo;s what you need to know:\u003c/p\u003e\n\u003ch3 id=\"data-storage\"\u003eData Storage\u003c/h3\u003e\n\u003cul\u003e\n\u003cli\u003e\u003cstrong\u003eAll data is stored locally\u003c/strong\u003e in your browser\u0026rsquo;s localStorage\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003eNo data is sent\u003c/strong\u003e to any server\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003eNo analytics or tracking\u003c/strong\u003e scripts are included in the tool itself\u003c/li\u003e\n\u003c/ul\u003e\n\u003ch3 id=\"what-we-dont-collect\"\u003eWhat We Don\u0026rsquo;t Collect\u003c/h3\u003e\n\u003cul\u003e\n\u003cli\u003eWe do NOT collect any personal information\u003c/li\u003e\n\u003cli\u003eWe do NOT track your browsing habits\u003c/li\u003e\n\u003cli\u003eWe do NOT sell or share any data\u003c/li\u003e\n\u003cli\u003eWe do NOT use cookies for tracking\u003c/li\u003e\n\u003c/ul\u003e\n\u003ch3 id=\"google-adsense-blog-only\"\u003eGoogle AdSense (Blog Only)\u003c/h3\u003e\n\u003cp\u003eOur blog pages may display Google AdSense advertisements. Google uses cookies to serve ads based on your prior visits to our website or other websites. You may opt out of personalized advertising by visiting \u003ca href=\"https://www.google.com/settings/ads\"\u003eGoogle Ads Settings\u003c/a\u003e.\u003c/p\u003e","title":"Privacy Policy"}]