teleren/devto huggingface dataset:
Zod - TypeScript-first schema declaration and validation library #3
Tags: programming, javascript, typescript, zod
Published: 2023-12-07 11:00:00

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

✨**Verify Unknown APIs with an Object Schema**✨

Zod is commonly used for verifying unknown APIs.

In the below example, we are fetching a person from the Star Wars API:

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

> Note the call to PersonResult.parse() that takes in the data from the fetch request.

The PersonResult variable is created with [z.unknown()](https://zod.dev/?id=primitives). This tells us that our data is typed as any because we don't know what it is:

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

The issue of PersonResult is an unknown type that we need to fix:

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

We will change PersonResult into [z.object()](https://zod.dev/?id=objects). This tool allows us to construct objects with the keys and types we want. In this case, we want the **name** which will be a **string**:

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

Inside of **fetchStarWarsPersonName**, our **parsedData** is now correctly typed and has a structure that Zod understands.

Recall that the response from the API call included lots of information we were not interested in.

Zod will strip away all of the keys that we aren't interested in, and gives us only the name.

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

---

I hope you found it useful. Thanks for reading. 🙏
Let's get connected! You can find me on:
- Medium: https://medium.com/@nhannguyendevjs/
- Dev: https://dev.to/nhannguyendevjs/
- Substack: https://nhannguyendevjs.substack.com/
- Linkedin: https://www.linkedin.com/in/nhannguyendevjs/
- X (formerly Twitter): https://twitter.com/nhannguyendevjs/
Project Seven: Shopping Cart
Tags: webdev, beginners, challenge, codingquokka
Published: 2023-12-07 10:49:51

Have you bought the presents yet? If you had - you've definitely used more than one digital shopping cart.

I am yet to meet a web developer who hasn't implemented an e-commerce website and thus you're about to join that proud group :-) 

Implementing a shopping cart widget would widen your knowledge in accessibility and give you a chance to work with custom events.

## Shopping Cart Widget: requirements and recipe

> As a user I'd like to see a shopping cart with information regarding my planned purchases, so that I could quickly see if I'm still within my budget or how much items I have in my cart

Design of the widget, icon and information presented would vary from site to site. Here's an example from Forem shop:

![A thin shopping bag icon with "1" in a circle](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/raipnjfmhovvlrrocu5z.png)

You're free to decide what you'd like to show and how, but some requirements should be met regardless:

### Requirements

1. Shopping cart should be updated every time user adds a new item
2. Shopping cart should be updated every time an item is removed
3. Shopping cart information should be accessible for screen reader users
4. Shopping cart should notify screen reader users on update

### Recipe

1. Create a static version of a shopping cart for empty state
2. Create a static version for a cart with some items in it
3. Add proper accessibility tags and verify
4. Create a custom event listener that would trigger cart update
5. Drop an "Add to cart" button somewhere
6. Connect the pieces together
6. Click and enjoy!

### Hints

In order to notify users on cart update one should use [aria-live regions](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions) to match accessibility requirements.

## Hard mode: Storing Cart State

Sometimes users leave the cart just to come back the other day and it might be beneficial for both users and business to be able to restore the cart for users that are coming back.

How about adding the logic to write the state somewhere in users' browser? Maybe there's even a way to use events that this local storage yields instead of a custom event ;-)

Share your creations and feedback and see you tomorrow!

Liked the idea a lot and would love to have it all year long?

