cdnjs.com No paid content found

cdnjs is a free, open-source content delivery network (CDN) that hosts popular JavaScript, CSS, and font libraries and serves them from Cloudflare's global network. You use it by copying a hosted file URL from cdnjs.com and pasting it into a <script> or <link> tag in your HTML, so your site loads the library from a fast, cached edge location instead of your own server. It fits most sites that need a common library quickly; it is less suitable when you must pin exact builds you control, run offline, or avoid third-party dependencies.

What cdnjs actually is

cdnjs is a CDN — a network of servers that cache and deliver static files from locations close to each visitor — dedicated to open-source web libraries. According to cdnjs.com, it is "the free, open-source CDN for the web's most popular libraries," covering JavaScript, CSS, and font resources, globally cached on Cloudflare's network. The site states it is trusted by 12.5% of all websites and serves 250 billion requests per month.

Two things follow from that description:

• You don't host the files. cdnjs does, and Cloudflare's edge caches them worldwide.
• The catalog is community-maintained. Libraries are added and updated through the project's GitHub repository, and maintenance is funded through GitHub Sponsors, Open Collective, and Patreon.

How to find a library and get its URL

1. Go to cdnjs.com and use the search box (or browse the Libraries list) to find the library you need — for example, a JavaScript framework, a CSS reset, or a font package.
2. Open the library's page. You'll see the available versions and the individual files in each version.
3. Copy the URL for the file you want. cdnjs URLs follow a predictable pattern:

https://cdnjs.cloudflare.com/ajax/libs/<library>/<version>/<file>

For example, a jQuery build would look like https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js. The exact library name, version, and filename come from the library's page — copy them rather than guessing.

There is also an API if you want to look up libraries or versions programmatically, which is useful for build scripts or checking what versions exist.

How to add it to your page

JavaScript — place the <script> tag before the code that depends on the library, typically at the end of <body> or in <head> with defer:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

CSS — place the <link> tag in <head>:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/<library>/<version>/<file>.css">

Fonts — font packages are usually loaded through their accompanying CSS file, which references the font files on the same CDN.

Verify it loaded: open your browser's developer tools, go to the Network tab, reload the page, and confirm the request to cdnjs.cloudflare.com returns a 200 status. Then check the Console tab for errors and confirm the library's global (for example, $ for jQuery) exists.

Picking a version and a file type

• Pin a version. Use a specific version number in the URL rather than a "latest" alias. A pinned version won't change under you, so your site keeps working even after the library publishes a new release.
• Minified vs unminified. Files ending in .min.js or .min.css are compressed for production — smaller and faster, but hard to read. The unminified versions are for debugging. Ship minified files to visitors.
• Match related files. If a library needs both a JS and a CSS file, load both from the same version so they stay compatible.

Common problems and when to self-host

Self-host instead of using cdnjs when you need offline or air-gapped operation, must guarantee availability independent of a third party, need to modify the library, or your security policy forbids external script sources. For most sites loading standard libraries, the CDN's caching and global distribution make it the simpler choice.

A web server cache is a store of already-generated responses that the server can hand back without rebuilding the page from scratch. Instead of running your application code, querying a database, and assembling HTML on every request, the server keeps a copy of the finished result and serves it directly. In a site acceleration setup, this is usually the single biggest win available on the server side, because it removes most of the work from the request path.

Caching is not one thing, though. It happens at several layers, and understanding which layer does what is the key to deciding where to add it.

The three caching layers you actually deal with

These layers are complementary, not alternatives. A browser cache saves a repeat download for one person. A server cache saves the generation work for everyone. A CDN cache saves the network trip as well as the generation work, but only for content it is allowed to store.

The rest of this article focuses on the middle layer, because that is where most configuration decisions are made and where most confusion arises.

How a server-side cache works

The lifecycle has four stages.

1. A request arrives

A visitor requests a URL. The server checks whether a valid cached copy exists for that URL, taking into account the request method, query string, cookies, and any variation rules you have configured.

2. Cache hit or miss

• Hit: the stored response is returned immediately. Your application and database are not touched.
• Miss: the request passes through to the application as normal, and the generated response is a candidate for storage.

3. Storage

