teleren/devto huggingface dataset:
Day 17 of 30 of JavaScript
Published: 2024-06-13 17:30:46

Hey reader👋 Hope you are doing well😊
In the last post we have talked about Inheritance in JavaScript. In this post we are going to know about some pre-defined objects in JavaScript.
So let's get started🔥

## Date Object

JavaScript Date objects let us work with dates. By default JavaScript will use the browser's time zone and display a date as a full text string.
Eg -: Thu Jun 13 2024 22:25:30 GMT+0530 (India Standard Time)

Create a Date object -:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7ggx140dcwsll6ya5ghz.png)
There are 9 different ways to create Date object-:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xrssrutirwk8r8j6vdh6.png)

Date `get()` method-:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ioc5d8ezo7nkz2g476w0.png)

Date `set()` method-:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oftsrrycjyqltpw09ujv.png)

## JavaScript Set Object

A JavaScript set object is collection of unique values. Each value can only occur once in a Set. The values can be of any type, primitive values or objects.

Creating and inserting values in set -:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gt1quchfaagnk6fc4ijz.png)

Iterating on a Set-:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cu56cvr3zrf96ng92u84.png)
The `values()` method returns an Iterator object with the values in a Set.

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

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

## JavaScript Map Object

A Map is a JavaScript object that holds key value pairs. The keys are stored in the original order of their insertion. The key can be of any data type.
Creating map and inserting values-:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xr1ctwlb5f7k60todoxi.png)

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

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

We will see more about these in later blogs. These are some of the objects , there are more objects in JavaScript.
I hope you have understood this blog. Don't forget to like the blog and follow me.
Thankyou🩵
Big Text Animation on Scroll
Tags: webdev, gsap, javascript, programming
Published: 2024-06-13 17:05:21

Today, I embarked on an exciting journey with GSAP (GreenSock Animation Platform) and its powerful ScrollTrigger plugin. Here's a quick rundown of what I learned and how I brought my ideas to life.

## Basics of GSAP

GSAP is a robust JavaScript library for creating high-performance animations. I started by animating simple elements, which was surprisingly easy and effective.

## Discovering ScrollTrigger

ScrollTrigger, a GSAP plugin, allows you to animate elements based on scroll position. Here are some key properties:

- trigger: Select the element to animate.
- scroller: Usually set to "body".
- start: Define when the animation starts.
- end: Define when the animation ends.
- markers: Visualize start and end points (useful for debugging).
- scrub: Smoothly control animation with scroll (can be a Boolean or a number between 1-5).
- pin: Pin the element during the animation.

## My Big Text Animation

I created an engaging big text animation that moves as you scroll down the page. Here’s the code and a brief explanation:

```
gsap.to(".page2 h1", {
    transform: "translateX(-250%)",
    scrollTrigger: {
        trigger: ".page2",
        scroller: "body",
        start: "top 0%",
        end: "top -100%",
        scrub: 2,
        pin: true
    }
});
```

```
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Big Scroll Text Animation</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="page1">
        <h1>Welcome to Big Scroll Text Animation</h1>
    </div>
    <div class="page2">
        <h1>BIG SCROLL ANIMATION</h1>
    </div>
    <div class="page3"></div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js"></script>
    <script src="script.js"></script>
</body>
</html>
```

```
* {
    margin: 0;
    padding: 0;
    font-family: sans-serif;
}
html, body {
    height: 100vh;
    width: 100vw;
}
body {
    overflow-x: hidden;
}
.page1, .page3 {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    width: 100vw;
}
.page1 { background-color: black; }
.page1 h1 { color: white; }
.page2 {
    background-color: cornsilk;
    height: 100%;
    align-items: center;
}
.page2 h1 {
    color: black;
    font-size: 70vh;
    font-weight: 400;
}
.page3 { background-color: black; }

```
You can see this animation in action here on CodePen.

