Example Client

Jump to bottom
zalky edited this page Feb 17, 2023 · 3 revisions

Example Client

The example client demonstrates all the functionality of Reflet with two minimal components:

  1. An audio player
  2. A hierarchical form workflow

The example client also has the debugger enabled to demonstrate debugger functionality.

To start the client you must first have a working Clojure installation, as well as npm installed. Then, from the terminal:

npm install; clojure -M:cljs/dev:cljs/client watch dev

This will install the client npm dependencies, build the client JS target, start a code watcher, and load an HTTP server at localhost:8021. Assuming there was no port conflict (in which case shadow-cljs would have printed an alternate port to use), open localhost:8021 in the browser to load the example client.

Safari

The example client works fine on Chrome and Firefox, but Safari's specific approach to auto-play blocking of audio content will result in an error.

If you'd like to try the example client on Safari, you can enable auto-play selectively for localhost in Safari's preferences. Under the Websites tab, and the Auto-Play section, ensure that the localhost website has Allow All Auto-Play set.

Development on Reflet

The debugger SASS is compiled to CSS and bundled in the reflet.css.bundled/css var as part of the library.

If you are developing on Reflet, specifically the debugger, and you want to see live changes as you edit SASS, you will probably want to start both the SASS watcher, which compiles SASS to CSS targets, and the CSS bundler, which bundles the generated CSS targets into the debugger compiled source:

clojure -X:sass/target:css/bundle

However, take care when you have the CSS bundler running. If you attempt something like an interactive git rebase, the bundler might detect changes to the SASS, and automatically inject them into reflet.css.bundle/css, thereby creating unnecessary conflicts. First stop the bundler before proceeding with a rebase.

Next: General Development Tips

Home: Home

Reflet

Features

Other

Clone this wiki locally

, '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
Example Client
Jump to bottom

zalky edited this page Feb 17, 2023
·
3 revisions
Example Client
The example client demonstrates all the functionality of Reflet with
two minimal components:
  1. An audio player
  2. A hierarchical form workflow
The example client also has the debugger enabled to demonstrate
debugger functionality.
To start the client you must first have a working Clojure
installation, as well as npm installed. Then, from the terminal:
npm install; clojure -M:cljs/dev:cljs/client watch dev
This will install the client npm dependencies, build the client JS
target, start a code watcher, and load an HTTP server at
localhost:8021. Assuming there was no port conflict (in which case
shadow-cljs would have printed an alternate port to use), open
localhost:8021 in the browser to load the example client.
Safari
The example client works fine on Chrome and Firefox, but Safari's
specific approach to auto-play blocking of audio content will result
in an error.
If you'd like to try the example client on Safari, you can enable
auto-play selectively for localhost in Safari's preferences. Under
the Websites tab, and the Auto-Play section, ensure that the
localhost website has Allow All Auto-Play set.
Development on Reflet
The debugger SASS is compiled to CSS and bundled in the
reflet.css.bundled/css var as part of the library.
If you are developing on Reflet, specifically the debugger, and you
want to see live changes as you edit SASS, you will probably want to
start both the SASS watcher, which compiles SASS to CSS targets, and
the CSS bundler, which bundles the generated CSS targets into the
debugger compiled source:
clojure -X:sass/target:css/bundle
However, take care when you have the CSS bundler running. If you
attempt something like an interactive git rebase, the bundler might
detect changes to the SASS, and automatically inject them into
reflet.css.bundle/css, thereby creating unnecessary conflicts. First
stop the bundler before proceeding with a rebase.
Next: General Development Tips
Home: Home
Reflet
Features
Other
Clone this wiki locally

, '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
Example Client
Jump to bottom

zalky edited this page Feb 17, 2023
·
3 revisions
Example Client
The example client demonstrates all the functionality of Reflet with
two minimal components:
  1. An audio player
  2. A hierarchical form workflow
The example client also has the debugger enabled to demonstrate
debugger functionality.
To start the client you must first have a working Clojure
installation, as well as npm installed. Then, from the terminal:
npm install; clojure -M:cljs/dev:cljs/client watch dev
This will install the client npm dependencies, build the client JS
target, start a code watcher, and load an HTTP server at
localhost:8021. Assuming there was no port conflict (in which case
shadow-cljs would have printed an alternate port to use), open
localhost:8021 in the browser to load the example client.
Safari
The example client works fine on Chrome and Firefox, but Safari's
specific approach to auto-play blocking of audio content will result
in an error.
If you'd like to try the example client on Safari, you can enable
auto-play selectively for localhost in Safari's preferences. Under
the Websites tab, and the Auto-Play section, ensure that the
localhost website has Allow All Auto-Play set.
Development on Reflet
The debugger SASS is compiled to CSS and bundled in the
reflet.css.bundled/css var as part of the library.
If you are developing on Reflet, specifically the debugger, and you
want to see live changes as you edit SASS, you will probably want to
start both the SASS watcher, which compiles SASS to CSS targets, and
the CSS bundler, which bundles the generated CSS targets into the
debugger compiled source:
clojure -X:sass/target:css/bundle
However, take care when you have the CSS bundler running. If you
attempt something like an interactive git rebase, the bundler might
detect changes to the SASS, and automatically inject them into
reflet.css.bundle/css, thereby creating unnecessary conflicts. First
stop the bundler before proceeding with a rebase.
Next: General Development Tips
Home: Home
Reflet
Features
Other
Clone this wiki locally