The response is written to the cache with metadata: an expiry time, the URL or cache key it belongs to, and any conditions under which it must not be reused. Storage may be in memory, on disk, or both. Memory is faster; disk survives restarts and holds more.

4. Invalidation

When content changes, the cached copy must be removed or refreshed. This is the hard part of caching, and it is where most caching problems originate.

Why caching accelerates a site

The gain comes from skipping work, not from making work faster. On a dynamic page, the expensive parts are typically:

• Executing application code (PHP, Python, Node, and so on)
• One or more database queries
• Assembling templates and serialising the response

A cache hit bypasses all of them. That is why caching often produces a larger improvement than optimising the code that generates the page — you cannot optimise your way to zero work, but a cache hit is close to zero work.

There is a second, quieter benefit: under traffic spikes, a cached response consumes far fewer server resources, so the same hardware absorbs more concurrent visitors before response times degrade.

Where server-level caching matters most

Server caching pays off most in these situations:

• Content that is identical for all visitors. Homepages, category pages, product listings, documentation, blog posts.
• Read-heavy workloads. Many more views than edits.
• Traffic that arrives in bursts. A link from a large site, a campaign, or a scheduled event.
• Pages with expensive queries. If a page runs several joins to render, caching it removes that cost entirely.
• Sites without a CDN, or with a CDN that only caches static assets. Server caching then covers the HTML too.

It matters least for pages that are unique per visitor and change on every load — a live dashboard, a shopping cart, a personalised feed — unless you can cache fragments or use a short lifetime with careful variation rules.

The trade-offs you have to manage

Cache invalidation

If you cache a page for an hour and then change the price on it, visitors see the old price until the entry expires. Options:

• Time-based expiry (TTL). Simple, but you accept staleness up to the TTL.
• Event-based purging. When content is edited, explicitly purge the affected URLs. More accurate, more configuration.
• Tag-based purging. Tag cached entries by content type or ID, then purge by tag. Useful when one edit affects many URLs.

Dynamic and personalised content

Caching a page that contains a username or a cart count will leak one visitor's data to another. Standard approaches:

• Exclude personalised pages from the cache entirely.
• Cache the page but load personalised fragments separately via a small uncached request.
• Vary the cache key by cookie or header — effective, but it multiplies the number of stored variants and lowers your hit rate.

Stale content after deployment

After a code or template change, cached HTML may still reference old asset paths. A purge on deploy is the usual fix.

Cache key mistakes

If your cache key ignores the query string, ?page=2 may serve page 1. If it ignores a mobile/desktop header, one layout may be served to both. Decide deliberately which request attributes form part of the key.

A practical order of operations

If you are adding caching to an existing site, this sequence avoids most surprises:

1. Measure first. Record current response times and server load for a few representative pages.
2. Start with the browser cache. Set sensible Cache-Control and Expires headers for static assets. This is low-risk and immediate.
3. Add server-side caching for anonymous, public pages. Begin with a short TTL (a few minutes) so mistakes are self-correcting.
4. Verify correctness. Log in, add something to a cart, and check that you never see another user's data. Test with query strings and different devices.
5. Add purge rules. Connect your CMS or deploy process to the cache so edits take effect promptly.
6. Extend TTLs gradually. As confidence grows, lengthen lifetimes and widen the set of cached URLs.
7. Consider a CDN once server caching is stable, so the same rules apply at the edge.

Common misconceptions

• "Caching is only for static files." Modern server caches handle full HTML pages, including pages generated by a CMS.
• "A cache hit means the page is stale." Only if your TTL or purge rules are wrong. Correctly configured, a cache hit is indistinguishable from a fresh render.
• "More caching is always better." Caching personalised or rapidly changing content creates bugs faster than it creates speed.
• "The CDN replaces server caching." A CDN still has to fetch from your origin on a miss. If the origin is slow, the first visitor after each expiry is slow.

How to tell whether caching is working

Track these signals:

• Cache hit ratio. The proportion of requests served from cache. Higher is generally better, but only alongside correct content.
• Origin request volume. Should fall as the hit ratio rises.
• Time to first byte. Should drop for cached URLs.
• Server CPU and database load. Should fall under the same traffic.
• Error and purge logs. Watch for unexpected purges, which usually indicate a misconfigured rule.

