teleren/devto huggingface dataset:
The various modules of Digital Marketing.
Tags: digital, marketing, webdev
Published: 2024-06-25 16:21:27

## Digital Marketing


1. Content Marketing:
Content marketing focuses on creating and distributing valuable, relevant, consistent content to attract and retain a clearly defined audience. Key aspects include:
Blogging: Regularly publishing articles that provide useful information.
Video Marketing: Creating engaging video content for platforms like YouTube.

2. Search Engine Optimization (SEO):
Search Engine Optimization is the practice of optimizing a website to improve its visibility and ranking in search engine results pages (SERPs). The primary objective of SEO is to boost organic (non-paid) traffic to the site.

3. Email marketing:
Email marketing entails distributing targeted emails to a list of subscribers. This can include:
Newsletters: Periodic updates sent to subscribers.
Promotional Emails: Messages about special deals or discounts.
Automated Email Sequences: Pre-scheduled emails triggered by specific user activities.

4. Search Engine Marketing (SEM):
Search Engine Marketing involves using paid advertising to increase the visibility of a website in search engine results pages (SERPs). The primary objective is to drive targeted traffic to a website and generate leads or sales. 

5. Social Media Marketing:
Social Media Marketing involves leveraging social media platforms to promote products, services, or content and engage with a target audience. The goal is to increase brand awareness, drive traffic, and generate leads or sales.

6. Web Analytics:
This involves employing various tools and methods to assess, examine, and enhance the efficiency of digital marketing efforts. Key tools include:
Google Analytics: Monitoring and reporting on website traffic.
Social Media Analytics: Tracking engagement and performance on social networks.
Email Marketing Analytics: Evaluating open rates, click-through rates, and conversions.
Super Club Net: Libro de Introducción a HTML, CSS y JS
Tags: javascript, html, css, chile
Published: 2024-06-25 16:12:00

---
title: Super Club Net: Libro de Introducción a HTML, CSS y JS
published: true
description: Una pequeña y amena introducción a las tecnologías para desarrollo web
tags: javascript, html, css, chile
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/docfxqv0c1t0zxbgqb0i.jpg
# Use a ratio of 100:42 for best results.
published_at: 2024-06-25 16:12 +0000
---

Con motivo de dar honor a la revista Club Nintendo y su mini curso de HTML.

