teleren/devto huggingface dataset:
Top 10 WordPress plugins for transactional email service
Tags: webdev, wordpress, email, plugin
Published: 2023-08-03 20:09:43

## **Introduction**

WordPress is one of the most popular content management systems on the market, and it is used by millions of websites worldwide. It is a powerful platform that allows users to create websites and blogs quickly and easily, but it can be even more powerful with the right plugins.

Transactional emails are an important part of any website, and WordPress has a variety of plugins that can help manage and automate this process. In this article, we will be discussing the top 10 WordPress plugins for transactional emails.

**1. WP Mail SMTP:** WP Mail SMTP is one of the most popular WordPress plugins for transactional emails. This plugin helps to ensure that emails from your WordPress site are sent properly, and it also allows you to customize the “from” address and name for your emails. It also includes support for SMTP and other secure connections, so you can rest assured that your emails will be sent securely and reliably.

**2. Post SMTP:** Post SMTP is another popular WordPress plugin for managing transactional emails. It provides a simple and intuitive interface to manage your email sending, and it also allows you to monitor the status of your emails and use a variety of email providers. Additionally, it allows you to customize the “from” address and name for your emails, and it also supports SMTP and other secure connections.

**3. WP Mail Bank:** WP Mail Bank is a powerful WordPress plugin that helps you manage and automate transactional emails. It provides a simple and intuitive interface to manage your emails, and it also supports SMTP and other secure connections. Additionally, it allows you to monitor the status of your emails, and it also allows you to customize the “from” address and name for your emails.

**4. Easy WP SMTP:** Easy WP SMTP is a WordPress plugin that helps you manage and automate your transactional emails. It provides a simple and intuitive interface to manage your emails, and it also supports SMTP and other secure connections. Additionally, it allows you to customize the “from” address and name for your emails, and it also allows you to monitor the status of your emails.

**5. WP SMTP Pro:** WP SMTP Pro is a premium WordPress plugin that helps you manage and automate your transactional emails. It provides a simple and intuitive interface to manage your emails, and it also supports SMTP and other secure connections. Additionally, it allows you to customize the “from” address and name for your emails, and it also allows you to monitor the status of your emails.

To Know more WordPress plugins for transactional email service, Please click on the given link-

https://mailazy.com/blog/top-wordpress-plugin-for-transactional-email-service/
End-to-end Logging & Monitoring Services
Tags: devops, webdevlopment, javascript, programming
Published: 2023-08-03 19:55:45


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/479n9d0jgq4awjqcxdwf.jpeg)

