[{"data":1,"prerenderedAt":447},["ShallowReactive",2],{"footer-primary":3,"footer-secondary":93,"footer-description":119,"the-changelog-2-september-2024":121,"the-changelog-2-september-2024-next":177,"sales-reps":195},{"items":4},[5,29,49,69],{"id":6,"title":7,"url":8,"page":8,"children":9},"522e608a-77b0-4333-820d-d4f44be2ade1","Solutions",null,[10,15,20,25],{"id":11,"title":12,"url":8,"page":13},"fcafe85a-a798-4710-9e7a-776fe413aae5","Headless CMS",{"permalink":14},"/solutions/headless-cms",{"id":16,"title":17,"url":8,"page":18},"79972923-93cf-4777-9e32-5c9b0315fc10","Backend-as-a-Service",{"permalink":19},"/solutions/backend-as-a-service",{"id":21,"title":22,"url":8,"page":23},"0fa8d0c1-7b64-4f6f-939d-d7fdb99fc407","Product Information",{"permalink":24},"/solutions/product-information-management",{"id":26,"title":27,"url":28,"page":8},"63946d54-6052-4780-8ff4-91f5a9931dcc","100+ Things to Build","https://directus.io/blog/100-tools-apps-and-platforms-you-can-build-with-directus",{"id":30,"title":31,"url":8,"page":8,"children":32},"8ab4f9b1-f3e2-44d6-919b-011d91fe072f","Resources",[33,37,41,45],{"id":34,"title":35,"url":36,"page":8},"f951fb84-8777-4b84-9e91-996fe9d25483","Documentation","https://docs.directus.io",{"id":38,"title":39,"url":40,"page":8},"366febc7-a538-4c08-a326-e6204957f1e3","Guides","https://docs.directus.io/guides/",{"id":42,"title":43,"url":44,"page":8},"aeb9128e-1c5f-417f-863c-2449416433cd","Community","https://directus.chat",{"id":46,"title":47,"url":48,"page":8},"da1c2ed8-0a77-49b0-a903-49c56cb07de5","Release Notes","https://github.com/directus/directus/releases",{"id":50,"title":51,"url":8,"page":8,"children":52},"d61fae8c-7502-494a-822f-19ecff3d0256","Support",[53,57,61,65],{"id":54,"title":55,"url":56,"page":8},"8c43c781-7ebd-475f-a931-747e293c0a88","Issue Tracker","https://github.com/directus/directus/issues",{"id":58,"title":59,"url":60,"page":8},"d77bb78e-cf7b-4e01-932a-514414ba49d3","Feature Requests","https://github.com/directus/directus/discussions?discussions_q=is:open+sort:top",{"id":62,"title":63,"url":64,"page":8},"4346be2b-2c53-476e-b53b-becacec626a6","Community Chat","https://discord.com/channels/725371605378924594/741317677397704757",{"id":66,"title":67,"url":68,"page":8},"26c115d2-49f7-4edc-935e-d37d427fb89d","Cloud Dashboard","https://directus.cloud",{"id":70,"title":71,"url":8,"page":8,"children":72},"49141403-4f20-44ac-8453-25ace1265812","Organization",[73,78,84,88],{"id":74,"title":75,"url":76,"page":77},"1f36ea92-8a5e-47c8-914c-9822a8b9538a","About","/about",{"permalink":76},{"id":79,"title":80,"url":81,"page":82},"b84bf525-5471-4b14-a93c-225f6c386005","Careers","#",{"permalink":83},"/careers",{"id":85,"title":86,"url":87,"page":8},"86aabc3a-433d-434b-9efa-ad1d34be0a34","Brand Assets","https://drive.google.com/drive/folders/1lBOTba4RaA5ikqOn8Ewo4RYzD0XcymG9?usp=sharing",{"id":89,"title":90,"url":8,"page":91},"8d2fa1e3-198e-4405-81e1-2ceb858bc237","Contact",{"permalink":92},"/contact",{"items":94},[95,101,107,113],{"id":96,"title":97,"url":8,"page":98,"children":100},"8a1b7bfa-429d-4ffc-a650-2a5fdcf356da","Cloud Policies",{"permalink":99},"/cloud-policies",[],{"id":102,"title":103,"url":81,"page":104,"children":106},"bea848ef-828f-4306-8017-6b00ec5d4a0c","License",{"permalink":105},"/bsl",[],{"id":108,"title":109,"url":81,"page":110,"children":112},"4e914f47-4bee-42b7-b445-3119ee4196ef","Terms",{"permalink":111},"/terms",[],{"id":114,"title":115,"url":81,"page":116,"children":118},"ea69eda6-d317-4981-8421-fcabb1826bfd","Privacy",{"permalink":117},"/privacy",[],{"description":120},"\u003Cp>A composable backend to build your Headless CMS, BaaS, and more. \u003C/p>",{"id":122,"slug":123,"vimeo_id":124,"description":125,"tile":126,"length":127,"resources":8,"people":8,"episode_number":128,"published":129,"title":130,"video_transcript_html":131,"video_transcript_text":132,"content":8,"status":133,"episode_people":134,"recommendations":163,"season":164,"seo":176},"61e8a740-8f60-40e8-9fc3-d9bcda53d16b","2-september-2024","1008099269","Join us for The Changelog, taking you through the month’s Directus updates including product updates, new content and community contribution highlights. This month's show includes a community showcase from websyte.ai, Rijk taking us through what's in his dock and Kevin with a tutorial on complex media transformations.","fb790812-6a22-49ff-b39a-cb8c0bc7818c",37,2,"2024-09-11","September 2024","\u003Cp>Speaker 0: Welcome to the second version of the change log. If you didn't catch the last one, which was our very first one, welcome. Nice to have you here. The change log is where we go through what is new with directors this last month, and then we've also got some fun segments as well, so you're in for a treat, stick around. But the very first one is going to be Kevin taking it away with what is new with product, so hopefully you can hear this as well.\u003C/p>\u003Cp>Speaker 1: Last week, we released Directus 11.1, and with it, a major new feature, which is useful for every Directus project but really impactful for users of Directus Cloud, where Directus runs on our infrastructure, and that feature is log streaming. Let me show you how it works. Okay. So here we have a system logs, kind of session already begun over here. And this is ultimately a debugging tool to help you understand what requests are being made in your Director's project.\u003C/p>\u003Cp>So as I click around, you will see here that logs are being shown over on the left hand side. And that, of course, also includes errors, that may be happening, so you can have a little bit more of an idea of how that's happening. You can click into any given request and get a little bit more information about it. And you can filter all of the logs here, by log level. By default they're all enabled.\u003C/p>\u003Cp>And if you're running a Node Directus instance, you can also specify which, which nodes or instances you want to see logs for. You can access this straight from your project settings here from Directus version 11.1.0, and you can change the logging style by changing the log style environment variable. Now, like always, we are open to feedback, so we'd love to see, your feedback about this feature, but hope you find it useful. In the last month, there have also been a couple of smaller releases of Directus before 11.1, and these included some notable new features. Firstly, we added support for listening on Unix sockets instead of a host and port, which allows for inter process communication.\u003C/p>\u003Cp>This was a community contribution, so thank you very much for that. You can now also use an environment variable to configure how long invites last before they expire. This is really helpful if you have to create invites, but they were tending to expire before being used. And finally, we have also added support for indices via a new is indexed field, which means you don't have to do this directly in your database anymore, but can instead use Directus. So that's what's new across Directus version 11.0.2, 11.0.3, and Directus 11.1.0.\u003C/p>\u003Cp>They're available now on Docker Hub and on Directus Cloud, and we can't wait for you to use them. Alright. Thank you so much for this time, Beth. I'm gonna hand back over to you.\u003C/p>\u003Cp>Speaker 2: I'm gonna take you through what's new with Directors Labs. And as a quick reminder, Directors Labs is our experimental extension location where we regularly release new extensions we think are cool, and we hope you agree. So if I open up our demo for you and check that it's her. Yes. It is.\u003C/p>\u003Cp>Within flows, the first two to talk about are both email focused. Firstly, the liquid JS template operation, which enables dynamically generated content creation, such as personalized emails or really any scenario where you need to combine data with templates within a flow. Templates can be configured in the flow as a custom template or sourced from a collection. You can dynamically create different outputs based on multiple items. Here, the data is an array of users.\u003C/p>\u003Cp>You can use the liquid templating language, including loops and conditionals, injecting custom data in the data chain using these slightly altered liquid delimiters. If I go into the logs\u003C/p>\u003Cp>Speaker 0: here,\u003C/p>\u003Cp>Speaker 2: here is the output of the operation as well.\u003C/p>\u003Cp>Speaker 0: That is the first,\u003C/p>\u003Cp>Speaker 2: that runs into our second to talk about which is the resend email operation which integrates resend's email API into your director's flow. So here you, we are preparing the emails to send via resend, It's using the templates returned from the previous operation as the HTML property. And if we go into the resend operation itself, the operation supports most of resend's, endpoints along with the various options that we pass in the array from the previous operation. So there are 2 email focused operations. We go into insights for the panel demo, which are our next 3 to talk about.\u003C/p>\u003Cp>They look good. This one is the table in insight panel, which facilitates data from across multiple tables. And if you click an item, it'll open the director's editor drawer, but you can see here under socks. The next is the plausible analytics panel. This is part of a bundle and embeds your plausible analytics right within your director's project.\u003C/p>\u003Cp>I believe we're using the plausible sample data for this, which are the graphs that you're seeing. And lastly, another part of a bundle panel is the flow trigger panel that allows you to run manually trigger flows from right within a dashboard. If we go into content, you can also see the matching interfaces as part of the plausible analytics bundle and the flow trigger bundle. So you can trigger a flow or show a page level analytics dashboard as an interface as part of those as well. Next, we have the list interface, a small UI and UX, experiment for tags.\u003C/p>\u003Cp>So you can't reorder tags. You need to remove and re add them in order. This interface is a mix of tags and a repeater, and you can easily add and reorder strings. There's also full keyboard support with that as well. Lastly, I am gonna move location to show you.\u003C/p>\u003Cp>Here. Perfect. This is a global command palette now available along with a global search. So this module enables a command k shortcut that lets you navigate to collections, like so. Team.\u003C/p>\u003Cp>Not he, team. What else can I show you here? So, we can also search collections. So if we say search resources, like so, and I'd be looking for a spreadsheet, like so. And in the moment, if I wanted to create a new item, I could do that by create a to z partners.\u003C/p>\u003Cp>And, for example, this also allows run context aware actions like copying the API URL or running flows. It's gonna be a really nice tool for power users to navigate the data studio more quickly. I know I said lastly, but I have got a bonus for you. This isn't an extension, but it is for extension authors. We do often get asked how to customize the WYSIWYG and the block editor interfaces with new plugins, and our answer has been to adapt the interface into an extension and add the customizations yourself.\u003C/p>\u003Cp>While that isn't any different, we've now got these 2 interfaces, available as boilerplate extensions with guides on adding plugins.\u003C/p>\u003Cp>Speaker 0: This will get you started much quicker and let\u003C/p>\u003Cp>Speaker 2: you create the functionality you need. With all of these extensions, we hope that you find them useful. If you have any thoughts on them and you've got feedback, we'd love to hear from it. You can find all of these extensions in the directors lab slash extensions repo on GitHub.\u003C/p>\u003Cp>Speaker 0: We have new content this all right, that is the extensions for this month. Hopefully you can still all hear me again when I change between, so the next step sorry, yes, amazing, we also have, new content for you so, we have on Directus TV which for the people that might not have heard about it you are already on it because of the link, so congrats. You're already in the right place. Directors TV is where we have a whole bunch of educational and entertaining shows, and the latest one that we have just released the first few episodes of is Directors Academy. That is Kevin taking you through the different tools as part of Directors.\u003C/p>\u003Cp>Now if you use Directors all the time, this might not be the one for you. But if you are new or still getting to grips with everything that directors can do, this is a really great set of resources to show you exactly how to get around, parts of directors. And thank you, Kevin, for the link so that you can just move along, into it and check it out for yourself. Next up, we have Wrike, who is our CTO, talking through a very special edition of what's in your doc. If you haven't heard of what's in your doc, what's in your doc is another show that we usually have on directors TV with different people who tell us through the tools that they use, in everyday, life for their jobs and we are so lucky that Wrike has got one for this, month so I'm gonna pass it over to Wrike.\u003C/p>\u003Cp>Speaker 3: Hey. How's it going? So for my daily devices, I use a MacBook Pro in 2021, an iPad Pro, and an iPhone 15 Pro Max. Most of my day to day consists of a split between, you know, doing a lot of meetings, programming, and a bit of design on the side. For those meetings, I use a Sony Alpha 64100 with a 16 mil Sigma Prime Lens.\u003C/p>\u003Cp>I do have an Elgato prompter to make it look like I'm looking at you instead of a screen off to the side, and I use a Blue Yeti mic, a Yeti x. I also use a Logi Lytra Glow for a little bit of extra light. And when the meetings are a little bit less interesting, I have a little Tetris mic recart on my desk, off screen. Don't tell anyone. When it comes to software, let's take a look at the dock left to right first.\u003C/p>\u003Cp>1st and foremost, I use Arc as a browser. I am the type of person that doesn't really do more than 5 taps open at a time, or I'm losing my mind. So Arcs' organization tools for renaming tabs, making folders, having spaces has really been a game changer for my productivity in that space. Although, I do have to admit, tabs that go to a different space go there to die and then get deleted anyways after a long while. For the basic snail calendar reminders, I use the Apple standard apps.\u003C/p>\u003Cp>I have tried every new calendar app that comes out. I love experimenting with them. But at the end of the day, I always find myself coming back to the default ones as they basically do what I need them to do and nothing more. Right? They're very pleasing.\u003C/p>\u003Cp>At Directus, we use Notion for note taking. In meetings, we have a bunch of different teams and a bunch of documents. It's a bit unstructured, but that's kind of the beauty of Notion. And we use Linear for task management. So Linear, think of it as GitHub Issues as a separate app, which has really elevated our productivity in the especially the product team.\u003C/p>\u003Cp>Then we use Slack for communication with the team internally, and we use Discord for communication with the larger community of users, of Directus. When I'm programming, I similarly to calendar apps. I've tried various different apps. I recently tried Zed. I've been using some of the JetBrains stuff.\u003C/p>\u003Cp>I've been on Code at 2 way back in the day when that was a thing. I've tried Nova. I always come back to Versus Code for the last couple of years. I've set that up very customized. I'm one of the the weird ones that does it in light mode, with the 3 tap space setting.\u003C/p>\u003Cp>And I use Iterm on the side because I cannot deal with the built in terminal. Just a personal preference thing. For debugging databases, I'm a huge fan of TablePlus. So TablePlus is kind of PHPMyAdmin as a native app, but they support effectively every database under the sun, which is very, very nice. You have to learn the tool once, and then you can just use it, which is great for raw database management.\u003C/p>\u003Cp>So direct, you know, columns or insertions into databases. On the flip side of that, I use Repay API, previously known as Paul, as an API debugging tool. So it's kinda similar to Postman or Hopscotch or some of those tools, but has a magnative app. I'm still a UX designer at heart, so apps looking nice is a huge reason for me to use them over over something else. Then we use Figma for all the design files.\u003C/p>\u003Cp>I am a very big fan of FigJam as well for quick notes and figuring out projects and doing more product design or user experience design. And then last but not least, we have Reader and Ivory. So Reader is an RSS faint reader. I use that to stay up to date with a bunch of blogs and personal blogs that I like to follow for, any news in the tech industry or improvements to the web platform or any other interesting developments. And I use Ivory as my client for the VedaVerse.\u003C/p>\u003Cp>So I'm part of the Fostodon server right now, and I try to follow, again, interesting people on the Internet. And then last but not least, on the doctor's Spotify, I always got music playing. I mostly listen to everything is what I'm realizing now. There's there's a lot of pop funky stuff in there. There's a lot of alt rock in there, and there's a lot of a little bit of pop sometimes if I just wanna focus a little bit and not care about music.\u003C/p>\u003Cp>Sometimes I have my own stuff on repeat to get the numbers up because you gotta game the system a little bit. Outside of the dock, I am a huge fan of a new app that just came out from Syndra called Scratchpad, which is just a little icon in your your menu bar. The only thing it does is it just opens a tiny note, and and it goes away when you click it again. So it's just great for a quick in the middle of a meeting, I have to jot something down, I don't know where it goes. I need to have something to write in within a split second.\u003C/p>\u003Cp>Fantastic for that. I use one password for all of the password management. Couldn't do without. Use CleanShot for screenshots and screen recordings. Highly recommend that one.\u003C/p>\u003Cp>That is that is one I cannot do without nowadays. And then the main thing that I install on every machine every time is called Paste. So it's a clipboard manager, similar to the reasoning behind Repet API. It's a MEC native thing. It feels like it was designed by Apple, and I'm sure they get shirts at some point, and I'd be set when that happens.\u003C/p>\u003Cp>To write. What else? What else do we have here? Oh, yeah. So the the the hobby stops.\u003C/p>\u003Cp>Sorry. Outside of work, I like to write and play a lot of music. So one thing I have right off of my desk here is just there's an acoustic guitar sitting ready to go in a demo at any moment. You see, of course, you know, some guitars on the wall. There's there's too many in my apartment here.\u003C/p>\u003Cp>For that, on the computer, I use Logic Pro Reader Report through my, Line 6 HX Stomp XL as an interface. And other than that, what we got going on in here? Oh, yeah. Less little desk gadgets. I brought it up.\u003C/p>\u003Cp>Before, I have a little Tetris MicroCard. I don't know if they still make them, but this this gets used a little bit too much in the day. Great way to take a little break. I have an analog Nixie clock sitting here on my desk as a way to keep the time as if that's not a thing on my computer. And one sort of guilty pleasure that I thought it was gonna be stupid, but I cannot do without nowadays, is an Amber mug.\u003C/p>\u003Cp>They're the most again, when I when I bought it, I thought it was gonna be stupid as hell in Ellen's books. So recommend one of those as well. I have a little, Belkin wireless charger to prop my phone up and a Sonos on the desk for all of the music that I previously mentioned. And I think that's everything I have around me.\u003C/p>\u003Cp>Speaker 0: Alright. Amazing. Thanks so much, Royce, for taking us through What's in Your Doc. And if you want to see the other episodes, they're really great for finding new recommendations. I believe Kevin has put a link, over for you in the chat as well.\u003C/p>\u003Cp>I know we shouldn't have favorite segments, but personally, my favorite segment isn't it is the next one. We have the community showcase, and for this month, we have, Manuel Yang talking through website dotai, a chat to edit page builder. So I'm gonna hand over to Manuel now.\u003C/p>\u003Cp>Speaker 4: Hey, everyone. I'm Manuel, and I'm building website dotai, a chat to edit page builder. You can now skip the learning curve and chat with your landing page, just like you would with a developer. You can add advanced widgets or fancy animations super easily without learning how to code. So what was the motivation for me?\u003C/p>\u003Cp>I used a lot of the page builders out there, such as, like, Webflow, Framer, Bubble. And I've also implemented one myself for users at the company I currently work at. We use it to build out interactive article style pages for sponsored content. And I realized the biggest bottleneck was the learning curve needed to actually use the tool. Right?\u003C/p>\u003Cp>For example, with, these no code builders, you still need to know how basic CSS works, right? Such as padding or Flexbox. And most users that are trying to build out a page won't have this knowledge. So the goal was to provide a way a user can use natural language to build out a page while still giving them their traditional editing tools. So So the idea is that this makes it very flexible and gives you the benefit of iterating quickly without needing to wait for the back and forth with a developer where communication challenges can also delay timelines.\u003C/p>\u003Cp>You also get a lot of the AI features out of the box, such as copywriting so that you don't need to switch Windows copy and paste text. For example, if you want to rephrase all text in your landing page, you can literally just chat, rephrase all text in the landing page, have a more friendly tone, and then boom, press enter. So all that pretty cool stuff. Right? So, how did I approach building it?\u003C/p>\u003Cp>Yeah. When I started the build, I already knew Direct This was gonna be a part of Stacks since, you know, a page builder will need some sort of content management system to persist and edit the data. And I've also always been a fan of Directus since they used their front end framework. Vuego has been my go tos that first came out. I think it's pretty dope.\u003C/p>\u003Cp>However, one side, one downside of the developing modules inside of Directus is the lack of depth tool integration. And I know I can just copy over the source code, but it's been pretty nice and clean to be able to just run a Docker image with some extensions. Right? I've also considered using Supabase instead, but realized it was a bit of overkill for my needs, and it would a lot of it would add a lot of extra complexity I didn't need. And I needed something I can self host pretty easily and Directus provided everything I needed.\u003C/p>\u003Cp>Yeah. So for biggest challenges, for me was the prompts. Right? Getting the right prompt and iterating over it to get exactly how I want it to be was pretty tough. I'm sure most people who can develop what AI knows that getting consistent results can be a challenge sometimes.\u003C/p>\u003Cp>And I originally implemented this in a way where I would have the AI spit out Graef JS specific JavaScript code, which should get executed in the browser. But now I'm moving towards more of a RAG and artifact style architecture, which I think will be a lot more robust. So looking forward to that. And then probably the biggest challenge for me is marketing. Right?\u003C/p>\u003Cp>As a dev, I start with zero marketing skills, but was forced to learn in order to get the word out. And I'm doing things like build in public and some email marketing, but, you know, I'm still learning as I go. It's been pretty fun though. And, looking forward to other techniques that I can learn. But, yeah, in terms of expansions, yeah, I mean, I'm always looking for someone to help out with marketing or design.\u003C/p>\u003Cp>I do have a call with a designer sometime in the next week to try to see what I can do to improve the UI and the UX. But, yeah, always open to more users to help me test out the, app as well, make sure it aligns what you guys are looking for. Because right now, I'm just you know, maybe I can be a little tunnel vision sometimes, but just building it to what I need. But, yeah, that's about it. Thanks, guys.\u003C/p>\u003Cp>Bye.\u003C/p>\u003Cp>Speaker 0: Alright. Thanks so much, Manuel, for attending to take part. We appreciate it. And it is always, very cool to see what people are building with directors. If you have been inspired and want to see more, check out the I Made This channel in Discord.\u003C/p>\u003Cp>Lots of people are talking through what they're building and what's especially nice in my opinion is that often they will come back and update us too so we get to see kind of the work in progress and how people are getting along. Next up, we have Kevin with a short tutorial on complex media transformations. So I will pass over to him.\u003C/p>\u003Cp>Speaker 1: We see a ton of questions come through from the community. And when we see questions repeated, we tend to create some kind of content to answer that question to help you and us answer it in future. And this time, we're gonna talk about advanced image transformation. Now this is all rooted in the node Sharp library, but before we get on to that, let me show you a little bit about how less advanced, custom image transformation actually work. So, in case you didn't already know, every single image, every single file stored in your Director's project can be accessed via the URL of the director's project/assets/and then the ID of the file itself.\u003C/p>\u003Cp>And here we have this nice image of boats. It's a portrait image. And here in the docs, we see inside of the file, API reference that we can request a thumbnail or an image transformation. Now out of the box, Directus automatically, or for free I suppose, implements a set of very common transformations, things like fit, width and height, quality, and file format. So, let's just show how these work.\u003C/p>\u003Cp>Here we see width, so we can go width equals, I don't know, 300. And we see that the image is a lot smaller. It's 300 pixels wide. And what's actually happening there is when we're making that request for the first time, Directus Inn in the background is going to use the Node Sharp Image Transformation Library, transform the asset, store it in our asset storage, and then return it. And then if we request it a second time, it isn't gonna do the processing.\u003C/p>\u003Cp>Instead, it's just going to serve up the already transformed image, which is a lot more performant. But we can add as many, as many, of these custom transformations as we want. But this is only a small number of what is offered. Today, we're gonna talk about advanced transformations. So Directus exposes the Node Sharp library.\u003C/p>\u003Cp>Let's take a little look at this here. And allows us to use it via a transforms query parameter. These are things like rotating an image, flipping or flopping. You can blur it. There's also color manipulation, things like tinting towards a provided color and so on.\u003C/p>\u003Cp>And what I wanna help you do is look at this API reference that Sharp offer and understand how to turn that into a Directus, advanced transformation. So let's start with rotate. So the only thing that is strictly required here is an angle, which is a number here. It is called rotate. Right?\u003C/p>\u003Cp>The actual, the actual, function itself, the operation itself is called rotate, and it requires an angle. Keep that in your mind. So let's use the instead of width, let's use transforms. And transforms is a 2 d array. So we have to start with an outer array and each operation has an array inside of it.\u003C/p>\u003Cp>First value is the name of the operation, so rotate. And the next one is the amount we're rotating by. Let's say 90. And we see that the returned image there has been rotated 90 degrees. And we can add as many of these as we want.\u003C/p>\u003Cp>We have blur, for example, was in there as well. And this is a value, I think, between 0 a100, so we'll say 10. There you go. And we see there's a slight blur there. Let me just double check that it was out of a 100.\u003C/p>\u003Cp>Speaker 4: Doesn't specify.\u003C/p>\u003Cp>Speaker 1: Options sigma. A value between 0.3a1000. Not entirely sure. Not entirely sure. Anyway, that's that's the blur.\u003C/p>\u003Cp>Let's do another one here. Let's do, a flip. So we're gonna rotate it, then we're gonna flip it. And notice here that there was no additional parameters. That's because in preparing for this, I knew that it was just a Boolean.\u003C/p>\u003Cp>So you just need to provide there are no, like, options inside of that. Let's take a look at color manipulation as well. So we can provide a tint, and that tint can either be an object with an RGB value or a string which I believe passed by the colour module. Let's take a look. Which I believe can just be any, yeah, here we go.\u003C/p>\u003Cp>Can be any string here for CSS color. That's what's used under the hood by by Sharp. So if we go back into this, let's add one more here. Let's add a tint. And I think the easiest thing to do here will be just to pass a string, rgb, 255,\u003C/p>\u003Cp>Speaker 4: 0. Sure. And\u003C/p>\u003Cp>Speaker 1: again, that's gonna take a moment just to whoops. That's very red. It's gonna take a moment the first time, but on subsequent loads, it should be very, very quick, because that asset has already been created. Now this is a really long URL, but hopefully you see how to apply custom image transformations. The only other thing I kinda wanted to add here was just a note that you can also, generate them using the SDK.\u003C/p>\u003Cp>So here you can provide read asset role, the ID, and then you can use an array or a nested array of transforms in a little bit of a nicer way there. And this will return the full URL. So if you don't wanna construct it yourself manually each time, this is another option as well. So hopefully oh, I gotta get that off my screen. Hopefully, that gives you a little bit of an indication on how you can take the Sharp API reference and apply it to Directus using the transforms query parameter.\u003C/p>\u003Cp>Thanks for joining me, and I will hand back over to Beth.\u003C/p>\u003Cp>Speaker 2: We've got a new segment for this month's changelog called the reading list. We've asked some of the directors team for resource suggestions on things that they found interesting and educational, and so we've got some to share with you. The first is Charles Fillard's blog, there's no percentage 20, as in space, in file system naming and some of the logic behind that. Secondly, we've got notes on buttonedown. Com and their migration from buttonedown.email to buttonedown.com, including the process notes.\u003C/p>\u003Cp>We also have how to write a git commit message and why writing them well matters. We also have Inclusive Components, a blog about designing inclusive web interfaces piece by piece. And lastly, we have the 12 Factor app talking through a methodology for building web apps. Those are all of our reading suggestions for this month, if you would like to read them yourself we'll share the links in the comments on the deck at the end.\u003C/p>\u003Cp>Speaker 0: Alright. And I can see as we go that Kevin is actually putting the links down in the chat for you. So hopefully, you can check them out. And, if you've heard of them before we'd love to know that. Let us know in the chat if these are resources you are familiar with.\u003C/p>\u003Cp>If they are new we highly recommend checking them out and if you've also got any resources that you think you, everyone else would like to also read and would be educational if you've learned something new this month or anytime really and you've got like a go through recommendation we'd love to hear from you, we'd love to hear what you go to you to get your knowledge that would be great. So yeah, anyone got any thoughts in the chat while we've got a few minutes we could definitely have a share, but yeah if not I think the the chat recommendations that we've just shared, the links are in there for you as well. And hopefully, we'll be bringing this back, monthly so we can build a nice collection of resources between the team and so you'll have lots of different, interests covered as well because we only had 5 to showcase, but there's lots more to come, I'm sure. Cool. While, we're waiting to see, I'll be around on chat, but in the meantime, we've got some thanks to give out.\u003C/p>\u003Cp>Speaker 2: We want to take a moment to thank all of the contributors since the last month's change log, which encapsulates 11.0.2 to 11.1.0. The start to interview, he's so kindly given your time to improve the thorough of this project, and\u003C/p>\u003Cp>Speaker 0: we want to thank each\u003C/p>\u003Cp>Speaker 2: of you individually. So a massive thank you to Jun Hong for fixing bookmark duplication when rapidly switching between bookmarks, preventing a crash in the data studio when switching to the date type while configuring date time interface, improving the grid layout for radio and checkboxes interface, and fixing the length of icon fields in system collections, allowing to use icons with long names. Thank you to Azeri for fixing a read only mutation to fields in the store via item draw. Fixing an issue with the 1st column would be missing when importing some CSV files, fixing a typo for invalid aggregate query parameter log, and finally fixing the notification for Synch file exports to be sent out to users without requiring any permissions on directed notifications. Thank you to Dominic for improving the WYSIWYG editor to hide the toolbar if no toolbar items are selected, for ensuring the open detail in the sidebar is persisted across site navigation and reloads, her browser tab, and for adding item count to the notification drawer.\u003C/p>\u003Cp>Thank you to Crowe for adding persisted default value and nullable during field schema updates. Thank you to Matt for introducing the user invite token TTL option allowing to configure the expiration of user invites. Thank you to SEM for improving selection label of the new tab checkbox in the HTML rich text editor. Thank you to Florian for fixing styling issues with the related values display. Thank you to Heiko for fixing the image tune menu toggle state indication in the block editor interface.\u003C/p>\u003Cp>Thank you to Bernard for fixing an issue that would cause local extensions built via workspaces to not be watched when extensions reload if active. Thank you to Gerard for fixing the generated open API specs to include post patch and delete path. Thank you to Eduard for fixing an outdated property name in their permissions typing. Thank you to Elle For fixing director's policy policy typescript declaration. And thank you to Andrew for fixing an issue that would cause Cloudinary to throw an inconsistent check sign.\u003C/p>\u003Cp>Thank you again to all of the, above people. You can see there's specific flow requests inside of the full release notes on GitHub. While we're saying thank you, I also want to give a massive thank you to the GitHub Sponsors for August. These are all of our amazing sponsors, who kindly financially contribute to their excellent development, and I want to give a special huge thank you to Clement and until this month as well.\u003C/p>\u003Cp>Speaker 0: All right that concludes the, thank yous for the contributors and the sponsors but lastly a massive thank you to you for, showing up and keeping us company and hopefully learning some new things about what is new with Directus for this month. We would absolutely love to see you again next month, for the same time. And on Thursday, so in 2 days' time, we also have another event, which is the regularly recurring request review. Oh, didn't mean to, like, triple, quadruple, illiterate that. The request review, It happens about every 2 weeks and, there is more information on the Discord events, now for the next 2 minimum if not more yet the regular recurring request review, Kevin.\u003C/p>\u003Cp>It's a lot of hours, but it's great. We go through and talk about, the request and what's going on and moving forward and exactly, Jonathan is hosting too. So yeah join us for that we hope you will be around, we always want feedback with the change log, as well so if you have any segments that you would like to request for this then we absolutely want to hear it. You can reach out to us in Discord and, yeah, hopefully we will see you next time. Thanks so much for joining.\u003C/p>","Welcome to the second version of the change log. If you didn't catch the last one, which was our very first one, welcome. Nice to have you here. The change log is where we go through what is new with directors this last month, and then we've also got some fun segments as well, so you're in for a treat, stick around. But the very first one is going to be Kevin taking it away with what is new with product, so hopefully you can hear this as well. Last week, we released Directus 11.1, and with it, a major new feature, which is useful for every Directus project but really impactful for users of Directus Cloud, where Directus runs on our infrastructure, and that feature is log streaming. Let me show you how it works. Okay. So here we have a system logs, kind of session already begun over here. And this is ultimately a debugging tool to help you understand what requests are being made in your Director's project. So as I click around, you will see here that logs are being shown over on the left hand side. And that, of course, also includes errors, that may be happening, so you can have a little bit more of an idea of how that's happening. You can click into any given request and get a little bit more information about it. And you can filter all of the logs here, by log level. By default they're all enabled. And if you're running a Node Directus instance, you can also specify which, which nodes or instances you want to see logs for. You can access this straight from your project settings here from Directus version 11.1.0, and you can change the logging style by changing the log style environment variable. Now, like always, we are open to feedback, so we'd love to see, your feedback about this feature, but hope you find it useful. In the last month, there have also been a couple of smaller releases of Directus before 11.1, and these included some notable new features. Firstly, we added support for listening on Unix sockets instead of a host and port, which allows for inter process communication. This was a community contribution, so thank you very much for that. You can now also use an environment variable to configure how long invites last before they expire. This is really helpful if you have to create invites, but they were tending to expire before being used. And finally, we have also added support for indices via a new is indexed field, which means you don't have to do this directly in your database anymore, but can instead use Directus. So that's what's new across Directus version 11.0.2, 11.0.3, and Directus 11.1.0. They're available now on Docker Hub and on Directus Cloud, and we can't wait for you to use them. Alright. Thank you so much for this time, Beth. I'm gonna hand back over to you. I'm gonna take you through what's new with Directors Labs. And as a quick reminder, Directors Labs is our experimental extension location where we regularly release new extensions we think are cool, and we hope you agree. So if I open up our demo for you and check that it's her. Yes. It is. Within flows, the first two to talk about are both email focused. Firstly, the liquid JS template operation, which enables dynamically generated content creation, such as personalized emails or really any scenario where you need to combine data with templates within a flow. Templates can be configured in the flow as a custom template or sourced from a collection. You can dynamically create different outputs based on multiple items. Here, the data is an array of users. You can use the liquid templating language, including loops and conditionals, injecting custom data in the data chain using these slightly altered liquid delimiters. If I go into the logs here, here is the output of the operation as well. That is the first, that runs into our second to talk about which is the resend email operation which integrates resend's email API into your director's flow. So here you, we are preparing the emails to send via resend, It's using the templates returned from the previous operation as the HTML property. And if we go into the resend operation itself, the operation supports most of resend's, endpoints along with the various options that we pass in the array from the previous operation. So there are 2 email focused operations. We go into insights for the panel demo, which are our next 3 to talk about. They look good. This one is the table in insight panel, which facilitates data from across multiple tables. And if you click an item, it'll open the director's editor drawer, but you can see here under socks. The next is the plausible analytics panel. This is part of a bundle and embeds your plausible analytics right within your director's project. I believe we're using the plausible sample data for this, which are the graphs that you're seeing. And lastly, another part of a bundle panel is the flow trigger panel that allows you to run manually trigger flows from right within a dashboard. If we go into content, you can also see the matching interfaces as part of the plausible analytics bundle and the flow trigger bundle. So you can trigger a flow or show a page level analytics dashboard as an interface as part of those as well. Next, we have the list interface, a small UI and UX, experiment for tags. So you can't reorder tags. You need to remove and re add them in order. This interface is a mix of tags and a repeater, and you can easily add and reorder strings. There's also full keyboard support with that as well. Lastly, I am gonna move location to show you. Here. Perfect. This is a global command palette now available along with a global search. So this module enables a command k shortcut that lets you navigate to collections, like so. Team. Not he, team. What else can I show you here? So, we can also search collections. So if we say search resources, like so, and I'd be looking for a spreadsheet, like so. And in the moment, if I wanted to create a new item, I could do that by create a to z partners. And, for example, this also allows run context aware actions like copying the API URL or running flows. It's gonna be a really nice tool for power users to navigate the data studio more quickly. I know I said lastly, but I have got a bonus for you. This isn't an extension, but it is for extension authors. We do often get asked how to customize the WYSIWYG and the block editor interfaces with new plugins, and our answer has been to adapt the interface into an extension and add the customizations yourself. While that isn't any different, we've now got these 2 interfaces, available as boilerplate extensions with guides on adding plugins. This will get you started much quicker and let you create the functionality you need. With all of these extensions, we hope that you find them useful. If you have any thoughts on them and you've got feedback, we'd love to hear from it. You can find all of these extensions in the directors lab slash extensions repo on GitHub. We have new content this all right, that is the extensions for this month. Hopefully you can still all hear me again when I change between, so the next step sorry, yes, amazing, we also have, new content for you so, we have on Directus TV which for the people that might not have heard about it you are already on it because of the link, so congrats. You're already in the right place. Directors TV is where we have a whole bunch of educational and entertaining shows, and the latest one that we have just released the first few episodes of is Directors Academy. That is Kevin taking you through the different tools as part of Directors. Now if you use Directors all the time, this might not be the one for you. But if you are new or still getting to grips with everything that directors can do, this is a really great set of resources to show you exactly how to get around, parts of directors. And thank you, Kevin, for the link so that you can just move along, into it and check it out for yourself. Next up, we have Wrike, who is our CTO, talking through a very special edition of what's in your doc. If you haven't heard of what's in your doc, what's in your doc is another show that we usually have on directors TV with different people who tell us through the tools that they use, in everyday, life for their jobs and we are so lucky that Wrike has got one for this, month so I'm gonna pass it over to Wrike. Hey. How's it going? So for my daily devices, I use a MacBook Pro in 2021, an iPad Pro, and an iPhone 15 Pro Max. Most of my day to day consists of a split between, you know, doing a lot of meetings, programming, and a bit of design on the side. For those meetings, I use a Sony Alpha 64100 with a 16 mil Sigma Prime Lens. I do have an Elgato prompter to make it look like I'm looking at you instead of a screen off to the side, and I use a Blue Yeti mic, a Yeti x. I also use a Logi Lytra Glow for a little bit of extra light. And when the meetings are a little bit less interesting, I have a little Tetris mic recart on my desk, off screen. Don't tell anyone. When it comes to software, let's take a look at the dock left to right first. 1st and foremost, I use Arc as a browser. I am the type of person that doesn't really do more than 5 taps open at a time, or I'm losing my mind. So Arcs' organization tools for renaming tabs, making folders, having spaces has really been a game changer for my productivity in that space. Although, I do have to admit, tabs that go to a different space go there to die and then get deleted anyways after a long while. For the basic snail calendar reminders, I use the Apple standard apps. I have tried every new calendar app that comes out. I love experimenting with them. But at the end of the day, I always find myself coming back to the default ones as they basically do what I need them to do and nothing more. Right? They're very pleasing. At Directus, we use Notion for note taking. In meetings, we have a bunch of different teams and a bunch of documents. It's a bit unstructured, but that's kind of the beauty of Notion. And we use Linear for task management. So Linear, think of it as GitHub Issues as a separate app, which has really elevated our productivity in the especially the product team. Then we use Slack for communication with the team internally, and we use Discord for communication with the larger community of users, of Directus. When I'm programming, I similarly to calendar apps. I've tried various different apps. I recently tried Zed. I've been using some of the JetBrains stuff. I've been on Code at 2 way back in the day when that was a thing. I've tried Nova. I always come back to Versus Code for the last couple of years. I've set that up very customized. I'm one of the the weird ones that does it in light mode, with the 3 tap space setting. And I use Iterm on the side because I cannot deal with the built in terminal. Just a personal preference thing. For debugging databases, I'm a huge fan of TablePlus. So TablePlus is kind of PHPMyAdmin as a native app, but they support effectively every database under the sun, which is very, very nice. You have to learn the tool once, and then you can just use it, which is great for raw database management. So direct, you know, columns or insertions into databases. On the flip side of that, I use Repay API, previously known as Paul, as an API debugging tool. So it's kinda similar to Postman or Hopscotch or some of those tools, but has a magnative app. I'm still a UX designer at heart, so apps looking nice is a huge reason for me to use them over over something else. Then we use Figma for all the design files. I am a very big fan of FigJam as well for quick notes and figuring out projects and doing more product design or user experience design. And then last but not least, we have Reader and Ivory. So Reader is an RSS faint reader. I use that to stay up to date with a bunch of blogs and personal blogs that I like to follow for, any news in the tech industry or improvements to the web platform or any other interesting developments. And I use Ivory as my client for the VedaVerse. So I'm part of the Fostodon server right now, and I try to follow, again, interesting people on the Internet. And then last but not least, on the doctor's Spotify, I always got music playing. I mostly listen to everything is what I'm realizing now. There's there's a lot of pop funky stuff in there. There's a lot of alt rock in there, and there's a lot of a little bit of pop sometimes if I just wanna focus a little bit and not care about music. Sometimes I have my own stuff on repeat to get the numbers up because you gotta game the system a little bit. Outside of the dock, I am a huge fan of a new app that just came out from Syndra called Scratchpad, which is just a little icon in your your menu bar. The only thing it does is it just opens a tiny note, and and it goes away when you click it again. So it's just great for a quick in the middle of a meeting, I have to jot something down, I don't know where it goes. I need to have something to write in within a split second. Fantastic for that. I use one password for all of the password management. Couldn't do without. Use CleanShot for screenshots and screen recordings. Highly recommend that one. That is that is one I cannot do without nowadays. And then the main thing that I install on every machine every time is called Paste. So it's a clipboard manager, similar to the reasoning behind Repet API. It's a MEC native thing. It feels like it was designed by Apple, and I'm sure they get shirts at some point, and I'd be set when that happens. To write. What else? What else do we have here? Oh, yeah. So the the the hobby stops. Sorry. Outside of work, I like to write and play a lot of music. So one thing I have right off of my desk here is just there's an acoustic guitar sitting ready to go in a demo at any moment. You see, of course, you know, some guitars on the wall. There's there's too many in my apartment here. For that, on the computer, I use Logic Pro Reader Report through my, Line 6 HX Stomp XL as an interface. And other than that, what we got going on in here? Oh, yeah. Less little desk gadgets. I brought it up. Before, I have a little Tetris MicroCard. I don't know if they still make them, but this this gets used a little bit too much in the day. Great way to take a little break. I have an analog Nixie clock sitting here on my desk as a way to keep the time as if that's not a thing on my computer. And one sort of guilty pleasure that I thought it was gonna be stupid, but I cannot do without nowadays, is an Amber mug. They're the most again, when I when I bought it, I thought it was gonna be stupid as hell in Ellen's books. So recommend one of those as well. I have a little, Belkin wireless charger to prop my phone up and a Sonos on the desk for all of the music that I previously mentioned. And I think that's everything I have around me. Alright. Amazing. Thanks so much, Royce, for taking us through What's in Your Doc. And if you want to see the other episodes, they're really great for finding new recommendations. I believe Kevin has put a link, over for you in the chat as well. I know we shouldn't have favorite segments, but personally, my favorite segment isn't it is the next one. We have the community showcase, and for this month, we have, Manuel Yang talking through website dotai, a chat to edit page builder. So I'm gonna hand over to Manuel now. Hey, everyone. I'm Manuel, and I'm building website dotai, a chat to edit page builder. You can now skip the learning curve and chat with your landing page, just like you would with a developer. You can add advanced widgets or fancy animations super easily without learning how to code. So what was the motivation for me? I used a lot of the page builders out there, such as, like, Webflow, Framer, Bubble. And I've also implemented one myself for users at the company I currently work at. We use it to build out interactive article style pages for sponsored content. And I realized the biggest bottleneck was the learning curve needed to actually use the tool. Right? For example, with, these no code builders, you still need to know how basic CSS works, right? Such as padding or Flexbox. And most users that are trying to build out a page won't have this knowledge. So the goal was to provide a way a user can use natural language to build out a page while still giving them their traditional editing tools. So So the idea is that this makes it very flexible and gives you the benefit of iterating quickly without needing to wait for the back and forth with a developer where communication challenges can also delay timelines. You also get a lot of the AI features out of the box, such as copywriting so that you don't need to switch Windows copy and paste text. For example, if you want to rephrase all text in your landing page, you can literally just chat, rephrase all text in the landing page, have a more friendly tone, and then boom, press enter. So all that pretty cool stuff. Right? So, how did I approach building it? Yeah. When I started the build, I already knew Direct This was gonna be a part of Stacks since, you know, a page builder will need some sort of content management system to persist and edit the data. And I've also always been a fan of Directus since they used their front end framework. Vuego has been my go tos that first came out. I think it's pretty dope. However, one side, one downside of the developing modules inside of Directus is the lack of depth tool integration. And I know I can just copy over the source code, but it's been pretty nice and clean to be able to just run a Docker image with some extensions. Right? I've also considered using Supabase instead, but realized it was a bit of overkill for my needs, and it would a lot of it would add a lot of extra complexity I didn't need. And I needed something I can self host pretty easily and Directus provided everything I needed. Yeah. So for biggest challenges, for me was the prompts. Right? Getting the right prompt and iterating over it to get exactly how I want it to be was pretty tough. I'm sure most people who can develop what AI knows that getting consistent results can be a challenge sometimes. And I originally implemented this in a way where I would have the AI spit out Graef JS specific JavaScript code, which should get executed in the browser. But now I'm moving towards more of a RAG and artifact style architecture, which I think will be a lot more robust. So looking forward to that. And then probably the biggest challenge for me is marketing. Right? As a dev, I start with zero marketing skills, but was forced to learn in order to get the word out. And I'm doing things like build in public and some email marketing, but, you know, I'm still learning as I go. It's been pretty fun though. And, looking forward to other techniques that I can learn. But, yeah, in terms of expansions, yeah, I mean, I'm always looking for someone to help out with marketing or design. I do have a call with a designer sometime in the next week to try to see what I can do to improve the UI and the UX. But, yeah, always open to more users to help me test out the, app as well, make sure it aligns what you guys are looking for. Because right now, I'm just you know, maybe I can be a little tunnel vision sometimes, but just building it to what I need. But, yeah, that's about it. Thanks, guys. Bye. Alright. Thanks so much, Manuel, for attending to take part. We appreciate it. And it is always, very cool to see what people are building with directors. If you have been inspired and want to see more, check out the I Made This channel in Discord. Lots of people are talking through what they're building and what's especially nice in my opinion is that often they will come back and update us too so we get to see kind of the work in progress and how people are getting along. Next up, we have Kevin with a short tutorial on complex media transformations. So I will pass over to him. We see a ton of questions come through from the community. And when we see questions repeated, we tend to create some kind of content to answer that question to help you and us answer it in future. And this time, we're gonna talk about advanced image transformation. Now this is all rooted in the node Sharp library, but before we get on to that, let me show you a little bit about how less advanced, custom image transformation actually work. So, in case you didn't already know, every single image, every single file stored in your Director's project can be accessed via the URL of the director's project/assets/and then the ID of the file itself. And here we have this nice image of boats. It's a portrait image. And here in the docs, we see inside of the file, API reference that we can request a thumbnail or an image transformation. Now out of the box, Directus automatically, or for free I suppose, implements a set of very common transformations, things like fit, width and height, quality, and file format. So, let's just show how these work. Here we see width, so we can go width equals, I don't know, 300. And we see that the image is a lot smaller. It's 300 pixels wide. And what's actually happening there is when we're making that request for the first time, Directus Inn in the background is going to use the Node Sharp Image Transformation Library, transform the asset, store it in our asset storage, and then return it. And then if we request it a second time, it isn't gonna do the processing. Instead, it's just going to serve up the already transformed image, which is a lot more performant. But we can add as many, as many, of these custom transformations as we want. But this is only a small number of what is offered. Today, we're gonna talk about advanced transformations. So Directus exposes the Node Sharp library. Let's take a little look at this here. And allows us to use it via a transforms query parameter. These are things like rotating an image, flipping or flopping. You can blur it. There's also color manipulation, things like tinting towards a provided color and so on. And what I wanna help you do is look at this API reference that Sharp offer and understand how to turn that into a Directus, advanced transformation. So let's start with rotate. So the only thing that is strictly required here is an angle, which is a number here. It is called rotate. Right? The actual, the actual, function itself, the operation itself is called rotate, and it requires an angle. Keep that in your mind. So let's use the instead of width, let's use transforms. And transforms is a 2 d array. So we have to start with an outer array and each operation has an array inside of it. First value is the name of the operation, so rotate. And the next one is the amount we're rotating by. Let's say 90. And we see that the returned image there has been rotated 90 degrees. And we can add as many of these as we want. We have blur, for example, was in there as well. And this is a value, I think, between 0 a100, so we'll say 10. There you go. And we see there's a slight blur there. Let me just double check that it was out of a 100. Doesn't specify. Options sigma. A value between 0.3a1000. Not entirely sure. Not entirely sure. Anyway, that's that's the blur. Let's do another one here. Let's do, a flip. So we're gonna rotate it, then we're gonna flip it. And notice here that there was no additional parameters. That's because in preparing for this, I knew that it was just a Boolean. So you just need to provide there are no, like, options inside of that. Let's take a look at color manipulation as well. So we can provide a tint, and that tint can either be an object with an RGB value or a string which I believe passed by the colour module. Let's take a look. Which I believe can just be any, yeah, here we go. Can be any string here for CSS color. That's what's used under the hood by by Sharp. So if we go back into this, let's add one more here. Let's add a tint. And I think the easiest thing to do here will be just to pass a string, rgb, 255, 0. Sure. And again, that's gonna take a moment just to whoops. That's very red. It's gonna take a moment the first time, but on subsequent loads, it should be very, very quick, because that asset has already been created. Now this is a really long URL, but hopefully you see how to apply custom image transformations. The only other thing I kinda wanted to add here was just a note that you can also, generate them using the SDK. So here you can provide read asset role, the ID, and then you can use an array or a nested array of transforms in a little bit of a nicer way there. And this will return the full URL. So if you don't wanna construct it yourself manually each time, this is another option as well. So hopefully oh, I gotta get that off my screen. Hopefully, that gives you a little bit of an indication on how you can take the Sharp API reference and apply it to Directus using the transforms query parameter. Thanks for joining me, and I will hand back over to Beth. We've got a new segment for this month's changelog called the reading list. We've asked some of the directors team for resource suggestions on things that they found interesting and educational, and so we've got some to share with you. The first is Charles Fillard's blog, there's no percentage 20, as in space, in file system naming and some of the logic behind that. Secondly, we've got notes on buttonedown. Com and their migration from buttonedown.email to buttonedown.com, including the process notes. We also have how to write a git commit message and why writing them well matters. We also have Inclusive Components, a blog about designing inclusive web interfaces piece by piece. And lastly, we have the 12 Factor app talking through a methodology for building web apps. Those are all of our reading suggestions for this month, if you would like to read them yourself we'll share the links in the comments on the deck at the end. Alright. And I can see as we go that Kevin is actually putting the links down in the chat for you. So hopefully, you can check them out. And, if you've heard of them before we'd love to know that. Let us know in the chat if these are resources you are familiar with. If they are new we highly recommend checking them out and if you've also got any resources that you think you, everyone else would like to also read and would be educational if you've learned something new this month or anytime really and you've got like a go through recommendation we'd love to hear from you, we'd love to hear what you go to you to get your knowledge that would be great. So yeah, anyone got any thoughts in the chat while we've got a few minutes we could definitely have a share, but yeah if not I think the the chat recommendations that we've just shared, the links are in there for you as well. And hopefully, we'll be bringing this back, monthly so we can build a nice collection of resources between the team and so you'll have lots of different, interests covered as well because we only had 5 to showcase, but there's lots more to come, I'm sure. Cool. While, we're waiting to see, I'll be around on chat, but in the meantime, we've got some thanks to give out. We want to take a moment to thank all of the contributors since the last month's change log, which encapsulates 11.0.2 to 11.1.0. The start to interview, he's so kindly given your time to improve the thorough of this project, and we want to thank each of you individually. So a massive thank you to Jun Hong for fixing bookmark duplication when rapidly switching between bookmarks, preventing a crash in the data studio when switching to the date type while configuring date time interface, improving the grid layout for radio and checkboxes interface, and fixing the length of icon fields in system collections, allowing to use icons with long names. Thank you to Azeri for fixing a read only mutation to fields in the store via item draw. Fixing an issue with the 1st column would be missing when importing some CSV files, fixing a typo for invalid aggregate query parameter log, and finally fixing the notification for Synch file exports to be sent out to users without requiring any permissions on directed notifications. Thank you to Dominic for improving the WYSIWYG editor to hide the toolbar if no toolbar items are selected, for ensuring the open detail in the sidebar is persisted across site navigation and reloads, her browser tab, and for adding item count to the notification drawer. Thank you to Crowe for adding persisted default value and nullable during field schema updates. Thank you to Matt for introducing the user invite token TTL option allowing to configure the expiration of user invites. Thank you to SEM for improving selection label of the new tab checkbox in the HTML rich text editor. Thank you to Florian for fixing styling issues with the related values display. Thank you to Heiko for fixing the image tune menu toggle state indication in the block editor interface. Thank you to Bernard for fixing an issue that would cause local extensions built via workspaces to not be watched when extensions reload if active. Thank you to Gerard for fixing the generated open API specs to include post patch and delete path. Thank you to Eduard for fixing an outdated property name in their permissions typing. Thank you to Elle For fixing director's policy policy typescript declaration. And thank you to Andrew for fixing an issue that would cause Cloudinary to throw an inconsistent check sign. Thank you again to all of the, above people. You can see there's specific flow requests inside of the full release notes on GitHub. While we're saying thank you, I also want to give a massive thank you to the GitHub Sponsors for August. These are all of our amazing sponsors, who kindly financially contribute to their excellent development, and I want to give a special huge thank you to Clement and until this month as well. All right that concludes the, thank yous for the contributors and the sponsors but lastly a massive thank you to you for, showing up and keeping us company and hopefully learning some new things about what is new with Directus for this month. We would absolutely love to see you again next month, for the same time. And on Thursday, so in 2 days' time, we also have another event, which is the regularly recurring request review. Oh, didn't mean to, like, triple, quadruple, illiterate that. The request review, It happens about every 2 weeks and, there is more information on the Discord events, now for the next 2 minimum if not more yet the regular recurring request review, Kevin. It's a lot of hours, but it's great. We go through and talk about, the request and what's going on and moving forward and exactly, Jonathan is hosting too. So yeah join us for that we hope you will be around, we always want feedback with the change log, as well so if you have any segments that you would like to request for this then we absolutely want to hear it. You can reach out to us in Discord and, yeah, hopefully we will see you next time. Thanks so much for joining.","published",[135,146,153],{"people_id":136},{"id":137,"first_name":138,"last_name":139,"avatar":140,"bio":141,"links":142},"82b3f7e5-637b-4890-93b2-378b497d5dc6","Kevin","Lewis","a662f91b-1ee9-4277-8c9d-3ac1878e44ad","Director of Developer Experience at Directus",[143],{"url":144,"service":145},"https://directus.io/team/kevin-lewis","website",{"people_id":147},{"id":148,"first_name":149,"last_name":150,"avatar":151,"bio":152,"links":8},"3dec7812-3664-4d2d-93f8-efc876988cc7","Beth","Loft","1277761e-2a3b-4103-b29b-ffc97e8370f5","Developer Experience at Directus",{"people_id":154},{"id":155,"first_name":156,"last_name":157,"avatar":158,"bio":159,"links":160},"23ebcf2c-4374-4f5c-8198-f8ad497fd856","Rijk","van Zanten","7ef9652f-3835-432c-a43a-c5fe13001f31","CTO of Directus",[161],{"url":162,"service":145},"https://directus.io/team/rijk-van-zanten",[],{"id":165,"number":166,"year":167,"episodes":168,"show":173},"093d2e2b-8006-4f05-a00c-22f124332e56",1,"2024",[169,122,170,171,172],"07591f9d-8187-47fd-9904-92eda024043a","a5361f29-432a-4602-ae17-57da36b48d19","cfcf16eb-9630-4423-9f83-0fe27ef57f85","11513676-0e94-4407-bee0-387ae2bca2ac",{"title":174,"tile":175},"The Changelog","de6f3b4b-3c36-4142-819b-3312690e08a1",{"title":8,"meta_description":8},{"id":170,"slug":178,"season":165,"vimeo_id":179,"description":180,"tile":181,"length":8,"resources":8,"people":8,"episode_number":182,"published":183,"title":184,"video_transcript_html":185,"video_transcript_text":186,"content":187,"seo":188,"status":133,"episode_people":189,"recommendations":194},"3-october-2024","1019714535","Join us for The Changelog, taking you through the month’s Directus updates including product updates, new content and community contribution highlights. This month's show includes a community showcase of a form builder from David, Carmen taking you through a docs preview and Kevin with a tutorial on AI web scraping API with flows.\n\n","f3b9ac10-251f-4708-ae07-51a29d1868b6",3,"2024-10-16","October 2024","\u003Cp>Speaker 0: Alright. Hello, everyone. Hopefully, you can all hear me, and I am gonna take a pause and just check that that is the case. So if someone could let me know, that would be great. Oh, I was excited.\u003C/p>\n\u003Cp>Carmen's saying hello, and I'm still gonna wait. Loud and clear. Perfect. Thank you so much, Kevin. Welcome to October's version of the change log from Directus.\u003C/p>\n\u003Cp>If you're new here or if you've, joined us before, welcome. I hope you're having the most perfect day. I hope your day is not too hot, not too cold. It's like the crispest, best version of the day because that is what you deserve for joining us. Thank you for for being here.\u003C/p>\n\u003Cp>We have a great show for you planned. We've got some updates from Brian and myself from product and extensions, we've got Carmen with a docs update for what is upcoming and that's super exciting, we have Kevin with a quick connect tutorial. We've got the community showcase, and we've got a whole bunch of different things. I am joining from London. I would love to know, where you are all joining from.\u003C/p>\n\u003Cp>I can see that the chat is already busy. That is great. Please continue. We have team members in there answering all your questions. So, yeah, if you've got anything that you are thinking about, let us know based on anything we are saying.\u003C/p>\n\u003Cp>We also have the general chat in Discord for afterwards if it comes to you and you're like oh I should have said that feel free to keep the conversation moving there as well. Did anyone say where they're joining from so far? I see a lot of hellos. Oh, Netherlands, North Germany. Hello.\u003C/p>\n\u003Cp>Welcome. Welcome. Granada, Spain, Ukraine, Austria, Egypt, Sardinia, Nigeria. Amazing. Welcome, France too.\u003C/p>\n\u003Cp>Hello. Hello. Super happy for you all to be joining us. I am gonna hand over to you, Bryant, with some product updates for the first start of the show. So hope you enjoy them.\u003C/p>\n\u003Cp>Speaker 1: Brian here for Directus, and I've got 2 quick updates for you. Version 11.1.1 dropped last week with a load of bug fixes, optimizations, and a few dependency updates. I just wanted to give a quick shout out to our engineering team and the community members who are on fire at improving the Directus experience for you, for me, and the entire Directus community. There is however one breaking change. The underlying SendGrid package we were using is no longer maintained.\u003C/p>\n\u003Cp>So rather than risk your security or some type of crazy exploit, we've removed it. Now if you're using SendGrid as your direct to email provider, you'll want to switch up your config to use SMTP instead of their API. For the full list of fixes and updates, check the release notes in the Directus repository. Now on to my favorite update, probably because I had a little hand in shipping these. There's no bias here.\u003C/p>\n\u003Cp>I'm super excited to announce Directus cloud templates. These are handcrafted Directus instances with data models, permissions, flows, all the niceties already built out for you. Now, whenever you spin up a new project for your organization or your client inside Directus Cloud, you can get to 80% done by clicking one button. There are currently 3 templates to choose from. Simple CMS, which is great for your next website build.\u003C/p>\n\u003Cp>It's configured with the dynamic page builder, blog posts, menus, and even dynamic forms. Your content editors are going to love this one. Next up, we have simple CRM, which is the perfect starting point for your own custom Salesforce or HubSpot. It includes the standard fare, like organizations and contacts, deals and activities, and a configurable pipeline. Last but not least, we have simple ecommerce, which showcases a small online apparel or t shirt shop build out.\u003C/p>\n\u003Cp>The data model includes products, orders, customers, and it even handles more complex scenarios like product variance, which account for all the color and size combinations automatically. So hop on to Directus Cloud, spin up an instance, check them out, and as always, send us your feedback because we'll be releasing more of these templates in the coming months. And back over to you, Beth.\u003C/p>\n\u003Cp>Speaker 0: I'm going to demonstrate each of the new extensions in Directus Labs this month. As a reminder Directus Labs is our team's experimental org in GitHub which regularly publishes new extensions we think are cool. The Gantt chart layout displays items in a collection in a Gantt chart helping those of you who use Directus for project management and task management. When configuring the layout specify a label that you want displayed on each task, a start date and an end date, and optionally a dependency field which will draw dependency lines in a chart. You can specify the zoom in as granular as an hour and as broad as a year.\u003C/p>\n\u003Cp>You can download it now in the marketplace. A calculated fields interface is the most upvoted open feature request in the directors project and today we are releasing it as an extension. It allows you to write a formula and the value of the interface will be automatically computed and shown. It supports the full set of functions provided by formula. Js and the majority of JavaScript operators that work for numbers and strings.\u003C/p>\n\u003Cp>It also supports relational fields and we pass formulas to ensure they are only running allowed functions which is important for security. A couple of things that are important to note values here are only visible in the interface and not in API responses. We've had this extension in the works for a while, but just a couple of days ago, a community member, Judah Sullivan, released the Directus AutoGen Extension which you might also want to check out as it's similar Both are available in the marketplace The API metric panel can be used to display a value from an external API, for example, that could be the number of docker downloads or sales or followers on social media platforms As you can see here we are making a web request to get docker metrics. We could also provide custom headers or a request body if required. Then you specify the path of the value you want to display.\u003C/p>\n\u003Cp>It's a nice responsive panel that allows you to get an overview of your business. You can download this extension directly from GitHub or NPM. Lastly, one of our core team members, Tim, in his spare time released a pair of flow operations which allows authentication and permission checking. The first operation allows you to check whether the flow was triggered by a user with admin access, user access, or public access. The operation will return true if authenticated or else throw an error.\u003C/p>\n\u003Cp>The second operation allows you to select a collection and it will return true if a user has read permissions in that collection. You can check this out over on github and npm we hope you enjoy using all these extensions Gantt chart layout, calculated fields interface, the API metric panel and tims authentication and permission checks let's bring my camera back up and I'll see how you're doing. I brought my camera back up hopefully you can see me again. Yeah, as I said we are super excited for everything we've just announced. Out of the extensions we've just talked about or if there are any other extensions that you regularly use in the marketplace, now is a good time to let us know in the chat.\u003C/p>\n\u003Cp>I mean for me as someone who really really likes project management efficiency the Gantt chart layout is super exciting and Kevin has just put in the chat as well the extension link for you to check them out for yourself. Tim, I did see you. Brace look also same person, same super ability. We are very excited about the operations as well. So, yeah, if you have any, extensions that you think you're like, this has really changed the game for me, this has changed the way I use direct us, or if you're just like, this is cool and I'm excited to hear more about it, let us know in the chat, and we can have a chat about this right now.\u003C/p>\n\u003Cp>Kevin is saying that Florian's flexible editor interface is the one. Yes. I agree. That one is great too. And, yeah, as we said, shout out to you, Judah.\u003C/p>\n\u003Cp>I'm not sure if you are in the chat, but we were talking about this in Discord earlier, too. So do make sure to check out their contribution as well. Yeah. So those are the, four ones for the extensions this month. Every month, we aim to have more.\u003C/p>\n\u003Cp>And if you are looking at where, to go, the extensions link is the best place. We do also have the extensions channel in Discord too, and the director's extension field, actions from Atomic Media is also a great one. I'm gonna move us along to the next part of the changelog, but feel free to keep the conversation going, via the chats whilst we're there. So I'm handing over to Carmen with a docs preview, which is super exciting. So I will send over to her now.\u003C/p>\n\u003Cp>Speaker 2: Hey, everyone. My name is Carmen. I'm a developer educator at Directus, and part of my role is documentation and that's what I'm going to be showing you today. We are about to launch a beta of our new documentation and I just wanna show you a little bit about what our motivations are, what we've done, and what's next. And, in order to do that, I'm gonna tell you a little bit about what three aspects of our documentation we're aiming to tackle.\u003C/p>\n\u003Cp>1 is content, the other is structure, and finally, the platform. So let's talk about the content. Over the years, starting from a very minimal set of documentation that served our needs, not only have we gotten a lot of feedback and requests for new pieces of documentation, but we've also seen lots of our team, lots of hands touch that documentation. And over time there have been different voices, there have been different tones and we just wanted to completely rewrite that. So everything that you will see in the new documentation, whether it's been brought over or adapted or written from scratch, will have been touched not just by me but by other educators.\u003C/p>\n\u003Cp>Next is structure. And so what we've done is sort of split it into 2 areas. 1 is a reference manual where you're looking at the exact parts of the documentation that you need just so that you can use Directus. But there's also an implementation side of it. You're not just using Directus in isolation.\u003C/p>\n\u003Cp>So we are also bringing in a set of tutorials so that you can work with directives, for example, with a specific framework, with a specific use case, maybe with a specific SSO provider. What we're doing here is hoping that we can make this sort of separation bring a lot of clarity to our documentation. Finally, there's our platform. When we started out, we were using VitePress which fulfilled so many of our needs. It came with a template that we could use and when we hit those limitations, we would extend them, make those parts our own, and adapt them as needed.\u003C/p>\n\u003Cp>But, with the opportunity of rewriting our documentation for scratch, we also wanted to have a brand new platform. We are rewriting our documentation using Nuxt. And I just wanna give a little shout out to one of our engineers, Connor, who's been spearheading this effort in a magnificent way. And finally, let's be honest, maintaining an API reference all in markdown can be quite cumbersome when manually written. So what we've set out to do is to have these API references also be automatically generated from code.\u003C/p>\n\u003Cp>So cool. Those are the 3 parts that we're addressing with our new documentation. But what's next? As I mentioned earlier, later this month, we'll be launching the 1st beta of the documentation. And this is where y'all come in.\u003C/p>\n\u003Cp>I'd love to ask you to please look over them, give us feedback, and tell us what we can do to improve this documentation for when we launch towards the end of the year. The other thing that we're going to be doing as well is to really look over all of our existing tutorials and audit them and bring them over. That does not mean that our old documentation is going to hide them our way. We're not gonna be hiding that old documentation or our tutorials. We're just going to be systematically bringing them over, making sure that they are correct, relevant, that they work with our current version of Directus and making sure that those tutorials stay in lockstep with new releases and new documentation.\u003C/p>\n\u003Cp>So that's it for me. Thank you so much for listening and I'll see you later.\u003C/p>\n\u003Cp>Speaker 0: Alright. As Kevin said in the chat, we are releasing that in the next couple of weeks. He's also put the link where you can find it. Super exciting. And I am also gonna be the 3rd person to say a massive big up to Connor and also a massive thank you to Carmen as well.\u003C/p>\n\u003Cp>We've now come to the my personal favorite part of the changelog which is the community showcase. Love seeing what everyone is building and how they are making directors their own And this month, we have a community showcase from David who is gonna be talking about the form builder project they're currently working on.\u003C/p>\n\u003Cp>Speaker 3: Hi. I'm David from. We are small digital studio based in Montreal. We've been working with directors for the last 2 years. And today, I'm going to talk to you about a small form builder extension that we've built for Dericus and that we're going to open source soon, hopefully.\u003C/p>\n\u003Cp>So let's start. So, the main feature that our clients have been missing since we migrated away from WordPress has been the form builder. Not sure if you're familiar with gravity forms, which is one form, complex form builder that is labeled in their WordPress ecosystem, that allow end users to configure forms, with conditions, with advanced fields, with notification, even integrations with external systems. So all those portions are quite easy to build with Directus apart from the advanced form builder. We were able to build a basic form builder using native features from directives, but they were not as easy for a end user to configure.\u003C/p>\n\u003Cp>In creating a complex form builders with conditions and wizards like features, is quite a big endeavor. So that's why we chose to, we actually started looking into open source project that could help us. And that's where we came across a library called survey gs. Survey so basically, survey gs has 2 main comp 2 main components. One is called survey creator.\u003C/p>\n\u003Cp>The survey creator is what the end user use to create the form or survey. It's quite powerful. And the other important portion is form library, or should I say what libraries? Now form libraries, they basically take in the JSON coming from the survey creator to render a form. They have library for Angular, Vue.\u003C/p>\n\u003Cp>Js, React, vanilla JavaScript, and probably other frameworks that for oh, yeah, and backbone, if they're still user of backbones. But anyway, yeah. So the only when we found that we found that it was basically doing everything we needed from a foreign perspective. So the only thing left was to integrate with Directus. And that's where we created our first extension, actually, our first or should I say first public extension for Directus?\u003C/p>\n\u003Cp>So let me jump into that. I'll do a quick demo of what we've built. The main features that we wanted to implement were, well, of course, integrating the survey creator, the ability to save forms or the form data in any collection, and finally send notification to either internal users or external users after form was filled. So here, as you can see, we have our small form module. So I'll jump into contact us form.\u003C/p>\n\u003Cp>I'll start with the form builder portion. Here, we have the basic form, 2 columns, first name, last name, or email. We have a drop down with some choices, subject of the the form. In here, we have our first condition. So, for example, I have a condition here that say if the subject is product information, then we will display what specific product information are you looking for.\u003C/p>\n\u003Cp>If it shows customer support, then instead, it's going to be what's your issue. I want this I won't demo all the features of, sorry. Js. There's a lot of documentation. You can look it up on their website.\u003C/p>\n\u003Cp>But, yeah, it's fairly powerful from builder. Then afterwards, we have the actual integration with Directus. So if you I go into the configuration of the form. Let me hide that for now. So, yeah, what we do have is the schema that was generated by the form builder.\u003C/p>\n\u003Cp>Technically, you could edit the schema itself, but it's easier to use the form builder instead. Please note, though, that the form builder of Suri. Js does require a license. We we do have the configuration to input your license in the extension, so that's good. But just so you're aware, it does require a license from, Suri.\u003C/p>\n\u003Cp>Js to use a survey creator. Anyway, so what I was saying is here, we have the configuration. So we could we can see that, it's submitting data to form submission collection. You can choose any collection that you want. You can create a new one.\u003C/p>\n\u003Cp>You can have multiple forms submitting to the same collection. It's really depend on your requirements, basically. We also have notification templates. I'll show I'll explain how notification templates work afterwards. And did I forget anything?\u003C/p>\n\u003Cp>No. I think that's pretty much it. So, yeah, actually, let's jump in into notification template first. So if somebody submit or fill in that form, as I mentioned, you can configure 1 or more notification templates. So let's jump into it.\u003C/p>\n\u003Cp>Form templates use like just flows. You can use any fields that was part of the form as as the recipient. For example, if you want them to have more than 1, you can add other recipient. In this case, we're using the field work email. But you could also add an hard coded one for, suppose, someone on your team.\u003C/p>\n\u003Cp>The template is itself is pure HTML, but same thing. There's basic templating, so you can use, variables from the from the form. In this case, the contact us form. So let's try and submit 13. So I'm gonna go back to my form, contact us form.\u003C/p>\n\u003Cp>And I didn't build my preview. Here in this case, it's an XGS application. So it's a React component that we built that is basically reading the schema here and passing the schema to the to the sorry. Js library. And once you're done submitting the form, it's going to call a webhook from Dactors to save the data.\u003C/p>\n\u003Cp>So let's try that. So of course, we do have validation. So let me fill the form. We based in North America. So we want to chat about product information, customer support.\u003C/p>\n\u003Cp>Yes. I'm not sure if this form is going to actually send email. Yeah. This field is not required. So I don't not gonna fill it.\u003C/p>\n\u003Cp>I'm just gonna complete the form. Thanks. No problem. So if we go into our contact us entries, we can see my entry, all the fields that were filled filled in with the data that was passed. And if we look at our notifications that were generated, we can see here we do have the new notification, the email that it was sent to, the actual content of the email.\u003C/p>\n\u003Cp>So you have a and a status, so you know if it it was fully sent or not. It does link back to the entry if needed that generate that that generated that notification. And once the form is submitted, we can see in my email that I received the confirmation template. Yes. So yeah.\u003C/p>\n\u003Cp>So that's pretty much how the, extension work. If we look at our flows, there's a couple of flows that need to be configured, but it's not that complex. Most of the features are built in feature from directors or survey GS. So most of the extension is gluing together the the 2 great products, basically. We do have some configuration that you can pass to the survey JS extension.\u003C/p>\n\u003Cp>So, for example, if you want to show the designer tab, the JSON tab, depending on your users, you might not want them to be able to see the JSON. So first of all, you can disable that, save the settings. And if you go back to the actual form, you see I don't have access to the JSON editor here. So we made that we made sure that we could configure every settings from, survey survey creator directly from directors. So, hopefully, it's an extension that, some of you will find useful.\u003C/p>\n\u003Cp>We're hoping to release the extension in the next month. We just wanna make sure that it come with clear installation instruction. But, yeah, it was the main feature for us that was missing from Directus. Everything else has been great. We're really happy having migrating from WordPress to Directus.\u003C/p>\n\u003Cp>And with that last missing piece of the puzzle, we have we now have a complete toolkit to, finalize our projects. So thank you very much.\u003C/p>\n\u003Cp>Speaker 0: Alright. Thank you so much to you, David, for taking, the time to take us through that. I'm super excited for it to become available hopefully soon. I think it will make a great addition and if you're keen for more community showcases I highly recommend checking out the 'I made this channel'. Specifically people post updates on their projects and how they're going along and I think that's really great to see exactly how things are changing all in the same thread which is super interesting.\u003C/p>\n\u003Cp>Next up, we have Kevin with a quick connect tutorial on AI web scraping API with flows. So I'm gonna hand over to him.\u003C/p>\n\u003Cp>Speaker 4: Hello there. I'm really excited about this tutorial. So on Directus TV, we already have a show called Quick Connect, which shows you how to integrate third party services with Directus using Directus Automate and Flows. And in the spirit of that show, today, I'm gonna show you how to integrate FireCrawl with Directus. Now here they say that they turn websites into LLM ready data, And what that means in practice is you can feed it a URL, provide some options if you want, and it will go and take a look at that web page and return some structured data for you like so.\u003C/p>\n\u003Cp>This is their scrape endpoint, which will take a single web page and scrape some data from it. They also have a couple of other endpoints, crawl and map, but today we're gonna use scrape. Now I've already logged into Firecrawl Cloud and generated an API key, which I'll copy for later. You can also self host Firecrawl, but for ease, I'm just gonna use their cloud product here. Now I have this directors project over here with a new empty collection called companies.\u003C/p>\n\u003Cp>In this collection, there are a few fields, URL, a name, a description, a mission, and a boolean, a true force value, is it open source. And our goal will be to provide the URL and then have FireCrawl automatically populate the rest with flows. So let's go ahead and create a new flow. So this is our automation builder if you've not seen it before. I'll call this one get company data, I guess.\u003C/p>\n\u003Cp>And we are going to use a manual trigger which will add a button to the side of collection and item pages. So we're going to say we'll run this on the company's collection. What else matters here? We're going to not require selection, so the button always works, and we're going to require confirmation which will pop up a modal, and in that modal we will just add a URL. We'll make it a string input and we'll make it full width, and I think that's all we need to do here.\u003C/p>\n\u003Cp>So just to see what happens here, if I go back to the, to the company's collection, we now see this button here, this manual flow, trigger. I click that. It pulls up the box, and we'll put in a URL and hit run flow. So, now, if we go back to our flow, we should immediately see that there is one log. And in here, there is a body and the URL is the value that we typed.\u003C/p>\n\u003Cp>Fantastic. Now we need to actually do something with it. So, let's go ahead and add a new operation here. And, honestly, fire crawl is pretty sick. You can just make one web request.\u003C/p>\n\u003Cp>Let's take a look at their docs. We're gonna use the llm extract endpoint here, and let's just take a look at the kind of construction of this API call. It's a post request to this URL. We're gonna pass in our our API key here as an authorization header, and then they give us this kind of JSON payload here. Here, it's telling it to go ahead and extract specifically these four fields, the company mission, does it support SSO, is it open source, and is it in Y Combinator?\u003C/p>\n\u003Cp>And it's saying you must go get all 4 of these. So let's actually just turn this straight into a flow request request URL operation. So we're gonna do a post request to this URL, post request to this URL. I'm gonna go and copy my API key again here, and at the end of this, I'll, I'll destroy the key. Authorization authorization, bearer API key, save, and then there's the request body.\u003C/p>\n\u003Cp>And, honestly, it contains a little more than we need but this contains everything we need so we'll just pop that in there. The only thing we wanna do, of course, is pass in the URL that we put in the box. So we'll replace this with trigger dot body dot URL. Fantastic. Let's save that and see what happens if we go over to content, press the button, and type in directors dot io.\u003C/p>\n\u003Cp>We see that's running. That's running. That's a good sign. It means it's going off and making the request, waiting for the request. And then we see there is a second log.\u003C/p>\n\u003Cp>And we get some data back. There was a 200, so it was successful. Inside of data, there is a property called data, and then there is this value called extract. Extract contains all of those custom keys we asked for, company mission, supports SSO, is open source, and is in YC. And then always when you scrape, you get this metadata object, title, description, language, Open Graph data, source URL, and so on.\u003C/p>\n\u003Cp>So really all we want to do here now is we want to take this data and create a new company from it. So let's add a new, let's create a new operation on the resolve path of that web request. Let's call it create data. We're gonna create something in the company's collection, we'll give it full access, and then we just need to provide a payload. So let's go ahead and do that.\u003C/p>\n\u003Cp>We have an object here, we have a name, we have a name, and we're gonna pass in the value of the last operation dotdata.data.metadata.title. Then I, for 1, am I'm just gonna copy this and edit it each time. So we have name, URL. So that's last.data.data.metadata.sourceURL. We could, of course, just take it from the trigger body URL, but this is properly formatted.\u003C/p>\n\u003Cp>You'll notice I typed in directus.io, but when it came back in the payload, it came back with the with the, with the protocol HTTPS and so on. So we have name. We have URL. We have a description. Now this one is also from the metadata Description.\u003C/p>\n\u003Cp>We have the mission. Now this was a custom piece of data we asked to be extracted. Company mission is what we called it. And, finally, we have open, open underscore source. Last data, data extract and then is underscore open underscore source and then remove that trailing comma.\u003C/p>\n\u003Cp>So I believe that's the name of all of the fields. We'll figure it out in a moment when when it inevitably doesn't work. We'll hit the button again, directors dot io and hit run flow. Once again that's going off to Firecrawl using their endpoint and there we see there we see it straight here. URL name, description, mission and the boolean is open source.\u003C/p>\n\u003Cp>Let's, let's try that once more. Let's go in here and say fire fire crawl dot dev run flow. So let's see. And in theory we should just give that a moment and there it is. So now you can go ahead and grab more data.\u003C/p>\n\u003Cp>Now, of course, if we take a look at this endpoint here, you can provide custom properties and it will try its best to get data out from that. They have a couple of other interesting things which I'll draw your attention to even if I don't think it works in this context. They have, attention to even if I don't think it works in this context. They have extracting without a schema. So this extract here was us creating a a schema.\u003C/p>\n\u003Cp>Right. You can give it just a text. You can give it a prompt. Extract the company mission from the page, but the thing I don't like about that is you're not explicitly saying what the name of the key is, so you don't necessarily know what it's going to be at the end. I like creating a schema personally.\u003C/p>\n\u003Cp>They do something else that's kind of interesting. If I take a look at where is it, I think it's in their API reference here inside of scrape. They have this interesting thing called actions. So you can get it to wait, to take a screenshot, to click, write text, press a key and scroll and the combination of clicking and writing text means you can get it to interact with your web page. You see it here, actions, wait 2 milliseconds.\u003C/p>\n\u003Cp>You could get it to, like, sign in to things perhaps, perform search terms. I think it's super interesting and then take screenshots, of course, and upload those to directors if you fancy. So there's a lot of flexibility in this. Having seen kind of how easy this API is, I think I'll go ahead and turn this into, an extension some point in the next few weeks which we can release as part of Directus AI. But, yeah, that's how to integrate FireCrawl with Directus using Directus Automate.\u003C/p>\n\u003Cp>Hope you found this interesting, and by all means, if you have questions just reach out. Alright. Over to Beth.\u003C/p>\n\u003Cp>Speaker 0: Welcome to The Reading List. Internally, we have a number of Slack channels where we share links from all around that we found educational and entertaining and we'd really like to share some of our favorites this month with you. First up, we have EIAIO games on scaling 1,000,000 checkboxes. This was a web experiment where every time anyone globally checks a box that change is reflected across everyone's browser and it goes in-depth into the scaling challenges of the unexpected popularity of the website leading to 650,000,000 checked boxes. Next, we have a recorded YouTube video from wasm.\u003C/p>\n\u003Cp>Io24 featuring Luke Wagner giving a talk on a stream of consciousness on the future of async in the component model. This is a great talk from one of the original designers of WebAssembly on how async will work in WASI 0.3. Next, we have introducing Netflix's key value data abstraction layer on the Netflix tech blog. This takes us through some of their global backend infrastructure design powering one of the most popular streaming platforms around and their use of multiple online distributed databases such as Apache Cassandra. Next up, we have an interesting read introducing the tool Cambria which is used to help you describe in a structured way how schemas change and why they change.\u003C/p>\n\u003Cp>This is from an independent research lab called Inc and Switch, definitely one for folks interested in the more academic side of things. The data visualization catalog provides a list of charts categorized by their data visualization functions or by what you want a chart to communicate to an audience. It's a really useful guide for selecting charts based on your analysis or communication needs. It starts with what you're trying to communicate and recommends which chart or tools to use. Lastly, a nice little tip from Vic instead of storing states as booleans, so like true or false, you could consider a date stamp so you can see when a state was updated with null meaning false and any date value meaning true.\u003C/p>\n\u003Cp>Those are just a few of the links that we shared internally this month. If you've got your own interesting links we would absolutely love to see them. We would recommend you share them within the discord server so you can see them and you never know they might even be in next month's changelog! We like to take a moment towards the end of each changelog to thank our contributors and sponsors who help make Directus as great as it can be. A huge thank you to Florian for dropping support for the old SendGrid transport option in favor of SMTP directly.\u003C/p>\n\u003Cp>Thank you to Shane for adding support for disabling terminal screen clearing on rebuild in watch mode. Thank you to Junhong for fixing SVG truncation issue in image interface preview, for fixing an issue that would cause custom role names to not be translated in the role navigation sidebar, for fixing WYSIWYG interface to be updated when interface options are changed via conditions, for improving behavior of the translations interface when setting use users language option, for ensuring data in sidebar is re fetched when switching pages while a sidebar pane is already opened, and for ensuring errors occurred within the card layout are always shown. Thank you to renovate for updating dependencies across multiple packages. Thank you to Joshua for fixing an issue that would cause log streaming to fail on directors installations that use a sub path in the URL. Thank you to for ensuring users are redirected to the intended page after login via LDAP.\u003C/p>\n\u003Cp>Thank you to CASE for adding the optional ignore rules option to schema apply CLI, and thank you to Anton for making the output types of SDK requests better readable in IDEs. Thank you again to each individual you can see their specific pull requests inside of the full release notes on GitHub. Lastly, we also want to take the time to thank our GitHub Sponsors of September who financially contribute to Directus' development specifically a huge thank you to Clement that's dlxclem for sponsoring as our backer tier of $100 a month. The money we are given from our Github sponsors goes straight back to the community members who build tooling and extensions for the directors ecosystem. Thank you again for being part of that.\u003C/p>\n\u003Cp>Alright, that is the last of the segments that we have for this month. If you are still watching thank you so much for sticking around we appreciate you And if you've watched the whole thing we'd love to know which segments you particularly like. That helps us plan for the next few months and to show, what you'd like to see so do let us know any feedback about the change log. The next change log is November 12th at 3 pm the same time and I do hope that it's going to stay the same time in discord because we are changing from British summer time to the non British summer time which is Greenwich Mean Time So if you see a different, time, it'll still be 3 PM GMT BST. It's all gonna be there.\u003C/p>\n\u003Cp>It's fine. Yes, Kevin. Not quite connect. Weird presenter in my opinion. Anyway, thank you so much again for tuning in.\u003C/p>\n\u003Cp>Have a great rest of your day, and hopefully catch you for the next one. Bye, everyone.\u003C/p>","Alright. Hello, everyone. Hopefully, you can all hear me, and I am gonna take a pause and just check that that is the case. So if someone could let me know, that would be great. Oh, I was excited. Carmen's saying hello, and I'm still gonna wait. Loud and clear. Perfect. Thank you so much, Kevin. Welcome to October's version of the change log from Directus. If you're new here or if you've, joined us before, welcome. I hope you're having the most perfect day. I hope your day is not too hot, not too cold. It's like the crispest, best version of the day because that is what you deserve for joining us. Thank you for for being here. We have a great show for you planned. We've got some updates from Brian and myself from product and extensions, we've got Carmen with a docs update for what is upcoming and that's super exciting, we have Kevin with a quick connect tutorial. We've got the community showcase, and we've got a whole bunch of different things. I am joining from London. I would love to know, where you are all joining from. I can see that the chat is already busy. That is great. Please continue. We have team members in there answering all your questions. So, yeah, if you've got anything that you are thinking about, let us know based on anything we are saying. We also have the general chat in Discord for afterwards if it comes to you and you're like oh I should have said that feel free to keep the conversation moving there as well. Did anyone say where they're joining from so far? I see a lot of hellos. Oh, Netherlands, North Germany. Hello. Welcome. Welcome. Granada, Spain, Ukraine, Austria, Egypt, Sardinia, Nigeria. Amazing. Welcome, France too. Hello. Hello. Super happy for you all to be joining us. I am gonna hand over to you, Bryant, with some product updates for the first start of the show. So hope you enjoy them. Brian here for Directus, and I've got 2 quick updates for you. Version 11.1.1 dropped last week with a load of bug fixes, optimizations, and a few dependency updates. I just wanted to give a quick shout out to our engineering team and the community members who are on fire at improving the Directus experience for you, for me, and the entire Directus community. There is however one breaking change. The underlying SendGrid package we were using is no longer maintained. So rather than risk your security or some type of crazy exploit, we've removed it. Now if you're using SendGrid as your direct to email provider, you'll want to switch up your config to use SMTP instead of their API. For the full list of fixes and updates, check the release notes in the Directus repository. Now on to my favorite update, probably because I had a little hand in shipping these. There's no bias here. I'm super excited to announce Directus cloud templates. These are handcrafted Directus instances with data models, permissions, flows, all the niceties already built out for you. Now, whenever you spin up a new project for your organization or your client inside Directus Cloud, you can get to 80% done by clicking one button. There are currently 3 templates to choose from. Simple CMS, which is great for your next website build. It's configured with the dynamic page builder, blog posts, menus, and even dynamic forms. Your content editors are going to love this one. Next up, we have simple CRM, which is the perfect starting point for your own custom Salesforce or HubSpot. It includes the standard fare, like organizations and contacts, deals and activities, and a configurable pipeline. Last but not least, we have simple ecommerce, which showcases a small online apparel or t shirt shop build out. The data model includes products, orders, customers, and it even handles more complex scenarios like product variance, which account for all the color and size combinations automatically. So hop on to Directus Cloud, spin up an instance, check them out, and as always, send us your feedback because we'll be releasing more of these templates in the coming months. And back over to you, Beth. I'm going to demonstrate each of the new extensions in Directus Labs this month. As a reminder Directus Labs is our team's experimental org in GitHub which regularly publishes new extensions we think are cool. The Gantt chart layout displays items in a collection in a Gantt chart helping those of you who use Directus for project management and task management. When configuring the layout specify a label that you want displayed on each task, a start date and an end date, and optionally a dependency field which will draw dependency lines in a chart. You can specify the zoom in as granular as an hour and as broad as a year. You can download it now in the marketplace. A calculated fields interface is the most upvoted open feature request in the directors project and today we are releasing it as an extension. It allows you to write a formula and the value of the interface will be automatically computed and shown. It supports the full set of functions provided by formula. Js and the majority of JavaScript operators that work for numbers and strings. It also supports relational fields and we pass formulas to ensure they are only running allowed functions which is important for security. A couple of things that are important to note values here are only visible in the interface and not in API responses. We've had this extension in the works for a while, but just a couple of days ago, a community member, Judah Sullivan, released the Directus AutoGen Extension which you might also want to check out as it's similar Both are available in the marketplace The API metric panel can be used to display a value from an external API, for example, that could be the number of docker downloads or sales or followers on social media platforms As you can see here we are making a web request to get docker metrics. We could also provide custom headers or a request body if required. Then you specify the path of the value you want to display. It's a nice responsive panel that allows you to get an overview of your business. You can download this extension directly from GitHub or NPM. Lastly, one of our core team members, Tim, in his spare time released a pair of flow operations which allows authentication and permission checking. The first operation allows you to check whether the flow was triggered by a user with admin access, user access, or public access. The operation will return true if authenticated or else throw an error. The second operation allows you to select a collection and it will return true if a user has read permissions in that collection. You can check this out over on github and npm we hope you enjoy using all these extensions Gantt chart layout, calculated fields interface, the API metric panel and tims authentication and permission checks let's bring my camera back up and I'll see how you're doing. I brought my camera back up hopefully you can see me again. Yeah, as I said we are super excited for everything we've just announced. Out of the extensions we've just talked about or if there are any other extensions that you regularly use in the marketplace, now is a good time to let us know in the chat. I mean for me as someone who really really likes project management efficiency the Gantt chart layout is super exciting and Kevin has just put in the chat as well the extension link for you to check them out for yourself. Tim, I did see you. Brace look also same person, same super ability. We are very excited about the operations as well. So, yeah, if you have any, extensions that you think you're like, this has really changed the game for me, this has changed the way I use direct us, or if you're just like, this is cool and I'm excited to hear more about it, let us know in the chat, and we can have a chat about this right now. Kevin is saying that Florian's flexible editor interface is the one. Yes. I agree. That one is great too. And, yeah, as we said, shout out to you, Judah. I'm not sure if you are in the chat, but we were talking about this in Discord earlier, too. So do make sure to check out their contribution as well. Yeah. So those are the, four ones for the extensions this month. Every month, we aim to have more. And if you are looking at where, to go, the extensions link is the best place. We do also have the extensions channel in Discord too, and the director's extension field, actions from Atomic Media is also a great one. I'm gonna move us along to the next part of the changelog, but feel free to keep the conversation going, via the chats whilst we're there. So I'm handing over to Carmen with a docs preview, which is super exciting. So I will send over to her now. Hey, everyone. My name is Carmen. I'm a developer educator at Directus, and part of my role is documentation and that's what I'm going to be showing you today. We are about to launch a beta of our new documentation and I just wanna show you a little bit about what our motivations are, what we've done, and what's next. And, in order to do that, I'm gonna tell you a little bit about what three aspects of our documentation we're aiming to tackle. 1 is content, the other is structure, and finally, the platform. So let's talk about the content. Over the years, starting from a very minimal set of documentation that served our needs, not only have we gotten a lot of feedback and requests for new pieces of documentation, but we've also seen lots of our team, lots of hands touch that documentation. And over time there have been different voices, there have been different tones and we just wanted to completely rewrite that. So everything that you will see in the new documentation, whether it's been brought over or adapted or written from scratch, will have been touched not just by me but by other educators. Next is structure. And so what we've done is sort of split it into 2 areas. 1 is a reference manual where you're looking at the exact parts of the documentation that you need just so that you can use Directus. But there's also an implementation side of it. You're not just using Directus in isolation. So we are also bringing in a set of tutorials so that you can work with directives, for example, with a specific framework, with a specific use case, maybe with a specific SSO provider. What we're doing here is hoping that we can make this sort of separation bring a lot of clarity to our documentation. Finally, there's our platform. When we started out, we were using VitePress which fulfilled so many of our needs. It came with a template that we could use and when we hit those limitations, we would extend them, make those parts our own, and adapt them as needed. But, with the opportunity of rewriting our documentation for scratch, we also wanted to have a brand new platform. We are rewriting our documentation using Nuxt. And I just wanna give a little shout out to one of our engineers, Connor, who's been spearheading this effort in a magnificent way. And finally, let's be honest, maintaining an API reference all in markdown can be quite cumbersome when manually written. So what we've set out to do is to have these API references also be automatically generated from code. So cool. Those are the 3 parts that we're addressing with our new documentation. But what's next? As I mentioned earlier, later this month, we'll be launching the 1st beta of the documentation. And this is where y'all come in. I'd love to ask you to please look over them, give us feedback, and tell us what we can do to improve this documentation for when we launch towards the end of the year. The other thing that we're going to be doing as well is to really look over all of our existing tutorials and audit them and bring them over. That does not mean that our old documentation is going to hide them our way. We're not gonna be hiding that old documentation or our tutorials. We're just going to be systematically bringing them over, making sure that they are correct, relevant, that they work with our current version of Directus and making sure that those tutorials stay in lockstep with new releases and new documentation. So that's it for me. Thank you so much for listening and I'll see you later. Alright. As Kevin said in the chat, we are releasing that in the next couple of weeks. He's also put the link where you can find it. Super exciting. And I am also gonna be the 3rd person to say a massive big up to Connor and also a massive thank you to Carmen as well. We've now come to the my personal favorite part of the changelog which is the community showcase. Love seeing what everyone is building and how they are making directors their own And this month, we have a community showcase from David who is gonna be talking about the form builder project they're currently working on. Hi. I'm David from. We are small digital studio based in Montreal. We've been working with directors for the last 2 years. And today, I'm going to talk to you about a small form builder extension that we've built for Dericus and that we're going to open source soon, hopefully. So let's start. So, the main feature that our clients have been missing since we migrated away from WordPress has been the form builder. Not sure if you're familiar with gravity forms, which is one form, complex form builder that is labeled in their WordPress ecosystem, that allow end users to configure forms, with conditions, with advanced fields, with notification, even integrations with external systems. So all those portions are quite easy to build with Directus apart from the advanced form builder. We were able to build a basic form builder using native features from directives, but they were not as easy for a end user to configure. In creating a complex form builders with conditions and wizards like features, is quite a big endeavor. So that's why we chose to, we actually started looking into open source project that could help us. And that's where we came across a library called survey gs. Survey so basically, survey gs has 2 main comp 2 main components. One is called survey creator. The survey creator is what the end user use to create the form or survey. It's quite powerful. And the other important portion is form library, or should I say what libraries? Now form libraries, they basically take in the JSON coming from the survey creator to render a form. They have library for Angular, Vue. Js, React, vanilla JavaScript, and probably other frameworks that for oh, yeah, and backbone, if they're still user of backbones. But anyway, yeah. So the only when we found that we found that it was basically doing everything we needed from a foreign perspective. So the only thing left was to integrate with Directus. And that's where we created our first extension, actually, our first or should I say first public extension for Directus? So let me jump into that. I'll do a quick demo of what we've built. The main features that we wanted to implement were, well, of course, integrating the survey creator, the ability to save forms or the form data in any collection, and finally send notification to either internal users or external users after form was filled. So here, as you can see, we have our small form module. So I'll jump into contact us form. I'll start with the form builder portion. Here, we have the basic form, 2 columns, first name, last name, or email. We have a drop down with some choices, subject of the the form. In here, we have our first condition. So, for example, I have a condition here that say if the subject is product information, then we will display what specific product information are you looking for. If it shows customer support, then instead, it's going to be what's your issue. I want this I won't demo all the features of, sorry. Js. There's a lot of documentation. You can look it up on their website. But, yeah, it's fairly powerful from builder. Then afterwards, we have the actual integration with Directus. So if you I go into the configuration of the form. Let me hide that for now. So, yeah, what we do have is the schema that was generated by the form builder. Technically, you could edit the schema itself, but it's easier to use the form builder instead. Please note, though, that the form builder of Suri. Js does require a license. We we do have the configuration to input your license in the extension, so that's good. But just so you're aware, it does require a license from, Suri. Js to use a survey creator. Anyway, so what I was saying is here, we have the configuration. So we could we can see that, it's submitting data to form submission collection. You can choose any collection that you want. You can create a new one. You can have multiple forms submitting to the same collection. It's really depend on your requirements, basically. We also have notification templates. I'll show I'll explain how notification templates work afterwards. And did I forget anything? No. I think that's pretty much it. So, yeah, actually, let's jump in into notification template first. So if somebody submit or fill in that form, as I mentioned, you can configure 1 or more notification templates. So let's jump into it. Form templates use like just flows. You can use any fields that was part of the form as as the recipient. For example, if you want them to have more than 1, you can add other recipient. In this case, we're using the field work email. But you could also add an hard coded one for, suppose, someone on your team. The template is itself is pure HTML, but same thing. There's basic templating, so you can use, variables from the from the form. In this case, the contact us form. So let's try and submit 13. So I'm gonna go back to my form, contact us form. And I didn't build my preview. Here in this case, it's an XGS application. So it's a React component that we built that is basically reading the schema here and passing the schema to the to the sorry. Js library. And once you're done submitting the form, it's going to call a webhook from Dactors to save the data. So let's try that. So of course, we do have validation. So let me fill the form. We based in North America. So we want to chat about product information, customer support. Yes. I'm not sure if this form is going to actually send email. Yeah. This field is not required. So I don't not gonna fill it. I'm just gonna complete the form. Thanks. No problem. So if we go into our contact us entries, we can see my entry, all the fields that were filled filled in with the data that was passed. And if we look at our notifications that were generated, we can see here we do have the new notification, the email that it was sent to, the actual content of the email. So you have a and a status, so you know if it it was fully sent or not. It does link back to the entry if needed that generate that that generated that notification. And once the form is submitted, we can see in my email that I received the confirmation template. Yes. So yeah. So that's pretty much how the, extension work. If we look at our flows, there's a couple of flows that need to be configured, but it's not that complex. Most of the features are built in feature from directors or survey GS. So most of the extension is gluing together the the 2 great products, basically. We do have some configuration that you can pass to the survey JS extension. So, for example, if you want to show the designer tab, the JSON tab, depending on your users, you might not want them to be able to see the JSON. So first of all, you can disable that, save the settings. And if you go back to the actual form, you see I don't have access to the JSON editor here. So we made that we made sure that we could configure every settings from, survey survey creator directly from directors. So, hopefully, it's an extension that, some of you will find useful. We're hoping to release the extension in the next month. We just wanna make sure that it come with clear installation instruction. But, yeah, it was the main feature for us that was missing from Directus. Everything else has been great. We're really happy having migrating from WordPress to Directus. And with that last missing piece of the puzzle, we have we now have a complete toolkit to, finalize our projects. So thank you very much. Alright. Thank you so much to you, David, for taking, the time to take us through that. I'm super excited for it to become available hopefully soon. I think it will make a great addition and if you're keen for more community showcases I highly recommend checking out the 'I made this channel'. Specifically people post updates on their projects and how they're going along and I think that's really great to see exactly how things are changing all in the same thread which is super interesting. Next up, we have Kevin with a quick connect tutorial on AI web scraping API with flows. So I'm gonna hand over to him. Hello there. I'm really excited about this tutorial. So on Directus TV, we already have a show called Quick Connect, which shows you how to integrate third party services with Directus using Directus Automate and Flows. And in the spirit of that show, today, I'm gonna show you how to integrate FireCrawl with Directus. Now here they say that they turn websites into LLM ready data, And what that means in practice is you can feed it a URL, provide some options if you want, and it will go and take a look at that web page and return some structured data for you like so. This is their scrape endpoint, which will take a single web page and scrape some data from it. They also have a couple of other endpoints, crawl and map, but today we're gonna use scrape. Now I've already logged into Firecrawl Cloud and generated an API key, which I'll copy for later. You can also self host Firecrawl, but for ease, I'm just gonna use their cloud product here. Now I have this directors project over here with a new empty collection called companies. In this collection, there are a few fields, URL, a name, a description, a mission, and a boolean, a true force value, is it open source. And our goal will be to provide the URL and then have FireCrawl automatically populate the rest with flows. So let's go ahead and create a new flow. So this is our automation builder if you've not seen it before. I'll call this one get company data, I guess. And we are going to use a manual trigger which will add a button to the side of collection and item pages. So we're going to say we'll run this on the company's collection. What else matters here? We're going to not require selection, so the button always works, and we're going to require confirmation which will pop up a modal, and in that modal we will just add a URL. We'll make it a string input and we'll make it full width, and I think that's all we need to do here. So just to see what happens here, if I go back to the, to the company's collection, we now see this button here, this manual flow, trigger. I click that. It pulls up the box, and we'll put in a URL and hit run flow. So, now, if we go back to our flow, we should immediately see that there is one log. And in here, there is a body and the URL is the value that we typed. Fantastic. Now we need to actually do something with it. So, let's go ahead and add a new operation here. And, honestly, fire crawl is pretty sick. You can just make one web request. Let's take a look at their docs. We're gonna use the llm extract endpoint here, and let's just take a look at the kind of construction of this API call. It's a post request to this URL. We're gonna pass in our our API key here as an authorization header, and then they give us this kind of JSON payload here. Here, it's telling it to go ahead and extract specifically these four fields, the company mission, does it support SSO, is it open source, and is it in Y Combinator? And it's saying you must go get all 4 of these. So let's actually just turn this straight into a flow request request URL operation. So we're gonna do a post request to this URL, post request to this URL. I'm gonna go and copy my API key again here, and at the end of this, I'll, I'll destroy the key. Authorization authorization, bearer API key, save, and then there's the request body. And, honestly, it contains a little more than we need but this contains everything we need so we'll just pop that in there. The only thing we wanna do, of course, is pass in the URL that we put in the box. So we'll replace this with trigger dot body dot URL. Fantastic. Let's save that and see what happens if we go over to content, press the button, and type in directors dot io. We see that's running. That's running. That's a good sign. It means it's going off and making the request, waiting for the request. And then we see there is a second log. And we get some data back. There was a 200, so it was successful. Inside of data, there is a property called data, and then there is this value called extract. Extract contains all of those custom keys we asked for, company mission, supports SSO, is open source, and is in YC. And then always when you scrape, you get this metadata object, title, description, language, Open Graph data, source URL, and so on. So really all we want to do here now is we want to take this data and create a new company from it. So let's add a new, let's create a new operation on the resolve path of that web request. Let's call it create data. We're gonna create something in the company's collection, we'll give it full access, and then we just need to provide a payload. So let's go ahead and do that. We have an object here, we have a name, we have a name, and we're gonna pass in the value of the last operation dotdata.data.metadata.title. Then I, for 1, am I'm just gonna copy this and edit it each time. So we have name, URL. So that's last.data.data.metadata.sourceURL. We could, of course, just take it from the trigger body URL, but this is properly formatted. You'll notice I typed in directus.io, but when it came back in the payload, it came back with the with the, with the protocol HTTPS and so on. So we have name. We have URL. We have a description. Now this one is also from the metadata Description. We have the mission. Now this was a custom piece of data we asked to be extracted. Company mission is what we called it. And, finally, we have open, open underscore source. Last data, data extract and then is underscore open underscore source and then remove that trailing comma. So I believe that's the name of all of the fields. We'll figure it out in a moment when when it inevitably doesn't work. We'll hit the button again, directors dot io and hit run flow. Once again that's going off to Firecrawl using their endpoint and there we see there we see it straight here. URL name, description, mission and the boolean is open source. Let's, let's try that once more. Let's go in here and say fire fire crawl dot dev run flow. So let's see. And in theory we should just give that a moment and there it is. So now you can go ahead and grab more data. Now, of course, if we take a look at this endpoint here, you can provide custom properties and it will try its best to get data out from that. They have a couple of other interesting things which I'll draw your attention to even if I don't think it works in this context. They have, attention to even if I don't think it works in this context. They have extracting without a schema. So this extract here was us creating a a schema. Right. You can give it just a text. You can give it a prompt. Extract the company mission from the page, but the thing I don't like about that is you're not explicitly saying what the name of the key is, so you don't necessarily know what it's going to be at the end. I like creating a schema personally. They do something else that's kind of interesting. If I take a look at where is it, I think it's in their API reference here inside of scrape. They have this interesting thing called actions. So you can get it to wait, to take a screenshot, to click, write text, press a key and scroll and the combination of clicking and writing text means you can get it to interact with your web page. You see it here, actions, wait 2 milliseconds. You could get it to, like, sign in to things perhaps, perform search terms. I think it's super interesting and then take screenshots, of course, and upload those to directors if you fancy. So there's a lot of flexibility in this. Having seen kind of how easy this API is, I think I'll go ahead and turn this into, an extension some point in the next few weeks which we can release as part of Directus AI. But, yeah, that's how to integrate FireCrawl with Directus using Directus Automate. Hope you found this interesting, and by all means, if you have questions just reach out. Alright. Over to Beth. Welcome to The Reading List. Internally, we have a number of Slack channels where we share links from all around that we found educational and entertaining and we'd really like to share some of our favorites this month with you. First up, we have EIAIO games on scaling 1,000,000 checkboxes. This was a web experiment where every time anyone globally checks a box that change is reflected across everyone's browser and it goes in-depth into the scaling challenges of the unexpected popularity of the website leading to 650,000,000 checked boxes. Next, we have a recorded YouTube video from wasm. Io24 featuring Luke Wagner giving a talk on a stream of consciousness on the future of async in the component model. This is a great talk from one of the original designers of WebAssembly on how async will work in WASI 0.3. Next, we have introducing Netflix's key value data abstraction layer on the Netflix tech blog. This takes us through some of their global backend infrastructure design powering one of the most popular streaming platforms around and their use of multiple online distributed databases such as Apache Cassandra. Next up, we have an interesting read introducing the tool Cambria which is used to help you describe in a structured way how schemas change and why they change. This is from an independent research lab called Inc and Switch, definitely one for folks interested in the more academic side of things. The data visualization catalog provides a list of charts categorized by their data visualization functions or by what you want a chart to communicate to an audience. It's a really useful guide for selecting charts based on your analysis or communication needs. It starts with what you're trying to communicate and recommends which chart or tools to use. Lastly, a nice little tip from Vic instead of storing states as booleans, so like true or false, you could consider a date stamp so you can see when a state was updated with null meaning false and any date value meaning true. Those are just a few of the links that we shared internally this month. If you've got your own interesting links we would absolutely love to see them. We would recommend you share them within the discord server so you can see them and you never know they might even be in next month's changelog! We like to take a moment towards the end of each changelog to thank our contributors and sponsors who help make Directus as great as it can be. A huge thank you to Florian for dropping support for the old SendGrid transport option in favor of SMTP directly. Thank you to Shane for adding support for disabling terminal screen clearing on rebuild in watch mode. Thank you to Junhong for fixing SVG truncation issue in image interface preview, for fixing an issue that would cause custom role names to not be translated in the role navigation sidebar, for fixing WYSIWYG interface to be updated when interface options are changed via conditions, for improving behavior of the translations interface when setting use users language option, for ensuring data in sidebar is re fetched when switching pages while a sidebar pane is already opened, and for ensuring errors occurred within the card layout are always shown. Thank you to renovate for updating dependencies across multiple packages. Thank you to Joshua for fixing an issue that would cause log streaming to fail on directors installations that use a sub path in the URL. Thank you to for ensuring users are redirected to the intended page after login via LDAP. Thank you to CASE for adding the optional ignore rules option to schema apply CLI, and thank you to Anton for making the output types of SDK requests better readable in IDEs. Thank you again to each individual you can see their specific pull requests inside of the full release notes on GitHub. Lastly, we also want to take the time to thank our GitHub Sponsors of September who financially contribute to Directus' development specifically a huge thank you to Clement that's dlxclem for sponsoring as our backer tier of $100 a month. The money we are given from our Github sponsors goes straight back to the community members who build tooling and extensions for the directors ecosystem. Thank you again for being part of that. Alright, that is the last of the segments that we have for this month. If you are still watching thank you so much for sticking around we appreciate you And if you've watched the whole thing we'd love to know which segments you particularly like. That helps us plan for the next few months and to show, what you'd like to see so do let us know any feedback about the change log. The next change log is November 12th at 3 pm the same time and I do hope that it's going to stay the same time in discord because we are changing from British summer time to the non British summer time which is Greenwich Mean Time So if you see a different, time, it'll still be 3 PM GMT BST. It's all gonna be there. It's fine. Yes, Kevin. Not quite connect. Weird presenter in my opinion. Anyway, thank you so much again for tuning in. Have a great rest of your day, and hopefully catch you for the next one. Bye, everyone.","\u003Cp>Join us for The Changelog, taking you through the month’s Directus updates including product updates, new content and community contribution highlights. This month's show includes a community showcase of a form builder from David, Carmen taking us through a docs preview and Kevin with a tutorial on AI web scraping API with flows.\u003C/p>","e5fcb8f2-0efc-45bd-a936-5b6133c1c0ce",[190,191,192,193],"8735bb07-70ba-4859-8691-f8f73fbbd4b6","01efa3c2-0d0a-4cfa-9977-98491f1fb5e4","a29b02f4-9587-4342-83cc-4e81821a0286","dd8ab2f5-3e33-4655-9469-411840a590d4",[],{"reps":196},[197,253],{"name":198,"sdr":8,"link":199,"countries":200,"states":202},"John Daniels","https://meet.directus.io/meetings/john2144/john-contact-form-meeting",[201],"United States",[203,204,205,206,207,208,209,210,211,212,213,214,215,216,217,218,219,220,221,222,223,224,225,226,227,228,229,230,231,232,233,234,235,236,237,238,239,240,241,242,243,244,245,246,247,248,249,250,251,252],"Michigan","Indiana","Ohio","West Virginia","Kentucky","Virginia","Tennessee","North Carolina","South Carolina","Georgia","Florida","Alabama","Mississippi","New York","MI","IN","OH","WV","KY","VA","TN","NC","SC","GA","FL","AL","MS","NY","Connecticut","CT","Delaware","DE","Maine","ME","Maryland","MD","Massachusetts","MA","New Hampshire","NH","New Jersey","NJ","Pennsylvania","PA","Rhode Island","RI","Vermont","VT","Washington DC","DC",{"name":254,"link":255,"countries":256},"Michelle Riber","https://meetings.hubspot.com/mriber",[257,258,259,260,261,262,263,264,265,266,267,268,269,270,271,272,273,274,275,276,277,278,279,280,281,282,283,284,285,286,287,288,289,290,291,292,293,294,295,296,297,298,299,300,301,302,303,304,305,306,307,308,309,310,311,312,313,314,315,316,317,318,319,320,321,322,323,324,325,326,327,328,329,330,331,332,333,334,335,336,337,338,339,340,341,342,343,344,345,346,347,348,349,350,351,352,353,354,355,356,357,358,359,360,361,362,363,364,365,366,367,368,369,370,371,372,373,374,375,376,377,378,379,380,381,382,383,384,385,386,387,388,389,390,391,392,393,394,395,396,397,398,399,400,401,402,403,404,405,406,407,408,409,410,411,412,413,414,415,416,417,418,419,420,421,422,423,424,425,426,427,428,429,430,431,432,433,434,435,436,437,438,439,440,441,442,443,444,234,445,446],"Albania","ALB","Algeria","DZA","Andorra","AND","Angola","AGO","Austria","AUT","Belgium","BEL","Benin","BEN","Bosnia and Herzegovina","BIH","Botswana","BWA","Bulgaria","BGR","Burkina Faso","BFA","Burundi","BDI","Cameroon","CMR","Cape Verde","CPV","Central African Republic","CAF","Chad","TCD","Comoros","COM","Côte d'Ivoire","CIV","Croatia","HRV","Czech Republic","CZE","Democratic Republic of Congo","COD","Denmark","DNK","Djibouti","DJI","Egypt","EGY","Equatorial Guinea","GNQ","Eritrea","ERI","Estonia","EST","Eswatini","SWZ","Ethiopia","ETH","Finland","FIN","France","FRA","Gabon","GAB","Gambia","GMB","Ghana","GHA","Greece","GRC","Guinea","GIN","Guinea-Bissau","GNB","Hungary","HUN","Iceland","ISL","Ireland","IRL","Italy","ITA","Kenya","KEN","Latvia","LVA","Lesotho","LSO","Liberia","LBR","Libya","LBY","Liechtenstein","LIE","Lithuania","LTU","Luxembourg","LUX","Madagascar","MDG","Malawi","MWI","Mali","MLI","Malta","MLT","Mauritania","MRT","Mauritius","MUS","Moldova","MDA","Monaco","MCO","Montenegro","MNE","Morocco","MAR","Mozambique","MOZ","Namibia","NAM","Niger","NER","Nigeria","NGA","North Macedonia","MKD","Norway","NOR","Poland","POL","Portugal","PRT","Republic of Congo","COG","Romania","ROU","Rwanda","RWA","San Marino","SMR","São Tomé and Príncipe","STP","Senegal","SEN","Serbia","SRB","Seychelles","SYC","Sierra Leone","SLE","Slovakia","SVK","Slovenia","SVN","Somalia","SOM","South Africa","ZAF","South Sudan","SSD","Spain","ESP","Sudan","SDN","Sweden","SWE","Tanzania","TZA","Togo","TGO","Tunisia","TUN","Uganda","UGA","United Kingdom","GBR","Vatican City","VAT","Zambia","ZMB","Zimbabwe","ZWE","UK","Germany","Netherlands","Switzerland","CH","NL",1773850428786]