https://gamma.app/docs/Part-2-Exercise-Setup-Vibe-Coding-85a3z7sphzojou0?mode=present#card-2uju9wa8dhmoi1p

:robot_face: 👋

👋

Prompt: Please write a JavaScript app in an artifacts window that animates a bouncing red sphere. Leave a trail behind it. Add gravity and energy when it hits the floor.

haxor

It let me manipulate the ball with a click!

Chat GPT is crazy slow for me and I can't get Claude Code to work on my personal computer.

Game of Pong

it only bounces if I make the screen longer

ç

Prompt: Write a JavaScript program that shows a cube with a colored light source; create slider bars that can change orientation of the polygon. This will take a bit longer (maybe two minutes), because your AI collaborator will generate hundreds of lines of JavaScript and CSS. But that is still a lot faster than the two weeks it took Steve and Gene to write a similar program by hand in the 1990s. In Gemini, in the right-hand window, it rendered the image in Figure 8.2. (At the time of this writing, this also worked with Claude, but not ChatGPT.)

block breaker

With fireworks

nice!

will these slides be available for download?

sigh... gonna be a night of debugging 😛

Claude Opus 4.1 after 5 mins thinking

Grok standard after 20 secs thinking

> 1. Part 2 + Exercise Setup: Vibe Coding > 2. Part 2 + Exercise Setup: Vibe Coding > > > > > > > > > > > > > > > > > > The Line Graph: 15-30 minutes > The Change Bars: 3-4 hours > Exercises and Setup Guide > 1. What You’ll Be Building (And Where) > You will be building a web application that you can access directly through your browser, to analyze and visualize data — we recommend you use your laptop, but we (vibe-coded) a 32-core VM in Google Cloud for you to use with Sourcegraph Amp. > 2. Datasets > A document containing the necessary datasets for your exercises will be made available. Please refer to this document for all data-related tasks. > 3. Slack Integration > Slack is a critical component of your ETLS experience for communication and collaboration. Ensure you: > • Join the dedicated #vibe-coding channel. > • Actively participate in discussions and leverage it for support. > > 4. Logging into the Dev server and Rules of the Road > We created “user01,” “user02", …. password is “password” — go to http://34.118.241.8:3000/ to login into your shell > • A specific login flow will be detailed. > • Assign yourself a unique user ID ranging from user03 to user99. > • Restrict your access and operations to your assigned home directory, e.g., /home/user03. > • Only use your post: 3000..3100 > > 5. For Experienced And Novice Vibe Coders > • For those of you who have done all these exercises, you may just want to jump into a super-ambitious project , like what Steve and I did > • For novice coders, maybe you want to pair up with someone (experienced or another novice), or maybe self-organize into a cohort so you can get the most out of this time > > > Available Datasets for Your Vibe Coding Projects > To help you get started with your vibe coding projects, we’ve prepared a selection of datasets. These datasets cover a variety of topics, providing rich data for analysis and visualization exercises. For detailed schemas and further information, please refer to the supplementary dataset documentation. > > Jira/Backlog Data > This public Jira dataset includes 16 instances, 1,822 projects, and 2.7 million issues, offering a comprehensive view into project management and development workflows. It is ideal for analyzing project velocity, identifying bottlenecks, and understanding issue resolution patterns. > > CI/CD Pipeline Data > Explore GHALogs with 116k workflows, providing detailed metrics on continuous integration and continuous deployment processes. This dataset can be utilized to optimize pipeline efficiency, track deployment frequency, and pinpoint areas for automation improvement. > > Titanic Passenger Data > This classic OpenML dataset contains information about passengers on the Titanic, including demographics and survival status. It’s a popular choice for introductory machine learning tasks such as classification and predictive modeling of survival rates. > > Weather/Climate Trends > Utilize data from the UK Met Office to analyze historical weather patterns and climate trends across various regions. This dataset is excellent for time-series analysis, forecasting weather events, and studying the impacts of climate change. > > CVE/Vulnerability Data > Access NIST NVD feeds to explore Common Vulnerabilities and Exposures (CVE) data, detailing security weaknesses in software and hardware. This dataset is invaluable for security analysts to assess risks, identify critical vulnerabilities, and plan effective patch management strategies. > Remember to refer to the official dataset document for specific access details and schema definitions for each of these datasets. > > The Line Graph: 15-30 minutes The Change Bars: 3-4 hours > Available Datasets for Your Vibe Coding Projects > You’re editing this card. > Gamm

I vibed out for a second and made tetris

http://34.118.241.8:3000/

QR code for your Amp credits: (here is the URL: https://ampcode.com/code/VIBE-CODING-WORKSHOP)

npm install amp

https://gist.github.com/realgenekim/40d4c33f8881ccb03f3cbb4b84c75e13

what was the command on the VM to open what Gene is showing

amp

npm install -g @sourcegraph/amp

If you use https://ampcode.com/ it will provide install instructions after you redeem your credits

> here is a url describing some data; https://gist.github.com/realgenekim/40d4c33f8881ccb03f3cbb4b84c75e13 please download the jira data

Instructions on using Amp:

Free smaller public datasets: https://github.com/awesomedata/awesome-public-datasets

@genek

I just grabbed this small dataset. https://climate.metoffice.cloud/formatted_data/gmt_NOAAGlobalTemp.csv

The weather data site has a lot of smaller sites https://climate.metoffice.cloud/temperature.html

Small sea surface temperature data: https://climate.metoffice.cloud/formatted_data/sst_HadSST4.csv

you can copy the big jira data set into your folder using cd /home/userXX then cp /home/ThePublicJiraDataset.zip .

i’ve put a copy in the home folder

you can grab global temp also cp /home/gmt_NOAAGlobalTemp.csv .

how do I get files (images) off the VM?

Woohoo!

I said "make it modern" 🙂

Did someone say winner?

Slightly unimpressed that amp chose US english instead of UK english though - some feedback needed for the next prompt...

Sharing amp chat here for titanic analysis: https://ampcode.com/threads/T-f99eee73-e69d-4246-8ff5-4e8c37f033fe

How do you get the ampcode chat? This is cool!

@catriona.walsh there is an option to share it as public in VS Code

Feedback: It would have been awesome to have a list of things to install, sign up for, etc before we started the session (especially for those of us who were silly enough to bring corporate laptops)

(and whose companies locked us out of slack)

https://titanic-analysis.vercel.app/titanic-analysis.html

Here's a quick app for Vegas suggestions for ETLS2025 created during the vibe-coding workshop:

have the slides been posted and I just missed it?

I'm having trouble seeing them

Steve was referring to this website/author: https://www.paulmduvall.com/

Prompt that I used to write my mobile app: “Write me a React Native iOS application that is a combination podcast player and YouTube player, using the Expo framework. Make it so that I can run it locally in a simulator, and eventually deploy to my iPhone”