teleren/devto huggingface dataset:
Test Post
Tags: webdev, javascript, beginners, programming
Published: 2024-05-11 16:16:25

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

<u>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</u>


_Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum._

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.** Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.** Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. _Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum._



<u>Test Underline
</u>

~~Test ~~

[Test Link](https://alicangunduz.dev)


1. Order 1
2. Order 2

---


- Unordered 1
- Unordered 2


## Test Heading


> Test Quote

`Test Code`

```js
function functionName(parameters) {
  // code to be executed
}
```




Test img 

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Curated List of the 500+ Best AI Tools, Ranked by Traffic
Tags: ai, productivity, tooling
Published: 2024-05-11 16:07:23

I have come across an amazing resource - [a curated list of the 500+ best AI tools](https://aiparabellum.com/worlds-best-trending-ai-tools/) from around the world, carefully ranked by traffic data on the website aiparabellum.com.

This extensive compilation presents the most popular and trending AI solutions currently available globally. The tools cover a wide range of applications from computer vision and natural language processing to machine learning, chatbots, and more.

I was delighted to see major industry leaders feature prominently on the list such as OpenAI, IBM Watson, Google AI, and Microsoft Azure. The ranking provides a sense of each tool's market standing and popularity based on quantitative traffic analytics.

Scanning through the detailed descriptions of each tool, I realized there are so many innovative functions and uses of AI that I was not previously aware of. I'm sure I will find many problem-solving tools to help enhance my work and productivity.
PostgreSQL specific trigram_similar lookups in Django
Tags: django, postgres, ubuntu
Published: 2024-05-11 15:35:35


For a detailed exploration of Trigram Similarity, check out my previous blog.
[Enhance Your Searches with PostgreSQL Trigram Similarity in Django](https://dev.to/azayshrestha/enhance-your-searches-with-postgresql-trigram-similarity-in-django-4pad).

**Implementing trigram_similar lookups in Django ORM**
First you need to enable pg_trgm extension in your PostgreSQL database to unlease the power of Trigram Similarity. To enable pg_trgm extension execute a following command in your terminal:

```
# Replace database_name with your actual database name
sudo -u postgres psql -d database_name -c "CREATE EXTENSION IF NOT EXISTS pg_trgm;"
```
Then add 'django.contrib.postgres' in settings.py file in django.

```
INSTALLED_APPS = [
    ...
    'django.contrib.postgres',
]
```
A trigram_similar lookup is given an expression and returns results that have a similarity measurement greater than the current similarity threshold. The trigram_similar lookup can be used on CharField and TextField. Here’s how to use it:

```
# Creating Product Table for testing TrigramSimilarity

class Product(models.Model):
    name = models.CharField(max_length=255)

    def __str__(self):
        return self.name
```

```
# Populating the Database with Sample Products

Product.objects.create(name='Espresso Machine')
Product.objects.create(name='Espresso Maker')
Product.objects.create(name='Expresso Machine')
Product.objects.create(name='Coffee Grinder')
Product.objects.create(name='Koffee Grinder')
Product.objects.create(name='Coffee Maker')
Product.objects.create(name='Cappuccino Maker')
Product.objects.create(name='Capuchino Maker')
Product.objects.create(name='French Press')
Product.objects.create(name='Frensh Press')
```

```
# Using trigram_similar lookup in Django ORM

Product.objects.filter(name__trigram_similar='Espresso')

# Result
[<Product: Espresso Machine>, <Product: Espresso Maker>, <Product: Expresso Machine>]
```
KD2 art filtered CSS No Js
Tags: codepen, filter, art, webdev
Published: 2024-05-11 15:32:08

Check out this Pen I made!

{% codepen https://codepen.io/TidyCoder/pen/PovoXjQ %}

It's a filter CSS animation on an KD2 image. <a href="https://www.artstation.com/kd2">To see more kd2 arts click here.</a>
Netlify Dynamic Site Challenge : Building a Dynamic Image Gallery
Tags: netlifychallenge, devchallenge, webdev, javascript
Published: 2024-05-11 15:19:19

* This is my first ever challenge, I hope you like it. If there are any issues please let me know*

I've created a dynamic image gallery app that leverages the power of the Netlify Image CDN to deliver beautiful visuals straight from Unsplash. Users can explore a vast collection of images by entering a keyword, and the app seamlessly fetches them. What's more, you can fine-tune the visual experience by adjusting the image resolution (width and height) and quality to your liking.

### Demo
[Dynamic gallery url https://devdyanmicgallery.netlify.app](https://devdyanmicgallery.netlify.app)

### Screenshots


![mainpage](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5ccx7wwzunow22ai9hqe.png)
![search results page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w34gji8auxgwj1s0gko8.png)
![image properties change modal](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nny57icn5scifsemcal4.png)

Netlify Image CDN: The core of the app relies heavily on the Netlify Image CDN. When a user searches for a keyword, the app fetches images from Unsplash and utilizes the CDN to deliver them efficiently, ensuring fast loading times and a smooth user experience.
Additional Features (Optional)


### Embrace the Visual Feast!

This dynamic image gallery app empowers users to explore a vast world of visuals, perfect for inspiration, design projects, or simply enjoying stunning photography. With the power of Netlify's platform, the app delivers a seamless and visually captivating experience.
Cloud Computing: Some benefits of Cloud Technology
Tags: cloud, database, azure
Published: 2024-05-11 15:17:10


1. **<u>Virtualization</u>:** Virtualization is a technology that allows you to create multiple simulated environments or dedicated resources from a single, physical hardware system. Essentially, it enables you to run several virtual machines on a single physical machine, each of which operates independently and can run its own operating system and applications. This flexibility helps optimize hardware resources, improve efficiency, and streamline management tasks.

2. **<u>Scalability</u>:** Scalability refers to the ability of a system, network, or application to handle a growing amount of workload or traffic by adding resources or expanding its capacity without impacting performance. 

3. **<u>Agility</u>:** Agility in the context of technology refers to the ability of a system or organization to quickly adapt, respond, and innovate in the face of changing circumstances or requirements. 

4. **<u>High Availability</u>:** High availability refers to the ability of a system or service to remain operational and accessible for a high percentage of the time, typically measured as a percentage of uptime over a given period. 

5. **<u>Fault Tolerant</u>:** This is the ability of a system to continue operating and providing services even in the presence of hardware or software failures. 

6. **<u>Global Reach</u>:** Global reach refers to the ability of a technology, platform, or service to operate and deliver consistent performance and user experience across different geographical locations or regions worldwide. 

7. **<u>Difference between Elasticity and Scalability</u>:** Scalability focuses on the ability to handle increasing workload or demand by adding resources or capacity as needed, typically in a linear or predictable manner. Elasticity, on the other hand, emphasizes the dynamic and automatic allocation and deallocation of resources in response to changing demand, allowing for rapid scaling up or down based on fluctuating usage patterns.
Simple Cloud terminologies for Beginners.
Tags: devops, terminologies, azure
Published: 2024-05-11 15:12:35

1. Virtualisation. This is the an abstract version of physical computer components. Virtualisation allows software to create non-physical computer (virtual machine) on a physical computer. The created non-physical computer is referred to as virtual machines. The virtual machines share the components on the physical hardware - such as processors, memory and storage—into multiple virtual machines (VMs). One major advantage of virtualisation is that it allows companies to o partition a single physical computer or server into several virtual machines. Each virtual machine can then interact independently and run different operating systems or applications while sharing the resources of a single host machine.
Virtualisation is made possible by what is called the hypervisor.

2.Scalability. This is the ability of organisations to increase or decrease cloud resources to meet customer demands.In certain times organisations experience huge traffic or increase usage of their cloud resources, such that the resource could crash if the demand or traffic is too much. Scalability will help improve customer's experience and help organisations fulfil customers demands as required. There are 2 types of scalability ; Vertical scalability (scale-up/scale-down) requires adding more more CPU,RAM OR Storage to an existing server or reducing the listed resources. Horizontal scalability involves adding more servers or computers to an already existing resource instead of increasing the component of the servers. Horizontal scalability can scale-in or scale-out.

3.Agility allows organisation to allocation or deallocate, develop, test or launch cloud-based resources easily and quickly.

4.High Availability is one of the benefits of cloud computing, it ensures organisations enjoy non-interuptions of services in the face of disruptions or failures. High availability ensures business continuity and business scalability.This is achieved through a combination of redundancy, failover mechanisms, and automatic recovery processesThis is made possible.

5.Fault Tolerant is the ability of a system (computer, network, cloud resource, storage etc) to continue operating without interruption even if one or more of its components fail. Configuration or system is duplicated in  and that takes over for the main configuration in case there is an outage

6.Global Reach. Cloud services has enabled organisations to provide niche goods and services to their customers in any part of the world. 

I will right about individual concept in subsequent write ups. Thanks for reading
Tailwindcss Studio truly become friends with developers
Published: 2024-05-11 15:03:22

Hello everyone, we are the [Tailwindcss Studio](https://tailwindcss-studio.com) team.

[Tailwindcss Studio](https://tailwindcss-studio.com) is a visual tool dedicated to developers for quickly building pages based on Tailwind CSS.

At present, we are still a small and nascent team, but our goals are not small.

Our ultimate goal is to be the most user-friendly and efficient development experience in the industry.

At the same time, we are also a different kind of team. We will operate this product in an open and sincere manner.

Truly becoming good friends with developers.

Based on the above principles, we will take action in the following areas:

- Rapid iteration with weekly updates.
- Sharing the thoughts and summaries from product design and development in the form of articles on social media.
- Inviting developers to jointly decide the future direction of the product.
- Responding to every [community](https://discord.gg/PeUPRueN) issue.
- Focusing on serving developers well, with efficiency and ease of use as our guiding principles.

We sincerely invite you to join the [community](https://discord.gg/PeUPRueN), to provide feedback on usage issues and real pain points. We will respond and improve at the fastest speed possible.

Let’s embark on a magical journey together.
DartsMash: a platform for darts enthusiasts
Tags: nuxt3, rails
Published: 2024-05-11 14:58:39

---
title: DartsMash: a platform for darts enthusiasts
published: true
description: A platform for darts players and enthusiasts 
tags: Nuxt3, Rails
cover_image: https://i.postimg.cc/Jng4mwCP/ogimage.png
# Use a ratio of 100:42 for best results.
# published_at: 2024-05-11 14:39 +0000
---


I'm a software engineer for almost 10 years now. I tried to find hobbies and interests beside coding, so I tried many things until I tried darts one day, I became obsessed with it and bought a dozen dart sets. 

I always looked for the perfect platform for darts players and enthusiasts but I couldn't find one. So I decided to build one myself. 

Finally, after 3 years of work during the weekends and holidays, I beta released DartsMash. 

I tried different technologies while working on it but in the end I settled with Rails and Nuxt3. 

The platform allows users to share there player profiles, play darts games on real-time, post about there dart sets and score, explore different dart sets, and more.. 

I would like to invite all the darts enthusiasts to try out DartsMash

https://www.dartsmash.com
Detecting Blocked Google Ads with Simple and Effective JavaScript
Tags: webdev, javascript, adblock
Published: 2024-05-11 14:57:49

I've experimented with various solutions, but some older methods have become ineffective due to the proliferation of browsers and ad blockers.

Previously, to check if an ad (**Google Ads**) was blocked, most AdBlocks targeted specific CSS classes (like **class="ad-box"**) and applied the "display: none" property to the DOM with that class.

This would make the ad disappear from your browser. However, many of these older solutions no longer work and are not included in the solutions above. Therefore, we will focus on more suitable solutions.

By default, there is no common API to determine if an ad is blocked. There are some tricks to check if AdBlock is being used, such as checking if the ad script is loaded correctly.

This solution works for all ad blockers, including the default blockers for **EDGE**, **Brave**, ad blocking apps like **AdGuard**, and **DNS blockers**.

The check will be performed after all website components have loaded, so it will not affect **website performance** or **Core Web Vitals (CWV)**.

Always test carefully to ensure you don't affect the experience of users who don't use AdBlock.

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

**How does it work?**

It's quite simple. The code above will be executed when the entire website has finished loading. Its task is to check if the adsbygoogle.js file (specifically this path: https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js) is blocked ((failed) net::ERR_UNSAFE_REDIRECT).

Open **Developer Tools** and select the **Console** and **Network** tabs to check.

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

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

Good luck!

[Ad Blocking: Challenges and Solutions for Website Owners](https://live-tv-channels.org/blog/ad-blocking-challenges-and-solutions-for-website-owners-post55)
HOW CSS WORKS BEHIND THE SCENE
Tags: html, css, webdev, learning
Published: 2024-05-11 14:57:00

**CSS** means Cascading Style Sheets. It is a language used to style your HTML (Hyper Text Markup Language) page. CSS is the backbone of web designs, allowing developers to control the visual presentation of their websites.
There are three types of CSS. They are:
Inline CSS
Internal CSS
External CSS

**- Inline CSS:** 
This is the CSS or style applied to a unique element in your HTML document.

**- Internal CSS:**
 This defines a style for a single HTML page. It is usually defined in an HTML page's `head`section within a `style` element.

**- External CSS:**
 This styles multiple HTML pages with a single style sheet linked to your HTML page with a `link`tag. The CSS rules are contained in a separate CSS file and must be linked to the HTML document to see the desired results.


When we have multiple styles being applied to the same element which is causing a conflict, that’s where what we know as cascading comes in.

**CSS CASCADE:** The term cascade in CSS refers to the process of resolving conflicts when multiple CSS rules are applied to the same HTML element. When multiple styles conflict, the cascade determines which style takes precedence.
Your browser will always pick the last CSS rule declared.

**SELECTORS:** They select HTML elements based on the tag names, classes, ID’s, attributes and relationships with other elements. Here are some common types of selectors;

- Element selector:
 Targets HTML element based on their tag names, for example: p, span, div, h1 etc.

- Class Selector:
 Targets elements with a specific class attribute. To select element with a specific class attribute, you put a period (.), followed by the class name given to the element.
 The class selector has a higher importance than the element name selector.

- ID Selector:
 Targets a single element with a specific ID attribute. 
It is unique within a page. It is more important than any other selector and it overrides any other CSS rule you apply to the specific element if you have applied a CSS rule to the ID attribute.
To select an element with a specific id, you write a hash (#) character, followed by the id of the element.

- Universal Selector:
 This selector selects all HTML elements to apply CSS rules.
Example,
*{
background-color:grey;
font-size:16px;
color:green;
}

**SPECIFICITY**: It determines which CSS rule is applied to an element when multiple rules have conflicting selectors, it also determines which element is most specific using a scoring program. This is because you can have the same element with the same properties but different values. The one with the higher specificity wins.
When comparing specificity, the selector with the highest specificity wins regardless of the order in which the rules are defined in the stylesheet. Incase specificity is equal, the last rule defines that precedence due to the cascade.

By understanding the concept of cascade, selector and specificity, web developers can create more efficient and maintainable CSS stylesheets, ensuring consistent and visually appealing designs across different web pages and devices.
Docker for Next.js
Tags: webdev, docker, nextjs, frontend
Published: 2024-05-11 14:37:59


## What is Docker?  🐳

- **Docker** is an open-source platform that uses containerization technology to make it easier to create, deploy, and run applications by using containers. Containers allow a developer to package up an application with all the parts it needs, such as libraries and other dependencies, and ship it all out as one package.
- **Docker Container:** A lightweight, standalone, executable package that includes everything needed to run a piece of software, including the code, runtime, libraries, environment variables, and config files.
- **Docker Image:** A blueprint for creating Docker containers. Images are immutable files that outline the instructions for a complete and executable version of an application.

## Creating a Next.js Image with Docker 🚀

In the root of your Next.js project, create a file named Dockerfile and add the following content: 

### Dockerfile

```Dockerfile
# Use the lightweight Node.js 18 Alpine image
FROM node:18-alpine

# Set environment variable with a default for production
ARG NODE_ENV=production
ENV NODE_ENV=${NODE_ENV}

# Establish working directory
WORKDIR /app

# Copy and install dependencies
COPY package*.json ./
RUN if [ "$NODE_ENV" = "development" ]; \
        then npm install; \
        else npm install --only=production; \
    fi

# Copy application code
COPY . .

# Build the application in production
RUN if [ "$NODE_ENV" = "production" ]; \
        then npm run build; \
    fi

# Expose port 3000
EXPOSE 3000

# Specify the command to start the app
CMD if [ "$NODE_ENV" = "development" ]; \
        then npm run dev; \
        else npm start; \
    fi
```

## Building and Running the Docker Container 🛠️

To build and run the Docker container, enter the following commands in your terminal:

### Development Environment:

```bash
docker build --build-arg NODE_ENV=development -t my-nextjs-app-dev .
docker run -p 3000:3000 -v $(pwd):/app my-nextjs-app-dev
```

### Deployment Environment:

```bash
docker build -t my-nextjs-app-prod .
docker run -p 3000:3000 my-nextjs-app-prod
```

###  Stop Docker Container
```bash
docker stop <container-name>
```

## How to Push the Docker Image to Docker Hub 

To share your Docker image via Docker Hub, follow these steps:

1. **Login to Docker Hub**:
   ```bash
   docker login
   ```
2. **Tag your Docker image**:
   ```bash
   docker tag my-nextjs-app yourusername/my-nextjs-app:latest
   ```
3. **Push the image to Docker Hub**:
   ```bash
   docker push yourusername/my-nextjs-app:latest
   ```
You can now access your Docker image from any machine by pulling it from Docker Hub.
To pull the image, use the following command:
```bash
docker pull yourusername/my-nextjs-app:latest
```

Now onwards, you can deploy your Next.js application using Docker containers. It's a great way to ensure consistency across different environments and simplify the deployment process. 🚀