ChatGPT for web developers

A.k.a. the clickbait of 2023

SUPER MASSIVE 100-page course on ChatGPT

  • 421+ prompts,
  • 56+ resources,
  • $23455+ per month
    And for the next 24 hours, it’s free! I’ll even throw some NFTs in.
    Just:
  • Follow
  • Reply “I’ll bite”

ChatGPT.

Who is that Chatt Gepetto guy? Asks granny, the last person on Earth who hears about ChatGPT. By now it’s all over Twitter, YouTube, and prime-time news.

Every influencer and wannabe talk about ChatGPT. How to dig gold with it. How everybody can produce content without having a clue what are they talking about. I keep hearing that real-estate guy laughing “Look at this shit!” while he is copying from ChatGPT the script for a Udemy course on AI. Yes indeed, look at this shit!

They’re using it to:

Of course, there are people - like me - who are appalled by this trend. I’m horrified that next year this time I’ll see only synthetic content everywhere. I’m horrified that I will not be able to tell if is synthetic or not. I hope, browsers will have built-in detection by then. In the meantime, I’ll keep asking: Is There Anybody Out There?

I don’t think this AI hysteria will go away. Outnumbered and outgunned, we have to grind on. We have to adapt. Stack Overflow searches are down by 60% since ChatGPT was spawned. Even Google sees a decrease in searches.

But!, you ask, Is ChatCPT any good? Oh yes, it’s good. It’s like having a “conversation” with Google Search. It’s better than Google Search because (for now) there are no ads and no SEO-doctored content. It can respond in different styles, it can be who you want it to be. ChatGPT is better than a real person - it remembers the context and progress of each conversation. Eerie. Microsoft wants to tune Bing with ChatGPT. I would be very worried right now if I were Google.

I bet you’re biting your nails that you sold that NVDA stock when the crypto crashed. Guess what, this whole AI bonanza is powered by NVIDIA GPUs too.

I’ve used it last night to solve some mathematical limits - using differential derivates. I’ve used it to write the missing parts of the lost The Book of Programming by Master Yuan-Ma, here’s a snippet:

A symphony of code, a symphony of thought,
A masterpiece of engineering, a problem to be fought.
A journey through the machine, a quest to solve,
A symphony of logic, a story to evolve.

But mostly, I’ve explored how ChatGPT can help me do my job as a web developer.

If it’s that good, will it replace us developers? No. Someday it will, but it’s not quite there yet. ChatGPT works best if you use it as a personal assistant. A sidekick.

It can help a good programmer do the work in less time. It can also make us better “Full Stack” developers. I’m a frontend developer, and more comfortable when I team with a good backend developer. But now that ChatGPT is here, I don’t know, I’m not so nervous when I have to do some backend too.

I don’t like ChatGPT’s name too much, Watson sounds much better. Since I like to talk with “it” as I would with a real person, I’ll refer to it as “he/him”.

I want to call you Watson, it’s that OK?
Yes, you can call me Watson. I’m here to help with any questions you may have!

The problem with ChatGPT

We like it or not, ChatGPT and its older sibling, Github Copilot, will slowly gain traction in our little software development bubble. For better or worse, more and more code will be written with the help of AI. Some of it will be crap, and some will be awesome - like today, when is written without the invisible hand of the AI.

The next 10x developer will have ChatGPT and Copilot as sidekicks. It might not even be a developer but a bored real-estate guy that wants to laugh. Look at this shit!

The problem is clients/managers/businesses will expect us to be more prolific and efficient because of ChatGPT & Copilot.

10 ways in which you can assist me

To find out how ChatGPT can help us:

I’m a software developer. Watson, please list 10 ways in which you can assist me

Sure, here are 10 ways I can help you as a software developer:

  1. Provide code examples and sample solutions to programming problems.
  2. Explain programming concepts and algorithms.
  3. Answer questions about programming languages and frameworks.
  4. Explain best practices for coding and software development.
  5. Help debug and troubleshoot code.
  6. Provide recommendations for tools and libraries to use.
  7. Offer guidance on software architecture and design.
  8. Explain how to optimize code for performance and scalability.
  9. Offer advice on testing and quality assurance.
  10. Discuss the trade-offs and considerations for different technical decisions.

That’s a lot, I should have called it Linus, not Watson. I’m thinking of writing a book about this, no kidding:

SUPER MASSIVE 100-page ebook:
The Ultimate Black Book ChatGPT for Agile Programmers and Dummies

  • 421+ prompts,
  • 56+ pieces of advice,
  • 123+ tips,

