1<!DOCTYPE html> 2<html> 3 4<head> 5 <meta charset="utf-8"> 6 <title>ZIM JavaScript Canvas Framework - Code Creativity with ZIMjs!</title> 7 8 <!-- for Google --> 9 <meta name="description" 10 content="ZIM - JavaScript Canvas Framework - code colorful apps, games and art with easy-to-learn (and teach) shapes, animations, components and controls using industry standard programming basics - free with a text editor and HTML Browser." /> 11 <meta name="keywords" 12 content="zim, zimjs, createjs, javascript framework, NFT, javascript library, learn javascript, learn to code, interactive media, canvas framework, canvas tutorials, canvas components" /> 13 14 <!-- for Facebook --> 15 <meta property="og:title" content="ZIM - JavaScript Canvas Framework" /> 16 <meta property="og:image" content="https://zimjs.com/vee/promo.jpg" /> 17 <meta property="og:url" content="https://zimjs.com/index.html" /> 18 <meta property="og:description" 19 content="ZIM - Welcome to the modern world of coding! A great place to learn and make professional apps, games, puzzles and sites!" /> 20 21 <!-- for Twitter --> 22 <meta name="twitter:title" content="ZIM - JavaScript Canvas Framework" /> 23 <meta name="twitter:description" 24 content="ZIM - learn and use modern, simple and professional #Code for #Canvas with #JavaScript and #ZIMjs" /> 25 <meta name="twitter:image" content="https://zimjs.com/vee/promo.jpg" /> 26 27 <link href="/020/index.css" rel="stylesheet" type="text/css" /> 28
28<script>const pageName = "zim_020_home";</script>
28 29 30
30<script> 31 window.addEventListener("DOMContentLoaded", () => { 32 const newList = [ 33 '<a href="https://zimjs.com/020.html" class="imageLink"><img src="https://d309knd7es5f10.cloudfront.net/020/banner_zim_020_chart_simple.jpg" style="width:90%; max-width:1200px;" alt="ZIM JavaScript Canvas Framework - Chart Module Pie, Bar, Live Graph, Plot, Word Cloud, Round-Robin Champion Brackets in ZIM 019"></a>', 34 // '<a href="https://zimjs.com/zoom.html" class="imageLink"><img src="https://d309knd7es5f10.cloudfront.net/018/zoom_banner.jpg" style="width:90%; max-width:1200px; margin-top:20px;" alt="ZIM Zoom - meet Dr Abstract and chat about ZIM on a ZOOM call - all are welcome"></a>', 35 // '<a href="https://zimjs.com/018.html" class="imageLink"><img src="https://d309knd7es5f10.cloudfront.net/018/ml5_banner.jpg" style="width:90%; max-width:1200px; margin-top:20px;" alt="Integrated Hand Tracking with ML5 powered by Tensor Flow - pinch interface, body pose, image recognition through machine learning AI"></a>', 36 // '<a href="https://zimjs.com/019.html" class="imageLink"><img src="/019/banner_zim_019_pattern.jpg" style="width:90%; max-width:1200px; margin-top:20px;" alt="ZIM JavaScript Canvas Framework - Monitor, Glitch, Perspective in ZIM 019"></a>', 37 // '<a href="https://zimjs.com/rive/" class="imageLink"><img src="https://d309knd7es5f10.cloudfront.net/017/zim_rive_integration.jpg" style="width:90%; max-width:1200px; margin-top:20px;" alt="ZIM Rive integration for interactive images and animation with Bones StateMachine and more!"></a>', 38 // '<a href="https://zimjs.com/016.html" class="imageLink"><img src="https://d309knd7es5f10.cloudfront.net/016/shaders_banner4.jpg" style="width:90%; max-width:1200px; margin-top:20px;" alt="Shaders on the 2D Canvas with the ZIM JavaScript Canvas Framework - convert from ShaderToy to Fragment and Vertex Shaders on the GPU WebGL GLSL OpenSL"></a>', 39 // '<a href="https://zimjs.com/015.html" class="imageLink"><img src="https://d309knd7es5f10.cloudfront.net/015/textureactive_banner.jpg" style="width:90%; max-width:1200px; margin-top:20px;" alt="TextureActive adds ZIM to three.js for VR interfaces, HUD components, games and puzzles on interactive material meshes"></a>', 40 // '<a href="https://kids.zimjs.org" class="imageLink"><img src="https://d309knd7es5f10.cloudfront.net/014/kids_banner.jpg" style="width:90%; max-width:1200px; margin-top:20px;" alt="ZIM Kids - teach kids how to code JavaScript with an online editor!"></a>', 41 // '<a href="https://instagram.com/zim_code_creativity/" class="imageLink"><img src="https://d309knd7es5f10.cloudfront.net/014/insta_banner.jpg" style="width:90%; max-width:1200px; margin-top:20px;" alt="ZIM on Instagram Social Media news, stories and pictures!"></a>', 42 ]; 43 document.getElementById("new").innerHTML = newList[Math.floor(Math.random() * newList.length)]; 44 }) 45 </script>
45 46 <style> 47 #new { 48 opacity: 80% 49 } 50 51 #new:hover { 52 opacity: 100% 53 } 54 </style>
vendor: 79 bytes, lines 54-56
54 55 56 <script async src="https://www.googletagmanager.com/gtag/js?id=
56G-GSHN2BZVKW
vendor: 21 bytes, lines 56-57
56"></script> 57
57<script>
vendor: 127 bytes, line 57
57window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', '
57UA-184142889-1
vendor: 3 bytes, line 57
57');
57</script>
57 58 59 <link href="/020/common.css" rel="stylesheet" type="text/css" /> 60 <link href="/020/secondary.css" rel="stylesheet" type="text/css" /> 61 62 <!--
62<script>zns=true;</script>
62 --> 63
63<script src="https://zimjs.org/cdn/1.5/createjs.js"></script>
63 64
64<script src="/cdn/019/zim_min.js"></script>
64 65
65<script src="/020/header.js"></script>
65 66 67 <meta name="author" content="Dr Abstract" /> 68 <meta name="copyright" content="Dr Abstract" /> 69 <meta property="og:type" content="article" /> 70 <meta name="twitter:card" content="summary_large_image" /> 71 72 <!-- for Apple --> 73 <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes, minimal-ui" /> 74 <meta name="apple-mobile-web-app-capable" content="yes" /> 75 <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" /> 76 77 <!-- icons --> 78 <link rel="apple-touch-icon-precomposed" sizes="57x57" href="https://zimjs.com/icons/apple-touch-icon-57x57.png" /> 79 <link rel="apple-touch-icon-precomposed" sizes="114x114" href="https://zimjs.com/icons/apple-touch-icon-114x114.png" /> 80 <link rel="apple-touch-icon-precomposed" sizes="72x72" href="https://zimjs.com/icons/apple-touch-icon-72x72.png" /> 81 <link rel="apple-touch-icon-precomposed" sizes="144x144" href="https://zimjs.com/icons/apple-touch-icon-144x144.png" /> 82 <link rel="apple-touch-icon-precomposed" sizes="60x60" href="https://zimjs.com/icons/apple-touch-icon-60x60.png" /> 83 <link rel="apple-touch-icon-precomposed" sizes="120x120" href="https://zimjs.com/icons/apple-touch-icon-120x120.png" /> 84 <link rel="apple-touch-icon-precomposed" sizes="76x76" href="https://zimjs.com/icons/apple-touch-icon-76x76.png" /> 85 <link rel="apple-touch-icon-precomposed" sizes="152x152" href="https://zimjs.com/icons/apple-touch-icon-152x152.png" /> 86 <link rel="apple-touch-icon-precomposed" sizes="180x180" href="https://zimjs.com/icons/apple-touch-icon.png" /> 87 <link rel="icon" type="image/png" href="https://zimjs.com/icons/favicon-32x32.png" sizes="32x32" /> 88 <link rel="icon" type="image/png" href="https://zimjs.com/icons/android-chrome-192x192.png" sizes="192x192" /> 89 <link rel="icon" type="image/png" href="https://zimjs.com/icons/android-chrome-512x512.png" sizes="512x512" /> 90 <meta name="application-name" content="ZIM"/> 91 <meta name="msapplication-TileColor" content="#000000" /> 92 <meta name="msapplication-TileImage" content="https://zimjs.com/icons/mstile-144x144.png" /> 93 <meta name="msapplication-square70x70logo" content="https://zimjs.com/icons/mstile-70x70.png" /> 94 <meta name="msapplication-square150x150logo" content="https://zimjs.com/icons/mstile-150x150.png" /> 95 <meta name="msapplication-wide310x150logo" content="https://zimjs.com/icons/mstile-310x150.png" /> 96 <meta name="msapplication-square310x310logo" content="https://zimjs.com/icons/mstile-310x310.png" /> 97 98 </head> 99 <body> 100 <header> 101 <div id="zim"></div> 102 <div id=zimnav> 103 <h2>Navigation for the ZIM JavaScript Canvas Framework</h2> 104 <a href="https://zimjs.com/about.html">About</a><a href="https://zimjs.com/examples.html">Examples</a><a href="https://zimjs.com/learn.html">Learn</a><a href="https://zimjs.com/editor">Editor</a><a class=linkadjust href="https://zimjs.com/code.html">Code</a><a class=linkadjust href="https://zimjs.com/docs.html">Docs</a><a class=linkadjust href="https://devs.zimjs.com">Devs</a><a class=linkadjust id="goldLink" href="#gold">Gold</a> 105 </div> 106 </header> 107 108 <!-- Google tag (gtag.js) event - delayed navigation helper --> 109 110 <!--
110<script> 111 // Helper function to delay opening a URL until a gtag event is sent. 112 // Call it in response to an action that should navigate to a URL. 113 function gtagSendEvent(url) { 114 115 var callback = function () { 116 if (typeof url === 'string') { 117 window.open(url, '_blank'); 118 } 119 }; 120 gtag('event', 'conversion_event_outbound_click', { 121 'event_callback': callback, 122 'event_timeout': 2000, 123 // <event_parameters> 124 }); 125 return false; 126 } 127 </script>
127 --> 128 129
129<script> 130 131 132 133 const features = [ 134 ["frame.jpg", "Z_VDVQ6"], 135 ["shapes.jpg", "Z_DPJCY"], 136 ["components.jpg", "Z_5JA8Z"], 137 ["paths.jpg", "Z_9DQMQ"], 138 ["sprites.jpg", "Z_ZCDQN"], 139 ["physics.jpg", "Z_D7N7M"], 140 ["text.jpg", "Z_QXHQK"], 141 ["pen.jpg", "Z_JQGNZ"], 142 ["duo.jpg", "Z_AC8YT"], 143 ["vee.jpg", "Z_3PRDC"], 144 ["style.jpg", "Z_XJFBJ"], 145 ["emitter.jpg", "Z_QXMS4"], 146 ["connectors.jpg", "Z_Q7CMJ"], 147 ["animate.jpg", "Z_88PJC"], 148 ["timeline.jpg", "Z_JMADZ"] 149 ]; 150 shuffle(features); 151 152 const pics = []; 153 const ids = []; 154 loop(features, info => { 155 pics.push(info[0]); 156 ids.push(info[1]); 157 }); 158 // could have factored above but want to keep the example simple to use 159 160 const frame2 = new Frame("promo", 820, 200, yellow.darken(.1), null, ready, pics, "https://d309knd7es5f10.cloudfront.net/zim/features/"); 161 function ready(F2, S2, W2, H2) { 162 163 STYLE = {Arrow: {bgColor: purple, rollBgColor: pink}}; 164 const carousel = new Carousel(copy(pics), 1, .2, 0) 165 .center(S2) 166 .cycle(10, 1, true); 167 carousel.tile.tap(() => { 168 zgo("https://zimjs.com/editor/view/" + ids[carousel.selectedIndex]); 169 }); 170 171 STYLE = {corner: 0, bgColor: red}; 172 if (localStorage) { 173 if (!localStorage.demoCount) localStorage.demoCount = -1; 174 if (++localStorage.demoCount % 30 <= 2) new Tip("Press to see Demo", LEFT, TOP, null, 30, 10, null, S2, 1.3).sca(.8).noMouse().show(); 175 } 176 STYLE = {}; 177 178 } // end ready2 179 180 181 const content = ["abstraction.jpg", "chic.jpg", "flirt.jpg", "opartica.jpg", "pac.jpg", "splatter.jpg", "truchet.jpg"]; 182 const frame3 = new Frame("content", 920, 700, "#ddd", null, ready3, content, "https://d309knd7es5f10.cloudfront.net/zim/chic/"); 183 function ready3(F3, S3, W3, H3) { 184 185 STYLE = {Arrow: {bgColor: red, rollBgColor: purple}}; 186 const carousel = new Carousel(content, 1, .2, 50) 187 .scaleTo(S3, 90, 100) 188 .center(S3) 189 .cycle(11, 1, true); 190 carousel.tile.tap(() => { 191 zgo("https://zimjs.com/about.html"); 192 }); 193 STYLE = {}; 194 195 196 } // end ready3 197 198 199 </script>
199 200 201 202 <div id="buildfaster" class="holder"> 203 <a href=https://zimjs.com/about.html#versions><h4>Build Faster</h4></a> 204 </div> 205 206 <div id="holder"> 207 <a href="projection/"><img id="hero" src="020/whiskers_vibe_code_case_study.jpg" alt="AI Vibe Code Prompt Case Study with ZIM JavaScript Canvas Framework"></a> 208 </div> 209 210 <!-- style="margin-top: 1vw; margin-bottom: -.5vw;" --> 211 212 <div class="welcome"> 213 <h1>ZIM is a JavaScript framework for creating interactive experiences, eLearning apps, games, visual tools, and 214 art with <a href="index.html#codeefficiency">dramatically less code</a> and complexity.</h1> 215 </div> 216 217 <div class="tagline"> 218 <img src="https://d309knd7es5f10.cloudfront.net/020/chart.jpg" alt="chart showing ZIM with 2.6 million views in one day"><br> 219 Trusted in production with Millions of app loads every day 220 </div> 221 222 223 224 <div id="whatsnew" class="holder"> 225 <a href=https://zimjs.com/about.html#versions><h4>WHAT'S NEW</h4></a> 226 </div> 227 228 <div class="holder" id="new"> 229 </div> 230 231 <div id="completecode" class="holder"> 232 <a href=https://zimjs.com/editor/zapps> <h4>Complete Code</h4></a> 233 </div> 234 235 <!-- Target component container with ID dialogs --> 236 <div id="dialogs"> 237 <!-- COLUMN 1: LEFT COLUMN --> 238 <div class="column-left"> 239 <!-- Bubble expands on top --> 240 <div class="speech-bubble bubble-left left-spacer"> 241 <div class="bubble-header">Built for the Way People Code Now</div> 242 <div class="bubble-content"> 243 <p>More developers and creators are using AI to assist with code. ZIM is particularly 244 well suited to this. 245 </p> 246 <p> 247 ZIM's library is filled with conveniences, components and controls already available for 248 your canvas app, so AI tools generate more accurate code. There is less 249 hallucination and less manual correction. This saves time and reduces bugs. 250 </p> 251 <p> 252 253 We provide a ready-made ZIM Master Prompt, that you can paste into any AI assistant to 254 make it fluent in ZIM. Drop it in and start building - or stick to manual - your choice!</p> 255 256 <p><a class="arrowlink" href="prompt.html">► MASTER PROMPT</a></p> 257 </div> 258 </div> 259 <!-- Shorter Image locked to the bottom --> 260 <a href="https://antoniocaggiano.ca/about/" class="imagelink" target="antonio"><img src="https://d309knd7es5f10.cloudfront.net/020/pragma_light.png" id="pragma-img" alt="Pragma - ZIM evangelist" class="character-img"></a> 261 </div> 262 263 <!-- COLUMN 2: RIGHT COLUMN --> 264 <div class="column-right"> 265 <!-- Shorter Image locked to the top --> 266 <a href="https://doctorabstract.com" class="imagelink" target="abstract"> 267 <img src="https://d309knd7es5f10.cloudfront.net/020/drabstract_light_logo.png" 268 alt="Dr Abstract - Founder of ZIM" 269 class="character-img" 270 onmouseover="this.src='https://d309knd7es5f10.cloudfront.net/020/drabstract_light_logo2.png';" 271 onmouseout="this.src='https://d309knd7es5f10.cloudfront.net/020/drabstract_light_logo.png';"> 272 </a> 273 274 <!-- Bubble expands underneath --> 275 <div class="speech-bubble bubble-right right-spacer"> 276 277 <div class="bubble-header">Most Canvas Code is too Complex</div> 278 <div class="bubble-content"> 279 <p>Building interactive HTML5 apps often requires multiple libraries, writing 280 low-level canvas code, and spending more time on infrastructure rather than on the experience itself. 281 </p> 282 <p> 283 ZIM changes that. 284 </p> 285 <p> 286 It's a complete JavaScript canvas framework with components, animation, interactivity, layout, 287 and media handling designed so you spend less time reinventing the wheel and more time 288 building what matters. 289 </p> 290 <p> 291 Plus, we have simplified the code itself so working with ZIM is relaxing! 292 </p> 293 <p><a class="arrowlink" href="innovation.html">► INNOVATION</a></p> 294 </div> 295 296 297 </div> 298 </div> 299 </div> 300 301 302 303 <div id="featuredemos" class="holder"> 304 <a href=https://zimjs.com/editor/zapps> <h4>Feature Demos</h4></a> 305 </div> 306 307 <div class="welcome"> 308 <h1>See What ZIM Can Do! Open the demos in the <a href="editor/">ZIM Editor</a> and explore the code.</h1> 309 </div> 310 311 <div id="promo"></div> 312 313 314 315
316 <div id="codeefficiency" class="holder"> 317 <a href=https://zimjs.com/zim/comparison.html> <h4>Code Efficiency</h4></a> 318 </div> 319 320 <div class="welcome"> 321 <h1>ZIM requires, on average, 63% <a href="https://zimjs.com/zim/comparison.html">less code</a> 322 than its competitors. This means faster development, easier maintenance, and fewer bugs.</h1> 323 </div> 324 325 <div class="holder"> 326 <a href="https://zimjs.com/zim/comparison.html" class="imageLink"><img src="https://d309knd7es5f10.cloudfront.net/020/comparison.jpg" id="comparison" 327 alt="Partial Comparison between ZIM and other Frameworks with ZIM at 37% the code the developer codes"></a> 328 </div> 329 330 331 332 333 <div id="applicationuses" class="holder"> 334 <a href=https://zimjs.com/about.html#uses><h4>Application Uses</h4></a> 335 </div> 336 337 <div id=interactivewonders class="welcome"> 338 <h1>Make a variety of <a href="examples.html">Interactive Wonders</a> with ZIM! Select the banners below and expand the MORE link for how.</h1> 339 </div> 340 341 <main> 342 <a href="art.html"><img src="https://d309knd7es5f10.cloudfront.net/ten/genart_2.jpg" 343 alt="GenArt - generative art and making computer art and visualizations with ZIM JavaScript Canvas Framework"></a> 344 <a href="games.html"><img src="https://d309knd7es5f10.cloudfront.net/ten/gamezaps_6.jpg" 345 alt="Canvas Games with ZIM - 2D games, casual games, arcade games, espape games, minigames, flash games, games of chance, isometric games, physics games, simulations, action and educational games good for e-learning, advergaming and gamification"></a> 346 <a href="apps.html"><img src="https://d309knd7es5f10.cloudfront.net/ten/learnapps_2.jpg" 347 alt="Apps - desktop and mobile apps with JavaScript and Canvas - responsive and adaptive design with ZIM Layout class - swipe pages with ZIM Pages class - gesture control with ZIM Gesture for pinch, pan, and rotate"></a> 348 <a href="uiux.html"><img src="https://d309knd7es5f10.cloudfront.net/ten/uiux_2.jpg" 349 alt="UI UX - ZIM canvas components such as slider, dial, button, label, keyboard, color picker, check box, radio buttons, toggle, pane, window, layer, waiter, progress bar, tabs, pad, loader, text area and accessibility"></a> 350 <a href="data.html"><img src="https://d309knd7es5f10.cloudfront.net/ten/datavis_2.jpg" 351 alt="Data Visualization, charts, graphs on the Canvas with JavaScript and ZIM"></a> 352 <a href="ads.html"><img src="https://d309knd7es5f10.cloudfront.net/ten/admuse_2.jpg" 353 alt="Interactive Advertising, admusements, advergaming engaging brands with the ZIM JavaScript Canvas Framework"></a> 354 <a href="logos.html"><img src="https://d309knd7es5f10.cloudfront.net/ten/logoplay.jpg" 355 alt="Interactive Logo - play with branding to build engagement with the JavaScript Canvas and ZIMjs"></a> 356 <a href="puzzles.html"><img src="https://d309knd7es5f10.cloudfront.net/ten/escapepuzzles.jpg" 357 alt="Escape Puzzles - challenge your curiousity, problem solving and intuition!"></a> 358 <a href="infoactives.html"><img src="https://d309knd7es5f10.cloudfront.net/ten/infoactives_2.jpg" 359 alt="Interactive Infographics - infoactives - with the ZIM JavaScript Canavas Framework"></a> 360 <a href="cards.html"><img src="https://d309knd7es5f10.cloudfront.net/ten/wondercards_2.jpg" 361 alt="Wonder Things - gadgets, widgets, inventions and features that defy description"></a> 362 </main> 363 364 365 366 <div id="designdriven" class="holder"> 367 <a href=https://zimjs.com/about.html#vision><h4>Design Driven</h4></a> 368 </div> 369 370 <div class="welcome"> 371 <h1> 372 ZIM is built with a visual thinker's workflow in mind. If you design, illustrate, or create, and want to code without the usual frustration, ZIM was made for you. 373 </h1> 374 </div> 375 376 <div id="content"></div> 377 378 379 380 381 <div id="start" class="holder"> 382 <a href=https://zimjs.com/editor><h4>START</h4></a> 383 </div> 384 385 <div id="editor" class="welcome"> 386 <h1>Open the <a href="https://zimjs.com/editor/view/Z_9B2FV">ZIM Editor</a> and start with a fully commented working example. No setup and no install. 387 See the <a href="https://zimjs.com/cheatsheet.html">Cheat Sheet</a> for your building blocks!</h1> 388 </div> 389 390 <div class="holder"> 391 <a href="https://zimjs.com/editor/view/Z_9B2FV" class="imageLink"><img id="editorpic" 392 src="https://d309knd7es5f10.cloudfront.net/zim/firstSample.jpg"
393 alt="First Example of ZIM - centering and dragging a circle - in ZIM Editor"></a> 394 </div> 395 396 <div class="holder"> 397 <a href="https://zimjs.com/cheatsheet" class="imageLink"><img id="cs" 398 src="https://d309knd7es5f10.cloudfront.net/020/cheatsheet.jpg" style="width:50%; max-width:450px;" 399 alt="ZIM Cheat Sheet - start, display objects, methods, events, controls for the JavaScript Canvas"></a> 400 </div> 401 402 403 404 405 <div id="studio" class="holder"> 406 <a href=https://zimjs.com/studio><h4>STUDIO</h4></a> 407 </div> 408 409 <div class="welcome"> 410 <h1>ZIM also runs on any 3D surface in three.js, meaning your interactive canvas apps work inside 3D environments and VR experiences with <a href="https://zimjs.com/015.html">ZIM TextureActive</a>.</h1> 411 </div> 412 413 <div class="holder"> 414 <!-- Thanks https://www.flaticon.com/authors/dmytro-vyshnevskyi for the VR Icon --> 415 <a href="https://zimjs.com/studio" class="imageLink"><img 416 src="https://d309knd7es5f10.cloudfront.net/020/texture_active_vr_3D_threejs_studio_banner_plus_small2.png" id = "vrpic" 417 alt="ZIM TextureActive Studio - 2D Interactivity in 3D with ZIMjs and threejs"></a> 418 </div> 419 420 421 422 423 <div id="store" class="holder"> 424 <a href=https://zimjs.com/store><h4>STORE</h4></a> 425 </div> 426 427 <div class="welcome"> 428 <h1>See <a href="mobile.html">ZIM Mobile</a> to make PWA mobile apps in FIVE minutes. Browse examples of ZIM-powered mobile experiences in the <a href="store">Zapp Store</a>.</h1> 429 </div> 430 431 <div class="holder"> 432 <a href="https://zimjs.com/store" class="imageLink"><img 433 src="https://d309knd7es5f10.cloudfront.net/014/store_banner_s.jpg" id="storepic" 434 alt="ZIM Zapp Store Mobile Apps with PWA - progressive web apps"></a> 435 </div> 436 437 438 439 440 441 <div id="reviews" class="holder"> 442 <a href=https://zimjs.com/about_arc.html#reviews><h4>REVIEWS</h4></a> 443 </div> 444 445 <div class="welcome" id="reviews"> 446 <h1> 447 <em>Fun to code, powerful and <span style="white-space: nowrap;">easy to learn - <a 448 href="https://zimjs.com/about_arc.html#reviews">Reviews</a></span></em> 449 <br> 450 <hr> 451 <em>The best choice to <span style="white-space: nowrap;">follow Scratch - <a 452 href="https://kids.zimjs.org">ZIM Kids</a></span></em> 453 <br> 454 <hr> 455 <em>A quantum leap in speed <span style="white-space: nowrap;">
455and efficiency - <a 456 href="https://devs.zimjs.com">ZIM Devs</a></span></em> 457 <br> 458 <hr> 459 Join us on our <span style="white-space: nowrap;"><a href="https://zimjs.com/forum" target="_blank">Forum</a> or <a 460 href="https://zimjs.com/discord" target="_blank">Discord</a></span> 461 </h1> 462 </div> 463 464 465 466 <div class="holder" id="awards"> 467 <img src="https://d309knd7es5f10.cloudfront.net/017/award_s.png" style="width:10%; max-width:80px;" 468 alt="Canadian New Media Awards Programmer of the Year 2002"> 469 <img src="https://d309knd7es5f10.cloudfront.net/017/award_s.png" 470 alt="Canadian New Media Awards Eductator of the Year 2008" 471 style="width:10%; max-width:80px; margin-left:50px; margin-right:40px"> 472 <img src="https://d309knd7es5f10.cloudfront.net/017/arts_award_sett.png" 473 style="width:20%; max-width:200px; position:relative; top:4px;" 474 alt="Hamilton Arts Awards - Media Arts 2017 & SETT Talk for School Education Transformation Technology"> 475 <img src="https://d309knd7es5f10.cloudfront.net/017/codeweek_fosdem_coder_dojo.png" 476 style="margin-left:2vw; width:20%; max-width:150px; opacity:80%; margin-right:10px;" 477 alt="Coder Dojo, FOSDEM, CodeWeek Presenters"> 478 <img src="https://d309knd7es5f10.cloudfront.net/017/awards.png" 479 style="margin-left:2.5vw; width:35%; max-width:350px; opacity:90%" 480 alt="Fast, Easy and Effective Code Platform Award, 1st Place Canvas Made Simple, ICT Games Best for Builders Award"> 481 </div> 482 483 484 485 <footer id="gold"> 486 <div id=zimfooternav> 487 <h2>Navigation for the ZIM JavaScript Canvas Framework</h2> 488 <a id="intro" href="https://zimjs.com/intro.html">Intro</a> 489 <a id="map" href="https://zimjs.com/map.html">Map</a> 490 <a id="tips" href="https://zimjs.com/tips.html">Tips</a> 491 <a id="skool" href="https://zimjs.org/skool.html">Skool</a> 492 <a id="kids" href="https://zimjs.org/kids.html">Kids</a> 493 <a id="vids" href="https://zimjs.com/vids.html" target="_blank">Vids</a> 494 <a id="zap" href="https://zimjs.com/beam">Beam</a> 495 <a id="up" href="javascript:window.scrollTo({top: 0});">Top</a> 496 </div> 497 498 <h3>ZIM - JavaScript Canvas Framework - Code Creativity!</h3> 499 500 <div id="socialmedia"> 501 <a class="imageLink" href="https://zimjs.com/instagram" target="_blank"><img class="social" src="/014/images/social_instagram.png" alt="ZIM on Instagram - Social Media for ZIMjs JavaScript Canvas Framework " /></a> 502 <a class="imageLink" href="https://zimjs.com/tiktok" target="_blank"><img class="social" src="/014/images/social_tiktok.png" alt="ZIM on TikTok - Social Media for ZIMjs JavaScript Canvas Framework " /></a> 503 <a class="imageLink" href="https://www.facebook.com/zimjs/" target="_blank"><img class="social" src="https://d309knd7es5f10.cloudfront.net/vee/social_facebook.png" alt="ZIM on Facebook - Social Media for ZIMjs JavaScript Canvas Framework " /></a> 504 <a class="imageLink" href="https://x.com/Dr_Abstract" target="_blank"><img class="social" src="/014/images/social_x.png" alt="ZIM on X - Social Media for ZIMjs JavaScript Canvas Framework " /></a> 505 <a class="imageLink" href="https://www.youtube.com/c/zimlearn" target="_blank"><img class="social" src="https://d309knd7es5f10.cloudfront.net/vee/social_youtube.png" alt="ZIM on YouTube - Social Media for ZIMjs JavaScript Canvas Framework " /></a> 506 <a class="imageLink" href="https://zimjs.com/dev" target="_blank"><img class="social" src="/014/images/social_dev.png" alt="ZIM on Dev.to - Social Media for ZIMjs JavaScript Canvas Framework " /></a> 507 <a class="imageLink" href="https://zimjs.com/medium" target="_blank"><img class="social" src="https://d309knd7es5f10.cloudfront.net/vee/social_medium.png" alt="ZIM on Medium - Social Media for ZIMjs JavaScript Canvas Framework " /></a> 508 <a class="imageLink" href="https://www.patreon.com/zimjs" target="_blank"><img class="social" src="https://d309knd7es5f10.cloudfront.net/vee/social_patreon.png" alt="ZIM on Patreon - Social Media for ZIMjs JavaScript Canvas Framework " /></a> 509 <a class="imageLink" href="https://codepen.io/zimjs" target="_blank"><img class="social" src="https://d309knd7es5f10.cloudfront.net/vee/social_codepen.png" alt="ZIM on CodePen - Social Media for ZIMjs JavaScript Canvas Framework " /></a> 510 <a class="imageLink" href="https://github.com/danzen/zimjs" target="_blank"><img class="social" src="https://d309knd7es5f10.cloudfront.net/vee/social_github.png" alt="ZIM on GitHub - Social Media for ZIMjs JavaScript Canvas Framework " /></a> 511 </div> 512 513<br> 514<a href="https://zimjs.com"><img id=footerlogo src="https://d309knd7es5f10.cloudfront.net/018/zim_javascript_canvas.png" alt="ZIM Code JavaScript for Newbies, Students, Teachers and Professionals" style="margin-bottom:-8px;"></a> 515<br>
516<script> 517 const r=Math.round(Math.random()*1000000); 518 document.write('<img src=/cgi-bin/traffic_plus?company=danzen&page='+pageName+'&r='+r+' width=1 height=1>'); 519</script>
519 520 521 <div id=copy>© <span id="copyyear"></span> ZIM - join us <a target=_blank href="https://forum.zimjs.com">FORUM</a> - grow us <a target=_blank href="https://zimjs.com/donate">PATREON</a></div> 522</footer>
523<script type="module" src="https://static.cloudflareinsights.com/beacon.min.js/v31edd6df95cf4e85bb4c19e7a9bdbcba1788362987495" integrity="sha512-iIg7k2xntmwu6/uSb5tpc/hySgZc4eoL31yB29W6tJFo2akwjPWcEqnCEdJvGexCL0KEQwVYv5BlowfhVz26hg==" data-cf-beacon='{"version":"2024.11.0","token":"e191cdd5384b48b68d3ffac0d1753c69","r":1,"spa":2}' crossorigin="anonymous"></script>
523 524</body> 525</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.