, '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
Example Client
Jump to bottom

zalky edited this page Feb 17, 2023
·
3 revisions
Example Client
The example client demonstrates all the functionality of Reflet with
two minimal components:
  1. An audio player
  2. A hierarchical form workflow
The example client also has the debugger enabled to demonstrate
debugger functionality.
To start the client you must first have a working Clojure
installation, as well as npm installed. Then, from the terminal:
npm install; clojure -M:cljs/dev:cljs/client watch dev
This will install the client npm dependencies, build the client JS
target, start a code watcher, and load an HTTP server at
localhost:8021. Assuming there was no port conflict (in which case
shadow-cljs would have printed an alternate port to use), open
localhost:8021 in the browser to load the example client.
Safari
The example client works fine on Chrome and Firefox, but Safari's
specific approach to auto-play blocking of audio content will result
in an error.
If you'd like to try the example client on Safari, you can enable
auto-play selectively for localhost in Safari's preferences. Under
the Websites tab, and the Auto-Play section, ensure that the
localhost website has Allow All Auto-Play set.
Development on Reflet
The debugger SASS is compiled to CSS and bundled in the
reflet.css.bundled/css var as part of the library.
If you are developing on Reflet, specifically the debugger, and you
want to see live changes as you edit SASS, you will probably want to
start both the SASS watcher, which compiles SASS to CSS targets, and
the CSS bundler, which bundles the generated CSS targets into the
debugger compiled source:
clojure -X:sass/target:css/bundle
However, take care when you have the CSS bundler running. If you
attempt something like an interactive git rebase, the bundler might
detect changes to the SASS, and automatically inject them into
reflet.css.bundle/css, thereby creating unnecessary conflicts. First
stop the bundler before proceeding with a rebase.
Next: General Development Tips
Home: Home
Reflet
Features
Other
Clone this wiki locally

, '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
Example Client
Jump to bottom

zalky edited this page Feb 17, 2023
·
3 revisions
Example Client
The example client demonstrates all the functionality of Reflet with
two minimal components:
  1. An audio player
  2. A hierarchical form workflow
The example client also has the debugger enabled to demonstrate
debugger functionality.
To start the client you must first have a working Clojure
installation, as well as npm installed. Then, from the terminal:
npm install; clojure -M:cljs/dev:cljs/client watch dev
This will install the client npm dependencies, build the client JS
target, start a code watcher, and load an HTTP server at
localhost:8021. Assuming there was no port conflict (in which case
shadow-cljs would have printed an alternate port to use), open
localhost:8021 in the browser to load the example client.
Safari
The example client works fine on Chrome and Firefox, but Safari's
specific approach to auto-play blocking of audio content will result
in an error.
If you'd like to try the example client on Safari, you can enable
auto-play selectively for localhost in Safari's preferences. Under
the Websites tab, and the Auto-Play section, ensure that the
localhost website has Allow All Auto-Play set.
Development on Reflet
The debugger SASS is compiled to CSS and bundled in the
reflet.css.bundled/css var as part of the library.
If you are developing on Reflet, specifically the debugger, and you
want to see live changes as you edit SASS, you will probably want to
start both the SASS watcher, which compiles SASS to CSS targets, and
the CSS bundler, which bundles the generated CSS targets into the
debugger compiled source:
clojure -X:sass/target:css/bundle
However, take care when you have the CSS bundler running. If you
attempt something like an interactive git rebase, the bundler might
detect changes to the SASS, and automatically inject them into
reflet.css.bundle/css, thereby creating unnecessary conflicts. First
stop the bundler before proceeding with a rebase.
Next: General Development Tips
Home: Home
Reflet
Features
Other
Clone this wiki locally

, '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
Example Client
Jump to bottom

zalky edited this page Feb 17, 2023
·
3 revisions
Example Client
The example client demonstrates all the functionality of Reflet with
two minimal components:
  1. An audio player
  2. A hierarchical form workflow
