BranchesTags

Latest commit

History

5 Commits

Folders and files

NameName
Last commit message
Last commit date
js
js
node_modules
node_modules
README.md
README.md
app.js
app.js
index.html
index.html
package.json
package.json

Repository files navigation

Client-Side Node.JS

This was a simple coding dojo project setup for Sask JavaScript to show how easy it is to manage dependencies using node modules, and setup a simple dev environment with node.

Notes

This is the final stage of the project, we will be going through each of the steps as a code-along dojo at the meetup.

Dependencies

  1. node.js
  2. npm
  3. Various Dependencies listed in package.json

Dojo Steps

Steps:

  1. npm init
  2. view package.json
  3. set private true, explain why
  4. install express with npm
  5. setup an express simple app.js
  6. create an index.html
  7. what is our app going to do?
  8. consume some photos via the flickr api?
  9. go create a flickr account, or login to yours and create an "app"
  10. get a non-commercial api key and secret
  11. npm install request
  12. require the request library, which we'll use to make external requests
  13. setup a proxy to the flickr api to get some pictures back
  14. restart, and see if it works! (note on addons to view json in browser)
  15. kind of annoying having to restart the dev server every time, so let's solve that with node-dev
  16. npm install node-dev --save-dev
  17. setup a script, npm run-script devserver
  18. client-side stuff: let's create a little set of modules to deal with the photos
  19. installing and requiring jquery from within node, to use client-side
  20. configuring express to use browserify and setup a bundle
  21. add the bundle to your index.html
  22. winner :)
  23. photo.searcher
  24. photo.viewer
  25. installing underscore and configuring it for the template function
  26. noticing that our clientside code isn't being refreshed, because the server needs to restart in order for browserify to rebuild our bundle
  27. install wach, setup a dev script to do that.
  28. get things running in our app
  29. creating a standalone bundle with browserify
  30. minify with uglify
  31. setup a script to auto minify for us

License / Usage

This code is made available free of charge. Do what you want with it :)

About

A simple setup to do client-side development with node.js, express and browserify

Resources

Readme
Activity
Custom properties

Stars

4 stars

Watchers

0 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
Latest commit
History
5 Commits
Folders and files
NameName
Last commit message
Last commit date
js
js
node_modules
node_modules
README.md
README.md
app.js
app.js
index.html
index.html
package.json
package.json
Repository files navigation
Client-Side Node.JS
This was a simple coding dojo project setup for Sask JavaScript to show how easy it is to manage dependencies using node modules, and setup a simple dev environment with node.
Notes
This is the final stage of the project, we will be going through each of the steps as a code-along dojo at the meetup.
Dependencies
  1. node.js
  2. npm
  3. Various Dependencies listed in package.json
Dojo Steps
Steps:
  1. npm init
  2. view package.json
  3. set private true, explain why
  4. install express with npm
  5. setup an express simple app.js
  6. create an index.html
  7. what is our app going to do?
  8. consume some photos via the flickr api?
  9. go create a flickr account, or login to yours and create an "app"
  10. get a non-commercial api key and secret
  11. npm install request
  12. require the request library, which we'll use to make external requests
  13. setup a proxy to the flickr api to get some pictures back
  14. restart, and see if it works! (note on addons to view json in browser)
  15. kind of annoying having to restart the dev server every time, so let's solve that with node-dev
  16. npm install node-dev --save-dev
  17. setup a script, npm run-script devserver
  18. client-side stuff: let's create a little set of modules to deal with the photos
  19. installing and requiring jquery from within node, to use client-side
  20. configuring express to use browserify and setup a bundle
  21. add the bundle to your index.html
  22. winner :)
  23. photo.searcher
  24. photo.viewer
  25. installing underscore and configuring it for the template function
  26. noticing that our clientside code isn't being refreshed, because the server needs to restart in order for browserify to rebuild our bundle
  27. install wach, setup a dev script to do that.
  28. get things running in our app
  29. creating a standalone bundle with browserify
  30. minify with uglify
  31. setup a script to auto minify for us
