|
36 | 36 |
|
37 | 37 | ;; You want to create a technical presentation with live code examples. |
38 | 38 | ;; Traditional ClojureScript requires: |
| 39 | + |
39 | 40 | ;; - shadow-cljs or Figwheel configuration |
40 | 41 | ;; - Build tool setup and dependencies |
41 | 42 | ;; - Webpack or bundler configuration |
|
75 | 76 | ;; ## How It Works |
76 | 77 |
|
77 | 78 | ;; The flow is straightforward: |
| 79 | + |
78 | 80 | ;; 1. Load Scittle.js from a CDN |
79 | 81 | ;; 2. Load the Reagent plugin |
80 | 82 | ;; 3. Write ClojureScript in a script tag with type="application/x-scittle" |
|
109 | 111 | ;; Thumbnails provide visual context and make navigation instant. |
110 | 112 | ;; |
111 | 113 | ;; **Why thumbnails matter:** |
| 114 | + |
112 | 115 | ;; - Quick overview of all slides |
113 | 116 | ;; - Jump to any section instantly |
114 | 117 | ;; - See where you are in the presentation |
|
131 | 134 | ;; ClojureScript code at runtime, in the browser. |
132 | 135 | ;; |
133 | 136 | ;; **Perfect for:** |
| 137 | + |
134 | 138 | ;; - Interactive tutorials |
135 | 139 | ;; - Live coding demonstrations |
136 | 140 | ;; - Teaching ClojureScript |
|
211 | 215 | ;; ### When to Use Scittle |
212 | 216 |
|
213 | 217 | ;; **Perfect for:** |
| 218 | + |
214 | 219 | ;; - Technical presentations with live demos |
215 | 220 | ;; - Interactive documentation |
216 | 221 | ;; - Quick prototypes and experiments |
|
221 | 226 | ;; ### When to Use Shadow-cljs |
222 | 227 |
|
223 | 228 | ;; **Better for:** |
| 229 | + |
224 | 230 | ;; - Production web applications |
225 | 231 | ;; - Large codebases with many dependencies |
226 | 232 | ;; - Performance-critical applications |
|
251 | 257 | ;; ### Leverage CDN Libraries |
252 | 258 |
|
253 | 259 | ;; Scittle has plugins for popular libraries: |
| 260 | + |
254 | 261 | ;; - **Reagent** - React wrapper (`scittle.reagent`) |
255 | 262 | ;; - **Re-frame** - State management (`scittle.re-frame`) |
256 | 263 | ;; - **Promesa** - Promises (`scittle.promesa`) |
|
259 | 266 | ;; ### Use Browser DevTools |
260 | 267 |
|
261 | 268 | ;; Scittle code is debuggable in Chrome/Firefox DevTools: |
| 269 | + |
262 | 270 | ;; - Set breakpoints in your ClojureScript code |
263 | 271 | ;; - Inspect atoms and state in the console |
264 | 272 | ;; - Use `js/console.log` for quick debugging |
|
267 | 275 | ;; ### Performance Considerations |
268 | 276 |
|
269 | 277 | ;; **Keep it snappy:** |
| 278 | + |
270 | 279 | ;; - Minimize initial script size (under 100KB recommended) |
271 | 280 | ;; - Use lazy loading for heavy computations |
272 | 281 | ;; - Cache expensive calculations in atoms |
|
307 | 316 | ;; **Problem:** Loading scripts from different domains. |
308 | 317 | ;; |
309 | 318 | ;; **Solution:** Either: |
| 319 | + |
310 | 320 | ;; - Host all files on the same domain |
311 | 321 | ;; - Use a CORS proxy for development |
312 | 322 | ;; - Configure server to allow CORS headers |
313 | 323 |
|
314 | 324 | ;; ### 4. Not All npm Packages Work |
315 | 325 |
|
316 | 326 | ;; Scittle can't use npm packages directly. Workarounds: |
| 327 | + |
317 | 328 | ;; - Use CDN versions (unpkg.com, jsdelivr.com) |
318 | 329 | ;; - Look for Scittle-compatible plugins |
319 | 330 | ;; - Use browser-native APIs instead |
320 | 331 |
|
321 | 332 | ;; ### 5. Error Messages |
322 | 333 |
|
323 | 334 | ;; Scittle error messages can be cryptic. Tips: |
| 335 | + |
324 | 336 | ;; - Check browser console for stack traces |
325 | 337 | ;; - Use `(js/console.log)` liberally during development |
326 | 338 | ;; - Test small code snippets in isolation |
|
383 | 395 | ;; Just open an HTML file and start coding. |
384 | 396 | ;; |
385 | 397 | ;; **Perfect for:** |
| 398 | + |
386 | 399 | ;; - Learning ClojureScript |
387 | 400 | ;; - Creating interactive presentations |
388 | 401 | ;; - Building quick prototypes |
389 | 402 | ;; - Teaching and documentation |
390 | 403 | ;; |
391 | 404 | ;; **Remember:** |
| 405 | + |
392 | 406 | ;; - Use Shadow-cljs for production applications |
393 | 407 | ;; - Use Scittle for everything else |
394 | 408 | ;; |
|
0 commit comments