Tue, Oct 4, 2016Introducing Turtle Graphics For Python
Ever since the LOGO programming language educators have been using Turtle Graphics to demonstrate the power of programming to their students while making it fun and interesting.[](preview end) In fact, my first real programming experience was when I was 6 years old learning LOGO at school. I learned how to program the turtle to draw a square and a triangle which I then put together to create a house. However, I was frustrated that I had to keep repeating the code to create a village made from multiple houses -- and that's how discovered loops! It's a natural way for children to learn programming. Here is an example turtle graphic house in repl.it :) So far, we've been focused on what we think was largely missing from the web: running programs that typically require installing a compiler or an interpreter on your computer. However, now that we've built tools for teachers to bring programming to their classroom, many want to use turtle graphics as part of their cirriculum. And that's why we're excited to introduce Turtle Graphics support for Python. To get started just select Python (with Turtle) from the list of languages, import the turtle module and start drawing!
- Wed, Sep 28, 2016
Scheduled Assignments
Today, we're introducing scheduled assignments. Teachers using Repl.it Classroom can now schedule assignments to be published in the future. You can imagine working on your assignment, schedule a publish date, go on vacation, and still have your students receive their assignments at the right time.[](preview end) When the assignment is finally published your students will receive a notification informing them of it. You can get to this menu from the second page in the assignment creation flow. As always, feel free to reach out at [email protected] with feedback. We'd love to hear about how this feature helped you. Or, more importantly, if there is something we can be doing better.
- Thu, Jul 28, 2016
Vagueness to Clarity
Simple design is not only how the product looks like, but more importantly, how the product functions; it’s about creating the easiest and simplest path for the user to accomplish their goal. Usually, simple design comes from complex requirements and a lot of ideas — in order to break it down I usually go through a process that I call Vagueness to Clarity[](preview end). This process requires a deep understanding of the problem to come up with the best possible solution. Most people don’t pay attention to simple products because it feels so right and intuitive when using them — it could be so frictionless to the point that nothing gets in the way of accomplishing the main goal. But simplicity is hard — it maybe counterintuitive that the cleaner the interface, the more thoughts were put into it, and the longer it went through the Vagueness to Clarity process. From vague to complex
- Thu, Jul 21, 2016
Every Project Should Have Its Own REPL
It's no secret we're big fans of REPLs. We believe that immediate access to the programming environment accelerates learning and is generally more productive. REPLs cut out the middleman -- no need to build UIs or scripts for every possible action you might want to take -- just talk to the interpreter directly.[](preview end) In every medium-to-large project we embark on we include a repl.sh script that starts out a REPL in the context of the project. This includes preloaded libraries, custom commands, and a database connection when it makes sense. You can interact with the database, use utility functions, and inspect the environment in whatever way you find useful. This is especially easy in NodeJS; the module that makes up the REPL that ships with it is made into a stand-alone module repl. Once you require('repl') you'll be able to supply it with a custom eval function which you can then use to process the and parse the code in whatever way you find useful before calling a callback with a return value. We love using async/await so we process top-level awaits with babel in the REPL to make it very easy to add, update, or delete from the development database. In the above gif you can see how we can test and iterate on our notifications page by creating notifications from the REPL and see it update instantly!
- Wed, Jun 29, 2016
View Student Performance with Classroom Overview
Before we decided to build repl.it classroom, we paid a visit to one of the schools using us in the classroom. I felt excited and anxious at the same time; I was introduced to the teacher and students in the class, and then my job started as designer observing and paying attention to every single detail.[](preview end) The teacher explained the workflow and had two students assisting her to check on the students. Seeing the teacher and student’s frustration made me see a problem, I noticed that most of the students were trying to communicate their frustrations, but they were either embarrassed or too shy. Others gave up too soon, without even trying. The two assistants solution might have been a good idea, but for students knowing the fact that they’re being watched or might be judged made them hesitant to ask for help. Towards the end of the class I was handed a piece of paper and was asked to list the student names who completed the assignment successfully. A teacher should be able to see where her students are at—to have bird’s-eye view for the classroom so attention can be paid for the ones who need it the most, plus it would be good way to track progress. Hovering around each student individually can be time and energy consuming. Introducing Classroom Overview The Student Overview is a feature of the teacher dashboard that we’re introducing. Where previously you had to go into each assignment to see the progress for each student individually (which ironically mirrors the physical classroom experience described above). The teacher classroom dashboard is now divided into assignment and student sections. The assignments section lists out the assignments published or in draft and allows you to create a new assignment. The student section is all about the students, their names, completion percentages for all their assignments and the current submission status.
- Sun, Jun 26, 2016
Distributed Websocket Rate Limiting
Rate limiting is standard practice for services offering an API. It's used for both protecting against bad actors, for example, attempting DOS attacks and to simply enforce limits on the service. There are many resources on the web on how to implement a rate limiter in your favorite language/stack. However, I couldn't find anything on how to rate limit Websocket connections (they differ in that they are persistent connections).[](preview end) If you're implementing an HTTP API rate limiter and your service endpoint is a single server then it's pretty simple -- you keep an in-memory variable that you increment. Things get trickier, however, when you're serving requests from multiple servers. That's when you start needing a central shared "state". For this, most developers use Redis. In fact, the rate limiting use case is so prevalent in Redis that it gets a mention on the docs for the INCR function: The requirement here is to limit calls to 10 calls per second per IP address. So a key is constructed by concatenating the user's IP address with the current timestamp. This is then incremented with every call and checked to make sure they haven't exceeded the limit. Simple enough (you can also implement this using your favorite language and Redis library). In our case, our code execution API gives our customers and users an HTTP and a Websocket interface. The reason you'd need a persistent connection is to build a stateful interpreter/REPL. But persistent connections costs us system resources because we need to start a container and an interpreter/compiler process that waits for the next command to execute. For this reason we have to enforce a limit on concurrent open connections. The challenge with this is implementing it for a distributed service (we serve our users from different servers with no centralized server managing state). As we've seen above, Redis is the go-to technology to solve this problem. However, our use case differs in that we don't limit calls for a certain time interval, instead our limit is one the total number of open connections at any given time. The first solution that came to mind:
- Fri, Jun 24, 2016
API Docs
[Update Oct 2022: We have retired our API, we are excited by our previous work but we do not have the resources to support this at the moment.] Repl.it's code execution API is an HTTP and WebSocket endpoint that you connect to and send code to execute. You can connect from any device or browser and start executing code. This guide will describe the concepts behind the service, how it can be used, and provide a step-by-step guide for signing up and trying out the service! Code Execution You're probably here because you want to run some user code in an app or website somewhere. Our customers use the Repl.it API for many different things including: In-browser coding environments In-browser coding exercises
- Sat, Jun 18, 2016
Autocomplete Your Code with Replit
Autocomplete plays a big role in how we use software, imagine a world where you have to type full search terms without predictions into google search, ugh, the savagery! Many developers employ this technology when writing code in order to increase their productivity. So we decided to implement this feature to help you become the power user you want to be.[](preview end) BEHOLD! Note: if you're not a fan of autocomplete you can always turn it off from the preferences menu (⋮) at the top left of your editor. We've also been getting many requests to enable renaming the repl from the workspace. Now, after you hit save, you can click at the top to change the name of your repl. Soon, we'll add a way to add tags without having to go to the repls page so you can organize and easily search for your repls.
- Tue, Jun 14, 2016
A Swift REPL
In this age of containers it's much easier to run arbitrary code in the cloud. The harder parts are scaling the service, making it reliable, and —as in this case— creating cool and useful experiences. When we looked at existing Swift REPL implementations on the web we found that none delivered a stateful and interactive environment. Just an editor with a run button.[](preview end) As for us, as much as possible, we try to create an environment similar to the original inspiration for our website: DrScheme (now DrRacket).
- Tue, Jun 14, 2016
Hello World
We're excited to launch this new part of our site.[](preview end) First, we have a place to share with you all the exciting features we're building (things that don't fit in a 140 characters and a GIF). You can also look forward to posts sharing what we learn in engineering and design. Second, we're putting all the informational pages for our product and company here. This way you don't have to download tons of JavaScript that is intended for the development environment when all you want to do is read words. That'll also make it easier for Google to index our stuff. For now, you can check out our new about us page, sign up for our classroom product beta, or checkout our new languages landing pages.