Half price at just $1000 $500 for a limited time! The Ultimate Black Book of ChatGPT

For now, let’s remake the list with web-related topics:

I’m a web developer. List 10 ways in which you can assist me

Here are 10 ways I can assist you as a web developer:

  1. Offer advice on web design and user experience.
  2. Explain the basics of web technologies, such as HTML, CSS, and JavaScript.
  3. Provide code examples and sample solutions to common web development problems.
  4. Explain best practices for front-end development, such as accessibility and performance optimization.
  5. Offer guidance on how to use popular front-end frameworks, such as React and Angular.
  6. Provide advice on server-side development and how to integrate with back-end systems.
  7. Discuss the trade-offs and considerations for different technical decisions in web development.
  8. Offer suggestions for security and protection against common web vulnerabilities.
  9. Provide tips for debugging and troubleshooting web applications.
  10. Offer resources for learning about web development, such as online courses and tutorials.

Provide code examples and sample solutions to common web development problems.

To test Watson’s web programming abilities we’ll try to implement a simple website.

My prompt was:

I want a single-page website like those at carrd. It is minimalistic, it contains a picture of a person, their name, and some contact links. Please provide the HTML and CSS for it

HTML and CSS

After some back and forth he generated this

Then I told him to “Add SVG icons to all links” but that took too long. It generates each SVG path character by character…

The initial HTML source was:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>My Profile Page</title>
  </head>
  <body>
    <div class="container">
      <img src="jon.jpeg" alt="Person" style="width: 200px; height: 200px; border-radius: 50%;">
      <h1>Jon Snow</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      <p>
        <a href="https://linkedin.com/in/yourusername">LinkedIn</a> | 
        <a href="https://github.com/yourusername">GitHub</a> | 
        <a href="mailto:youremail@example.com">Email</a>
      </p>
    </div>
  </body>
</html>

The markup is not perfect. Let’s see if we can improve it.

Accessibility

I’ve asked: As an accessibility expert, please check the HTML and the CSS for accessibility issues.

ChatGPT was able to provide some recommendations:

The provided HTML and CSS appear to be accessible, but here are a few additional steps to improve accessibility:

“Provide alternate text for images”: The alt attribute of the img element should be used to describe the image in case the image fails to load.

“Add semantic HTML”: Currently, the HTML is using div elements for structure and style. To make it more accessible, you could consider using semantic HTML elements such as header, main, article, section, footer, etc.

“Use proper headings”: The headings should be used in a proper hierarchy, for example, starting with an h1 for the main page header and then using h2, h3, etc. for subheadings.

“Color contrast”: Ensure the text has enough color contrast with the background color for easy readability for people with visual impairments. You can use an online color contrast checker to verify.

“Keyboard accessibility”: Make sure that all links and buttons can be triggered using only a keyboard.

By implementing these additional steps, your HTML and CSS will be more accessible to users with disabilities.

Here is the result. Why in the world would he replace the entire look & feel with an uglier version? People associate only inaccessible sites with beauty?

But the HTML is much better now:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="styles.css">
    <title>My Profile Page</title>
  </head>
  <body>
    <header>
      <img src="jon.jpeg" alt="Person" class="profile-img">
      <h1>Jon Snow</h1>
      <p>Lorem ipsum dolor sit amet</p>
    </header>
    <main>
      <nav>
        <a href="https://linkedin.com/in/yourusername" class="social-link">LinkedIn</a> | 
        <a href="https://github.com/yourusername" class="social-link">GitHub</a> | 
        <a href="mailto:youremail@example.com" class="social-link">Email</a>
      </nav>
    </main>
  </body>
</html>

We now have semantic HTML tags like header, main, and nav. I would have used an h2 instead of the Lorem ipsum p but it’s fine.

SEO

I know this is a small page, but can we improve it?

The website is for a web developer. How can we improve the SEO?

Here are a few suggestions to improve the SEO of the website:

Page title and description: Add a unique and descriptive title and meta description to each page to give search engines a clear understanding of the content on the page.

Header tags: Make sure to use header tags (H1, H2, etc.) to structure the content on each page and help search engines understand the importance of each section.

Keywords: Research and include relevant keywords in the content, titles, and meta description.

Image optimization: Optimize all images by compressing them and using descriptive, keyword-rich file names and alt text.

Content: Create high-quality, relevant, and original content on the website.

