How to Text Your Web Server - Codex and The New Modalities of Coding Pt.1

Originally posted at: https://bram.substack.com/p/how-to-text-your-web-server

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');
});

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');
  }
}

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.