JavaScript chat summary, February 12th, 2019

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.

“ReactReact React is a JavaScript library that makes it easy to reason about, construct, and maintain stateless and stateful user interfaces. https://reactjs.org/. As UIUI User interface Runtime” Article

@nerrad shared “React As UI Runtime” article by Dan Abramov. Its good resource for folks who are familiar with React and want to deep dive into internal working. It will give you insight into the various aspect of React how things work and why they work in a certain way.

Custom ESLint Rules

Two new ESLint rules have been implemented:

• Protect against invalidinvalid A resolution on the bug tracker (and generally common in software development, sometimes also notabug) that indicates the ticket is not a bug, is a support request, or is generally invalid. use of wp.i18n.sprintf.
  • https://github.com/WordPress/gutenberg/pull/13756
• Enforce dependencies grouping conventions:
  • https://github.com/WordPress/gutenberg/pull/13757
  • https://github.com/WordPress/gutenberg/pull/13785
• @aduth raised, What should we do about inconsistencies like “Node dependencies” and “Browser dependencies” (context), or /** vs. /* (context). It was decided that no need to (yet) change the /** syntax, and that “Node dependencies” should be avoided in favor of “External dependencies”.

Icon Package

The design team is exploring improvements for the Dashicons project and proposed the following:

• The current workflow for adding icons and updating the font is not ideal and doesn’t scale for a big number of icons.
• 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/ requires a big number of icons to avoid duplicates, it relies on SVGs instead of fonts and an option being explored is to take Material Icons as a basis and extend it with WordPress specific icon sets.

Some ideas were explored but final decision pending, until some better ideas and direction by the design team is finalized:

• Exposing icons to global script handle though that could be huge to load.
• @nosolosw suggested:
  • Getting some inspiration from GridIcons.
  • wp_enqueue_icon a function to declare the icons for use and make them available under wp.icons.* (for the ones enqueued)?
• @youknowriad suggested:
  • Bundling all the icons as a separate package one big set to choose from.
  • Using the build process and tree shaking to include icons in use.
  • Getting inspiration from FeatherIcons.
  • Lazy loading icons if feasible.

Open floor

• @welcher shared a resource he put together for various slot-fill and filterFilter Filters are one of the two types of Hooks https://codex.wordpress.org/Plugin_API/Hooks. They provide a way for functions to modify data of other functions. They are the counterpart to Actions. Unlike Actions, filters are meant to work in an isolated manner, and should never have side effects such as affecting global variables and output..
• @gziolo suggested to include them in the official handbook.

#meeting-notes, #core-js, #javascript

#core-editor-summary, #javascript