{"id":13527836,"url":"https://github.com/filamentgroup/enhance","last_synced_at":"2025-12-17T00:19:45.475Z","repository":{"id":2940035,"uuid":"3952264","full_name":"filamentgroup/enhance","owner":"filamentgroup","description":"A JavaScript workflow designed to progressively enhance sites in a qualified manner.","archived":true,"fork":false,"pushed_at":"2022-10-20T21:03:22.000Z","size":69,"stargazers_count":488,"open_issues_count":0,"forks_count":46,"subscribers_count":41,"default_branch":"master","last_synced_at":"2025-03-24T06:07:15.438Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/filamentgroup.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2012-04-06T18:18:08.000Z","updated_at":"2025-03-02T12:18:04.000Z","dependencies_parsed_at":"2023-01-11T16:13:26.482Z","dependency_job_id":null,"html_url":"https://github.com/filamentgroup/enhance","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/filamentgroup%2Fenhance","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/filamentgroup%2Fenhance/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/filamentgroup%2Fenhance/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/filamentgroup%2Fenhance/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/filamentgroup","download_url":"https://codeload.github.com/filamentgroup/enhance/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246625700,"owners_count":20807804,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-01T06:02:03.224Z","updated_at":"2025-12-17T00:19:45.422Z","avatar_url":"https://github.com/filamentgroup.png","language":"JavaScript","readme":":warning: This project is archived and the repository is no longer maintained. \n\n#Enhance.js\n\n`Enhance.js` is a small JavaScript workflow designed to help developers progressively enhance a page in a qualified manner.\n\n* Copyright 2010-2014 @scottjehl, @beep, @wilto, @maggiewachs, and Filament Group, Inc.\n* License: MIT\n\n## Overview\n\nAs of version 2, Enhance.js is no longer meant to be a library or framework, but rather an editable boilerplate file. It is small, delete-key-friendly, and meant to be included \"inline\" in the `head` of a page and edited to the needs of your project.\n\nWe typically use Enhance.js to run brief browser diagnostics before deciding whether to enhance a basic, but already-functional page further by adding classes and requesting additional scripts and stylesheets.\n\n## Enhancement workflow\n\nThe logic within Enhance.js can and should vary from project to project - edit it to your needs.\n\nBy default though, it is set up to follow these steps:\n\n1. Define some variables and functions for loading assets and accessing information about the browser and markup\n2. Run one or more tests to see if a browser is qualified to load and render additional enhancements\n3.   \n\t- A. If it's not qualified, exit early and do nothing more\n\t- B. If it is qualified, proceed on to load additional assets, add classes to the document, etc.\n\n\n## How to use\n\nWe suggest keeping `enhance.js` in a folder alongside other editable JavaScript files used in your site.\n\nIt **should be included in your page inline**, rather than referencing it externally, through a server-side include or build process:\n\n```html\n\u003c!doctype html\u003e\n\u003chtml\u003e\n\u003chead\u003e\n\t...\n\t\u003cscript\u003e\u003c!--#include virtual=\"/path/to/enhance.js\" --\u003e\u003c/script\u003e\n\t...\n\u003c/head\u003e\n```\nIncluding this file inline is in keeping with the overall goal of reducing the number of blocking, external references found in the `head` of the page (to allow the page to render as quickly as possible).\n*Note*: In a production setting, this file should be minified before being included in a page to ensure it's as small as possible. Tools like Uglify.js can help with this.\n\n\n### Enhancing a page EnhanceJS\n\nTODO: A lot of this information should move to the SouthStreet Project, to explain how the pieces above come together.\n\nFor EnhanceJS to work best, a careful setup in the `head` of a page is necessary.\n\nFirst, we recommend including [the critical CSS for each template of a site](https://github.com/filamentgroup/grunt-criticalCSS) directly in a `style` element in the head of the page, and requesting the rest of the site's CSS asynchronously. Once we've fetched the full CSS for the site, we like to set a cookie to tell our server-side templates to reference that CSS file directly with a `link` element on subsequent visits, instead of any inline styles.\n\nWe also recommend loading any non-critical JavaScript asynchronously as well, and the `loadJS` function in EnhanceJS allows us to do that in a qualified manner, so older and underfeatured browsers don't need to be bothered by DOM Frameworks and such.\n\nTo define URLs for files that may be requested by EnhanceJS, such as a file containing JavaScript enhancements, we like to use `meta` tags in the `head` of our page.\n\n### A fully-configured `head` setup for EnhanceJS\n\nHere's an example configuration for the head of a page. It uses SSI to detect cookies and decide whether to inline CSS or request it directly.\n\n```html\n\u003c!doctype html\u003e\n\u003chtml\u003e\n\u003chead\u003e\n\t...\n\t\u003cmeta name=\"fullcss\"  content=\"/path/to/full.css\"\u003e\n\t\u003cmeta name=\"fulljs\"  content=\"/path/to/enhancements.js\"\u003e\n\u003c!--#if expr=\"$HTTP_COOKIE=/fullcss\\=true/\" --\u003e\n\t\u003clink rel=\"stylesheet\" href=\"/path/to/full.css\"\u003e\n\u003c!--#else --\u003e\n\t\u003cstyle\u003e\n\t\t/* critical CSS styles for this template go here... */\n\t\u003c/style\u003e\n\u003c!--#endif --\u003e\t\n\t\u003cscript\u003e\n\t\t\u003c!--#include virtual=\"/path/to/enhance.js\" --\u003e\n\t\u003c/script\u003e\n\t\u003cnoscript\u003e\u003clink rel=\"stylesheet\" href=\"/path/to/full.css\"\u003e\u003c/noscript\u003e\n\t...\n\u003c/head\u003e\n```\n\n\n## API\n\nEnhance.js exposes an object called `window.enhance` or just `enhance`. You can place whatever enhancement-related properties and methods on this object that you might want to use elsewhere in your codebase, or, none at all.\n\nBy default, we typically expose functions like `loadCSS`, `loadJS`, `getMeta`, and `cookie`, so that we can use these in other scripts in our codebase.\n\nYou might choose to expose feature support information, or even user agent info if you really need that.\n","funding_links":[],"categories":["JavaScript","📦 Legacy \u0026 Inactive Projects"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffilamentgroup%2Fenhance","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffilamentgroup%2Fenhance","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffilamentgroup%2Fenhance/lists"}