This Dot Blog
This Dot provides teams with technical leaders who bring deep knowledge of the web platform. We help teams set new standards, and deliver results predictably.
Integrating AI models into Dev Platforms (Low-Code, Accessibility, and APIs) with Amanda Martin from Wix
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....
Jul 11, 2024
1 min
Nuxt DevTools v1.0: Redefining the Developer Experience Beyond Conventional Tools
Nuxt DevTools v1.0 is a game-changer for web developers, featuring integrated VS Code, real-time views, and a customizable UI. This new toolset enhances efficiency, revolutionizing web development....
Dec 1, 2023
8 mins
Performance Analysis with Chrome DevTools
When it comes to performance, developers often use Lighthouse or similar performance analysis tools. But when the target site has protection against bots, getting information is not that simple. Chrome Devtools can help you with your performance analysis....
Jan 9, 2023
6 mins
How to Solve CORS using a Proxy Server and Koa
No matter how much experience you have in software development, you've likely had to deal with the CORS problem. The good news is that there are now new and different ways to solve this issue, from using an extension for your favorite browser, to defining a custom solution. In this post, I'll explain how to implement a basic Proxy Server using Node.js so that you can use it even if you're using a different programming language for your main application. The Problem Let's suppose you're building a Single-Page Application, and it's running fine in your local environment http://localhost:8000. At some point, you'll need to perform HTTP requests to an existing server to obtain data, or even authenticate you. All these services are running below https://app.mydomain.com. At the time you make the requests, you may have an error like the one shown below: ` In this particular case, the browser will restrict the cross-origin HTTP requests for security reasons. The Solution In the problem explained above, there is a Single-Page Application that needs access to resources or data. So, there is a security issue on the frontend side, and it can be solved by running a server in just a few steps. Koa For the Proxy Server implementation, we're going to use Koa, which is a web framework for Node.js. > Koa is a new web framework designed by the team behind Express, which aims to be a smaller, more expressive, and more robust foundation for web applications and APIs. It seems that there are very good reasons to use it, right? :-) Prerequisites You'll need to have installed the following tools in your local environment: - Node.js. Preferably the latest LTS version. - A package manager. You can use either NPM or Yarn. This tutorial will use NPM. Koa Installation Before installing Koa and other dependencies, let's create a folder for the Proxy Server: ` Now, let's install Koa as the first dependency ` As the next step, let's create a proxy.js file with the following content: ` This is the simplest way to create an HTTP server using Koa. You can run it through node proxy.js command. Of course, it is not very useful yet, but it will help as a basis for implementing the proxy. Koa Proxy and CORS It's time to install the next dependencies: @koa/cors and koa-proxies: ` - @koa/cors is a package to enable CORS (Cross-Origin Resource Sharing) with Koa. - koa-proxies is a package powered by http-proxy, which is a full-featured HTTP proxy for Node.js Now, let's update the proxy.js file, including @koa/cors, to enable CORS in the current implementation. ` As you can see, the Koa object gets available through new Koa(), and right after that, you can apply a middleware using the app.use() method. - cors(), enable CORS with default options, and allow several HTTP Methods. Take a look the available Koa middleware list for more reference. Proxy Server As the last step, let's configure the Koa proxy using the installed koa-proxies library. ` Again, the app.use() method enables the use of proxy() as a middleware. Pay attention to the used options: - target, the URL string to be parsed - changeOrigin, changes the origin of the host header to the target URL - logs, enable default logs The TypeScript Solution The previous solution works fine using JavaScript only. In case you require using TypeScript, you'll need to create the tsconfig.json file first: ` This command will auto-generate the tsconfig.json file using default options for the compiler. Let's apply a couple of updates before moving forward: ` Next, let's install the TypeScript types for koa and @koa/cors packages: ` Finally, create the proxy.ts file with the following content: ` As you may see in the previous code snippet, it's about using the right types, and configuring the TypeScript compiler. You can run the proxy.ts file using this command: ` Which will run the TypeScript compiler followed by the generated script: tsc && node dist/proxy.js. Source Code of the Project Find the complete project in this GitHub repository: cors-proxy-server-koa. Do not forget to give it a star ⭐️, and play around with the code. Feel free to reach out on Twitter if you have any questions. Follow me on GitHub to see more about my work....
Aug 3, 2021
4 mins
Developer Tools & Debugging in NgRx
Developer Tools & Debugging in NgRx When working on a complex software solution, we often find ourselves scratching our heads over a bug that was reported to us. It's essential to have proper tools to trace the issues which like to hide in our code execution paths. Luckily for the devs using NgRx in their project, the application state is kept in a single location and all the actions that can modify it are easily traceable with some great DevTools. As NgRx adheres to the redux pattern, we can use the same Redux DevTools as we would use for any other Redux base application. This tool is essential for me when debugging an NgRx based application. If you haven't worked with NgRx yet, I recommend reading this post first where I introduced the NgRx pattern into a simple app. Getting started In order to make our NgRx store visible in the Redux DevTools, we need to pull in a module provided by NgRx platform - @ngrx/store-devtools. For the installation instructions, please visit the official installation guide. After installing the Store Devtools using the AngularCLI schematics, the following code is automatically added to our AppModule: ` maxAge property is limited to 25 by default for performance reasons - this is the limit of actions stored in the history tree. logOnly is usually set to true on production build to limit the number of features used when connecting to Redux DevTools. I suggest adding name property to our initial configuration to more easily find our state in the DevTools (as it will show all the other stores which might be used in other tabs open in the browser). ` With that minimal setup, we can already start using the Redux DevTools to start debugging our application. You can access the Redux DevTools in the Redux tab on your browser developers tools. Tracking actions The first thing you can do in the Redux DevTools is track all the actions that have been dispatched within the application. For every selected action, you can see the current state value, what exactly has changed in the state as a result of this action, and the content of action object. Moreover, the extension gives you the possibility to "time travel" your application and skip some of the actions to see how it would affect the end result of the state. You can either manually select the point in time to jump to or replay the whole sequence of action using timeline at the bottom. Those functionalities alone provide us with handful of possibilities on tracking how the state of our app is changing over time and pinpointing the possible issues. Replicating the app behavior Another very powerful feature of the Redux DevTools is tha posibility to dispatch the actions without the need of interacting with the UI. It's available as one of the tabs in the bottom extension's menu: By using this feature, we can dispatch any action we want. This is extremely useful if we find the exact course of actions that is leading to an error, but it's hard or long to replicate using the UI. We can enter and dispatch the desired sequence of actions and get to the troublesome point in the app state with ease and in a reproducible manner. There are a few features that combine well with the aforementioned dispatching technique: - Persisting the state - Commiting and reverting the state When we select the persist option, the extension makes sure that our state is persisted and restored even after we reload the page. The commit option allows us to store the state at the specific point in time and treat it as a starting point (it's like saving the game before going on to fight with the boss 🤓). You can perform as many actions as you want from this point on, but you'll always be able to restore the state to a point in time at which you've done a last commit. The restore functionality is only available in the log monitor and not the inspector. This plays really well with dispatching actions directly from the extension. We can test and debug how our application behaves (ie. via Effects) when dipatching a specific action with always exactly the same comitted state. Also, it's easy to repeat by reverting the state and dispatching the action again. NgRx Store Dev Tools options So far we've covered many use-cases of the Redux DevTools, but we can configure it's behavior to our needs when setting up the StoreDevtoolsModule. In real life applications, our action log might consist of hundreds of actions which might pollute our view of what is happening in the app. We can filter them out directly in the extension but that doesn't solve the issue of the limit on number of actions visible at once. We're still limited by whatever the limit we set, and for performance reasons, we should not take this limit off or set it too high. For debugging purposes, we might only be interested in certain type of actions or definitely know that some actions (ie. the one dispatched by Angular Router) might not be useful to us at the given moment. When setting up our StoreDevtoolsModule we're given 3 ways to filter the actions that will be sent to the Redux DevTools extension: - actionBlocklist - actionSafelist - predicate The first two are the most common ones to use. We can either block specific patters of actions (which we know that are not of interest to us) or we can allow only certain types of actions. Both of them take an array of strings as a value and act as a regex on action type property to filter out only the ones we're interested in. If we want to do more specific filtering, we can use predicate. It takes current state and action as parameters and is called for each dispatched action. To allow action to be passed to the Redux DevTools extension, it must return true. With those techniques, we can narrow the scope of actions visible in the extension and therefore make it easier to get the grasp of what is happening in the app. Conclusion With the tools and techniques mentioned above, you should be able to debug your NgRx based application with a bit more ease. It's important to know the tools you have available so that you can use them when the need arises. In case you have any questions you can always tweet or DM at me @ktrz. I'm always happy to help!...
Mar 1, 2021
7 mins