vaadin-learning-center/learning-content

Tutorials and learning content for Vaadin and related technologies

learning-content's Issues

Add short explainer to quickstart on what Vaadin is

Anyone finding our quickstart to e.g. google won't necessarily know what Vaadin is, since the quickstart doesn't mention web apps, web components, or java. See an example from react doc here:

https://reactjs.org/docs/thinking-in-react.html

Their very first sentence is superbly clarifying, we need something similar.

migrate Ruths flow tutorial changes to this repo

Main Flow tutorial instructs to use V10

Should avoid using an explicit version number and refer to “the latest LTS version” instead (in my opinion).

Invalid link in `tutorials/learn-pwa/02__production-pwa-webpack-setup`

Page tutorials/learn-pwa/02__production-pwa-webpack-setup contains a link to non-existing tutorials/turn-website-into-a-pwa:

...
In the link:/tutorials/turn-website-into-a-pwa[previous tutorial], the focus was on learning the basic principles of how Progressive Web Apps work. Some of the issues we identified with the application were:
...

Invalid external link in `/tutorials/i18n/resourcebundles`

Page /tutorials/i18n/resourcebundles contains invalid external link to https://github.com/vaadin-learning-center/flow-i18n-resoucebundles

...
You are able to find the latest version of the source code for this tutorial
https://github.com/vaadin-learning-center/flow-i18n-resoucebundles[@github]
...

Invalid link in `/tutorials/web-component-for-vaadin-flow`

/tutorials/web-component-for-vaadin-flow contains invalid link to /director

"Calling Java from JavaScript" tutorial do not have og_image defined

Invalid link in `/tutorials/standard-web-payment-apis`

Page /tutorials/standard-web-payment-apis contains link to non-existing /tutorials/web-components-in-flow:

...
:related_tutorials: web-components-in-flow
...
The add-on mentioned above is based on a community-driven https://github.com/jorgecasar/payment-request[web component]. Check out https://vaadin.com/tutorials/web-components-in-flow[the steps] needed to create this add-on.
...

Feedback on Starting a Lit element project -tutorial

I followed the Lit tutorial and wanted to share my thoughts while following it.

1. Page title is 'Article'. Makes tab is hard to find.
2. Download LitElement starter sounds like it is a Lit project, But it seems to be a generic web component project as the first step is to npm install lit-element. I was a bit confused on what I have.
3. When reading how to start it, I read "... start the development server ...", then the next row with the command npm run dev, and then it says "If everything went well, you should see the empty application." I didn't notice the instruction to "... navigate to http://localhost:8080" as it came before the command to start up the server
4. The code highlights "(2)" in views/todo-view.js was something that I had to manually remove. It'd be nice if the highlights would be outside of the block that you copy-paste.

I might continue to part 2 of the tutorial in another issue.

Link to starter uses POST instead of GET

Check https://github.com/vaadin-learning-center/learning-content/edit/development/tutorials/vaadin-quick-start/content.adoc line 31.

Invalid external links in `/tutorials/lit-element`

Page /tutorials/lit-element/lit-element-templating-properties-and-events contains invalid external link to https://polymer.github.io/lit-html:

...
https://polymer.github.io/lit-html[lit-html^] uses JavaScript template strings as it's format. That means you can use plain JavaScript in your templates. Also, it adds helpers for setting properties, boolean attributes and for listening to events.
...

Page /tutorials/lit-element/state-management-with-redux contains invalid external link to https://polymer.github.io/pwa-starter-kit/redux-and-state-management/:

...
TIP: Read more about splitting up reducers and handling larger applications in the https://polymer.github.io/pwa-starter-kit/redux-and-state-management/[PWA Starter Kit^] documentation.
...

Invalid link in `tutorials/standard-web-payment-apis`

tutorials/standard-web-payment-apis contains link to 404ed tutorials/web-components-in-flow

Wrong link in https://vaadin.com/tutorials/migrating-java-swing-to-web-with-vaadin

The "Github repository" at the end of https://vaadin.com/tutorials/migrating-java-swing-to-web-with-vaadin links to https://github.com/vaadin-learning-center/vaadin-for-swing-developers, which does not exist. It should probably be https://github.com/vaadin-learning-center/vaadin-platform-for-swing-developers/ instead.

Old screenshot in main Flow tutorial

The screenshot of the resulting app looks different from the real product.

• The buttons are no longer on white background with shadows
• The text input background color is darker nowadays (better contrast)
• The fields do not have any space between them (they should)
• The dropdown icon in combo box is outdated here
• The grid does not have row borders (it should)

Invalid external link in `/tutorials/microservices/consuming-stateless-services`

Page /tutorials/microservices/consuming-stateless-services contains invalid external link to https://github.com/alejandro-du/vaadin-microservices-demo-config/blob/master+/biz-application.yml:

...
The https://github.com/alejandro-du/vaadin-microservices-demo-config/blob/master+/biz-application.yml[default configuration from GitHub] includes a connection to a file-based H2 database located in the `h2-database` directory inside your home directory.
...

Typo in "How to use Web Components in Angular"

There's a typo in this file:
https://github.com/vaadin-learning-center/learning-content/blob/development/tutorials/using-web-components-in-angular/content.adoc

<scripsrc="webcomponents/custom-elements-es5-apter.js"></script> should be <script src="webcomponents/custom-elements-es5-apter.js"></script>.

External links in Quickstart tutorial should be opened in a new tab (blank_)

See https://gitlab.vaadin.com/vaadincom/webpage/issues/4889
for details

Add descriptions to flow tutorial

The official Flow tutorial does not have :description: properties. These are used for both SEO and to give more info about a part in the series listing view. Please write short descriptions for each.