License / Usage
This code is made available free of charge. Do what you want with it :)
About
A simple setup to do client-side development with node.js, express and browserify
Resources
Readme
Activity
Custom properties
Stars
4 stars
Watchers
0 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
Latest commit
History
5 Commits
Folders and files
NameName
Last commit message
Last commit date
js
js
node_modules
node_modules
README.md
README.md
app.js
app.js
index.html
index.html
package.json
package.json
Repository files navigation
Client-Side Node.JS
This was a simple coding dojo project setup for Sask JavaScript to show how easy it is to manage dependencies using node modules, and setup a simple dev environment with node.
Notes
This is the final stage of the project, we will be going through each of the steps as a code-along dojo at the meetup.
Dependencies
  1. node.js
  2. npm
  3. Various Dependencies listed in package.json
Dojo Steps
Steps:
  1. npm init
  2. view package.json
  3. set private true, explain why
  4. install express with npm
  5. setup an express simple app.js
  6. create an index.html
  7. what is our app going to do?
  8. consume some photos via the flickr api?
  9. go create a flickr account, or login to yours and create an "app"
  10. get a non-commercial api key and secret
  11. npm install request
  12. require the request library, which we'll use to make external requests
  13. setup a proxy to the flickr api to get some pictures back
  14. restart, and see if it works! (note on addons to view json in browser)
  15. kind of annoying having to restart the dev server every time, so let's solve that with node-dev
  16. npm install node-dev --save-dev
  17. setup a script, npm run-script devserver
  18. client-side stuff: let's create a little set of modules to deal with the photos
  19. installing and requiring jquery from within node, to use client-side
  20. configuring express to use browserify and setup a bundle
  21. add the bundle to your index.html
  22. winner :)
  23. photo.searcher
  24. photo.viewer
  25. installing underscore and configuring it for the template function
  26. noticing that our clientside code isn't being refreshed, because the server needs to restart in order for browserify to rebuild our bundle
  27. install wach, setup a dev script to do that.
  28. get things running in our app
  29. creating a standalone bundle with browserify
  30. minify with uglify
  31. setup a script to auto minify for us
License / Usage
This code is made available free of charge. Do what you want with it :)
About
A simple setup to do client-side development with node.js, express and browserify
Resources
Readme
Activity
Custom properties
Stars
4 stars
Watchers
0 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
Latest commit
History
5 Commits
Folders and files
NameName
Last commit message
Last commit date
js
js
node_modules
node_modules
README.md
README.md
app.js
app.js
index.html
index.html
package.json
package.json
Repository files navigation
Client-Side Node.JS
This was a simple coding dojo project setup for Sask JavaScript to show how easy it is to manage dependencies using node modules, and setup a simple dev environment with node.
Notes
This is the final stage of the project, we will be going through each of the steps as a code-along dojo at the meetup.
Dependencies
  1. node.js
  2. npm
  3. Various Dependencies listed in package.json
Dojo Steps
Steps:
  1. npm init
  2. view package.json
  3. set private true, explain why
  4. install express with npm
  5. setup an express simple app.js
  6. create an index.html
  7. what is our app going to do?
  8. consume some photos via the flickr api?
  9. go create a flickr account, or login to yours and create an "app"
  10. get a non-commercial api key and secret
  11. npm install request
  12. require the request library, which we'll use to make external requests
  13. setup a proxy to the flickr api to get some pictures back
  14. restart, and see if it works! (note on addons to view json in browser)
  15. kind of annoying having to restart the dev server every time, so let's solve that with node-dev
  16. npm install node-dev --save-dev
  17. setup a script, npm run-script devserver
  18. client-side stuff: let's create a little set of modules to deal with the photos
  19. installing and requiring jquery from within node, to use client-side
  20. configuring express to use browserify and setup a bundle
  21. add the bundle to your index.html
  22. winner :)
  23. photo.searcher
  24. photo.viewer
  25. installing underscore and configuring it for the template function
  26. noticing that our clientside code isn't being refreshed, because the server needs to restart in order for browserify to rebuild our bundle
  27. install wach, setup a dev script to do that.
  28. get things running in our app
  29. creating a standalone bundle with browserify
  30. minify with uglify
  31. setup a script to auto minify for us