Organisations can use the tools and procedures provided by our [end-to-end logging and monitoring services](https://vastites.ca/services/end-to-end-logging-monitoring-services/) to continuously monitor and debug their infrastructure and applications. We are the [best DevOps consulting in Toronto](https://vastites.ca), and we can assist organisations in swiftly identifying and resolving problems,enhancing application performance, and reducing downtime by utilising the most recent logging and monitoring technology.

Comprehensive logging: We provide comprehensive logging services that capture all application and infrastructure logs, enabling real-time analysis and troubleshooting.

Performance monitoring: We use performance monitoring tools to monitor the performance of applications and infrastructure, identifying bottlenecks and other performance issues.

Alerting and notification: Our end-to-end logging and monitoring services incorporate alerting and notification systems that notify stakeholders in real-time of any issues or anomalies detected.

Log analysis and visualization: We use advanced log analysis and visualisation tools to provide insights into application and infrastructure behaviour, enabling organisations to identify and resolve issues quickly.

Our Platform Engineering Services are designed to help organisations streamline their software development and delivery processes, resulting in faster time-to-market, improved quality, and reduced costs. Contact us to learn more about how our services can help your organization achieve its goals.

Why do you need [VaST ITES](https://vastites.ca/) Platform engineering services

Visibility and Insights: Logging and monitoring services give organisations visibility into their systems' performance, behaviour, and health. Organizations get to know more about system operations, user behaviours, failures, performance bottlenecks, and security incidents by gathering and analysing logs and analytics.

Proactive Issue Detection: We help detect issues proactively before they have an impact on business operations by providing end-to-end logging and monitoring. Organisations are able to take quick action to prevent or reduce possible problems by setting up alerts, which enable them to get information when predetermined thresholds or patterns are exceeded.

Our end-to-end logging & monitoring services provide organizations with the tools and processes necessary to monitor and troubleshoot their applications and infrastructure in real-time. By leveraging comprehensive logging, performance monitoring, alerting and notification, and log analysis and visualization, we can help organizations detect and resolve issues quickly, improving application performance and minimizing downtime. Contact us to learn more about how our services can help your organization improve its logging and monitoring capabilities.
Error in the code please check it and if possible provide me solution
Tags: webdev, react, discuss, frontend
Published: 2023-08-03 19:40:10

import { useState } from "react";
import Header from "./components/Header";
import Search from "./components/Search";
import Hero from "./components/Hero";
import Body from "./components/Body";
import Footer from "./components/Footer";
import Shop from "./components/Shop";
import Sale from "./components/Sale";
import CustomerCare from "./components/CustomerCare";
import { createBrowserRouter , Outlet } from "react-router-dom";

   

const AppLayout = () => {

    

    const [allProducts , setAllProducts] = useState([]);
    const [filteredProducts , setFilteredProducts] = useState([]);
    const [searchText , setSearchText] = useState("");


    function filterSearchProduct(searchTxt , productslist) {
        return productslist.filter((product) => product.title.toLowerCase().includes(searchTxt.toLowerCase()));
    }


    return (
        <>
            <Search  
                searchText={searchText} 
                setSearchText={setSearchText} 
                filterSearchProduct={filterSearchProduct}
                allProducts={allProducts}    
                setFilteredProducts={setFilteredProducts}        
            />
            <Header/>
            <Outlet/>
            <Hero/>
            <Body allProducts={allProducts} setAllProducts={setAllProducts} filteredProducts={filteredProducts} setFilteredProducts={setFilteredProducts} />

            <Footer/>
        </>
    )
}

export const appRouter = createBrowserRouter([
  
    {
        path: '/',
        element : <AppLayout/>,
        children : [
            {
                path: '/shop',
                element: <Shop/>
            },
            {
                path: '/sale',
                element: <Sale/>
            },
            {
                path: 'customer-care',
                element: <CustomerCare/>
            },
            {
                path :'/',
                
                
      element : <Body allProducts={allProducts} setAllProducts={setAllProducts} filteredProducts={filteredProducts} setFilteredProducts={setFilteredProducts} />
                
        },
           
        ]
    }
    
]);


export default AppLayout;
erros showing
Failed to compile.

[eslint]
src\AppLayout.js
  Line 67:36:   'allProducts' is not defined          no-undef
  Line 67:65:   'setAllProducts' is not defined       no-undef
  Line 67:99:   'filteredProducts' is not defined     no-undef
  Line 67:138:  'setFilteredProducts' is not defined  no-undef

Search for the keywords to learn more about each error.
ERROR in [eslint] 
src\AppLayout.js
  Line 67:36:   'allProducts' is not defined          no-undef
  Line 67:65:   'setAllProducts' is not defined       no-undef
  Line 67:99:   'filteredProducts' is not defined     no-undef
  Line 67:138:  'setFilteredProducts' is not defined  no-undef

Search for the keywords to learn more about each error.
please any one help , how i can overcome from this error
Built a Conversational AI Chatbot Using Amazon Lex
Tags: aws, ai, beginners, tutorial
Published: 2023-08-03 19:35:07

## First, What is Amazon Lex?
   Amazon Lex is a aws service that used to build conversational AI chatbot application using speech or text interface powered by the same technology that powers Amazon Alexa.

## What you will learn here?
  Learn step by step to build AI chatbot using amazon lex.

**Prerequisites:**
  
- Basic knowledge of amazon web service and aws free tier account. 
- Fundamentals of AI and AWS concepts.

## Amazon lex underlying topics:
![Amazon Lex Topics](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0bfj4pqaosnhcyi3vakq.png)

**Intent:**  An Intent is an action that the user wants to perform.
**Utterance:** Utterance are textual representation of what a user has to type or says on order to trigger an intent.
**Slots:**  Slots are input data requirement to fulfil the inputs.
**Fulfilment:** Fulfilment is to complete the users intent. 

## Let's start step by step to build conversational AI chatbot for order pizza: 

**Step 1:** Go to aws lex page and `Create Chatbot` for OrderPizza.
![Create chatbot](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ee9ei5t3ennr6tlzs6bk.png)

**Step 2:** Fill the Intent details as `OrderPizza`(Heading) and Utterance as `Hello,Hii` (start).


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mo470yixfh4x451j90ph.png)

**Step 3:** Add a slot types
            - First name (BuiltIn)
            - PizzaType
            - Pizza crust
            - Appetizers
            - Time for pizza delivery(BuildIn)
Add more slot types as we needed.
![Slot types](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wpfxeurqv9scrvuqsa0r.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s8qua96lj77v5wuwp3ag.png)

**Step 4:** Fill the slot type value as Thin and Thick.

![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kzvonm8ojkomd9y87dgd.png)

**Step 5:** Active the confirmation and type "Confirmation `{Pizzatype}` pizza with `{Pizzacrust}`. Appetizers `{Appetizers}`"


**Step 6:** Active the closing response and type "Thank you `{Name}`. Your order was confirmed and will be delivered by `{DeliveryTime}`."


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b17v68qxhdoi1fnta03s.png)

