How to Text Your Web Server

Codex and The New Modalities of Coding Pt.1

Picture this:

You’re a busy 21st-century developer on the go.

You take meetings on the go.

You balance your finances and report to your managers on the go.

You’re a modern business person, and nothing, nothing, not even the annals of time can stop you from being. on. the. go.

In fact, you’ve built up so much inertia from being on the go, that you’re afraid your heart may stop if you stop moving.

---

I have good news for you (not about the heart thing, you should probably see a doctor about that).

Coding can now be added to your list of things you can do on the go.

Twilio, Codex, Live Servers

Coding is one of those activities that traditionally couldn’t be done from your pocket.

In between code’s rigid syntax, the lack of screen real estate on phones, and the CPUs being ineffective to do any real programming, coding on the go seems DOA.

If a great idea hits you on a walk, or while you’re waiting in line at a club, your best bet is to open the Notes app on your phone and pseudocode it out.

However, thanks to OpenAI Codex, we can now translate natural language commands into computer-readable code. We can then use a live server on a remote computer to code from iMessage in real-time.

Want proof? Watch the video below.

Important Code Blocks

To receive messages from Twilio, we set up an Express endpoint. We pass the message from `req.body.Body`.

	router.post('/sms', async (req, res) => {
	const twiml = new MessagingResponse();
	await workflow(`${req.body.Body}`)
	res.writeHead(200, {'Content-Type': 'text/xml'});
	res.end('Message Received');
	});

view raw sms.js hosted with ❤ by GitHub

The main workflow is as follows:

1. Receive a text message

2. Read current .HTML and .css files

3. Is the message changing CSS or HTML?

4. Generate a codex response from the text message

5. Write the new .HTML or .css file

6. Trigger server reload

	const workflow = async function (msg) {
	// read pug and css file we want to update
	let testPug = await fs.readFile('./views/test.pug', 'utf8');
	let testCss = await fs.readFile('./public/stylesheets/test.css', 'utf8');
	let isCSS = false;
	// if message includes the paint emoji, change the CSS file
	if (msg.includes('🎨')) {
	isCSS = true;
	msg = msg.replace('🎨', '');
	}
	else if (msg.includes('🐶')) {
	isCSS = false;
	msg = msg.replace('🐶', '');
	}
	// generate a codex response from a command and rewrite the file with our changes
	if (!isCSS) {
	const tr = await gptCall(testPug, msg, 'pug');
	testPug += "\n" + tr.code.split('\n').map(line => ` ${line}`).join('\n');
	await fs.writeFile('./views/test.pug', testPug, 'utf8');
	} else {
	const tr = await gptCall(testCss, msg, 'css');
	testCss += "\n" + tr.code.trim();
	await fs.writeFile('./public/stylesheets/test.css', testCss, 'utf8');
	}
	}

view raw workflow.js hosted with ❤ by GitHub

Finally, the server updates in real-time to file changes using LiveReload and nodemon. Here is a great tutorial on setting this up.

And that’s it! You can fork, star, play with the full repo here.

Now instead of late-night texts to exes, you can text your server instead. Just don’t text to prod on Fridays.

Till next,

Bram