License / Usage
This code is made available free of charge. Do what you want with it :)
About
A simple setup to do client-side development with node.js, express and browserify
Resources
Readme
Activity
Custom properties
Stars
4 stars
Watchers
0 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
Latest commit
History
5 Commits
Folders and files
NameName
Last commit message
Last commit date
js
js
node_modules
node_modules
README.md
README.md
app.js
app.js
index.html
index.html
package.json
package.json
Repository files navigation
Client-Side Node.JS
This was a simple coding dojo project setup for Sask JavaScript to show how easy it is to manage dependencies using node modules, and setup a simple dev environment with node.
Notes
This is the final stage of the project, we will be going through each of the steps as a code-along dojo at the meetup.
Dependencies
  1. node.js
  2. npm
  3. Various Dependencies listed in package.json
Dojo Steps
Steps:
  1. npm init
  2. view package.json
  3. set private true, explain why
  4. install express with npm
  5. setup an express simple app.js
  6. create an index.html
  7. what is our app going to do?
  8. consume some photos via the flickr api?
  9. go create a flickr account, or login to yours and create an "app"
  10. get a non-commercial api key and secret
  11. npm install request
  12. require the request library, which we'll use to make external requests
  13. setup a proxy to the flickr api to get some pictures back
  14. restart, and see if it works! (note on addons to view json in browser)
  15. kind of annoying having to restart the dev server every time, so let's solve that with node-dev
  16. npm install node-dev --save-dev
  17. setup a script, npm run-script devserver
  18. client-side stuff: let's create a little set of modules to deal with the photos
  19. installing and requiring jquery from within node, to use client-side
  20. configuring express to use browserify and setup a bundle
  21. add the bundle to your index.html
  22. winner :)
  23. photo.searcher
  24. photo.viewer
  25. installing underscore and configuring it for the template function
  26. noticing that our clientside code isn't being refreshed, because the server needs to restart in order for browserify to rebuild our bundle
  27. install wach, setup a dev script to do that.
  28. get things running in our app
  29. creating a standalone bundle with browserify
  30. minify with uglify
  31. setup a script to auto minify for us
License / Usage
This code is made available free of charge. Do what you want with it :)
About
A simple setup to do client-side development with node.js, express and browserify
Resources
Readme
Activity
Custom properties
Stars
4 stars
Watchers
0 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
Latest commit
History
5 Commits
Folders and files
NameName
Last commit message
Last commit date
js
js
node_modules
node_modules
README.md
README.md
app.js
app.js
index.html
index.html
package.json
package.json
Repository files navigation
Client-Side Node.JS
This was a simple coding dojo project setup for Sask JavaScript to show how easy it is to manage dependencies using node modules, and setup a simple dev environment with node.
Notes
This is the final stage of the project, we will be going through each of the steps as a code-along dojo at the meetup.
Dependencies
  1. node.js
  2. npm
  3. Various Dependencies listed in package.json
Dojo Steps
Steps:
  1. npm init
  2. view package.json
  3. set private true, explain why
  4. install express with npm
  5. setup an express simple app.js
  6. create an index.html
  7. what is our app going to do?
  8. consume some photos via the flickr api?
  9. go create a flickr account, or login to yours and create an "app"
  10. get a non-commercial api key and secret
  11. npm install request
  12. require the request library, which we'll use to make external requests
  13. setup a proxy to the flickr api to get some pictures back
  14. restart, and see if it works! (note on addons to view json in browser)
  15. kind of annoying having to restart the dev server every time, so let's solve that with node-dev
  16. npm install node-dev --save-dev
  17. setup a script, npm run-script devserver
  18. client-side stuff: let's create a little set of modules to deal with the photos
  19. installing and requiring jquery from within node, to use client-side
  20. configuring express to use browserify and setup a bundle
  21. add the bundle to your index.html
  22. winner :)
  23. photo.searcher
  24. photo.viewer
  25. installing underscore and configuring it for the template function
  26. noticing that our clientside code isn't being refreshed, because the server needs to restart in order for browserify to rebuild our bundle
  27. install wach, setup a dev script to do that.
  28. get things running in our app
  29. creating a standalone bundle with browserify
  30. minify with uglify
  31. setup a script to auto minify for us