If the hit ratio is low, the usual causes are: cookies being set on every request, cache keys that vary too much, very short TTLs, or pages being excluded by an overly broad rule.

Summary

A web server cache stores finished responses so they can be reused without regenerating them. It sits between the browser cache and the CDN cache, and it is the layer that most directly reduces the cost of serving dynamic pages. The decision is rarely whether to cache, but what to cache, for how long, and how to invalidate it. Start narrow, measure, and widen coverage as your purge rules prove reliable.

Cascadeur's site offers a free way to try the software and links to paid plans, but the public page does not spell out exactly what the free tier includes or where its limits sit. What it does confirm is the feature set — AI-assisted keyframe animation, AutoPosing, AutoPhysics, Ragdoll, Inbetweening, AI motion generation, rigging, retargeting, and UE Live Link — plus file compatibility with .FBX, .DAE, .GLB/.GLTF, and .USD. If you need a definitive free-vs-paid breakdown, treat the Plans page and the trial start as the two places to check, because the homepage itself doesn't publish export limits, watermark rules, or commercial-use terms.

What the public page actually tells you

The homepage positions Cascadeur as "the easiest way to animate" and invites you to "Try for free" or "Watch demo." It lists these capabilities without marking any as paid-only:

• Inbetweening — AI interpolation that generates motion between keyframes
• Ragdoll — procedural reactions to impacts, falls, and collisions
• AutoPosing — get natural poses by moving fewer control points
• Quadrupeds — rigging, AutoPosing, and one-click retargeting for four-legged animals
• AI Motion Generation — running, jumping, combat, acrobatics, idles, and more
• AutoPhysics — a character double showing a physically accurate result, for tuning secondary motion and inertia
• Rigging — drag-and-drop joints to auto-generate a rig for humanoids and quadrupeds
• Retargeting — copy/paste animation between characters regardless of skeleton or proportions
• UE Live Link — stream animation to Unreal Engine with real-time updates

It also names the solution areas: mocap cleanup, previz, animation editing, AI, video games, prototyping, and markerless mocap. Mocap cleanup is described as fixing foot sliding, knee pops, geometry penetration, poses via AutoPosing, weight via AutoPhysics, and edits via Animation Layers.

None of this is labeled "free" or "paid" on the page, so don't assume the list equals the free tier.

The two "free" paths are different things

The page shows two separate entry points, and mixing them up is the most common source of confusion:

The trial link points to cascadeur.com/plans#trial, which means trial terms live on the pricing page, not the homepage. If your decision depends on whether you can keep using it indefinitely at no cost, that answer has to come from the Plans page — the homepage doesn't provide it.

When the free route is likely enough

Based on the feature list alone, a free or trial route is worth starting with if you are:

• Learning the workflow — testing AutoPosing and Inbetweening on a simple humanoid before committing
• Evaluating mocap cleanup — checking whether the foot-sliding and knee-pop fixes fit your pipeline
• Prototyping — blocking previz or game animation without a production deadline
• Testing file compatibility — confirming your .FBX, .DAE, .GLB/.GLTF, or .USD assets import cleanly

When upgrading becomes the real question

Upgrade pressure usually comes from constraints the homepage doesn't state, so verify each against the Plans page before paying:

1. Export restrictions — if the free tier limits resolution, format, or adds a watermark, that alone can force an upgrade for client work.
2. Commercial use — confirm whether free-tier output can be used in shipped products. The page doesn't say.
3. Team or pipeline needs — UE Live Link and retargeting matter more in production; check whether they're gated.
4. Volume of work — a single test animation and a full game's combat set have very different tolerance for limits.

A concrete example: if you're cleaning up a markerless mocap take for a game prototype and the free route lets you fix foot sliding and apply AutoPhysics, you may never need to pay. If you're delivering that animation into a commercial build and the free tier restricts export or licensing, the upgrade decision is made for you by the terms, not the feature list.

How to decide without guessing

