JavaScript Chat Summary: March 10, 2020

Below is a summary of the discussion from this week’s JavaScriptJavaScript JavaScript or JS is an object-oriented computer programming language commonly used to create interactive effects within web browsers. WordPress makes extensive use of JS for a better user experience. While PHP is executed on the server, JS executes within a user’s browser. https://www.javascript.com/. chat (agenda, Slack transcript).

Have a topic for discussion for the next meeting? Leave a suggested edit on next week’s agenda.

News roundup proposal

(Slack conversation)

@nerrad as been kind enough to offer to share an aggregate of news relevant in the GutenbergGutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/ and general JavaScript ecosystem, to include in the summary notes for each week’s meeting.

Discussion:

• There was an agreement that it’s a great idea.
• The plan is to add this as an extra section in our JavaScript chat summary starting from this week.

Action items:

• New agendas should be structured to include separate sections “Agenda Topics” and “News Roundup”
• Note-takers should aim to include these items in the published summary notes.
• Update “Note Takers” document guidelines.

ESLint “prefer-const” relaxation proposal

(Slack conversation)

@aduth added a pull request about a potential revision to our default ESLint configurations (i.e. coding standards) at https://github.com/WordPress/gutenberg/pull/20737. He just wanted to bring it to attention, since any of these sorts of coding standards changes are good to highlight. There’s been some positive feedback already on the pull request that was echoed in the chat.

Visual regressionregression A software bug that breaks or degrades something that previously worked. Regressions are often treated as critical bugs or blockers. Recent regressions may be given higher priorities. A "3.6 regression" would be a bug in 3.6 that worked as intended in 3.5. testing tools

(Slack conversation)

@isabel_brison created a ticketticket Created for both bug reports and feature development on the bug tracker. https://core.trac.wordpress.org/ticket/49606 to introduce visual regression testing in the WordPress coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress., so we can clean up some of the old CSSCSS Cascading Style Sheets. with confidence. She was wondering if this type of testing has been discussed or explored at all for core or Gutenberg. Also, would there be value in adding it for Gutenberg, too?

Discussion:

There’s no visual regression testing in Gutenberg as of today, but there are parts of the tooling that could make it possible, like taking screenshots with the headless browser via Puppeteer. At least with the ticket as presented, it seems primarily focused on existing screens which may not be expected to change, and thus primarily with the aim of preventing regressions while doing CSS refactoring.

The tests themselves are minimal, but the reference images are not insignificant though and need to be updated periodically. The biggest concern is the size of the assets that would have to be maintained and how to ensure they don’t pollute repositories with source code.

There is an existing prototype in the Gutenberg repository (https://github.com/WordPress/gutenberg/pull/18797) that uses 3rd party service percy.io that can be used as a reference when exploring the final implementation.

Introduce a common APIAPI An API or Application Programming Interface is a software intermediary that allows programs to interact with each other and share data in limited, clearly defined ways. to style Button from both web and mobile

(Slack conversation)

There is a pull request that explores primitive UIUI User interface components that can be used both in native mobile apps and in the browser: https://github.com/WordPress/gutenberg/pull/19104. There was no specific discussion item attached to this, but it was requested that anyone interested take a look and provide any feedback they have to drive further development.

News roundup

A few links to Gutenberg and JavaScript related news (curated by @nerrad).

• An interesting approach to applying a complex styling system in part one of Adventures with Complex Global System in Block-Based Websites.
• The March edition of What’s next in Gutenberg is up. Focuses are: BlockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. content area, global styles, patterns, and general tightening up of previous work.
• A proposal to let plugins register global styles with a plugin.json file.
• A really interesting library of templates has been launched by Gutenberg Hub. Could this help inform some of the patterns work various folks have been looking into? What’s really cool about this library is that the initial launch only uses core Blocks (except for the contact forms)! You can read the wpTavern’s take on this library here.
• Isabel Brison (@isabel_brison) spoke at ReactConf AU 🎉. Watch her talk on 5 things you should know about WordPress…wait, what?. Great job Isabel!
• An update on 2020 goals for WordPress was published this week. It’s a great overview of the plans lined up for WordPress releases too.
• Greg Ziółkowski (@gziolo) shared on his blogblog (versus network, site) the video in which he did a live coding session for the WordPress Block Editor last April (better late than never!). It’s on adding formatting buttons to the block toolbar in Gutenberg.

WordPress 5.4 dev notesdev note Each important change in WordPress Core is documented in a developers note, (usually called dev note). Good dev notes generally include a description of the change, the decision that led to this change, and a description of how developers are supposed to work with that change. Dev notes are published on Make/Core blog during the beta phase of WordPress release cycle. Publishing dev notes is particularly important when plugin/theme authors and WordPress developers need to be aware of those changes.In general, all dev notes are compiled into a Field Guide at the beginning of the release candidate phase.

• General Block Editor API Updates include: MetaMeta Meta is a term that refers to the inside workings of a group. For us, this is the team that works on internal WordPress sites like WordCamp Central and Make WordPress. attribute sources deprecated, ShortcodeShortcode A shortcode is a placeholder used within a WordPress post, page, or widget to insert a form or function generated by a plugin in a specific location on your site. transforms configuration can include an isMatch function, AsyncModeProvider API, custom media upload handler as a setting, easier drag and drop, rich text won’t set focus when applying a format, a new guide component, and deprecation of @wordpress/nux.
• New gradient theme APIs will be available in WordPress 5.4
• Fullscreen mode is now the default in the block-editor.
• All the goodies introduced with wp-env.
• A fieldguide for WordPress 5.4.

Other random stuff

• Kent Dodds challenges folks to stop using isLoading booleans.
• A twitter storm kicked off after Facebook published Project LightSpeed: Rewriting the Messenger codebase for a faster, smaller, and simpler message app. This clarifying thread by Dan Abramov addresses the twitter storm.
• React query and React Query devtools look promising (h/t @assassinateur).
• Github CLI is in beta.

#core-js, #javascript