SlideShare a Scribd company logo
MAXIMILIANO FIRTMAN
ChatGPT and
AI for Web
Developers
@f
i
rt
A Yay-Yay conf for UI Lovers
MAXIMILIANO FIRTMAN
MOBILE+WEB DEVELOPER
AUTHOR
Authored 13 books and +70 courses
@FIRT﹒FIRT.DEV
3
web.dev/learn/pwa

Recommended for you

Training Chatbots and Conversational Artificial Intelligence Agents with Amaz...
Training Chatbots and Conversational Artificial Intelligence Agents with Amaz...Training Chatbots and Conversational Artificial Intelligence Agents with Amaz...
Training Chatbots and Conversational Artificial Intelligence Agents with Amaz...

Building a conversational AI experience that can respond to a wide variety of inputs and situations depends on gathering high-quality, relevant training data. Dialog with humans is an important part of this training process. In this session, learn how researchers at Facebook use Amazon Mechanical Turk within the ParlAI (pronounced “parlay”) framework for training and evaluating AI models to perform data collection, human training, and human evaluation. Learn how you can use this interface to gather high-quality training data to build next-generation chatbots and conversational agents.

reinvent2017awsreinvent2017amazon
How to Use ChatGPT to Create Personalized Experiences for Customers
How to Use ChatGPT to Create Personalized Experiences for CustomersHow to Use ChatGPT to Create Personalized Experiences for Customers
How to Use ChatGPT to Create Personalized Experiences for Customers

Transform your marketing game with AI! View our presentation and explore the power of ChatGPT for creating personalized customer experiences.

aichatgptmarketing automation
Build a game with javascript (april 2017)
Build a game with javascript (april 2017)Build a game with javascript (april 2017)
Build a game with javascript (april 2017)

This document provides an overview and roadmap for building a simple guessing game with JavaScript. It begins with introductions and background on programming concepts. It then outlines the steps to build the game, including generating a random number on page load, accepting user input, checking guesses, and allowing new games. Code examples are provided for functions to generate random numbers and display guesses. Homework extends the game with additional feedback and counting number of guesses. Information is also given on Thinkful's mentorship program for learning to code.

ChatGPT and AI for web developers - Maximiliano Firtman
I'm not here to tell you
ChatGPT will replace all
web developers
:-)
7
So, what are we going to
talk about?

Recommended for you

Containers & AI - Beauty and the Beast!?!
Containers & AI - Beauty and the Beast!?!Containers & AI - Beauty and the Beast!?!
Containers & AI - Beauty and the Beast!?!

As AI technology is pushing into IT I was wondering myself, as an “infrastructure container kubernetes guy”, how get this fancy AI technology get managed from an infrastructure operational view? Is it possible to apply our lovely cloud native principals as well? What benefit’s both technologies could bring to each other? Let me take this questions and provide you a short journey through existing deployment models and use cases for AI software. On practical examples, we discuss what cloud/on-premise strategy we may need for applying it to our own infrastructure to get it to work from an enterprise perspective. I want to give an overview about infrastructure requirements and technologies, what could be beneficial or limiting your AI use cases in an enterprise environment. An interactive Demo will give you some insides, what approaches I got already working for real. Keywords: AI, Containeres, Kubernetes, Cloud Native Event Link: https://meine.doag.org/events/cloudland/2024/agenda/#agendaId.4211

aicontainerkubernetes
Build 2017 - B8090 - How Microsoft Cognitive Services can help your apps comm...
Build 2017 - B8090 - How Microsoft Cognitive Services can help your apps comm...Build 2017 - B8090 - How Microsoft Cognitive Services can help your apps comm...
Build 2017 - B8090 - How Microsoft Cognitive Services can help your apps comm...

Microsoft Cognitive Services Language APIs - Bing Spell Check, Language Understanding, Linguistic Analysis, Text Analytics, Translator and Web LM - can enable your apps to understand language and communicate with people.

cognitive servicesbuild 2017language
Containers & AI - Beauty and the Beast !?! @MLCon - 27.6.2024
Containers & AI - Beauty and the Beast !?! @MLCon - 27.6.2024Containers & AI - Beauty and the Beast !?! @MLCon - 27.6.2024
Containers & AI - Beauty and the Beast !?! @MLCon - 27.6.2024

As AI technology is pushing into IT I was wondering myself, as an “infrastructure container kubernetes guy”, how get this fancy AI technology get managed from an infrastructure operational view? Is it possible to apply our lovely cloud native principals as well? What benefit’s both technologies could bring to each other? Let me take this questions and provide you a short journey through existing deployment models and use cases for AI software. On practical examples, we discuss what cloud/on-premise strategy we may need for applying it to our own infrastructure to get it to work from an enterprise perspective. I want to give an overview about infrastructure requirements and technologies, what could be beneficial or limiting your AI use cases in an enterprise environment. An interactive Demo will give you some insides, what approaches I got already working for real. Keywords: AI, Containeres, Kubernetes, Cloud Native Event Link: https://mlconference.ai/tools-apis-frameworks/containers-ai-infrastructure/

kubernetescloudnativeai
What we'll cover
IA and Web Development
Main Concepts
Prompt Enginering? Custom Data
Same concepts can be
used today with many
models and providers
LLMs and [Chat]GPT
ChatGPT
Generative
Pre-trained Transformer
GPT
OpenAI
Large Language Model
LLM
Deep Learning
Machine Learning
Arti
fi
cial Inteligence AI
APIs
Microsoft
Bing Chat
Azure OpenAI
APIs

Recommended for you

Generating docs from APIs
Generating docs from APIsGenerating docs from APIs
Generating docs from APIs

APIs define contracts between a service and a client, and with the rise of representation languages like Swagger, Apiary, and RAML, these contracts can be consumed programmatically and adapted easily into our codebases. Other tools like JSON Schema also contribute to this idea of integration between service and client. But what about our documentation? If API contracts can be assimilated into software, surely it can drive our documentation too? In this talk, I want to introduce some of the techniques I've used on past projects that allow exactly that. By using remote schemas to generate software, it also allows us to generate working documentation that is always relevant and never out of date. Apart from accuracy, we also get the added benefits of reduced development time, reduced effort, and reduced duplication. We can all of this by documenting once, and re-using across multiple projects!

swagger documentation api
Exploring ChatGPT Prompt Hacks To Maximally Optimise Your Queries
Exploring ChatGPT Prompt Hacks To Maximally Optimise Your QueriesExploring ChatGPT Prompt Hacks To Maximally Optimise Your Queries
Exploring ChatGPT Prompt Hacks To Maximally Optimise Your Queries

A comprehensive exploration of artificial intelligence, particularly focusing on its historical development, notable milestones, and various applications. It begins with a brief history of AI, tracing its ancient philosophical roots through to contemporary advancements like quantum computing and advanced robotics. Key historical highlights include the development of "Shakey," the first mobile robot capable of reasoning about its environment, and ELIZA, the first chatbot. The presentation also covers the evolution of self-driving technology, starting with Ernst Dickmanns' pioneering work in the 1980s. It delves into the profound impact of AI in games, exemplified by AlphaGo's victory over a human Go champion. Furthermore, it details the types of AI and machine learning, emphasizing the revolutionary role of ChatGPT. Introduced by OpenAI, ChatGPT quickly became the fastest app to reach 100 million users due to its versatile capabilities in language processing and interaction. Lastly, the slides provide practical insights on effectively utilizing ChatGPT, such as optimizing input to enhance outcomes and integrating ChatGPT's API into various applications. The presentation is aimed at both educating on AI's capabilities and demonstrating its practical applications in modern technology scenarios.

chatgptaiprompthacks
OpenAI GPT in Depth - Questions and Misconceptions
OpenAI GPT in Depth - Questions and MisconceptionsOpenAI GPT in Depth - Questions and Misconceptions
OpenAI GPT in Depth - Questions and Misconceptions

OpenAI GPT in depth – misconceptions and questions you would like answered Have you ever wondered why GPT models work? Do you ask questions like: How does GPT work? Why does the same problem receive different answers for different users? Is there a way to improve explainability? Can GPT model provide its sources? Why does Bing chat work differently? What are my ways to have better performance and improve completions? How can I work with data in my enterprise? What practical business cases could a generative AI model fit solving? If you are tired of sessions just scratching the surface of OpenAI GPT, this one will go deeper and answer questions like why, why not and how.

azure cognitive searchchain of thought promptingchatgpt
LLMs are not the only
available AI models for use
today
Large Language Models
can be used for several
tasks without changing or
training models
PROMPT RESULT
GPT
PROMPT RESULT
GPT
tokens tokens

