BranchesTags

Repository files navigation

Before you begin

  1. Install Node (with npm): http://nodejs.org/#download
  2. Install Sass: http://sass-lang.com/download.html
  3. Install Compass: http://compass-style.org/

Getting Started

  1. In your terminal, navigate to this project and type:
 npm install .
  1. To generate the index.html page, type:
 node .
  1. Important Note: To check if the urls are accurate (and for deploying to production), type:
 node . checkurls

  1. Each of the features requires its own markdown file under posts folder. It is easy to create using the shell script on the parent directory. Just type ./new_feature.sh and start entering details about the feature you want to add.

  2. All styles must be in the included Sass file rather than be updated in the generated CSS file. To compile them is to use Compass:

 compass watch .

Changelog

Dec 12 2011

  • No more JSON!
  • Now we create each 'feature' with a markdown file that has YAML-like front matter. To make this easy, there is a new_feature.sh script that you can run to automate the creation of the file for each feature that needs to be written about. e.g. you would do ./new_feature.sh and then enter "text-shadow" if you want to create a markdown file for the text-shadow feature. There is a test.md if you want to refer to (but really the shell script should do all the prompting for you to get set up). It even starts your default editor for you with the newly created file if you have the $EDITOR set up in your PATH.
  • features.json is retired, only to be used for reference at best (as if its any useful).
  • Plan is to port content directly from the modernizr wiki for now, link to caniuse data for more info.
  • Likely, the templates might change in the meanwhile, I welcome your feedback on this setup. If you have better ideas, lemme know!

So new workflow for adding content here would be to run ./new_feature.sh. But everything else remains the same.

Nov 7 2011

Branch now uses node and compass!

July 9 2011

A very basic idea of how this would look like. Lame filters and colors. See: http://dl.dropbox.com/u/952/gfs/index.html

"How do I use prefixes" would link to:

  1. Where all prefixes occur (css properties, values, DOM interfaces).
  2. How to use modernizr's prefix-returning function for use in your script.
  3. A reduced snippet from there?
  4. Graceful degradation guidelines
  5. Link to Tantek wiki page on why we have prefixes (and when we wont have them).

"Tools for Feature Support":

  1. Css3please.com
  2. modernizr polyfill wiki
  3. modernizr
  4. CSS Preprocessors?
  5. caniuse.com?

Context

Started at: http://oksoclap.com/gfs

About

Graded Feature Support: Look up web technologies and find out if they are ready for use.

html5please.us/

Resources

Readme
Activity

Stars

1 star

Watchers

1 watching

Forks

0 forks
Report repository

Releases

Packages

Contributors

Languages

, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Add copy buttons to all 
 blocks\n(function() {\n function addCopyButtons() {\n document.querySelectorAll('pre code').forEach(function(codeBlock) {\n if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;\n codeBlock.parentElement.setAttribute('data-copy-added', 'true');\n \n var btn = document.createElement('button');\n btn.textContent = 'Copy';\n btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';\n btn.onmouseover = function() { this.style.opacity = '1'; };\n btn.onmouseout = function() { this.style.opacity = '0.7'; };\n btn.onclick = function() {\n navigator.clipboard.writeText(codeBlock.textContent).then(function() {\n btn.textContent = 'Copied!';\n setTimeout(function() { btn.textContent = 'Copy'; }, 1500);\n });\n };\n codeBlock.parentElement.style.position = 'relative';\n codeBlock.parentElement.appendChild(btn);\n });\n }\n \n addCopyButtons();\n \n // Re-run on dynamic content\n var observer = new MutationObserver(addCopyButtons);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Add Copy Buttons to Code Blocks");
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '

Skip to content
BranchesTags
Repository files navigation
Before you begin
  1. Install Node (with npm): http://nodejs.org/#download
  2. Install Sass: http://sass-lang.com/download.html
  3. Install Compass: http://compass-style.org/
Getting Started
  1. In your terminal, navigate to this project and type:
 npm install .

  1. To generate the index.html page, type:
 node .

  1. Important Note: To check if the urls are accurate (and for deploying to production), type:
 node . checkurls

  1. Each of the features requires its own markdown file under posts folder. It is easy to create using the shell script on the parent directory. Just type ./new_feature.sh and start entering details about the feature you want to add.
  2. All styles must be in the included Sass file rather than be updated in the generated CSS file. To compile them is to use Compass:
 compass watch .

Changelog
Dec 12 2011
  • No more JSON!
  • Now we create each 'feature' with a markdown file that has YAML-like front matter. To make this easy, there is a new_feature.sh script that you can run to automate the creation of the file for each feature that needs to be written about. e.g. you would do ./new_feature.sh and then enter "text-shadow" if you want to create a markdown file for the text-shadow feature. There is a test.md if you want to refer to (but really the shell script should do all the prompting for you to get set up). It even starts your default editor for you with the newly created file if you have the $EDITOR set up in your PATH.
  • features.json is retired, only to be used for reference at best (as if its any useful).
  • Plan is to port content directly from the modernizr wiki for now, link to caniuse data for more info.
  • Likely, the templates might change in the meanwhile, I welcome your feedback on this setup. If you have better ideas, lemme know!
So new workflow for adding content here would be to run ./new_feature.sh. But everything else remains the same.
Nov 7 2011
Branch now uses node and compass!
July 9 2011
A very basic idea of how this would look like. Lame filters and colors. See: http://dl.dropbox.com/u/952/gfs/index.html
"How do I use prefixes" would link to:
  1. Where all prefixes occur (css properties, values, DOM interfaces).
  2. How to use modernizr's prefix-returning function for use in your script.
  3. A reduced snippet from there?
  4. Graceful degradation guidelines
  5. Link to Tantek wiki page on why we have prefixes (and when we wont have them).
"Tools for Feature Support":
  1. Css3please.com
  2. modernizr polyfill wiki
  3. modernizr
  4. CSS Preprocessors?
  5. caniuse.com?
Context
Started at: http://oksoclap.com/gfs
About
Graded Feature Support: Look up web technologies and find out if they are ready for use.
html5please.us/
Resources
Readme
Activity
Stars
1 star
Watchers
1 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Force GitHub README to respect dark mode\n(function() {\n var style = document.createElement('style');\n style.textContent = '\n .markdown-body {\n color-scheme: dark light;\n }\n .markdown-body pre { background: #161b22 !important; }\n .markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }\n .markdown-body table th, .markdown-body table td { border-color: #30363d !important; }\n .markdown-body img { background: #0d1117; }\n .markdown-body blockquote { border-left-color: #8b949e; }\n .markdown-body hr { border-color: #30363d; }\n ';\n document.head.appendChild(style);\n})();", "GitHub Dark Mode README Fix");
}
} catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
BranchesTags
Repository files navigation
Before you begin
  1. Install Node (with npm): http://nodejs.org/#download
  2. Install Sass: http://sass-lang.com/download.html
  3. Install Compass: http://compass-style.org/
Getting Started
  1. In your terminal, navigate to this project and type:
 npm install .

  1. To generate the index.html page, type:
 node .

  1. Important Note: To check if the urls are accurate (and for deploying to production), type:
 node . checkurls

  1. Each of the features requires its own markdown file under posts folder. It is easy to create using the shell script on the parent directory. Just type ./new_feature.sh and start entering details about the feature you want to add.
  2. All styles must be in the included Sass file rather than be updated in the generated CSS file. To compile them is to use Compass:
 compass watch .

Changelog
Dec 12 2011
  • No more JSON!
  • Now we create each 'feature' with a markdown file that has YAML-like front matter. To make this easy, there is a new_feature.sh script that you can run to automate the creation of the file for each feature that needs to be written about. e.g. you would do ./new_feature.sh and then enter "text-shadow" if you want to create a markdown file for the text-shadow feature. There is a test.md if you want to refer to (but really the shell script should do all the prompting for you to get set up). It even starts your default editor for you with the newly created file if you have the $EDITOR set up in your PATH.
  • features.json is retired, only to be used for reference at best (as if its any useful).
  • Plan is to port content directly from the modernizr wiki for now, link to caniuse data for more info.
  • Likely, the templates might change in the meanwhile, I welcome your feedback on this setup. If you have better ideas, lemme know!
So new workflow for adding content here would be to run ./new_feature.sh. But everything else remains the same.
Nov 7 2011
Branch now uses node and compass!
July 9 2011
A very basic idea of how this would look like. Lame filters and colors. See: http://dl.dropbox.com/u/952/gfs/index.html
"How do I use prefixes" would link to:
  1. Where all prefixes occur (css properties, values, DOM interfaces).
  2. How to use modernizr's prefix-returning function for use in your script.
  3. A reduced snippet from there?
  4. Graceful degradation guidelines
  5. Link to Tantek wiki page on why we have prefixes (and when we wont have them).
"Tools for Feature Support":
  1. Css3please.com
  2. modernizr polyfill wiki
  3. modernizr
  4. CSS Preprocessors?
  5. caniuse.com?
Context
Started at: http://oksoclap.com/gfs
About
Graded Feature Support: Look up web technologies and find out if they are ready for use.
html5please.us/
Resources
Readme
Activity
Stars
1 star
Watchers
1 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Highlight search terms from Google/DuckDuckGo/Bing referrer\n(function() {\n var ref = document.referrer;\n var terms = [];\n \n if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {\n var url = new URL(ref);\n var q = url.searchParams.get('q') || url.searchParams.get('p');\n if (q) {\n terms = q.split(/\\s+/).filter(function(t) { return t.length > 2; });\n }\n }\n \n if (terms.length === 0) return;\n \n var style = document.createElement('style');\n style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';\n document.head.appendChild(style);\n \n function highlight(node) {\n if (node.nodeType === 3) { // text node\n var text = node.textContent;\n var found = false;\n terms.forEach(function(term) {\n var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\') + ')', 'gi');\n if (regex.test(text)) {\n found = true;\n var frag = document.createDocumentFragment();\n var parts = text.split(regex);\n parts.forEach(function(part, i) {\n if (i % 2 === 0) {\n frag.appendChild(document.createTextNode(part));\n } else {\n var span = document.createElement('span');\n span.className = 'userscript-highlight';\n span.textContent = part;\n frag.appendChild(span);\n }\n });\n node.parentNode.replaceChild(frag, node);\n }\n });\n } else if (node.nodeType === 1 && node.childNodes) { // element\n var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];\n if (!skipTags.includes(node.tagName)) {\n Array.from(node.childNodes).forEach(highlight);\n }\n }\n }\n \n highlight(document.body);\n \n // Re-highlight on dynamic content\n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1 || node.nodeType === 3) highlight(node);\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Highlight Search Terms");
}
} catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
BranchesTags
Repository files navigation
Before you begin
  1. Install Node (with npm): http://nodejs.org/#download
  2. Install Sass: http://sass-lang.com/download.html
  3. Install Compass: http://compass-style.org/
Getting Started
  1. In your terminal, navigate to this project and type:
 npm install .

  1. To generate the index.html page, type:
 node .

  1. Important Note: To check if the urls are accurate (and for deploying to production), type:
 node . checkurls

  1. Each of the features requires its own markdown file under posts folder. It is easy to create using the shell script on the parent directory. Just type ./new_feature.sh and start entering details about the feature you want to add.
  2. All styles must be in the included Sass file rather than be updated in the generated CSS file. To compile them is to use Compass:
 compass watch .

Changelog
Dec 12 2011
  • No more JSON!
  • Now we create each 'feature' with a markdown file that has YAML-like front matter. To make this easy, there is a new_feature.sh script that you can run to automate the creation of the file for each feature that needs to be written about. e.g. you would do ./new_feature.sh and then enter "text-shadow" if you want to create a markdown file for the text-shadow feature. There is a test.md if you want to refer to (but really the shell script should do all the prompting for you to get set up). It even starts your default editor for you with the newly created file if you have the $EDITOR set up in your PATH.
  • features.json is retired, only to be used for reference at best (as if its any useful).
  • Plan is to port content directly from the modernizr wiki for now, link to caniuse data for more info.
  • Likely, the templates might change in the meanwhile, I welcome your feedback on this setup. If you have better ideas, lemme know!
So new workflow for adding content here would be to run ./new_feature.sh. But everything else remains the same.
Nov 7 2011
Branch now uses node and compass!
July 9 2011
A very basic idea of how this would look like. Lame filters and colors. See: http://dl.dropbox.com/u/952/gfs/index.html
"How do I use prefixes" would link to:
  1. Where all prefixes occur (css properties, values, DOM interfaces).
  2. How to use modernizr's prefix-returning function for use in your script.
  3. A reduced snippet from there?
  4. Graceful degradation guidelines
  5. Link to Tantek wiki page on why we have prefixes (and when we wont have them).
"Tools for Feature Support":
  1. Css3please.com
  2. modernizr polyfill wiki
  3. modernizr
  4. CSS Preprocessors?
  5. caniuse.com?
Context
Started at: http://oksoclap.com/gfs
About
Graded Feature Support: Look up web technologies and find out if they are ready for use.
html5please.us/
Resources
Readme
Activity
Stars
1 star
Watchers
1 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Strip utm_, fbclid, gclid, etc. from all links on page\n(function() {\n var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',\n 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',\n 'ref', 'ref_src', 'source', 'medium', 'campaign'];\n \n function cleanUrl(url) {\n try {\n var u = new URL(url, window.location.origin);\n var changed = false;\n trackingParams.forEach(function(p) {\n if (u.searchParams.has(p)) {\n u.searchParams.delete(p);\n changed = true;\n }\n });\n return changed ? u.toString() : url;\n } catch (e) {\n return url;\n }\n }\n \n function cleanLinks() {\n document.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n \n cleanLinks();\n \n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1) {\n if (node.tagName === 'A') cleanLinks();\n node.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Remove Tracking Parameters from Links");
}
} catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); }
})();
(function(){
try {
var __m = "youtube.com";
var __re = new RegExp('^' + "youtube\\.com" + '

Skip to content
BranchesTags
Repository files navigation
Before you begin
  1. Install Node (with npm): http://nodejs.org/#download
  2. Install Sass: http://sass-lang.com/download.html
  3. Install Compass: http://compass-style.org/
Getting Started
  1. In your terminal, navigate to this project and type:
 npm install .

  1. To generate the index.html page, type:
 node .

  1. Important Note: To check if the urls are accurate (and for deploying to production), type:
 node . checkurls

  1. Each of the features requires its own markdown file under posts folder. It is easy to create using the shell script on the parent directory. Just type ./new_feature.sh and start entering details about the feature you want to add.
  2. All styles must be in the included Sass file rather than be updated in the generated CSS file. To compile them is to use Compass:
 compass watch .

Changelog
Dec 12 2011
  • No more JSON!
  • Now we create each 'feature' with a markdown file that has YAML-like front matter. To make this easy, there is a new_feature.sh script that you can run to automate the creation of the file for each feature that needs to be written about. e.g. you would do ./new_feature.sh and then enter "text-shadow" if you want to create a markdown file for the text-shadow feature. There is a test.md if you want to refer to (but really the shell script should do all the prompting for you to get set up). It even starts your default editor for you with the newly created file if you have the $EDITOR set up in your PATH.
  • features.json is retired, only to be used for reference at best (as if its any useful).
  • Plan is to port content directly from the modernizr wiki for now, link to caniuse data for more info.
  • Likely, the templates might change in the meanwhile, I welcome your feedback on this setup. If you have better ideas, lemme know!
So new workflow for adding content here would be to run ./new_feature.sh. But everything else remains the same.
Nov 7 2011
Branch now uses node and compass!
July 9 2011
A very basic idea of how this would look like. Lame filters and colors. See: http://dl.dropbox.com/u/952/gfs/index.html
"How do I use prefixes" would link to:
  1. Where all prefixes occur (css properties, values, DOM interfaces).
  2. How to use modernizr's prefix-returning function for use in your script.
  3. A reduced snippet from there?
  4. Graceful degradation guidelines
  5. Link to Tantek wiki page on why we have prefixes (and when we wont have them).
"Tools for Feature Support":
  1. Css3please.com
  2. modernizr polyfill wiki
  3. modernizr
  4. CSS Preprocessors?
  5. caniuse.com?
Context
Started at: http://oksoclap.com/gfs
About
Graded Feature Support: Look up web technologies and find out if they are ready for use.
html5please.us/
Resources
Readme
Activity
Stars
1 star
Watchers
1 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Auto-enable theater mode on YouTube\n(function() {\n function tryTheater() {\n var btn = document.querySelector('button[aria-label=\"Theater mode\"], ytd-player #player button[title=\"Theater mode\"]');\n if (btn && !btn.classList.contains('activated')) {\n btn.click();\n }\n }\n \n // Try immediately\n tryTheater();\n \n // Try after navigation (SPA)\n var lastUrl = location.href;\n setInterval(function() {\n if (location.href !== lastUrl) {\n lastUrl = location.href;\n setTimeout(tryTheater, 500);\n }\n }, 1000);\n \n // Also try on player load\n var observer = new MutationObserver(tryTheater);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "YouTube Theater Mode Default");
}
} catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
BranchesTags
Repository files navigation
Before you begin
  1. Install Node (with npm): http://nodejs.org/#download
  2. Install Sass: http://sass-lang.com/download.html
  3. Install Compass: http://compass-style.org/
Getting Started
  1. In your terminal, navigate to this project and type:
 npm install .

  1. To generate the index.html page, type:
 node .

  1. Important Note: To check if the urls are accurate (and for deploying to production), type:
 node . checkurls

  1. Each of the features requires its own markdown file under posts folder. It is easy to create using the shell script on the parent directory. Just type ./new_feature.sh and start entering details about the feature you want to add.
  2. All styles must be in the included Sass file rather than be updated in the generated CSS file. To compile them is to use Compass:
 compass watch .

Changelog
Dec 12 2011
  • No more JSON!
  • Now we create each 'feature' with a markdown file that has YAML-like front matter. To make this easy, there is a new_feature.sh script that you can run to automate the creation of the file for each feature that needs to be written about. e.g. you would do ./new_feature.sh and then enter "text-shadow" if you want to create a markdown file for the text-shadow feature. There is a test.md if you want to refer to (but really the shell script should do all the prompting for you to get set up). It even starts your default editor for you with the newly created file if you have the $EDITOR set up in your PATH.
  • features.json is retired, only to be used for reference at best (as if its any useful).
  • Plan is to port content directly from the modernizr wiki for now, link to caniuse data for more info.
  • Likely, the templates might change in the meanwhile, I welcome your feedback on this setup. If you have better ideas, lemme know!
So new workflow for adding content here would be to run ./new_feature.sh. But everything else remains the same.
Nov 7 2011
Branch now uses node and compass!
July 9 2011
A very basic idea of how this would look like. Lame filters and colors. See: http://dl.dropbox.com/u/952/gfs/index.html
"How do I use prefixes" would link to:
  1. Where all prefixes occur (css properties, values, DOM interfaces).
  2. How to use modernizr's prefix-returning function for use in your script.
  3. A reduced snippet from there?
  4. Graceful degradation guidelines
  5. Link to Tantek wiki page on why we have prefixes (and when we wont have them).
"Tools for Feature Support":
  1. Css3please.com
  2. modernizr polyfill wiki
  3. modernizr
  4. CSS Preprocessors?
  5. caniuse.com?
Context
Started at: http://oksoclap.com/gfs
About
Graded Feature Support: Look up web technologies and find out if they are ready for use.
html5please.us/
Resources
Readme
Activity
Stars
1 star
Watchers
1 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Remove or un-stick sticky/fixed headers that block content\n(function() {\n function unstick() {\n document.querySelectorAll('header, nav, [role=\"banner\"], .header, .navbar, .sticky, .fixed-top, [style*=\"position: fixed\"], [style*=\"position:sticky\"]').forEach(function(el) {\n if (el.style.position === 'fixed' || el.style.position === 'sticky' || \n getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {\n el.style.position = 'static';\n el.style.top = 'auto';\n el.style.zIndex = 'auto';\n }\n });\n }\n \n unstick();\n \n var observer = new MutationObserver(unstick);\n observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });\n})();", "Kill Sticky Headers");
}
} catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
BranchesTags
Repository files navigation
Before you begin
  1. Install Node (with npm): http://nodejs.org/#download
  2. Install Sass: http://sass-lang.com/download.html
  3. Install Compass: http://compass-style.org/
Getting Started
  1. In your terminal, navigate to this project and type:
 npm install .

  1. To generate the index.html page, type:
 node .

  1. Important Note: To check if the urls are accurate (and for deploying to production), type:
 node . checkurls

  1. Each of the features requires its own markdown file under posts folder. It is easy to create using the shell script on the parent directory. Just type ./new_feature.sh and start entering details about the feature you want to add.
  2. All styles must be in the included Sass file rather than be updated in the generated CSS file. To compile them is to use Compass:
 compass watch .

Changelog
Dec 12 2011
  • No more JSON!
  • Now we create each 'feature' with a markdown file that has YAML-like front matter. To make this easy, there is a new_feature.sh script that you can run to automate the creation of the file for each feature that needs to be written about. e.g. you would do ./new_feature.sh and then enter "text-shadow" if you want to create a markdown file for the text-shadow feature. There is a test.md if you want to refer to (but really the shell script should do all the prompting for you to get set up). It even starts your default editor for you with the newly created file if you have the $EDITOR set up in your PATH.
  • features.json is retired, only to be used for reference at best (as if its any useful).
  • Plan is to port content directly from the modernizr wiki for now, link to caniuse data for more info.
  • Likely, the templates might change in the meanwhile, I welcome your feedback on this setup. If you have better ideas, lemme know!
So new workflow for adding content here would be to run ./new_feature.sh. But everything else remains the same.
Nov 7 2011
Branch now uses node and compass!
July 9 2011
A very basic idea of how this would look like. Lame filters and colors. See: http://dl.dropbox.com/u/952/gfs/index.html
"How do I use prefixes" would link to:
  1. Where all prefixes occur (css properties, values, DOM interfaces).
  2. How to use modernizr's prefix-returning function for use in your script.
  3. A reduced snippet from there?
  4. Graceful degradation guidelines
  5. Link to Tantek wiki page on why we have prefixes (and when we wont have them).
"Tools for Feature Support":
  1. Css3please.com
  2. modernizr polyfill wiki
  3. modernizr
  4. CSS Preprocessors?
  5. caniuse.com?
Context
Started at: http://oksoclap.com/gfs
About
Graded Feature Support: Look up web technologies and find out if they are ready for use.
html5please.us/
Resources
Readme
Activity
Stars
1 star
Watchers
1 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Universal Dark Mode - works on any site\n(function() {\n var enabled = true;\n \n function applyDarkMode() {\n if (!enabled) return;\n \n // Create style element if it doesn't exist\n var style = document.getElementById('universal-dark-mode-style');\n if (!style) {\n style = document.createElement('style');\n style.id = 'universal-dark-mode-style';\n document.head.appendChild(style);\n }\n \n // Dark mode CSS - inverts colors but preserves images/video\n style.textContent = '\n /* Invert everything except media */\n html {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #1a1a2e !important;\n }\n \n /* Restore images, videos, iframes, canvas */\n img, video, iframe, canvas, svg, picture, [style*=\"background-image\"] {\n filter: invert(1) hue-rotate(180deg) !important;\n }\n \n /* Preserve specific elements that should not be inverted */\n .no-dark-mode, .no-dark-mode *,\n [data-theme=\"light\"], [data-theme=\"light\"],\n .ace_editor, .ace_editor *,\n .CodeMirror, .CodeMirror *,\n .monaco-editor, .monaco-editor *,\n .markdown-body pre, .markdown-body pre *,\n .highlight, .highlight *,\n pre code, pre code * {\n filter: none !important;\n }\n \n /* Fix common UI elements */\n .modal, .popup, .dropdown-menu, .tooltip, .popover {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #2d2d44 !important;\n border-color: #444 !important;\n }\n \n /* Scrollbars */\n ::-webkit-scrollbar { background: #1a1a2e !important; }\n ::-webkit-scrollbar-thumb { background: #444 !important; }\n ::-webkit-scrollbar-thumb:hover { background: #555 !important; }\n \n /* Selection */\n ::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ';\n }\n \n function removeDarkMode() {\n var style = document.getElementById('universal-dark-mode-style');\n if (style) style.remove();\n }\n \n // Toggle with Alt+Shift+D\n document.addEventListener('keydown', function(e) {\n if (e.altKey && e.shiftKey && e.key === 'D') {\n e.preventDefault();\n enabled = !enabled;\n if (enabled) {\n applyDarkMode();\n console.log('[Universal Dark Mode] Enabled');\n } else {\n removeDarkMode();\n console.log('[Universal Dark Mode] Disabled');\n }\n }\n });\n \n // Apply on load\n applyDarkMode();\n \n // Re-apply on dynamic content\n var observer = new MutationObserver(function(mutations) {\n if (enabled && !document.getElementById('universal-dark-mode-style')) {\n applyDarkMode();\n }\n });\n observer.observe(document.head, { childList: true });\n \n console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');\n})();", "Universal Dark Mode");
}
} catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); }
})();
})();

