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

CSS Chat Summary: 13th August 2020

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

I (@notlaura) facilitated the meeting.

Housekeeping

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 having a triage for CSS tickets. A triage can be led by anyone at a time outside of the weekly meeting. Everyone at the meeting agreed this was a good idea, and @ryelle and @kburgoine volunteered to organize some in the future.

Here is a link to tickets with a CSS focus in Trac and this link is for the CSS Styling label for issues in Gutenberg. Some teams to separate triages for core and 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 this is something to consider. If there are any recurring triages, they would be listed here on the Make meetings page (thanks @justinahinon!).

Updates

CSS Audit

There was a permissions issue with the relocated Google doc, but that is resolved now – thanks @isabel_brison!

Color Scheming

@ryelle shared more progress on the color matching project from last week, so that now colors are grouped according to distance from an “approved” color. A next step would be turning this into 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 or similar that would replace the colors that are within a certain distance of a core color with the core color.

We discussed some of the outlier colors in the project and that they are likely from vendor CSS, and that some of the colors that are slightly off (e.g. the purples) could be from the adminadmin (and super admin) themes.

Another next step, perhaps more immediate, would be to share this project with the design team to confirm the colors being used. @ryelle mentioned putting the project 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/ and adding some issues as well to foster collaboration.

Open Floor

CSS Link Share

I pointed out a couple of links @jonoalderson shared between meetings:

@kburgoine shared a very relevant article from Smashing Magazine highlighting using custom properties for configurable color schemes. Very cool!

That was all for last week!

#core-css, #summary