Configuring RedwoodJS Form with formMethods attribute causes the client side form validation to stop working. I used the useForm() method from react-hook-form as described in the Saving Data section of the tutorial.

I tried hard reset of the server, but same result.

I'm using node v12.16.1, yarn 1.19.2.

See attached GIF:

.

See redwoodjs/create-redwood-app#39

So that we can have a unique URL for HackerNews

https://www.pscp.tv/w/1MnxnQQjLMEJO

Use the simple Filestack widget

Turns out Netlify doesn't return headers to clients, which are needed to make Turbolinks realize a redirect has taken place. Let's go back to the original plan and highlight the nav items even if the URL isn't quite the same. Should be able to use a data-match attribute to give an additional URL that should trigger a positive match.

jamstack/jamstack.org#279

Maybe add a step at the beginning of the build step that replaces a variable in layouts/application.html?

For the docs, one note I had yesterday is that it often is unclear when code is referenced whether the reader should take action or just examine. Maybe potential improvements in the future could be:

• if a whole file is given, assume it’s Copy+Replace file
• if a snippet is given, a yellow highlight indicates a change you need to replace in the file --> so take action (note: I’m thinking the yellow highlight example TPW sent us)
• if a snippet is given without yellow highlight. There’s no action. It’s just for reference.

redwoodjs/create-redwood-app#45

Opening all nav menus on mobile makes the box too long off the bottom of the screen, but you can still access the main scrollbar on the right and bust out of the locked view, messing up the layout.

Have the frontend maybe just read in some JSON published in web/public

Move real API docs here, like the current Redwood Form docs

An #h2 section for each framework integration. Start with Tailwind but suggested additions:

• Linaria
• Style components
• React Bootstrap
• More to come

Right now our primary directive is to make sure the tutorial always works for those trying out Redwood for the first time. If those users have a bad experience it's very hard to win their trust back to come and try out the framework again.

Right now the only way to do that is to go through parts of the tutorial manually that we think may be at risk when upgrading parts of the framework. Ideally this would all be automated through CI (GitHub Actions).

One theory we had would be to actually make the commands and code snippets in the tutorial "executable" in some way and then the CI could build the app by executing the commands and making the code changes. We would need something like Selenium or maybe just React Testing Library to actually access the site through a headless browser and make sure certain UI elements were present, received focus, etc.

My first thought was to add comments to the Markdown (which are ignored by renderers that convert Markdown to HTML) or rely on the type of the codeblock.

For executable terminal commands, we could simply look at the type of the codeblock and if it is terminal then execute the command one after the other:

We'll use yarn to create the basic structure of our app:

```terminal
yarn create redwood-app ./redwoodblog

For code snippets it would be a little harder. Some snippets are the full content of the file, but others are only a portion, or highlight certain changes to certain lines. My thought was to include an actual diff in a comment before the code snippet. Then that diff can be applied to the file during the CI process. It's hard to show an example in actual markdown because it gets converted by GitHub, but here's a screenshot:

This would be easier to implement if there are Markdown lexers out there that turn comments into tokens you can actual iterate over, rather than ignore them. I've used the marked lexer but haven't tried it with comments. We currently use markdown-it to convert the tutorial itself into HTML, but there's no documentation that shows how to access the parser/lexer.

If there aren't any then I guess phase 1 could be looking for ```terminal or blocks between <!-- and -->.

Those two things should allow us to create an app along with all the code changes we go through in the tutorial. However when it comes to sections like "try filling out this form and notice the error message" it gets more difficult. I've never worked with Selenium with Node before, but looking through this page makes me think you could write directives as comments in Markdown. You would need associated test expectations as well. Depending on everyone's comfort with exec maybe we just write out the code literally and exec() it?

<!--
@driver.get 'http://bites.goodeggs.com/posts/selenium-webdriver-nodejs-tutorial/'
text = @driver.findElement(css: '.post .meta time').getText()
expect(text).to.eventually.equal 'December 30th, 2014'
-->

If exec() is too scary maybe we create a separate tutorialTests.js and can have comments in the Markdown that say which tests to execute in tutorialTests.js:

Open up web/src/Routes.js and take a look at the route that was created:

And then tutorialTest.js is a whole suite of tests but they comment above lists which would should actually be run (this is just an example test from React Testing Library, I have no idea what kind of test would actually work with checking the route above):

import '@testing-library/jest-dom'
import React from 'react'
import {render, fireEvent, screen} from '@testing-library/react'
import HiddenMessage from '../hidden-message'

test('shows the children when the checkbox is checked', () => {
  const testMessage = 'Test Message'
  render(<HiddenMessage>{testMessage}</HiddenMessage>)
  expect(screen.queryByText(testMessage)).toBeNull()
  fireEvent.click(screen.getByLabelText(/show/i))
  expect(screen.getByText(testMessage)).toBeInTheDocument()
})

So what do we think? Possible?

See https://github.com/logos

Should contain a nice splash/home page and the full tutorial broken down into manageable sections, one page each.