Link building: Build quality inbound links to your website to show search engines its importance and relevance.

Sitemap and robots.txt: Create and submit a sitemap to search engines and use a robots.txt file to control which pages and sections of your site can be crawled.

Mobile-friendliness: Make sure the website is mobile-friendly and responsive, as search engines favor websites that are optimized for mobile devices.

URL structure: Use descriptive, keyword-rich URLs for each page on the website.

Page load speed: Improve the page load speed of the website as search engines consider page load speed as a ranking factor.

By implementing these SEO best practices, you can help improve the visibility and ranking of your website in search engine results.

True to his words, Watson managed to add a description, improve the title, image alt, and the p. He also suggested “correct” links to LinkedIn & co. Not bad.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Profile Page - Jon Snow - Web Developer</title>
    <meta name="description" content="This is the personal profile page of Jon Snow, a web developer. Here you can find his skills, experience and contact information">
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <div class="container">
      <img src="jon.jpeg" alt="Jon Snow, Web Developer" class="person-image">
      <h1>Jon Snow</h1>
      <p>Web Developer</p>
      <p>
        <a href="https://linkedin.com/in/jonsnow">LinkedIn</a> | 
        <a href="https://github.com/jonsnow">GitHub</a> | 
        <a href="mailto:jonsnow@example.com">Email</a>
      </p>
    </div>
  </body>
</html>

Sadly he also lost all the accessibility improvements 😞.

JavaScript

ChatGPT is very good at providing short, focused answers. But when he needs to spit a tone of code, he is not very good. So a good strategy is to divide the answer into several pieces and ask each piece one after the other.

I’ve asked to add a light and dark theme and implement a toggle button between them. The HTML, CSS, and JavaScript he generated were too much for him. He started to truncate the response.

So I’ve asked first for the HTML, then for the CSS, and the for the JavaScript.

Here is how the toggle button works:

const toggleButton = document.getElementById('theme-toggle-button');
const body = document.querySelector('body');

toggleButton.addEventListener('click', () => {
  body.classList.toggle('light-theme');
  body.classList.toggle('dark-theme');
});

To explore more of Watson’s JavaScript skills, I’ve changed tactics and (in a new chat) I’ve asked him:

Provide code examples

My prompt is: I want you to act as a javascript programmer.

I will type empty functions with comments. I want you to fill the function body with the correct code. I included as a comment before the function what the function should do.

The first function, a duration format:

// Format time in duration to a human-readable string, "hh:mm:ss", 
// e.g 121 => '00:02:01', 60 =>  '00:01:00'
function formatDuration(duration) {    
    let result = '';


    return result;
}

Watson was able to fill it. He didn’t respect the formatting, but the function works.

// Format time in duration to a human-readable string, "hh:mm:ss", 
// e.g 121 => '00:02:01', 60 => '00:01:00'
function formatDuration(duration) {
let result = '';
let hours = Math.floor(duration / 3600);
let minutes = Math.floor((duration % 3600) / 60);
let seconds = duration % 60;

result += hours < 10 ? '0' + hours + ':' : hours + ':';
result += minutes < 10 ? '0' + minutes + ':' : minutes + ':';
result += seconds < 10 ? '0' + seconds : seconds;

return result;
}

Another function:

// Blackout word: Given a phrase and a word, replace each word's chars with *, 
// leave all other words as they are. Use replaceAll and repeat
const censor = (phrase, word) => {
    let result = '';
    // your code here

    return result;
}

The response was a function that works:

// Blackout word: Given a phrase and a word, replace each word's chars with *,
// leave all other words as they are. Use replaceAll and repeat
const censor = (phrase = '', word = '') => {
let result = phrase;
const censored = '*'.repeat(word.length);
const regex = new RegExp(`\\b${word}\\b`, 'gi');
result = result.replace(regex, censored);
return result;
};

Help debug and troubleshoot code.

I should provide more context here and make it act as a JavaScript expert or something. But let’s see how he handles out-of-context requests too.

I looked online for some tricky questions related to JavaScript and I found this:

What does each of these statements return? (assume that they are evaluated individually but in order.)

const foo = 'asdf'; //=> ?

foo.bar = 12345; //=> ?

foo; //=> ?

foo.bar; //=> ?

Object.getOwnPropertyNames(foo); //=> ?

Watson responded with:

const foo = 'asdf'; //=> 'asdf'

foo.bar = 12345; //=> Uncaught TypeError: Cannot create property 'bar' on string 'asdf'

foo; //=> 'asdf'

