January 2025

Speaker 0: Hello everyone and welcome to the first change log of 2025. I hope you're all having an amazing start to your new year. You deserve it. As usual if you are joining us live do let us know in the chat where you're joining us from. We love to see, all the different places people are tuning in from.

We have a really great show for you planned for today. We have a docs update from Carmen, a salty Santa recap from Bryant, a community showcase of a real estate app, and a new director's TV show based on authentication. So do stick around if you are able. Any questions in the meantime, let us know in the chat, and we'll, aim to help you. And I am going to start today off by sending you over to Kevin who will be giving you a product update.

Speaker 1: Hey, everyone. Kevin here to tell you about what we've shipped in Directus in the last month or so, including our latest release last week, 11.4. Recent releases have included a lot of small optimizations, improvements, and bug fixes, but here's the highlights. It's only January. There's already a lot to talk about, so let's jump straight in.

We finally support new versions of Node. Js, upgrading our runtime version to Node 22. We had some dependencies that we weren't sure were compatible beyond Node 18, but we've checked and resolved all known issues so you can continue to run directives on current long term support versions of Node. We've also added the ability to toggle translation interface items to make them deletable while ensuring things like defaults, conditions, and validations continue to work as expected. This is a really nice quality of life improvement for projects with multilingual content.

Our Kanban layout has also received an update, now allowing you to use relational data in titles that appear on the front of cards. Version 11.3.5 and 11.4.0 have introduced a new language, Murathi, and got it all the way to a 100% coverage. This makes it the 30th language with 70% coverage or higher with over 2 thirds of those over 90%. We've also added activity tracking for field deletion, which is really useful for both accountability and visibility into what has changed in your project. You can continue to find the activity log at the bottom of your sidebar on the right hand side of the data studio.

And finally, one for extension authors and a first contribution from our new core engineer, Mike. The latest version of the CLI that ships with the director's extensions SDK has a new validate command that performs common checks to determine that your extension will run and has key qualities that we look for. In future, we're planning to tie this to the marketplace, But for now, it's a lovely local convenience tool to help you ship better extensions. You can run it now with npx create directors extension validate. And that's all from me.

Lots of updates to talk about. I'm gonna kick it back over to Beth, and I'll see you next time. Bye for now.

Speaker 0: I'm going to demonstrate each of the new extensions in Directors Labs this month. As a reminder, Directors Labs is our team's experimental org on GitHub, which regularly publishes new extensions. Firstly, we have the tree view table layout which when selected from the layout options we have the option to select the parent. Here we have team members' names, who they report to, and whether or not they are warm enough at their desks. Having selected the tree view table as the layout option, we can now drag and select who reports to who out of the list of team member names.

This then is reflected in, for example, Jack having the team members Astrid and Kate. The card select interface shown here with that information about records, adds image card select interfaces for single and multi selected use cases. You also have the ability to add via search and you can use inline SVGs via copy and paste, icons from material symbols library, or an image for the card select. Once selected these are reflected in the raw value. Another new extension is the switch interface which provides a nice alternative to the toggle interface which is default.

Another part of this is the optional description you can add to the field. Here if we go into the interface we can add a description of 'wow, an optional description, how helpful' and once saved that will be back into the switch interface. Lastly, we have the super header interface which is a really nice way of adding more context along with actions. Here we've got information about a concert and we've got the venue and we want to change the superheader into something a bit more contextually helpful. So, if we go in to the super header title, we can alter the title to be 'location', we can add an icon, so because it's a location I think the pin makes more sense and we can choose a color using the colour picker, RVDB or HSL.

I'm just going to pre select blue. You can also have a subtitle, so this is where the concert is' and we can add in helpful information to guide users so entry details will be given on the 1st of Feb. We also have the ability to add the action and that is a flow or a link. For this, I am going to say that when the button is clicked, I want us to navigate to search of concert venues. This extension gives the ability to use route level fields as variables in title subtitle or link URL and once we have changed that you can see that the super header has changed to show location and provide more context if it's needed.

Speaker 2: Hey. What's up, changelog crew? Bryant here from Directus, and I just wanted to walk you through the salty open source Santa. Alright. This is probably more of a recap seeing as Christmas is now over, but, this was a fun little app, and you may get some use out of it as well.

So Salty Open Source Santa is a Nuxt and Directus application that, basically, is the open source naughty or nice list. So you log in to GitHub, write a letter to Santa, or you can also write a letter to Santa on behalf of a friend or colleague. But, basically, we write a letter to Santa. Santa then checks your GitHub profile to see your open source contributions for the year. So behind the scenes, we're calling the GitHub API, actually using the GraphQL API.