Recommended for you

Lecture 9 Professional Practices
Lecture 9 Professional PracticesLecture 9 Professional Practices
Lecture 9 Professional Practices

The document discusses various professional practices for web development including proper coding techniques, layout, use of images and other multimedia, adherence to web standards, avoiding plagiarism, and respecting copyright laws. Key practices include commenting code for clarity, using indentation and spacing for readability, choosing appropriate image formats and sizes, validating code, and continually learning new skills and technologies.

Unleashing The Power Of CHAT-GPT
Unleashing The Power Of CHAT-GPTUnleashing The Power Of CHAT-GPT
Unleashing The Power Of CHAT-GPT

This report offers an in-depth exploration of the application and potential of ChatGPT, a sophisticated AI conversational model developed by OpenAI. With over 100 practical examples of prompts, we aim to demonstrate the breadth of the model's capacity and its utility across diverse fields and industries, such as education, customer service, research, entertainment, and more. Introduction: ChatGPT is a highly advanced machine learning model that utilizes a transformer architecture for generating human-like text based on given prompts. It's part of OpenAI's GPT (Generative Pretrained Transformer) series, and as of our knowledge cutoff in 2021, its latest version is GPT-4. It has proven to be a transformative tool for various applications, such as drafting emails, writing code, creating content, answering queries, tutoring in various subjects, translating languages, simulating characters for video games, and more. Chapter 1: Understanding ChatGPT In this chapter, we delve into the basics of ChatGPT, starting with its origins and development. We touch on the model's architecture, including its use of attention mechanisms and transformer models, its training process using reinforcement learning from human feedback, and how it generates responses. Here, we explore some of the myriad applications of ChatGPT across multiple sectors. We discuss how it's revolutionizing customer service by providing 24/7 support, aiding in education by personalizing learning, assisting researchers with literature reviews, and even creating dialogue for video games. Real-world examples and case studies are included to illustrate these applications. This chapter serves as a comprehensive guide for utilizing ChatGPT effectively. We provide over 100 prompt examples spanning various fields, like marketing, healthcare, entertainment, etc. These prompts range from simple inquiries to complex, layered questions, giving readers a thorough understanding of how to harness the full potential of ChatGPT. While the potential of ChatGPT is unquestionable, it's crucial to address the ethical implications of its use. This chapter delves into areas such as data privacy, the risk of misuse, and the importance of transparency. We also contemplate the future directions of AI conversation models like ChatGPT, discussing the potential for even more nuanced understanding and response generation. In our concluding remarks, we reflect on the transformative potential of ChatGPT and similar AI models. We emphasize the model's ability to democratize access to information, offer personalized learning and support, and the broader implications for society.

content marketingpromptschat gpt prompts
SEO Exellence with ChatGPT-Webinar Duda
SEO Exellence with ChatGPT-Webinar DudaSEO Exellence with ChatGPT-Webinar Duda
SEO Exellence with ChatGPT-Webinar Duda

Dive deep into the world of ChatGPT-powered SEO and unlock its hidden potential. This comprehensive webinar will not only demonstrate the sheer power of integrating by Joseph S. Kahn

dudachatgptchatgpt seo
Sequence of characters or
subwords that the model uses
as the basic unit of processing
and understanding natural
language text.
Token
Models Available
We are not yet ready for
self-host models on web
servers or clients
Other Companies and Models
Meta
Llama
Google
LaMDA / PaLM
Claude
Mistral AI X? Amazon?

Recommended for you

Mat Velloso - Bots in the real world
Mat Velloso - Bots in the real worldMat Velloso - Bots in the real world
Mat Velloso - Bots in the real world

The document discusses the opportunities presented by bots, including high demand from companies, the ability to create more natural experiences for users on messaging apps, and simpler deployment and updating than traditional apps. It provides an overview of the typical architecture of a bot, including components like the Bot Builder SDK, LUIS, and the Developer Portal. Several use cases for bots are presented, such as managing cloud resources from Skype, handling customer service, and acting as knowledgeable assistants. Guidelines for creating effective bots focus on solving users' needs with minimal effort and guiding users to discover what the bot can do.

waq17
MuleSoft + Augmented Reality & ChatGPT
MuleSoft + Augmented Reality & ChatGPTMuleSoft + Augmented Reality & ChatGPT
MuleSoft + Augmented Reality & ChatGPT

This document provides an agenda and summary for a meetup on Augmented Reality and ChatGPT hosted by MuleSoft. The meetup includes introductions to AR, its future applications, and types of AR. It also covers how MuleSoft can contribute to the future of AR and a demo of integrating ChatGPT with MuleSoft. The meetup organizers provide a safe harbor statement and housekeeping details like submitting questions and providing feedback. Speakers introduce themselves and their roles.

mulesoftarchatgpt
Lessons learned from building a commercial bot development platform
Lessons learned from building a commercial bot development platformLessons learned from building a commercial bot development platform
Lessons learned from building a commercial bot development platform

Keynote at 2nd International Workshop on Bots in Software Engineering on the lessons learned while building our chatbot platform Xatkit

chatbotbotgithub
Cloud Services for Generative AI
OpenAI
Microsoft
Azure
GPT / OpenAI
GPT
AWS
Bedrock
DALL-E Llama
Llama
Claude
Hugging Face Mistral
Other
Google
Cloud
PaLM
We can use cloud-based APIs for using LLMs
RESTFul APIs High level APIs
Multi-vendor
libraries
Langchain
Vercel AI SDK
LLMs can hallucinate,
making facts and
presenting them in a very
convincing way.
https://twitter.com/predict_addict/status/1724381491898060816

Recommended for you

How AI is going to change the world _M.Mujeeb Riaz.pdf
How AI is going to change the world _M.Mujeeb Riaz.pdfHow AI is going to change the world _M.Mujeeb Riaz.pdf
How AI is going to change the world _M.Mujeeb Riaz.pdf

How AI is going to change the world? "AI: The Future of Our World“ "AI and its Transformative Impact on the World: Understanding the Potential of Chatbots and Conversational AI" What is Artificial Intelligence and how it works? What are Chatbots? What Is ChatGPT? Difference between chatGPT 3 and chatGPT 4? Is Jasper artificial intelligence? What is Character AI and how it works? How chatGPT is going to change the world? Why we are calling ChatGPT the future?

chatgptchatgpt3chatgpt4
Build Intelligent Conversational Agents with Amazon Neptune and Amazon SageMa...
Build Intelligent Conversational Agents with Amazon Neptune and Amazon SageMa...Build Intelligent Conversational Agents with Amazon Neptune and Amazon SageMa...
Build Intelligent Conversational Agents with Amazon Neptune and Amazon SageMa...

Building automated conversational agents is a balancing act between fine-grained control of messaging and maintaining logic. In this chalk talk, CarLabs, a leader in developing digital assistants for automotive brands, describes how they create their platform using a combination of Amazon Neptune to encode business rules, Amazon SageMaker to create a RNN model, and Amazon Mechanical Turk to determine the highest levels of accuracy.

re:invent 2018amazonaws re:invent
Portable, secure, and lightweight: Wasm runtimes and their use-cases - Natali...
Portable, secure, and lightweight: Wasm runtimes and their use-cases - Natali...Portable, secure, and lightweight: Wasm runtimes and their use-cases - Natali...
Portable, secure, and lightweight: Wasm runtimes and their use-cases - Natali...

This document discusses WebAssembly (Wasm) runtimes and use cases. It provides an overview of Wasm, including how it is compiled from source code to binary format and imported into JavaScript. It describes how Wasm provides portability across execution contexts and systems through standards like WASI. Examples of using Wasm include a search component and demonstrating isomorphism. Potential tradeoffs discussed include additional debugging layers and unstable preview interfaces.