foo.bar; //=> undefined

Object.getOwnPropertyNames(foo); //=> []

The first tricky part here is foo.bar. foo is a string and you can’t set properties on it. Except it throws an error only when the code is evaluated in strict mode (so I guess Watson is right, it should throw.). If foo.bar = 12345 doesn’t throw, when you read foo.bar you get undefined. This is because foo.bar was never set, the operation was ignored, silent error

The Object.getOwnPropertyNames(foo); //=> [] looks wrong. It should either throw an error or return ["0", "1", "2", "3", "length"]

But let him explain how he decided on that response:

const foo = ‘asdf’; declares a constant variable foo and assigns the string value “asdf” to it.

foo.bar = 12345 attempts to add a property bar to the string value “asdf”, but it is not possible to add properties to a string value in JavaScript.

foo; returns the value of foo which is “asdf”.

foo.bar returns undefined because the property bar does not exist on the string value “asdf”.

Object.getOwnPropertyNames(foo) returns [] because “asdf” is a primitive value and does not have any enumerable properties.

So, in summary, attempting to add a property to a string value results in an error and accessing a non-existing property on a primitive value returns undefined.

Reevaluate your response considering all code runs in strict mode

When the code runs in strict mode, the following will occur:

const foo = ‘asdf’; //=> “asdf”

foo.bar = 12345; //=> Uncaught TypeError: Cannot create property ‘bar’ on string ‘asdf’

foo; //=> “asdf”

foo.bar; //=> Uncaught TypeError: Cannot read property ‘bar’ of undefined

Object.getOwnPropertyNames(foo); //=> Uncaught TypeError: Cannot convert undefined or null to object

In strict mode, you cannot add properties to a string primitive value, which is why the first and fourth statements result in errors. The second and third statements are still valid, however, and would return the string “asdf”. The fifth statement is invalid because you cannot pass a string primitive to Object.getOwnPropertyNames as it requires an object.

The last statement about Object.getOwnPropertyNames is still wrong.

Discuss the trade-offs and considerations for different technical decisions in web development.

I want you to act as a software architect. I need you to suggest the tech stack of an online course website. Each course is divided into many pages, each can have text, video, and/or embedded code editors. Access to any course is allowed only to users that pay for that course.

Here’s a suggestion for a tech stack for the online courses website:

Backend:

  • Programming language: Node.js
  • Framework: Express.js
  • Database: MongoDB

Frontend:

  • JavaScript framework: React.js
  • CSS framework: Material-UI or Bootstrap
  • Payment gateway integration:

Stripe API

Embedded code editors:

  • CodeMirror or ACE editor

Video streaming:

  • YouTube or Vimeo API integration

Authentication and authorization:

  • Passport.js or JWT

Note: This is just a suggestion and other technologies could be used as well, based on specific requirements and constraints.

Nothing surprising. A bit vague. But let’s see why he chose React over Angular for example:

Help me decide between React and Angular

React and Angular are both popular JavaScript frameworks for building web applications. Here are some of the key differences between them:

Learning curve: React is relatively easier to learn compared to Angular, which has a steeper learning curve. This is because React is just a library for building user interfaces, while Angular is a full-fledged framework that provides a lot of features and tools out of the box.

Performance: React is known for its fast performance because of its lightweight and modular architecture. Angular, on the other hand, is a bit slower because of its larger code size and more complex architecture.

Community and ecosystem: React has a large and active community and a well-established ecosystem of libraries and tools. Angular, being developed and maintained by Google, also has a large community and a comprehensive set of tools, but it might be more challenging to find solutions to specific problems compared to React.

Flexibility: React provides more flexibility in terms of how the application can be structured and organized. Angular, being a full-fledged framework, provides more structure and guidelines, which can be both a blessing and a curse.

TypeScript support: Angular is built with TypeScript and fully supports it, while React has limited TypeScript support, but can be used with TypeScript through third-party libraries.

Long story short he thinks React is way better. I agree.

I like React but I don’t like that the HTML is empty until React is bootstrapped. What can I do?

If you don’t like the fact that the HTML is empty until React is bootstrapped, you could consider using server-side rendering (SSR) to pre-render the HTML on the server and serve it to the client.

With server-side rendering, the React components are executed on the server, and the generated HTML is sent to the client, so the client receives a fully rendered HTML page right away. This eliminates the delay between the initial loading of the page and the rendering of the React components, making the page appear to load faster.

