Wed, Dec 22, 2021Implementing RUI, Replit's Design System
At Replit, we have a small engineering and design team supporting millions of users. Our secret is investing in good tools that make us more productive. In this blog post we'll give you an insider look into how we implemented one such tool - the Replit design system (or RUI for short). The project started as a collection of growth pains: Designers were stretched thin on multiple projects and they couldn't be involved in small tactical decisions UI was inconsistent across the product Reusing UI code was hard, so engineers built new ones (for example, we had 7 different Avatar components) So, we set to build a design system that would help us scale. The high level goals:
Tue, Dec 14, 2021Repl Space and Templates
When we want to support a new technology, we're faced with the question: "Do we (the Replit team) build this capability into the Replit directly, or can our users add it themselves?". Usually, we want the answer to be the latter. Repls are like personal computers for your projects. And the more these personal computers can be customized, the more they'll be used in creative, unexpected ways. Internally, we refer to the extent to which a Repl can be configured as "Repl Space". So when we talk about building new features, we always ask "can it be done in Repl Space?", which is basically asking if we can build it on Replit. Over the past year, Repl Space has become significantly more powerful, and soon, Replit will be one of the most flexible computing platforms on the planet without compromising its simplicity. Now that we have the technical foundations in place, we're excited to bring more of that power into the product in the form of Templates and some new configuration options. Templates Where can I find templates?
Mon, Dec 13, 2021Ace, CodeMirror, and Monaco: A Comparison of the Code Editors You Use in the Browser
I’ve been working on Replit for roughly six years now, and as the team has grown, I’ve focused on the IDE (what we call the workspace) portion of the product. Naturally, I was increasingly preoccupied with the code editor. While we’ve considered creating a code editor that meets our needs, the complexity involved in developing one, the richness of open-source choices available, and the size of our staff made it a fruitless rabbit hole to enter. Our time is best spent elsewhere. I have had the pleasure (and the pain) of using Ace, Monaco, and CodeMirror in production settings, sometimes simultaneously (more on that later). In this post, I’ll go over some Replit history, my experience using the editors, and how they stack up against one another. If you’re here for a direct comparison, feel free to skip to the end, where I recap and compare. The story Prelude: Ace In the early days of Replit, around 2011, there was no code editor. It was a pure REPL interface, a console with a simple input box. Adding a code editor was an obvious next step, especially if we cater to more complex programs. Code editors give us features like syntax highlighting, editor shortcuts, auto-indentation, search and replace, etc. Cloud9 released Ace at the time as a feature-full, performant web code editor. Ace editor is still actively maintained; it has a rich ecosystem and supports many languages, keybindings and works great in the browser.
Wed, Dec 8, 2021$80m to bring the next billion software creators online
Following our Series A announcement earlier this year, I'm thrilled to announce that we raised Series B financing from new and existing investors. This year alone we've doubled our user base to reach 10m+ users, tripled concurrent containers on our network, and grew traffic to sites and apps on the network by orders of magnitude. This is a major milestone for our team & community. Our mission is to bring the next billion software creators online. To advance towards this mission we will be investing in the following areas: Build the world's most ubiquitous programming environment. Inspire creativity and generate value for creators through community.
Thu, Dec 2, 2021Deploying Django to Replit
Django is a Python framework for building out full-fledged web applications. It’s loved by developers due to its battery-included philosophy and comes preloaded with features you can use to rapidly develop your web application. Authentication and authorization have been previously incorporated into Django, which means you can focus on writing your app because the basic web development functionality has already been done. Deploying Django can be taxing due to the production environment varying from the development environment on your local machine forcing you to use different operating systems and system configurations. Technology like Docker can simplify this process. However, Replit simplifies the process even more by handling environment configuration and dependencies, which means less configuration on your end. Replit also allows for real-time collaboration. You can access Replit on any platform that has an active internet connection, and you can edit your code and connect with other developers anytime and anywhere. In this tutorial, you’ll learn why you should use Replit and how to deploy your Django project to it.
Wed, Dec 1, 2021Replit Blocks Adult Content and Malware
At Replit, we have created a general purpose computing environment that anyone can use to run whatever programs they want, and access whatever services they want. You can run almost any type of software in a repl, including Mac OS, a Commodore 64 emulator, DOOM, or even a web browser. While this is powerful, it poses a few problems for us. There are some types of programs, like cryptocurrency miners and spam bots, that either use too many resources or damage the community as a whole, and as a result we can't allow them. This is especially important considering that a substantial portion of users on Replit are teenagers, many of whom use Replit at school or under parental supervision. We want to continue giving everyone computing superpowers, while still finding a way to protect our users from inappropriate content. That's why, starting this week, we are blocking all internet access to adult content and malware. That means if you run a web browser on Replit, you won't be able to access any objectionable or NSFW websites. How does it work? We did this by enabling the use of Cloudflare's family-friendly DNS resolver by default in all user repls. Visit their website for more information on this resolver and the type of content it blocks. Using Replit as a proxy to bypass school or parental filters violates our Terms of Service. We actively shut down repls that do this, with both automated tools and manual intervention.
Mon, Nov 29, 2021Will Nix Overtake Docker?
In many discussions about Nix, the comparison of Nix and Docker comes up frequently. This question could be dismissed by saying that Nix and Docker are different tools that solve different problems. One is a toolkit for building and deploying containers and the other is a package and configuration manager. However, these tools do have some overlap: they can both be used to create reproducible environments. A reproducible environment is one that can be recreated from scratch in an identical way (ideally bit-for-bit). Practically, this means having the same tools, versions, and configuration between the environments. Reproducible environments are useful to ensure all developers on a project have the exact same set of tools. Additionally, you can develop in an environment that is similar to the production environment -- leading to less surprises when deploying. Both tools can solve the age-old problem of "it works on my machine". While both tools aim to solve this problem, they take different approaches.
Sun, Nov 21, 2021How to Set Up Your Own Mastodon Instance with Replit
With many development tools and even whole development environments moving to the cloud, Replit is at the forefront of this change. Replit is one of the leading cloud, in-browser IDEs with support for fifty-plus programming languages with syntax highlighting and intelligent autocompletion. However, Replit is more than just an IDE in a cloud. With additional features like real-time collaboration, GitHub integration, and detailed edit history, Replit is a full-blown workspace for teams, educators, and interviewers. This guide will show you how to install Mastodon in the Replit environment, showing its versatility and potential.You can follow along with this Repl. What Is Mastodon? Before we start, let me introduce you to Mastodon: an open-source social networking software.
Thu, Nov 11, 2021Announcing File Persistence in Hosted Apps for Hackers
We mostly think of repls as being full computers in the cloud, and one of the goals of the platform team at Replit is to enable people to build almost anything in replspace. In the past, when a file was stored in a repl, it would only be saved when the editor was opened. This went against our goal and made it impossible to write certain servers that changed files at runtime. This was especially hard for newcomers, because that's the easiest way to persist information. Starting today, Hacker and Teams subscribers will be able to write services that accept file uploads or store data in a local database (think SQLite) or text file, regardless of how the repl was started. A demo of what it looks like for a server to be able to save its files: https://sqlite.luisreplit.repl.co What is replspace? replspace is a term we coined up. In operating systems, memory is divided into kernel space and user space. Kernel space is where the kernel executes and provides its services. The kernel can access all of the memory, but the user cannot access the kernel's memory directly. By contrast, user space is all the memory that a user can access without modifying the kernel sources (or creating a kernel module). The term user space has also been used to refer to the programs that are run by users. This memory separation is important because the kernel manages all hardware resources, providing access control and coordination, and provides abstractions that let programs that run in user space make requests to interact with those resources. The kernel has several interfaces so that the user space programs can communicate with the kernel, the most important one being the system call interface. These use the abstractions laid out by the kernel to ensure that users and programs don't interfere with each other and also iron out differences in the underlying hardware and provide a uniform "view" of the resources available to the machine.
Wed, Oct 27, 2021Replit Art Gallery: An introduction to Replit's Illustrator - Joe Baker
Who makes Replit art? Hi! Thats me! My name is Joe and I’m Replit’s illustrator. I have been making art/graphics/multi media for the last 10 years. I studied Visual Media and excelled in experimental artwork. I draw for fun almost daily and I can’t stop thinking about aesthetics and concepts. It started with colouring in books when I was a kid I went from there basically. I have a huge love for making and appreciating art. I’m specifically drawn to art that rocks you to your core! Anything with wild colours, strange or abstract concepts, stuff that makes you feel something. My major influences come from surrealist art, psychedelic comics from the 70’s, 90’s cartoons, pop art, large scale public installations (sculpture and murals) and any festival artwork! My work is a fusion of these influences and I’m so lucky that I now get to create art for Replit on a full time basis.
Mon, Oct 25, 2021Design Systems @ Replit: Better Tokens
Part 1 of a series about our evolving design system, RUI (Replit User Interface). Replit is growing fast, as an application and a team. New features are being added, new people are joining the platform, and new designers and engineers are building it all. Unfortunately, this means that different parts of the product start to look and behave differently, because no single designer or engineer can keep all the interface states in their head. With dozens of people working on Replit, what happens when you want to update your color or text scheme across the whole site? What if you want users to be familiar with how components work anywhere they see them? It doesn't happen by accident — it requires strong infrastructural basics that you can rely on. So, we spent a few months this year building a stronger foundation for our design system. This is how our system is structured now:
- Sun, Oct 24, 2021
Betting on Nix: donating $25K to the NixOS Foundation
As building software grows more like snapping Legos together, how people find and use those Legos becomes more important. That's why we are donating $25,000 to the NixOS Foundation and betting on Nix as the future of software distribution. In software, the Lego pieces are called packages. A package may be some code your program needs to call (a library) or another program your code needs to run. Historically, people have used package managers to find and install packages into their projects. Each language ecosystem has its own package manager. Replit built and open-sourced the Universal Package Manager to unify this fragmented landscape. Package managers are a holdover from the old model of programming, when development environments lived on personal computers. Now that development environments (ahem, repls) can run entirely in the cloud, fetching packages from a central server, unzipping them, and installing them into a filesystem seems shockingly archaic. The future is instant. When you press the run button in a repl, your code should run immediately, not pause to fetch packages. The Nix project unlocks instant repl runs. Nix uses content-addressable storage for its packages. If you know which package you want to use, you can compute its location on the filesystem without having to search a central repository. Which means we can put every single package on a fast disk in the cloud and skip the fetch-unzip-install cycle. When you press run, your program can instantly access all the packages it needs on a drive already mounted into the repl. The future is reproducible. What does that mean? If your repl works today, it should also work the next time you go to run it.
Wed, Oct 13, 2021Solidity on Replit: Diving into Web3
Today, we're announcing our official Solidity development template. Solidity is the language used to create smart contracts, which are programs that run on the Ethereum blockchain. This is important for the Web3 commmunity because there's finally an accessible and collaborative way to learn Solidity, which will unlock thousands of new developers in the decentralized web. You can try it out by creating a new Repl and typing solidity in the search bar. Or, go directly to the template page to fork it or leave feedback. :) Why this matters Lowering barriers to entry is core to Replit. Everything we do is intended to make software creation easier, faster, and more fun. So when new infrastructure and communities (like Ethereum) gain momentum, it's our responsibility to help people create for that new technological universe. So, why not try to build the best blockchain development experience in the world? Replit has a unique advantage here. Among other "web-based IDEs", Replit is a true general purpose computing environment. Every Repl you create is actually a Linux container, meaning everything we build sits on top of a fully functioning operating system. This gives us the flexibility to build basically anything we want. Almost any program or environment you can create locally, we can transform into a URL.
Tue, Oct 12, 2021Faster Nix Repl Startup
For the past few months we have been working on improving our Nix integration. Nix allows users to easily use over 80,000 Linux packages in a repl. Nix opens the door to many exciting tools and applications on the platform. Our goal is for every repl to be backed by Nix. Before we can do that, we need to ensure that the Nix experience is just as good, if not better, than our existing Polygott solution. If you've used a Nix repl, you may have noticed additional loading time when opening your repl. The console would show "Loading Nix environment..." and you'd have to wait for a few seconds. In some cases, you might have waited for tens of seconds. We care about making repls start up as fast as possible and this additional loading time wasn't acceptable. Through some additional caching, we have entirely removed this loading time on many Nix repls. Now, Nix repls will start up just as fast as Polygott-based repls. See below for a before and after demonstration. Before: After:
Mon, Oct 4, 2021Enter the Shadows with Dark Mode
Looking for how to change your Replit theme? Click here. It's spooky season, so we have a spooky feature for you: Dark Mode™ is now available for everyone on Replit! Just open your sidebar and click the moon to enter the shadow realm. Click the sun to switch back. Dark theme will work across the app — from the homepage,