{"id":1159217,"date":"2023-07-11T08:14:36","date_gmt":"2023-07-11T12:14:36","guid":{"rendered":"https:\/\/www.prime-wow.com\/?p=1159217"},"modified":"2023-07-11T08:14:36","modified_gmt":"2023-07-11T12:14:36","slug":"our-code-editor-is-open-source","status":"publish","type":"post","link":"https:\/\/www.prime-wow.com\/?p=1159217","title":{"rendered":"Our Code Editor is open source"},"content":{"rendered":"<p>A couple of months ago <a href=\"https:\/\/www.raspberrypi.org\/blog\/code-editor-beta-testing\/\">we announced<\/a> that you can test the online text-based Code Editor we\u2019re building to help young people aged 7 and older learn to write code. Now we\u2019ve made the code for the Editor open source so people can repurpose and contribute to it.<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-blog-entry\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"434\" src=\"https:\/\/www.prime-wow.com\/wp-content\/uploads\/2023\/07\/Screenshot-2023-04-04-at-14.58.04-800x434-1.png\" alt=\"The interface of the beta version of the Raspberry Pi Foundation's Code Editor.\" class=\"wp-image-83583\" \/><\/figure>\n<\/div>\n<h2 class=\"wp-block-heading\">How can you use the Code Editor?<\/h2>\n<p>You and your learners can try out the Code Editor in the first two projects of our <a href=\"https:\/\/projects.raspberrypi.org\/en\/pathways\/python-intro-code-editor\" target=\"_blank\" rel=\"noreferrer noopener\">\u2018Intro to Python\u2019 path<\/a>. We\u2019ve included <a href=\"https:\/\/form.raspberrypi.org\/f\/code-editor-feedback\" target=\"_blank\" rel=\"noreferrer noopener\">a feedback form<\/a> for you to let us know what you think about the Editor.<\/p>\n<ul>\n<li>The Editor lets you run code straight in the browser, with no setup required.<\/li>\n<li>It makes getting started with text-based coding easier thanks to its simple and intuitive interface.<\/li>\n<li>If you\u2019re logged into your Raspberry Pi Foundation account, your code in the Editor is automatically saved.<\/li>\n<li>If you\u2019re not logged in, your code changes persist for the session, so you can refresh or close the tab without losing your work.<\/li>\n<li>You can download your code to your computer too.<\/li>\n<\/ul>\n<p>Since the Editor lets learners save their code using their Raspberry Pi Foundation account, it\u2019s easy for them to build on projects they\u2019ve started in the classroom or at home, or bring a project they\u2019ve started at home to their coding club.<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" loading=\"lazy\" width=\"500\" height=\"401\" src=\"https:\/\/www.prime-wow.com\/wp-content\/uploads\/2023\/07\/Photo_3-500x401-1.jpe\" alt=\"Two kids show off their Python projects in the Code Editor.\" class=\"wp-image-84487\" \/><\/figure>\n<\/div>\n<p><a href=\"https:\/\/projects.raspberrypi.org\/en\/pathways\/python-intro-code-editor\" target=\"_blank\" rel=\"noreferrer noopener\">Python is the first programming language our Code Editor supports<\/a> because it\u2019s popular in schools, CoderDojos, and Code Clubs, as well as in industry. We\u2019ll soon be adding support for web development languages (HTML\/CSS\/JavaScript).<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large is-resized\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/www.prime-wow.com\/wp-content\/uploads\/2023\/07\/Screenshot-2023-04-04-at-15.00.25-500x505-1.png\" alt=\"A text output in the beta version of the Raspberry Pi Foundation's Code Editor.\" class=\"wp-image-83587\" width=\"500\" height=\"505\" \/><\/figure>\n<\/div>\n<h2 class=\"wp-block-heading\">Putting ease of use and accessibility front and centre<\/h2>\n<p>We know that starting out with new programming tools can be tricky and add to the cognitive load of learning new subject matter itself. That\u2019s why our Editor has a simple and accessible user interface and design:<\/p>\n<ul>\n<li>You can easily find key functions, such as how to write and run code, how to save or download your code, and how to check your code.<\/li>\n<li>You can switch between dark and light mode.<\/li>\n<li>You can enlarge or reduce the text size in input and output, which is especially useful for people with visual impairments and for educators and volunteers who want to demonstrate something to a group of learners.<\/li>\n<\/ul>\n<p>We\u2019ll expand the Editor\u2019s functionalities as we go. For example, at the moment we\u2019re looking at how to improve the Editor\u2019s user interface (UI) for better mobile support.<\/p>\n<p>If there\u2019s a feature you think would help the Editor become more accessible and more suitable for young learners, or make it better for your classroom or club, please let us know via <a href=\"https:\/\/form.raspberrypi.org\/4873313\" target=\"_blank\" rel=\"noreferrer noopener\">the feedback form<\/a>.<\/p>\n<h2 class=\"wp-block-heading\">The open-source code for the Code Editor<\/h2>\n<p>Our vision is that every young person develops the knowledge, skills, and confidence to use digital technologies effectively, and to be able to critically evaluate these technologies and confidently engage with technological change. We\u2019re part of a global community that shares that vision, so we\u2019ve made the Editor available as an open-source project. That means other projects and organisations focussed on helping people learn about coding and digital technologies can benefit from the work.<\/p>\n<h3 class=\"wp-block-heading\">How did we build the Editor? An overview<\/h3>\n<p>To support the widest possible range of learners, we\u2019ve designed the Code Editor application to work well on constrained devices and low-bandwidth connections. Safeguarding, accessibility, and data privacy are also key considerations when we build digital products at the Foundation. That\u2019s why we decided to design the front end of the Editor to work in a standalone capacity, with Python executed through Skulpt, an entirely in-browser implementation of Python, and code changes persisted in local storage by default. Learners have the option of using a Raspberry Pi Foundation account to save their work, with changes then persisted via calls to a back end application programming interface (API).<\/p>\n<figure class=\"wp-block-gallery has-nested-images columns-default is-cropped wp-block-gallery-1 is-layout-flex\">\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" loading=\"lazy\" width=\"500\" height=\"452\" data-id=\"84502\" src=\"https:\/\/www.prime-wow.com\/wp-content\/uploads\/2023\/07\/Photo_5-Python-Editor-Mission-Zero-500x452-1.jpe\" alt=\"A child at a coding club with their code on screen in the Code Editor.\" class=\"wp-image-84502\" \/><\/figure>\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" loading=\"lazy\" width=\"500\" height=\"433\" data-id=\"83596\" src=\"https:\/\/www.prime-wow.com\/wp-content\/uploads\/2023\/07\/Photo_12-Python-Editor-Mission-Zero-500x433-1.jpe\" alt=\"A young person with her coding project at a laptop.\" class=\"wp-image-83596\" \/><\/figure>\n<\/figure>\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\" \/>\n<p>As safeguarding is always at the core of what we do, we only make features available that comply with our safeguarding policies as well as <a href=\"https:\/\/ico.org.uk\/for-organisations\/guide-to-data-protection\/ico-codes-of-practice\/age-appropriate-design-a-code-of-practice-for-online-services\/\">the ICO\u2019s age-appropriate design code<\/a>. We considered supporting functionality such as image uploads and code sharing, but at the time of writing have decided to not add these features given that, without proper moderation, they present risks to safeguarding.<\/p>\n<p>There\u2019s an amazing community developing a wealth of open-source libraries. We chose to build our text-editor interface using CodeMirror, which has out-of-the-box mobile and tablet support and includes various useful features such as syntax highlighting and keyboard shortcuts. This has enabled us to focus on building the best experience for learners, rather than reinventing the wheel.<\/p>\n<p>Diving a bit more into the technical details:<\/p>\n<ul>\n<li>The UI front end is built in React and deployed using Cloudflare Pages<\/li>\n<li>The API back end is built in Ruby on Rails<\/li>\n<li>The text-editor panel uses <a href=\"https:\/\/codemirror.net\/\">CodeMirror<\/a>, which has best-in-class accessibility through mobile device and screen-reader support, and includes functionality such as syntax highlighting, keyboard shortcuts, and autocompletion<\/li>\n<li>Python functionality is built using <a href=\"https:\/\/skulpt.org\/\">Skulpt<\/a> to enable in-browser execution of code, with custom extensions built to support our learning content<\/li>\n<li>Project code is persisted through calls to our back end API using a mix of REST and GraphQL endpoints<\/li>\n<li>Data is stored in PostgreSQL, which is hosted on Heroku along with our back end API<\/li>\n<\/ul>\n<h3 class=\"wp-block-heading\">Accessing the open-source code<\/h3>\n<p>You can find out more about our Editor\u2019s code for both the UI front end and API back end in our GitHub readme and contributions documentation. These kick-starter docs will help you get up and running faster:<\/p>\n<ul>\n<li><a href=\"https:\/\/github.com\/RaspberryPiFoundation\/editor-ui#readme\" target=\"_blank\" rel=\"noreferrer noopener\">Front end readme<\/a> and <a href=\"https:\/\/github.com\/RaspberryPiFoundation\/editor-ui\/blob\/main\/CONTRIBUTING.md\" target=\"_blank\" rel=\"noreferrer noopener\">front end contributions documentation<\/a><\/li>\n<li><a href=\"https:\/\/github.com\/RaspberryPiFoundation\/editor-api#readme\" target=\"_blank\" rel=\"noreferrer noopener\">Back end readme<\/a> and <a href=\"https:\/\/github.com\/RaspberryPiFoundation\/editor-api\/blob\/main\/CONTRIBUTING.md\" target=\"_blank\" rel=\"noreferrer noopener\">back end contributions documentation<\/a><\/li>\n<\/ul>\n<p>The Editor\u2019s <a href=\"https:\/\/github.com\/RaspberryPiFoundation\/editor-ui\/blob\/main\/LICENSE.txt\" target=\"_blank\" rel=\"noreferrer noopener\">front end<\/a> is licensed as permissively as possible under the <a href=\"https:\/\/www.apache.org\/licenses\/LICENSE-2.0.html\" target=\"_blank\" rel=\"noreferrer noopener\">Apache Licence 2.0<\/a>, and we\u2019ve chosen to <a href=\"https:\/\/github.com\/RaspberryPiFoundation\/editor-api\/blob\/main\/LICENSE.txt\" target=\"_blank\" rel=\"noreferrer noopener\">license the back end<\/a> under the copyleft <a href=\"https:\/\/www.gnu.org\/licenses\/agpl-3.0.en.html\" target=\"_blank\" rel=\"noreferrer noopener\">AGPL V3<\/a> licence. Copyleft licences mean derived works must be licensed under the same terms, including making any derived projects also available to the community.<\/p>\n<p>We\u2019d greatly appreciate your support with developing the Editor further, which you can give by:<\/p>\n<ul>\n<li>Providing feedback on our code or raising a bug as a GitHub Issue in the relevant repository.<\/li>\n<li>Submitting contributions by raising a pull request against the relevant repository.\n<ul>\n<li>On the back end repository we\u2019ll ask you to allow the Raspberry Pi Foundation to reserve the right to re-use your contribution.<\/li>\n<li>You\u2019ll retain the copyright for any contributions on either repository.<\/li>\n<\/ul>\n<\/li>\n<li>Sharing feedback on using the Editor itself through <a href=\"https:\/\/form.raspberrypi.org\/4873313\" target=\"_blank\" rel=\"noreferrer noopener\">the feedback form<\/a>.<\/li>\n<\/ul>\n<p>Our work to develop and publish the Code Editor as an open-source project has been funded by Endless. We thank them for their generous support.<\/p>\n<p>If you are interested in partnering with us to fund this key work, or you are part of an organisation that would like to make use of the Code Editor, please <a href=\"mailto:partners@raspberrypi.org\" target=\"_blank\" rel=\"noreferrer noopener\">reach out to us via email<\/a>.<\/p>\n<p>The post <a rel=\"nofollow\" href=\"https:\/\/www.raspberrypi.org\/blog\/code-editor-open-source\/\">Our Code Editor is open source<\/a> appeared first on <a rel=\"nofollow\" href=\"https:\/\/www.raspberrypi.org\">Raspberry Pi Foundation<\/a>.<\/p>\n<p>&#013;<br \/>\n&#013;<br \/>\nSource: Raspberry Pi &#8211; <a href=\"https:\/\/www.raspberrypi.org\/blog\/code-editor-open-source\/\" target=\"_blank\" rel=\"noopener\">Our Code Editor is open source<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>A couple of months ago we announced that you can test the online text-based Code Editor we\u2019re building to help young people aged 7 and older learn to write code. Now we\u2019ve made the code for the Editor open source &hellip; <a href=\"https:\/\/www.prime-wow.com\/?p=1159217\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":1159218,"comment_status":"open","ping_status":"","sticky":false,"template":"","format":"standard","meta":{"ngg_post_thumbnail":0,"footnotes":""},"categories":[77,110],"tags":[5],"class_list":["post-1159217","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-rpi","category-unfiltered-rss","tag-rpi"],"_links":{"self":[{"href":"https:\/\/www.prime-wow.com\/index.php?rest_route=\/wp\/v2\/posts\/1159217","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.prime-wow.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.prime-wow.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.prime-wow.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.prime-wow.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1159217"}],"version-history":[{"count":0,"href":"https:\/\/www.prime-wow.com\/index.php?rest_route=\/wp\/v2\/posts\/1159217\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.prime-wow.com\/index.php?rest_route=\/wp\/v2\/media\/1159218"}],"wp:attachment":[{"href":"https:\/\/www.prime-wow.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1159217"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.prime-wow.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1159217"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.prime-wow.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1159217"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}