We get your contributions, your commits, your pull requests, your reviews that you've given on pull requests, if you've sponsored anybody. And we put all that through a scoring algorithm and determine whether you are on the naughty or nice list. And then regardless, Santa writes you a roast style letter back. You can see Santa is particularly rough on me here. Been watching you, Brian, and let me tell you, your GitHub profile is about as impressive as a melted snowman.

So some of these takes are spicy. Some of them are a little more tame, but, lots of cool little features built into this application. One of them is the spiciness meter here. So, this is just how we determine whether a take or a roast letter is particularly spicy. And, if we take a look at Santa's list, we could see the spiciness level of each one of these.

So we've got a 155 folks on the naughty list, 70 on the nice list. So that's kind of, in place of a like button. You could actually roast users or organizations with this thing. And then one of the other really fun bits that we we included in this, we're using 11 Labs here to actually read the letter to you from Santa. So you can have Santa read this out loud to you, which is awesome.

A member of the core team, Pedro Pizarro, has got real chops for voice over. He's a musician as well, but he sent us the sample. We cloned the voice very quickly inside 11 Labs, and it calls their API and actually generates this for you. So if you want to check out this application, if you want to remix it yourself, go to the Directus Labs repository, look for the OS Santa repo sorry, the Directus Labs organization, and look for the OS Santa repo. You can see the full source code here.

Everything is MIT licensed, so feel free to grab it, do whatever you want with it. Hopefully, it's helpful in your own applications. I know I had a lot of fun building it, and we got some great feedback from a lot of folks around Christmas time. So that's it for me. Back to you guys.

Speaker 0: Alright. Hopefully, you are, excited to try that out for yourself if you haven't already. We have added all of the links to the various things mentioned in the chat, so do try it out and let us know what something says about you. Hopefully, you're on the nice list. Next up, we have Carmen with a documentation update and I believe Carmen's in the chat as well, so if you do have any questions whilst they're talking through, let us know, and we'll do the best to, have a chat with you there as well.

Speaker 3: Hey, everyone. My name is Carmen. I'm a developer educator at Directus and part of my role is documentation. Over the last few weeks, we went ahead and launched our brand new documentation platform rebuilt from the ground up. And I am so excited to walk you through the new structure and also tell you about our motivations.

So let's talk about content. We've been building our documentation content over several years, starting from a minimal set of requirements. It's seen a lot of input, and we wanted to take this opportunity to consolidate everything into one voice. So, every word, every sentence, every paragraph has been looked over carefully, adapted, or rewritten. This has been a group effort, not just by myself, but other educators at Directus.

As for structure, we've also carefully considered how to best lead the reader towards what they need. On the new homepage, the first thing you'll see is how to get up and running with Directus as quickly as possible with a demo. Moving lower down, you'll find a full fledged guide on getting started using Directus as well as a link to our Directus Academy video series. Let's go over our new start section. We've assembled a set of short essentials for running a Directus project from creating your data model to authentication to using real time data.

Next, I wanna show you how we've created detailed reference guides for using each of Directus' features. For example, if you need to configure authentication on your Directus project, you'll find everything you need here. Our API reference has also seen a major overhaul. It's now directly generated from our new open API specification. This is fully open source.

So, if you find anything, please feel free to open a pull request. We've also added a section dedicated to using Directus Cloud. How to self host your Directus project and finally restructured our configuration documentation to make your project much easier to configure. Over in resources, we've added a dedicated community section where you can find our contribution, authoring, and documenting guidelines. You'll also find our community maintained tooling.

If you're working on an open source tooling for Directus, please let us know so we can add it to this section on the home page. Any release changes to Directus are logged here as well. So, keep an eye out for those as they come in. Finally, we're bringing in a set of tutorials to work with Directus. If you're looking to fetch data from Directus using a specific framework, how to build specific projects with Directus, some advanced tips and tricks, migrating from other platforms to Directus, or building your very own extensions, you'll find it all here.

And there's more coming, so stay tuned. As you can see, a lot has changed and for the better, we think. You'll find this new documentation platform over at directus. Iodocs. This is an ongoing project on our end and I'd love to ask you to please have a look over the new documentation, give us feedback, and tell us what we can do to improve.

You'll find a little feedback widget on every page and our team will read all of your feedback. You can also open issues in our new directus/docs repository on GitHub. Well, that's it for me. Thank you so much for listening, and I'll see you soon.

Speaker 0: Alright. Thank you so much, Carmen. That is all looking great. And as mentioned before, if you've got any questions, do let us know. Next up, and I do say this every month, but it remains to be true, is my favorite segment of the show.

We have the community showcase. And this month, we have Shruti Kapoor building a real estate app. So sending over to Shruti.