{% embed https://codepen.io/Sarthakmittal/pen/ExzboRQ %}

Today was a fantastic learning experience, and I'm excited to continue exploring the capabilities of GSAP and ScrollTrigger. Stay tuned for more animations!
Estudos em Quality Assurance (QA) - HTTP e API
Tags: api, http, qa, testing
Published: 2024-06-13 17:00:23

**HTTP Requests:** são como pedidos que um navegador faz a um servidor para acessar páginas da web ou dados específicos. É basicamente como você "pede" algo da internet.

**HTTP Status Codes:** são basicamente códigos que um servidor envia para dizer se sua solicitação deu certo, deu algum erro ou se algo deu errado no servidor. Alguns dos status codes mais encontrados em QA:

**2xx - Bem-sucedidos:** 

- **200 - OK:** A solicitação foi bem-sucedida. 
- **201 - Created:** A solicitação foi bem-sucedida e resultou na criação de um novo recurso.

**4xx - Erros do Cliente:**

- **400 - Bad Request:** A solicitação do cliente não pôde ser entendida pelo servidor devido à sintaxe incorreta. 
- **401 - Unauthorized:** O cliente deve se autenticar para obter a resposta solicitada. 
- **403 - Forbidden:** O cliente não tem permissão para acessar o recurso solicitado. 
- **404 - Not Found:** O servidor não pôde encontrar o recurso solicitado.

**5xx - Erros do Servidor:**

- **500 - Internal Server Error:** Um erro interno do servidor impediu a solicitação. 
- **502 - Bad Gateway:** O servidor recebeu uma resposta inválida. 
- **503 - Service Unavailable:** O servidor não está pronto para manipular a solicitação devido a sobrecarga temporária ou manutenção do servidor.

**API (Interface de Programação de Aplicativos** ou **Application Programming Interface):** é como um conjunto de regras que permite que diferentes aplicativos se comuniquem e compartilhem informações entre si. É como uma linguagem comum que diferentes programas podem entender para trocar dados e funcionalidades.

**Métodos:** 

- **GET:** Recupera dados. 
- **POST:** Cria um novo recurso. 
- **PUT:** Atualiza ou substitui um recurso existente. 
- **DELETE:** Remove um recurso. 
- **PATCH:** Atualiza parcialmente um recurso.
What makes this ultimate gaming platform for mobile gamers?
Tags: gamedev, mobilegames, gamingplatform, games
Published: 2024-06-13 16:57:14

This [Gaming Platform](https://medium.com/@adreeshelk/nostra-games-how-to-play-many-games-on-your-lock-screen-without-downloading-anything-c66b56cfb175?utm_source=referral&utm_medium=Medium&utm_campaign=Nostra) has emerged as the go-to gaming platform for mobile enthusiasts, offering an unparalleled experience that combines convenience, quality, and innovation. As a top-tier [gaming platform](https://nostra.gg/articles/Lock-Screen-Games-Are-a-Game-Changer-for-Gaming-Developers.html?utm_source=referral&utm_medium=article&utm_campaign=Nostra), This Gaming Platform stands out by seamlessly integrating games into the lock screen of Android devices, eliminating the need for downloads and making gaming more accessible than ever. With a vast library of high-quality titles spanning various genres, from classic puzzles to action-packed adventures, this gaming platform caters to diverse gaming preferences. This Gaming Platform's commitment to delivering visually stunning graphics, engaging gameplay, and smooth performance sets it apart as a premier gaming platform. Moreover, This [Gaming Platform ](https://medium.com/@adreeshelk/playground-of-nostra-gaming-adventure-9e9828101d85?utm_source=referral&utm_medium=Medium&utm_campaign=Nostra)fosters a vibrant gaming community, allowing players to connect, compete, and showcase their achievements through leaderboards and social features. By combining convenience, quality, and social engagement, This Gaming Platform has redefined the mobile gaming landscape, solidifying its position as the ultimate gaming platform for enthusiasts seeking the best in mobile entertainment.
Deam Machine AI: high-quality videos from text & image
Tags: ai, sora, aivideo
Published: 2024-06-13 16:54:27


![Dream Machine AI](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a3aulpbf09srh483lty8.png)

[Dream Machine AI](https://www.dreammachine-ai.com/) can create high-quality videos from simple text prompts, enabling companies and creators to produce original video content within minutes.

Dream Machine is accessible to everyone starting today. Users need to provide detailed prompts to generate videos, such as “a cute Dalmatian puppy running after a ball on the beach at sunset,” resulting in a realistic five-second clip produced within two minutes.


![Dream Machine AI](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p65ewzaurwfsnpf9brgf.png)


The text-to-video generation field is highly competitive, with rivals like OpenAI's Sora and Lightricks' LTX Studio offering similar capabilities. However, [Dream Machine AI](https://www.dreammachine-ai.com/)  stands out with its open-source approach, allowing broader access and fostering a community of developers and creators.


![Dream Machine AI](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kiyyiktil4buuww2jqw2.png)


Early beta testers praise Dream Machine for its ability to accurately render specific objects, characters, and environments, maintaining coherent storytelling and fluid motion. Despite challenges in recreating natural movements and handling text, Deam Machine AI's demos showcase impressive realism.

[Dream Machine AI](https://www.dreammachine-ai.com/)  aims to integrate with creative tools like Adobe through future APIs and plugins. While facing legal and ethical challenges, the rapid progress of generative AI highlights its potential to revolutionize content creation.
Powershell to fix incorrect encoding of MP3 ID3 tags
Tags: powershell, pwsh, script, idv3tags
Published: 2024-06-13 16:52:56

This PowerShell script corrects the encoding of ID3 tags in MP3 files. It is specifically designed for the case of a problem where tags encoded in WINDOWS-1251 have been saved to files as WINDOWS-1252 text, and so programs incorrectly output grainy characters (like this one"îñòðîâ") because they read the text as a Western European encoding. So the task is to save tags in modern UTF-8 encoding. TagLibSharp.dll does all the work of reading tags from the file, so to make the script work you need to place this library in the script execution directory. 

## Prerequisites
Before running this script, make sure you have the following:
- PowerShell 5.1 or higher.
- TagLibSharp.dll: This is required to work with MP3 tags. You can obtain `TagLibSharp.dll by either:
 - By downloading it from [NuGet](https://nuget.info/packages/TagLibSharp/2.3.0).
 - Or by compiling the source code available on [GitHub](https://github.com/mono/taglib-sharp).

## How to use
1. **Get TagLibSharp.dll:** To download or compile TagLibSharp.dll, see above.
2. **Locate TagLibSharp.dll in the same directory as the script:** The script expects TagLibSharp.dll to be in the same directory from which the script is run.
3. **Prepare MP3 files:** Make sure that all MP3 files you want to fix are placed in the same directory. The script will process all .mp3 files in the directory from which it is run.
4. **Run the script:**.
 - Open PowerShell and navigate to the directory containing the script and TagLibSharp.dll.
 - Run the script by typing .\convertIDv3tags.ps1 and pressing Enter.
The script will process each MP3 file in the catalog, correcting the ID3 tag encoding as described.

## Notes
- **Backup your files:**Before running the script, it is recommended that you back up your MP3 files to prevent unintentional data loss.
- **Script Restrictions:** The script is specifically restricted to working with MP3 files. Changing the -Filter *.mp3 parameter to work with other file formats may not produce the desired results, although in general TagLibSharp.dll supports even video.

**NotaBene: [if u wish experiment more with TagLibSharp dive in with](https://alexandrubucur.com/tech/2021/how-to-read-metadata-easily-in-powershell-with-taglibsharp/**) 



{% embed https://gist.github.com/uyriq/338013336653b2b7c676a477046fc75e %}
Creative HTML Hero Section -- Digital Agency
Tags: codepen, webdev, javascript, programming
Published: 2024-06-13 16:45:53

Explore a stunning and dynamic HTML hero section designed for a digital agency. This pen showcases a creative, modern, and responsive layout perfect for web developers or agencies looking to make a bold statement.

Features:

Hero Section: Eye-catching design with a professional yet creative aesthetic.
Responsive Design: Adapts seamlessly to various screen sizes, from desktops to mobile devices.
Font Awesome Integration: Utilizes the latest Font Awesome icons for added visual appeal.
Custom Animations: Smooth and engaging animations enhance user experience.
Contact CTA: Prominent "Contact Me" button leading to a Fiverr profile.
Rating Display: Highlights an A+ rating by Trusted Pilot, adding credibility.
Technologies Used:

HTML5
CSS3
Font Awesome
Feel free to explore and customize this hero section to fit your own digital agency or web development portfolio.

{% codepen https://codepen.io/CreativeSalahu/pen/qBGVxOg %}
Renowned Surgeon Professor Ali Al-Hussaini Honored With Honorary Professorship In Medical Science
Tags: education, aubss, qahe, news
Published: 2024-06-13 16:35:52


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

The International Association for Quality Assurance in Pre-Tertiary & Higher Education (QAHE) and the American University of Business and Social Sciences (AUBSS) are pleased to announce that Professor Ali Al-Hussaini has been awarded the prestigious title of Honorary Professorship in Medical Science. This esteemed recognition honors Professor Al-Hussaini’s exceptional contributions and unwavering dedication to the field of medicine.

With over 15 years of experience, Professor Al-Hussaini has consistently demonstrated his expertise and commitment to advancing the field of Otolaryngology. As the Health and Care Research Wales Joint Specialty Lead for Otolaryngology, he has made significant contributions to clinical trials and surgical research, earning him numerous accolades.

Among his notable achievements, Professor Al-Hussaini was awarded the Surgeon in Training Medal by the Royal College of Surgeons of Edinburgh and the prestigious International ENT Masterclass Gold Medal. His pioneering research, including his work on immune responses to head and neck cancer, has garnered international recognition and advanced medical knowledge.

In addition to his research, Professor Al-Hussaini has published an impressive forty peer-reviewed articles and papers in leading medical journals, solidifying his position as a thought leader in the field. He has also been invited to deliver keynote lectures at international conferences and has presented his findings at numerous national and international forums.

As a highly experienced Consultant ENT and Facial Plastic Surgeon, Professor Al-Hussaini has performed over 12,000 surgical procedures, showcasing his exceptional surgical skills and commitment to patient care. His expertise extends to both adult and pediatric Ear, Nose and Throat surgery, cosmetic facial surgery, and non-surgical facial, body, and skin aesthetics. He has a particular interest in Paediatric ENT, Facial Plastic Surgery, Snoring and Sleep Apnoea, Voice Disorders, and Transnasal Oesophagoscopy.

Professor Al-Hussaini’s passion for providing evidence-based care and his belief in the transformative power of research have consistently driven him to deliver world-class healthcare outcomes. His dedication to advancing medical science and his unwavering commitment to patient well-being exemplify the qualities that the Honorary Professorship in Medical Science was designed to honor.

The International Association for Quality Assurance in Pre-Tertiary & Higher Education (QAHE) and the American University of Business and Social Sciences (AUBSS) extend their warmest congratulations to Professor Ali Al-Hussaini for this well-deserved recognition. His contributions to the field of medicine will continue to inspire and benefit countless individuals worldwide.
Code Refactoring
Tags: devchallenge, cschallenge, computerscience, beginners
Published: 2024-06-13 16:32:40

_This is a submission for DEV Computer Science Challenge v24.06.12: One Byte Explainer._

## Explainer
Code Refactoring is like Oxford Comma. Ex:- Let's eat grandma vs Let's eat, grandma. In coding, first example is doing it's intended job. But, if you revisit after few months, you would be confused. By adding a comma after eat, makes code more meaningful.

## Additional Context
So, refactoring your code is to improve code by making small changes without altering the codes external behaviour.
New session after a while
Tags: linux
Published: 2024-06-13 16:02:59

Its been while, while i was away. Today I had another session on other linux commands like who,last log for getting the login details. Other commands included details,mv,cp,rm,history,hostname,whoami,uptime. Through these commands I was able to move file, copy files, See the history of commands that I typed. See you tomorrow again.
Currying function🤓
Tags: javascript, currying, function
Published: 2024-06-13 15:57:04

## **Funny Samples:**

// 1. Phrase

```
function gap(a) {
    return function(b) {
        return function(c) {
            return `${a[0].toUpperCase()}${a.slice(1)} ${b} ${c}`;
        }
    }
}
res = add('Hello')(['World'])('?');

console.log(res);  // Hello World ?
```

// 2. Compliment generator
```
function makeCompliment(name) {
    return function (adjective) {
        return function (activity) {
            return `${name}, you are so ${adjective} at ${activity} !`
        }
    }
}
let result = makeCompliment('Khojiakbar')('bad')('coding')

console.log(result);  // Khojiakbar, you are so bad at coding !
```

// 3. Silly Story Maker

```
function makeStory(name) {
    return function (noun){
        return function (adverb) {
            return `${name}, was looking at ${noun}, ${adverb}. But the ${noun} wasn't made ${adverb}.`
        }
    }
}
result = makeStory('John')('bread')('happily')

console.log(result);  // John, was looking at bread, happily. But the bread wasn't made happily.
```
// 4. Make food
```
function makeFood(ingredient_one) {
    return function(ingredient_two) {
        return function(cooking_style){
            return `Take ${ingredient_one} and ${ingredient_two} and mix them together with your hands and ${cooking_style} them.`
        }
    }
}
result = makeFood('cheese')('milk')('bake')

console.log(result);  // Take cheese and milk and mix them together with your hands and bake them.
```
Day 17 of my progress as a vue dev
Tags: webdev, vue, typescript, tailwindcss
Published: 2024-06-13 15:49:41

**About today**
Today was again one of those tricky days when I struggle to fully follow my daily routine properly and then start to question very decision I'm making and feeling a bit down. But, somehow I survived it and turned it around halfway through and I feel good about it. I ended up drawing an outline for the structure of my audio editor project I'm going to be working on next. I listed down the potential npm libraries I will be using(Of course I took help from chat gpt) and what approach I will to get started on it.

**What's next?**
I will be getting started on the implementation from tomorrow as now I have a much clearer picture about where I wanna take this project and what I expect from it, so the fun begins tomorrow.

**Improvements required**
I still need to study in depth about the libraries I will be using in my project to get a better understanding of how things are moving and what changes I might require in order to get my desired outcome. 

Wish me luck!
Lazy-load Image - JavaScript & CSS
Published: 2024-06-13 15:48:07

Dalam pembuatan web application, salah satu elemen yang paling banyak menyedot resource adalah image (gambar). Maka dari itu ada berbagai macam cara menyimpan gambar dalam sebuah web application. Kali ini kita akan belajar salah satu cara memanipulasi gambar yaitu lazy-load, lazy-load kita masih akan memakai intersection observer. Triknya adalah kita siapkan 2 buah gambar yang satu dengan resolusi penuh, satunya lagi dengan resolusi rendah. Gambar dengan resolusi rendah akan kita pakai sebagai default, ketika target memasuki intersection maka kita ganti dengan gambar resolusi penuh

```html
<!-- index.html -->

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Lazy-load Image</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <header>Lazy-load Image</header>
    <div class="section">
      <img src="image/img1s.png" alt="" data-img="image/img1.png" width="500px" class="lazy-img" />
    </div>
    <div class="section">
      <img src="image/img3s.png" alt="" data-img="image/img3.png" width="500px" class="lazy-img" />
    </div>
    <div class="section">
      <img src="image/img2s.png" alt="" data-img="image/img2.png" width="500px" class="lazy-img" />
    </div>
    <script src="app.js"></script>
  </body>
</html>

```

```css
/* style.css */

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.lazy-img {
  filter: blur(20px);
}

img {
  transition: all 0.3s ease-out;
}

header {
  font-size: 200px;
}

header,
.section {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.section:nth-child(odd) {
  background-color: cadetblue;
}

.section:nth-child(even) {
  background-color: blanchedalmond;
}

```

```javascript
// app.js

const imgTargets = document.querySelectorAll('img[data-img]');

const loadImg = function (entries, observer) {
  const [entry] = entries;
  if (!entry.isIntersecting) return;

  // ganti gambar dengan resolusi penuh
  entry.target.src = entry.target.dataset.img;

  // ketika target load, hilangkan class 'lazy-image'. jika tidak memakai fungsi ini, maka efek smooth-nya tidak akan tampak
  entry.target.addEventListener('load', function () {
    entry.target.classList.remove('lazy-img');
  });

  observer.unobserve(entry.target);
};

const imgObserver = new IntersectionObserver(loadImg, {
  root: null,
  threshold: 0,
  rootMargin: '-200px',
});

imgTargets.forEach((img) => imgObserver.observe(img));

```
Kuncinya ada pada potongan kode berikut
`<img src="image/img1s.png" alt="" data-img="image/img1.png" width="500px" class="lazy-img" />`
Image source `src="image/img1s.png"` berisi gambar dengan resolusi rendah sedangkan calon penggantinya ada pada kode `data-img="image/img1.png"`, lalu kita manipulasi dengan javascript lewat kode `entry.target.src = entry.target.dataset.img`. Hasilnya sebagai berikut

![file](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d8o2b6ucqc1p9zakqzoi.gif)