1. Open the Plans page and read the actual tier comparison — this is the only authoritative source in the material provided.
2. Start the trial and test the specific features your project needs: AutoPosing, AutoPhysics, Ragdoll, Inbetweening, retargeting, and UE Live Link.
3. Test an export end-to-end with your real file format (.FBX, .DAE, .GLB/.GLTF, or .USD) and inspect the output for watermarks or quality loss.
4. Check the commercial-use terms in writing before shipping anything.
5. Only then compare cost against the limits you actually hit.

The homepage is useful for understanding what Cascadeur does — AI-assisted keyframe animation for character work, mocap cleanup, and game pipelines. It is not a pricing document. For the free-vs-paid question specifically, the Plans page is the answer, and the trial is how you verify it against your own project.

Open source fonts are typefaces released under a license that lets anyone use, study, modify, and redistribute them—including the font files themselves. You can use them in websites, apps, and print without paying a license fee, provided you follow the specific terms of the license (most commonly SIL OFL, Apache 2.0, or GPL). This guide explains the difference between open source, freeware, and public domain fonts, how the major licenses work, where to find and verify them, and the practical steps for embedding and attribution.

Open Source vs. Freeware vs. Public Domain

These three terms are often used interchangeably, but they mean different things:

• Open source fonts come with a license that grants the same freedoms as open source software. The license travels with the font, so derivatives must keep the same terms.
• Freeware fonts are free to download but the license may restrict modification, redistribution, or commercial use. "Free" here means zero cost, not freedom.
• Public domain fonts have no copyright restrictions at all. You can do anything with them, but the original designer gives up attribution rights.

The key practical difference: with open source fonts, you can legally modify the glyphs, rename the font, and ship it inside your product—as long as you comply with the license.

Common Open Font Licenses and What They Allow

SIL Open Font License (OFL)

The most widely used license for open source fonts (e.g., most Google Fonts). It allows:

• Use in commercial and non-commercial projects
• Modification and redistribution
• Embedding in websites, apps, and documents

Requirements:

• The font must not be sold by itself.
• Modified versions must not use the Reserved Font Name (if one is declared).
• Any derivative must also be released under the OFL.

Apache License 2.0

Used by some open fonts (e.g., early versions of Roboto). It allows:

• Commercial use, modification, distribution
• Patent grant from contributors

Requirements:

• You must include a copy of the license and state changes made.
• It does not have the "no selling by itself" restriction, but you still need to keep notices.

GNU General Public License (GPL)

Less common for fonts but used in some projects (e.g., GNU FreeFont). It allows:

• Use, modify, redistribute

Requirements:

• If you distribute a modified version, you must release the source under GPL.
• This can be problematic for embedding in proprietary software, because the copyleft may extend to the whole work depending on how it's linked. Many font projects use GPL with a font exception to clarify.

Rule of thumb: For most web and app projects, SIL OFL is the safest and most permissive choice. Apache 2.0 is also fine if you don't mind including notices. Avoid GPL fonts in closed-source products unless you understand the copyleft implications.

How to Find and Verify Open Source Fonts

Community libraries like Font Library (fontlibrary.org) collect fonts that are explicitly licensed for open use. When you download from such a library, the font page usually states the license.

To verify a font's license:

1. Check the font file itself. Open the font in a font editor (e.g., FontForge) or use a command-line tool like otfinfo or fc-query. The license is often embedded in the name table.
2. Look for a LICENSE or OFL.txt file in the download package.
3. Check the project's website or repository (e.g., GitHub). If the license is not stated, assume it's not open source.
4. Search the font name on a license database like the SPDX license list or the Google Fonts license page.

If you cannot find a clear license, do not use the font in a commercial project. "Free download" does not mean open source.

Practical Use: Websites, Apps, and Print

Embedding in websites

• Self-hosting: Download the font files (WOFF2 is best for web), place them in your project, and use @font-face in CSS. This gives you full control and avoids third-party requests.
• Third-party hosting: Google Fonts and similar services host open fonts and provide a CSS link. Check that the font's license allows this (OFL and Apache do).
• Attribution: OFL does not require attribution in the website's visible text, but you must keep the license file with the font files. Apache 2.0 requires you to include a NOTICE file if one exists.

Example @font-face for an OFL font:

