{"id":3546,"date":"2014-10-15T16:16:04","date_gmt":"2014-10-15T23:16:04","guid":{"rendered":"https:\/\/www.tynker.com\/blog\/?p=3546"},"modified":"2023-08-06T13:04:24","modified_gmt":"2023-08-06T20:04:24","slug":"from-tynker-blocks-to-javascript","status":"publish","type":"post","link":"https:\/\/www.tynker.com\/blog\/from-tynker-blocks-to-javascript\/","title":{"rendered":"From Tynker Blocks to JavaScript!"},"content":{"rendered":"<p><em>Note: This post is archived. We have moved onto using Jupyter notebooks on <a href=\"https:\/\/www.tynker.com\/hour-of-code\/counter-hack\" target=\"_blank\" rel=\"noopener\">Counter Hack<\/a> and <a href=\"https:\/\/www.tynker.com\/courses\/javascript-1-sky-pirate-adventure\" target=\"_blank\" rel=\"noopener\">Sky Pirates<\/a>&nbsp;to help kids learn JavaScript.<\/em><\/p>\n<p>We are excited to announce a wonderful feature that will enable kids to learn coding with blocks and then move on to real text based code when they are ready. Using the new <strong>Code View<\/strong> in Tynker workshop, kids can seamlessly move between blocks and code while building games. We have also made a whole host of improvements with the Tynker Workshop!&nbsp;Read on to learn more.<\/p>\n<p>&nbsp;<\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_82_2 counter-hierarchy ez-toc-counter ez-toc-transparent ez-toc-container-direction\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<label for=\"ez-toc-cssicon-toggle-item-69fd196186f8c\" class=\"ez-toc-cssicon-toggle-label\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #206be5;color:#206be5\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #206be5;color:#206be5\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/label><input type=\"checkbox\"  id=\"ez-toc-cssicon-toggle-item-69fd196186f8c\"  aria-label=\"Toggle\" \/><nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/www.tynker.com\/blog\/from-tynker-blocks-to-javascript\/#Transitioning_from_blocks_to_code\" >Transitioning from blocks to code<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.tynker.com\/blog\/from-tynker-blocks-to-javascript\/#All-new_Tynker_Workshop\" >All-new Tynker Workshop<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.tynker.com\/blog\/from-tynker-blocks-to-javascript\/#Theme-based_graphic_assets\" >Theme-based graphic assets<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/www.tynker.com\/blog\/from-tynker-blocks-to-javascript\/#Courses_have_a_fresh_new_look\" >Courses have a fresh new look!&nbsp;<\/a><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"Transitioning_from_blocks_to_code\"><\/span><strong>Transitioning from blocks to code<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Curious about how each Tynker block works? Simply click &nbsp;the new&nbsp;<strong>Code View<\/strong>&nbsp;button to instantly see your code in JavaScript. &nbsp;Toggle back to visual coding by clicking Blocks View. &nbsp;Each visual block maps to a function in JavaScript. Kids will be able to see a one-to-one correlation between the visual blocks and the code and know that it&#8217;s all the same.&nbsp;We believe that this is an excellent way for kids to get comfortable with mainstream programming languages.<\/p>\n<p>Why JavaScript? JavaScript is an open web standard and easily accessible to kids in any web browser, without the need to install compilers and other tools.&nbsp;The code view is read-only at this time. In an upcoming release, we&#8217;ll allow kids to edit code either in JavaScript or using blocks, so that if they are comfortable coding with syntax, they can transition to real text-based coding.<\/p>\n<p>&nbsp;<\/p>\n<h2><span class=\"ez-toc-section\" id=\"All-new_Tynker_Workshop\"><\/span><strong>All-new Tynker Workshop<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Tynker Workshop has a new look with improvements all around. The blocks are bigger making them more readable and easier to snap together. A consolidated Actor Panel is under the Stage. The toolbar has been improved with the most common Stage buttons on the top-left. &nbsp;We&#8217;ve also added multi-line blocks to make it easier to read some of the more complex blocks.<\/p>\n<p style=\"text-align: center;\"><a href=\"http:\/\/images.tynker.com\/blog\/wp-content\/uploads\/tynker-workshop.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-3671\" src=\"https:\/\/images.tynker.com\/blog\/wp-content\/uploads\/tynker-workshop.jpg\" alt=\"Tynker Workshop\" width=\"700\" height=\"545\"><\/a><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Theme-based_graphic_assets\"><\/span>Theme-based graphic assets<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><span style=\"line-height: 1.5em;\">Adventure&#8230;Sci-Fi&#8230;Greeting Cards&#8230;Fantasy&#8230;Spooky &#8211; these are just some of the brand new themed collection of graphics that we have just added to the media library. Using the new organization into themes, kids will be able to quickly find what they want in a theme or mix and match as they like. With a number of original backgrounds and brilliant props to choose from, the Media library is an endless supply of fun!&nbsp;<\/span><\/p>\n<p style=\"text-align: center;\">&nbsp;<a href=\"http:\/\/images.tynker.com\/blog\/wp-content\/uploads\/tynker-media-assets.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-3674\" src=\"https:\/\/images.tynker.com\/blog\/wp-content\/uploads\/tynker-media-assets.jpg\" alt=\"Tynker Media Assets\" width=\"700\" height=\"711\"><\/a><\/p>\n<p>&nbsp;<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Courses_have_a_fresh_new_look\"><\/span><span style=\"line-height: 1.5em;\">Courses have a fresh new look!&nbsp;<\/span><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>The <strong>Introduction to Programming<\/strong>&nbsp;course now has improved graphics and all new badges! All the guide characters have been upgraded to use the new animation engine that makes their motion more fluid and life-like. There are also 16 new puzzle challenges, one per chapter &#8211; try to crack the code!<span style=\"line-height: 1.5em;\"><br \/>\n<\/span><\/p>\n<p><a href=\"http:\/\/images.tynker.com\/blog\/wp-content\/uploads\/tynker-intro-course.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-3675\" src=\"https:\/\/images.tynker.com\/blog\/wp-content\/uploads\/tynker-intro-course.jpg\" alt=\"Tynker Intro Course\" width=\"700\" height=\"541\"><\/a><\/p>\n<p>&nbsp;<\/p>\n<p><a style=\"line-height: 1.5em;\" href=\"http:\/\/images.tynker.com\/blog\/wp-content\/uploads\/new-tynker-workshop.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"alignleft wp-image-3562\" style=\"margin: 5px;\" src=\"https:\/\/images.tynker.com\/blog\/wp-content\/uploads\/new-tynker-workshop.jpg\" alt=\"New Tynker Workshop\" width=\"300\" height=\"259\"><\/a><strong>Happy Coding!<\/strong><\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Note: This post is archived. We have moved onto using Jupyter notebooks on Counter Hack and Sky Pirates&nbsp;to help kids learn JavaScript. We are excited to announce a wonderful feature that will enable kids to learn coding with blocks and then move on to real text based code when they are ready. Using the new Code View in Tynker workshop, [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":3670,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12,511],"tags":[440],"class_list":["post-3546","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ideas-and-tips","category-programming-languages","tag-product"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v23.9 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>From Tynker Blocks to JavaScript! - Tynker Blog<\/title>\n<meta name=\"description\" content=\"Learn how to transition from Tynker Blocks to JavaScript programming. Discover the tools and resources to enhance your coding skills.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.tynker.com\/blog\/from-tynker-blocks-to-javascript\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"From Tynker Blocks to JavaScript! - Tynker Blog\" \/>\n<meta property=\"og:description\" content=\"Learn how to transition from Tynker Blocks to JavaScript programming. Discover the tools and resources to enhance your coding skills.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.tynker.com\/blog\/from-tynker-blocks-to-javascript\/\" \/>\n<meta property=\"og:site_name\" content=\"Tynker Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/Gotynker\/\" \/>\n<meta property=\"article:published_time\" content=\"2014-10-15T23:16:04+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-08-06T20:04:24+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/images.tynker.com\/blog\/wp-content\/uploads\/code-view.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"700\" \/>\n\t<meta property=\"og:image:height\" content=\"267\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Tynker\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@gotynker\" \/>\n<meta name=\"twitter:site\" content=\"@gotynker\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Tynker\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"From Tynker Blocks to JavaScript! - Tynker Blog","description":"Learn how to transition from Tynker Blocks to JavaScript programming. Discover the tools and resources to enhance your coding skills.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.tynker.com\/blog\/from-tynker-blocks-to-javascript\/","og_locale":"en_US","og_type":"article","og_title":"From Tynker Blocks to JavaScript! - Tynker Blog","og_description":"Learn how to transition from Tynker Blocks to JavaScript programming. Discover the tools and resources to enhance your coding skills.","og_url":"https:\/\/www.tynker.com\/blog\/from-tynker-blocks-to-javascript\/","og_site_name":"Tynker Blog","article_publisher":"https:\/\/www.facebook.com\/Gotynker\/","article_published_time":"2014-10-15T23:16:04+00:00","article_modified_time":"2023-08-06T20:04:24+00:00","og_image":[{"width":700,"height":267,"url":"https:\/\/images.tynker.com\/blog\/wp-content\/uploads\/code-view.jpg","type":"image\/jpeg"}],"author":"Tynker","twitter_card":"summary_large_image","twitter_creator":"@gotynker","twitter_site":"@gotynker","twitter_misc":{"Written by":"Tynker","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.tynker.com\/blog\/from-tynker-blocks-to-javascript\/#article","isPartOf":{"@id":"https:\/\/www.tynker.com\/blog\/from-tynker-blocks-to-javascript\/"},"author":{"name":"Tynker","@id":"https:\/\/www.tynker.com\/blog\/#\/schema\/person\/b63acd9ceebe78ea474bfcfbfdac7d57"},"headline":"From Tynker Blocks to JavaScript!","datePublished":"2014-10-15T23:16:04+00:00","dateModified":"2023-08-06T20:04:24+00:00","mainEntityOfPage":{"@id":"https:\/\/www.tynker.com\/blog\/from-tynker-blocks-to-javascript\/"},"wordCount":467,"publisher":{"@id":"https:\/\/www.tynker.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.tynker.com\/blog\/from-tynker-blocks-to-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/images.tynker.com\/blog\/wp-content\/uploads\/code-view.jpg","keywords":["Product News"],"articleSection":["Ideas and Tips","Programming Languages"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.tynker.com\/blog\/from-tynker-blocks-to-javascript\/","url":"https:\/\/www.tynker.com\/blog\/from-tynker-blocks-to-javascript\/","name":"From Tynker Blocks to JavaScript! - Tynker Blog","isPartOf":{"@id":"https:\/\/www.tynker.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.tynker.com\/blog\/from-tynker-blocks-to-javascript\/#primaryimage"},"image":{"@id":"https:\/\/www.tynker.com\/blog\/from-tynker-blocks-to-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/images.tynker.com\/blog\/wp-content\/uploads\/code-view.jpg","datePublished":"2014-10-15T23:16:04+00:00","dateModified":"2023-08-06T20:04:24+00:00","description":"Learn how to transition from Tynker Blocks to JavaScript programming. Discover the tools and resources to enhance your coding skills.","breadcrumb":{"@id":"https:\/\/www.tynker.com\/blog\/from-tynker-blocks-to-javascript\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.tynker.com\/blog\/from-tynker-blocks-to-javascript\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.tynker.com\/blog\/from-tynker-blocks-to-javascript\/#primaryimage","url":"https:\/\/images.tynker.com\/blog\/wp-content\/uploads\/code-view.jpg","contentUrl":"https:\/\/images.tynker.com\/blog\/wp-content\/uploads\/code-view.jpg","width":700,"height":267},{"@type":"BreadcrumbList","@id":"https:\/\/www.tynker.com\/blog\/from-tynker-blocks-to-javascript\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Coding for Kids","item":"https:\/\/www.tynker.com\/"},{"@type":"ListItem","position":2,"name":"Blog","item":"https:\/\/www.tynker.com\/blog\/"},{"@type":"ListItem","position":3,"name":"From Tynker Blocks to JavaScript!"}]},{"@type":"WebSite","@id":"https:\/\/www.tynker.com\/blog\/#website","url":"https:\/\/www.tynker.com\/blog\/","name":"Tynker Blog","description":"Tynker makes it fun and easy to learn computer programming. Get started today with Tynker&#039;s easy-to-learn, visual programming courses designed for young learners in grades K-12.","publisher":{"@id":"https:\/\/www.tynker.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.tynker.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.tynker.com\/blog\/#organization","name":"Tynker - Coding for Kids","url":"https:\/\/www.tynker.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.tynker.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/images.tynker.com\/blog\/wp-content\/uploads\/20220713063303\/appicon-120.png","contentUrl":"https:\/\/images.tynker.com\/blog\/wp-content\/uploads\/20220713063303\/appicon-120.png","width":120,"height":120,"caption":"Tynker - Coding for Kids"},"image":{"@id":"https:\/\/www.tynker.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/Gotynker\/","https:\/\/x.com\/gotynker","https:\/\/www.instagram.com\/tynkercoding\/","https:\/\/www.pinterest.com\/gotynker\/","https:\/\/www.linkedin.com\/company\/tynker"]},{"@type":"Person","@id":"https:\/\/www.tynker.com\/blog\/#\/schema\/person\/b63acd9ceebe78ea474bfcfbfdac7d57","name":"Tynker","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.tynker.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/e763a250a1fd5790919d1e588e78461c1f50971644d40baac7f6176d0a4ea007?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/e763a250a1fd5790919d1e588e78461c1f50971644d40baac7f6176d0a4ea007?s=96&d=mm&r=g","caption":"Tynker"},"description":"Tynker enables children to learn computer programming in a fun and imaginative way. More than 60 million kids worldwide have started learning to code using Tynker.","url":"https:\/\/www.tynker.com\/blog\/author\/tynker\/"}]}},"_links":{"self":[{"href":"https:\/\/www.tynker.com\/blog\/wp-json\/wp\/v2\/posts\/3546","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.tynker.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.tynker.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.tynker.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tynker.com\/blog\/wp-json\/wp\/v2\/comments?post=3546"}],"version-history":[{"count":74,"href":"https:\/\/www.tynker.com\/blog\/wp-json\/wp\/v2\/posts\/3546\/revisions"}],"predecessor-version":[{"id":32926,"href":"https:\/\/www.tynker.com\/blog\/wp-json\/wp\/v2\/posts\/3546\/revisions\/32926"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.tynker.com\/blog\/wp-json\/wp\/v2\/media\/3670"}],"wp:attachment":[{"href":"https:\/\/www.tynker.com\/blog\/wp-json\/wp\/v2\/media?parent=3546"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.tynker.com\/blog\/wp-json\/wp\/v2\/categories?post=3546"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.tynker.com\/blog\/wp-json\/wp\/v2\/tags?post=3546"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}