License / Usage
This code is made available free of charge. Do what you want with it :)
About
A simple setup to do client-side development with node.js, express and browserify
Resources
Readme
Activity
Custom properties
Stars
4 stars
Watchers
0 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
Latest commit
History
5 Commits
Folders and files
NameName
Last commit message
Last commit date
js
js
node_modules
node_modules
README.md
README.md
app.js
app.js
index.html
index.html
package.json
package.json
Repository files navigation
Client-Side Node.JS
This was a simple coding dojo project setup for Sask JavaScript to show how easy it is to manage dependencies using node modules, and setup a simple dev environment with node.
Notes
This is the final stage of the project, we will be going through each of the steps as a code-along dojo at the meetup.
Dependencies
  1. node.js
  2. npm
  3. Various Dependencies listed in package.json
Dojo Steps
Steps:
  1. npm init
  2. view package.json
  3. set private true, explain why
  4. install express with npm
  5. setup an express simple app.js
  6. create an index.html
  7. what is our app going to do?
  8. consume some photos via the flickr api?
  9. go create a flickr account, or login to yours and create an "app"
  10. get a non-commercial api key and secret
  11. npm install request
  12. require the request library, which we'll use to make external requests
  13. setup a proxy to the flickr api to get some pictures back
  14. restart, and see if it works! (note on addons to view json in browser)
  15. kind of annoying having to restart the dev server every time, so let's solve that with node-dev
  16. npm install node-dev --save-dev
  17. setup a script, npm run-script devserver
  18. client-side stuff: let's create a little set of modules to deal with the photos
  19. installing and requiring jquery from within node, to use client-side
  20. configuring express to use browserify and setup a bundle
  21. add the bundle to your index.html
  22. winner :)
  23. photo.searcher
  24. photo.viewer
  25. installing underscore and configuring it for the template function
  26. noticing that our clientside code isn't being refreshed, because the server needs to restart in order for browserify to rebuild our bundle
  27. install wach, setup a dev script to do that.
  28. get things running in our app
  29. creating a standalone bundle with browserify
  30. minify with uglify
  31. setup a script to auto minify for us
License / Usage
This code is made available free of charge. Do what you want with it :)
About
A simple setup to do client-side development with node.js, express and browserify
Resources
Readme
Activity
Custom properties
Stars
4 stars
Watchers
0 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
Latest commit
History
5 Commits
Folders and files
NameName
Last commit message
Last commit date
js
js
node_modules
node_modules
README.md
README.md
app.js
app.js
index.html
index.html
package.json
package.json
Repository files navigation
Client-Side Node.JS
This was a simple coding dojo project setup for Sask JavaScript to show how easy it is to manage dependencies using node modules, and setup a simple dev environment with node.
Notes
This is the final stage of the project, we will be going through each of the steps as a code-along dojo at the meetup.
Dependencies
  1. node.js
  2. npm
  3. Various Dependencies listed in package.json
Dojo Steps
Steps:
  1. npm init
  2. view package.json
  3. set private true, explain why
  4. install express with npm
  5. setup an express simple app.js
  6. create an index.html
  7. what is our app going to do?
  8. consume some photos via the flickr api?
  9. go create a flickr account, or login to yours and create an "app"
  10. get a non-commercial api key and secret
  11. npm install request
  12. require the request library, which we'll use to make external requests
  13. setup a proxy to the flickr api to get some pictures back
  14. restart, and see if it works! (note on addons to view json in browser)
  15. kind of annoying having to restart the dev server every time, so let's solve that with node-dev
  16. npm install node-dev --save-dev
  17. setup a script, npm run-script devserver
  18. client-side stuff: let's create a little set of modules to deal with the photos
  19. installing and requiring jquery from within node, to use client-side
  20. configuring express to use browserify and setup a bundle
  21. add the bundle to your index.html
  22. winner :)
  23. photo.searcher
  24. photo.viewer
  25. installing underscore and configuring it for the template function
  26. noticing that our clientside code isn't being refreshed, because the server needs to restart in order for browserify to rebuild our bundle
  27. install wach, setup a dev script to do that.
  28. get things running in our app
  29. creating a standalone bundle with browserify
  30. minify with uglify
  31. setup a script to auto minify for us
License / Usage
This code is made available free of charge. Do what you want with it :)
About
A simple setup to do client-side development with node.js, express and browserify
Resources
Readme
Activity
Custom properties
Stars
4 stars
Watchers
0 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors
Languages