Javascript

Integrating AI models into Dev Platforms (Low-Code, Accessibility, and APIs) with Amanda Martin from Wix

Published Jul 11, 2024

Updated Jul 11, 2024

1 min read

In this interview at RenderATL 2024, Tracy Lee and Rob Ocel interview Amanda Martin, a developer advocate at Wix, about integrating AI models into web development platforms. The conversation covers incorporating AI into low-code environments, emphasizing the accessibility of AI technologies through APIs and pre-built models. Amanda stresses the importance of understanding tools, security, and reliability, as well as practical applications and inspiring creativity in developers.

The conversation touches on the accessibility of AI technologies in low-code environments. Amanda highlights the ease of incorporating AI through APIs and pre-built models, making it more accessible for developers of all skill levels. Understanding the available tools and services is crucial, with considerations for factors like security and reliability. By staying informed and up-to-date, developers can leverage AI to enhance their web development projects.

Amanda stresses the importance of showcasing practical applications and inspiring creativity in developers. Rather than simply selling products, she believes in driving meaningful engagement with technology through hands-on experience and genuine passion. By encouraging developers to explore the possibilities of AI, Amanda believes they can unlock their full potential and create innovative solutions.

Download this episode here.

This Dot is a consultancy dedicated to guiding companies through their modernization and digital transformation journeys. Specializing in replatforming, modernizing, and launching new initiatives, we stand out by taking true ownership of your engineering projects.

We love helping teams with projects that have missed their deadlines or helping keep your strategic digital initiatives on course. Check out our case studies and our clients that trust us with their engineering.

Adding RAG to a Chatbot using AstraDB, Cohere, OpenAI, Vercel and Next

In this training led by Mark Shenouda, viewers learn how to integrate ChatGPT using technologies like Vercel, Next.js, and Tailwind CSS. This training covers generating code with AI, setting up OpenAI providers, and using AstraDB for data storage. This guide will show how these tools can create intelligent, efficient, and visually appealing applications that offer personalized user experiences. ChatGPT, developed by OpenAI, changes how we interact with AI models. With its advanced natural language processing capabilities, it offers many possibilities for developers and businesses. By integrating ChatGPT into projects, we can create intelligent chatbots, automate tasks, and provide personalized user experiences. The ability to generate human-like responses and understand context makes ChatGPT a powerful tool for enhancing customer engagement and operational efficiency. Next.js is a powerful React framework and makes ChatGPT integration easy by providing a strong foundation for building dynamic and interactive user interfaces. Its server-side rendering capabilities ensure fast and efficient content rendering, resulting in a smooth user experience. By combining the power of ChatGPT with Next.js, developers can create intelligent chat interfaces that respond to user queries in real time. Additionally, Tailwind CSS, a utility-first CSS framework, simplifies the process of styling and designing user interfaces. With its extensive set of pre-built components and utility classes, developers can quickly create visually appealing interfaces without the need for custom CSS. Vercel, a popular cloud platform for static sites and serverless functions, offers an easy integration experience for ChatGPT. With Vercel's simplicity and ease of use, setting up actions and deploying apps becomes straightforward. Vercel provides the infrastructure needed to bring your ideas to life. Its intuitive deployment process and scalability ensure that your applications run smoothly and can handle varying levels of traffic. AstraDB, a data storage solution, plays an important role in maximizing the potential of ChatGPT integration. By storing relevant data in AstraDB, developers can access and retrieve information efficiently, enabling the chatbot to provide accurate and contextually relevant responses. One of the key advantages of ChatGPT integration is the ability to customize the chatbot's behavior and responses. Developers can also use OpenAI’s fine-tuning to tune the model to align with their specific requirements, ensuring a personalized and tailored experience for users....

Jun 17, 2024

2 mins

AIArtificial Intelligence

Unlocking AI's Potential: Data Strategies with Jan Zirnstein

