Best known for
Dev Stakes
4days
Four days to build one complete project as a team. Teams take a given problem or pitch their own. Judges look at clean code, performance and whether the project is deployed at the end.
Web wingW01
Building websites and servers that answer requests quickly.
Frontend, backend and full-stack development, using the tools real projects use. Every build is put online, and deploying it is part of the class.
- Next class
- Members
- 11
- Classes held
- 0
How it grows
Why a site needs more servers as it grows
The same app at 40 requests a second and at 4,800. Each new part is added only when the load breaks the setup before it.
40requests a second
LoadCeiling 320 rps
A browser, a server and a database. Most first projects look like this, and at 40 requests a second it works fine.
One server ran out of CPU. Adding a second is easy. A load balancer decides which server gets each request.
The same nine rows are read 900 times a second. A cache answers those reads, so the database is asked less.
Writes started to make people wait. Work that does not need an answer right away, like sending email, goes into a queue.
Reads outgrew the main database. A copy, called a replica, takes the reads. Writes still go to one place, because two databases that both accept writes are much harder to keep correct.
Most of the traffic was files that never change. A CDN serves images and code bundles, and the servers go quiet again.
- Stage 1: 40 requests a second, adds app-1, Postgres
- Stage 2: 300 requests a second, adds Load balancer, app-2
- Stage 3: 900 requests a second, adds Redis
- Stage 4: 1800 requests a second, adds Kafka, workers
- Stage 5: 3200 requests a second, adds replica
- Stage 6: 4800 requests a second, adds CDN
Loading a page
How a page loads, request by request
Nothing has been requested yet. The browser is looking up the address and opening a connection.
The HTML arrives. Only now does the browser learn what else the page needs.
The stylesheet and the script are fetched together. Loading things in the right order matters more than most later fixes.
First paint: text appears on screen. The font is still loading, so the text will change once it arrives.
The main image has barely started loading. It was linked three files deep, so the browser found it late.
Two API calls where one would do. Finding waste like this is a big part of the work.
The largest element is painted at 358 ms. The wing works on making numbers like this smaller.
7 requests · 254 kB · 358 ms to largest paint
0 ms
doc/wings/web
14.2 kB
cssglobals.css
8.9 kB
jsapp.js
94 kB
fontchivo-mono.woff2Blocks text
21 kB
imgcover-01.avifFound three levels deep
112 kB
xhr/api/session
0.4 kB
xhr/api/wingsSecond call, same round trip
3.1 kB
An example page load: every request the browser made, in order. Much of the wing's work is making these bars shorter.
Events
- Dev Stakes
- Frontend Sprint
- Debug Duels
- Code Surgery
Frontend Sprint
60minutes
One hour to build and deploy a working frontend on a live API, with full CRUD. State management and version control count as much as what ends up on screen.
Debug Duels
An elimination quiz, then 1v1 knockout rounds where players fix buggy code live. Correct fixes count first and speed second.
Code Surgery
2rounds
A solo contest in two rounds. First, a sixty-minute online screening on basic bugs. Then a four-hour main event on real bugs, slow code and edge cases. Judges look at correctness, performance and whether the code is easy to maintain.
Files
Class files
Fresher's Handbook
0 classesA brief roadmap to get your hands on in web development
Class log
- No classes logged yet.
Team
The team
2 coordinators · 2 senior members · 7 members
Naman Khandelwal
Coordinator
Summer of Bitcoin Formstr
Divyanshu Singh
Coordinator
No earned number yet
Arham Kachhara
Senior member
No earned number yet
Vedant Kulkarni
Senior member
No earned number yet
Members · 7
Harshit Raj
Member
Prakhar Gupta
Member
Hit Gohil
Member
Love yadav
Member
Tarun Kumar
Member
Atharva Vaish
Member
Adwita Reddy Kommidi
Member