CSS Chat Summary: 17 September 2020

Housekeeping

Reminder that next week will be the coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. CSSCSS Cascading Style Sheets. bugbug A bug is an error or unexpected result. Performance improvements, code optimization, and are considered enhancements, not defects. After feature freeze, only bugs are dealt with, with regressions (adverse changes from the previous version) being the highest priority. scrub, this time led by @kburgoine and starting at 4pm EDT on Sept. 24 (one hour before the weekly chat). The bug scrubs (a.k.a. triages) are a great way for new contributors to get involved!

CSS Audit (#49582)

I’ve been working on a branchbranch A directory in Subversion. WordPress uses branches to store the latest development code for each major release (3.9, 4.0, etc.). Branches are then updated with code for any minor releases of that branch. Sometimes, a major version of WordPress and its minor versions are collectively referred to as a "branch", such as "the 4.0 branch". that displays the audit data in GithubGitHub GitHub is a website that offers online implementation of git repositories that can can easily be shared, copied and modified by other developers. Public repositories are free to host, private repositories require a paid subscription. GitHub introduced the concept of the ‘pull request’ where code changes done in branches by contributors can be reviewed and discussed before being merged be the repository owner. https://github.com/ pages. The initial version can be seen here and the work in progress pull request is here. The next steps for the PR are getting documentation in place about generating reports, and styling the template.

More important, as @ibdz noticed – it looks like the audit for properties and values is not running, so we definitely need to get the data for about font-sizes and pixel usage into the report.

Color Scheming (#49999)

@ryelle drafted a post to for Make design about the color replacements work so far, specifically to ask what color list we should use, and to start gather folks who would be interested in testing the replacements once a list has been decided on.

Open floor + CSS link share

I shared a link about the ::marker pseudo-element that allows us to style list bullets with CSS. It does not have full browser support yet, but is definitely a feature that can be used with @supports feature queries.

Thanks to @CodeXplorer and @ibdz for being enthusiastic first time attendees!

#core-css, #summary

CSS Chat Agenda: 17 September 2020

This is the agenda for the upcoming CSSCSS Cascading Style Sheets. meeting scheduled for Thursday, September 17, at 5:00 PM EDT.

This meeting will be held in the #core-css channel in the Making WordPress SlackSlack Slack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/..

If there’s any topic you’d like to discuss, please leave a comment below!

  • Housekeeping
  • Updates
  • Open floor + CSS link share

#agenda, #core-css

CSS Chat Summary: 10 September 2020

See the full meeting transcript here on Slack. I (@notlaura) facilitated the meeting.

Housekeeping

Thanks to @ryelle for leading our second bugbug A bug is an error or unexpected result. Performance improvements, code optimization, and are considered enhancements, not defects. After feature freeze, only bugs are dealt with, with regressions (adverse changes from the previous version) being the highest priority. scrub before the meeting!

We still need a volunteer to facilitate the weekly chat on October 8.

Updates

CSSCSS Cascading Style Sheets. Audit

The next steps for the audit are to update the counts and to get the data out of the Google doc, and into the css-audit repo. I (@notlaura) started a PR to add to the CLICLI Command Line Interface. Terminal (Bash) in Mac, Command Prompt in Windows, or WP-CLI for WordPress. --format=report and --report=wp-admin that can write the audit data to an HTMLHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. file that can be deployedDeploy Launching code from a local development environment to the production web server, so that it's available to visitors. via GithubGitHub GitHub is a website that offers online implementation of git repositories that can can easily be shared, copied and modified by other developers. Public repositories are free to host, private repositories require a paid subscription. GitHub introduced the concept of the ‘pull request’ where code changes done in branches by contributors can be reviewed and discussed before being merged be the repository owner. https://github.com/ pages. Here is a work in progress PR.

Color Scheming

@ryelle has fixed up the PostCSS pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party so that it works with color functions and rgb() and rgba(). Check out the PR here! The next step is to draft a post we can share in one of the design meetings.

I shared a link to work on color systems in 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/ from @itsjonq – we discussed that the PostCSS plugin will allow us to swap out any color palette easily, so even if the coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. colors in the WP Core Color List now end up changing, it is not a problem to support, but what color list to use will be a key question for design (there are a few to choose from).

We discussed that, in the post for design, we want to:

  1. Make them aware of this project
  2. Check which color system should be used
  3. Let people know that we will be looking for volunteer testers to help with adjustments when we know what color system to use

That was all for this week!

#core-css, #summary

CSS Chat Agenda: 10 September 2020

Note: One hour before the meeting this week, @ryelle will lead the coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. CSSCSS Cascading Style Sheets. triagetriage The act of evaluating and sorting bug reports, in order to decide priority, severity, and other factors.! Triages are every other week at the same time, 4:00 PM EDT.

This is the agenda for the upcoming CSS meeting scheduled for Thursday, September 10, at 5:00 PM EDT.

This meeting will be held in the #core-css channel in the Making WordPress SlackSlack Slack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/..

If there’s any topic you’d like to discuss, please leave a comment below!

  • Housekeeping
  • Updates
    • CSS Audit (#49582) – Updating counts, storing data in the GithubGitHub GitHub is a website that offers online implementation of git repositories that can can easily be shared, copied and modified by other developers. Public repositories are free to host, private repositories require a paid subscription. GitHub introduced the concept of the ‘pull request’ where code changes done in branches by contributors can be reviewed and discussed before being merged be the repository owner. https://github.com/ repo
    • Color Scheming (#49999) – Sharing with the community
  • Open floor + CSS Link share

#agenda, #core-css

CSS Chat Summary: 3 September 2020

See the full meeting transcript here on Slack. I (@notlaura) facilitated the meeting.

Housekeeping

We need someone to lead the weekly meeting on October 8 – send a message on SlackSlack Slack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/. to @laras126, or comment on this post if you are able to do that!

@ryelle added @here privileges for herself and @kburgoine so they can lead the bugbug A bug is an error or unexpected result. Performance improvements, code optimization, and are considered enhancements, not defects. After feature freeze, only bugs are dealt with, with regressions (adverse changes from the previous version) being the highest priority. scrubs. The bug scrubs / triages will be every other week one hour before the meeting (at 4pm EDT), and @ryelle will lead the next one this Thursday, the 10th.

Updates

CSSCSS Cascading Style Sheets. Audit (#49582)

I added an issue to the CSS audit repo and corresponding comment to the ticketticket Created for both bug reports and feature development on the bug tracker. about storing the audit data on GithubGitHub GitHub is a website that offers online implementation of git repositories that can can easily be shared, copied and modified by other developers. Public repositories are free to host, private repositories require a paid subscription. GitHub introduced the concept of the ‘pull request’ where code changes done in branches by contributors can be reviewed and discussed before being merged be the repository owner. https://github.com/ instead of in a Google doc. @ryelle agreed this sounded like a good idea, especially deployments via Github pages, and potentially using Github action to regularly re-build the report. Another idea we talked about is a method to download a specific version of WordPress to run the audits on, so that we don’t have to worry about environment-specific artifacts (e.g. the .orig files from SVNSVN Subversion, the popular version control system (VCS) by the Apache project, used by WordPress to manage changes to its codebase. conflicts).

Color Scheming (#49999)

A big week for color scheme updates! @ryelle is close to finished with the PostCSS pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party that will replace the rogue colors with the approved coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. colors – visualized here. She opened a PR to the WordPress-develop repo that includes screenshot comparisons of the color replacements, and indicated next steps to be:

  1. Finish the transparent color handling
  2. Start the manual work of cleaning up anything that looks awkward after the processing
  3. Maybe add some way of ignoring certain colors/selectors/files

Related to the second item – there will be small issues that require manual review, for example, there is no orange in the color palette, so they have been replaces with reds, and another area where a specific light blue background was removed. We will need input from designers to validate these changes. Rather than adding issues based on screen or color for the review, we discussed having a Make post and allowing people to comment before deciding on a specific review structure.

Open Floor + CSS Link Share

@ryelle shared an enticing Tweet from someone attending Clarity Conf:

I shared the @property syntax where, in CSS only, you can declare custom properties with more details:

@property --colorPrimary {
  syntax: "<color>";
  initial-value: magenta;
  inherits: false;
}

CSS! 🔥

#core-css, #summary

CSS Chat Agenda: 3 September 2020

This is the agenda for the upcoming CSSCSS Cascading Style Sheets. meeting scheduled for Thursday, September 3, 2020, 5:00 PM EDT.

This meeting will be held in the #core-css channel in the Making WordPress SlackSlack Slack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/..

If there’s any topic you’d like to discuss, please leave a comment below!

  • Housekeeping – Need someone to lead the meeting October 8
  • Updates
    • CSS Audit (#49582) – Moving data to GithubGitHub GitHub is a website that offers online implementation of git repositories that can can easily be shared, copied and modified by other developers. Public repositories are free to host, private repositories require a paid subscription. GitHub introduced the concept of the ‘pull request’ where code changes done in branches by contributors can be reviewed and discussed before being merged be the repository owner. https://github.com/? See this issue.
    • Color Scheming (#49999) – PostCSS color matching!!! See this PR for a demo.
  • Open floor + CSS Link share

#agenda, #core-css

CSS Chat Summary: 27 August 2020

Full meeting transcript on Slack: https://wordpress.slack.com/archives/CQ7V4966Q/p1598562066114200

I (@notlaura) facilitated the meeting.

Housekeeping

Big thanks to @kburgoine for running the first CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. CSSCSS Cascading Style Sheets. triagetriage The act of evaluating and sorting bug reports, in order to decide priority, severity, and other factors.! We discussed getting @here privileges for those who are running the triages, and adding the bi-weekly triage to the Meetings calendar (which is done! Thanks ). The next triage will be Thursday, September 10 at 4pm EDT.

Updates

CSS audit (#49582)

We discussed the steps to update the counts to remove data from generated files (.css.orig and .rtl) – generally, all files that are .gitignored should be excluded. @justinahinon asked about how to do this, and we looked at updating this part of the css-audit repo to exclude additional file extensions, or perhaps get the excluded extensions from .gitignore. With that in mind, the steps for updating the counts can be summarized as:

  1. Ignore .rtl and .css.orig in the css-audit repo
  2. Re-run the commands for each data point
  3. Copy the data into the GDoc

With regards to the third point, I proposed the idea of storing the audit data in GithubGitHub GitHub is a website that offers online implementation of git repositories that can can easily be shared, copied and modified by other developers. Public repositories are free to host, private repositories require a paid subscription. GitHub introduced the concept of the ‘pull request’ where code changes done in branches by contributors can be reviewed and discussed before being merged be the repository owner. https://github.com/ instead of the Google doc. For starters, it could be as simple as pasting the data into a markdown or .htmlHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. file that can be deployedDeploy Launching code from a local development environment to the production web server, so that it's available to visitors. on Github pages for viewing.

Color Scheming (#49999)

@kburgoine mentioned breaking up the current audit work into smaller pieces. The next step for the initiative is to replace the colors in the right-hand column of the core color matches with the color in the left-hand column, and to test the results. @ryelle is planning to create a PostCSS pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party to automate this. I suggested that, in the mean time, we could manually do some find and replace with a piece of the adminadmin (and super admin) to see results. This might at least give some visibility into where problem areas are.

Open Floor + CSS Link Share

@isabel_brison mentioned that Firefox has a font inspector that shows variable font properties…. very cool! More info at this link.

I shared a link posted during the week from @jonoalderson about the Local Font Access API.

That was all for this (last) week!

#core-css, #summary

CSS Chat Agenda: 27 August 2020

Note: One hour before the meeting this week, @kburgoine will lead the first coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. CSSCSS Cascading Style Sheets. triagetriage The act of evaluating and sorting bug reports, in order to decide priority, severity, and other factors.!

This is the agenda for the upcoming CSS meeting scheduled for Thursday, August 27, 2020, 5:00 PM EDT.

This meeting will be held in the #core-css channel in the Making WordPress SlackSlack Slack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/..

If there’s any topic you’d like to discuss, please leave a comment below!

  • Housekeeping
  • Updates
    • CSS Audit (#49582) – Updating counts and sharing with community
    • Color Scheming (#49999)
  • Open floor + CSS Link share

#agenda, #core-css

CSS Chat Summary: 20 August 2020

Full meeting transcript on Slack: https://wordpress.slack.com/archives/CQ7V4966Q/p1597957254000500

I (@notlaura) facilitated the meeting.

Updates

CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. CSSCSS Cascading Style Sheets. Triagetriage The act of evaluating and sorting bug reports, in order to decide priority, severity, and other factors.

We discussed doing a triage every two weeks one hour before the weekly meeting. @kburgoine will lead the first one this week, on August 27 at 4pm EDT!

CSS audit updates

@isabel_brison added the media query counts to the CSS audit doc, the last remaining item! She mentioned finding that the audits were running on .css.orig files which was bloating the counts. We discussed that these and .rtl files should not be included in the counts because they are not authored files.

@kburgoine asked if the audit counts are including 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. editor CSS. We discussed that for now, the audit only includes wp-admin and wp-includes, but the tooling we have can be used for other code-bases. @ryelle suggested documenting the steps for running audits similar to these steps for pulling color data.

The next step for the audit is to update the counts excluding the .css.orig files, and @isabel_brison volunteered to do that in the coming week.

Color scheming updates

@ryelle re-ran the core color extraction steps using the approach referenced above, and the list of unmatched colors is now much more concise. This is quite a useful tool! @ryelle identified that the excess colors were coming from 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/. Since the colors are much more manageable now, it will make sense to go to design for feedback a bit later in the process once the PostCSS piece is in place and we can see the reduced colors in wp-adminadmin (and super admin).

@kburgoine asked if there was any way to break down this task into smaller pieces – it is a lot of work for one person. @ryelle said that later in the process, once we have files with the reduced colors, there will be many smaller tasks such as manual cleanup and testing that will be fit for more contributors.

Open Floor / CSS Link Share

There were no open floor topics.

@kburgoine shared a very slick Codepen that changes the font weight of a menu item on hover, without causing a reflow/jump on following menu items!

That was all for this (well, last) week!

#core-css, #summary

CSS Chat Agenda: 20th August 2020

This is the agenda for the upcoming CSSCSS Cascading Style Sheets. meeting scheduled for Thursday, August 20, 2020, 5:00 PM EDT.

This meeting will be held in the #core-css channel in the Making WordPress SlackSlack Slack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/..

If there’s any topic you’d like to discuss, please leave a comment below!

  • CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. CSS triagetriage The act of evaluating and sorting bug reports, in order to decide priority, severity, and other factors.
  • Updates
  • Open floor + CSS Link share

#agenda, #core-css