teleren/devto huggingface dataset:
Interactive Loading Animation with CSS
Tags: codepen, css, frontend, animation
Published: 2024-05-27 15:57:04

This project demonstrates how to create an engaging loading animation using pure CSS.
 The animation features a rotating background color and a loader composed of** 20 spinning dots **that pulsate sequentially. The background hue shifts continuously, creating a dynamic visual effect. Each dot is positioned using CSS variables and animated with keyframes to scale up and down in a rhythmic pattern.

**Key Features:**

- Rotating Background: Smooth color transitions using hue-rotate.
- Pulsating Dots: Sequential animation delays for a wave effect.
- Pure CSS: No JavaScript required, ensuring lightweight performance.

**Usage**
- Embed the HTML in your webpage.
- Add the CSS to your stylesheet.
- Adjust the number of spans and their styles as needed for different visual effects.
**This loader is perfect for adding a modern, visually appealing touch to your web projects.**

## **HTML**

```
<section>
  <div class="loader">
    <span style="--i:1;"></span>
    <span style="--i:2;"></span>
    <span style="--i:3;"></span>
    <span style="--i:4;"></span>
    <span style="--i:5;"></span>
    <span style="--i:6;"></span>
    <span style="--i:7;"></span>
    <span style="--i:8;"></span>
    <span style="--i:9;"></span>
    <span style="--i:10;"></span>
    <span style="--i:11;"></span>
    <span style="--i:12;"></span>
    <span style="--i:13;"></span>
    <span style="--i:14;"></span>
    <span style="--i:15;"></span>
    <span style="--i:16;"></span>
    <span style="--i:17;"></span>
    <span style="--i:18;"></span>
    <span style="--i:19;"></span>
    <span style="--i:20;"></span>
  </div>
</section>

```

## **CSS**