[![Buy Me A Coffee](https://cdn.buymeacoffee.com/buttons/v2/default-red.png)](https://www.buymeacoffee.com/valeriavg)
Unbelievable! Google's Dazzling Gemini Interface Built with Flutter?! 😱🚀
Tags: flutter, google, ai, innovation
Published: 2023-12-07 10:37:25

Hey developers, Google just dropped a bombshell with Gemini, google's largest and most capable AI model . 

 The interface of this new project is built with Flutter! This means that Flutter isn't just for mobile apps anymore!

This move by Google is a huge validation for Flutter's potential. It shows that Flutter is no longer just a trendy framework, it's becoming a universal language for app/web development.

Flutter's power is truly unimaginable! ⚡ And with Google backing it, the future of app development is looking bright. ☀️
Output Exhale Full Version Lifetime Activation & Access for Download
Tags: music, musicproduction, vstplugins, html
Published: 2023-12-07 10:37:18


**

## ![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/odswlvlwo6e95r6vafe5.png)**Exhale 1440w: Elevate Your Vocal Experience**

**
**Unleash Modern Soundscapes:**
In the quest for the perfect vocal instrument, musicians have yearned for a product that encapsulates the contemporary essence found in today's music and scores. Exhale 1440w emerges as the solution, a vocal engine that redefines[ modern sound.](https://extraplugins.com/product/output-exhale-kontakt/)

**Awe-Inspiring Vocals:**
Curated by today's most sought-after producers, Exhale delivers 1440w of awe-inspiring vocals. Breathtaking performances from elite session singers, band leaders, and choral ensembles ensure a sonic experience that resonates with the crème de la crème of the music world.

**Play it Your Way:**
Exhale stands out with three independent engines, providing unparalleled flexibility. Whether you prefer the fluidity of loops, the precision of slices, or the expressiveness of chromatic sounds, Exhale adapts to your creative whims. In essence, there's no limit to how you can play it—your musical playground awaits.

**Seasoned to Perfection:**
With the collaborative magic of 21 exceptional sound designers and the wizardry of outboard gear, every raw vocal performance in Exhale undergoes a transformative journey. The result? Vocals seasoned to perfection, ready to make waves in the dynamic landscape of modern music.

**Easy Tweaks, Infinite Possibilities:**
What begins as a starting point evolves into a limitless realm of possibilities. Exhale invites you to delve into the creative process, allowing you to tweak every facet imaginable. From macros and FX to the very loops themselves, shape and mold your sounds to go the extra mile and beyond.

Exhale 1440w is not just a vocal engine; it's an instrument of expression, a conduit for crafting sonic masterpieces that define the contemporary era. For musicians in pursuit of the extraordinary, Exhale is the key to unlocking a world of boundless creativity in vocal production.
GET Request in React.js using Fetch Example and Tutorials
Published: 2023-12-07 10:30:22

For making application dynamic we need to make request to server to get the data from server, For that we have different options in React.js library like Fetch, Axios etc...

In this article, We will see example for making GET Request in React.js application using Fetch.The Fetch API is a modern interface that allows you to make HTTP requests to servers from web browsers. We don't need to import any extra packages to use Fetch because if comes inbuilt with the browser.

### Simple GET Request using Fetch in class base component

Here, we will make a GET Request to the server of [jsonplaceholder ](https://jsonworld.com/blog/get-request-in-reactjs-using-fetch-example-and-tutorials)to get the record detail.

``````componentDidMount() {
  // GET detail
const header = {}
  fetch('https://jsonplaceholder.typicode.com/todos/1',header)
  .then(response => response.json())
  .then(json => console.log(json))
  .catch(error => {console.log(error)})
}``````

### GET Request in Class-based component using async/await

``````async componentDidMount() {
  // GET request using fetch with async/await
  const header = {}
  const response = await fetch('https://jsonplaceholder.typicode.com/todos/1',header);
  const data = await response.json();
  console.log(data);
}``````

### Using Fetch for GET Request in React Hooks App

The above example was for making GET Request in class based Reactjs application. In this we will see how to make GET Request in React Hooks Application. Here we will use useEffect in place of componentDidMound lifecycle.

``````useEffect(() => {
// GET request in useEffect React hook
const header = {}
fetch('https://jsonplaceholder.typicode.com/todos/1',header)
.then(response => response.json())
.then(json => console.log(json))
.catch(error => {console.log(error)})
 
}, []);``````

### Conclusion

So in this article, We learn about the different ways to make GET Request in React.js application using Fetch. You can also find other demos of [React.js Sample Projects](https://jsonworld.com/blog/get-request-in-reactjs-using-fetch-example-and-tutorials) here to start working on enterprise-level applications.

That’s all for now.

Let me know your thoughts over email **demo.jsonworld@gmail.com.** I would love to hear them and If you like this article, share it with your friends.

This article is originally posted over [jsonworld](jsonworld.com)
Project: Automating AWS with Ansible - Hello, Ansible!
Tags: aws, awscommunity, awscommunitybuilders
Published: 2023-12-07 10:18:25

## Project: Automating AWS with Ansible – Hello, Ansible!

<u>Summary</u>
AWS with Ansible through the “Hello, Ansible!” project. This hands-on guide will tell you installing Ansible in AWS EC2 instance and execute a “Hello, Ansible!” project. From this we will learn installing Ansible in AWS instance, file generation, and personalized message display.

<u>Objectives</u>
- Launching AWS EC2 Instance & EC2 Instance Connect
- Installing Ansible on AWS EC2 Instance
- Creating Ansible Playbook
- Executing Ansible Playbook

<u>Steps</u>

<u>Step:1 Launching AWS EC2 Instances & EC2 Instance Connect </u>
1.1 EC2 Instance Launch:
Start an AWS EC2 Instance and configure all the settings as shown below.


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


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


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


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


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


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


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


1.2 AWS EC2 Instance Connect:
Connect your EC2 Instance using EC2 Instance Connect

<u>Step:2 Installing Ansible on AWS EC2 Instance </u>
2.1 Installing Ansible:
After connecting to your EC2 Instance via EC2 Instance  Connect, follow the below commands.

To Update system packages command:
``` sudo yum update -y```

Command for installing Ansible:
```sudo amazon-linux-extars install ansible2 -y```

Command for verifying Ansible installation:
``` ansible --version```

<u>Step:3 Creating Ansible Playbook </u>
3.1 Creating Directory 
```Bash 
mkdir hello_ansible
cd hello_ansible
```
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qkbfho9i7u5zwdfruw51.png)

Create an Ansible Playbook “hello_ansible.yml”
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d49j3onv10tmlp59mzlm.png)

3.2 Running the playbook
```Bash 
ansible-playbook hello_ansible.yml
```
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/745h5t0q2gd248h71u9d.png)

<u>Step:4 Executing Ansible Playbook </u>
We will see the “Hello, Ansible!” message by the following the command below

```Bash 
cat/tmp/hello_ansible/Hello.txt
```

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rbihlcipep0k3bmdjd1k.png)
Configure Cherokee web server only with TLSv1.2 or higher
Published: 2023-12-07 10:17:32