@font-face {
  font-family: 'MyOpenFont';
  src: url('myopenfont.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
}

Embedding in apps

• Mobile apps: You can bundle OFL and Apache fonts in your app. For OFL, include the license text in your app's about screen or a licenses file. For Apache, include the license and any NOTICE.
• Desktop apps: Same rules apply. If you modify the font, you must rename it if the original has a Reserved Font Name.

Print

• You can use open source fonts in printed materials (books, posters, packaging) without restriction, as long as you don't sell the font itself.
• If you modify the font for a logo, check the license: OFL allows modification but requires the derivative to be under OFL. That means you cannot claim exclusive copyright on the modified font, but you can use it in a logo.

Common Licensing Mistakes and How to Avoid Them

• Assuming "free" means open source. Many free fonts are freeware with restrictive licenses. Always check the license file.
• Forgetting attribution for Apache fonts. Apache 2.0 requires you to keep copyright notices and state changes. Put them in a licenses file.
• Using GPL fonts in closed-source apps. The copyleft may require you to release your app's source. Use OFL or Apache instead.
• Selling a font you got for free. OFL and many other licenses prohibit selling the font by itself. You can sell a product that uses the font, but not the font files alone.
• Modifying a font with a Reserved Font Name. If the original font has a Reserved Font Name (e.g., "Roboto"), you must rename your modified version. Check the license for the RFN clause.
• Not including the license file when redistributing. Always bundle the original license text with the font files.

By following these guidelines, you can confidently use open source fonts in any project while staying compliant with their licenses.

CSS (Cascading Style Sheets) is the language that controls how a web page looks and how its content is laid out. HTML defines what the content is (headings, paragraphs, links, images), while CSS defines how that content appears — colors, fonts, spacing, sizing, and where each element sits on the screen. You use CSS any time you want a page to look intentional rather than like a plain document of stacked text.

The three roles: structure, presentation, behavior

A useful way to keep web technologies straight is to separate them by job:

CSS is not a programming language in the sense of loops and logic — it is a declarative style language. You describe the result you want, and the browser figures out how to apply it.

How a CSS rule is written

A CSS rule has two parts: a selector that picks which elements to style, and a declaration block that lists the styles to apply.

/* selector: p  |  declarations inside { } */
p {
  color: #333333;
  font-size: 16px;
  line-height: 1.5;
  margin-bottom: 1em;
}

• p is the selector — it targets every <p> element.
• color, font-size, line-height, margin-bottom are properties.
• #333333, 16px, 1.5, 1em are the values.
• Each property–value pair ends with a semicolon; the whole block is wrapped in { }.

The word cascading in the name refers to how the browser resolves conflicts: when multiple rules target the same element, it follows priority rules (origin, specificity, and source order) to decide which one wins. That is why a later rule or a more specific selector can override an earlier one.

What CSS is commonly used for

• Color and typography — text color, background color, font family, size, weight, and line spacing.
• Spacing and sizing — margins, padding, width, height, and gaps between elements.
• Layout — arranging elements in rows, columns, grids, or flexible containers (Flexbox and Grid are the modern layout systems).
• Responsive design — changing the layout based on screen size using media queries, so a page works on both phones and desktops.
• Visual states — hover, focus, and active styles for links and buttons.
• Borders, shadows, and rounded corners — the decorative details that shape a page's look.

Three ways to attach CSS to HTML

1. External stylesheet (most common) — a separate .css file linked from the HTML <head>:

   <link rel="stylesheet" href="styles.css">
   

   This is preferred because one file can style an entire site, and the browser can cache it.

2. Internal stylesheet — a <style> block inside the HTML <head>. Useful for a single page or quick testing.

3. Inline styles — a style attribute directly on an element, such as <p style="color: red;">. It applies to that one element only and is hard to maintain at scale, so it is generally reserved for one-off cases.

How CSS fits with the rest of a page

When a browser loads a page, it reads the HTML to build the document structure, then applies the CSS to compute how each element should be displayed, and finally paints the result. JavaScript can run alongside this to change styles dynamically — for example, adding a class that CSS has already defined. This separation is why the same HTML can be restyled completely by swapping stylesheets, and why CSS is one of the three core technologies of the web alongside HTML and JavaScript.