Speaker 4: Hi, everyone. My name is Shruti Kapoor, and I'm going to do a quick demo for you to show you what I built with Directus. I'm a staff engineer currently working at Slack, and I love making coding tutorials for folks and help them get into front end. You can find all of my content up on YouTube at shruti kapoor 08. Now let's get into the demo.

Here's a demo of an app that I built with Directus, OpenAI, Landchain, Node. Js, React, and Tailwind. It's a lot of stack, but let me simplify this demo for you. So here's a place where we can search for properties. I built this pro I built this app when I was looking for real estate in Seattle, and I was sick of entering fields in Zillow and having to manually type all of the things over and over again.

So here's an app that I built. In this app, you can simply write an English language sentence like, I am looking for a 4 bedroom house with backyard, swimming pool, front yard, nice school district in the range of 2,000,000, 2,000,000, how many zeros are there in 1,000,000? 25,000,000. Let's just say I have this money. And if I hit search, that's all I have to do to look for a house and it's gonna magically look up for houses that match that preference in Seattle.

So this is what I built. Also, this is also the starting point of building a recommendation engine. I built this like and dislike button. So next so let's say that I want to build a recommendation engine where I want to see more properties that match the preferences that I like. I can hit like on a property like this one, which I feel like is very pretty, or this one, which I feel like is too crowded.

So I'm gonna dislike this. And now if I head over to my director's database, give it a reload, and see at the bottom that this property, 320 Northwest 75th Street, which was at 805, is marked as disliked in my database. And that's the grounds of setting up a recommendation engine. I can use the preferences that I set, yes or no, to build a recommendation engine that values the properties that I've already liked and tries to show you more properties like that, which will be the next part of this demo. By the way, I'll walk through this code very briefly to show you how I'm integrating with OpenAI.

But if you're interested in a detailed walk through of this app, here is a video I've built on my channel which you can watch, Building an AI powered real estate app. But for now, let me show you how I integrate with LMM. So I've got this file called llm. Js, and this is all I'm providing my LMM. Okay?

K. I'm creating an open AI, NLM, just providing it my API key. Then I'm setting a parser. I'm using the structured output parser and giving it a ZOD object that I want to create. The ZOD object that I want to create is price ending, which is gonna be a budget, which provides us a budget range of what my property should be, number of bedrooms for the house that I'm looking for, number of bathrooms.

I can also provide a default value. For example, 1, if no bathroom was provided and a nice to have, which in my case would be backyard, swimming pool, front yard, front yard, nice school district, things like that. And, again, I can provide if there is nothing provided, return backyard because that's the kind of person I am. I love backyard. That's all I need to create is that object.

And with this parser, I can then invoke my chain, which is how I call LLM. I'm gonna provide it a template. I'm gonna say, parse the description provided by user, and that is the text that I'm entering here at the top. And I'm gonna say pass the description provided by the user to extract information about real estate preferences. Which information?

Exactly this information that I'm defining up here. And then all I need to do is invoke my chain with the description that the user has provided and the format instructions that I just generated over here. And that's how you call LLM. I'm saving all of this data in the database, which is direct us, and this will be helpful in creating a recommendation engine in the future. I can also save all of the properties that I've liked in the database.

Thank you for watching my demo.

Speaker 0: Alright. Thank you so much once again to Shruti for that, and I will post the link to her full video shortly. We have a new Directors TV episode next. It came out today. It's one of 5 episodes focused on authentication.

So we're going to send in the authentication avenue next.

Speaker 1: Hey there, developers, and welcome to authentication avenue. Ever wonder how your favorite apps know it's really you trying to log in? Well, today we're diving into authentication, the digital world's way of checking your ID. Let's imagine we're at our local library. When you want to borrow books, you need a library card.

But getting that card isn't as simple as just walking in and saying, hey, I'm Kevin. Here's what actually happens. 1st, you fill out an application with your information. That's you claiming who you are. Then you show your ID or proof of address.

That's you proving that you are really you. And only after verifying your identity does the librarian give you your very own library card. Now, every time you come back to borrow books, you show that library card. The librarian can check their system and confirm it's a valid card that actually belongs to you. And that's exactly how authentication works in the digital world.

When you log in to your favorite app, you don't just type in your email and poof, you're in. Just like at the library, you need something to prove it's really you with something only you would know, your password. Now in the developer world, authentication is like that library card system. When users try to access their private data or personal settings, authentication verifies their identity using something they know, like their password, something they have, like their phone or verification codes, or something they are like their fingerprint. We call all of these authentication factors, and they're the digital equivalent of that library card and ID check.

Now, once you've proven who you are, you need a way to show it with each request, like carrying your library card. In the digital world, we have a few ways of doing this. Most commonly, you will use what is known as a bearer token. It's like carrying an ID card that says, I've already proved who I am. You include this token in a special part of your request called the header.

