teleren/devto huggingface dataset:
3 Tips to Speed Up Your Website
Tags: webdev, javascript, beginners, programming
Published: 2024-07-08 22:40:20

A fast-loading website is crucial for providing a great user experience and improving your search engine rankings. Here are three quick and effective tips to speed up your website:

**Tip 1: Optimize Images**
Images are often the largest files on a webpage, and large image files can significantly slow down your site's loading speed. By optimizing your images, you can reduce their file size without sacrificing quality.

How to Optimize Images:

Use https://tinypng.com/ to compress your PNG and JPEG files. This tool reduces the file size while maintaining image quality.
Choose the right file format. For example, use JPEG for photographs and PNG for images with transparent backgrounds.
Implement lazy loading so images load only when they come into the user's viewport.

**Tip 2: Minimize HTTP Requests**
Each element on a webpage (like images, scripts, and stylesheets) requires an HTTP request to load. The more requests your page has to make, the slower it will load. Reducing the number of HTTP requests can significantly speed up your site.

How to Minimize HTTP Requests:

Combine CSS and JavaScript files into single files. Tools like https://gruntjs.com/ or https://gulpjs.com/ can help automate this process.
Use CSS Sprites to combine multiple images into one. This reduces the number of image requests.
Remove unnecessary plugins and scripts that may be adding extra requests to your site.

**Tip 3: Use a Content Delivery Network (CDN)**
A CDN stores copies of your site’s files on servers located around the world. When a user accesses your site, the CDN delivers the files from the nearest server, reducing load times.

How to Use a CDN:

Choose a CDN provider like https://www.cloudflare.com/ or https://aws.amazon.com/cloudfront/.
Set up your CDN to work with your website. Most CDN providers offer step-by-step instructions to help you integrate their services.
Ensure that your static assets (images, stylesheets, JavaScript files) are being served through the CDN.
By implementing these three tips, you can significantly improve your website's loading speed and provide a better experience for your users.

For more web development hacks and tips, follow me on Instagram, X, Youtube, and TikTok @CodeByTEN. Happy coding!
Boost Your Vocabulary Effortlessly with Vocabulary Booster 🎓🚀
Tags: webdev, showdev, productivity, opensource
Published: 2024-07-08 22:29:29

