WP Café #124 | View Transitions  ## Metadata - Author: [[Highrise Digital]] - Full Title: WP Café #124 | View Transitions - Category: #articles - Document Note: --- tags: - #grafana - #loki - #logql - #observability Author: Grafana Labs (YouTube Tutorial) Source: Grafana Labs YouTube Channel Reference: https://www.youtube.com/watch?v=57dQwcmqkpQ date created: 2025-08-21 16:15 --- # Title: How to Query Grafana Loki with LogQL ## Table of Contents: - [📝 Summary](#-summary) - [📖 Main Content](#-main-content) - [0:00–0:45 Intro: Why Query Loki](#000-045-intro-why-query-loki) - [0:46–2:28 Grafana Play: Testing Without Setup](#046-228-grafana-play-testing-without-setup) - [2:29–3:54 Intro to LogQL](#229-354-intro-to-logql) - [3:55–5:28 Query Structure & Execution](#355-528-query-structure--execution) - [5:29–7:20 Filtering by Labels & Operators](#529-720-filtering-by-labels--operators) - [7:21–9:15 LogQL Expressions: Filters, Parsers, Formatters](#721-915-logql-expressions-filters-parsers-formatters) - [9:16–11:15 Filtering, Parsing & JSON Handling](#916-1115-filtering-parsing--json-handling) - [11:16–13:09 Formatting Outputs & Log vs Metric Queries](#1116-1309-formatting-outputs--log-vs-metric-queries) - [🗒️ Notes](#️-notes) - [📖 References](#-references) - [🗣️ Paraphrase](#-paraphrase) - [📰 Newsletter Draft](#-newsletter-draft) - [✅ Action Items](#-action-items) - [🧪 Hypotheses](#-hypotheses) - [📊 Methodology](#-methodology) - [❓ Questions](#-questions) - [🔮 Future Research](#-future-research) - [💡 Implications](#-implications) - [🧠 Learning Styles Assessment](#-learning-styles-assessment) - [📊 Accessibility Assessment](#-accessibility-assessment) - [🌍 DEIB Assessment](#-deib-assessment) - [✅ Logical Validity](#-logical-validity) - [🔍 DARVO Analysis](#-darvo-analysis) - [🔍 SEO Evaluation](#-seo-evaluation) - [🎯 Conclusion](#-conclusion) --- ## 📝 Summary Grafana Loki’s querying system relies on **LogQL**, a flexible language inspired by Bash pipes and PromQL. The tutorial introduces querying fundamentals: stream selectors, filters, parsers, and formatters. It stresses performance (filters before parsers), shows JSON handling, and distinguishes between **log queries** (strings) and **metric queries** (numbers). Grafana Play provides a no-setup environment for beginners. --- ## 📖 Main Content ### [0:00–0:45 Intro: Why Query Loki](https://www.youtube.com/watch?v=57dQwcmqkpQ&t=0) - Logging is only valuable if queries extract meaning. - Loki requires **LogQL** knowledge for effective insights. --- ### [0:46–2:28 Grafana Play: Testing Without Setup](https://www.youtube.com/watch?v=57dQwcmqkpQ&t=46) - Grafana Play: sandbox without sign-in. - Prebuilt dashboards available. - Panels reveal editable queries for exploration. --- ### [2:29–3:54 Intro to LogQL](https://www.youtube.com/watch?v=57dQwcmqkpQ&t=149) - Schema defined at query-time, not ingest-time. - Pipe-based, inspired by Bash. - Supports scalars, vectors → flexible for logs/metrics. --- ### [3:55–5:28 Query Structure & Execution](https://www.youtube.com/watch?v=57dQwcmqkpQ&t=235) - Query begins with **log stream selector**. - Refined with operators (`=`, `!=`, regex). - Usable in Grafana UI or CLI. --- ### [5:29–7:20 Filtering by Labels & Operators](https://www.youtube.com/watch?v=57dQwcmqkpQ&t=329) - Labels filter by pod, cluster, error levels. - Regex useful for advanced matching. - Example: Only `error` logs from `staging` cluster. --- ### [7:21–9:15 LogQL Expressions: Filters, Parsers, Formatters](https://www.youtube.com/watch?v=57dQwcmqkpQ&t=441) - **Filters**: simple, fastest. - **Parsers**: interpret JSON/logfmt. - **Formatters**: output readability. - Best practice: always start with filters. --- ### [9:16–11:15 Filtering, Parsing & JSON Handling](https://www.youtube.com/watch?v=57dQwcmqkpQ&t=556) - JSON parsing highlights key-value pairs. - Example: `status=200`. - Regex chains allow AND/OR conditions. --- ### [11:16–13:09 Formatting Outputs & Log vs Metric Queries](https://www.youtube.com/watch?v=57dQwcmqkpQ&t=676) - `line_format` controls displayed fields. - Example: Only print HTTP method + request. - Log vs Metric: - Logs → strings. - Metrics → numerical aggregations. --- ## 🗒️ Notes - Query order affects efficiency. - Grafana Play lowers entry barriers. - Loki favors schema-at-query time flexibility. - Distinction between log/metric queries crucial. --- ## 📖 References - [Grafana Loki](https://grafana.com/oss/loki/) - [LogQL Documentation](https://grafana.com/docs/loki/latest/logql/) - [Grafana Play](https://play.grafana.org/) --- ## 🗣️ Paraphrase - Original: *“LogQL uses filters, parsers, and formatters.”* Paraphrased: LogQL works like a pipeline: trim noise (filters), shape data (parsers), then style the output (formatters). --- ## 📰 Newsletter Draft **🚀 Query Logs the Smart Way with Loki** Logs piling up? Grafana Loki + LogQL turns chaos into clarity. With Grafana Play, you can try queries risk-free. Use **filters** first for speed, then parse JSON, and finally format outputs to highlight what matters. Whether you’re chasing errors or monitoring performance, LogQL makes logs practical. 👉 Docs: [LogQL](https://grafana.com/docs/loki/latest/logql/) 👉 Try: [Grafana Play](https://play.grafana.org/) --- ## ✅ Action Items - Integrate LogQL demos into **WordPress contributor trainings**. - Propose workshops in **open-source observability meetups**. - Highlight filters-first strategy in documentation. - Evaluate Loki adoption for plugin monitoring. --- ## 🧪 Hypotheses - Filters-first approach improves performance measurably. - Grafana Play onboarding boosts contributor retention. - Teaching Loki alongside PromQL accelerates DevOps readiness. --- ## 📊 Methodology - A/B test workshops with/without Grafana Play. - Benchmark query runtimes with filters vs parsers-first. - Track retention of new OSS contributors after observability training. --- ## ❓ Questions - How could Loki benefit WordPress.org observability? - Can LogQL’s learning curve block non-DevOps teams? - What UI/UX changes improve accessibility in Grafana Play? --- ## 🔮 Future Research - Explore Loki for **real-time incident response**. - Test adoption in **CMS ecosystems** like WordPress/Drupal. - Investigate **inclusive teaching methods** for log querying. --- ## 💡 Implications - Strengthens OSS reliability. - Trains contributors in critical DevOps skills. - Supports governance via transparent logging. --- ## 🧠 Learning Styles Assessment - Visual: dashboards ✅. - Auditory: narration ✅. - Logical: step-by-step query pipeline ✅. - Kinesthetic: needs more labs ❌. - Solitary/Social: neutral, more prompts needed. --- ## 📊 Accessibility Assessment - Captions available. - Missing alt-text for visuals. - Keyboard navigation adequate. - Contrast strong, font resizing risk. --- ## 🌍 DEIB Assessment - Tone inclusive but technical. - Needs more beginner-friendly examples. - Missing representation of diverse contributors. --- ## ✅ Logical Validity - Clear cause-effect (order = efficiency). - Analogies solid (pipes=Bash). - Weakness: authority reliance (“Grafana Play recommended because Grafana made it”). --- ## 🔍 DARVO Analysis - Deny: none. - Attack: none. - Reverse Victim/Offender: none. - Tone educational. - No DARVO tactics. --- ## 🔍 SEO Evaluation - Keywords: Grafana Loki, LogQL, query logs. Present. - Headers structured, strong. - Needs alt-text + meta descriptions. - Social preview missing. --- ## 🎯 Conclusion Grafana Loki’s LogQL transforms logs into a structured resource for exploration and monitoring. This tutorial clarifies how filters, parsers, and formatters interact and demonstrates the balance between log and metric queries. Grafana Play makes LogQL approachable, supporting both enterprise observability and open-source community growth. - Summary: Follow us: X / https://twitter.com/highrisedigital | https://twitter.com/wpcafeshow Linkedin / https://www.linkedin.com/company/highrisedigital/ Website: https://highrise.digital/ | https://wpcafe.show Checkout our products: JobRelay: https://jobrelay.io Integrate your WordPress website with popular job posting and distribution software. RecPress: https://recpress.com Better WordPress job board, done for you. Highrise Digital is a 2 person WordPress development team based in the UK. They primarily work with Recruitment Agencies to build integrations with WordPress. They also build WordPress recruitment websites as well as sites for companies in other selected sectors. On this channel we provide WordPress development and business advice for solo and small WordPress teams. We help you to level up your development and business skills with quick tips, live coding and chats with other industry professionals. There's an overwhelming amount of information out there and lots of people telling you the 'best' way to do things. At Highrise Digital, we strip away the guilt and show you practical, pragmatic ways that developers can improve. This is how WE do things, warts and all! - URL: https://www.youtube.com/watch?v=zbEvRsPS_Yo Hello everybody. Welcome to episode number 124 of the WP Cafe Show. This is the show where we give you the real unfiltered experience of running our WordPress business. I'm Mark Wilkinson and as always I'm joined here by my colleague uh and co-host Keith Devon. We're both from High-Rise Digital, a tiny agency building WordPress websites and products. Today we're diving into a few topics. One of them, uh, the headline topic you might have seen on the thumbnail is kind of view transitions, uh, which is something that I found recently. I thought it was quite exciting. Um, so grab a brew, soft drink maybe in this warm weather here in the UK. Uh, settle in and you can see what it's really like behind the scenes of ruin our business. You can also follow the WP Cafe Show on X at WP Cafe Show and we're on Blue Sky and the web at wpcafe.show. If you enjoyed the episode, please consider subscribing to the High-Rise Digital channel. Like the video and please do share it around with someone that you think might find it useful. It's always nice to get some new faces and new followers. So, as always, how have you been this week, Keith? What have you been up to? What's your week been like? Ah, what have I been up to? It's the week's been the week's been it's been okay. Um just quickly just want to know if people can hear you okay because you seem quite quiet. I know you're on a new mic and I just Yeah. So like be interesting to see what the balance between our uh our volumes are. If anyone can chime in with that. Um but yeah, other than that, no good a good week. Um yeah, outside of work, very much enjoying the the weather here. Uh bit hazy today, but uh it's been glorious heatwave, sunshine, lots of sea swims. I'm very lucky to live very near the sea, so I've been taking full advantage of that. Um and then workwise, a few rack press builds on the go at the minute, which has been good. Um and then I've done quite a lot of offline kids work, um this week. So, for those who don't know, it's a website that we launched, God, it's probably about five weeks ago or something now. It's it's a while. Probably more, actually. Yeah, it could be more. Yeah. So, it's a website that we we launched and it's a basically it's a directory of screenfree kids activities. So, if you're a parent or a carer and you need to think of something to do with your child and you're trying to pull them away from their tablets or phones or TVs or whatever it is, um hopefully this the website gives you ideas. So, um one of the ongoing tasks is just adding more and more activities. So, I think we're up to somewhere in the 140s I think in terms of total activities now published. Um, and I think the aim is to get to around 500 because I think that would be enough that there's enough activities there to suit like lots of different occasions and situations and age groups and all that kind of stuff. Um, but not so many that it's just completely overwhelming. Um, so we've spoken about that kind of balance before, but yeah, I feel like that's the kind of number to aim for at the moment. Uh, so I was adding a bunch of activities. Whole new category around clubs and groups. I also should put lessons in there because I was thinking like swimming lessons and like tennis lessons. So, I don't know if I'm going to change the name of that, but that's it's to catch all that kind of stuff where you go along with other kids and do something together uh outside of school or maybe even an after school club or whatever. Um, yeah. So, I've added that. And then I did a little bit of actual work on the UI as well. So, I've made the the filters or little uh expandable boxes now so that you can see all the filters at a glance uh and then expand the ones that you you want to drill down into. I think that's improved that a little bit. Um changed Yeah, I've just changed a few bits and pieces. We've got an ongoing list to-do list, don't we? We just add things to. So, I was checking off a few of those. I think you've done a bit few bits and bobs on it too recently. Yeah. So, um, interestingly, just before I just say that, I got the the newsletter today. So, you're sending out a newsletter every Friday with like a summary of activities and what's been going on. And I I just I was really impressed because I I it landed in my inbox and I like didn't immediately know what it was and I looked at it and started reading it. I was like, "Oh, this is quite cool." And it suddenly dawned on me, "Oh, yeah, this is the offline kids thing." And it was really good. Anyway, that's beside the point. So if you haven't signed up to the newsletter and you want to get some ideas about stuff to do, it is really good and it's a nice read. So I do recommend it. What have I been doing? I have been fixing our custom headers. So for the filtered pages when you click on like um a specific filter like for example you might choose activity type of games and indoor. So, you know, for indoor games, you can it generates a generic heading or H1 based off of your your um your query. So, it'll do like indoor games, activities for kids will be the default heading, but you can create a custom one using that plug-in. Um, and it will you can set whatever you want. The problem is that was only working on page one of the results. Well, as soon as you clicked on a pageionated page, it would put the default one back in. It was basically because I'm using the URL slug to sort of find the right uh custom heading and once that had page- page/page slash2 on the end, it couldn't find the right one. So, I fixed that which is nice. So, those custom headings should work across the site. Um, for pageionated results as well. Um, and I fixed something else, but I can't what it was now. There was two things. Uh, you you did the page ma titles and descriptions. We can do those. Yeah. So, for pages where you have set a custom header, we're going to be able to you you're going to be able to also set a meta uh head title, so heading on there and a description so that it'll do a bit of SEO work on there as well. So, they should be working. I tried them. I tested them and they worked, but fingers crossed they'll uh they'll start working on the site as well. So, you can have a bit more fine grain control over what those are. Now, the initial thought for that was to say, well, let's just use Yost SEO because we could just set them on the posts that we've created for the custom headers, but the problem is our custom header posts are not public. We don't want them public on the website, like coming up in search results and giving them a URL and everything like that, and yours just doesn't work on stuff that isn't public for obvious reasons because it's not SEO stuff, is it? So I had the decision to either go in and start manipulating yours to work on my post type or just to put these on itself and I just thought it was going to be easy just to give us a few fields in the back end that we can set some stuff inel. So that's what we've done on that. Um so yeah that's my offline kids stuff. Got a few other things to to try and do which is on the list which you can get to. Um, but yeah, I it's coming along really well. And I think the traffic's going, isn't it? Getting bigger and yes, like really really slowly, but I mean that's okay. Like I don't really I don't really mind. Like it's just kind of everything's trending in the right in the right direction. You know, we're not getting loads of visitors yet. Google's still, I think, kind of learning about the site and kind of trying the site out as it were. Um, but the impressions are going up, the average position's going up, the clicks are going up. So, yeah, slowly but surely we're getting there. Yeah. Yeah, it's looking good. I like it. Love it. Love the site. It's nice. Should have a look at it if you've not had a look. It's good. Yeah, definitely. So, that was that. What else have I been up to this week? Um, I've had quite a few job relay calls actually. Um, oh, that's interesting. Keith has just disappeared. Oh, well, hopefully back shortly. Um I've had um quite a few job relay calls. So sales um they've been sort of coming in uh as well as rep press ones. We've sold a few this week which has been positive. Um don't know why that seems to come in like cycles. Like you get hardly any inquiries for like a few weeks and you get then loads of inquiries that come through at once. I'm not sure why. Keith just messaged me on his stream just crashed him. So he's restarting Brave. He'll be back in a second. Uh so I was working on those uh and and doing those those calls. As said we converted a few which is always nice. I also did a webinar this week on how to integrate multi-posting services job services with websites. It was more of a a generic webinar. Um it was had a WordPress edge on it obviously cuz I'm a WordPress person, but it was more to sort of inform recruiters and developers of what the process would look like. Um and then obviously we we you know we promoted our products at the end of it as well if people wanted to use those. So um that went well. I thought it delivered that okay. I don't think there was many watching but it's kind of like evergreen content. It can sit there and people can watch it and sign up for it still. So um that's that's quite nice to have. So that was that. Um, beautiful day playing golf yesterday, uh, with the weather. The weather in the UK has taken an upturn in terms of temperature and sunshine, which has been nice. So, that was good. Um, yeah, nothing else really exciting that's been happening for me. So, that was that. So, while Keith is just um, rebooting, I think he might have to restart his machine. I will continue holding the fort and uh talk about the the next thing on our list which is kind of like um the headline thing. In fact, no no I'll wait for that and I'll wait till Keith comes back because I'm sure he's got some questions and comments and things because it's quite um front endy shall we say. So I'll move on to what I've been looking at with Job Relay and the development in Job Relay. So I've been trying to do uh well I've been trying to do few things. The headline one though, which is the one I'm really struggling with, is I don't know if you remember a few weeks ago, we talked about adding jobs to a queue and using like a background processing task so that um large amounts of jobs could be queued up and then delivered at the right time when they needed to be delivered. And I got that working and then it broke. So I turned it off and reverted it. So what I wanted to do was to revisit that to try and understand what the problem was. So part of my thinking for that was to enable it for only specific users. So when I pushed it live originally all the people that were using um job adder were then going to use this new queueing system u and it seemed to work for a few days and then it stopped working. What I wanted to do is to say actually can we have a mechanism where we can say just customer A uses the new version and then we can see how it manages with that customer. Then we could introduce another customer and another customer and so on. The benefit of that is you're testing it with a small cohort obviously and if it breaks you can quickly have a look at what's breaking without having to fix it straight away and it affecting everybody so that you can kind of see the thing in action. So I did that and I enabled like a version one and a version two in our system so you could turn one, you know, you could turn a customer onto version two and it would move to that one. But then version one stopped working which was really annoying. Um, and I couldn't work out why and I still haven't today. So essentially I was using a test XML file that had 50 jobs in it and my my my my code processed those jobs and I can count the array and say yeah I've got 50 jobs when just be just before they're sent to the website and then when they sent to the website using WP remote post standard sort of um function in WordPress to post stuff um when they arrive there was only 29 999 in the array which is rather odd. So all I'm doing there is I'm just um taking the post request at the destination site and then counting the array again. So for some reason it was like losing a lot of the jobs and I just don't know why that is. Could could it be something like um the body's too big in the post request? I mean, this was on my local MAP install. I was doing it, but I just could not get to the bottom of why it was like stopping at a certain amount of jobs or it was losing those jobs in the array. So, I'm I'm a bit baffled as to what that is and still. So, so I can't progress that until I fix that issue because obviously I don't want to push that live. I'll be in the same situation again. So, I was working on that which was really frustrating. That was um what day is it? Friday. That was Wednesday. Spent most of the morning on that. didn't really get anywhere and I to sort of like put it to one side and just reset and hopefully you know you you come back with a bit of a better picture of what's going on. Hasn't happened yet but I I'll crack on with that next week. And then the other thing I was working on which is really important is to make the error messages that job relay returns uh much better. So there's there's two aspects to this. One of them is when when a job gets delivered into uh job relay it obviously does some checks. It checks the license and subscription details to make sure that's happening. Uh that they've got an active license and subscription and it also checks things like does the job have the data that you need. So all jobs need a title and a description and a reference and so on. So it does some checks like that. And at the moment the the checks happen, but the reporting back to the user isn't as great. So it's a bit more of a generic failure message rather than a specific message to say what actually has failed. So therefore, I am uh still looking at um trying to fix that and making that a bit better. So Keith has just asked me for the Streamyard link. Um I'm not actually sure what he wants, but I will send him this. See if that's any good. Um so that's what I've been looking at this week with job relay. Uh so I'm trying to get those logs better. trying to get those um uh reporting back to the user. So so when the user gets the error message it has more specific information about what failed and why and also tied to that there is uh an email that gets delivered to the customer and that needs to contain the error as well. At the moment, it's more of a generic this failed. Um, it's kind of a bit more detailed that, but it doesn't really give you the crux of what was the problem was. And tied to that, I'd also like to put some documentation together that is tied to each error. So, this error, why don't you try these things for error A, for error B, why don't you try these things? Like, these are the things that might fix it. or you know get in touch with support because um that's what you you need excuse me um Elliot thank you for joining us he says regarding the posting of data servers will have limits eg like phpinai postm max size and max input vase yes I I having done some research I I found these but these were exactly the same that I had set originally and hadn't changed them. So, I don't understand why it was working and now why it's not working because they haven't they haven't changed as far as I can see. Um, I could increase them and maybe that will solve the problem and I'll check that. Um, but uh that's that what that was what made me think it wasn't that because nothing has actually changed considering it was working and now it's not working. Anyway, that's that. Um, so yeah, thank you for for pointing that out. I will look at that again though. That's a good point. Um, right. So, let's move on. Where's my little list of notes here? Um, job relay. Uh, where we up to? Yeah, EP. So, the other thing we never touched on, and I don't know if you've seen this, was this new, um, fair package manager for WordPress. Um, so I think what this is is it's essentially a replacement for the WordPress.org org mechanism of delivering plugins and core WordPress to your website which is interesting. Um I think the idea is to try and get websites away from having this one point of failure, one person uh in charge of that and moving away. So I don't know if anyone's used it. I I installed it on my lo on my personal website. um it didn't really seem to do anything, but then I suppose it wouldn't. I couldn't tell whether something was updating from their system or from WordPress's system. Um but I think my take on it was there's a lot more education to give to people, I think, because um I I I couldn't understand exactly what's happening with it, but maybe that's not needed. I'm not sure. Um, Keith is asking for an invite to a guest link and I would like to try and find it. There we go. That's the one he wants, I think. Let's try that link. Don't know what's happening at his end. Obviously, something's gone gravely wrong, but we will try and plot on. Anyway, um Elliot also says added, um, reject or truncate large payloads without clear errors might also be down to malformed data. It's worth checking whether where where at what point the data is truncated at. That is exactly what I thought as well. And it seems to be always failing at job number 29 which is actually job number 30 because they're indexed. So zero indexed and it fails immediately that it seems to have um formed the post title or the job title. And I thought, well, let's change the job then, so it has a different title. Um, but that didn't seem to work either because it still failed at exactly the same job with a different title and different data. So, I was again confused as to why that might be, but um, thank you for those suggestions. You're back. I think so. Can you hear me? I can hear you. Yes. Oh, wow. Well, that was weird. Brave browsers just died on my machine basically. I did a full full restart and it's still won't load anything. So, don't know what's going on. Are you in a different browser now? Yeah, I'm in Firefox now. Yeah. Okay, cool. Have you What's been happening while I've been away? Oh, you missed an absolute dream of a show, Keith. Um, I was just talking about the stuff that I've been working on with Job Relay, uh, the development stuff, and I also mentioned this fair package manager, which I know we don't really know a lot about. I think the concept for me is good. Um, but I think there's a lot more education about how it works, needed, um, what it's doing, and, you know, why it's different to what we've got. I think, yeah, I don't know what you've covered already, but I did I did feel like the concerns that were raised about it were all really valid. Like, is this Is this actually what we want? Do you know what I mean? In terms of I I think what we all want is it to go back to the way it was, but the trust in the WordPress leadership to be back to where it was also previously. So, I think that's the main thing. I think if if Matt basically hadn't shafted uh ACF the way he did, uh yeah, I think we'd all be quite happy with the way things were. I don't nobody was calling out for a different way to do plugins, were they? Um but I think it's it's that lack of trust. I don't really I don't really see too many advantages other than it's not completely in Matt's control. Um that that's just yeah, that's where I'm at with it. I mean, I I I think exposed some issues that were always there and actually um regardless of what behavior's gone on I think it always these issues were always present and therefore it's trying to correct those. I do think it also does other things like it enables like premium plugins to get involved with that architecture and so when I can find them in the admin and things so I do think there's more to it than just a direct replacement. Um, and I do I do think the concept is good, but I'm I'm not I just it when you know I as I said, well, you won't know because you won't hear, but I said I have installed it on my personal site and nothing seems to change, which I suppose is a good thing, but I don't really know what it's doing then. Is it where is it getting the content from for updates? Is it now getting them and where is it getting them from? Is there settings to say where you want to get things from or is it like No, but yeah. So my my my worry is that you've replaced WordPress.org with something else. H how then is that different to WordPress.org? Surely the point should be that it's I mean I suppose the governance of this other thing is different and that's that's the key. But this is the education I think we need and I'm not sure maybe I've just not read it and understood it properly but um you know how does that work and how's it differently? So yeah. Yeah. Absolutely. I'm not it's not something that I was crying out for like the The concerns for me are around where the where the reviews happen, where the ratings happen. Um, where where do you get like data for install counts and things like that? It's all it's all stuff like that that I just feel like having something centralized just makes that stuff made way easier and possible. Uh, but then you could argue that like some of the data was getting kind of taken away from the plug-in developers as well, wasn't it? Uh, I was gonna say we can't access that data, can we? So, I think issues around that. Yeah. And Elliot says, um, Eek, you're both the wrong way around, which is not good for my OCD. I completely agree, but I don't know how to get the right. So, if you know how to get us the right way around, Keith, please do. No, I think I think it's because I'm because I don't have control over the show anymore. I've come in as a guest, so I've got I can't do anything. All right, I'll let you go. Episode 124. Just close your eyes or I don't know. Anyway, let's move on to the headline chat for this this um show. I don't Have you seen this, by the way, Keith? This view transitions? Yeah, and I saw it a while ago. Um just not not in the WordPress context, but just because I like to keep up with geeky CSS stuff, right? Um so yes, I I had seen it and then I saw it again. I think Remus maybe mentioned it. Was it on Ramcast? Could be in his newsletter. Yeah. So, yeah, this at the moment, this is a plug-in uh written by Felix. I hope I'm saying that right. Who is uh I believe one of the people that's now on the new AI committee thing. A very familiar name though. Very familiar name. Someone you'll probably have heard of in the WordPress space. and they've he has written a plug-in um which implements support for what they call cross document v view transitions. So that means when you're moving from one URL to the another URL instead of having a sort of hard load, it has this nice sort of like I want to call it like an animated CSS transition, which I think it is something to do with CSS under the hood as to how it works. Yeah. Um, and it's really nice. I If you go to my my my site, markwilinson.dev, and you just click through the pages, you'll see that it has this lovely uh transition rather than like a full fa pray page refresh, I can speak. And that's just out of the that's just out of the box. All I've done is literally activate the plug-in. That's it. Oh my. I've done nothing else. I haven't set any settings. I haven't done anything. Um, and it just looks really nice. So, I was just really pages where you get a nice nice effect going from one to the other because I'm just for me I can't really see that there's any particular I don't I don't really notice any difference. Maybe it doesn't work on Firefox. Ah, right. That's a very good point. It is only on certain browsers. So, I'm glad you've raised that point. Um, there is a can I use link here which I can click on and I bet you Firefox is Yeah, Firefox is red. So this doesn't work on Firefox here. But that does also raise that like it is a progressive enhancement plugin as in it just does nothing on your browser. So it's it's fine. That that makes sense. But if you try in Safari it should be fine I think. Yeah. Safari the latest versions of Safari are fine. Quickly boot up Safari and see it. So it should be fine. Um it does have some settings. So it says default transition animation. It's set to fade. Interestingly, you can have it just slide from the left, from the right, from the bottom, from the top, or swipe or wipe. I think that'll be pants. Should try seeing that on Safari. So, Mark, tell tell me what I what two pages I should be able to go between and notice something that isn't just a normal page reload. If you're on the homepage, yeah, and you click blog, just for me, it just fades in. everything just fades in rather than having a hard refresh and it loads as a new I'm not getting that on Safari either, right? Oh well, maybe I'm not on the latest version there. There's a there's a potent there's Yeah. Uh I might not be on the latest version of Safari because I never use Safari and I haven't updated uh Mac OS in a little while. So, all right, maybe not. But I don't know if anyone else can have a look, see if they think it's working. matt wilkinson.dev dev and just have a click around and you should see a nice faded transition between each one. Yeah, but yeah, I think it was really really nice. Um, as I said, there are a few settings you can change the animation type, swiping, left, sliding. I've just left it as fade. I think it's quite nice. Um, interesting. It sounds like that plugin is taking like a whole page approach as in this complete screen is going from that to this and it's doing it either by fading or moving or sliding or whatever. But there's much more to the API than that as far as I know. So I think you can you can animate like individual elements. So so for example on your blog, right? Yep. Uh, you've obviously got a list of blog post titles. And I think that you could set it up, maybe not with this plugin, but if you knew the CSS, you could set it up so if you clicked on one of those titles, that title would like move into it would grow and move into position. I think it can do things like that. Um, so if you click like an image thumbnail, for example, in an archive page, um, it that image thumbnail could could animate into the hero image. I think stuff like that. Well, I think it kind of does. So, I know you can't see it, but if I am on my homepage and I click the first uh there's a list of three posts, latest articles. The first is like lessons from building sites with the block editor. If I click that, the title does exactly that. it it it moves up into the title and then everything else loads fades in underneath it. Yeah, I'm I'm just not seeing it because Yeah. So, there obviously is settings and in the in the back end there is a heading header selector uh to provide a select a CSS selector for the global header. There's also one to provide one for the main the main content selector. Uh there's a post title selector, post thumbnail selector and post content selector. So, it looks like there is some um control of like setting up those in those transitions as well. Um yeah, but yeah, I thought it was just really nice. Um and I'm not usually one like um massively into like these animated sort of things, but I just thought this was really nice. Uh dead simple plugin, just literally installed it and it just kind of made it better. Yeah, that's that's very cool. Uh and it's made me realize I need to update my browsers that I don't normally use. Yeah, you're not usually the first to update Mac OS. I I must admit. Uh, no. I just kind of What you on actually? Out of interest. I don't I'm going to be ridiculed. Uh, what am I on? 14.5. I'm on 15.5. [Music] Is Is your life infinitely better than mine currently? Am I in this utopia? I'm not sure. I'm not sure. Um Paul, hello Paul. Thank you for joining us. Um, Paul says, "Pretty sure saw an update the other day about it being extended to work in the WP admin." Yes, I did see that as well. That's that could be really cool, which would be nice. Yeah. So, I guess that would like I don't know actually. It would kind of keep the menu on the left without having to sort of like I think and then like it would look cool. So, yeah, nice. I think if if used well, stuff like this can really really aid like I don't know what the right word is. It's not just navigation, but like a sense of where you are on a website. You can kind of like you can animate things so that you kind of know what's changing and like what what new area or state that you've moved into. And I think I think it can be Yeah, I think it could be really useful. And it just like I think it's probably one of those things that's just a really nice kind of cool modern effect rather than just complete refreshes of of screens like rerenders. So yeah, that's cool. We we talk about it with clients, don't we, when we're on pictures and things like we we we like animations, but like you can easily go too far. Yeah. And I think when I installed this, I just thought that's really nice. It's nice and subtle. It's not like a whole, you know, moving everything around. It's uh it's just nice. So, that's probably why I was impressed with it. It did just make me think about a post that I read by Jonno Alderson. Alderson Alderson recently and I don't think I can share the link. I can probably share the link in the comments. Can I click join the chat? Oh my god. No, I'm not going to bother with that. So if you go if you Google Jonno Alderson, he is an independent technical SEO consultant. I believe he used to work at Yoast. Yeah, I think we did. Um his most recent blog blog post is called JavaScript broke the web and called it progress. Uh and it's a really good read about just how we have made building websites ridiculously complicated for no real benefit. like in this endless quest for better developer experience. It's just developers building developery tools to impress other developers. And actually what we had years ago was semantic performant web pages and now it's just a hot mess of JavaScript frameworks and divs and yeah rub garbage and complexity. It's really it's a really good it would re resonate with you definitely Mark um in terms of how how he thinks and you know just about keeping things simple and avoiding all the latest framework crazes and you know why do we need to build blogs and react it always um it's slightly different because obviously this is not it's not making a website hard for a user but like it's back to the developer thing you know every time I run npm it just makes you cry a little bit doesn't it like yeah just download the entire your internet to my machine again. It's just like really is do we have to do this like this? Just thought, no, doesn't seem right to me. Yeah. Yeah. That that sort of stuff is if it's that sort of stuff he's talking about. I completely agree with him. I I think Yeah. I mean, it is it is that kind of stuff. It's just like why do we need all this Yeah. architecture and build processes and blah blah blah blah blah to get something that is in the end actually worse. Do you know what I mean? Like than what we started with. We started with these like plain static HTML pages that with semantic content and they just loaded in an instant because it's just a text file. And now we've got all of this complexity and architecture making our lives apparently better and easier but actually much worse over like when it's aggregated over time. Um, and now we've got slow bloated websites that are really difficult to use and always break and blah blah blah. So, like where's the pro like kind of where's the progress? Things look fancier, but actually is anything else better? I don't I don't I don't really know. Yeah, I agree. I remember building sites in Dreamweaver back in 201ish probably. Yeah. You know, you say that's a better time. No, I'm not saying it's better. I'm just saying it was easier. Like you literally built HTML templates. Whether they were tables back then, I don't know exactly. Um, but that's what I mean that's what it was. We'll talk about after that though. After the tables bit of that bit. Yeah. And then you just had a CSS file and you just changed it, saved it, refreshed it. Simple. Yeah. Nice. Right. Yeah. But you couldn't do a lot of things. So there you go. I mean we we're obviously I wouldn't say lots, but like we are on on the side of like you're about cutting edge, Keith. Not Yeah. not chasing all the all the latest and greatest tech and just like sticking with what works. Um I don't know in some ways I think it's served us very well. Um, and in, you know, in some ways I think we miss out on on some stuff, but like, yeah, there's just there's so much so many like rabbit holes that we could go down to make our kind of the developer experience better, but ultimately much much more complicated. Just just things like, you know, even the way we version control stuff like isn't particularly complex. And we're not doing pull requests and we're not doing continuous integration and we're not doing um just like any number like yeah what are all this like automated checks every time you like you do pull requests and all that kind of stuff. We're not doing all that stuff. I've I've really tried to reduce the number of like uh front-end build scripts. So I'm writing kind of plain CSS again on some of our projects. you've never really got into like Docker and Composer and like all that stuff on a on a PHP side and it like and we're still building websites that work. I I just so what's what's the point in it all? I guess like if I think if you're super smart and you've got the kind of mental capacity to a learn and b keep that kind of stuff in your head like you set it all up. So, I've set up my gulp or my whatever script it is and I can come back to that in three, six, 12 months and just be like, "Yep, I remember what I did. This is this. This is this. This is how I change it." Or you go back to your composer script or your whatever else set your continuous integration setup with hooks left, right, and center. If if you're the kind of person that can keep that stuff in your head and just understand it again in an instant, then go for it. But like we're like I'm definitely just not that. So like simplicity for me is Yeah. I just hate it when you come across a GitHub like script or whatever someone's written and uh oh this looks really good just yeah brilliant like go to the install section you know using composer just run run this it's like how do I just put it in my project and use it like that just seems overly complicated to me but I don't know. Yeah. Yeah. Can I just download something, unzip it, and then put it in a folder. Yeah. And then run a function and that works. Everybody understands that. You just download it, unzip it, include it, off you go. Yeah. Yeah. I hope. Yeah. There you go. Uh, right. I think we'll call it a day. Let's do it. Yeah. Um, bit of a ramic for me while I disappeared. That's all right. Um, bit of an improvisation. I just went for a sea swim. I just pretended that, you know, that was a quick sea swim. I must have ran, jumped in, and run back again and then got dry very quickly. It's hot. Anyway, we will see you next week hopefully. Hope you enjoyed the show. Thanks for joining us. Um, we'll see you later. Bye-bye. See you soon. Bye., WP Café #124 | View Transitions, Highrise Digital, 01k36stqr8q3wnadkaw17wd17v.