way wey web 2023natalia vendittomicrosoft
To reduce hallucination we
can use low values for
temperature
IA and Web Development
Use AI for your
apps to create,
transform and
manipulate data
or conversations,
such as chatbots
INTEGRATION
Create web
services that can
be consumed by
ChatGPT public
app
PLUGINS
Use GPT APIs to
create and curate
content for your
website and social
networks
CONTENT
Serve content for
IAs that are
browsing your
website looking
for content for
users
AIO
What can we do with GPT as web developers
• Summarizing
• Inferring (sentiment, relevant data,
tags)
• Transforming Data (translation,
format conversion,
• Extracting Data
• Creating content and expand on a
fact
Capabilities

Recommended for you

Auditing Design Systems for Accessibility - Anna E. Cook
Auditing Design Systems for Accessibility - Anna E. CookAuditing Design Systems for Accessibility - Anna E. Cook
Auditing Design Systems for Accessibility - Anna E. Cook

The document discusses auditing design systems for accessibility. It begins by explaining how design systems can proliferate both accessibility issues and fixes if accessibility is considered. It then covers conducting accessibility audits, which involve using the WCAG as criteria to manually and automatically test components for various issues. The audit process involves planning, reviewing designs, code and documentation, documenting any issues found, grouping by theme, prioritizing by impact, and sharing results. Accessibility auditing is presented as a way for teams to advocate for and improve accessibility in their design systems.

wey wey web 2023anna e. cookmicrosoft
Adaptive Designs, Beyond Pixel Perfection - Stephanie Walter
Adaptive Designs, Beyond Pixel Perfection - Stephanie WalterAdaptive Designs, Beyond Pixel Perfection - Stephanie Walter
Adaptive Designs, Beyond Pixel Perfection - Stephanie Walter

This document discusses designing interfaces that adapt to different user situations and contexts. It covers adapting designs for different content amounts, loading/error states, user preferences like dark mode, interactions using mouse/keyboard/touch. It also discusses designing for responsive layouts, conditional content, different stages of user journeys, and going beyond assumptions to consider edge cases and ensure designs are inclusive. The key message is that designers need to move beyond pixel perfection and consider how interfaces will really behave for diverse users in varied real-world contexts.

wey wey web 2023stephanie walterux
Sharing is caring: what to know before you build a Research Repository - Juli...
Sharing is caring: what to know before you build a Research Repository - Juli...Sharing is caring: what to know before you build a Research Repository - Juli...
Sharing is caring: what to know before you build a Research Repository - Juli...

This document discusses considerations for building a research repository to share findings and learnings across teams. It recommends that the repository make information recoverable, accessible, actionable, traceable, and safe. Key points include having a good taxonomy to organize data, labeling insights clearly, allowing traceability to original observations and evidence while protecting personal data, and designing the experience to be self-explanatory so the repository can democratize research learnings.

wey wey web 2023juliana iglesiasux
• User Input detection: profanity, hate
speech, inappropriate content
• Content Creation
• Sentiment Analysis
• Personalization: Rewrite articles
• Language Translation
• Content Tagging
• Chatbots
Ideas for
Web
Developers
ChatGPT browsing the Web
• ChatGPT and Bing Chat can browse
the web using the "Bing plugin"
• It honors robots.txt
• The keyword for the User Agent is
ChatGPT-User
• SEO for AI, AIO?: You don't need to
do anything in special
Bing
Browser
Creating your own Plugins

Recommended for you

Unlocking collaboration: A framework for developers and designers - Alicia Ca...
Unlocking collaboration: A framework for developers and designers - Alicia Ca...Unlocking collaboration: A framework for developers and designers - Alicia Ca...
Unlocking collaboration: A framework for developers and designers - Alicia Ca...

This document presents a framework for effective collaboration between designers and developers. It discusses three levels needed for collaboration: tools and communication, aligning processes, and developing a collaborative mindset. At each level, it provides examples of practices that can bridge the gaps between disciplines like using common work spaces, design systems, and involving all parties early in the design process. The overall message is that to collaborate, teams need shared goals, processes, and a willingness from all members to understand each other's work and make compromises.

wey wey web 2023alicia calderónmiyagami
3 reasons to switch to OKLCH - Anton Lovchikov
3 reasons to switch to OKLCH - Anton Lovchikov3 reasons to switch to OKLCH - Anton Lovchikov
3 reasons to switch to OKLCH - Anton Lovchikov

The document discusses the benefits of exercise for mental health. Regular physical activity can help reduce anxiety and depression and improve mood and cognitive function. Exercise causes chemical changes in the brain that may help protect against mental illness and improve symptoms for those who already suffer from conditions like anxiety and depression.

wey wey web 2023anton lovchikovdesign
Declarative Design - Jeremy Keith - Wey Wey Wey 2023
Declarative Design - Jeremy Keith - Wey Wey Wey 2023Declarative Design - Jeremy Keith - Wey Wey Wey 2023
Declarative Design - Jeremy Keith - Wey Wey Wey 2023

The document discusses declarative programming versus imperative programming and provides examples of declarative programming approaches including structured query language and CSS. It also discusses how declarative design can be applied to buttons, controls, and design systems. While declarative design has advantages, whether it is better than imperative depends on factors like the medium, platform, and how tightly one wants to control the design versus allowing flexibility. An overall philosophy of responsive and declarative design is suggested for the open Web.

wey wey web 2023jeremy keithdesign
• We can create plugins from web
services so users can use our
services
• We create a JSON manifest and
register it with ChatGPT
• They can be used in custom GPTs
• How does it work?
Plugins
USER'S
PROMPT
RESULT
GPT
ENHANCED
PROMPT
Your Plugin
API
ChatGPT Plugin Manifest
{
"schema_version": "v1",
"name_for_human": "Wey Wey Web Plugin",
"name_for_model": "Wey Wey Web Plugin for ",
"description_for_human": "You can get information about
.
.
.
,
"description_for_model": "Search on web and UX sessions at Wey Wey Web",
"auth": { "type": "none"},
"api": {
"type": "openapi",
"url": "https:
/
/
domain.com/openapi.yaml",
"is_user_authenticated": false
},
}
You have to host the file in
yourdomain.com/.well-known/ai-plugin.json
ChatGPT Endpoint description
openapi: 3.0.1
servers:
- url: http:
/
/
weyweyweb.com/api
paths:
/sessions:
get:
operationId: getSessions
summary: Get the list of sessions at Wey Wey Web
responses:
"200":
description: OK
content:
application/json:
schema:
$ref: '#/components/schemas/getSessions'
You need to describe your service in a YAML file

Recommended for you

Form follows emotion - Isabella De Cuppis
Form follows emotion - Isabella De CuppisForm follows emotion - Isabella De Cuppis
Form follows emotion - Isabella De Cuppis

This document provides an overview of design concepts and examples through history. It discusses how ideology, social values, and technology shape design outcomes. Examples shown include calculating machines from the 1940s, typewriters from the 1970s, and modern devices like the OP-1 music production tool. The document emphasizes that the most meaningful designs authentically express the values of their time and that the quality of a civilization's designs reflects the quality of the civilization itself.

wey wey web 2023isabella de cuppisdesign
UX for emerging tech - Josephine Scholtes
UX for emerging tech - Josephine ScholtesUX for emerging tech - Josephine Scholtes
UX for emerging tech - Josephine Scholtes

This document provides guidance on how to successfully implement emerging technologies by bridging the gap between business and technology needs. It recommends: 1) Clearly defining the technology being discussed; 2) Laying out all potential options visually to facilitate collaboration between business and technical teams; and 3) Creating service blueprints to define how new technologies integrate into customer experiences. The goal is to move innovative ideas from hype to viable solutions that create real business value.

wey wey web 2023josephine scholtesmicrosoft
Collaborative software with State Machines - Laura Kalbag
Collaborative software with State Machines -  Laura KalbagCollaborative software with State Machines -  Laura Kalbag
Collaborative software with State Machines - Laura Kalbag

Laura Kalbag presented on building a white noise machine application using state machines. She began by modeling the application logic as a finite state machine with states like "power on" and "power off". She then enhanced it to a statechart by adding hierarchy with child states for different sounds, and parallel states for features like light and volume. By exporting the statechart to code, it became an executable specification that could be simulated and developed further. Statecharts provide benefits like managing complexity, clear documentation, and easier testing and debugging of application logic.

wey wey web 2023laura kalbagdevelopment
Prompt Engineering
Process of designing and
refining prompts or inputs for
language models like GPT to
generate desired outputs or
responses.
Prompt Engineering
Engineering or Hacking?
The more explicit and large
the prompt, more accurate
the results we can get from
GPT.

Recommended for you

Lessons Learned from building Session Replay - Francesco Novy
Lessons Learned from building Session Replay - Francesco NovyLessons Learned from building Session Replay - Francesco Novy
Lessons Learned from building Session Replay - Francesco Novy

Session replay records a user's interactions on a website to help debug issues and improve the user experience. The presenter discussed lessons learned from building a session replay product at Sentry, including knowing your specific use case, expecting unexpected problems, optimizing bundle size through techniques like tree shaking, and compressing recorded data to reduce network traffic.

