Repl.it Redesigned the Mobile Experience

By

On smartphones, now the focused REPL pane takes up most of the screen. The redesign takes advantage of native mobile design patterns and lets you switch to a different pane from the bottom navigation bar. There are panes for the code editor, the console, and the output.

Python REPL in Repl.it on a Pixel 2 XL phone
A Python REPL in Repl.it on my Pixel 2 XL phone.

Tapping the code in the editor brings up a contextual menu with some options of the desktop version. You can select, search, or paste text, or open the full command palette.

On my Pixel 2 XL phone in Chrome, lines with up to 42 characters fit in the editor’s width. The editor wraps longer lines. But most of the code usually keeps the original indentation and its structure is still clear at a glance. The console pane wraps text, too, so no horizontal scrolling is required.

You can get an idea of what Repl.it looks like on mobile by opening the browser on your device and visiting a Python REPL I set up for testing the mobile interface.  It’s an instance of Repl.it’s Multi-Page-Flask-Template, a Flask app that generates pages based on the slug entered as input.

Repl.it is a multi-language development environment in the cloud. It supports dozens of programming languages and frameworks. It’s my favorite IDE as it works fully in the cloud. This is a killer feature for a Chrome OS enthusiast like me.

Popular posts from this blog

Using a Bluetooth Keyboard on Android

By
Image
Two years ago I bought a cheap Bluetooth keyboard from Amazon.it. At €14, it was mostly an impulse buy for exploring mobile typing on the go and in similar settings , such as workstations with reduced desk space. My FREALL 7INKEYBD-BK Bluetooth keyboard. I initially used the keyboard with the Android tablet and smartphone I had, a 7” Lenovo Tab E7 and a Pixel 2 XL. I later repurposed the keyboard for the devices I replaced those with, a Lenovo Tab M8 HD 8” tablet and a Pixel 4 XL smartphone. Despite the simplicity of operation, it took me some trial and error to figure out how to pair the keyboard with an Android device and what keystrokes insert the characters I need, such as accented letters when writing in Italian. Moreover, I realized I never blogged about my experience with the unit. So I’m posting these notes in case you come across the same or similar keyboards. The keyboard The keyboard is a cheap, compact, plastic chiclet unit that comes with a small foldable stand for a ta
Read more

Lenovo Tab M8 HD Review

By
Image
I bought a Lenovo Tab M8 HD , an 8” Android tablet. It comes with a MediaTek Helio A22 SoC, an IPS panel, 2 GB of RAM, and 32 GB of storage. I ordered the device from Lenovo’s Italian online store for €134. In this post I’ll share my early impressions on the device. The packaging box of the Lenovo Tab M8 HD tablet. Motivation The Lenovo Tab M8 HD replaces the Lenovo Tab E7 7” tablet I bought almost a year and a half earlier. After enjoying the Google Nexus 7 2012 and 2013 tablets I left Android slates for several years. My return to tablets with the November 2019 purchase of the cheap Lenovo Tab E7 was a sort of impulse buy. I wanted an affordable Android slate small enough to be compact but with a large enough screen to help productivity . I also figured it would double as an ebook reading device and let me explore the Android ecosystem. The Tab E7 was nice but limited. The screen didn’t have good touch sensitivity, performance was poor, there was a lot of lag, and the screen was no
Read more

How to Add Code Syntax Highlighting to Blogger

By
Image
On my blog I always wanted to format source code in Python and a couple more languages, but couldn’t find a convenient way. Until I read a tutorial on adding syntax highlighting to Blogger blogs like mine. The Blogger post composer actually provides the monospace Courier font that may be used for source code, but it works well only for inline text . If I apply the Courier font to a block of code, the composer renders each line as a separate paragraph. This leaves too much vertical space that makes the code look ugly. A workaround is to switch to the HTML view in the composer and wrap the block within <pre> ... </pre> tags, which insert the correct line spacing. However, the code doesn’t stand out on the page and there’s room for improving its scannability and visual impact. Fortunately, Blogger is an old dog I can teach new tricks to, like the setup the tutorial I found presents. A Python code snippet with syntax highlighting rendered by highlights.js in a post of the Moo
Read more