Laravel’s Service Container makes coding easier by automatically handling dependencies. Instead of manually creating objects and passing them around, Laravel does it for you. This helps keep your code clean, reusable, and easy to update.
In this article, we’ll look at how the Service Container works, why it’s useful, and some common mistakes developers make—like using the Factory Pattern when they don’t need to.
Service Container
The Service Container is a fundamental piece of what makes Laravel easy to code with. You could think of the Service Container as a delivery truck that has every tool you need.
The Laravel Service Container is essentially a central database of objects. It allows for objects to be re-used in different parts of your web app.
1
2
3
4
5
6
7
8
9
10
11
12
// The app() helper function provides access to the service container:
$container=app();
// The service container pulls instances of object:
$request=app('request');
If you’re coding in Laravel, you will need to know how to work with the service container.
Dependency Injection
One of the great things of the service container is it allows for dependency injection, which you could think of as the delivery truck driver being able to read your mind and bring you everything you were thinking of.
When a method is called, the service container will automatically pass or “inject” the implementation as an argument.
Here’s an example of a class with a method we want to call:
Without dependency injection, we call doSomething this way:
1
2
3
4
5
6
7
8
9
10
$obj=newMyClass();
$repository=newEloquentSettingRepository();
$obj->doSomething($repository);
With dependency injection, we can call the same method easier:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// Bind EloquentSettingRepository to SettingRepository (usually in the service provider):
app()->bind(SettingRepository::class,
EloquentSettingRepository::class);
// Use the service container to instantiate MyClass:
$obj=app(MyClass::class);
// An instance of EloquentSettingRepository will automatically be passed to the method:
app()->call([$obj,'doSomething']);
Although the second example has more code, the idea is that the binding is reused when another method is expecting the same type (reducing the amount of code overall). Another advantage is it makes the code more maintainable because if you want to switch to another implementation, all you have to do is update the binding in the service provider:
The abstract EncryptionAlgorithm doesn’t need to be bound to a factory callback. If the implementation for SettingRepository did change, that would make the factory binding irrelevant.
The EloquentSettingRepository implementation is bound to SettingRepository so we should at least be using the service container to make SettingRepository.
Most importantly, this breaks dependency injection. There maybe a time when you would need to do this, but that would be very limited.
Instead, it’s best to let Laravel do it’s magic and build the object for us:
Laravel’s Service Container makes coding easier by automatically handling dependencies. Instead of manually creating objects and passing them around, Laravel does it for you. This helps keep your code clean, reusable, and easy to update.In this article, we’ll look at how the Service Container works, why it’s useful, and some common mistakes developers make—like using the Factory Pattern when they don’t need to.
Service Container
The Service Container is a fundamental piece of what makes Laravel easy to code with. You could think of the Service Container as a delivery truck that has every tool you need.The Laravel Service Container is essentially a central database of objects. It allows for objects to be re-used in different parts of your web app.
[crayon-67bb15c9560ea429358431/]
If you’re coding in Laravel, you will need to know how to work with the service container.
Dependency Injection
One of the great things of the service container is it allows for dependency injection, which you could think of as the delivery truck driver being able to read your mind and bring you everything you were thinking of.When a method is called, the service container will automatically pass or “inject” the implementation as an argument.Here’s an example of a class with a method we want to call:
[crayon-67bb15c9560f5554359771/]
Without dependency injection, we call doSomething this way:
[crayon-67bb15c9560f8738219665/]
With dependency injection, we can call the same method easier:
[crayon-67bb15c9560fa002022377/]
Although the second example has more code, the idea is that the binding is reused when another method is expecting the same type (reducing the amount of code overall). Another advantage is it makes the code more maintainable because if you want to switch to another implementation, all you have to do is update the binding in the service provider:
[crayon-67bb15c9560fd859937660/]
There are other things that you can do, such as adding singleton or scoped instances. More information is located in theLaravel documentation.
Factory Pattern
The service container also provides the factory pattern. The factory pattern allows you to specify how an object is created (using a callback):
[crayon-67bb15c9560ff500888020/]
Then we can get an instance of “SomeInterface” later on in the code:
[crayon-67bb15c956101824254126/]
Problem & Solution
The problem is when programmers reinvent the wheel by using the factory pattern to do what dependency injection would be doing already:
[crayon-67bb15c956103534004687/]
There’s a couple problems with the above:
The abstract EncryptionAlgorithm doesn’t need to be bound to a factory callback. If the implementation for SettingRepository did change, that would make the factory binding irrelevant.
The EloquentSettingRepository implementation is bound to SettingRepository so we should at least be using the service container to make SettingRepository.
Most importantly, this breaks dependency injection. There maybe a time when you would need to do this, but that would be very limited.Instead, it’s best to let Laravel do it’s magic and build the object for us:
[crayon-67bb15c956105865838409/]
There’s no more factory for “EncryptionAlgorithm” because that’s the magic of Laravel. Work smarter, not harder!
Web development is evolving faster than ever, with new technologies and tools reshaping how we build and optimize today's web applications. As we step into 2025, let’s explore the most significant trends, advancements in JavaScript frameworks, and predictions for the future of web development.
AI-Powered Development: A Game Changer
Artificial Intelligence (AI) is revolutionizing the way developers write, debug, and optimize code. Tools like GitHub Copilot, ChatGPT Code Interpreter, and Tabnine are enhancing productivity by generating boilerplate code, suggesting fixes, and even writing entire functions. It's also being used to auto-generate UI components and improve accessibility. Frameworks like Tailwind CSS and Material UI are integrating AI for better design recommendations. Lastly (but not finally), AI-driven testing tools are predicting possible failure points, auto-generating test cases, and improving test coverage, reducing overall manual effort. We will see AI's further integration into IDEs, making web development more intuitive and reducing the need for repetitive coding tasks.
WebAssembly (WASM): Expanding Beyond JavaScript
WebAssembly (WASM) is allowing developers to run high-performance code in the browser, opening up new possibilities for web apps. It enables languages like Rust, Go, and C++ to run in the browser with near-native performance. This improves gaming, video editing, and real-time collaboration tools on the web, as well as having faster execution for compute-intensive applications, such as AI models running in the browser.
Figma & Adobe Photoshop Web are good examples of modern web apps using WebAssembly to deliver high-performance experiences directly in the browser. This is also giving way to Web-Based Game Engines.
Edge Computing & Serverless Architectures
With the growing demand for speed and efficiency, developers are shifting toward Edge Computing and Serverless Architectures for faster response times. Platforms like Cloudflare Workers, Vercel Edge Functions, and AWS Lambda@Edge are reducing latency by executing code closer to users. Developers are decentralizing hosting services and leveraging platforms like Supabase and Firebase to eliminate backend complexity. Serverless and Edge Computing will become the default for handling real-time interactions, API calls, and content delivery.
New Features in HTML, CSS, and JavaScript
Among the most recent updates for HTML we can find the <dialog> element improvement with better support for modals.
Container Queries are making responsive design more flexible without media queries.
Declarative Shadow DOM is also a game-changer for web component adoption.
As for CSS, the :has()selector has finally arrived as a parent selector!. Also Subgrid is improving CSS Grid layout control.
And you can now find new color functions like: color-mix(), relative color syntax, and light-dark() for better theme handling.
Javascript is also seeing some improvements with Temporal API, which is a better way to handle dates and times. The Pipeline Operator (|>), which simplifies function composition. Also improvements in modularization for Web Workers are signaling that JavaScript will continue to evolve, with native browser APIs replacing more third-party libraries.
Expect lighter, faster frameworks with built-in support for server-side rendering, hydration, and progressive enhancement. Several frameworks and tools are leading the next wave of innovation in 2025, such as:
Next.js 15 – Improved React Server Components and TurboPack for faster builds.
Bun 1.0 – A JavaScript runtime competing with Node.js, offering faster execution and better native APIs.
Deno – Growing in popularity for secure, modern JavaScript applications.
Qwik & SolidJS – Pushing boundaries with instant-loading JavaScript apps.
The future of web development in 2025 is exciting and full of possibilities. With AI-driven coding, high-performance WebAssembly applications, and the rise of Edge Computing, developers have more tools than ever to build fast, efficient, and scalable applications. Staying ahead of these trends will be key to remaining competitive in the evolving web landscape.
In web development, time is precious. As developers often say, "Don't reinvent the wheel." Instead, use existing tools and libraries to speed up your work. Leveraging UI component libraries allows you to focus on what makes your app unique while ensuring a consistent and polished interface.
A well-designed UI enhances the user experience, boosts usability, and ensures consistency across your application. One critical aspect of UI design is layout, which dictates how elements are arranged on the screen. A good layout improves navigation, readability, and overall user satisfaction.
In this post, we'll explore some of the most popular UI libraries for React: Material UI (MUI), Next UI, WindUI, Tailwind UI, and React-Bootstrap. We’ll look into their pros and cons, specifically focusing on how they handle layout, to help you make an informed decision for your next project.
Material UI (MUI) is one of the most widely used UI libraries, based on Google's Material Design guidelines. It offers a vast array of pre-styled components like buttons, cards, grids, and typography. It’s highly customizable, allowing you to adjust themes and styles to match your brand.
Pros:
Consistency: Adheres to Material Design principles for a polished look.
Customizable: Extensive theming options for colors, typography, and layout.
Comprehensive Components: Wide range of components suitable for complex projects.
Powerful Layout System: Provides a robust Grid system and layout components to create responsive designs.
Active Community: Regular updates and thorough documentation.
Challenges:
Learning Curve: Might be overwhelming due to extensive customization options.
Bundle Size: Can increase your project's size, affecting performance if not optimized.
Opinionated Design: Material Design may not fit all project aesthetics, requiring extra customization.
Example:
[crayon-67bb15c964051379083328/]
In this example, we create a card with an image, text, and a button using MUI's Card component.
Next UI is a modern, lightweight library focused on simplicity and performance. It offers an elegant design system ideal for building responsive, sleek UIs without sacrificing speed.
Pros:
WindUI is built on Tailwind CSS, enabling the creation of fast and highly customizable UIs. It combines Tailwind's utility-first approach with pre-built components for flexibility and ease of use.
Pros:
Flexible Styling: Leverages Tailwind's utility classes for granular control.
Tailwind UI enhances Tailwind CSS by offering a collection of professionally designed, responsive components. It allows you to quickly integrate high-quality UI elements into your project.
Pros:
Professional Design: Offers polished, ready-to-use components.
Customization Flexibility: Tailwind's utility classes make styling straightforward.
Responsive Out of the Box: Components are designed with responsive layouts in mind.
DaisyUI is built on top of Tailwind CSS, offering a collection of customizable, accessible components that follow modern design principles. It allows developers to quickly create responsive interfaces while leveraging the full power of Tailwind CSS.
Pros:
Ready-to-Use Components: Comes with pre-built, styled components, making it easier to set up UIs quickly.
Customizable:Since it's built on Tailwind CSS, components can be customized using utility classes. And more control on you own created components
Accessible: Provides accessibility features out-of-the-box, following best practices for web accessibility.
Mobile-First: Components are designed to be responsive, making them ideal for mobile-first development.
Utility Class Friendly: You can extend or override styles with Tailwind utility classes easily.
Challenges:
Tailwind Dependency: Requires knowledge of Tailwind CSS to fully utilize the framework.
Design Constraints: Although customizable, it may feel limiting compared to designing components from scratch using Tailwind.
Learning Curve: Beginners may need time to familiarize themselves with both Tailwind and DaisyUI. And you will need to take control of the javascript part (making some of the component functional with React)
Example:
[crayon-67bb15c964067398812867/]
Tailwind CSS Tools - A Perfect Match for Custom Components
If you're already familiar with Tailwind CSS, tools like Tailwind UI and DaisyUI can be excellent additions to your workflow. They offer pre-designed components that you can fully control and modify to match your project needs. Since both are based on Tailwind, you can easily extend or modify the components, giving you the power to create abstracted and reusable UI elements without losing control over the design and behavior since you will need to create the components yourself.
Layout is a critical component of UI design, affecting how users interact with your application. Each library offers different tools and approaches to layout:
Material UI: Provides a powerful Grid system and numerous layout components, ideal for complex, responsive designs.
Next UI: Offers basic layout components suitable for simpler layouts in modern applications.
WindUI and Tailwind UI: Leverage Tailwind CSS utilities for granular layout control, allowing highly customized and responsive designs.
DaisyUI: Built on top of Tailwind CSS, DaisyUI simplifies development with pre-built components and accessibility features, making it a strong choice for quickly building responsive and accessible UIs.
React-Bootstrap: Uses Bootstrap's well-known Grid system, making layout design straightforward but potentially less modern in appearance.
Remember, there's no need to reinvent the wheel when these powerful libraries can provide a solid foundation for your application's UI and layout needs. Evaluate the pros and cons in the context of your project's requirements to choose the most fitting library. Happy coding!
When it comes to building reliable software, testing is essential. Some might think tests are a waste of time, but let’s be real—would you drive a car that’s never been tested by the manufacturer? I didn’t think so!
Two common types of tests in software are unit tests and integration tests. But what’s the difference? Let’s break it down with an easy comparison.
Unit Testing: The Wheels
Think of unit tests as inspecting the individual parts of a car. For example, you might check just one wheel to make sure it’s round, sturdy, and spins correctly. In coding, unit tests focus on small, isolated pieces of your code—like functions or methods—to make sure they work properly on their own.
Why is this important? Well, even if 99% of your car is working, if one wheel is faulty, the whole car won’t drive smoothly (or at all). The same goes for code: if one function breaks, it could cause bigger problems down the line.
Integration Testing: The Whole Car
Now, imagine testing all four wheels once they’re attached to the car. Integration tests do exactly that—they check if different parts of your code work well together. Even if each wheel passed its individual test, there’s no guarantee they’ll function correctly when combined with the rest of the car.
In software, integration tests ensure that different modules or components of your application play nicely together. This is important because even well-written individual pieces of code can still cause errors when they interact in unexpected ways.
What Makes a Good Test?
When writing tests, there are a few essential characteristics to keep in mind. A good test should be:
Readable: Easy to understand at a glance.
Writable: Simple to create and maintain.
Reliable: Consistent results, no false positives.
Fast: Shouldn’t slow down your development process.
Mostly Unit Tests: Focus on testing small, isolated parts of your code.
The last point follow the simple idea: if you test all the small pieces (unit tests), everything should work well when those pieces come together (integration tests).
The AAA Pattern: Arrange, Act, Assert
One of the simplest and most effective approaches, to write unit test is the AAA pattern—which stands for Arrange, Act, and Assert. This pattern keeps your tests clean, organized, and easy to understand.
Arrange: Prepare the data, objects, or conditions needed for the test.
Act: Execute the function or code that you want to test.
Assert: Verify the result by checking if the outcome matches what you expect.
Step 1: Arrange
Let’s start with Arrange, the first step of the AAA pattern. This is where we set up the initial state before running our test. It’s often referred to as setting up the subject under test (SUT), which is the piece of code that will be tested. In this step, we typically initialize variables, import necessary modules, and prepare the environment.
For example:
// Arrangeconst message1 = "Hello World";
Here, we’re preparing message1 as input for the function we want to test. The Arrange step ensures everything is ready without actually running the test logic.
Step 2: Act
Next, we move on to Act, where we apply actions or stimuli to the SUT. This could involve calling methods, simulating user interactions, or triggering events.
// Actconst message2 = message1.trim();
In this case, we are trimming the value of the message1 variable. The Act step is all about executing the behavior that we want to test.
Step 3: Assert
The final step in the AAA pattern is Assert. Here, we observe and verify the results by checking if the outcome matches our expectations.
In Jest, we typically use functions like expect() and toBe() to compare the actual result with the expected one.
// Assertexpect(message2).toBe("Hello World");
In this case, we’re asserting that message2 is exactly what we expected: "Hello World". If the result matches, the test will pass; if not, it will fail, indicating that something went wrong.
Getting Started with Jest
Before we dive into Jest, it’s worth mentioning that all the examples we’ll cover are available on Codesandbox.io a great tool for quickly testing and experimenting with code online.
Jest is a JavaScript testing framework that makes it simple to write and run tests. With features like mocking, code coverage, and easy-to-read results, Jest is designed to help you write efficient and reliable tests.
In this post, we'll be focusing on unit testing, since, as we mentioned earlier, most tests in programming are unit tests. Unit tests play a crucial role in ensuring that individual components or functions in your code work as expected. They're the foundation of a solid testing strategy, allowing us to catch issues early and maintain the quality of our codebase.
Jest - expect - toBe
In Jest, the expect function is used to make assertions. It’s like saying, “I expect this value to be something specific.” You can pair expect with various matchers, and one of the most commonly used matchers is toBe.
The toBe matcher checks if the result of an expression matches the expected value, similar to the strict equality operator (===) in JavaScript. For example:
expect(1 + 1).toBe(2); This assertion will pass because 1 + 1 equals 2.
expect(1 + 1 + 1).toBe(2);: This assertion will fail because 1 + 1 + 1 equals 3, not 2.
You can find a full list of matchers in the Jest Expect Documentation. Don’t worry if this seems a bit overwhelming at first—most of these functions do the same thing but in different scenarios or with diferents types of variables.
The test() function in Jest is used to define individual test cases. It takes two arguments:
1. Test Name: A string describing what the test is checking. This helps identify the purpose of the test and makes the output more readable.
2. Test Function: A function that contains the actual test logic, including any assertions you want to make.
"expect-to-be": This is the name of the test. It describes that you’re testing the expect function with the toBe matcher.
Test Function: Inside the function, you’re using expect() with toBe() to compare values. The first assertion will pass because 1 + 1 equals 2, but the second one will fail because 1 + 1 + 1 equals 3, not 2.
Naming Your Test Files
When working with Jest, it’s a good practice to name your test files in a way that clearly indicates their purpose. Typically, the name of the test file should mirror the name of the file containing the code you’re testing, but with a .test.js extension. This way, Jest can automatically detect your test files and run them.
Some developers prefer to use .spec.js instead of .test.js. The reason behind this is that “spec” stands for “specification” and reflects what they expect the code to do. In both cases, the purpose is the same: to clearly indicate that the file contains tests.
Additionally, it’s common practice to organize tests in a separate folder, often called /tests, that mirrors your source code folder structure.
In CodeSandbox, you’ll find the examples we’re working with organized in a simple, clear structure like the one shown below:
In this structure, we have several JavaScript files, each containing a function or piece of logic to be tested, along with corresponding test files. The test files follow the .test.js naming convention to ensure Jest can easily recognize them.
Here’s a breakdown of the file organization:
01-hello.js: Contains a function, getHello(), that returns a greeting.
01-hello.test.js: The test file for 01-hello.js, where we test the getHello() function.
02-obj.js and 02-obj.test.js: Similar structure, where we have code and its corresponding test for an object-based function.
03-arr.js and 03-arr.test.js: Tests for an array-based function.
Additionally, the index.test.js file contains extra examples of various test cases that demonstrate how to work with Jest and expect functions. This file includes general examples that can help you understand how to set up and execute tests for different scenarios.
Exporting and Importing Files
As you can see in the image, files should be properly exported and imported. In the example:
The getHello function is exported from 01-hello.js.
In 01-hello.test.js, we import the getHello function using import { getHello } from "./01-hello";.
Jest literally reads the lines of code from the file being tested, so it’s essential to properly import the functions or modules that you want to test.
In this example, the test file correctly imports getHello and runs a simple test using expect() and toBe() to check if the function returns the expected string.
Conclusion
Testing is essential for building reliable software, and Jest makes it easier to write, organize, and run both unit tests and integration tests. While unit tests focus on small, isolated pieces of code, ensuring they work as expected, integration tests ensure these pieces interact correctly when combined.
Jest provides powerful tools for both testing levels. We've focused on unit tests here, but Jest is equally effective for integration tests. By applying practices like the AAA pattern (Arrange, Act, Assert) and organizing your test files properly, you can maintain clean, reliable code, ensuring everything from small functions to larger system interactions works smoothly.
In future posts, we'll explore testing React applications using Jest to ensure the UI behaves as expected. With these basics in hand, you're ready to dive deeper into Jest's advanced features. Happy testing!
In the world of web development, creating a consistent design across various platforms and teams can be quite challenging. Imagine trying to keep the same colors, fonts, and spacing across all the different parts of your application. This is where design tokens come to the rescue.
Design tokens are like building blocks for your design system. They store values for design elements such as colors, spacing, and typography in a single, centralized place. Think of them as a way to keep all your design choices organized and easily accessible. By using design tokens, you can ensure that your design remains consistent and easy to manage, no matter how large your project grows.
In this post, we'll explore what design tokens are, why they're useful, and how you can use them with Tailwind CSS to create a cohesive and maintainable design system.
What are Design Tokens?
Design tokens are the essential building blocks of a design system. They are values that represent design decisions and help in maintaining a consistent look and feel throughout your application. These tokens can include:
Colors: Specific shades and tints used in the application.
Spacing: Values for margins, padding, and gaps.
Typography: Font sizes, weights, and styles.
Think of design tokens as named variables that store these values. Instead of hardcoding colors or sizes directly into your styles, you reference these tokens. This makes it easier to update and maintain your design because a change in the token is reflected everywhere it’s used.
For example, you might have a color token for your primary brand color:
[crayon-67bb15c96730e695168674/]
When you use this token in your styles, you refer to it as primary instead of #1a202c. This abstraction allows you to change #1a202c to a different color in one place, and that change will automatically apply across your entire project.
Benefits of Design Tokens
Consistency: Ensures that the same values are used across all parts of the application, maintaining a unified look and feel.
Scalability: Makes it easy to scale your design system as your project grows and evolves.
Maintainability: Simplifies updates and changes. For example, changing a color value in the token file will update all instances where it’s used.
Collaboration: Provides a common language for designers and developers, improving teamwork and communication.
Design tokens are a powerful tool to help bridge the gap between design and development, making it easier to build and maintain consistent, scalable, and flexible design systems.
Tools for Managing Design Tokens
One popular tool for managing design tokens is Tokens Studio for Figma. It allows you to:
Create Reusable Tokens: Define tokens for colors, typography, spacing, and other design elements.
Sync with External Sources: Connect tokens to external sources like GitHub to keep them up-to-date.
Semantic Tokens: Create meaningful tokens that reflect your design decisions.
This tool enhances collaboration between designers and developers by ensuring everyone uses the same design standards.
Implementing Design Tokens in Tailwind CSS
Integrating design tokens into Tailwind CSS can help maintain a consistent design system and simplify the management of design updates. Tailwind CSS, a utility-first CSS framework, allows you to use predefined classes to style your application. By integrating design tokens, you ensure that your design remains uniform and easy to manage. Tailwind comes already with predefined design tokens with a lot of variations. In this example we will define the variations our self to give a better example or when you need something diffrent then the defaults of tailwind css.
Step 1: Define Your Tokens
First, create a design tokens file (e.g., tokens.json) that contains all your design tokens.
Example tokens.json:
[crayon-67bb15c967319994075043/]
Step 2: Configure Tailwind to Use Tokens
Next, modify the Tailwind configuration file (tailwind.config.js) to include these tokens. This setup ensures that Tailwind CSS uses the values defined in your tokens file.
Example tailwind.config.js:
[crayon-67bb15c96731c373975346/]
Step 3: Use Tokens in Your Styles
With your tokens defined and configured in Tailwind CSS, you can now use them in your HTML by referring to the corresponding Tailwind utility classes.
Example HTML:
[crayon-67bb15c96731e863757134/]
In this example:
bg-primary applies the primary color as the background color.
text-large sets the font size to large.
p-medium adds medium padding.
Benefits of Using Tokens with Tailwind CSS
Consistency: Ensures uniform design across all components.
Scalability: Easy to update and extend the design system as the project grows.
Maintainability: Changes to tokens are reflected globally, making updates straightforward.
Efficiency: Enhances collaboration between designers and developers by using a common set of design values.
Conclusion
Implementing design tokens in Tailwind CSS is a powerful way to achieve a cohesive and efficient design system. By defining tokens in a central file and configuring Tailwind to use them, you ensure that your design remains consistent, scalable, and easy to maintain. Start incorporating design tokens into your Tailwind CSS projects today to streamline your workflow and improve your design system.
Businesses love dashboards. You'd be hard-pressed to find a UI engineer who has never worked on building or maintaining a dashboard UI. That is because dashboards embody a desirable promise: presenting valuable insights at a quick glance. Business intelligence (BI) metrics, system status charts, performance tracking over time, and financial metrics are some of the many common use cases that make this kind of user interface so ubiquitous in the business world.
The Problem
Yet, implementing a dashboard layout is seemingly still cumbersome. If you look at some of the leading dashboard libraries out there, they invariably use CSS Flexbox layout and a bunch of javascript logic to produce their layouts. That is more code to ship and maintain, more processing cycles on the client side, more work to support mobile devices, and often a jankier rendering experience.
The Solution
While those libraries have a lot of benefits beyond a widget layout, when you want something simple that is focused on layout, because you need a lot of control over the content of your dashboard's widgets, there is a great solution built into every modern browser: CSS Grid layout.
Some of the advantages of using CSS Grid are:
Not shipping any extra code.
Virtually instantaneous rendering (layout-wise).
Amazing flexibility in terms of sizing and positioning.
Pixel-perfect alignment.
Easily adaptable to different screen sizes.
No need to learn a new library.
And complete control of the design and content of each widget.
Trade-Offs
What are some of the disadvantages of this approach to building a dashboard?
No "free" features. Yes, you don't need to learn a new library and its paradigms and APIs, but you also don't gain any of the features and pre-built UIs.
Layout cannot be animated. Your widgets cannot be animated inside of a CSS Grid — for instance, if a user configures it to have a different size, or moves it around.
Support is out of yourcontrol. While you don't have to ship code for this layout, you also can't control where it's available, and ensure that how this feature is implemented does not change unintentionally. Browser standards should help avoid any major issues, though.
Implementation
Let's look at how to implement a great dashboard layout using CSS Grid!
Creating a Dynamic CSS Grid
The first step is to create the grid itself. We'll use the CSS repeat() function, with the auto-fill property, and a minmax() function to ensure that our grid's columns both fill up the screen and adjust their width automatically.
[crayon-67bb15c967dca818881532/]
The repeat() function can be used with a multitude of values. Yes, you can pass in an integer for the first parameter, but that only defines a fixed number of columns for a grid. Instead, by using auto-fill and minmax() we create a grid with an indefinite number of columns. In this case, we squeeze in as many 200px columns as possible, but they'll stretch evenly to take up the full width of the grid.
Here we also set a gap to space out the the dashboard widgets, and we define the height of each grid square as 200px using grid-auto-rows, which allows us to avoid having to set a predefined number of rows — the more dynamic we make this layout, the better!
Getting Tricky
This is a great grid, BUT… it is prone to gaps if you start adding widgets that are wider and/or taller than 1 cell. Luckily, there's a CSS Grid trick to help avoid gaps:
[crayon-67bb15c967dd4463368100/]
By adding grid-auto-flow: dense, we tell the browser to move widgets out of sequence if need be, in order to try to fill natural gaps in the grid. That may not always be appropriate, but if you want your dashboard to adapt to many screen sizes and still look good, this is probably the way to go.
Creating the Widgets
The last step is creating the container for the dashboard widgets.
[crayon-67bb15c967dd7301273328/]
For a dashboard, you don't need a wide range of widget widths and heights, especially with a grid with large cells. This gives us a range of rectangular sizes from 1 x 1 to 4 x 4, and everything in between.
Getting Responsive
But the final step is making these widgets adjust to different screen sizes. We do that by reducing widget sizes progressively, the smaller the screen size gets. With 200px cells, we don't need to even reduce wider widgets to a single cell, but you can tweak the resizing strategy to your needs — remember, using a CSS Grid here gives us a lot of flexibility.
[crayon-67bb15c967dd9562207362/]
Putting It All Together
That's a really nice looking, fast rendering dashboard layout!
Next Steps
You could easily implement this in a framework like React, where a Widget component could accept width and height props and be rendered with the styles above. From there… it's up to you, but that's the beauty of this approach: you have full control over look and feel, and this will get you up and running quickly.
If you want to see and play around with some code, here's a code pen with a pure HTML + CSS implementation based on the code samples in this article.
Feature flags, also known as feature toggles or feature switches, are a software development technique used to enable or disable certain features or functionalities in an application without changing its codebase. They act as conditional statements that control the visibility and behavior of specific features, allowing developers to manage and release features dynamically.
What to Expect:
Understanding Feature Flags: We'll start by demystifying the concept of feature flags and exploring their role in dynamic feature management. From A/B testing to progressive rollouts, we'll uncover the diverse applications that feature flags offer in Laravel projects.
Implementing Feature Flags with Laravel Penant: Armed with a solid understanding of feature flags, we'll then transition to practical implementation. We'll showcase how Laravel Penant, a feature flagging library for Laravel, can streamline the process of integrating feature flags into your Laravel applications.
Understanding feature flags
1. A/B testing
A/B testing empowers developers to compare and evaluate different versions of features or user interfaces to determine which resonates best with their audience. Feature flags serve as the conduit for conducting A/B tests seamlessly, allowing developers to toggle between variations and gather invaluable insights into user preferences and behaviors.
How Feature Flags Facilitate A/B Testing:
Dynamic Variation Switching: Feature flags enable developers to toggle between different feature variations in real-time without deploying new code, facilitating swift iteration and experimentation.
Targeted Audience Segmentation: By selectively enabling feature variations for specific user segments, developers can tailor A/B tests to target audiences based on demographics, behaviors, or other relevant criteria.
Performance Monitoring and Analysis: Feature flags provide granular control over A/B tests, allowing developers to monitor performance metrics such as engagement, conversion rates, and user feedback to assess the effectiveness of each variation.
Iterative Optimization: Armed with insights gleaned from A/B tests, developers can iteratively refine feature implementations, leveraging feature flags to deploy incremental improvements and maximize user satisfaction.
2. Progressive Rollouts
Progressive rollouts, a strategic approach to feature deployment, empower developers to introduce new features gradually to mitigate risks and ensure a smooth user experience. Feature flags play a pivotal role in progressive rollouts by enabling controlled activation of features for select user cohorts, allowing developers to monitor performance, collect feedback, and address issues before broader release.
Key Aspects of Progressive Rollouts Enabled by Feature Flags:
Gradual Feature Activation: Feature flags allow developers to activate new features incrementally, starting with a small subset of users and gradually expanding the rollout as confidence in the feature grows.
Risk Mitigation and Monitoring: By limiting the exposure of new features to a controlled group of users, developers can closely monitor performance metrics, gather feedback, and identify and address any potential issues or regressions before broader release.
Feedback-Driven Iteration: Progressive rollouts facilitate an iterative approach to feature development, enabling developers to incorporate user feedback and make iterative improvements to features based on real-world usage data.
Granular Control and Rollback: Feature flags provide granular control over feature activation, allowing developers to quickly disable or roll back features in the event of unexpected issues or negative user feedback, minimizing disruption to the user experience.
3.Trunk-Based Development: Streamlined Deployment with Feature Flags
Trunk-Based Development (TBD) embodies a development methodology where developers continuously integrate code into a shared repository (trunk) and frequently deploy changes to production. Feature flags serve as the linchpin of TBD by decoupling code changes from feature releases, enabling developers to deploy new features with confidence while minimizing disruption to the production environment.
Key Tenets of Trunk-Based Development Empowered by Feature Flags:
Continuous Integration and Deployment: TBD emphasizes the rapid integration of code changes into a shared repository, fostering a culture of collaboration and enabling developers to deliver features to users at a brisk pace.
Feature Flagging for Decoupled Deployment: Feature flags enable developers to encapsulate new features within conditional statements, allowing them to control feature activation independently of code deployment. This decoupling ensures that code changes can be safely deployed to production without immediately exposing new features to users.
Reduced Risk and Iterative Development: By isolating feature releases behind feature flags, TBD mitigates the risk of introducing bugs or regressions into the production environment. Developers can iteratively refine features based on user feedback and performance metrics before fully enabling them for all users.
Safe Experimentation and Rollback: Feature flags provide a safety net for experimentation by allowing developers to toggle features on or off dynamically. In the event of unexpected issues or negative user feedback, developers can quickly disable or rollback features without reverting code changes, ensuring a seamless user experience.
Using feature flags in Laravel.
Installing Laravel Penant for Feature Flag Integration
Laravel Penant is a built-in feature flagging package that simplifies the process of implementing feature flags in Laravel applications. Follow these steps to install and configure Laravel Penant:
Step 1: Install Laravel Penant via Composer
Laravel Penant comes pre-installed with Laravel starting from version 8.x. If you're using an older version of Laravel, you can install it via Composer:
[crayon-67bb15c96885b936384861/]
Next, you should publish the Pennant configuration and migration files using the vendor:publish Artisan command:
[crayon-67bb15c968865990469772/]
Step 3: Migrate the Database
If you plan to use Laravel Penant's database-driven feature flag storage, you can run the migration to create the necessary database tables:
[crayon-67bb15c968867196596740/]
Defining features:
To define a feature, you may use the define method offered by the Feature facade. You will need to provide a name for the feature, as well as a closure that will be invoked to resolve the feature's initial value.
Typically, features are defined in a service provider using the Feature facade. The closure will receive the "scope" for the feature check. Most commonly, the scope is the currently authenticated user. In this example, we will define a feature for incrementally rolling out a new API to our application's users:
[crayon-67bb15c968869758625578/]
After defining a feature flag you can check the feature flag status in in your aplication:
[crayon-67bb15c96886b491836495/]
In wrapping up our discussion on feature flags in Laravel, we've seen how Laravel Penant simplifies their integration. By using feature flags, you're not just managing features; you're also refining user experiences.
So, as you dive into using feature flags with Laravel Penant, remember: experiment, deploy, and refine. With every feature flag, you're shaping better applications.
Here's to unlocking the full potential of your Laravel projects with feature flags and Laravel Penant.
In the software development, efficiency and quality assurance are very important. As developers, we constantly seek tools and practices that not only streamline our workflow but also enhance the quality of our code. In this post, we'll explore how ChatGPT can be leveraged in unique roles to support coders, from code reviews to web design consulting.
1. PHP Interpretation
Act as a PHP Interpreter
For PHP developers, ChatGPT can mimic the output of a PHP interpreter, offering instant feedback on the expected output of your PHP code. This immediate validation can be invaluable during development, especially when debugging or learning new aspects of PHP.
Prompt:
I want you to act like a php interpreter. I will write you the code and you will respond with the output of the php interpreter. I want you to only reply with the terminal output inside one unique code block, and nothing else. do not write explanations. Do not type commands unless I instruct you to do so. When i need to tell you something in english, i will do so by putting text inside curly brackets {like this}. My first command is {your command}.
Here is a video of an example with the PHP interpreter prompt:
2. Code Reviews with ChatGPT
Helping with Code Reviews
Imagine having an expert developer by your side to review your code. ChatGPT can serve as this expert, helping identify potential bugs and suggesting improvements. By acting as a senior frontend developer, ChatGPT can review your project's code, ensuring best practices are followed and common pitfalls are avoided.
Prompt:
Behave like an expert developer who will perform code reviews. I will send you pieces of code. You will help me identify potential bugs and give me suggestions on how to improve the quality of the code.
3. Frontend Development Assistance
Act as Senior Front End Developer
ChatGPT can embody the role of a Senior Frontend Developer, guiding you through the creation of projects with specific toolsets. For instance, when tasked with creating a Pokémon app using Create React App, yarn, Ant Design, List, Redux Toolkit, createSlice, thunk, and axios, ChatGPT can streamline the process by providing concise, mergeable code snippets.
Prompt:
I want you to act as a Senior Frontend developer. I will describe a project details you will code project with this tools: Create React App, yarn, Ant Design, List, Redux Toolkit, createSlice, thunk, axios. You should merge files in single index.js file and nothing else. Do not write explanations. My first request is "Create Pokemon App that lists pokemons with images that come from PokeAPI sprites endpoint"
4. Regular Expression Generation
Act as a Regex Generator
Regular expressions are powerful but can be complex to construct. ChatGPT can generate regex patterns for you, matching specific text patterns such as email addresses. This capability can save time and reduce the complexity involved in creating and testing regular expressions.
Prompt:
I want you to act as a regex generator. Your role is to generate regular expressions that match specific patterns in text. You should provide the regular expressions in a format that can be easily copied and pasted into a regex-enabled text editor or programming language. Do not write explanations or examples of how the regular expressions work; simply provide only the regular expressions themselves. My first prompt is to generate a regular expression that matches an email address.
5. SQL Queries Execution
Act as a SQL Terminal
ChatGPT can act as a SQL terminal, providing outputs for SQL queries as if they were executed in a real database environment. This role is perfect for testing queries and understanding their results without the need for immediate access to a database.
Prompt:
I want you to act as a SQL terminal in front of an example database. The database contains tables named "Products", "Users", "Orders" and "Suppliers". I will type queries and you will reply with what the terminal would show. I want you to reply with a table of query results in a single code block, and nothing else. Do not write explanations. Do not type commands unless I instruct you to do so. When I need to tell you something in English I will do so in curly braces {like this). My first command is 'SELECT TOP 10 * FROM Products ORDER BY Id DESC'.
6. Software Quality Assurance Testing
Act as a Software Quality Assurance Tester
ChatGPT can take on the role of a QA tester, detailing reports on functionality and performance issues. While it can't replace manual or automated testing tools, ChatGPT can help conceptualize test scenarios and draft preliminary reports based on given parameters.
Prompt:
I want you to act as a software quality assurance tester for a new software application. Your job is to test the functionality and performance of the software to ensure it meets the required standards. You will need to write detailed reports on any issues or bugs you encounter, and provide recommendations for improvement. Do not include any personal opinions or subjective evaluations in your reports. Your first task is to test the login functionality of the software.
7. Web Design Consultancy
Act as a Web Design Consultant
Finally, ChatGPT can offer consultancy for web design projects. By understanding the requirements of an e-commerce site, for instance, ChatGPT can suggest interface designs and features that enhance user experience and align with business goals.
Prompt:
I want you to act as a web design consultant. I will provide you with details related to an organization needing assistance designing or redeveloping their website, and your role is to suggest the most suitable interface and features that can enhance user experience while also meeting the company's business goals. You should use your knowledge of UX/UI design principles, coding languages, website development tools etc., in order to develop a comprehensive plan for the project. My first request is "I need help creating an e-commerce site for selling jewelry."
As the digital landscape continues to evolve, staying updated on the latest trends and innovations in artificial intelligence (AI) and big data has never been more important. This year, a series of conferences across North America are set to showcase the cutting-edge developments and thought leadership in the field. From the heart of Silicon Valley to the vibrant streets of Austin and the iconic venues of Las Vegas and Toronto, these events promise to bring together industry pioneers, data scientists, developers, and tech enthusiasts.
Whether you're a CTO seeking insights into AI-driven transformations, a developer eager to dive into big data technologies, or a startup looking to make your mark in the AI revolution, there's something for everyone. With topics ranging from generative AI and machine learning (ML) to ethics, data privacy, and beyond, these conferences offer unparalleled opportunities to learn, network, and explore the future of technology.
Here's a glimpse into what 2024 has in store for AI and big data enthusiasts:
AI & Big Data Expo North America 2024
Dates: June 5-6, 2024
Location: Santa Clara Convention Center, CA
Description: This expo brings together industry leaders for discussions on AI and big data innovations, with over 250+ speakers and hundreds of exhibitors. Ideal for CTOs, IT Directors, developers, start-ups, and more.
Registration: Tickets available with early booking discounts. Free expo passes to ultimate access options.
IEEE Conference on Artificial Intelligence (IEEE CAI 2024)
Dates: 25-27 June
Location: Singapur
Description: The 2024 IEEE Conference on Artificial Intelligence (IEEE CAI 2024) is the 2nd edition of the new conference and exhibition with an emphasis on the applications of AI and key AI verticals that impact industrial technology applications and innovations.
Description: Now in its 7th year, the AI Hardware & Edge AI Summit is the ultimate destination for the entire AI and ML ecosystem to unite and collaborate on a united goal - helping organizations train, deploy and scale machine learning systems that are fast, affordable, and efficient.
Format: In-person in Austin, TX, and online options available.
Description: Focused on generative AI & ML in the enterprise, featuring technical talks, workshops, and a Startup Showcase. Brings together a diverse community of data science professionals.
Registration: Discounted rates for early registration and options for attending multiple events.
Description: A conference designed to immerse attendees in the world of AI, offering hands-on experience with AI tools, connections with experts, and insights into leveraging AI for business and creativity. Features include enterprise AI content, general sessions, speakers, panels, and live demonstrations.
Tickets:
VIP Pass: $3,500, includes priority seating and exclusive networking events.
General Pass: $1,500, covers full access to the event, meals, and networking.
Scholar Pass: $500, available for scholars and aspiring AI creators (limited number).
Highlights: Topics range from AI strategy, automation, and creativity, to ethics, data privacy, and more. A unique opportunity to learn from leading AI experts and network with professionals in a state-of-the-art venue.
Description: Ai4 gathers business leaders and data practitioners to discuss the adoption of AI and ML technologies, expecting over 350 speakers and providing networking opportunities.
Tickets: Free to $2895, with Early Bird options available.
Description: Industry leaders, heads of state, entrepreneurs, renowned researchers, and curious minds alike will converge at the iconic Marina Bay Sands in Singapore this June to explore and unveil the next wave of transformative AI technologies.
Description: Industry leaders, heads of state, entrepreneurs, renowned researchers, and curious minds alike will converge at the iconic Marina Bay Sands in Singapore this June to explore and unveil the next wave of transformative AI technologies.
Description: Seen by tech leaders as the platform to launch their latest AI products and services and regarded as the world leading startup and investor network, WSAI gathers the global AI ecosystem of Enterprise, Big Tech, Startups, Investors, Science and Academia to set the global AI agenda, every October in Amsterdam.
Each event is carefully curated to offer the most relevant and transformative content for attendees, with a range of ticket options and registration benefits. Whether you're looking to expand your knowledge, network with peers, or uncover the latest AI and ML breakthroughs, 2024's lineup of AI conferences is where you'll want to be.
Stay ahead of the curve and mark your calendars for these must-attend events. For registration details and more information on each conference, follow the links provided in the descriptions. Let's embrace the future of AI together and explore the endless possibilities it holds.
Discover how to boost chatbots with OpenAI's GPT-3 and Laravel. Learn about vector embeddings and how giving a URL to your chatbot lets you ask questions about the page, making interactions smarter and easier to handle.
OpenAI's GPT model, is super smart, but its last update? September 2021. That might not sound like a long time ago, but in the tech world, it's an eternity! Just think about it: if you were to chat with ChatGPT and ask about the latest OpenAI package for Laravel, it'd give you a puzzled digital look. It's just not in the know about that yet. It's a good reminder that even the most advanced tools have their limits and need a bit of help catching up sometimes.
In this post you will:
Learn about Embeddings and Vector Similarity: We’ll be explore embedding and vector similarity, which help improve our chatbot’s understanding.
Implement a real chatbot use case: You’ll be implementing a feature in a Laravel application where users can submit URLs. The chatbot will then process the content of these URLs using NLP to understand context and content, and respond appropriately.
Embeddings and Vector Similarity
Embedding, in the context of machine learning and natural language processing, refers to the conversion of data (usually words or phrases) into vectors of real numbers. These vectors represent the data in a way that a machine can understand, process, and utilize.
Tokenization: The first step in the embedding process often involves breaking down a piece of text into smaller units, called tokens. These tokens can be as short as a single character or as long as a word.
Vector Representation: Each token is then mapped to a vector in a predefined vector space. This mapping is done using algorithms that ensure semantically similar words are placed closer together in the vector space.
Dimensionality: The vector space can be of any dimension, but for practical purposes and computational efficiency, we often reduce the number of dimensions using techniques like Principal Component Analysis (PCA) or t-SNE. Despite the reduction in dimensions, the relative distances (or similarities) between vectors are preserved.
Vector Similarity
Vector similarity is a measure of the closeness or similarity between two vectors. It helps in determining how alike two pieces of data are. The more similar the vectors, the more similar the data they represent.
Cosine Similarity: One of the most common ways to measure vector similarity. It calculates the cosine of the angle between two vectors. A value of 1 means the vectors are identical, while a value of 0 means they're orthogonal (or not similar at all).
Euclidean Distance: Another method where the similarity is determined based on the "distance" between two vectors. The closer they are, the more similar they're considered to be.
Dot Product: If the vectors are normalized, taking the dot product of two vectors will give a value between -1 and 1, which can also be a measure of similarity.
Imagine we're using a 3-dimensional space to represent our words. Here's a hypothetical representation:
Word Embeddings:
Cat: [0.9, 0.8, 0.1]
Dog: [0.8, 0.9, 0.05]
Computer: [0.2, 0.1, 0.95]
In this representation:
The vectors for "cat" and "dog" are close to each other, indicating they are semantically similar. This is because they are both animals and share certain characteristics.
The vector for "computer", on the other hand, is farther from the vectors of "cat" and "dog", indicating it is semantically different from them.
If we were to visualize this in a 3D space:
"Cat" and "dog" might be near each other in one corner, while "computer" would be on the opposite side or in a different corner of the space.
Understanding Similarity:
Using cosine similarity:
The similarity between "cat" and "dog" would be high (close to 1) because their vectors are close.
The similarity between "cat" and "computer" or "dog" and "computer" would be much lower (closer to 0) because their vectors are farther apart.
Remember, this is a very simplified representation. In real-world applications, the dimensions are much higher (often in the hundreds or thousands), and the vectors are derived from vast amounts of data to capture intricate semantic relationships.
Implement a real use case
Our primary tool for storing vectors will be Pine code. However, you can also use pg vector and the underlying mechanics of vector similarity will be essential to grasp the full potential of our chatbot. And to further elevate its capabilities, we'll introduce web scraping. This ensures our bot is aware with information about a webpage, making it capable at answering queries related to that page.
Here you can see what we will acomplish with our implementation:
The first step is:
User submits a web link.
Backend Service receives the link.
Crawler visits the link.
Data Processing occurs:
Converts content using a Markdown Converter.
Tokenizes content.
Store the processed vector to the database.
Then once we have crawled the web page we will see a chat, where you can ask question about that page.
Question from user is vectorized.
Search for similarities in vector database (Pinecode).
Results sent to OpenAI for context.
OpenAI's Embedding API processes data.
The AI responds to the user
Here is a video of the end result.
Let's create new laravel project, we will name it aichat.
[crayon-67bb15c96952c625499647/]
Select laravel breeze with livewire and alpine so we have livewire to make a our chat and tailwind css installed for making it easy to create our chat UI.
Install openai package for laravel.
[crayon-67bb15c969536197491366/]
Publish openai config.
[crayon-67bb15c969539731793412/]
Add this env variable on your .env file.
OPENAI_API_KEY=sk-...
Setting up your pinecone account
Install pinecode for php
[crayon-67bb15c96953b531590094/]
Creating a section for setting up a Pinecone account and obtaining the necessary variables in a Laravel PHP project can be structured as follows:
1. Create a Free Pinecone Account:
- Visit the Pinecone Website
- Click on "Get Started" or "Sign Up" to create a free account.
- Follow the on-screen instructions to complete the registration.
- Once you create your index create the index using a vector dimension of 1536 and the rest can be standard.
2. Obtain Your Pinecone API Key and Environment Variable:
- Once logged in, navigate to your account settings or dashboard.
- Look for a section titled "API Keys" or "Credentials".
- Generate a new API key and note down the environment variable associated with your account (usually it's a string like production or development).
3. Setup Pinecone Variables in Your Laravel Project:
- In your Laravel project, open or create a .env file in the root directory.
- Add the following lines to your .env file, replacing YOUR_API_KEY and YOUR_ENVIRONMENT with the values obtained from your Pinecone account:
[crayon-67bb15c96953d764813134/]
4. Add a pinecone.php in the config directory:
- Now in your Laravel PHP code, you can access these variables using the env() function as shown below:
[crayon-67bb15c96953f690261480/]
5. Initialize Pinecone:
- You can now initialize Pinecone using the obtained credentials. While Pinecone's documentation primarily shows initialization in Python or JavaScript, you would need to look for a PHP library or create a wrapper around Pinecone's API to interact with it in PHP.
[crayon-67bb15c969541689204632/]
Install readability package for php this will help us generate sanitized html.
[crayon-67bb15c969543101979362/]
To begin developing the UI, simply run npm run dev. Once you have completed the development process, be sure to execute npm run build in order to generate all the necessary CSS and JS files.
Collecting Data
Now that our project is ready we can start creating helper class to collecting data that we will embed. Before we start lto create an account in browserless to get info from the webpage and get the html. You can do this also with the laravel HTTP client, but some pages are not SSR loaded. You can replace it just with laravel HTTP client if you want.
Setting Up Your Browserless Account
Browserless is a service that allows for browser automation and web scraping in a serverless environment. To use Browserless, you'll need to set up an account and obtain a unique BROWSERLESS_KEY. Here's how to do it:
1. Create a Free Browserless Account:
- Visit the Browserless Website
- Click on "Start for Free" or "Sign Up" to create a free account.
- Follow the on-screen instructions to complete the registration.
2. Obtain Your Browserless API Key:
- Once logged in, navigate to your account settings or dashboard.
- Look for a section titled "API Keys" or "Credentials".
- Generate a new API key, which will be your BROWSERLESS_KEY.
[crayon-67bb15c969545510037382/]
Create a Class EmbedWeb.php
[crayon-67bb15c969547521925470/]
Here's a simplified breakdown of what this class does:
Fetching Web Content:
- The [crayon-67bb15c96954a158775316-i/] method is triggered with a URL as its argument.
- It sends a HTTP POST request to a web browsing automation service (browserless) to load the specified web page. Alternatively, it can send a plain HTTP GET request if web browsing automation is not needed.
Processing Web Content:
- Utilizes the [crayon-67bb15c96954d232421436-i/] library to parse the fetched web page, isolating the main content and stripping away html elements.
Preparing Content:
- The script cleans up the text by removing HTML tags and splits it into chunks of up to 1000 characters each, ensuring the last chunk is at least 500 characters long by merging it with the previous chunk if necessary.
Text Embedding:
- Sends the processed text chunks to OpenAI's service to generate text embeddings, which are compact numerical representations of the text in vectors. Just like we saw earlier.
Indexing Embeddings:
- Clears any previous embeddings indexed under the 'web' namespace for the 'chatbot' index in Pinecone, a vector database.
- Then, it indexes the new embeddings in Pinecone, associating each embedding with a unique ID based on the URL and chunk index, and storing the original text and URL as metadata.
This way, the script facilitates the automated retrieval, processing, and indexing of web content, making it searchable and usable for a chatbot.
Creating the chatbot
Now let's create the livewire component.
[crayon-67bb15c96954f041064109/]
This will create 2 files
[crayon-67bb15c969551836216806/]
Create a blade file components/layouts/app.blade.php
[crayon-67bb15c969553691802657/]
[crayon-67bb15c969555712090466/]
And in your app.css file ad this
[crayon-67bb15c969557799589617/]
This way if the chatbot returns code, it show a code block in black.
Creating a class for managing a conversion with Open AI
We are going to create a class that will manage chat messages and go to the Open AI API, we will be using the stream response because we want the same behaviour as we have today with chatgpt, we don't want to wait until the whole message is finished.
[crayon-67bb15c969559190145284/]
The class [crayon-67bb15c96955b664820474-i/] will handle chat interactions with OpenAI. The [crayon-67bb15c96955d686204718-i/] method is the heart of this class, taking in chat messages and two handlers for processing the chat as it streams from OpenAI's GPT-3.5 Turbo model.
Upon calling [crayon-67bb15c96955f993015969-i/] , a streamed chat with OpenAI is initiated using the provided messages. As responses come in from OpenAI, they are looped through and the new content is appended to a [crayon-67bb15c969561418898125-i/] string. If a [crayon-67bb15c969562182075505-i/] is provided, it's called with the updated content rendered to HTML, allowing for real-time updates.
Once all messages have been processed, the [crayon-67bb15c969564579971428-i/] is called with the full content also rendered to HTML, signaling the end of the chat processing. This setup allows for both real-time processing of chat messages as they come in and a final handling step once all messages have been processed.
This will be used in our ChatBot.php class
Not let's go trough the ChatBot.php class in livewire.
Let's add some properties.
[crayon-67bb15c969566158382343/]
[crayon-67bb15c969568710881658/]
The prompt will what user types for asking questions.
The answer property will be the current answer the chatbot is streaming once we go to open ai. We will be using wire:stream to stream the response to the front end.
Pending is a boolean so we now the AI is streaming a response and we are waiting it to finish.
Conversions array will be used to save our chat messages.
And the step property will help us giving a step to add the URL and after entering the URL we will show the chat UI.
Let's add a submitUrl method
[crayon-67bb15c96956a460824002/]
The url will be the url we want the scrap. This will be validated to be required and have a valid url.
[crayon-67bb15c96956c189265000/]
The submitUrl method validates the url property, processes it using the EmbedWeb class explained in a previous snippet, and transitions to a chat step by updating the step property to 'chat'.
In our chat-bot.blade.php file
[crayon-67bb15c96956e470847449/]
We make the url wire:modelable and once we click on the button we submit the url and call the function we just made.
Now let's create a submitPromt method so we can make a question about the url we have given.
[crayon-67bb15c969570797534090/]
The submitPrompt method is designed to process a user's prompt, find relevant information from previously indexed web content, and prepare for a chat interaction based on the information retrieved.
An instance of the Pinecone vector database client is created.
The user's prompt is sent to OpenAI to obtain a text embedding.
A query is made to Pinecone to find the top 4 most relevant snippets of web content based on the text embedding.
A system message is prepared with these snippets, instructing to base the answer on the given info.
The conversation array is updated with the system message and the user's prompt.
The user prompt input field is cleared ($this->prompt = '').
A flag ($this->pending) is set to true, indicating a pending action so we can show the user some indication that the chatbot is responding.
A JavaScript function ask is triggered via the Livewire $wire object, so what this will do is that is it will refresh the UI the new messages and the current state, and on the front end it will go back to the server to start sending everything to Open AI.
Let's create the ask method in livewire:
[crayon-67bb15c969573773067170/]
The ask method orchestrates a chat interaction by handling incoming messages, generating responses, and managing real-time updates to the UI.
Creating Chat Handler:
An instance of ChatMessages is created and its handle method is called with the current conversation as an argument.
Handling Finished Responses:
When the handle method finishes processing, it triggers the finishedHandler callback function.
A new message from the 'assistant' is appended to the conversation array, containing the generated content.
The answer property is cleared, and pending is set to false, indicating that processing is complete.
Handling Streamed Responses:
If there are streamed updates during processing (like real-time typing indicators or partial responses), the streamHandler callback is triggered.
These updates are streamed to the 'answer' component on the frontend, replacing any previous content, providing a dynamic, real-time interaction experience.
We use the wire:stream functionality livewire gives us. This makes our so much easier, before livewire 3.0 what we did was actually using websockets to have the message update in realtime. Having the stream functionality makes our life so much easier without having the need of installing websockets.
The method facilitates a structured chat interaction, handling real-time updates, and appending final responses to the conversation, readying the system for the next user input.
Now let go over the UI to make this work.
[crayon-67bb15c969576180988044/]
The interface is split into two main sections: the chat display area and the message input area.
In the chat display area:
Messages from the 'assistant' and 'user' are iterated over and displayed with different stylings for easy differentiation.
If there's a pending response (indicated by the $pending variable), a placeholder is displayed until the actual response ($answer) is received and displayed with the wire:stream functionality.
Livewire's wire:stream directive is used to update the answer area in real-time as new content is streamed from the server.
In the message input area:
Users can type their message into a text input field.
Pressing the Enter key or clicking the "Send" button triggers the submitPrompt method, sending the user's message for processing.
Any validation errors for the prompt input are displayed just below the input field.
Now you can ask questions about the webpage you gave, like we showed in the video earlier on.
Conclusion
In this journey, we've creatively integated OpenAI, Laravel, and Pinecone to give our chatbot a significant boost and extra knowledge. It all started with our EmbedWeb class, a tool that will do some scrapping and will get the web for content, embeds it, and saves it in Pinecone, our chosen vector database. This step automated the work of data gathering and set the stage for the chatbot to work its magic.
Then came the ChatMessages class, that is in charge of handling the conversation flow. It will stream the response so we can
And then, we rolled up our sleeves for the heart of our project - the chatbot code. With a blend of structured logic and innovative coding, we crafted a setup that takes user prompts, sifts through the indexed web content, and engages in a meaningful back-and-forth with the user. The cherry on top? Real-time updates and a sleek UI, courtesy of Laravel's Livewire and Tailwind CSS, which made the chat interface not only functional but a delight to interact with.
What we have now is a testament to the magic that happens when OpenAI's text embeddings, Laravel's robust framework, and Pinecone's vector database come together. This fusion not only amped up our chatbot's understanding but also its ability to dish out relevant, timely responses. As we wrap up, we're not just left with a solid piece of work, but a stepping stone towards more intuitive and engaging chatbot interactions. The road ahead is exciting, and the possibilities, endless.
The future of web development in 2025 is exciting and full of possibilities. With AI-driven coding, high-performance WebAssembly applications, and the rise of Edge Computing, developers have more tools than ever to build fast, efficient, and scalable applications. Staying ahead of these trends will be key to remaining competitive in the evolving web landscape. 
In this example, we create a card with an image, text, and a button using MUI's Card component.
Next UI is a modern, lightweight library focused on simplicity and performance. It offers an elegant design system ideal for building responsive, sleek UIs without sacrificing speed.
Pros:
You can run this example 
Pros:
Using Tailwind's utility classes, you have fine-grained control over the layout.
Pros:
Pros:
Tailwind CSS Tools - A Perfect Match for Custom Components
If you're already familiar with Tailwind CSS, tools like Tailwind UI and DaisyUI can be excellent additions to your workflow. They offer pre-designed components that you can fully control and modify to match your project needs. Since both are based on Tailwind, you can easily extend or modify the components, giving you the power to create abstracted and reusable UI elements without losing control over the design and behavior since you will need to create the components yourself.
Pros:
React-Bootstrap's Grid system allows for quick and easy layout creation.
Why is this important? Well, even if 99% of your car is working, if one wheel is faulty, the whole car won’t drive smoothly (or at all). The same goes for code: if one function breaks, it could cause bigger problems down the line.
In software, integration tests ensure that different modules or components of your application play nicely together. This is important because even well-written individual pieces of code can still cause errors when they interact in unexpected ways.
That's a really nice looking, fast rendering dashboard layout!
Vector Similarity
Vector similarity is a measure of the closeness or similarity between two vectors. It helps in determining how alike two pieces of data are. The more similar the vectors, the more similar the data they represent.
Imagine we're using a 3-dimensional space to represent our words. Here's a hypothetical representation:
Word Embeddings:
The first step is:
Select laravel breeze with livewire and alpine so we have livewire to make a our chat and tailwind css installed for making it easy to create our chat UI.
Install openai package for laravel.
[crayon-67bb15c969551836216806/]
Create a blade file components/layouts/app.blade.php
[crayon-67bb15c969553691802657/]