Our expert team is willing to help you, as usual. Check how to disable unsecure TLS protocols for Cherokee RELIANOID Load Balancer Web GUI service. Stay secure, stay in control! 💻🔒 #CherokeeServer #LoadBalancerSecurity #WebGUISecurity #TechTips #CyberSecurity #RELIANOID #ConfigurationManagement #TLSProtocols #CyberSafety #DataProtection #TechSolutions #ITSecurity #SecurityAwareness #TechInsights #WebGUI #APIManagement #NetworkSecurity #CyberHygiene #DigitalSecurity #ConfigurationBestPractices #TechHowTo #ITManagement #TLSConfiguration #CherokeeWebServer #LoadBalancerTips #SecureWebServices #ITSecurityGuide #CyberResilience #TechSecurity #DataPrivacy #InformationSecurity #SystemAdmin #ITOperations #TechSupport #CyberProtection #SecureConnections #ITInfrastructure #ServerSecurity #SSLProtocol #CyberSmart #CherokeeConfigurations #TechAwareness #SecureTech
https://www.relianoid.com/resources/knowledge-base/howtos/disable-unsecure-tls-protocols-for-cherokee-relianoid-load-balancer-web-gui-service/
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2ao2zdanmvl9zisiv7hs.jpg)
Listen to Your Heart 💖
Tags: codenewbie, softwaredevelopment, mentalhealth
Published: 2023-12-07 10:10:26

| 🔴 **Disclaimer**: This post is enhanced with AI assistance.|
|--------------|

A developer's journey, a path to explore,
But before you code, there's more to implore.
Behind the lines, a reason must lie,
A purpose that fuels, an answer to "why?"

For coding is craft, but just one in the fray,
Software development serves people each day.
To connect, understand, and solve their plight,
With empathy and logic, shed a guiding light.

Problem-solving, a key that unlocks the door,
Analytical thinking, to delve into the core.
Interpersonal skills, to bridge the gap,
With every solution, a helping hand to clasp.