• static site
• build script that downloads the README, splits it onto pages based on h2-level headers and creates a page for each

…somewhere prominent.

GraphQL call that triggers an email via SendGrid.

We could also use this as an example of using one service inside another. Have a log table that logs sends. GraphQL call goes to a custom emails.js service, which imports logs.js service and creates the log entry.

Thinking of just demoing a custom function with easycron.com

Assuming this is merged: redwoodjs/create-redwood-app#40

Negative margin is covering the button

Can refere to it from the main tutorial, but seems best as a separate doc that will likely be more dynamic.

Can refere to known issues/bugs with links. And/or also include setup and config issues for other systems and preferences.

Here’s one from the forum to include:

Maybe a short guide on installing database,
You also have make sure that you have SQLite database installed.
For installing sqlite on,
windows choco install sqlite
ubuntu sudo apt-get install sqlite3
mac brew install sqlite

From: redwoodjs/redwood#302

In tutorial, specify that folders components, layouts, pages are within src folder which is within web folder. Currently specifying that these folders are directly within web folder. Plus a quick description of web/src folder would be needed.

Direct link to section where update needed:
https://redwoodjs.com/tutorial/redwood-file-structure#the-web-directory

Screenshot of current folder tree as in tutorial

Thanks to:

10:02:48 AM: (node:1302) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

If something goes wrong during the build phase Netlify doesn't think anything bad happened and will happily deploy the (broken) site.

In the tutorial page Side Quest: How Redwood Works with Data, it says api/src/services/posts/posts.js has this content:

import { db } from 'src/lib/db'

export const posts = () => {
  return db.post.findMany()
}

export const post = ({ id }) => {
  return db.post.findOne({
    where: { id: id },
  })
}

export const createPost = ({ input }) => {
  return db.post.create({
    data: input,
  })
}

export const updatePost = ({ id, input }) => {
  return db.post.update({
    data: input,
    where: { id: id },
  })
}

export const deletePost = ({ id }) => {
  return db.post.delete({
    where: { id: id },
  })
}

What I see (as of v0.4.0) in my api/src/services/posts/posts.js is the following:

import { db } from 'src/lib/db'

export const posts = () => {
  return db.post.findMany()
}

export const post = ({ id }) => {
  return db.post.findOne({
    where: { id },
  })
}

export const createPost = ({ input }) => {
  return db.post.create({
    data: input,
  })
}

export const updatePost = ({ id, input }) => {
  return db.post.update({
    data: input,
    where: { id },
  })
}

export const deletePost = ({ id }) => {
  return db.post.delete({
    where: { id },
  })
}

Right now the build process will only ever add to the existing search results records. We need a process that removes ones that aren't referenced any more, otherwise we'll start getting search results that don't exist in the actual pages.

The unique key on each search result is the MD5 hash of the content. We should pull down all existing keys into an array and then as we create/update records we remove their hashes from the array when a match is found. When we're all done uploading records any keys left in that array can be deleted.

• Don't update keys that haven't changed
• Delete records with keys that are no longer present

Right now the OG tags on pages are all the same—the homepage content.

Topic list

• Integrating with an outside API
• Creating a custom function
• Creating a RESTful endpoint

Specifically the sticker form

I'm going through the tutorial and when I followed the instructions up to the command yarn rw g cell BlogPosts and added the BlogPostsCell to HomePage.js and I was getting a 400 server error. To get past this error I changed the references to blogPosts throughout the first Cell to just posts and that seemed to correct the issue.

@cannikin what do you think about improvements like these to the last section?

Wrapping Up

..current text and pat on the back. Plus emojis. Lots of emojis.

Next Steps: Improve your App

Recommend some guides and tutorials to make their app better:

• cookbook on 3rd party API
• guide on installing Postgres locally
• etc

Next Steps: Joining the Community

...what you currently have, but maybe highlight each with a sentence explanation

RedwoodJS Roadmap

1. Auth (link to tracking Issue)
2. TypeScript (link to tracking Issue)
3. Testing (link to tracking Issue)
4. Storybook (link to tracking Issue)

...everything else. Here's a list I copied from Tom's notes last month:

• Accessibility features for Redwood Router
• Switcher widget (website, GraphQL playground) in dev mode
• Cookbook of recipes for integrating 3rd party APIs
• Easy way to inspect logs from AWS Lambda
• Storybook integration
• Refine Jest integration
• Data fetching optimization to solve for the waterfall problem

If simple, it would be nice to have news and other updates auto-distributing. Just close this out if it seems like there'd be too much work involved. We can handle it via manual process just as well.

Going to https://redwoodjs.com/guides for example does not expand the Guides section of the left nav. This is due to the way the NavigationController works—it doesn't find a match between the URLs in the links at left and so doesn't think you're viewing one of its children pages.

Maybe do a check that if the parent exists in the URL, open that section no matter what, and if no pages match either, pre-select the first one.

Or, add an additional data-match attribute on the first link in each section so that it will trigger highlighting for itself. Harder to do since the nav is generated dynamically.

Once redwoodjs/redwood#490 is released.