Zain Fathoni
Building a Performant Web using Remix with Public Google Sheets-Backed Database
Google Sheets
Form Responses
Google Forms
Public Google Sheets
Remix Forms
JSON Files
ARCHITECTURE
Publish to The Web
Publishing
A crowdsourcing platform for healthcare support during the Delta wave of the pandemic.
https://www.wargabantuwarga.com/
WargaBantuWarga
Senar.ai
Existing Websites
References
1.5B
Statistic caption this is body copy and it goes a little like this
“Talk is cheap.
Show me the code.”
Linus Torvalds
npx create-remix@latest
One field name change might break everything.
A large dataset might require longer build time.
Schema Inconsistency
Build Time
Need to maintain multiple Google Sheets with restrictive access controls. Otherwise, everything is public.
Access Control
Caveats
01
02
03
Thank You
Zain Fathoni
Senior Front-End Engineer at Relay Commerce
Supporting text if needed
Section 1
A section title should not exceed two lines
Supporting text if needed
Section 2
A section title should not exceed two lines
Supporting text if needed
Section 3
A section title should not exceed two lines
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.
Headline goes here
Section 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Headline goes here
Section 2
Right-click �and select�‘Replace image’
This is body copy. Connect with fellow developers and startups in your area, hear from industry experts, share your skills, and learn new ones.
This is body copy. Bringing developers together in-person and online. Stay in the know about upcoming events.
This is a subhead
This is a subhead
Headline goes here
Section #
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Headline goes here
Right-click �and select�‘Replace image’
Section 3
Connect with fellow developers and startups in your area, hear from industry experts, share your skills, and learn new ones.
Get inspired to use Google technologies. Search for open source projects, learn from other developers, and submit your latest projects.
Tile Goes Here
Tile Goes Here
Bringing developers together in-person and online. Stay in the know about upcoming events.
Tile Goes Here
Section #
01
02
03
This is body copy. Bringing developers together in-person and online. Stay in the know about upcoming events, catch up on content you missed, and connect with Google experts.
This is body copy. Get inspired to use Google technologies. Search for open source projects, learn from other developers, and submit your latest projects for others to learn from.
Recommendation
Learnings
Section #
Text
Yogyakarta
Section title slides
Optional tag here
Here is a short title for a talk.
Optional tag here
Here is a longer title. �A title length should not exceed three lines.
Supporting text if needed
Section 1
A section title should not exceed two lines
Supporting text if needed
Section 2
A section title should not exceed two lines
Supporting text if needed
Section 3
A section title should not exceed two lines
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Headline goes here
Section 2
Right-click �and select�‘Replace image’
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Headline goes here
Right-click �and select�‘Replace image’
Section 3
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. �Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Duis aute irure dolor in sunt reprehenderit in voluptate ea commodo consequat deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. �Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Right-click �and select�‘Replace image’
Headline goes here
Section #
Headline goes here
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
ex ea commodo consequat.
Right-click �and select�‘Replace image’
Section #
Lorem ipsum�
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
Lorem ipsum�
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
Lorem ipsum�
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
Headline goes here
Section #
Connect with fellow developers and startups in your area, hear from industry experts, share your skills, and learn new ones.
Get inspired to use Google technologies. Search for open source projects, learn from other developers, and submit your latest projects.
This is a subhead
This is a subhead
Bringing developers together in-person and online. Stay in the know about upcoming events.
This is a subhead
Headline goes here
Section #
“Good design �is as little design �as possible.”
Dieter Rams
This is body copy. Bringing developers together in-person and online. Stay in the know about upcoming events, catch up on content you missed, and connect with Google experts.
Learnings
200
Statistic Caption
Section #
1.5B
Statistic caption this is body copy �and it goes a little like this
1.5B
Statistic caption this is body copy and it goes a little like this
Right-click �and select�‘Replace image’
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris consectetur velit massa, eget dapibus justo lobortis tempus. Nullam sit amet pulvinar quam, et auctor libero. Proin id sem aliquet, scelerisque purus nec, vehicula odio. Aliquam orci nisi, placerat blandit massa vitae, laoreet lobortis ipsum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris consectetur velit massa, eget dapibus justo lobortis tempus. Nullam sit amet pulvinar quam, et auctor libero. Proin id sem aliquet, scelerisque purus nec, vehicula odio. Aliquam orci nisi, placerat blandit massa vitae, laoreet lobortis ipsum.
Right-click �and select�‘Replace image’
Lorem
Ipsum
Right-click �and select�‘Replace image’
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris consectetur velit massa, eget dapibus justo lobortis tempus. Nullam sit amet pulvinar quam, et auctor libero. Proin id sem aliquet, scelerisque purus nec, vehicula odio. Aliquam orci nisi, placerat blandit massa vitae, laoreet lobortis ipsum.
Section #
This is body copy. Bringing developers together in-person and online. Stay in the know about upcoming events, catch up on content you missed, and connect with Google experts.
Learnings
97%
Statistic Caption
Section #
This is body copy. Bringing developers together in-person and online. Stay in the know about upcoming events, catch up on content you missed, and connect with Google experts.
Learnings
86%
Statistic Caption
14%
Statistic Caption
Section #
Connect with fellow developers and startups in your area, hear from industry experts, share your skills, and learn new ones.
Get inspired to use Google technologies. Search for open source projects, learn from other developers, and submit your latest projects.
1 billion
2 billion
Bringing developers together in-person and online. Stay in the know about upcoming events.
100,000
Section #
Connect with fellow developers and startups in your area, hear from industry experts, share your skills, and learn new ones.
Get inspired to use Google technologies. Search for open source projects, learn from other developers, and submit your latest projects.
1 billion
2 billion
Bringing developers together in-person and online. Stay in the know about upcoming events.
100,000
Bringing developers together in-person and online. Stay in the know about upcoming events.
Connect with fellow developers and startups in your area, hear from industry experts, share your skills, and learn new ones.
20 million
2,000
Get inspired to use Google technologies. Search for open source projects, learn from other developers, and submit your latest projects.
10
Section #
This is body copy. Bringing developers together in-person and online. Stay in the know about upcoming events, catch up on content you missed, and connect with Google experts.
Tablet Slide
Right-click �and select�‘Replace image’
Section #
Image in tablet caption
Right-click �and select�‘Replace image’
Section #
This is body copy. Bringing developers together in-person and online. Stay in the know about upcoming events, catch up on content you missed, and connect with Google experts.
Headline
Right-click �and select�‘Replace image’
Section #
This is body copy. Bringing developers together in-person and online. Stay in the know about upcoming events, catch up on content you missed, and connect with Google experts.
Headline
Right-click �and select�‘Replace image’
Section #
Embed a video�
Displaying code
code_slides.txt
// A couple more notes on code slides:
// *Use the Google Sans Mono font
// *Set line spacing to 1.2
// *Don’t use font sizes below 25
Code is set in�Google Sans Mono
code_slides.txt
protected void onTryUpdate(int reason) throws RetryException {
// Do some awesome stuff
int foo = 15;
publishArtwork(new Artwork.Builder()
.title(photo.name)
.imageUri(Uri.parse(photo.image_url))
.viewIntent(new Intent(Intent.ACTION_VIEW,
Uri.parse("http://500px.com/photo/" + photo.id)))
.build());
scheduleUpdate(System.currentTimeMillis() + ROTATE_TIME_MILLIS);
}
Use this template for code snippets longer than �6 lines
Copy / paste your �code using this tool �for formatting using the ‘Dark Alternate’ �theme
code_slides.txt
protected void onTryUpdate(int reason) throws RetryException {
// Do some awesome stuff
int foo = 15;
publishArtwork(new Artwork.Builder()
.title(photo.name)
.imageUri(Uri.parse(photo.image_url))
.viewIntent(new Intent(Intent.ACTION_VIEW,
Uri.parse("http://500px.com/photo/" + photo.id)))
.build());
scheduleUpdate(System.currentTimeMillis() + ROTATE_TIME_MILLIS);
}
Use this style to highlight code
Image with code snippet
* Use Google Sans Mono
* Set line spacing to 1.2
* Don’t use font sizes below 25
Image with code snippet
* Use Google Sans Mono
* Set line spacing to 1.2
* Don’t use font sizes below 25
Thank you slides
Thank You
Speaker Name pronouns
Job Title
Thank You
Speaker Name pronouns
Job Title
Speaker Name pronouns
Job Title
Thank You
Speaker Name pronouns
Job Title
Speaker Name pronouns
Job Title
Speaker Name pronouns
Job Title
Speaker Name pronouns
Job Title
Resources
Charts, tables, graphs
Lorem Ipsum | May 24, 2023 | 2,000 |
Lorem Ipsum | June 21, 2023 | 1,000 |
Lorem Ipsum | June 28, 2023 | 1,200 |
Lorem Ipsum | Sept 6-7, 2023 | 2,000 |
TOTAL | 6,200 | |
Lorem
Lorem
Lorem
TABLE ELEMENTS
2px Border
No border on outside of table
Lorem ipsum dolor sit amet consectetur | Mar 14 | Mar 14 | Mar 14 | July 15 |
Lorem ipsum dolor sit amet consectetur | Mar 31 | Apr 14 | Apr 14 | May 31 |
Lorem ipsum dolor sit amet consectetur | Mar 31 | Mar 31 | Mar 31 | May 31 |
Lorem ipsum dolor sit amet consectetur | Mar 31 | Apr 7 | Apr 7 | May 31 |
Lorem ipsum dolor sit amet consectetur | May 24 | June 21 | June 28 | Sept 6-7 |
US
EMEA
IN
CN
Key Milestones
TABLE ELEMENTS
Lorem ipsum dolor sit amet consectetur | hfujii@ |
Lorem ipsum dolor sit amet consectetur | sodhia@ |
Lorem ipsum dolor sit amet consectetur | mariareis@ |
Lorem ipsum dolor sit amet consectetur | mariareis@ |
Lorem ipsum dolor sit amet consectetur | lhflores@ |
Lorem ipsum dolor sit amet consectetur | lhflores@ |
Label
Owner
TABLE ELEMENTS
Label 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore. Veniam et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.
Label 2
Label 3
Label 4
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore. Veniam et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore. Veniam et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore. Veniam et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.
TABLE ELEMENTS
Caption
Large Box
Caption
30px Caption
4px Object Border when stroke only
Medium Box
Caption
Caption
Caption
Small Box
Caption
Use for nested items only
23px Caption
Labels
Label
Label
Arrows
Simple �Charts: 4px
19px Caption
23px Caption
CHART ELEMENTS
Caption
Caption
Caption
Caption
Caption
Short Label
Short Label
Short Label
Short Label
Short Label
Short Label
Short Label
Short Label
CHART ELEMENTS
Step B
Short Label
Step D
Step E
Step A
Step C
CHART ELEMENTS
Column Label
Caption 10�Two lines
Caption 9�Two lines
Caption 8�Two lines
Caption 7�Two lines
Caption 6�Two lines
Caption 5�Two lines
Caption 4�Two lines
Caption 3�Two lines
Caption 2�Two lines
Caption 1�Two lines
Group Label
Column Label
Column Label
Column Label
CHART ELEMENTS
Short Label
Short Label
Short Label
Short Label
Short Label
Short Label
Short Label
CHART ELEMENTS
Label One
Short Label
Short Label
Short Label
Label Two
Label Three
Label Four
Label Five
Short Label
Short Label
Short Label
Short Label
Short Label
Short Label
Short Label
Short Label
Short Label
Short Label
Short Label
Short Label
CHART ELEMENTS
2012
2014
2016
2018
2020
Category�Label One
Caption 1�Two lines
Caption 3�Two lines
Caption 2�Two lines
Caption 5�Two lines
Caption 4�Two lines
Caption 6�Two lines
Caption 7�Two lines
Caption 9�Two lines
Caption 8�Two lines
Category�Label Two
CHART ELEMENTS
US MAP
Devices
Right-click �and select�‘Replace image’
Mobile
Right-click �and select�‘Replace image’
Mobile - Horizontal
Right-click �and select�‘Replace image’
Wireframe - Tablet
Right-click �and select�‘Replace image’
Wireframe - Tablet
Right-click �and select�‘Replace image’
Wireframe - Wear OS
Right-click �and select�‘Replace image’
Pixel 6
Right-click �and select�‘Replace image’
Pixel 6 - Horizontal
Right-click �and select�‘Replace image’
iphone 14
Right-click �and select�‘Replace image’
iphone 14 - Horizontal
Right-click �and select�‘Replace image’
Device - Tablet
Right-click �and select�‘Replace image’
Device - Tablet
Right-click �and select�‘Replace image’
Device - Wear OS
Right-click �and select�‘Replace image’
Device - Pixelbook Go
Right-click �and select�‘Replace image’
Device - Pixelbook
Graphics and icons
PRODUCTS & PLATFORMS
PRODUCTS & PLATFORMS
SOCIAL MEDIA
ICONS
c
ICONS
ICONS
Iconography�Defer to the standard material icon suite.�go/icons