Skip to content
BranchesTags
Repository files navigation
Before you begin
  1. Install Node (with npm): http://nodejs.org/#download
  2. Install Sass: http://sass-lang.com/download.html
  3. Install Compass: http://compass-style.org/
Getting Started
  1. In your terminal, navigate to this project and type:
 npm install .

  1. To generate the index.html page, type:
 node .

  1. Important Note: To check if the urls are accurate (and for deploying to production), type:
 node . checkurls

  1. Each of the features requires its own markdown file under posts folder. It is easy to create using the shell script on the parent directory. Just type ./new_feature.sh and start entering details about the feature you want to add.
  2. All styles must be in the included Sass file rather than be updated in the generated CSS file. To compile them is to use Compass:
 compass watch .

Changelog
Dec 12 2011
  • No more JSON!
  • Now we create each 'feature' with a markdown file that has YAML-like front matter. To make this easy, there is a new_feature.sh script that you can run to automate the creation of the file for each feature that needs to be written about. e.g. you would do ./new_feature.sh and then enter "text-shadow" if you want to create a markdown file for the text-shadow feature. There is a test.md if you want to refer to (but really the shell script should do all the prompting for you to get set up). It even starts your default editor for you with the newly created file if you have the $EDITOR set up in your PATH.
  • features.json is retired, only to be used for reference at best (as if its any useful).
  • Plan is to port content directly from the modernizr wiki for now, link to caniuse data for more info.
  • Likely, the templates might change in the meanwhile, I welcome your feedback on this setup. If you have better ideas, lemme know!
So new workflow for adding content here would be to run ./new_feature.sh. But everything else remains the same.
Nov 7 2011
Branch now uses node and compass!
July 9 2011
A very basic idea of how this would look like. Lame filters and colors. See: http://dl.dropbox.com/u/952/gfs/index.html
"How do I use prefixes" would link to:
  1. Where all prefixes occur (css properties, values, DOM interfaces).
  2. How to use modernizr's prefix-returning function for use in your script.
  3. A reduced snippet from there?
  4. Graceful degradation guidelines
  5. Link to Tantek wiki page on why we have prefixes (and when we wont have them).
"Tools for Feature Support":
  1. Css3please.com
  2. modernizr polyfill wiki
  3. modernizr
  4. CSS Preprocessors?
  5. caniuse.com?
Context
Started at: http://oksoclap.com/gfs
About
Graded Feature Support: Look up web technologies and find out if they are ready for use.
html5please.us/
Resources
Readme
Activity
Stars
1 star
Watchers
1 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors
Languages