Or you might use cookies. These are like invisible name tags that your browser automatically shows to websites you've logged into before. Super convenient. And while you technically can include your credentials as query parameters in a URL, for example, example.com/, or question mark token equals 12345, we don't really recommend this because sometimes URLs can be logged. And that's like writing your password on a sticky note where anyone can see it.

So remember, authentication isn't just about saying who you are but it's about proving it. Next up, we'll see how this works in practice with Directus, but first, let's return our library card. Here we have a posts collection in a Directus project, but this collection is not publicly accessible, so we will need to authenticate as a user with the requisite permissions in order to access this data. And we see here when we just try and access it, when we try and list the posts, that we get an error. You don't have permission to access the collection posts or it does not exist, which is correct because it doesn't know who we are.

We have not authenticated. Now as mentioned, there's a few ways to authenticate. One of the most common is by passing in what is known as an authorization header. So the headers get sent along with our request. The value is bearer, space, and then a valid access token of a user that has permissions.

And when we hit send, we will get this data back. As I mentioned, there is also another way of doing this, which is via a query parameter to your request. So you can include access token equals value, and, again, that will successfully authenticate. The reason I'm showing you this is to actually dissuade you from using this approach because this full URL, you can type it in your browser here, will return data, but this full URL, including your access token, could be logged by your browser history, by your browser extensions, by your Internet service provider, your corporate VPN provider, and so on. And so to keep it secure, we tend to not use this approach too much.

I do also wanna show you how to get an access token and authenticate using the Directus SDK. So here we have just a JavaScript file. We are initializing a new Directus SDK instance, and what we're going to do is import the authentication composable. And then we are going to initialize the client with the composable. This gives us a brand new function.

We can now type in directus dot login and provide our email and our password, these values here. And this client will now be authenticated. So now we can go ahead and actually query our post's data. Let's import rest and read items, which we'll need to make this request, and add the rest composable to our client. And now we can go ahead and make a query, directors dot request read items posts.

And then we'll console log the items, and this line here, specifically, is what is authenticating us. Let's see if that works, and we should see, promise pending. Absolutely. We just need to put in await there, and we will now see that once the data is returned, it is displayed here. So this is how we authenticate using the SDK.

Join me in the next episode of authentication avenue where we will cover a brand new topic.

Speaker 0: We want to take a moment towards the end of the changelog for thanking our community contributors who give their time to develop the Directors Project. Since last month, there have been 16 contributors. A huge thank you to Johannes for adding ability to map OIDC groups to OIDC roles, Junhong for ensuring floating view will not scroll top after route change and adding internationalization to rich text editor toolbar, Dominic for fixing the alignment of the 'select all' checkbox in the notifications drawer, and adding system argument for the clear cache function in the SDK, Robson for enhancing vertical alignment of SSO icons on login page, Osman for fixing an issue with unintentional sorting after editing items in relational interfaces, Gavelium for improving the default user created display template by using the avatar field, Gloria for increasing raw editor max height, Nick for adding assigning admin policy to a new role created via command line when needed, Paulius for adding ID token to provide a payload in auth create and auth update filter hooks, gene for improving the performance of relational lookups, DATNA for adding a discriminated union scenario to m to a query type resolution, Matthew for adding support for title and text fields to display related values in the kanban layout, culdip for adding Morathi to the list of translations, ben for clearing login error message on successful credentials when TFA is enabled, amateo for improving flow notification messages to differentiate between async and sync flow execution, Jason for fixing typo in 3 files.

Thank you again to all our contributors. You can see their specific pull requests inside the full release notes on GitHub. Lastly, we want to take the time to thank our GitHub Sponsors of December who financially contribute to their riches' development. Thank you to Tommy, Entle, Jamilid, Fergus, Omar, Marcus, CK, Peter, Utomic, Steven, Robson, Nonlinear, Andrea, Valentino, John, Wayne, Bjorn, Adam, Jason, Birka, Jens, Vincent, Mike, Khan, Lessey, and Wayfair. The money we are given from our GitHub Sponsors goes straight back to community members who build tooling and extensions for the director's ecosystem.

Thank you again for being part of that. Alright. And that is the January change log. Thank you so much to everyone for sticking around if you are still here. I hope you have enjoyed and been, educated by what we are showing.

If you do have any questions in the meantime after this change log, we're always around in Discord to, hear what your thoughts are. And, additionally, if you have anything you'd like to see as part of the change log, always keen on feedback here, so do let us know. Thank you so much for joining us, and join us next time. The information will be around the discord events tab. So, yeah, keep an eye out for that.

And thank you so much for joining us. Have a great rest of your day, week, and see you soon. Bye everyone.