Love not just code, but the people it serves,
Their struggles, their hopes, the lessons observed.
For coding without love, a mere empty shell,
A sword in the dark, with no cause to compel.

Rediscover your "why", let it be your guide,
In the tapestry of solutions, let your skill confide.
More than just pay, a purpose to find,
To leave the world better, a mark left behind.

Slogging and hours, not markers of worth,
Efficiency matters, balance on Earth.
Smart work, not toil, the path to pursue,
For life's a mosaic, with many hues.

If coding feels wrong, a path to explore,
There's no shame in seeking a different shore.
For talents reside in diverse lands,
And passions ignite in different hands.

So listen to your heart, let it be your guide,
Invest in the future, where your joy can reside.
Forget the sunk time, for it's never too late,
To rewrite your story, and seal your own fate.
Gaming Culture: A Journey Through Time and Technology
Tags: gaming, gamedev, technology, gamingculture
Published: 2023-12-07 10:08:29

In the vast realm of entertainment, gaming stands as more than a mere pastime. It's a cultural phenomenon that has evolved over decades, entwining with technological advancements to create a global tapestry of passion, innovation, and community.

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

**The Birth of Gaming Culture**
Gaming culture traces its roots back to the early days of arcade machines and home consoles. It emerged as a subculture, attracting enthusiasts who congregated in arcades, competing for high scores and exchanging strategies. The thrill of gaming fostered a sense of camaraderie among players, laying the groundwork for a burgeoning culture.
**From Pixels to Spectacles: Technological Advancements**
The evolution of gaming technology has been nothing short of revolutionary. From the simplicity of Pong to the immersive worlds of today's virtual reality, technological advancements have shaped gaming experiences. The advent of consoles, PCs, mobile gaming, and the internet transformed gaming from solitary experiences to interconnected adventures, amplifying the culture's reach.
Diversity and Inclusivity in Gaming
As gaming culture evolved, so did the call for diversity and representation within games. The push for inclusivity in characters, storylines, and gaming communities became a pivotal aspect of the culture. Advocacy for diversity has not only enriched gaming experiences but also contributed to a more inclusive society.
Gaming's Role in Technological Advancement
The gaming industry has been a driving force behind technological innovation. From graphics processing to AI integration, gaming has pushed the boundaries, contributing significantly to advancements in hardware and software development.

Future Prospects: Gaming Culture's Continued Evolution
As technology continues to advance, gaming culture shows no signs of slowing down. Emerging technologies like augmented reality, cloud gaming, and the potential of the metaverse hint at a future where gaming becomes even more immersive and integral to our lives.

Conclusion
Gaming culture has traversed a remarkable journey, from humble beginnings to a global phenomenon that impacts entertainment, technology, and societal norms. It's a culture built on shared experiences, friendships, and technological innovation—a culture that continues to evolve, leaving an indelible mark on the fabric of our modern world. The <a href="https://scopemagazine.in/">gaming magazine in India</a> is a hub for insights, industry updates, and community engagement, not only reflects but also nurtures the evolving gaming culture within India. It stands as a testament to the shared passion that unites gamers and contributes significantly to the ongoing discussions and experiences among gaming enthusiasts.
Beyond the Code: A Developer's Awakening
Published: 2023-12-07 10:05:32

| 🔴 **Disclaimer**: This post is enhanced with AI assistance.|
|--------------|

Before the lines of code take flight,
Before logic weaves its intricate light,
A question lingers, a thought untold:
Why venture into this digital fold?

Is it the allure of creation's spark,
To build anew, leave a digital mark?
Or the thrill of solving problems with grace,
To bridge the gaps and leave a better space?

For software's heart transcends the code,
It's woven from empathy, a helping code.
It speaks to people, understands their needs,
And offers solutions, like seeds it sows.

So let us delve beyond the keyboard's click,
Embrace the people, their every tick.
Refine your skills, let logic guide,
But empathy's warmth, let it reside.

Before you fall in love with code's embrace,
Let love for people fill your space.
For problems wait, with faces unseen,
To find solutions, a developer's keen.

Don't just write code, and hope to link it one day,
Let purpose be your guiding ray.
Why code? Why strive? Why dedicate your hand?
To make a difference, in this digital land.

