September 2024

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.

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.

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.

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.

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

Speaker 0: here,

Speaker 2: here is the output of the operation as well.

Speaker 0: That is the first,

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.

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.

Speaker 0: This will get you started much quicker and let

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.

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.

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.

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.

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.

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.

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.

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?

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.

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.

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.

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.

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.

Speaker 4: Doesn't specify.

Speaker 1: 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,

Speaker 4: 0. Sure. And

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.

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.

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.

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.

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.

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.

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

Speaker 0: we want to thank each

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.

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.

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.

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.