{% embed https://dev.to/javascriptchile/la-revista-club-nintendo-y-su-curso-de-html-264c %}

He elaborado este pequeño libro actualizando y ampliando los conceptos vistos en esa revista.

Un libro gratuito que puede ser leído en los siguientes sitios web:

- https://ninjas.cl/books/superclubnet/
- mirror: https://ninjas.codeberg.page/superclubnet/@main/docs/

## Contenidos

- HTML y CSS básico.
- JavaScript básico.
- Manipulación de DOM.
- Formularios y validación.
- Tips y recomendaciones.

Una escritura amena y con ejemplos basados en juegos de Nintendo 64. Incluye un proyecto para ejercitar con temática de Mario Kart 64.


![Simulador de Mario Kart 64](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p1cyc53e2lfzmhjiucq8.png)



Pensado para personas que recién inician en el mundo HTML y quizás para alguien que quiera refrescar conceptos.

Hecho con mucho amor por [Ninjas.cl](https://ninjas.cl) para todo aquel con curiosidad y paciencia de aprender HTML, CSS y JS para desarrollo web :)
Generating photos by IA
Tags: webdev, beginners, javascript
Published: 2024-06-25 16:08:46

Is generating photos with AI that easy? What do you ask for the bot to bring the photos you want? I asked for meta AI to give me several photos now I wonder if those photos are already existing on some servers or not. I want something to generate for my blog website or instagram for educational purposes. Please help how to go about it.
1038. Binary Search Tree to Greater Sum Tree
Tags: php, leetcode, algorithms, programming
Published: 2024-06-25 16:03:38

1038\. Binary Search Tree to Greater Sum Tree

Medium

Given the `root` of a Binary Search Tree (BST), convert it to a Greater Tree such that every key of the original BST is changed to the original key plus the sum of all keys greater than the original key in BST.

As a reminder, _a binary search tree_ is a tree that satisfies these constraints:

- The left subtree of a node contains only nodes with keys **less than** the node's key.
- The right subtree of a node contains only nodes with keys **greater than** the node's key.
- Both the left and right subtrees must also be binary search trees.


**Example 1:**

![tree](https://assets.leetcode.com/uploads/2019/05/02/tree.png)

- **Input:** root = [4,1,6,0,2,5,7,null,null,null,3,null,null,null,8]
- **Output:** [30,36,21,36,35,26,15,null,null,null,33,null,null,null,8]

**Example 2:**

- **Input:** root = [0,null,1]
- **Output:** [1,null,1]

**Constraints:**

- The number of nodes in the tree is in the range `[1, 100]`.
- `0 <= Node.val <= 100`
- All the values in the tree are unique.

Note: This question is the same as 538: https://leetcode.com/problems/convert-bst-to-greater-tree/


**Solution:**

```
/**
 * Definition for a binary tree node.
 * class TreeNode {
 *     public $val = null;
 *     public $left = null;
 *     public $right = null;
 *     function __construct($val = 0, $left = null, $right = null) {
 *         $this->val = $val;
 *         $this->left = $left;
 *         $this->right = $right;
 *     }
 * }
 */
class Solution {

    /**
     * @param TreeNode $root
     * @return TreeNode
     */
    function bstToGst($root) {
        $prefix = 0;

        $reversedInorder = function ($root) use (&$reversedInorder, &$prefix) {
            if ($root == null)
                return;

            $reversedInorder($root->right);

            $root->val += $prefix;
            $prefix = $root->val;

            $reversedInorder($root->left);
        };

        $reversedInorder($root);
        return $root;
    }
}
```



**Contact Links**

- **[LinkedIn](https://www.linkedin.com/in/arifulhaque/)**
- **[GitHub](https://github.com/mah-shamim)**
Introducing Multi-Player Car Parking Game! 🚗
Published: 2024-06-25 16:00:45


Get ready to test your parking skills with friends in our exciting new Multi-Player Car Parking game! Challenge your buddies, compete for the best parking spots, and prove who’s the ultimate parking master.

**Features:
**
**Real-Time Multiplayer:** Park alongside your friends and see who can snag the best spot.
Diverse Vehicles: Choose from a wide range of cars, each with unique handling.
**Challenging Levels:** Navigate through various parking scenarios, from tight city streets to sprawling lots.
Customizable Controls: Adjust settings to match your preferred driving style.
**Leaderboards:** Climb the ranks and showcase your parking prowess to the world.
Whether you're a parking pro or just looking for some fun with friends, our Multi-Player Car Parking game offers endless entertainment. Sharpen your skills, avoid obstacles, and become the parking champion!

Download now [car parking multiplayer mod apk](https://carparkingapkk.com/) and start parking! 🚙💨
Getting "Start a Power Apps trial" when using Canvas with Dataverse even with a premium license.
Published: 2024-06-25 16:00:42

I have a project built with Canvas that connects with Dataverse.  When accessing the published linked, it brings up a "Start a Power Apps trial".  It was confirmed that we have  premium license.  It does not prompt with other combination: canvas with sharepoint, model with dataverse.

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

What's going on?
Kalos by Stratus10: The All-in-One Cloud Management Platform
Published: 2024-06-25 15:48:21

Stratus10 Cloud Computing Services is an Amazon Web Services (AWS) Advanced Consulting Partner helping organizations migrate to the cloud or if they’re already on AWS we help implement best practices. Our core competencies are cloud migration, application modernization, DevOps and DevSecOps, CI/CD pipelines, Windows Server, networking, serverless infrastructure, Kubernetes (K8s), and cybersecurity.

Our flagship SaaS platform, Kalos, is an AWS cost and security management platform designed for infrastructure teams that want to reduce AWS costs and improve security through powerful data aggregation and visualization of their cloud environment. Built from our years of experience designing and managing AWS infrastructures, Kalos will help you streamline and transform your cloud operations.

[](https://stratus10.com/kalos)
Typescript newbie can't get Vue app to see his Type.
Tags: typescript, vue
Published: 2024-06-25 15:47:44

Hello, everyone. I am developing a Vue 3 app with Vuetify 3 and Pinia. I'm functional on all of those but far from massively experienced with them. I'm trying to add Typescript to the mix because I'm quite excited about the good things Typescript does with respect to type safety. 

My app, especially the main Pinia store, makes heavy use of a type which I'll call Foo since the real name isn't important anyway. Foo is a pretty simple object consisting of just two numbers and two strings, and no methods for the moment since I want to get a Type without methods working first; I'll add the methods after I have got the basic version of Foo working. (The Pinia store is already complete and working wonderfully in Javascript as are my components.) I am having a great deal of trouble figuring out how and where to export and then import this Foo type. (By the way, I know from the Typescript manual that interfaces are preferred over types so I'm quite willing to use an interface if that is better in this case. However, my initial sense of things is that a Type will be sufficient for my needs.)  

I'll be using Type Foo in both my Pinia store and in various components of my Vue app to ensure that any Foo objects conform to expectations. I should also mention that I am developing in VS Code, use Vite to scaffold my projects, and intend to use ES modules rather than JSCommon modules. 

So, with all that in mind, I've gone ahead and tried to write the code for Type Foo. I put it in a new subdirectory right below `src`, called `types`, and put it in a file called `Foo.d.ts`. (I'm very confused still about when you use a `.ts` suffix and when you should use a `.d.ts` suffix so please correct me if I'm wrong!) 

My definition of Foo looks like this:

```
export Type Foo = {
  field1: number;
  field2: string;
  field3: string;
  field4: number
}
```

My Pinia store, which is the heaviest user of Foo, is at `src/store/Tracker.ts`. The import statement I'm using to pick up Foo is:

`import { Foo } from './types/Foo';`

For what it's worth, I've tried several variations of that import but all of them result in that same error that this one does: Typescript error 2307, `cannot find module or its corresponding type definitions`.

My tsconfig.json, as generated by Vite is:

 

```
{
  "compilerOptions": {
    "baseUrl": ".",
    "target": "ESNext",
    "useDefineForClassFields": true,
    "module": "ESNext",
    "moduleResolution": "Node",
    "strict": true,
    "jsx": "preserve",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "esModuleInterop": true,
    "lib": ["ESNext", "DOM"],
    "skipLibCheck": true,
    "noEmit": true,
    "paths": {
      "@/*": [
       "src/*"
      ]
     }
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
  "references": [{ "path": "./tsconfig.node.json" }],
  "exclude": ["node_modules"]
}
```

What do I need to do differently?
Manipulating Elements
Tags: dom, javascript, manipulation
Published: 2024-06-25 15:38:17

## Changing Content
- **innerHTML:** Gets or sets the HTML content inside an element.

```
element.innerHTML = '<p>New Content</p>';
```

- **textContent:** Gets or sets the text content of an element.

```
element.textContent = 'New Text';
```
- **innerText:** Similar to textContent but takes into account CSS styling.

```
element.innerText = 'New Text';
```

---

## Changing Attributes

- **getAttribute():** Gets the value of an attribute on the specified element.

```
const value = element.getAttribute('src');
```
- **setAttribute():** Sets the value of an attribute on the specified element.

```
element.setAttribute('src', 'newImage.jpg');
```
- **removeAttribute():** Removes an attribute from the specified element.

```
element.removeAttribute('src');
```

---

## Changing Styles

- **Using the style Property:** Directly manipulate an element's inline styles.

```
element.style.color = 'red';
element.style.fontSize = '20px';
```

- **Using classList Methods:**

- **add:** Adds a class to an element.

```
element.classList.add('newClass');
```
- **remove:** Removes a class from an element.

```
element.classList.remove('oldClass');
```
- **toggle:** Toggles a class on an element.

```
element.classList.toggle('activeClass');
```
- **contains:** Checks if an element contains a specific class.

```
element.classList.contains('someClass');
```

---

## Creating and Inserting Elements

- **createElement():** Creates a new element.

```
const newElement = document.createElement('div');
```
- **appendChild():** Appends a child element to a parent element.

```
parentElement.appendChild(newElement);
```
- **insertBefore():** Inserts an element before a specified child of a parent element.

```
parentElement.insertBefore(newElement, referenceElement);
```
- **insertAdjacentHTML():** Inserts HTML text into a specified position.

```
element.insertAdjacentHTML('beforebegin', '<p>Before</p>');
element.insertAdjacentHTML('afterbegin', '<p>Start</p>');
element.insertAdjacentHTML('beforeend', '<p>End</p>');
element.insertAdjacentHTML('afterend', '<p>After</p>');
```
- **append() and prepend():** Inserts nodes or text at the end or beginning of an element.

```
parentElement.append(newElement, 'Some text');
parentElement.prepend(newElement, 'Some text');
```

---

## Removing Elements
- **removeChild():** Removes a child element from a parent element.

```
parentElement.removeChild(childElement);
```
- **remove():** Removes the specified element from the DOM.

```
element.remove();
```
Object reference not set to an instance of an object
Published: 2024-06-25 15:37:22

I'm pretty new to C# coming from a VB.Net environment. This error message isn't new to me, however, in this context, I'm really not sure why this is happening. I've created a datasource with several tables which each table is connected to a ListBox control via a DataAdapter. If I comment out the line in error, the program runs fine. It's just this initial assignment to the variable that I receive this error. Please see attached image.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dd2oml7gsm5x5orniq22.jpg)
I would like to get comments on Adaptive Playback Speed, which I developed to reduce video freezes.
Tags: javascript, react, vue, webdev
Published: 2024-06-25 15:32:06

Greetings everyone, I would like to get your comments about the video player that will work with the Adaptive Streaming and Adaptive Playback Speed ​​approaches I am working on.

The video player I mentioned slows down the buffer flow in the video buffer zone when the internet speed is low and increases the time until new video frames arrive.

For example, let's say the length of the video a user is watching is 24 seconds. Since the user's internet speed is low, only 12 seconds of video data (buffer) in total can be downloaded in 24 seconds. We can reduce the freezing time of the video watched by this user as follows: The user started the video and reached the 8th second (it has not frozen yet). From this point on, if we reduce the speed of the video from 1x to 0.8x, it will freeze in the 13th second, although it should normally freeze in the 12th second. The 4 seconds between seconds 8 and 12 will be followed by 5 seconds. In this scenario, 1 second may seem like a small difference, but if we consider that a movie is 120 minutes on average, it makes 7200 seconds in total. This takes 10 minutes. In other words, the user will watch the movie with 10 minutes less freezing in total. Since the process of slowing down the segment flow I mentioned will only occur in the buffer area of ​​the video, when the user notices the slowdown, the video will return to 1x speed.

Repo: https://github.com/ahmetilhn/savior-video-player

Development continues
Unlocking Affordable Storage Magic: Our Journey with Uploadthing! 🚀✨
Tags: webdev, javascript, aws, nextjs
Published: 2024-06-25 15:27:59

I was working on a project where we have to store PDFs in a storage bucket or any storage solution. Initially, we were storing the PDFs in an AWS S3 bucket so that users could easily access the content of the PDFs. However, as we know, the pricing of the S3 bucket is high.🔥.

So, we are looking for some good alternative solutions that we can use with a good pricing model.

I have been following Theo for the last six months and love watching his YouTube videos. From that, I learned about Uploadthing. 

Uploadthing is a modern file storage solution designed to meet the diverse needs of developers and businesses. Whether you're storing documents, images, or other types of files, Uploadthing offers a straightforward and cost-effective option.

**Key Features:**

1. Generous Free Tier: Uploadthing provides 10 GB of free storage space, making it an excellent choice for startups and small projects.

2. Affordable Pricing: For just $10 per month, you can access 100 GB of storage, offering a cost-effective alternative to traditional storage solutions like AWS S3. 


If you are building your application in Next.js, the integration of Uploadthing with Next.js is smooth as butter.
Generating logos with GPT and text-to-image AI models (Stable Diffusion V2, V3, SDXL)
Tags: ai, agent, llm, nocode
Published: 2024-06-25 15:24:29

In this quick tutorial, we will create a no-code AI agent for generating logos using [Aiflowly.com](https://www.aiflowly.com/).

# Workflow

Our AI agent will be able to:

1. Read short user input for a logo topic.
2. Pass it to text-to-text AI mode (we will use OpenAI's GPT models) and generate an advanced prompt for generating an image.
3. The generated prompt will then be passed to various text-to-image models.
4. Our no-code AI agent will render the output images after generating all images.

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

# Text-to-image models

For this tutorial, we will use the following text-to-image models:

1. [Stability AI / Stable Diffusion v2](https://replicate.com/stability-ai/stable-diffusion)
2. [Stability AI / Stable Diffusion v3](https://replicate.com/stability-ai/stable-diffusion-3)
3. [Kandinsky 2.2](https://replicate.com/ai-forever/kandinsky-2.2)
4. [ByteDance / sdxl-lightning-4step](https://replicate.com/bytedance/sdxl-lightning-4step)
5. [Stability AI / SDXL](https://replicate.com/stability-ai/sdxl)

# Text-to-text models

We will use [OpenAI's GPT models](https://platform.openai.com/docs/models) to generate an advanced text-to-image prompt. Currently, Aiflowly supports the following GPT models:

1. GPT-4o
2. GPT-4-turbo
3. GPT-3.5-turbo

To improve the output of these models, we will use the following system prompt:

```
For a given topic, write a detailed text-to-image prompt that will be used by another AI model (text-to-image AI model).
```

Technically, we can improve this prompt or use a negative one to feed the text-to-image model.

# Agent's no-code flow

Agent's flow consists of three simple steps:

1. User input
2. Text-to-image prompt
3. Image generation (repeated for each image model)

It looks like the following:

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

[Aiflowly](https://www.aiflowly.com/)'s flow execution system will run through each node, automatically generate required input and output, and render the result as it progresses.

# Conclusion

In this example, we used [Aiflowly](https://www.aiflowly.com/) to generate a simple AI agent and workflow to chain the output of multiple AI models.

It is worth noticing that we used default AI models and default parameters. It is possible to fine-tune parameters to achieve better results.

You can generate your own AI workflows using [Aiflowly.com](https://www.aiflowly.com/).

---

Follow [Aiflowly on X](https://x.com/aiflowly) for feature demos and updates!
Implementing an Interceptor for RestClient (Java + Spring Boot)
Tags: java, spring, springboot
Published: 2024-06-25 15:23:33

Hello, everyone! Today, I'll be showing you a straightforward way to set up an interceptor in the new RestClient class of the Spring Framework.

1º) First, let's create our project. We'll keep it simple, just for study purposes.


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

2º) Next, let's create our class that will be used as the interceptor.

```
@Component
public class RestClientInterceptor implements ClientHttpRequestInterceptor {

    @Override
    public ClientHttpResponse intercept(HttpRequest request, byte[] body, ClientHttpRequestExecution execution) throws IOException {
        request.getHeaders().add("header1", "header 1 value");
        return execution.execute(request, body);
    }

}
```

According to the Spring Framework documentation, the `ClientHttpRequestInterceptor` interface is a contract to intercept client-side HTTP requests. Implementations can be registered with `RestClient` or `RestTemplate` to modify the outgoing request and/or the incoming response. The interface contains the method `intercept`, which intercepts the given request and returns a response. The provided `ClientHttpRequestExecution` allows the interceptor to pass on the request and response to the next entity in the chain.

3º) Let's configure our RestClient Bean.

```
@Configuration
public class RestClientConfig {

    @Bean
	RestClient restClient() {
		return RestClient.builder().baseUrl(null).requestInterceptor(new RestClientInterceptor()).build();
	}
}
```

4º) Now, let's create the classes to test our interceptor. We will need a service class to make HTTP requests and a test class to verify that the interceptor is working correctly.

```
@Service
public class Client {

    private final org.springframework.web.client.RestClient restClient;

    public Client(org.springframework.web.client.RestClient restClient) {
        this.restClient = restClient;
    }

    public void restClientAct() {
        restClient.post().retrieve();
    }

}
```
```
@RestController
@RequestMapping("/")
public class RestClientController {

    private final Client request;

    public RestClientController(Client request) {
        this.request = request;
    }

    @GetMapping()
    public void getAccount(){
        request.restClientAct();
    }

}
```

5º) Done! Here is the curl command to test the endpoint:

`curl --location 'localhost:8080'`

I think that's it. This basic code should address your need to intercept requests made from the RestClient.

**Here's the code on github:** https://github.com/FelipeJansenDev/rest-client-interceptor

**Follow me on Linkedin for more tips and tricks:** https://www.linkedin.com/in/felipe-neiva-jansen/