Next.js is a popular React-based framework that provides built-in support for server-side rendering and can make it relatively easy to implement. To use Next.js for server-side rendering with React, you would write your components in the usual way and then use the Next.js API to render the components on the server.

In conclusion, if you want to eliminate the empty HTML issue with React, server-side rendering with Next.js could be a good solution. However, it is important to consider that server-side rendering can increase the complexity of the application and the server requirements, so it may not be suitable for all projects.

He can provide better answers if you know what to request. But if you know what to request, you know the answer already. It does not have a strong opinion unless you provide as much context as possible.

What is in your opinion the best JavaScript framework?

As an AI language model, I don’t have opinions or personal preferences. The choice of the best JavaScript framework will depend on the specific requirements and constraints of your project.

I want you to teach me Vue.js using a step-by-step tutorial-like material with examples. First, provide an outline of the tutorial

Sure, here’s an outline for a step-by-step Vue.js tutorial:

Introduction to Vue.js:

  • What is Vue.js and its features
  • Setting up the development environment
  • Understanding the Vue.js instance and its properties
  • Components in Vue.js:

Understanding Components in Vue.js

  • Creating and using reusable components
  • Understanding props and custom events
  • Dynamic Components and Async Components

Directives and Event handling in Vue.js: …

Looks like ChatGPT can help us learn new things. One of the tricks here is that you can instruct it to generate personalised texts based on your needs. For example, if you find the text too boring, you can ask ChatGPT to use a funny voice:

Of course! Let’s have some fun with Vue.js!

Introduction to Vue.js: “Yo ho ho and a bottle of Vue.js!” Vue.js is a “pirate’s treasure” of a JavaScript framework for building user interfaces. Arrr matey! It was created by Evan You in 2014 and it’s been growing in popularity ever since. With Vue.js, you’ll be able to:

Reactively bind data to your user interface, making updates a breeze!

Build reusable UI components, making maintenance a walk in the park!

Use a virtual DOM to update your user interface quickly and efficiently!

Rewrite it as a dialog between Jerry Seinfeld and George Costanza

Sure! Let’s bring some humor to learning Vue.js with Jerry Seinfeld and George Costanza:

Jerry: Hey George, have you heard of Vue.js?

George: Vue.js? Never heard of it. What is it?

Jerry: It’s a JavaScript framework for building user interfaces, George. It’s like a Swiss Army Knife for front-end development.

George: So, what does it do?

Jerry: Well, with Vue.js, you can bind data to your user interface and updates happen automatically. Plus, you can build reusable UI components that make maintenance a breeze.

George: That sounds complicated.

Jerry: No, not at all. It’s actually pretty simple. First, you need to set up your development environment with a code editor, local server, and a JavaScript runtime environment like Node.js.

Improve CVs and social profiles

I want you to rewrite my LinkedIn profile so it’s more engaging. Mention more tasks a team lead would do.

Here is the piece of text that needs rewriting:

I design and implement web apps using React and node.js. I love to challenge my creativity by finding solutions to hard problems but I also do a lot of mundane and simple work. I do whatever it takes to get the job done right.

The final goal is to always exceed client expectations. I design and implement web apps using React and node.js. I love to challenge my creativity by finding solutions to hard problems but I also do a lot of mundane and simple work. I do whatever it takes to get the job done right. The final goal is to always exceed client expectations.

Watson came up with a better version. He loves bullet points.

  • An enthusiastic and creative web developer, specializing in React and Node.js
  • Focused on delivering high-quality solutions that exceed client expectations and drive success for the team and the organization
  • A true leader, overseeing the technical direction of web development projects from ideation to implementation, and ensuring the smooth operation of the development team
  • Mentoring junior developers and fostering a collaborative, solution-oriented work environment
  • Consistently sought after for projects requiring innovative solutions and attention to detail Proven ability to design and implement front-end communication, data structures, user interactions, and usability optimizations, while continually seeking to improve performance.

Conclusion

ChatGPT will amaze you with its responses if you ask it questions about things you have no idea about. However, if you already know a lot, ChatGPT may disappoint you.

The best way to use ChatGPT is as a sidekick. Ask very detailed and focused questions on very specific topics and it can help. The more specific and exact you are, the better the answers. If you can provide some examples so ChatGPT follows the logic you expect, you’ll get even better results.

A common mistake is to ask general questions and expect precise answers. Remember, ChatGPT does not know what is in your head, what you need, or what is the context and it does not have opinions. Make the requests as clear as possible.

Want to learn more?