wey wey web 2023francesco novysoftware
Let's get visual. Visual testing in your project - Ramona Schwering
Let's get visual. Visual testing in your project - Ramona SchweringLet's get visual. Visual testing in your project - Ramona Schwering
Let's get visual. Visual testing in your project - Ramona Schwering

The document discusses taking screenshots and snapshots of elements in Cypress tests. It shows how to take snapshots of the entire page or individual elements using the .track() method. It also demonstrates how to freeze the system time, wait for elements to load, and create a custom command to change an element's styling for snapshots.

wey wey web 2023ramona schweringdevelopment
Solving Common Web Component Problems - Simon MacDonald
Solving Common Web Component Problems - Simon MacDonaldSolving Common Web Component Problems - Simon MacDonald
Solving Common Web Component Problems - Simon MacDonald

This document discusses solving common problems with web components using server side rendering. It begins by explaining what web components are - custom elements, shadow DOM, and HTML templates. It then discusses why web components are useful, such as component reuse and interoperability. Common problems with web components are described like flash of undefined custom elements (FOUCE) and shadow DOM not playing well with native forms. Solutions to these problems include declarative shadow DOM and the Enhance framework, which allows server side rendering of components to avoid FOUCE and uses the light DOM for styling instead of shadow DOM. Overall, the document presents server side rendering as an effective way to solve problems with web components.

