CSS Chat Summary: 19 November 2020

Full meeting transcript here on slack. @notlaura facilitated the meeting & @danfarrow wrote up this summary.

Housekeeping

@kburgoine made a proposal that the 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. scrubs could target tickets other than those specifically related to the next release, in order to give them some needed attention & to keep things interesting for the scrub attendees.

@notlaura suggested a 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/-specific scrub which @ryelle & @kburgoine seconded. @ryelle also suggested focusing on awaiting review tickets.

CSS Audit (#49582)

@notlaura is working on some improvements in the config PR per @ryelle’s feedback. @danfarrow has started to make sense of the twig templating hierarchy, and has made progress on the styling side of things.

The next step is for @danfarrow to submit a PR to be merged with the UIUI User interface updates. We can then add a direct link to the !important audit section into the related ticketticket Created for both bug reports and feature development on the bug tracker. (#26350) as previously discussed.

Both @notlaura & @danfarrow are hoping to have more progress ready to share at next week’s meeting.

Color Scheming (#49999)

There was no progress to report here but @danfarrow is ready to run the 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. tool on the updated adminadmin (and super admin) colour scheme prior to next week’s meeting.

CSS links share + open floor

@danfarrow has improved his confidence with flexbox by playing the Flexbox Zombies game he mentioned last week. @notlaura mentioned CSS Grid Garden, a similar game for mastering grid.

@danfarrow also mentioned Service Workies, a game by the same author for learning about Service Workers.

Related to this, @notlaura mentioned wanting to read Jeremy Keith’s book Going Offline.

And with that the meeting itself went offline. Thanks everybody!

#core-css, #summary

CSS Chat Agenda: 19 November 2020

Note: 1 hr before the meeting, at 4:00pm EST @kburgoine will lead the CSSCSS Cascading Style Sheets. CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. 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, November 5, at 5:00 PM EST. 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)
    • Color Scheming (#49999) – 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 (#49606)
  • Open floor + CSS link share

#agenda, #core-css

CSS Chat Summary: 12 November 2020

Full meeting transcript here on slack. @notlaura facilitated the meeting & wrote up this summary.

Housekeeping

We discussed the timing of 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. scrub and that we will shift it to one hour later to stay with the usual one hour before the weekly meeting.

@sabernhardt will also help lead bug scrubs, and can rotate in with @ryelle and @kburgoine. @kburgoine will be leading the bug scrub next week (which is today…I am writing these notes quite late 🤭)

Updates

CSSCSS Cascading Style Sheets. Audit (#49582)

@notlaura made progress on a pull request to the css-audit repo to support storing audit configuration in a file. @danfarrow said he has pulled the latest version down and is getting back up to speed with styling the report, and intends to do a different template per report type.

The next step for the CSS audit it to get a review on the config pull request above, and to continue work on the report styling.

Color Scheming (#49999)

There were no color scheming updates this week as are paused on asking for feedback until after 5.6 is released.

That said, the WP Adminadmin (and super admin) can be tested with the color replacements using the login info outlined in this Slack message.

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 (#49606)

@danfarrow said he has gotten the tests running locally.

The next step will be to test the reference screenshots against this pull request that contains the color scheme replacements.

Open Floor + CSS Link Share

No open floor topics this week, but a couple of quality link shares!

@notlaura shared The Raven Technique for CSS-only container queries.

@danfarrow shared that the classic Flexbox Zombies game has gotten a nice update – it’s a great way for folks to learn the concepts of flexbox.

#core-css, #summary

CSS Chat Agenda: 12 November 2020

This is the agenda for the upcoming CSSCSS Cascading Style Sheets. meeting scheduled for Thursday, November 12, 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)
    • Color Scheming (#49999) – 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 (#49606)
  • Open floor + CSS link share

#agenda, #core-css

CSS Chat Summary: 5 November 2020

Full meeting transcript here on slack. @notlaura facilitated the meeting & wrote up this summary.

Housekeeping

Daylight savings time caused a bit of confusion this week, and we decided to keep the meeting at 5pm EDT and 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 one hour earlier every other week (the next bug scrub will be November 19th).

CSSCSS Cascading Style Sheets. Audit (#49582)

No CSS audit updates this week – work is still being done on adding the option for a config file to the css-audit repo (PR here) and adding some template style to make the results more readable.

Color Scheming (#49999)

There were no color scheming updates this week – we discussed putting a pause on asking for feedback until after 5.6 is released. That said, the WP Adminadmin (and super admin) can be tested with the color replacements using the login info outlined in this Slack message.

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 (#49606)

@isabel_brison did some experimenting for on visual regression testing a while back, and mentioned that the setup worked locally, but what quite brittle and ran into problems on CI. @danfarrow tried out running the tests recently from this pull request. @isabel_brison suggested the best approach for running the tests on CI would be to:

  • generate snapshots from the main 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".
  • switch to the feature branch and run the tests for the comparison

This would be as opposed to storing the local snapshots in the repo because there are always different pixel differences depending on the machine where the screenshots were taken. This approach would also solve the issue of storage space in the repo.

Open Floor + CSS Link Share

@ravipatel asked a question about ticketticket Created for both bug reports and feature development on the bug tracker. #51706 which had some browser compatibility issues.

@sabernhardt asked for help testing theme editor styles in #51157, and to pingPing The act of sending a very small amount of data to an end point. Ping is used in computer science to illicit a response from a target server to test it’s connection. Ping is also a term used by Slack users to @ someone or send them a direct message (DM). Users might say something along the lines of “Ping me when the meeting starts.” him in the channel if any questions.

#core-css, #summary

CSS Chat Agenda: 5 November 2020

This is the agenda for the upcoming CSSCSS Cascading Style Sheets. meeting scheduled for Thursday, November 5, 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)
    • Color Scheming (#49999) – 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 (#49606)
  • Open floor + CSS link share

#agenda, #core-css

CSS Chat Summary: 29 October 2020

Full meeting transcript here on slack. @notlaura facilitated the meeting & @danfarrow wrote up this summary.

Housekeeping

@notlaura reminded everybody to complete the WordPress 2020 survey – it takes less than 10 minutes so if you haven’t already done so, you know what to do!

CSSCSS Cascading Style Sheets. Audit (#49582)

@notlaura reported nearing completion of her PR to add config file functionality to the audit tool, as discussed in previous meetings.

@notlaura agreed with last week’s conclusion that the audit report needs a little refinement before being shared on the !important audit ticketticket Created for both bug reports and feature development on the bug tracker., #26350. @sabernhardt consequently offered to update that ticket’s milestone to 5.7, which was welcomed.

Color Scheming (#49999)

@notlaura contributed some valuable insights to last week’s discussion (which she had been unable to attend) about 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 being a potential stumbling 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. for #49999.

She clarified that visual regression testing had been discussed right at the start of the CSS Audit project, back in March, and drew our attention to a ticket opened by @isabel_brison #49606 Add visual regression testing to core.

@isabel_brison also submitted a PR to integrates visual regression testing into e2e coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. tests, using jest-image-snapshot. In the most recent comment however she concluded that visual regression testing might be better implemented as a separate script to be run locally, rather than part of the e2e core test suite.

Back in the meeting, @notlaura suggested that checking out this PR might be a good starting point to continue exploring the subject. @danfarrow (me!) offered to look into this, despite not really knowing what’s involved. Only time will tell if his eagerness to contribute is misplaced!

@notlaura suggested adding a new agenda item for visual regression testing, to which @danfarrow agreed.

Further to last week’s discussion, @notlaura agreed that seeking feedback on the color scheming tests should be deprioritised until the release of 5.6.

CSS links share + Open floor

@danfarrow shared a link to a processor intensive (in Firefox at least – it’s not so bad in Chromium) CSS only puzzle game where the goal is to click blocks in order to build a lighthouse before night falls.

@notlaura shared a link to an MDN page about CSS Logical Properties and Values.

CSS Logical Properties and Values is a module of CSS introducing logical properties and values that provide the ability to control layout through logical, rather than physical, direction and dimension mappings.

This module introduces many new properties and values into CSS which may soon be encountered in the wild, so it’s good to get a heads-up on what they’re all about.

And with that the meeting was concluded. Thanks all!

#core-css, #summary

CSS Chat Agenda: 29 October 2020

This is the agenda for the upcoming CSSCSS Cascading Style Sheets. meeting scheduled for Thursday, October 29, 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) – Config and template styles
    • Color Scheming (#49999) – 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
  • Open floor + CSS link share

#agenda, #core-css

CSS Chat Summary: 22 October 2020

The meeting took place here on Slack. @danfarrow (me!) facilitated, standing in for @notlaura.

Housekeeping

There were no housekeeping items this week.

CSSCSS Cascading Style Sheets. Audit (#49582)

@ryelle reminded us that we have a basic report available on Github. General feedback on the content would be welcome!

@kburgoine posited adding a link to the report to ticketticket Created for both bug reports and feature development on the bug tracker. #26350: !important audit to show some progress on that issue.

@ryelle suggested holding off as the report’s presentation is likely to change soon, and @danfarrow added that, as part of his styling contributions, he’ll be adding in-page links which would allow us to link directly to the !important section of the report.

Color Scheming (#49999)

@ryelle reminded us that she has an environment set up for testing her reduced-colors 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".:

If you’re comfortable setting up a dev environment, you can run this branch; but if you just want to see a demo, you can log into this test site. The username & password are:

username: color-author
password: fPj1ugpm5SMlRR^Evf%zg5)f

(fyi, that’s just an author-level account, and if anything starts getting spammy I’ll reset the password)

There is a dashboard note on the test site showing details of how to contribute.

@ryelle went on to share a Slack post from @helen which clarified an issue which had probably already been lurking at the back of our minds:

Yeah this is unfortunately really hard to judge without (dun dun dun) 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…

We had a brief chat about that particular rabbit hole. @kburgoine mentioned being impressed by percy.io‘s 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/ integration, and @danfarrow mentioned recently enjoying backstop.js.

The discussion concluded with two suggestions:

  1. It would be useful at some point to recap the current landscape of visual regression testing in WordPress in order to judge the feasibility
  2. The colors project could perhaps be put on a back-burner for the time being until 5.6 is released in December and we could focus our attentions on the CSS audit

CSS links share + Open floor

@ryelle posted a call for testing Twenty Twenty-One as a good place for CSS folks to help out, with PRs to review and issues up for grabs. The 5.6 betaBeta A pre-release of software that is given out to a large group of users to trial under real conditions. Beta versions have gone through alpha testing in-house and are generally fairly close in look, feel and function to the final product; however, design changes often occur as part of the process. would also benefit from your attention – get those issues while they’re hot!

@kburoine shared a link to a very entertaining CSS Tricks article from John Rhea who hand-coded daily CSS animations for 60 days on the theme of zombies.

@danfarrow shared a link to the proposed CSS nesting syntax which would make CSS a bit more SASSy.

Finally @danfarrow concluded the meeting by thanking everybody in #core-css for being so welcoming & supportive since he first attended back in June 2020.

Thanks everybody for attending!

#summary

CSS Chat Agenda: 22 October 2020

Note: One hour before the meeting this week, @kburgoine 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 one hour before the weekly chat, at 4pm EDT.

This is the agenda for the upcoming CSS meeting scheduled for Thursday, October 22, 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