Like knights of old, with swords of might,
We fight against the darkness, with code as our light.
But courage alone will not suffice,
A noble cause, a burning desire must suffice.

Rediscover your "why," let it fuel your flame,
For coding's art, it's more than just a name.
It's about impact, about lives transformed,
A legacy built, a journey informed.

Beyond the hours, the deadlines we chase,
Let's find the rhythm, the perfect pace.
For work-life balance, a harmony true,
Will fuel our hearts and see us through.

If doubts arise, if passion fades,
Seek guidance, explore uncharted shades.
For not all paths are meant for all,
Perhaps another calling, a different hall.

Remember, time invested, a precious thing,
Choose wisely, where your joy will sing.
Let not regret be your only friend,
Reignite your spirit, and make an end.

So delve beyond the code, explore the depths,
Where people and problems await, on different steps.
With empathy and logic as your guide,
You'll find your purpose, in this digital tide.
The Code and the Heart
Tags: codenewbie, softwaredevelopment, mentalhealth
Published: 2023-12-07 10:00:52

| 🔴 **Disclaimer**: This post is enhanced with AI assistance.|
|--------------|


Before your fingers touch the keyboard's keys,
Before the syntax dances, a digital breeze,
Ask yourself, dear developer, bold and bright,
What ignited your spark, what set your spirit alight?

For code is but a tool, a language to wield,
But the heart of the matter in people revealed.
It's not just lines of logic, cold and bare,
But solving their problems, a burden you share.

Empathy whispers, a guiding light,
To understand their struggles, to see their plight.
To bridge the gap between needs and desires,
With solutions crafted, fueling their fires.

Love for people, not just code's embrace,
Is the fuel that ignites, the starting race.
Problem-solving, a warrior's art,
To conquer challenges, set their minds apart.

Why do you code? Let the answer unfold,
Like a warrior's purpose, bold and bold.
Not just for pay, not just for the fame,
But for a cause, a reason, etched in your name.

Don't let the hours dictate your worth,
For efficiency matters, not just length of birth.
Balance your life, let your spirit soar,
Work smarter, not harder, explore and explore.

If the code feels heavy, the path unclear,
Seek guidance and wisdom, cast aside your fear.
For sometimes, a different path is the key,
To unlock your potential, set your spirit free.

There's no shame in changing course, in finding your stride,
For life is a journey, with many doors to ride.
So embrace the unknown, the twists and the turns,
And discover your purpose, where passion burns.
Sloan's Inbox: How did open source come to be?
Tags: discuss, learning, opensource
Published: 2023-12-07 10:00:00

Hey friends! Sloan, DEV Moderator and mascot, coming back at ya with another question submitted by a DEV community member. 🦥

For those unfamiliar with the series, this is another installment of Sloan's Inbox. You all send in your questions, I ask them on your behalf anonymously, and the community leaves comments to offer advice. Whether it's career development, office politics, industry trends, or improving technical skills, we cover all sorts of topics here. If you want to send in a question or talking point to be shared anonymously via Sloan, that'd be great; just scroll down to the bottom of the post for details on how.

Let's see what we have for this week...

### Today's question is:

> I'm a late-in-life career changer and pretty new to the world of software development. The deeper I go, the more fascinating it gets! It makes sense to me that there's so much free learning materials out there on the web because software developers are very online people. Still, the whole concept of open source is kind of surprising to me. The fact that there's a place like GitHub where people are writing code together freely and creating amazing software is truly awesome. My question is why do folks do this? How did this come to be? Don't get me wrong, I'm really happy it's like this. But, it can't be all roses, right? Are there downsides I've yet to learn about it? Are we in jeopardy of losing open source? It feels too good to be true.
>

Share your thoughts and let's help a fellow DEV member out! Remember to keep kind and stay classy. 💚

---

*Want to submit a question for discussion or ask for advice? [Visit Sloan's Inbox](https://docs.google.com/forms/d/e/1FAIpQLSc6wgzJ1hh2OR4WsWlJN9WHUJ8jV4dFkRDF2TUP32urHSAsQg/viewform)! You can choose to remain anonymous.*