**Step 7:** Go to slot prompt to add a buttons in advance options.
`Advance Option-->slot prompts-->more prompt option-->Add card group`

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g2p9jgtksey60k8x7trx.png)

![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wv3syqv4np8tfdj6gqj3.png)

**Step 8:** That's it. We have created a AI chatbot for OrderPizza. Click `Build and Test` the chatbot.

Here is the link for Orderpizza conversational AI chatbot demo video  : [LINK](https://drive.google.com/file/d/11l1BFCVx7J444lyjDCEh8EfR1xb5W4j7/view?usp=sharing)
We can integrate this chatbot AI with the web and mobile applications. 

** Thank you for reading and If this is more informative. Share with your friend and follow me **
TIL Blog Day 9 - Sinatra
Tags: webdev, beginners, programming, ruby
Published: 2023-08-03 19:31:00

## Sinatra

Sinatra is a DSL (domain specific language). This basically means that it is a specialized programming language that is designed for a specific narrow area of tasks. In Sinatra's case, this task is creating web applications. Right from the start, I really liked the simplicity that Sinatra provided when creating a quick web app.

To get Sinatra up and running, first install the sinatra gem and a server gem (puma in this case).
`gem install sinatra`
`gem install puma`

After that, you just have to require Sinatra at the top of your Ruby file.
`require 'sinatra'`

You can know start writing routes by using an HTTP method followed by the route you want to create and the `do` keyword followed by a block of code.

```ruby
get '/' do
  "Hello world!"
end
```
If you run your Ruby file it will output the string "Hello world!" in your browser.

Thats how easy it is to get up and running creating routes with Sinatra. You can quickly start creating your very own CRUD(create-read-update-delete) app!

While it is easy to set up, you can create large and complex web apps with many routes. The possibilities are endless!
Pythons @property vs. property()
Tags: webdev, python, beginners, learning
Published: 2023-08-03 19:10:19

In this blog, we will examine the use cases of Python's `@property` decorator versus the `property()` function.
In many situations, both approaches can be used to implement a property in a class, practically interchangeably. Nonetheless, they have some distinct advantages and disadvantages that we'll look a bit deeper into. 

Let's first do a quick review of the syntactical differences between both approaches.

Using the `@property` decorator:

```
class MyClass:
    def __init__(self, my_property):
        self.my_property = my_property

    @property
    def my_property(self):
        return self._my_property

    @my_property.setter
    def my_property(self, value):
        self._my_property = value
```
Using the `property()` function:


```
class MyClass:
    def __init__(self, my_property):
        self.my_property = my_property

    def get_my_property(self):
        return self._my_property

    def set_my_property(self, value):
        self._my_property = value


    my_property = property(get_my_property, set_my_property)
```

As you can see, the `@property` decorator allows you to define the getter and setter methods within the class using method definitions with the same name as the attribute.

On the other hand, the `property()` function requires you to define separate getter and setter methods and assigns them using the `property()` function.

Both approaches achieve the same result, allowing you to define a property. Typically, the choice between using the `@property` decorator or the `property()` function depends on your preferred coding style. However, specific use cases may demand the use of one approach over the other.

For example: 

The `@property` decorator is commonly used when you want to provide a convenient way to access class attributes as if they were regular attributes, without explicitly calling a method. It's especially useful when you want to perform calculations or validation each time the attribute is accessed. The `@property` decorator allows you to define getter methods in a clean and concise manner. However, one downside is that it limits your control over attribute setting and deletion, as you cannot define separate setter and delete methods for the property.

The `property()` function is beneficial when you need greater flexibility and customization options for your property. It enables you to define separate getter, setter, and deleter methods, allowing you to add validation, conversion, or additional logic during property access, assignment, and deletion. However, one downside is that the `property()` function requires more verbose syntax, as each getter, setter, and deleter method needs to be defined explicitly, which can make the code less concise and thus slightly less readable.

In conclusion, both the property decorator and function tend to be two roads to the same destination, but it is helpful to know each ways benefits and deficits and keep them in mind as you code.
I wrote a metasearch engine called Swirl
Tags: search, cloudcomputing, llm, ai
Published: 2023-08-03 18:48:40

Hi all! [Swirl](https://github.com/sidprobstein/swirl-search) sends queries to existing search engines, unifies the results and re-ranks them all using large language models. It solves cross-silo information access and search problems in a fraction of the time and effort required to copy, ingest and index data. 

![](https://raw.githubusercontent.com/wiki/swirlai/swirl-search/images/swirl_results_no_m365-galaxy_dark.png)

Here's a brief video intro: [https://youtu.be/sfsBYyu6qDQ](https://youtu.be/sfsBYyu6qDQ)

Swirl was written in python atop the django/celery/redis stack with a choice of Sqlite3 or PostgreSQL back-ends. The source code is available under the Apache 2.0 license. The distribution includes zero-code configs for Apache Solr, ChatGPT, Elastic Search, OpenSearch, PostgreSQL, Google BigQuery, RequestsGet, Google PSE, NLResearch.com, Miro, Microsoft 365, Atlassian, YouTrack, GitHub, HubSpot & more. Plug-in your access tokens or use Microsoft 365 to login and users can stop searching and start Swirling!

Links:
* [GitHub repository](https://github.com/sidprobstein/swirl-search)
* [Swirl website](https://www.swirl.today)
* [Slack channel for support](https://join.slack.com/t/swirlmetasearch/shared_invite/zt-1qk7q02eo-kpqFAbiZJGOdqgYVvR1sfw)

We are seeking contributions and feedback from developers working on all kinds of search solutions... thanks!

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gl07sutgaxaulu25xvqm.jpg)
My Understanding of the DEV-Tools!
Published: 2023-08-03 18:20:02

**

## What are browser developer tools🤔?
**
Basically dev-tool is nothing but the in-Built tools provided by the browser for the wide range of action on the web-page, from inspecting currently-loaded HTML, CSS and JavaScript to showing which assets the page has requested and how long it takes to load a page and optimize the pages cache and memory😯.

So, how to pull-up the dev-tools?
Well, it's simple you need to click =>
   windows: Ctrl + Shift + I || F12
   mac: Option + Shift + ⌘ + I || F12

`
_DOM-Manipulation:_`
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yacmad7lehd9s7a55wx3.png)

well DOM-manipulation becomes very easy and siplified with the use of dev-tool and you can easily modify and update the code live on the web-page for the better options.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/26p73jq694qmo2gfcu2l.png)


- Delete Node (sometimes Delete Element). Deletes the current element.
- Edit as HTML (sometimes Add attribute/Edit text). Lets you change the HTML and see the results on the fly. Very useful for debugging and testing.
- :hover/:active/:focus. Forces element states to be toggled on, so you can see what their styling would look like.
- Copy/Copy as HTML. Copy the currently selected HTML.

Well DOM-manipulation is not the only feature you get from the dev-tools, you can also make alteration in your CSS code. Which comes very handy for testing the design and UI. 

devTool also provide you a easy and compatible view of your page on different device such as mobile devices, tablets or a wide-screen device, with the help of these design feature you can make alternation and manage your responsive design easily.


`_JavaScript Console:_`

console.log('hello') is one of the most famous and executed statement in the javascript console which can be viewed in the console option from the dev-tools window.
The console window allows you to access all the javascipt object and function for the test purpose and see for yourself what it return on the page. This comes in-handy at various times and help you to fix a logic for the javascript debugger and check for the breakpoints.

`Secrect-Tips:` 

> "You can use '[save all resouces](https://chrome.google.com/webstore/detail/save-all-resources/abpdnfjocnmdomablahdcfnoggeeiedb)' extension available on chrome to download the code of a webpage and use it to learn and view the code and understand the factoring of the code."

That's all for this Blog. I'll leave the responsibility of exploring the other features of the dev-tool on you.

KEEP EXPLORING AND KEEP TRYING🙌... untill next time😁.
How to properly set up box-shadow with styled-components in ReactNative: full explanation with 3 examples
Tags: reactnative, styledcomponents
Published: 2023-08-03 18:07:20

When styling in ReactNative, you can often use `styled-components` to create beautiful, concise designs. However, setting up `box-shadow` can be a bit tricky.

This article will walk you through three examples (two failures and one success) of how to use `styled-components` to set up `box-shadow` in a ReactNative project.


### Failure #1: General box-shadow specification
ReactNative does not allow you to specify `box-shadow` directly like general CSS.

```jsx
import styled from 'styled-components/native';

export const Container = styled.View`
width: 150px;
height: 52px;
border-radius: 26px;
backgroundColor: "#FFFFFF";

//shadow
box-shadow: 2px 8px 12px rgba(0, 0, 0, 0.16);
`;
```

Writing it this way does not reflect the shadow.

### Failure #2: Wrong writing of shadow-offset
In ReactNative, properties such as `shadow-color`, `shadow-opacity`, `shadow-radius`, and `shadow-offset` are used to set shadows. However, if you specify `shadow-offset` with an object, as shown below, it will not be reflected.

```jsx
import styled from 'styled-components/native';
import { Platform } from 'react-native';

export const Container = styled.View`
width: 150px;
height: 52px;
border-radius: 26px;
backgroundColor: "#FFFFFF";

//shadow
shadow-color: "#000000";
shadow-opacity: 0.16;
shadow-radius: 12px;
shadow-offset: {
width: 2px;
height: 8px;
};
${Platform.OS === 'android' && `elevation: 6;`}
`;
```
### Success example: Correct way to write `shadow-offset
The correct way to write `shadow-offset` is as follows.

```jsx
import styled from 'styled-components/native';
import { Platform } from 'react-native';

export const Container = styled.View`
width: 150px;
height: 52px;
border-radius: 26px;
backgroundColor: "#FFFFFF";

//shadow
shadow-color: "#000000";
shadow-opacity: 0.16;
shadow-radius: 12px;
shadow-offset: 2px 8px;
${Platform.OS === 'android' && `elevation: 6;`}
`;
```

Specifying this way will correctly reflect the shadow.

### Summary
When specifying `box-shadow` in ReactNative using `styled-components`, you need to be careful how to write `shadow-offset`. By mastering the correct way to write it, you can add beautiful shadow effects to your application. We hope this article will help you to proceed smoothly with your development.
Beginner group
Tags: webdev, javascript, beginners, learning
Published: 2023-08-03 17:35:18

Hello World! I'm looking to find some people with whom I can learn along, challenge each other and strive to finish the long journey. I'm new to this thing 'internet socialising' but I'm confident that I can be a great team player and I strive to be a really good study partner. I speak decent English and Romanian is my mother language. So if anybody is interested hit me up on discord or here if its possible. Looking forward to finding people to work with.

.whiteglasses