Sylwia Vargas: Make amazing docs, faster with StackBlitz and Next.js
Sylwia Vargas: Make amazing docs, faster with StackBlitz and Next.js
Building a better, faster Web starts with creating interactive documentation. Here’s how to get it done with Sylwia Vargas, Developer Advocate at StackBlitz.
Make contributing to docs seamless: https://vercel.com/home
Content
9.6 -> - Writing documentation means
updating markdown files.
13.5 -> I find it really frustrating
to fix a typo through an IDE
18.91 -> because IDE was optimized to work
23.03 -> with code and not with content,
but is there a better way?
28 -> My name is Sylvia Vargas
29.11 -> and I'm a Developer Advocate at Stagbees.
31.65 -> I want to talk to you about
building documentation
34.96 -> with Next.js.
36.81 -> Many of you are familiar with Nextra
39.53 -> as static side generator
used for docs and blogs
42.44 -> based on Next.js.
44.3 -> Say you wanted your users to
instantly try your program out.
50 -> You could embed an interactive
example onto the page.
53.94 -> Our community has created
some stunning work
56.91 -> with our Embeds.
58.64 -> Just look at these gorgeous
examples of pages and courses.
62.85 -> So let's do it together.
65.43 -> But I am not a contributor
or maintainer of Nextra
69.01 -> so I need to fork and
clone the repository,
72.29 -> install the dependencies,
resolve possible conflicts
76.39 -> and run the Dev Server.
78.66 -> Or do I?
79.74 -> I have a surprise for
you to edit this page.
82.96 -> Let's find, edit this page on GitHub link.
85.22 -> Okay, I will click on it and
no, this is a markdown file.
91.42 -> It's not helping me.
92.42 -> I don't know how these
changes are gonna look.
95.42 -> Okay, let's click on
the preview and, nope.
99.07 -> Frustrating, It doesn't
look anything like my page
102.85 -> and it cannot look like my page
105.23 -> because there is no Dev Server running.
108.13 -> to see how this changes are
going to be rendered on my page.
111.869 -> I need to clone the
repository, render dependencies
115.79 -> and run the Dev Server.
117.72 -> This is a lot of work
for one small change.
122.08 -> Okay, let's try something else.
124.079 -> Let's go back to our homepage
126.329 -> and let's try adding PR
that new to this link.
132.11 -> What will happen?
133.75 -> Will it work?
138.209 -> I don't know.
142.67 -> Let's see.
143.67 -> Can I click it?
145.3 -> Let's see what happens.
147.69 -> Web publish everyone.
149.569 -> It is a tool designed
to make content creation
152.37 -> and content updates friendly.
155.069 -> On the left, you see an editor underwrite.
158.62 -> There is the Dev Server already running.
160.83 -> As I type it updates
162.84 -> I can instantly see how my
changes will look on the page.
166.84 -> And the best part, well, it can work
169.1 -> with any framework and it is
free for open source projects.
174.3 -> So let's add the interactive
example, shall we?
179.58 -> Okay, adding an I Frame,
183.44 -> pasting the URL
185.68 -> and done.
187.09 -> Looking good?
188.33 -> Yes, it is.
190.68 -> Our Embed is ready so let's submit a PR.
193.19 -> As I click on this button
194.292 -> the publisher will do all
the heavy lifting for me.
198.92 -> It'll fork the rapport, commit
my work, push the changes
202.67 -> and prepare a PR
205.54 -> and that's it, ready, done.
209.769 -> With publisher is not
only for blogs or docs
214.2 -> you can edit any page
216.22 -> your lending page or your marketing page.
219.95 -> You can invite your
non-technical colleagues to join
222.73 -> in the fun.
224.67 -> Think about your marketing colleague
226.34 -> or your friendly designer friend
228.42 -> or even my mom can now
edit our landing page.
233.28 -> There is more.
235.68 -> Now that our PR is ready
237.79 -> we can use another tool called
Code Flow IDE to review it.
243.97 -> What is Code Flow IDE?
246.01 -> Well it's your entire code editor
249.599 -> running inside your browser.
251.989 -> One click and that's it.
254.049 -> It's there.
255.049 -> Again, the handy short URL, pr.new.
259.21 -> Let's edit to the beginning
of the URL of this PR
263.05 -> and
264.05 -> a whole ID Bot app.
266.48 -> You see the dependencies being installed.
270.16 -> The PR is ready to be reviewed.
271.99 -> You can browse the files,
you can check the changes,
274.669 -> you can add comments.
278.199 -> There's even a bot that you can install
284.919 -> that will prep everything
for you with just one click.
288.85 -> It'll detect a PR or an issue
with nystagmus reproduction
293.74 -> and then prepare an IDE for you
296.02 -> so that you can inspect it and review it.
299.949 -> No more stashing your changes.
301.61 -> No more dealing with dependencies.
304.04 -> It's all in your browser.
307.04 -> But what is this magic you may ask?
309.41 -> Well, let me tell you.
311.77 -> A year ago at Google I/O,
we launched web containers.
315.68 -> It is a technology that enables you to run
318.3 -> no JS inside your browser.
321.919 -> So now that we have that
323.479 -> we created a tool that
makes docs editing easier
327.289 -> but we know that there is
nothing like trying it yourself.
331.389 -> So we created a page for you.
333.449 -> Go to ilovecodeflow.com and add your name.
338.1 -> Then on the PR that you created
339.889 -> check out Codeflow app bot.
343.069 -> Click on that link and review your peer.
346.009 -> See it for yourself.
347.18 -> I am so excited for you to try it out
350.1 -> and to faster make the web faster.
353.509 -> It's 2022
354.699 -> and you deserve friendly
documentation experiences.
359.17 -> So go to ilovecodeflow.com
and try it yourself.
363.58 -> Make code flow your workflow.
365.57 -> Let me know what you think
on Twitter or on Discord.
369.729 -> I would love to hear from you.
371.241 -> Thank you for listening.
Source: https://www.youtube.com/watch?v=B4rqK-o1QZw