```
body, html {
  margin: 0;
  padding: 0;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
width:100%;
  background: #042104;
  animation: animateBg 10s linear infinite;
}

@keyframes animateBg {
  0% {
    filter: hue-rotate(0deg);
  }
  100% {
    filter: hue-rotate(360deg);
  }
}

section .loader {
  position: relative;
  width: 120px;
  height: 120px;
}
section .loader:hover {
  position: relative;
  width: 140px;
  height: 140px;
}
section .loader span {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: rotate(calc(18deg * var(--i)));
}

section .loader span::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 15px;
  height: 15px;
  background: #00ff0a;
  border-radius: 50%;
  box-shadow: 0 0 10px #00ff0a, 
              0 0 20px #00ff0a, 
              0 0 40px #00ff0a, 
              0 0 60px #00ff0a, 
              0 0 80px #00ff0a, 
              0 0 100px #00ff0a;
  animation: animate 2s linear infinite;
  animation-delay: calc(0.1s * var(--i));
}

@keyframes animate {
  0% {
    transform: scale(1);
  }
  80%, 100% {
    transform: scale(0);
  }
}

```
{% codepen https://codepen.io/Alikhanzada577/pen/oNRYzME %}
30 Days of JavaScript - Day 1
Published: 2024-05-27 15:49:47

Hey, join me in answering the [30 Days of Javascript](https://leetcode.com/studyplan/30-days-of-javascript/) from Leetcode.

Here is the description of [Day 1](https://leetcode.com/problems/create-hello-world-function/?envType=study-plan-v2&envId=30-days-of-javascript).

Answer:

This is an easy challenge. To return "Hello World", we could do the following:

```javascript
var createHelloWorld = function() {
  return function(...args) {
    return "Hello World"
  }
}
```

The time complexity is O(1) because it's always returning "Hello World". No matter if we increase the input size.

The space complexity is also O(1) because nothing more will be stored in memory if we increase the input size.

That's it. Simple, right? Let's go to Day 2.
Football news!
Tags: webdev, javascript, beginners, programming
Published: 2024-05-27 15:40:58

Welcome to the fan site dedicated to Mohammed Al-Owais, the famous goalkeeper who became the cornerstone of both Al-Hilal and the Saudi Arabian national team. This site is your definitive source for all things Al Owais, featuring the latest news, in-depth analysis and comprehensive coverage of the most notable events of his career.

Mohammed Al Owais

Check out our in-depth match recaps highlighting Al Owais' key rebounds and contributions in key matches. Immerse yourself in a selection of videos that showcase his best moments as a member, from acrobatic stunts to the dazzling performances that have earned him awards on both the domestic and international stages.

Keep up to date with the latest news on Al Owais's career, including match results, injury updates and transfer news. Our selected articles provide deeper insight into his technique, training routines and the journey that has made him one of the best goalkeepers in Asian football.

Connect with the fan community on our forums, where you can discuss match strategies, share content and interact with other fans. Whether you're analyzing his recent performance or celebrating his accomplishments, this is the perfect place for fans to gather and share their passion. [Mohammed Al Owais](https://mohammed-alowais-ar.com/)
Creating Your First Telegram Bot: Step-by-Step Guide with BotFather | Part 1
Tags: pythonproject, telegrambot, telebot, pythondevelopment
Published: 2024-05-27 15:39:16

In this tutorial, we'll walk you through the initial steps of setting up your own Telegram bot using BotFather. You'll learn how to create a new bot, interact with BotFather, and obtain your bot's API token, which is essential for further development. Whether you're a complete beginner or looking to refresh your knowledge, this video will provide you with a solid foundation to build on.
Stay tuned for the upcoming videos in this series, where we'll dive deeper into coding and customizing your bot, integrating various functionalities, and making your bot more interactive and useful.

{% embed https://www.youtube.com/watch?v=RIrIXLAj8bE %}
Unlock the power of neural networks 🚀
Tags: webdev, javascript, python, ai
Published: 2024-05-27 15:30:59


Dive into the fundamentals, understand how they work, explore future trends, and discover top resources to enhance your skills. Perfect for AI and machine learning enthusiasts eager to stay ahead in the tech world.

Read more on: https://lnkd.in/gfaNjbry 

Don't forget to follow us for more insights and updates! 🔍📈
When you try to serve all needs...
Tags: webdev, softwaredevelopment, wordpress
Published: 2024-05-27 15:15:38

This meal perfectly describes the "All in one App" - it ends up like Wordpress.

> Lopadotemachoselachogaleokranioleipsanodrimypotrichomatosilphiokarabomelitokatakechymenokichlepikossyphophattoperisteralektryonoptocephaliokigclopeleiolagōiosiraiobaphētraganopteryx

The word comes from the Greek satirist Aristophanes' who wrote the play Ecclesiazusae that depicts the reforms of Praxagora. Praxagora take over the Athenian assembly and implement a series of radical changes aimed at creating a utopian society. The reforms include communal ownership and equal distribution of resources. As they attempt to satisfy everyone's needs and wants, the resultant policies become increasingly absurd and impractical, which is humorously illustrated by the creation of this comically complex dish.

![Aristophanes - Longword image](https://res.cloudinary.com/daily-now/image/upload/s--9aSlp0Wb--/f_auto/v1716822147/ugc/content_f07fb166-0a04-4cec-a067-0f18a02f67c7)
Nuxt Layer issue `Importing directly from module entry-points is not allowed`
Tags: nuxt, vue, javascript, webdev
Published: 2024-05-27 15:13:17




Yesterday that I was working on my open source Sass template starter with Nuxt Layers,
I encounter a problem, when I was trying to use one of my layers in another layer, let me explain a little bit my project set up so you can have a better overview of the problem:





My folder structure is the following:

```tree

-- nux-sass-layer
	-- packages
		-- ui
		-- content
		-- auth
		-- email
		-- dashboard
		--site
```




When I implemented my `UI` layer, there was no error at all, and everything compiled like always.

I was importing some `types` from `radix-vue` and everything seems fine, until!!


> I try to import a component from the `ui` Layer for the time was fine, because that first component wasn’t using any `external types`

So the problem start when I imported my `HeaderNavigation` but that component depends on other components that use external types, like `TheMenuItem` component.

I start getting `500` errors and the following message in the terminal:

`Importing directly from module entry-points is not allowed` 
And `Pre-transform error: [@vue/compiler-sfc] Failed to resolve import source "radix-vue"`.


The component that was doing the import of the type 
```vue
<script setup lang="ts"> 
import { NavigationMenuRoot } from "radix-vue"; 
import NavigationMenuViewport from "./NavigationMenuViewport.vue";
import { cn } from "@UI/lib/utils"; 
import type { NavigationMenuRootProps, NavigationMenuRootEmits } from "radix-vue"; //<- This was the line that was breaking everithing

const props = defineProps<NavigationMenuRootProps & { class?: string }>();
const emits = defineEmits<NavigationMenuRootEmits>(); 

</script>

```


I spend more than a couple of hours trying to find a solution and looking if anyone has encountered the same issue.


But not luck, I got some feedback from the Discord community of `Nuxt`.



But after a walk with the dog and some coffee, I look deeper at the error details and where the error was coming from, then did a deep dive in the `.nuxt` folder and look at the output and notice that the `tsconfig.json` that was created was target to `moduleResolution:module` and not to "Node”, update my `tsconfig.josn` to make the `moduleResolution` to `Node`.


```json
{ 
"extends": "./.nuxt/tsconfig.json",
"compilerOptions": { 
	"paths": { "@UI/*": ["./*"] }, 
	"moduleResolution": "Node"
	}

}
```


This solves the problem 🤗





Here is the link to the project if you want to take a look at it or need an example on how to or not to use Nuxt layers for your project.

[nuxt-monorepo-layers](https://github.com/leamsigc/nuxt-monorepo-layers)




> Please if anyone have a better way please comment below and let's learn together


{% gist https://gist.github.com/leamsigc/68d3f891d9298c35de273caa2b21e453 %} 


> Working on the audio version


[The Loop VueJs Podcast](https://podcasters.spotify.com/pod/show/the-loop-vuejs)
Git Error
Tags: git, errors
Published: 2024-05-27 15:09:16

warning: in the working copy of 'JS/bootstrap.bundle.min.js', LF will be replaced by CRLF the next time Git touches it

how can I
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5ihnglfc9exhhnwmmmu8.png) fix this error in git?
Essential data sanitization techniques for robust security at every development stage 🔐
Tags: webdev, tutorial, devops, programming
Published: 2024-05-27 15:07:46

Being GDPR-compliant across all your projects is a daily challenge—especially if you’re managing sensitive user data on your projects. Upsun adopts a [GDPR everywhere approach](https://upsun.com/blog/gdpr-compliance-everywhere/) with high levels of built-in security and compliance as standard—but there are ways to secure your data on our PaaS further when it comes to preview environments. 

Each time you create a new Git branch on a project on Upsun, the corresponding environment inherits the data (assets and database) from its parent. This means that potentially sensitive data from your production website could be exposed to the preview environment. 

So, how do you navigate this and ensure your application remains compliant? ✨ **Two words: data sanitization.** ✨ The deliberate and permanent erasure of sensitive data from a storage device making the data non-recoverable. 

Dive into the key methods of data sanitization whcih you can implement for to ensure your data remains safe at every stage of development 👉 **[learn more now](https://upsun.com/blog/how-to-sanitize-preview-environment-data/?utm_source=devto&utm_medium=organic_social&utm_campaign=upsun_blog&utm_id=upsun).**
Introduction to GitHub 🧑‍💻 : Part 1
Tags: webdev, github, git, learning
Published: 2024-05-27 15:06:58

**GitHub** is an online software development and code hosting platform, _a web-based version control and collaboration platform for software developers. It’s used for storing, tracking, and collaborating on software projects._

GitHub follows a **Software as a Service (SaaS)** business model and was launched in 2008. It was built on Git, _an open-source code management_ system created by **_Linus Torvalds_** to facilitate faster software development. In 2018, _**Microsoft**_, the biggest single contributor to GitHub, _acquired the platform for $7.5 billion_.

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

## Why Was GitHub Created?
Here’s why: Assume you are participating in a hackathon or a group project where your teammates are from different countries. In that case, you need a way to collaborate on the project you’re working on, such as tracking changes in code, the features you’re building, and more.

The main problem is how you and your collaborators/contributors will work on the project.

So what’s the solution?

GitHub! It’s a platform with functionalities that every developer needs to maintain their code and collaborate. It maintains everything as a _**central database**_, also known as a _‘Single Source of Truth’_.

## What Is Version Control?
**Version control** helps developers _track and manage changes to software code in a collaborative environment_. Two major concepts are branching and merging, which you’ll learn about in a further series on GitHub.

## What Is Git?
**Git** is _an open-source version control software used for managing and tracking file revisions_. Git is used to manage projects on your local system. Git is the most widely used version control system in software development, and GitHub provides services that complement this technology, hence the name “GitHub”.

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

Now you’ve grasped the basic overview of GitHub. You’ll learn more about working practically and setting up Git and GitHub in my upcoming blogs.

Feel free to connect with me on other social media platforms 😊🤝 to stay updated on my latest adventures in web development and open for collaboration. Until next time, happy learning! 👨‍💻🚀

[GitHub](https://github.com/Thoufiq-Uchiha-23)

[Hashnode](https://hashnode.com/@Thoufiq-Izhar-1729)

[Medium](https://medium.com/@thoufiqizhar022)

[Twitter(X)](https://twitter.com/IzharThouf29718)
🚀 Auto-Switch iTerm2 Modes, Day & Night! 🌞🌚
Tags: iterm2, macos, tipsandtricks, terminal
Published: 2024-05-29 04:47:47

---
title: 🚀 Auto-Switch iTerm2 Modes, Day & Night! 🌞🌚
published: true
date: 2024-05-27 15:00:00 UTC
tags: iterm2,macos,tipsandtricks,terminal
canonical_url: https://carloschac.in/2024/05/27/iterm2-dark-light-mode/
---

![header](https://carloschac.in/public/images/iterm2-theme-switch/header.png)

[iTerm2](https://iterm2.com/) recently introduced a great feature: separate light and dark mode colors. This feature enhances the visual appeal of your terminal and keeps it in sync with your Mac’s mode.

This feature is not just about aesthetics; it’s about comfort. Imagine your terminal always matching your Mac’s light or dark mode, creating a seamless and visually pleasing experience. This enhances the visual appeal and reduces eye strain, making your terminal usage more comfortable.

{% embed https://youtu.be/Lrvdve8JNm0?si=XArIv9VEmhOWbn-8?sub_confirmation=1" %}

## The Problem

In the image below, you can notice that the iTerm2 does not change by default when we switch between light and dark modes.

<!-- more -->

![header](https://carloschac.in/public/images/iterm2-theme-switch/before.gif)

## Ok, let’s discover this game-changer feature!

## Step 1

Go to iTerm2 settings and click the `Profiles` tab.

![header](https://carloschac.in/public/images/iterm2-theme-switch/1.png)

## Step 2

Click the `Colors` tab under `Profiles.`

![header](https://carloschac.in/public/images/iterm2-theme-switch/2.png)

## Step 3

Enable the checkbox to `Use different colors for light and dark mode.`

![header](https://carloschac.in/public/images/iterm2-theme-switch/3.png)

## Step 4

Select the desired dual theme. In this case, I’m selecting `Solarized,` which has light and dark versions.

![header](https://carloschac.in/public/images/iterm2-theme-switch/4.png)

## Step 5

Click on `Update Both Modes`

![header](https://carloschac.in/public/images/iterm2-theme-switch/5.png)

## The Result

![header](https://carloschac.in/public/images/iterm2-theme-switch/after.gif)
My suitable posts
Tags: webdev, programming, python, web3
Published: 2024-05-27 14:59:22

[HTTP Caching](https://developer.mozilla.org/en-US/docs/Web/HTTP/Caching#overview)
[HTTP CORS](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS)

[Server-side](https://developer.mozilla.org/en-US/docs/Learn/Server-side)
Получите эксклюзивные бонусы на игры в онлайн-казино!
Published: 2024-05-27 14:50:06




Привет, разработчики!

Если вы, как и я, увлечены азартными играми, то я рад поделиться с вами отличной новостью. На веб-сайте [https://bibicasino.com/bonuses/] вы можете получить доступ к эксклюзивным бонусам на игры в онлайн-казино!

Независимо от того, любите ли вы слоты, покер, рулетку или блэкджек, у нас есть бонусы, которые приятно удивят вас. Мы постоянно обновляем наши предложения, чтобы гарантировать вам самые выгодные условия игры.

Не упустите шанс повысить свой шанс на выигрыш и получить дополнительные вознаграждения. Посетите ссылку прямо сейчас и начните погружение в захватывающий мир азарта!

Давайте сделаем ваше онлайн-казино опытным и выгодным!
How to add YouTube Analytics Api to get the channel statistics with React and nextJs?
Tags: webdev, tutorial, nextjs, react
Published: 2024-05-27 14:46:36

YouTube has become a cornerstone for creators and businesses alike, providing a platform to share videos and engage with audiences worldwide. However, managing and analyzing your YouTube channel's performance requires powerful tools. Enter the YouTube Analytics API—that allows developers to access detailed insights and metrics.

[In this blog](https://www.codegirl0101.dev/2024/05/how-to-add-youtube-analytics-api-to.html), I'll demonstrate how to integrate the YouTube Analytics API into a web application built with React and Next.js. We'll set up the API, authenticate your requests, and fetch valuable data such as channel statistics and video details in very easy way.

Read the full blog here: https://www.codegirl0101.dev/2024/05/how-to-add-youtube-analytics-api-to.html
Mastering ASP.NET Core Middleware
Tags: dotnet, csharp
Published: 2024-05-27 14:40:02

---
title: Mastering ASP.NET Core Middleware
published: true
description: Hi there! I’m Michael and in this video we’re going to talk about ASP.NET Core middleware. What is it? How does it work? How can I create custom middleware? And how to inject services into it.
tags: dotnet, csharp
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a8rwpw81ffrgkydf5npy.png
---

{%youtube cu4CUJAcJ-4 %}
Install Apache Web Server in Ubuntu AWS EC2 Instance
Tags: cloud, aws, cloudcomputing, iaas
Published: 2024-05-27 14:35:59

![Apache Web Server](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5jpb475thffqpep6dsy5.png)

### Introduction
Installing a web server is a foundational step in web development and server management. [Apache](https://httpd.apache.org/) is one of the most popular web servers due to its reliability and extensive features. In this guide, we'll walk you through the steps to install and configure the Apache Web Server on an Ubuntu AWS EC2 instance.

### Prerequisites
Before we begin, ensure you have the following:
1. An [AWS](https://aws.amazon.com/) account
2. An EC2 instance running Ubuntu

### Step 1: Launch and Connect to EC2 Instance
For detailed instructions on launching and connecting to an AWS EC2 instance, you can refer to this article: [Launch and Connect to AWS EC2 Instance](https://dev.to/suravshrestha/launch-and-connect-to-aws-ec2-instance-47bm).

### Step 2: Update Your Instance
Once connected to your EC2 instance, update the package lists:
```bash
sudo apt update
```

### Step 3: Install Apache Web Server
Now, install Apache using the package manager:
```bash
sudo apt install apache2 -y
```

### Step 4: Verify Apache Installation
You can verify that Apache is running by accessing your instance’s public IP address in a web browser:
```http
http://ec2-18-208-219-229.compute-1.amazonaws.com
```
![Apache2 Default Page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ye1k1aapgxrryfmhxayx.png)

You should see the default Apache2 Ubuntu Default Page, indicating that Apache is successfully installed and running. 🎉

**Note**: The webpage is served from the `/var/www/html/index.html` file in the EC2 instance. You can edit this file to customize the content as desired.

### Conclusion
You’ve successfully installed and configured the Apache Web Server on your Ubuntu AWS EC2 instance. This setup can now serve as the foundation for your web applications. 🌐

### Additional Resources
- [Apache HTTP Server Documentation](https://httpd.apache.org/docs/) 📚
- [AWS EC2 Documentation](https://docs.aws.amazon.com/ec2/) 📖

If you have any questions or run into issues, feel free to leave a comment below.

Happy coding! 👩‍💻👨‍💻
Steps To Create A Simple Web Driver Script
Published: 2024-05-27 14:30:47

Below are the steps to create a simple Selenium WebDriver script in Java to automate a basic scenario of opening a web page and performing an action. Let's create a script to open the Google homepage, search for a term, and print the page title.

### Step 1: Set Up Your Development Environment
Make sure you have the following set up:
- Java Development Kit (JDK) installed
- Integrated Development Environment (IDE) like IntelliJ IDEA or Eclipse installed
- Selenium WebDriver Java bindings added to your project's dependencies

### Step 2: Create a New Java Class
Create a new Java class in your project with a meaningful name (e.g., `SimpleWebDriverScript`).

### Step 3: Write the Selenium WebDriver Script
Write the Selenium WebDriver script to automate the desired scenario. Here's the code to open Google, search for a term, and print the page title:

```java
import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;

public class SimpleWebDriverScript {
    public static void main(String[] args) {
        // Set the path to the chromedriver executable
        System.setProperty("webdriver.chrome.driver", "/path/to/chromedriver");

        // Initialize the Chrome driver
        WebDriver driver = new ChromeDriver();

        // Open Google homepage
        driver.get("https://www.google.com");

        // Find the search box element
        WebElement searchBox = driver.findElement(By.name("q"));

        // Enter the search term
        searchBox.sendKeys("Selenium WebDriver");

        // Submit the search query
        searchBox.submit();

        // Print the page title
        System.out.println("Page title is: " + driver.getTitle());

        // Close the browser
        driver.quit();
    }
}
```

### Step 4: Run the Script
Run the script in your IDE. It will open Google, perform the search, print the page title, and then close the browser.

### Note:
- Make sure to replace `"/path/to/chromedriver"` with the actual path to your ChromeDriver executable.
- You may need to include the Selenium WebDriver Java bindings (`selenium-java.jar`) in your project's dependencies.
- Ensure that the version of ChromeDriver you use is compatible with the version of Google Chrome installed on your machine.

That's it! You've created a simple Selenium WebDriver script to automate a basic web scenario. You can extend this script to automate more complex interactions and scenarios as needed.