wey wey web 2023simon macdonalddevelopment
PROMPT RESULT
GPT
• Sometimes wee want consistent
and deterministic outputs
• Sometimes we need the output in
specific formats for processing
• We are paying for the API so we
need to reduce abuse
• We want to validate user generated
content that goes into the prompt
Prompt
Engineering
for
Developers
• Write specific and clear instructions
• For large task you can provide the
model a list of steps you want it to
make to "think" about the problem
• Also, for large tasks you can make
several GPT calls, step by step, always
providing the previous context as if
you are "thinking" with it
• Use an iterative process to find the
right prompt for what you are
expecting
Basic Rules
• Use delimiters for dynamic data
• Tags as in XML
• ```
• """
• ---
• Explain to the model the delimiter
you are using
Specific and
Clear
Instructions

Recommended for you

The Future is Malleable - Aleksandra Sikora
The Future is Malleable - Aleksandra SikoraThe Future is Malleable - Aleksandra Sikora
The Future is Malleable - Aleksandra Sikora

This document discusses the concept of "malleable applications", which refers to software that can be incrementally and individually modified by end-users to better suit their needs and preferences. The current state of most applications is that they are "one-size-fits-all" and do not provide users with enough control and agency over their digital experiences. New technologies like AI, GraphQL, and substrate computing could help empower users to tailor applications and have more control over how their data is transformed and displayed. The goal is to move beyond a world where users just consume apps, and instead have the ability to author and customize their own computing experiences through more flexible, moldable software.

wey wey web 2023aleksandra sikorajavascript
Trending tools & methodologies for UX - Josephine Scholtes.pdf
Trending tools & methodologies for UX - Josephine Scholtes.pdfTrending tools & methodologies for UX - Josephine Scholtes.pdf
Trending tools & methodologies for UX - Josephine Scholtes.pdf

The document summarizes trends in UX tools and methodologies discussed by Josephine Scholtes. It covers four topics: 1) Humanity-centered design focuses on solving problems for societies rather than individuals. 2) Need-based personas categorize users based on shared needs rather than demographics. 3) Inclusive design aims to make designs usable for diverse groups through the design process. 4) Designing to avoid unintended consequences by exploring possible futures and scenarios. The document provides overviews and examples of applying each trend.

Decoding Web Accessibility through Testing - Anuradha Kumari
Decoding Web Accessibility through Testing  - Anuradha KumariDecoding Web Accessibility through Testing  - Anuradha Kumari
Decoding Web Accessibility through Testing - Anuradha Kumari

The document discusses web accessibility testing. It defines accessibility and why it is important for websites to be accessible to all users, including those with disabilities. It then describes how to test for accessibility using keyboards, screen readers, and browser tools. Specific things to test include page structure, alternative text for images, form labels, and dynamic changes. Testing tools mentioned include browser developer tools, Lighthouse, and the Axe accessibility inspector extension. The key takeaway is the importance of testing for accessibility from the start of a project from the perspective of different users.

• Ask for data in a structured format
you want (JSON, HTML, CSV, or any
string format)
• Give the model an example of what
you are expecting with enough
semantic information
• Explain to the model what to do
when the input is invalid, such as
"Respond 'false' when..."
Specific and
Clear
Instructions
Embeddings
• The magic happens in the context
• Context? Just information in the
prompt
• For large databases and documents,
we use Vector-based DBs
Connecting
GPT to our
data
Store and index high-dimensional
vectors representing text data,
allowing for efficient similarity
search and retrieval of documents or
phrases based on their embedding
representations
Vector-based DBs

Recommended for you

Good Security is one question away - Wiktoria Dalach
Good Security is one  question away - Wiktoria DalachGood Security is one  question away - Wiktoria Dalach
Good Security is one question away - Wiktoria Dalach

This document discusses the CIA triad of security - confidentiality, integrity, and availability. It explains that the CIA triad can help evaluate the security of a project by asking how each element could be broken. Confidentiality involves who can access resources and sensitive data. Integrity considers who can modify resources and the risks of malicious actions. Availability examines rate limiting, outages, and maintenance windows. The document encourages shifting security left by injecting CIA triad questions into development processes to catch issues earlier.

Dynamic CSS Secrets - Lea Verou
Dynamic CSS Secrets - Lea Verou Dynamic CSS Secrets - Lea Verou
Dynamic CSS Secrets - Lea Verou

Dynamic CSS Secrets - Lea Verou

The Misty Report - Douglas Crockford
The Misty Report - Douglas CrockfordThe Misty Report - Douglas Crockford
The Misty Report - Douglas Crockford

The document discusses Douglas Crockford's work developing programming languages like Crocktran, Candy, Ply, Elemeno, Neo, and Misty. It argues that the actor model provides a better paradigm for distributed computing compared to past paradigms. Misty adds actors to Neo to demonstrate this paradigm, and a new programming language fully based on the actor model may be needed in the future. The document also outlines Crockford's vision for an actor protocol and format to replace HTTPS for actor systems.

• We split our documents in slices by
character length (a PDF, an HTML, a
FAQ, a video's caption)
• We convert each slice into its
embedding representation
• OpenAI offers us that service
through the API
• We store the embeddings in a
vector database
• It's just numerical statistical data
Split and
Embed
USER'S
PROMPT OUTPUT
OPEN AI
Vector DB
Your App
Prompt
Slice of
relevant info
Prompt as
Embedding
Prompt
+ Slice
Embedding Output
Embeddings GPT
Make GPT Queries with Embedding
ChatGPT and AI for web developers - Maximiliano Firtman
fi
rt.dev/chatgpt-web

Recommended for you

Web performance optimisations for the harsh conditions - Anna Migas
Web performance optimisations for the harsh conditions - Anna MigasWeb performance optimisations for the harsh conditions - Anna Migas
Web performance optimisations for the harsh conditions - Anna Migas

The document discusses optimizing web performance for users in harsh conditions like rural Africa. It recommends letting users know what's happening, loading initial information quickly, progressively enhancing the website, avoiding unnecessary requests, lazy loading non-critical content, and leveraging features like preconnecting, prefetching, preloading, and the back/forward cache. Testing on low-powered devices and networks is also suggested to ensure usability in harsh conditions.

Measuring the Impact of Network Latency at Twitter
Measuring the Impact of Network Latency at TwitterMeasuring the Impact of Network Latency at Twitter
Measuring the Impact of Network Latency at Twitter

Widya Salim and Victor Ma will outline the causal impact analysis, framework, and key learnings used to quantify the impact of reducing Twitter's network latency.

TrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-In
TrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-InTrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-In
TrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-In

Six months into 2024, and it is clear the privacy ecosystem takes no days off!! Regulators continue to implement and enforce new regulations, businesses strive to meet requirements, and technology advances like AI have privacy professionals scratching their heads about managing risk. What can we learn about the first six months of data privacy trends and events in 2024? How should this inform your privacy program management for the rest of the year? Join TrustArc, Goodwin, and Snyk privacy experts as they discuss the changes we’ve seen in the first half of 2024 and gain insight into the concrete, actionable steps you can take to up-level your privacy program in the second half of the year. This webinar will review: - Key changes to privacy regulations in 2024 - Key themes in privacy and data governance in 2024 - How to maximize your privacy program in the second half of 2024

data privacyprivacy complianceai
ChatGPT and AI for web developers - Maximiliano Firtman
MAXIMILIANO FIRTMAN
Thanks!
¡Gracias!
@f
i
rt f
i
rt.dev
A Yay-Yay conf for UI Lovers
Some slides are from my course at

More Related Content

Similar to ChatGPT and AI for web developers - Maximiliano Firtman

ChatGPT SEO Guide 2023
ChatGPT SEO Guide 2023ChatGPT SEO Guide 2023
ChatGPT SEO Guide 2023
Web Trainings Academy
 
Chat GPTs
Chat GPTsChat GPTs
Chat GPTs
Gene Leybzon
 
IRJET - A Study on Building a Web based Chatbot from Scratch
IRJET - A Study on Building a Web based Chatbot from ScratchIRJET - A Study on Building a Web based Chatbot from Scratch
IRJET - A Study on Building a Web based Chatbot from Scratch
IRJET Journal
 
Training Chatbots and Conversational Artificial Intelligence Agents with Amaz...
Training Chatbots and Conversational Artificial Intelligence Agents with Amaz...Training Chatbots and Conversational Artificial Intelligence Agents with Amaz...
Training Chatbots and Conversational Artificial Intelligence Agents with Amaz...
Amazon Web Services
 
How to Use ChatGPT to Create Personalized Experiences for Customers
How to Use ChatGPT to Create Personalized Experiences for CustomersHow to Use ChatGPT to Create Personalized Experiences for Customers
How to Use ChatGPT to Create Personalized Experiences for Customers
Vbout.com
 
Build a game with javascript (april 2017)
Build a game with javascript (april 2017)Build a game with javascript (april 2017)
Build a game with javascript (april 2017)
Thinkful
 
Containers & AI - Beauty and the Beast!?!
Containers & AI - Beauty and the Beast!?!Containers & AI - Beauty and the Beast!?!
Containers & AI - Beauty and the Beast!?!
Tobias Schneck
 
Build 2017 - B8090 - How Microsoft Cognitive Services can help your apps comm...
Build 2017 - B8090 - How Microsoft Cognitive Services can help your apps comm...Build 2017 - B8090 - How Microsoft Cognitive Services can help your apps comm...
Build 2017 - B8090 - How Microsoft Cognitive Services can help your apps comm...
Windows Developer
 
Containers & AI - Beauty and the Beast !?! @MLCon - 27.6.2024
Containers & AI - Beauty and the Beast !?! @MLCon - 27.6.2024Containers & AI - Beauty and the Beast !?! @MLCon - 27.6.2024
Containers & AI - Beauty and the Beast !?! @MLCon - 27.6.2024
Tobias Schneck
 
Generating docs from APIs
Generating docs from APIsGenerating docs from APIs
Generating docs from APIs
jamiehannaford
 
Exploring ChatGPT Prompt Hacks To Maximally Optimise Your Queries
Exploring ChatGPT Prompt Hacks To Maximally Optimise Your QueriesExploring ChatGPT Prompt Hacks To Maximally Optimise Your Queries
Exploring ChatGPT Prompt Hacks To Maximally Optimise Your Queries
Sanjay Willie
 
OpenAI GPT in Depth - Questions and Misconceptions
OpenAI GPT in Depth - Questions and MisconceptionsOpenAI GPT in Depth - Questions and Misconceptions
OpenAI GPT in Depth - Questions and Misconceptions
Ivo Andreev
 
Lecture 9 Professional Practices
Lecture 9 Professional PracticesLecture 9 Professional Practices
Lecture 9 Professional Practices
Sur College of Applied Sciences
 
Unleashing The Power Of CHAT-GPT
Unleashing The Power Of CHAT-GPTUnleashing The Power Of CHAT-GPT
Unleashing The Power Of CHAT-GPT
Demetris D-Papa
 
SEO Exellence with ChatGPT-Webinar Duda
SEO Exellence with ChatGPT-Webinar DudaSEO Exellence with ChatGPT-Webinar Duda
SEO Exellence with ChatGPT-Webinar Duda
Anton Shulke
 
Mat Velloso - Bots in the real world
Mat Velloso - Bots in the real worldMat Velloso - Bots in the real world
Mat Velloso - Bots in the real world
Web à Québec
 
MuleSoft + Augmented Reality & ChatGPT
MuleSoft + Augmented Reality & ChatGPTMuleSoft + Augmented Reality & ChatGPT
MuleSoft + Augmented Reality & ChatGPT
MuleSoft Meetups
 
Lessons learned from building a commercial bot development platform
Lessons learned from building a commercial bot development platformLessons learned from building a commercial bot development platform
Lessons learned from building a commercial bot development platform
Jordi Cabot
 
How AI is going to change the world _M.Mujeeb Riaz.pdf
How AI is going to change the world _M.Mujeeb Riaz.pdfHow AI is going to change the world _M.Mujeeb Riaz.pdf
How AI is going to change the world _M.Mujeeb Riaz.pdf
Mujeeb Riaz
 
Build Intelligent Conversational Agents with Amazon Neptune and Amazon SageMa...
Build Intelligent Conversational Agents with Amazon Neptune and Amazon SageMa...Build Intelligent Conversational Agents with Amazon Neptune and Amazon SageMa...
Build Intelligent Conversational Agents with Amazon Neptune and Amazon SageMa...
Amazon Web Services
 

Similar to ChatGPT and AI for web developers - Maximiliano Firtman (20)

ChatGPT SEO Guide 2023
ChatGPT SEO Guide 2023ChatGPT SEO Guide 2023
ChatGPT SEO Guide 2023
 
Chat GPTs
Chat GPTsChat GPTs
Chat GPTs
 
IRJET - A Study on Building a Web based Chatbot from Scratch
IRJET - A Study on Building a Web based Chatbot from ScratchIRJET - A Study on Building a Web based Chatbot from Scratch
IRJET - A Study on Building a Web based Chatbot from Scratch
 
Training Chatbots and Conversational Artificial Intelligence Agents with Amaz...
Training Chatbots and Conversational Artificial Intelligence Agents with Amaz...Training Chatbots and Conversational Artificial Intelligence Agents with Amaz...
Training Chatbots and Conversational Artificial Intelligence Agents with Amaz...
 
How to Use ChatGPT to Create Personalized Experiences for Customers
How to Use ChatGPT to Create Personalized Experiences for CustomersHow to Use ChatGPT to Create Personalized Experiences for Customers
How to Use ChatGPT to Create Personalized Experiences for Customers
 
Build a game with javascript (april 2017)
Build a game with javascript (april 2017)Build a game with javascript (april 2017)
Build a game with javascript (april 2017)
 
Containers & AI - Beauty and the Beast!?!
Containers & AI - Beauty and the Beast!?!Containers & AI - Beauty and the Beast!?!
Containers & AI - Beauty and the Beast!?!
 
Build 2017 - B8090 - How Microsoft Cognitive Services can help your apps comm...
Build 2017 - B8090 - How Microsoft Cognitive Services can help your apps comm...Build 2017 - B8090 - How Microsoft Cognitive Services can help your apps comm...
Build 2017 - B8090 - How Microsoft Cognitive Services can help your apps comm...
 
Containers & AI - Beauty and the Beast !?! @MLCon - 27.6.2024
Containers & AI - Beauty and the Beast !?! @MLCon - 27.6.2024Containers & AI - Beauty and the Beast !?! @MLCon - 27.6.2024
Containers & AI - Beauty and the Beast !?! @MLCon - 27.6.2024
 
Generating docs from APIs
Generating docs from APIsGenerating docs from APIs
Generating docs from APIs
 
Exploring ChatGPT Prompt Hacks To Maximally Optimise Your Queries
Exploring ChatGPT Prompt Hacks To Maximally Optimise Your QueriesExploring ChatGPT Prompt Hacks To Maximally Optimise Your Queries
Exploring ChatGPT Prompt Hacks To Maximally Optimise Your Queries
 
OpenAI GPT in Depth - Questions and Misconceptions
OpenAI GPT in Depth - Questions and MisconceptionsOpenAI GPT in Depth - Questions and Misconceptions
OpenAI GPT in Depth - Questions and Misconceptions
 
Lecture 9 Professional Practices
Lecture 9 Professional PracticesLecture 9 Professional Practices
Lecture 9 Professional Practices
 
Unleashing The Power Of CHAT-GPT
Unleashing The Power Of CHAT-GPTUnleashing The Power Of CHAT-GPT
Unleashing The Power Of CHAT-GPT
 
SEO Exellence with ChatGPT-Webinar Duda
SEO Exellence with ChatGPT-Webinar DudaSEO Exellence with ChatGPT-Webinar Duda
SEO Exellence with ChatGPT-Webinar Duda
 
Mat Velloso - Bots in the real world
Mat Velloso - Bots in the real worldMat Velloso - Bots in the real world
Mat Velloso - Bots in the real world
 
MuleSoft + Augmented Reality & ChatGPT
MuleSoft + Augmented Reality & ChatGPTMuleSoft + Augmented Reality & ChatGPT
MuleSoft + Augmented Reality & ChatGPT
 
Lessons learned from building a commercial bot development platform
Lessons learned from building a commercial bot development platformLessons learned from building a commercial bot development platform
Lessons learned from building a commercial bot development platform
 
How AI is going to change the world _M.Mujeeb Riaz.pdf
How AI is going to change the world _M.Mujeeb Riaz.pdfHow AI is going to change the world _M.Mujeeb Riaz.pdf
How AI is going to change the world _M.Mujeeb Riaz.pdf
 
Build Intelligent Conversational Agents with Amazon Neptune and Amazon SageMa...
Build Intelligent Conversational Agents with Amazon Neptune and Amazon SageMa...Build Intelligent Conversational Agents with Amazon Neptune and Amazon SageMa...
Build Intelligent Conversational Agents with Amazon Neptune and Amazon SageMa...
 

More from Wey Wey Web

Portable, secure, and lightweight: Wasm runtimes and their use-cases - Natali...
Portable, secure, and lightweight: Wasm runtimes and their use-cases - Natali...Portable, secure, and lightweight: Wasm runtimes and their use-cases - Natali...
Portable, secure, and lightweight: Wasm runtimes and their use-cases - Natali...
Wey Wey Web
 
Auditing Design Systems for Accessibility - Anna E. Cook
Auditing Design Systems for Accessibility - Anna E. CookAuditing Design Systems for Accessibility - Anna E. Cook
Auditing Design Systems for Accessibility - Anna E. Cook
Wey Wey Web
 
Adaptive Designs, Beyond Pixel Perfection - Stephanie Walter
Adaptive Designs, Beyond Pixel Perfection - Stephanie WalterAdaptive Designs, Beyond Pixel Perfection - Stephanie Walter
Adaptive Designs, Beyond Pixel Perfection - Stephanie Walter
Wey Wey Web
 
Sharing is caring: what to know before you build a Research Repository - Juli...
Sharing is caring: what to know before you build a Research Repository - Juli...Sharing is caring: what to know before you build a Research Repository - Juli...
Sharing is caring: what to know before you build a Research Repository - Juli...
Wey Wey Web
 
Unlocking collaboration: A framework for developers and designers - Alicia Ca...
Unlocking collaboration: A framework for developers and designers - Alicia Ca...Unlocking collaboration: A framework for developers and designers - Alicia Ca...
Unlocking collaboration: A framework for developers and designers - Alicia Ca...
Wey Wey Web
 
3 reasons to switch to OKLCH - Anton Lovchikov
3 reasons to switch to OKLCH - Anton Lovchikov3 reasons to switch to OKLCH - Anton Lovchikov
3 reasons to switch to OKLCH - Anton Lovchikov
Wey Wey Web
 
Declarative Design - Jeremy Keith - Wey Wey Wey 2023
Declarative Design - Jeremy Keith - Wey Wey Wey 2023Declarative Design - Jeremy Keith - Wey Wey Wey 2023
Declarative Design - Jeremy Keith - Wey Wey Wey 2023
Wey Wey Web
 
Form follows emotion - Isabella De Cuppis
Form follows emotion - Isabella De CuppisForm follows emotion - Isabella De Cuppis
Form follows emotion - Isabella De Cuppis
Wey Wey Web
 
UX for emerging tech - Josephine Scholtes
UX for emerging tech - Josephine ScholtesUX for emerging tech - Josephine Scholtes
UX for emerging tech - Josephine Scholtes
Wey Wey Web
 
Collaborative software with State Machines - Laura Kalbag
Collaborative software with State Machines -  Laura KalbagCollaborative software with State Machines -  Laura Kalbag
Collaborative software with State Machines - Laura Kalbag
Wey Wey Web
 
Lessons Learned from building Session Replay - Francesco Novy
Lessons Learned from building Session Replay - Francesco NovyLessons Learned from building Session Replay - Francesco Novy
Lessons Learned from building Session Replay - Francesco Novy
Wey Wey Web
 
Let's get visual. Visual testing in your project - Ramona Schwering
Let's get visual. Visual testing in your project - Ramona SchweringLet's get visual. Visual testing in your project - Ramona Schwering
Let's get visual. Visual testing in your project - Ramona Schwering
Wey Wey Web
 
Solving Common Web Component Problems - Simon MacDonald
Solving Common Web Component Problems - Simon MacDonaldSolving Common Web Component Problems - Simon MacDonald
Solving Common Web Component Problems - Simon MacDonald
Wey Wey Web
 
The Future is Malleable - Aleksandra Sikora
The Future is Malleable - Aleksandra SikoraThe Future is Malleable - Aleksandra Sikora
The Future is Malleable - Aleksandra Sikora
Wey Wey Web
 
Trending tools & methodologies for UX - Josephine Scholtes.pdf
Trending tools & methodologies for UX - Josephine Scholtes.pdfTrending tools & methodologies for UX - Josephine Scholtes.pdf
Trending tools & methodologies for UX - Josephine Scholtes.pdf
Wey Wey Web
 
Decoding Web Accessibility through Testing - Anuradha Kumari
Decoding Web Accessibility through Testing  - Anuradha KumariDecoding Web Accessibility through Testing  - Anuradha Kumari
Decoding Web Accessibility through Testing - Anuradha Kumari
Wey Wey Web
 
Good Security is one question away - Wiktoria Dalach
Good Security is one  question away - Wiktoria DalachGood Security is one  question away - Wiktoria Dalach
Good Security is one question away - Wiktoria Dalach
Wey Wey Web
 
Dynamic CSS Secrets - Lea Verou
Dynamic CSS Secrets - Lea Verou Dynamic CSS Secrets - Lea Verou
Dynamic CSS Secrets - Lea Verou
Wey Wey Web
 
The Misty Report - Douglas Crockford
The Misty Report - Douglas CrockfordThe Misty Report - Douglas Crockford
The Misty Report - Douglas Crockford
Wey Wey Web
 
Web performance optimisations for the harsh conditions - Anna Migas
Web performance optimisations for the harsh conditions - Anna MigasWeb performance optimisations for the harsh conditions - Anna Migas
Web performance optimisations for the harsh conditions - Anna Migas
Wey Wey Web
 

More from Wey Wey Web (20)

Portable, secure, and lightweight: Wasm runtimes and their use-cases - Natali...
Portable, secure, and lightweight: Wasm runtimes and their use-cases - Natali...Portable, secure, and lightweight: Wasm runtimes and their use-cases - Natali...
Portable, secure, and lightweight: Wasm runtimes and their use-cases - Natali...
 
Auditing Design Systems for Accessibility - Anna E. Cook
Auditing Design Systems for Accessibility - Anna E. CookAuditing Design Systems for Accessibility - Anna E. Cook
Auditing Design Systems for Accessibility - Anna E. Cook
 
Adaptive Designs, Beyond Pixel Perfection - Stephanie Walter
Adaptive Designs, Beyond Pixel Perfection - Stephanie WalterAdaptive Designs, Beyond Pixel Perfection - Stephanie Walter
Adaptive Designs, Beyond Pixel Perfection - Stephanie Walter
 
Sharing is caring: what to know before you build a Research Repository - Juli...
Sharing is caring: what to know before you build a Research Repository - Juli...Sharing is caring: what to know before you build a Research Repository - Juli...
Sharing is caring: what to know before you build a Research Repository - Juli...
 
Unlocking collaboration: A framework for developers and designers - Alicia Ca...
Unlocking collaboration: A framework for developers and designers - Alicia Ca...Unlocking collaboration: A framework for developers and designers - Alicia Ca...
Unlocking collaboration: A framework for developers and designers - Alicia Ca...
 
3 reasons to switch to OKLCH - Anton Lovchikov
3 reasons to switch to OKLCH - Anton Lovchikov3 reasons to switch to OKLCH - Anton Lovchikov
3 reasons to switch to OKLCH - Anton Lovchikov
 
Declarative Design - Jeremy Keith - Wey Wey Wey 2023
Declarative Design - Jeremy Keith - Wey Wey Wey 2023Declarative Design - Jeremy Keith - Wey Wey Wey 2023
Declarative Design - Jeremy Keith - Wey Wey Wey 2023
 
Form follows emotion - Isabella De Cuppis
Form follows emotion - Isabella De CuppisForm follows emotion - Isabella De Cuppis
Form follows emotion - Isabella De Cuppis
 
UX for emerging tech - Josephine Scholtes
UX for emerging tech - Josephine ScholtesUX for emerging tech - Josephine Scholtes
UX for emerging tech - Josephine Scholtes
 
Collaborative software with State Machines - Laura Kalbag
Collaborative software with State Machines -  Laura KalbagCollaborative software with State Machines -  Laura Kalbag
Collaborative software with State Machines - Laura Kalbag
 
Lessons Learned from building Session Replay - Francesco Novy
Lessons Learned from building Session Replay - Francesco NovyLessons Learned from building Session Replay - Francesco Novy
Lessons Learned from building Session Replay - Francesco Novy
 
Let's get visual. Visual testing in your project - Ramona Schwering
Let's get visual. Visual testing in your project - Ramona SchweringLet's get visual. Visual testing in your project - Ramona Schwering
Let's get visual. Visual testing in your project - Ramona Schwering
 
Solving Common Web Component Problems - Simon MacDonald
Solving Common Web Component Problems - Simon MacDonaldSolving Common Web Component Problems - Simon MacDonald
Solving Common Web Component Problems - Simon MacDonald
 
The Future is Malleable - Aleksandra Sikora
The Future is Malleable - Aleksandra SikoraThe Future is Malleable - Aleksandra Sikora
The Future is Malleable - Aleksandra Sikora
 
Trending tools & methodologies for UX - Josephine Scholtes.pdf
Trending tools & methodologies for UX - Josephine Scholtes.pdfTrending tools & methodologies for UX - Josephine Scholtes.pdf
Trending tools & methodologies for UX - Josephine Scholtes.pdf
 
Decoding Web Accessibility through Testing - Anuradha Kumari
Decoding Web Accessibility through Testing  - Anuradha KumariDecoding Web Accessibility through Testing  - Anuradha Kumari
Decoding Web Accessibility through Testing - Anuradha Kumari
 
Good Security is one question away - Wiktoria Dalach
Good Security is one  question away - Wiktoria DalachGood Security is one  question away - Wiktoria Dalach
Good Security is one question away - Wiktoria Dalach
 
Dynamic CSS Secrets - Lea Verou
Dynamic CSS Secrets - Lea Verou Dynamic CSS Secrets - Lea Verou
Dynamic CSS Secrets - Lea Verou
 
The Misty Report - Douglas Crockford
The Misty Report - Douglas CrockfordThe Misty Report - Douglas Crockford
The Misty Report - Douglas Crockford
 
Web performance optimisations for the harsh conditions - Anna Migas
Web performance optimisations for the harsh conditions - Anna MigasWeb performance optimisations for the harsh conditions - Anna Migas
Web performance optimisations for the harsh conditions - Anna Migas
 

Recently uploaded

Measuring the Impact of Network Latency at Twitter
Measuring the Impact of Network Latency at TwitterMeasuring the Impact of Network Latency at Twitter
Measuring the Impact of Network Latency at Twitter
ScyllaDB
 
TrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-In
TrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-InTrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-In
TrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-In
TrustArc
 
Mitigating the Impact of State Management in Cloud Stream Processing Systems
Mitigating the Impact of State Management in Cloud Stream Processing SystemsMitigating the Impact of State Management in Cloud Stream Processing Systems
Mitigating the Impact of State Management in Cloud Stream Processing Systems
ScyllaDB
 
How to Build a Profitable IoT Product.pptx
How to Build a Profitable IoT Product.pptxHow to Build a Profitable IoT Product.pptx
How to Build a Profitable IoT Product.pptx
Adam Dunkels
 
The Rise of Supernetwork Data Intensive Computing
The Rise of Supernetwork Data Intensive ComputingThe Rise of Supernetwork Data Intensive Computing
The Rise of Supernetwork Data Intensive Computing
Larry Smarr
 
What's New in Copilot for Microsoft365 May 2024.pptx
What's New in Copilot for Microsoft365 May 2024.pptxWhat's New in Copilot for Microsoft365 May 2024.pptx
What's New in Copilot for Microsoft365 May 2024.pptx
Stephanie Beckett
 
Observability For You and Me with OpenTelemetry
Observability For You and Me with OpenTelemetryObservability For You and Me with OpenTelemetry
Observability For You and Me with OpenTelemetry
Eric D. Schabell
 
20240704 QFM023 Engineering Leadership Reading List June 2024
20240704 QFM023 Engineering Leadership Reading List June 202420240704 QFM023 Engineering Leadership Reading List June 2024
20240704 QFM023 Engineering Leadership Reading List June 2024
Matthew Sinclair
 
Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...
Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...
Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...
Erasmo Purificato
 
Best Practices for Effectively Running dbt in Airflow.pdf
Best Practices for Effectively Running dbt in Airflow.pdfBest Practices for Effectively Running dbt in Airflow.pdf
Best Practices for Effectively Running dbt in Airflow.pdf
Tatiana Al-Chueyr
 
WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf
WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdfWhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf
WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf
ArgaBisma
 
The Increasing Use of the National Research Platform by the CSU Campuses
The Increasing Use of the National Research Platform by the CSU CampusesThe Increasing Use of the National Research Platform by the CSU Campuses
The Increasing Use of the National Research Platform by the CSU Campuses
Larry Smarr
 
7 Most Powerful Solar Storms in the History of Earth.pdf
7 Most Powerful Solar Storms in the History of Earth.pdf7 Most Powerful Solar Storms in the History of Earth.pdf
7 Most Powerful Solar Storms in the History of Earth.pdf
Enterprise Wired
 
UiPath Community Day Kraków: Devs4Devs Conference
UiPath Community Day Kraków: Devs4Devs ConferenceUiPath Community Day Kraków: Devs4Devs Conference
UiPath Community Day Kraków: Devs4Devs Conference
UiPathCommunity
 
論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...
論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...
論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...
Toru Tamaki
 
How Social Media Hackers Help You to See Your Wife's Message.pdf
How Social Media Hackers Help You to See Your Wife's Message.pdfHow Social Media Hackers Help You to See Your Wife's Message.pdf
How Social Media Hackers Help You to See Your Wife's Message.pdf
HackersList
 
Recent Advancements in the NIST-JARVIS Infrastructure
Recent Advancements in the NIST-JARVIS InfrastructureRecent Advancements in the NIST-JARVIS Infrastructure
Recent Advancements in the NIST-JARVIS Infrastructure
KAMAL CHOUDHARY
 
Choose our Linux Web Hosting for a seamless and successful online presence
Choose our Linux Web Hosting for a seamless and successful online presenceChoose our Linux Web Hosting for a seamless and successful online presence
Choose our Linux Web Hosting for a seamless and successful online presence
rajancomputerfbd
 
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdfBT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
Neo4j
 
WPRiders Company Presentation Slide Deck
WPRiders Company Presentation Slide DeckWPRiders Company Presentation Slide Deck
WPRiders Company Presentation Slide Deck
Lidia A.
 

Recently uploaded (20)

Measuring the Impact of Network Latency at Twitter
Measuring the Impact of Network Latency at TwitterMeasuring the Impact of Network Latency at Twitter
Measuring the Impact of Network Latency at Twitter
 
TrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-In
TrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-InTrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-In
TrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-In
 
Mitigating the Impact of State Management in Cloud Stream Processing Systems
Mitigating the Impact of State Management in Cloud Stream Processing SystemsMitigating the Impact of State Management in Cloud Stream Processing Systems
Mitigating the Impact of State Management in Cloud Stream Processing Systems
 
How to Build a Profitable IoT Product.pptx
How to Build a Profitable IoT Product.pptxHow to Build a Profitable IoT Product.pptx
How to Build a Profitable IoT Product.pptx
 
The Rise of Supernetwork Data Intensive Computing
The Rise of Supernetwork Data Intensive ComputingThe Rise of Supernetwork Data Intensive Computing
The Rise of Supernetwork Data Intensive Computing
 
What's New in Copilot for Microsoft365 May 2024.pptx
What's New in Copilot for Microsoft365 May 2024.pptxWhat's New in Copilot for Microsoft365 May 2024.pptx
What's New in Copilot for Microsoft365 May 2024.pptx
 
Observability For You and Me with OpenTelemetry
Observability For You and Me with OpenTelemetryObservability For You and Me with OpenTelemetry
Observability For You and Me with OpenTelemetry
 
20240704 QFM023 Engineering Leadership Reading List June 2024
20240704 QFM023 Engineering Leadership Reading List June 202420240704 QFM023 Engineering Leadership Reading List June 2024
20240704 QFM023 Engineering Leadership Reading List June 2024
 
Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...
Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...
Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...
 
Best Practices for Effectively Running dbt in Airflow.pdf
Best Practices for Effectively Running dbt in Airflow.pdfBest Practices for Effectively Running dbt in Airflow.pdf
Best Practices for Effectively Running dbt in Airflow.pdf
 
WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf
WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdfWhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf
WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf
 
The Increasing Use of the National Research Platform by the CSU Campuses
The Increasing Use of the National Research Platform by the CSU CampusesThe Increasing Use of the National Research Platform by the CSU Campuses
The Increasing Use of the National Research Platform by the CSU Campuses
 
7 Most Powerful Solar Storms in the History of Earth.pdf
7 Most Powerful Solar Storms in the History of Earth.pdf7 Most Powerful Solar Storms in the History of Earth.pdf
7 Most Powerful Solar Storms in the History of Earth.pdf
 
UiPath Community Day Kraków: Devs4Devs Conference
UiPath Community Day Kraków: Devs4Devs ConferenceUiPath Community Day Kraków: Devs4Devs Conference
UiPath Community Day Kraków: Devs4Devs Conference
 
論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...
論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...
論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...
 
How Social Media Hackers Help You to See Your Wife's Message.pdf
How Social Media Hackers Help You to See Your Wife's Message.pdfHow Social Media Hackers Help You to See Your Wife's Message.pdf
How Social Media Hackers Help You to See Your Wife's Message.pdf
 
Recent Advancements in the NIST-JARVIS Infrastructure
Recent Advancements in the NIST-JARVIS InfrastructureRecent Advancements in the NIST-JARVIS Infrastructure
Recent Advancements in the NIST-JARVIS Infrastructure
 
Choose our Linux Web Hosting for a seamless and successful online presence
Choose our Linux Web Hosting for a seamless and successful online presenceChoose our Linux Web Hosting for a seamless and successful online presence
Choose our Linux Web Hosting for a seamless and successful online presence
 
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdfBT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
 
WPRiders Company Presentation Slide Deck
WPRiders Company Presentation Slide DeckWPRiders Company Presentation Slide Deck
WPRiders Company Presentation Slide Deck
 

ChatGPT and AI for web developers - Maximiliano Firtman

  • 1. MAXIMILIANO FIRTMAN ChatGPT and AI for Web Developers @f i rt A Yay-Yay conf for UI Lovers
  • 2. MAXIMILIANO FIRTMAN MOBILE+WEB DEVELOPER AUTHOR Authored 13 books and +70 courses @FIRT﹒FIRT.DEV
  • 3. 3
  • 6. I'm not here to tell you ChatGPT will replace all web developers :-)
  • 7. 7
  • 8. So, what are we going to talk about?
  • 9. What we'll cover IA and Web Development Main Concepts Prompt Enginering? Custom Data
  • 10. Same concepts can be used today with many models and providers
  • 12. ChatGPT Generative Pre-trained Transformer GPT OpenAI Large Language Model LLM Deep Learning Machine Learning Arti fi cial Inteligence AI APIs Microsoft Bing Chat Azure OpenAI APIs
  • 13. LLMs are not the only available AI models for use today
  • 14. Large Language Models can be used for several tasks without changing or training models
  • 17. Sequence of characters or subwords that the model uses as the basic unit of processing and understanding natural language text. Token
  • 19. We are not yet ready for self-host models on web servers or clients
  • 20. Other Companies and Models Meta Llama Google LaMDA / PaLM Claude Mistral AI X? Amazon?
  • 21. Cloud Services for Generative AI OpenAI Microsoft Azure GPT / OpenAI GPT AWS Bedrock DALL-E Llama Llama Claude Hugging Face Mistral Other Google Cloud PaLM
  • 22. We can use cloud-based APIs for using LLMs RESTFul APIs High level APIs Multi-vendor libraries Langchain Vercel AI SDK
  • 23. LLMs can hallucinate, making facts and presenting them in a very convincing way.
  • 25. To reduce hallucination we can use low values for temperature
  • 26. IA and Web Development
  • 27. Use AI for your apps to create, transform and manipulate data or conversations, such as chatbots INTEGRATION Create web services that can be consumed by ChatGPT public app PLUGINS Use GPT APIs to create and curate content for your website and social networks CONTENT Serve content for IAs that are browsing your website looking for content for users AIO What can we do with GPT as web developers
  • 28. • Summarizing • Inferring (sentiment, relevant data, tags) • Transforming Data (translation, format conversion, • Extracting Data • Creating content and expand on a fact Capabilities
  • 29. • User Input detection: profanity, hate speech, inappropriate content • Content Creation • Sentiment Analysis • Personalization: Rewrite articles • Language Translation • Content Tagging • Chatbots Ideas for Web Developers
  • 31. • ChatGPT and Bing Chat can browse the web using the "Bing plugin" • It honors robots.txt • The keyword for the User Agent is ChatGPT-User • SEO for AI, AIO?: You don't need to do anything in special Bing Browser
  • 32. Creating your own Plugins
  • 33. • We can create plugins from web services so users can use our services • We create a JSON manifest and register it with ChatGPT • They can be used in custom GPTs • How does it work? Plugins
  • 35. ChatGPT Plugin Manifest { "schema_version": "v1", "name_for_human": "Wey Wey Web Plugin", "name_for_model": "Wey Wey Web Plugin for ", "description_for_human": "You can get information about . . . , "description_for_model": "Search on web and UX sessions at Wey Wey Web", "auth": { "type": "none"}, "api": { "type": "openapi", "url": "https: / / domain.com/openapi.yaml", "is_user_authenticated": false }, } You have to host the file in yourdomain.com/.well-known/ai-plugin.json
  • 36. ChatGPT Endpoint description openapi: 3.0.1 servers: - url: http: / / weyweyweb.com/api paths: /sessions: get: operationId: getSessions summary: Get the list of sessions at Wey Wey Web responses: "200": description: OK content: application/json: schema: $ref: '#/components/schemas/getSessions' You need to describe your service in a YAML file
  • 38. Process of designing and refining prompts or inputs for language models like GPT to generate desired outputs or responses. Prompt Engineering
  • 40. The more explicit and large the prompt, more accurate the results we can get from GPT.
  • 42. • Sometimes wee want consistent and deterministic outputs • Sometimes we need the output in specific formats for processing • We are paying for the API so we need to reduce abuse • We want to validate user generated content that goes into the prompt Prompt Engineering for Developers
  • 43. • Write specific and clear instructions • For large task you can provide the model a list of steps you want it to make to "think" about the problem • Also, for large tasks you can make several GPT calls, step by step, always providing the previous context as if you are "thinking" with it • Use an iterative process to find the right prompt for what you are expecting Basic Rules
  • 44. • Use delimiters for dynamic data • Tags as in XML • ``` • """ • --- • Explain to the model the delimiter you are using Specific and Clear Instructions
  • 45. • Ask for data in a structured format you want (JSON, HTML, CSV, or any string format) • Give the model an example of what you are expecting with enough semantic information • Explain to the model what to do when the input is invalid, such as "Respond 'false' when..." Specific and Clear Instructions
  • 47. • The magic happens in the context • Context? Just information in the prompt • For large databases and documents, we use Vector-based DBs Connecting GPT to our data
  • 48. Store and index high-dimensional vectors representing text data, allowing for efficient similarity search and retrieval of documents or phrases based on their embedding representations Vector-based DBs
  • 49. • We split our documents in slices by character length (a PDF, an HTML, a FAQ, a video's caption) • We convert each slice into its embedding representation • OpenAI offers us that service through the API • We store the embeddings in a vector database • It's just numerical statistical data Split and Embed
  • 50. USER'S PROMPT OUTPUT OPEN AI Vector DB Your App Prompt Slice of relevant info Prompt as Embedding Prompt + Slice Embedding Output Embeddings GPT Make GPT Queries with Embedding
  • 54. MAXIMILIANO FIRTMAN Thanks! ¡Gracias! @f i rt f i rt.dev A Yay-Yay conf for UI Lovers Some slides are from my course at