Jan Zirnstein examines the intricacies of data science and AI, focusing on the challenges and opportunities that lie ahead. As organizations increasingly rely on data to drive decision-making, it's essential to establish clear guidelines and protocols for data management. Jan emphasizes that organizations must take ownership of their data, ensuring its accuracy, security, and ethical use. By implementing robust data governance practices, organizations can build trust, mitigate risks, and fully leverage AI technologies. Jan also stresses the need for education on AI technologies for leaders. As AI becomes more prevalent across industries, leaders must understand its capabilities, limitations, and potential biases. By fostering a culture of continuous learning and providing leaders with the necessary knowledge, organizations can make informed decisions and effectively use AI tools to drive innovation and growth. Education ensures that leaders are equipped to navigate the complexities of AI and make strategic choices that benefit their organizations. Along with Rob Ocel, he points out the importance of recognizing and correcting biases in training data, as these can perpetuate and amplify societal inequalities. By implementing rigorous data labeling processes and considering diverse perspectives, organizations can strive for fairness and inclusivity in their AI applications. Tackling bias is essential to creating AI systems that are equitable and credible. Lastly, Jan underscores the importance of continuous validation and ethical considerations in AI applications. As AI models evolve, it is crucial to regularly validate their performance and ensure they meet ethical standards. Transparency and accountability are key to building trust with users and stakeholders. By prioritizing ethics and embracing transparency, organizations can harness the full potential of AI technologies while minimizing potential risks. The conversations between Rob Ocel and Jan Zirnstein underscore the significance of data ownership, leader education, bias correction in data labeling, and ongoing validation, guiding organizations to navigate the evolving technology landscape and drive innovation, productivity, and societal progress. Download this episode here....

Jun 24, 2024

2 mins

AIArtificial Intelligence

Tim Neutkens, Co-Author of Next.js on the State of Next

Watch this episode! Tim Neutkens, Co-author and Tech Lead for Next.js, discusses how open source maintainers are simplifying the web, and covers the challenges faced with the current Next.js setup. Tim talks about TurboPack, a solution that optimizes bundling, improves parallelism, caching, and module graph calculations. He also talks about TurboAC, which focuses on addressing performance and compatibility issues, providing seamless transitions for Next.js users. Tim highlights the importance of efficient bundling processes to avoid excessive recompilation and discusses the updates in Next.js versions to enhance caching, rendering behavior, and client-side caching. Tim also discusses some exciting upcoming features in Next.js 15. Tim Neutkens' Socials - Twitter: @timneutkens - GitHub: timneutkens - Bluesky: timneutkens.bsky.social - Website: https://timn.tech/ Links - Vercel on Twitter, LinkedIn, Facebook, Instagram, YouTube, GitHub and Vercel's website - Next.js on Twitter, GitHub, LinkedIn, YouTube, Instagram, Facebook, official Next.js website - Turbopack on Twitter, GitHub, YouTube, LinkedIn, Instagram, Official Turbopack Docs - Webpack on GitHub, Twitter, YouTube, and Official Webpack Website Show Notes - [00:00:02] Podcast episode featuring Tim Neutkens discussing Next.js and the upcoming release of TurboPack. - [00:04:27] JavaScript bundlers evolving to handle growth. - [00:07:58] TurboPack solves Webpack limitations efficiently. - [00:12:12] Bundler compatibility for optimal app performance. - [00:16:50] Client components separated in webpack instance. Turbo pack for better parallelism and stability. Industry moving towards server-side. Feed and rollup still relevant. Collaboration between tools for future. - [00:20:57] Replacing part with roll down, similar to Webpack. Overlapping ecosystem with Avonetic Conference. Limits with unbundling and loading on demand. Cycle of building frameworks and hitting limits. History of using Webpack for client-side code. Two compiler architecture for server and client. Coordination between server and client with Webpack. - [00:25:38] Server action imports, turbo pack improves performance. - [00:30:04] Next.js is popular for websites. - [00:34:18] Chipotle using Next in Vercel, exciting improvements. - [00:38:51] Next.js 15 release candidate with changes. This episode is sponsored by Wix Studio....

Aug 7, 2024

2 mins

VercelNextJS

Making Seamless Page Transitions with the View Transitions API

