OpenAI's ChatGPT changes everything. Yes, really.
I've been testing out OpenAI's ChatGPT this week: plugging my life bit by bit into it and seeing the results. Bottom Line: This is going to change how developers solve problems and write code, create git comments, analyze agreements and how everyone gets info out of the Infinite Web. Not a nebulous 2-3 years in the future: Right. Fucking. Now.
My trip to the future started with this Youtube video how in the last couple of months three apps I use (Notion, Mem, and Craft.) have adopted "AI" features. Now Francesco D'Alessio at @keepproductive is one of my trusted authorities when it comes to the world of productivity - something I've been living and breathing for at least 20 years. Watch this video, then you'll be ready to try out OpenAI's AI tools, particularly ChatGPT.
Show me the action
- get an OpenAI account. It's free.
- Log into ChatGPT and click into the textbox at the bottom of the page to start conversing with ChatGPT. It's early pre-beta, so it too is free.
- Example #1: Ruby on Rails. Feed ChatGPT the following query: "Code in Ruby on Rails version 7 a note taking application with a TailwindCSS 3 interface, markdown to store and use gem 'coderay' and gem 'redcarpet' to display notes. Saved Notes should be organized in a taxonomy selectable for display from a dropdown menu powered by Alpine.js. Each note should have a date, a topic, the markdown note."
- Here's the results: "Here is an example of how you might write a note taking application in Ruby on Rails with a TailwindCSS 3 interface, using markdown to store and display notes, and using the coderay and redcarpet gems to display code and markdown within notes. This example uses Alpine.js for the dropdown menu for selecting notes by topic."
# Gemfile
# Use TailwindCSS 3 for styling
gem 'tailwindcss', '~> 3.0'
# Use the coderay gem to display code in notes
gem 'coderay'
# Use the redcarpet gem to render markdown in notes
gem 'redcarpet'
# Use Alpine.js for the dropdown menu for selecting notes by topic
gem 'alpinejs'
# app/models/note.rb
class Note < ApplicationRecord
# Use the redcarpet gem to parse markdown in the `body` attribute
extend Redcarpet::Render::HTML
# Use the coderay gem to highlight code blocks in markdown
def markdown(text)
coderayified = CodeRayify.new(:filter_html => true, :hard_wrap => true)
options = {
:fenced_code_blocks => true,
:no_intra_emphasis => true,
:autolink => true,
:strikethrough => true,
:lax_html_blocks => true,
:superscript => true
}
markdown_to_html = Redcarpet::Markdown.new(coderayified, options)
markdown_to_html.render(text)
end
end
# app/controllers/notes_controller.rb
class NotesController < ApplicationController
def index
# Use the `markdown` method to parse markdown in the notes
@notes = Note.all.map(&:markdown)
# Use the `topics` method to get a list of unique topics for the dropdown menu
@topics = Note.pluck(:topic).uniq.sort
end
def show
# Use the `markdown` method to parse markdown in the note
@note = Note.find(params[:id]).markdown
end
end
# app/views/notes/index.html.erb
<h1>Notes</h1>
<%# Use the `topics` variable to generate the options for the dropdown menu %>
<%# Use Alpine.js to show and hide notes based on the selected topic %>
<div x-data="{ open: false }">
<button @click="open = !open">
Select Topic
</button>
<ul x-show="open" @click.away="open = false" x-transition:enter="transition ease-out duration-100" x-transition:enter-start="opacity-0 scale-95" x-transition:enter-end="opacity-100 scale-100" x-transition:leave="transition ease-in duration-75" x-transition:leave-start="opacity-100 scale-100" x-transition:leave-end="opacity-0 scale-95
Not convinced? Example #2: "Create a mockup of a homepage using TailswindCSS with a modern, lively feel to it. Include links to my bio, my resume, and posts I've found interesting in the past week." Here's the code it spat out:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>My Homepage</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css" />
</head>
<body class="bg-gray-100 font-sans">
<nav class="flex items-center justify-between bg-white px-4 py-3 shadow-md">
<div class="flex items-center">
<h1 class="text-2xl font-semibold tracking-tight text-indigo-700">
My Homepage
</h1>
</div>
<div class="flex items-center space-x-4">
<a class="inline-block px-4 py-2 font-medium text-indigo-700 bg-indigo-100 rounded-full hover:bg-indigo-200" href="#">
About Me
</a>
<a class="inline-block px-4 py-2 font-medium text-indigo-700 bg-indigo-100 rounded-full hover:bg-indigo-200" href="#">
Resume
</a>
<a class="inline-block px-4 py-2 font-medium text-indigo-700 bg-indigo-100 rounded-full hover:bg-indigo-200" href="#">
Posts
</a>
</div>
</nav>
<div class="container mx-auto px-4 mt-8">
<div class="max-w-3xl mx-auto text-center">
<h2 class="text-3xl font-semibold text-indigo-700">
Welcome to My Homepage!
</h2>
<p class="mt-4 text-gray-600">
Here you can find links to my bio, resume, and posts that I've found interesting in the past week.
</p>
</div>
</div>
</body>
</html>
Which looks like this on Tailwind Play:
Stack Overflow has "temporarily" banned ChatGPT (and is scared shitless) for the meantime while it scrambles to adjust; Dev.to has embraced the new reality.
Is ChatGPT the be all and end all of AI? obviously not: expect a new version in the new year. Like in a month.
The point I'm trying to make is ChatGPT is a discontinuity in the culture/economy/politics that 2 billion people share on the internet. And it behooves you to start thinking about your personal strategy in this Brave New World to survive, if not prosper.
The implementations of AI are coming furiously to market : Check out HyperWrite by way of an internet-centric tool that is insanely useful. There's a host of developer tools coming down the road - More about them soon.