The example client also has the debugger enabled to demonstrate
debugger functionality.
To start the client you must first have a working Clojure
installation, as well as npm installed. Then, from the terminal:
npm install; clojure -M:cljs/dev:cljs/client watch dev
This will install the client npm dependencies, build the client JS
target, start a code watcher, and load an HTTP server at
localhost:8021. Assuming there was no port conflict (in which case
shadow-cljs would have printed an alternate port to use), open
localhost:8021 in the browser to load the example client.
Safari
The example client works fine on Chrome and Firefox, but Safari's
specific approach to auto-play blocking of audio content will result
in an error.
If you'd like to try the example client on Safari, you can enable
auto-play selectively for localhost in Safari's preferences. Under
the Websites tab, and the Auto-Play section, ensure that the
localhost website has Allow All Auto-Play set.
Development on Reflet
The debugger SASS is compiled to CSS and bundled in the
reflet.css.bundled/css var as part of the library.
If you are developing on Reflet, specifically the debugger, and you
want to see live changes as you edit SASS, you will probably want to
start both the SASS watcher, which compiles SASS to CSS targets, and
the CSS bundler, which bundles the generated CSS targets into the
debugger compiled source:
clojure -X:sass/target:css/bundle
However, take care when you have the CSS bundler running. If you
attempt something like an interactive git rebase, the bundler might
detect changes to the SASS, and automatically inject them into
reflet.css.bundle/css, thereby creating unnecessary conflicts. First
stop the bundler before proceeding with a rebase.
Next: General Development Tips
Home: Home
Reflet
Features
Other
Clone this wiki locally

, '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
Example Client
Jump to bottom

zalky edited this page Feb 17, 2023
·
3 revisions
Example Client
The example client demonstrates all the functionality of Reflet with
two minimal components:
  1. An audio player
  2. A hierarchical form workflow
The example client also has the debugger enabled to demonstrate
debugger functionality.
To start the client you must first have a working Clojure
installation, as well as npm installed. Then, from the terminal:
npm install; clojure -M:cljs/dev:cljs/client watch dev
This will install the client npm dependencies, build the client JS
target, start a code watcher, and load an HTTP server at
localhost:8021. Assuming there was no port conflict (in which case
shadow-cljs would have printed an alternate port to use), open
localhost:8021 in the browser to load the example client.
Safari
The example client works fine on Chrome and Firefox, but Safari's
specific approach to auto-play blocking of audio content will result
in an error.
If you'd like to try the example client on Safari, you can enable
auto-play selectively for localhost in Safari's preferences. Under
the Websites tab, and the Auto-Play section, ensure that the
localhost website has Allow All Auto-Play set.
Development on Reflet
The debugger SASS is compiled to CSS and bundled in the
reflet.css.bundled/css var as part of the library.
If you are developing on Reflet, specifically the debugger, and you
want to see live changes as you edit SASS, you will probably want to
start both the SASS watcher, which compiles SASS to CSS targets, and
the CSS bundler, which bundles the generated CSS targets into the
debugger compiled source:
clojure -X:sass/target:css/bundle
However, take care when you have the CSS bundler running. If you
attempt something like an interactive git rebase, the bundler might
detect changes to the SASS, and automatically inject them into
reflet.css.bundle/css, thereby creating unnecessary conflicts. First
stop the bundler before proceeding with a rebase.
Next: General Development Tips
Home: Home
Reflet
Features
Other
Clone this wiki locally

, '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
Example Client
Jump to bottom

zalky edited this page Feb 17, 2023
·
3 revisions
Example Client
The example client demonstrates all the functionality of Reflet with
two minimal components:
  1. An audio player
  2. A hierarchical form workflow
The example client also has the debugger enabled to demonstrate
debugger functionality.
To start the client you must first have a working Clojure
installation, as well as npm installed. Then, from the terminal:
npm install; clojure -M:cljs/dev:cljs/client watch dev
This will install the client npm dependencies, build the client JS
target, start a code watcher, and load an HTTP server at
localhost:8021. Assuming there was no port conflict (in which case
shadow-cljs would have printed an alternate port to use), open
localhost:8021 in the browser to load the example client.
Safari
The example client works fine on Chrome and Firefox, but Safari's
specific approach to auto-play blocking of audio content will result
in an error.
If you'd like to try the example client on Safari, you can enable
auto-play selectively for localhost in Safari's preferences. Under
the Websites tab, and the Auto-Play section, ensure that the
localhost website has Allow All Auto-Play set.
Development on Reflet
The debugger SASS is compiled to CSS and bundled in the
reflet.css.bundled/css var as part of the library.
If you are developing on Reflet, specifically the debugger, and you
want to see live changes as you edit SASS, you will probably want to
start both the SASS watcher, which compiles SASS to CSS targets, and
the CSS bundler, which bundles the generated CSS targets into the
debugger compiled source:
clojure -X:sass/target:css/bundle
However, take care when you have the CSS bundler running. If you
attempt something like an interactive git rebase, the bundler might
detect changes to the SASS, and automatically inject them into
reflet.css.bundle/css, thereby creating unnecessary conflicts. First
stop the bundler before proceeding with a rebase.
Next: General Development Tips
Home: Home
Reflet
Features
Other
Clone this wiki locally