Boost Your Vocabulary Effortlessly with [Vocabulary Booster](https://github.com/huseyn0w/vocabularify) 🎓🚀

Hey dev.to community! 🌟

I am excited to introduce [Vocabulary Booster](https://github.com/huseyn0w/vocabularify), a desktop application designed to help you expand your vocabulary effortlessly. Unlike most language apps that demand dedicated time slots and undivided attention, Vocabulary Booster integrates seamlessly into your daily routine, allowing you to learn new words while you continue with other activities.

Why Vocabulary Booster? 💡

- Effortless Learning: No need to disrupt your routine. Learn new words while watching YouTube, writing code, or any other activity.
- Multitasking Friendly: The app works perfectly in the background, ensuring you can keep up with your daily tasks.
- Multiple Backgrounds: Enjoy a sleek, eye-friendly dark mode.
- Mode Selection: Display words in a window, in the menu bar, or use sound mode for auditory learning.
- Enhanced Language Selection: Choose your target language and the language you are learning from.

How It Works 🛠️

- Watching YouTube? 🎥
Open the app, choose your target language, and position the app window over your browser. Every 5 seconds, a new word with its translation will appear.
- Writing Code? 💻
Open the app, choose your target language, and place the app window over your coding environment. Every 5 seconds, you'll see a new word with its translation.
- Want to Learn by Listening? 🔊
Enable the "Sound" mode from the menu. The app will pronounce each new word and its translation, helping you learn through auditory reinforcement.

[Check out our VIDEO DEMO HERE](https://www.loom.com/share/614d6203f5bb442fa0a5bc9b44aa1f78?sid=1a00ac4c-07f7-47b4-8c7e-08e03ef6dab4)🌟 to see the app in action.
Support Us ❤️

If you find Vocabulary Booster helpful and would like to support its development, please star and share the project. Your contributions will help us maintain and improve the application.

Boost your vocabulary effortlessly with Vocabulary Booster today! 😊🎉
Props Drilling 🛠️
Tags: react, webdev, learning, beginners
Published: 2024-07-08 22:43:42

## What ?
Passing data from a parent component down through multiple levels of nested child components via props is called **props drilling**. This can make the code hard to manage and understand as the application grows. It's not a topic but a problem. How it's a problem?

In react, Data flows from top to bottom component. Like this...

`Parent -> Children -> Grand Children `

Now I will show you two cases. Each case represents a different set of data-flow.

---

## ⛳️ Case 1

**Description:** A hand-drawn illustration to help visualize data-flow.


![diag_simple_props_drilling](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w91ne47slbmo83r4tkru.jpg)

**Code**
{% details 👉🏽 TopLevelComponent.jsx %} 
```jsx
// TopLevelComponent.jsx
import React from 'react';
import IntermediateComponent1 from './IntermediateComponent1';

const TopLevelComponent = () => {
  const user = { name: 'Jorjis Hasan', age: 22 };

  return (
    <div>
      <h1>Top-Level Component</h1>
      <IntermediateComponent1 user={user} />
    </div>
  );
};

export default TopLevelComponent;

// IntermediateComponent1.jsx
import React from 'react';
import IntermediateComponent2 from './IntermediateComponent2';

const IntermediateComponent1 = ({ user }) => {
  return (
    <div>
      <h2>Intermediate Component 1</h2>
      <IntermediateComponent2 user={user} />
    </div>
  );
};

export default IntermediateComponent1;

// IntermediateComponent2.jsx
import IntermediateComponent3 from './IntermediateComponent3';

const IntermediateComponent2 = ({ user }) => {
  return (
    <div>
      <h3>Intermediate Component 2</h3>
      <IntermediateComponent3 user={user} />
    </div>
  );
};

export default IntermediateComponent2;

// IntermediateComponent3.jsx
import EndComponent from './EndComponent';

const IntermediateComponent3 = ({ user }) => {
  return (
    <div>
      <h4>Intermediate Component 3</h4>
      <EndComponent user={user} />
    </div>
  );
};

export default IntermediateComponent3;

// EndComponent.jsx
const EndComponent = ({ user }) => {
  return (
    <div>
      <h5>End Component</h5>
      <p>Name: {user.name}</p>
      <p>Age: {user.age}</p>
    </div>
  );
};

export default EndComponent;
```
{% enddetails %}

See how we had to pass data down through layers. For the sake of `EndComponents` needs, we had to pass `user` data through 3 extra components(IntermediateComponent1, IntermediateComponent3, IntermediateComponent3). This is absolutely not clean code. 

---

## ⛳️ Case 2 

**Description:** A hand-drawn illustration to help visualize data-flow.


![diag_complex_props_drilling](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6h2o3z2jcz9f0zzb0unh.jpg)

**Code:** 

Sorry! Sorry! Sorry!
I can't code it by just passing props, even though I do. That would not make sense.

Well, let's hand down the best practices. We have 2 consistent solutions that can be used against any complex data flow.

- Built-in `useContext()` API in React
- State Management Library (redux, zustand)
Day 986 : Desire
Tags: hiphop, code, coding, lifelongdev
Published: 2024-07-08 23:07:30

_liner notes_:
- Saturday : Did the radio show. Had a good time as usual. Did a little coding after the show and watched some anime. The recording of this week's show is at https://kNOwBETTERHIPHOP.com

![Radio show episode image of an AI generated image of a barber's chair behind prison bars with the words July 6th 2024 Stuff](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vvoq69cmqnmx546016tk.jpg)

- Sunday : Did my study sessions at https://untilit.works In addition to the normal tasks, I cut my hair and launched https://myLight.work . Ended the night watching "Demon Slayer".

- Professional : Pretty good start of the work week. Met with my manager and got to demo an application I created last week to test out a new feature. Responded to some community questions. Continued work on a refactor of an application to use a new SDK.

- Personal : Glad to be able to have https://myLight.work out. I'm already thinking of other projects I want to add to it. It'll give me a chance to go back and clean up some projects. But that will be after I get this other project that I've been working on previously.

![A photo of a rocky, coastal landscape with a body of water in the background, a sunrise or sunset is happening over the water, the landscape is a dark grey-purple color and the sky is a gradient of purples and oranges. The location is called Kunashir Island.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c7m16dhncwfnpf2zoly5.jpg)

Going to go through some tracks for the radio show, work on my next side project and watch some anime. I'm almost caught up on "Demon Slayer" and there's a couple more I want to start. Pretty simple plan. It's been super hot so my desire is to not exert myself too much.

Have a great night!

peace piece
Dwane / conshus
https://dwane.io / https://HIPHOPandCODE.com
{% youtube yEIrDkXD3n0 %}
Website Navigation: Is a 'Home' Link Necessary in the Main Menu?
Tags: discuss, webdev, a11y
Published: 2024-07-09 21:58:12


**Should websites include a "Home" link in the main menu?**

Traditionally, this has been a common practice on many websites.
However, some may argue that having a separate menu item for 'Home' might be redundant or unnecessary as the logo often being a direct link to the homepage.

_**Pros of Including a "Home" Link:**_

**Accessibility:** 
It provides a clear, visible option for users to navigate back to the homepage from any page on the site.

**User Expectations:** 
Many users are accustomed to seeing a "Home" link in the main menu, which can enhance usability and reduce confusion.

**SEO Considerations:**
Having a "Home" link can potentially benefit SEO, as it reinforces the importance of the homepage in site structure.

_**Arguments Against Including a "Home" Link:**_

**Redundancy:**
Since the logo typically links to the homepage, adding a separate menu item might clutter the navigation without adding significant value.

**Space Optimization:**
Removing the "Home" link can streamline the menu, making room for more important or frequently accessed links.

**Design Aesthetics:**
Depending on the website’s design, having fewer menu items might contribute to a cleaner, more modern look.

Do you prefer having a dedicated "Home" link in the menu, or relying on the logo for navigation?
[Game of Purpose] Day 51 - Splines
Tags: gamedev
Published: 2024-07-08 23:36:22

Today I learned about Splines. They are just Bezier Curves connected together. Along them you can render static meshes.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lod2d1nip1p75rn8hjti.png)
Unleashing the Power of Conversational AI with Sista AI
Tags: ai, react, javascript, typescript
Published: 2024-07-08 23:45:45

<h2>Introduction</h2><p>In today's digital age, the rise of Conversational AI platforms is revolutionizing the way we interact with technology. Sista AI, an end-to-end AI integration platform, stands out as a game-changer in this space, transforming any app into a smart app with an AI voice assistant in less than 10 minutes. This plug-and-play AI assistant offers a range of innovative features designed to enhance user engagement and accessibility, making it a must-have tool for businesses looking to boost their online presence.</p><h2>The Evolution of Conversational AI</h2><p>Conversational AI trends are rapidly advancing, with chatbots now equipped with emotional intelligence and offering personalized interactions for users. Sista AI leverages state-of-the-art conversational AI agents to provide precise responses and understand complex queries, ensuring a human-like interaction experience. The voice user interface supports commands in over 40 languages, catering to a diverse global audience.</p><h2>Enhancing User Experience with AI</h2><p>Businesses across various industries are leveraging AI to streamline operations and enhance user experience. Sista AI's AI voice assistant not only improves user engagement but also enables hands-free UI interactions through a multi-tasking UI controller. The automatic screen reader feature offers automated assistance by analyzing screen content, while real-time data integration ensures instant access to live data for enhanced functionality.</p><h2>Optimizing Operations with AI</h2><p>By integrating Conversational AI into apps and websites, businesses can streamline user onboarding, reduce support costs, and boost product accessibility. Sista AI's full-stack code execution allows for seamless frontend and backend code execution using voice commands, paving the way for infinite integration possibilities. The personalized customer support feature ensures swift and thorough responses using expansive datasets, enhancing customer service experiences.</p><h2>Unlock the Potential of AI with Sista AI</h2><p>Experience the transformative power of Conversational AI with Sista AI. From hands-free UI interactions to personalized customer support, Sista AI offers a comprehensive suite of features to revolutionize how users interact with technology. Visit <a href='https://smart.sista.ai/?utm_source=sista_blog&utm_medium=blog_post&utm_campaign=Unleashing_the_Power_of_Conversational_AI_with_Sista_AI'>Sista AI</a> to start your free trial today and unlock the full potential of AI integration for your business.</p><br/><br/><a href="https://smart.sista.ai?utm_source=sista_blog_devto&utm_medium=blog_post&utm_campaign=big_logo" target="_blank"><img src="https://vuic-assets.s3.us-west-1.amazonaws.com/sista-make-auto-gen-blog-assets/sista_ai.png" alt="Sista AI Logo"></a><br/><br/><p>For more information, visit <a href="https://smart.sista.ai?utm_source=sista_blog_devto&utm_medium=blog_post&utm_campaign=For_More_Info_Banner" target="_blank">sista.ai</a>.</p>
Showing more Article info on Daily.dev
Published: 2024-07-09 01:40:11

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

Daily.dev is a very good extension that helps us aggregate news from several sources.

When browsing news, I usually scan the `Title -> Thumbnail -> Description`. However, the current view of Daily.dev has only `Title` and `Thumbnail` in Grid view and only `Title` in Listing view. This requires me to click on an article to read more in a popup, which consumes more reading time.

Fortunately, Daily.dev is open source, so we can submit feature requests or even customize the design to suit our needs.

In this case, I have submitted a feature request on the [dailydev/apps](github.com/dailydotdev/apps) repository and also implemented a new design that can serve my needs. You can review my pull request here: [pull/2060](https://github.com/dailydotdev/apps/pull/2060).

They have mentioned that they need to pass this request to the Design team before reviewing my merge request or implementing a new UI.

In the meantime, you can pull my request, build it, and install it locally using these easy steps:

### Step 1: Clone my code
```bash
git clone --branch feat/show-more-metadata git@github.com:huantt/daily-dot-dev-apps.git
```

### Step 2: Build
```shell
pnpm install

cd packages/extension

pnpm run build:chrome
```

The output will be located at `packages/extension/dist/chrome`.

### Step 3: Install
- Open Chrome.
- Click the Extension button > Manage Extensions. Alternatively, you can enter the following URL directly: [chrome://extensions](chrome://extensions/).

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

- Enable `Developer Mode`.

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

- Click on `Load unpacked`.

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

- Point to `packages/extension/dist/chrome`.

Open a new tab, and you will see that all articles in Grid view or Listing View now have a Title, Description, and Thumbnail.


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

I hope that it's helpful for you, and I also hope that Daily.dev releases a new UI soon.
{% github: github.com/huantt/daily-dot-dev-apps %}
Lo que costó mi escritorio
Published: 2024-07-08 23:55:34

Mi escritorio ha sido un fiel compañero por varios años, 8 nomás. Es un testigo de mi crecimiento y aunque podría venderlo a buen precio hoy, su valor va más allá de lo que me puedan dar en monedas.

En una de esas rutinas de limpieza me puse a pensar sobre cuánto he crecido desde que lo tengo y decidí hacer el ejercicio para estimar en pesos cuánto ha sumado a mi vida en términos de lo que he ganado en mis años de experiencia laboral. Es más que un mueble, se convirtió en mi centro de estudio y espacio creativo.

Los resultados me asustaron y me pareció interesante documentarlo, no solo para mí sino para usarlo como un referencia de aprendizaje y crecimiento...

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


[Continúa...]
An easy way to start with Dart Spotify!
Published: 2024-07-09 00:23:16

Hey! 
Today I'd like to my experience working with Dart Spotify SDK.

If you didn't know, Spotify API is free to use! (But apparently not totally since you need a Premium account). So you can build your own apps using it. 
Spotify API was really hard for to use so I searched for an SDK that would make my life easier. And I found it in Dart Spotify SDK. I used it to create a simple application on Flutter that just displays some information about albums and songs that they consist. It was an assignment in my university so I didn't really have much time to explore Spotify API from start to finish, but I hope my little work may help someone.

Here's the steps in getting started with Dart Spotify SDK:

1. We need to add the dependencies:

```
dependencies:
  flutter:
    sdk: flutter
  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  cupertino_icons: ^1.0.6
  spotify: ^0.13.5
```

Perfect!
2. Now onto the next step, which is just importing the dependency:
`import "package:spotify/spotify.dart";`

3. We can start using it now! But at first, you will have to create your application in Spotify Developer Dashboard where you'll aquire your client_id and client_secret. You need them to authorize your app:

- To do that, go to Spotify For Developers -> Dashboard; and create application.
- Client id and client secret will be available in the application settings

4. Now let's get back to coding:
```
late SpotifyApiCredentials credentials;
late SpotifyApi spotify;

@override
  void initState() {
    super.initState();
    credentials = SpotifyApiCredentials(clientId, clientSecret);
    spotify = SpotifyApi(credentials);
  }
```
Store them in variables (but note that those keys should be hidden from public view so it's better to store them in env files)

5. Great! We have initialized our application and now can start making api calls!

`spotify.albums.get("4PWBTB6NYSKQwfo79I3prg")`

This call will get information about some particular album, with the list of songs, albums length, artist, album cover and more! (I suspect that it is even possible to play the songs, but not sure)

And just like that, you can experement with it and maybe recreate Spotify for your portforlio!

P.S. I am not an expert either in flutter or spotify api, I'd be happy to get some tips regarding my code, or to receive some feedback from more experienced developers!
Understanding Git Stashes
Published: 2024-07-09 00:27:42

Stash is something stored or hidden away for later use.
Why would i want to use git stash in the first place. 

let's say i'm working on the sign up button for a client but he needs work done on the login feature immediately regardless of the urgency for the signup feature, i can quickly stash my signup as work in progress [saving it for some moments before i get back] and start working on the login feature.

Git stashing is keeping files [save files] that you are not ready to use yet [not ready to commit].

Save a stash

```
git stash
```

save a stash with a name (recommended)

```
git stash save wip_login_feature
```

List Your Stashes

```
git stash list
```

This will show you a list of all your stashed changes, with their corresponding stash IDs. For example:

```
stash@{0}: On master: readme_work
stash@{1}: On master: index_html_in_progress 
stash@{2}: WIP on master: 049d078_Create_index_file
```

Applying a Specific Stash
To apply a specific stash, you can use the git stash apply command and provide the stash ID as an argument:

```
git stash apply stash@{1}

```
This will apply the changes from the stash with ID stash@{1}, which in the example above is the "index_html_in_progress" stash.

Popping a Specific Stash
Alternatively, you can use the git stash pop command to apply and then remove a specific stash not needed again:

```
git stash pop stash@{0}
```

This will apply the changes from the most recent stash (stash@{0}) and then remove it from the stash list.

Dropping a Specific Stash
If you no longer need a particular stash, you can remove it from the stash list using the git stash drop command:

```
git stash drop stash@{2}
```

This will remove the stash with ID stash@{2} from the list of stashes.
Caravane du Grand Erg / Morocco Private Desert Tours
Published: 2024-07-09 00:31:35

**[Caravane Du Grand Erg](https://caravanedugranderg.com/)** is a professional tour operator located in Zagora, southern **Morocco**. We specialize in [Morocco desert tours](https://caravanedugranderg.com/) from north to south. 

Our team has deep knowledge of local life, traditions, and customs. We offer private travel tours in Morocco with custom itineraries to explore the Sahara Desert of **Erg Chebbi and Erg Chigaga**, including camel trekking experiences, overnight stays at [luxury desert camps](https://caravanedugranderg.com/), visits to the High Atlas Mountains, and trips to the four imperial cities of Fez, Meknes, Rabat, and Marrakech, as well as the blue city of Chefchaouen. We’ve been providing [Morocco private desert tours](https://caravanedugranderg.com/) for over 15 years and can accommodate your specific travel needs, including timeline and budget.

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