Make Seamless Page Transitions using the View Transitions API Traditionally web applications have always had a less polished experience, both functionally and visually speaking, compared to native applications on mobile and other platforms. This has been improving over the years with the introduction of new web APIs and standards. One such new API that bridges that gap is the View Transitions API. What is the View Transitions API? The View Transitions API is a new browser feature that allows developers to more easily create animated transitions between pages and views, similar to how mobile apps have transitions when navigating between pages. Adding view transitions to your application can reduce the cognitive load on your users and make the experience feel less inconsistent. One great thing about view transitions is that they can be used by both SPAs (single-page applications) and MPAs (multi-page applications) alike! Using the View Transitions API for SPAs Let’s see how we can use view transitions ourselves. We will use examples adapted from demos created by the wonderful Jake Archibald and Bramus. There are some alterations to a few of the examples to make them work with the newest version of the View Transitions API, but otherwise, they’re mostly the same. The process of getting view transitions working for SPAs is as simple as calling document.startViewTransition right before starting navigation and replacing your page’s content immediately after that. You need to make this call in your router or in an event listener that triggers your page navigation. The following is an example of how you can hook into page navigation in a vanilla JavaScript application. This example uses the Navigation API if it’s available. As of the time of writing this article only Chromium-based browsers support the Navigation API, but there is a fallback to using a click listener on link elements so that this works with Firefox and Safari. ` If you’re using a framework, then there’s probably a better way to do this specific to that framework than by using this contrived example. For example, if you are implementing usage of this API with a Next application, you may opt for something like next-view-transitions. For this article, we’re going to focus on the way this is done in vanilla JavaScript so that the fundamentals of using the API are understood. Knowing how it’s implemented in vanilla JavaScript should give you enough understanding to implement this in the framework of your choice if there isn’t already a library that does it for you. Now we have a way to know when a navigation is being requested. Using the above utility function we can start the animation and replace our content as follows: ` getMyPageContentSomehow can be any function that returns HTML. How that is implemented will depend on your application and framework of choice. If you want to run these examples on your machine, the demo repository has instructions in its README. In essence, it’s as simple as hosting an HTTP server at the root of the project and visiting localhost. No fancy build system is required! By default, a fade is done that only lasts for a moment. The animation that happens can be configured using CSS with the ::view-transition-group pseudo-element on the element you want to animate, which in our case is the entire page, and we pass in root. ` Given that the animation properties are used, you have much control over what kind of animation to do. You can change the duration and the interpolation, add keyframes and gradients, and even add image masks. You can learn more about the animation properties in CSS on MDN. Using the View Transitions API for MPAs As mentioned, view transitions also work for MPAs with no client-side routing. Setting up view transitions for MPAs is much easier than for SPAs. All you have to do is include the CSS rule on all pages where you want the animations. ` Of course, like how it works with SPAs, you can customize the animations to your heart’s content using the view transition pseudo-elements. Conclusion I hope this article helped you understand the fundamentals of using the View Transitions API. Now that most browsers support it and it’s not too difficult to add it to existing applications, it is a great time to learn how to use it. You can view a full list of examples here (made by Jake Archibald and Bramus) if you want to see how advanced the animations can get. I like the Star Wars ones especially. The README explains how to get all the examples up and running (a total of 43!)....

Aug 2, 2024

4 mins

JavaScript

Integrating AI models into Dev Platforms (Low-Code, Accessibility, and APIs) with Amanda Martin from Wix

You might also like

Adding RAG to a Chatbot using AstraDB, Cohere, OpenAI, Vercel and Next

Unlocking AI's Potential: Data Strategies with Jan Zirnstein

Tim Neutkens, Co-Author of Next.js on the State of Next

Making Seamless Page Transitions with the View Transitions API

You might also like

Adding RAG to a Chatbot using AstraDB, Cohere, OpenAI, Vercel and Next

Unlocking AI's Potential: Data Strategies with Jan Zirnstein

Tim Neutkens, Co-Author of Next.js on the State of Next

Making Seamless Page Transitions with the View Transitions API