teleren/devto huggingface dataset:
Acelera tus apps con Lazy Loading 🚀
Tags: frontend, reactjsdevelopment, react, javascript
Published: 2023-05-23 05:17:58

Por lo general cuando creamos aplicaciones con React tendemos a usar rutas para que el usuario pueda acceder a diferentes vistas de nuestra aplicación. Para ello usamos, por ejemplo, el clásico navegador en la parte superior en donde podemos acceder al *home*, *contacts*, *products* o cualquier vista que queremos que el usuario acceda mediante un botón. 

Nuestro código suele verse algo así cuando intentamos realizar el ejemplo anterior:


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

A simple vista pareciera que todo marcha bien, sin embargo cuando nuestra aplicación empieza a crecer y debemos incluir más rutas para nuestros usuarios nuestra aplicación empieza a perder rendimiento debido a que cada vez que ingresamos a ella cargamos todos nuestros componentes.

Podríamos detenernos y preguntarnos ¿realmente nuestro usuario al ingresar al *home* necesita que le carguemos los archivos javascript y css de *articles* y *contact*? debemos recordar que estos archivos afectan el rendimiento de nuestra aplicación y para lograr una optimización en este sentido se vuelve necesario evitar cargarle al usuario archivos innecesarios que afecten su experiencia.

Con base a lo anterior React nos provee una herramienta llamada *Lazy* que nos permite cargar los componentes solamente cuando el usuario los solicita después de la interacción con algún botón o acción que desate dicha solicitud.

Para implementar un *lazy loading* en nuestra aplicación debemos:

1. Importar la función Lazy desde React y pasarle mediante un callback los imports de cada unos de los componentes que queremos cargar dinámicamente

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

> Es importante recordar que los exports desde cada uno de nuestros componentes deben ser por default 

Si intentamos usar nuestra aplicación en este momento observaremos que al navegar entre las rutas la consola nos arrojará el siguiente error:

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

Para solucionar esto debemos realizar el siguiente paso:

2. Debemos importar un feature que nos provee React llamado Suspense el cual debe envolver nuestras rutas y a su vez permitirnos usar un fallback que se renderizará mientras nuestra aplicación realiza el fetching pertinente de archivos para poder renderizar el componente solicitado por el usuario en la vista. Nuestro código debe lucir así:

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

> Si deseas aprender un poco más a profundidad sobre [Suspense](https://es.react.dev/reference/react/Suspense)

Y eso es todo! 

Debemos recordar que el lazy loading nos permite mejorar el performance de nuestras aplicaciones cuando estas tienen muchos componentes y no queremos cargarle al usuario cientos de archivos Javascript cuando realmente solo necesita unos cuantos para poder acceder a una vista en concreto.
A jupyter tip!
Tags: jupyter, datascience, tip
Published: 2023-05-23 05:08:25

📓 Tired of the Jupyter Notebook directory maze? Say hello to a fun and hassle-free solution! I've got a tip that will make opening Jupyter Notebook a breeze from any directory you want. 🎉 No more starting from the C: drive's username! With a simple batch file, you can dive straight into your projects without any detours. 🏊‍♂️ And guess what? You can copy this little wizard to all your different directories for instant access 🧙‍♂️

Let's explore this tip with some examples and scenarios:

**1. Setting up the batch file:** Create a new text file in your preferred directory and name it something like jupy_here.bat 📝 
Open the file in a text editor and add the following two-liner from my gist:  
[Github Gist](https://gist.github.com/Shanover77/45f22208b47f7dff97899bd2ed983a6c)
or just copy-paste from this:

```
@echo off
start jupyter notebook
```

Save the file and change the extension from .txt to .bat. You now have a batch file that will execute Jupyter Notebook. 🚀

**2. Executing the batch file:** To open Jupyter Notebook from any directory, navigate to the directory where you want to work and simply double-click the jupy_here.bat file. This will launch Jupyter Notebook in your default web browser, allowing you to start working on your projects immediately 📚🖱️

**3. Copying the batch file:** The beauty of this tip lies in its portability. You can easily copy the jupy_here.bat file to any directory where you want to open Jupyter Notebook. For example, if you have different projects stored in separate directories, you can copy the batch file into each project directory. This way, you can open Jupyter Notebook directly in the specific project directory without any extra navigation steps. 📂✨

**4. Working with multiple projects:** Imagine you have a data analysis project in Project_A and another machine learning project in Project_B. By copying the jupy_here.bat file into both project directories, you can effortlessly switch between projects. Double-clicking the batch file in Project_A will open Jupyter Notebook in that directory, and doing the same in Project_B will open Jupyter Notebook in the corresponding directory. This saves time and allows you to focus on your work rather than navigating through different directories.🔄📊🔬

**5. Sharing the tip:** If you collaborate with others or share your projects, including the jupy_here.bat file can help others open Jupyter Notebook in the intended directory without any confusion or extra steps. By providing this simple tip, you can enhance the user experience for your colleagues or collaborators, making it easier for them to work on the project.🤝🚀

Thank you for your time! 🙏
Keep coding, exploring, and creating! 🚀🔍🎨
Wishing you success in all your endeavors! 🌟💻
A Tale of Two Websites: Harnessing the Power of SEO for Rejuvenation and Ranking
Published: 2023-05-23 04:30:16

The power of SEO is not a novel concept, but its effectiveness when diligently applied cannot be overstated. This is a tale of two websites, seotoolser.com and alextag.ro, which, through strategic SEO initiatives, were significantly transformed in terms of spam score reduction and ranking improvement, respectively.

## Rehabilitating seotoolser.com: Tackling High Spam Score

In the world of digital marketing, a high spam score can be a daunting challenge. Such was the case with seotoolser.com, a .net domain that initially had a spam score of 45%. A high spam score is often a red flag for search engines and can hinder a website's performance significantly.

However, seotoolser.com's story is one of recovery and rejuvenation. A proactive approach was taken, leveraging Google's disavow tool to disconnect the website from damaging links that contributed to the high spam score. This rigorous but effective process was able to drastically decrease the spam score to an impressive 6%.

## Elevating alextag.ro: On-Page SEO and Link Building

Parallel to the rehabilitation of seotoolser.com, there was the tale of alextag.ro, my personal website that was initially positioned on the third page of search results. Through a detailed and strategic on-page SEO optimization, the website experienced a significant leap in rankings, moving from the 26th position all the way to the first page.

On top of on-page SEO optimization, a meticulous link-building strategy was also implemented. Backlinks were carefully gathered from other reputable websites with low spam scores, thus contributing to a solid and SEO-friendly link profile.

## Speed Matters: A Fast Website is a Strong Website

In today’s fast-paced digital world, website speed plays a crucial role in SEO performance and user experience. Alextag.ro triumphed in this area as well, achieving a 100% speed score on Google Speed Insights. This impressive result is a testament to the importance of technical SEO in the bigger picture of SEO strategy.
Creating keyboard shortcuts for web apps with JavaScript
Tags: javascript, tutorial
Published: 2023-05-23 04:21:33

In this tutorial we’ll be creating keyboard shortcuts that can be used in web apps. These are particularly handy when you want to give users the ability to save or copy data, navigate, or control playback of media all via the keyboard.

First thing we’ll do is create an object with the keys we want to use as shortcuts:

```javascript
let keyDown = {
  'c': false,
  'p': false,
  's': false,
  'Meta': false,
  'Control': false
};
```

The shortcuts we are creating will be triggered using the control or command keys in conjunction with another alphabetical key. `Control` here represents the control key whilst `Meta` represents the command key on macOS devices.

Next we’ll setup a `keydown` event listener that calls a `handleKeydown` function:

```javascript
document.addEventListener("keydown", handleKeydown);
function handleKeydown(e) {
  e.preventDefault();
  keyDown[e.key] = true;
  if (keyDown["c"] && (keyDown["Control"] || keyDown["Meta"])) {
    console.log("Shortcut Activated");
  }
}
```

This function sets the value of the key in the `keyDown` object to `true`. In this example we are checking if the “c” key has been pressed along with either the “Control” or “Meta” keys. As we’ve built it this way we could check for any number of key combinations pressed simultaneously.

To finish we just need to add a `keyup` event listener that resets the key value to `false`:

```javascript
document.addEventListener("keyup", handleKeyup);
function handleKeyup(e) {
  keyDown[e.key] = false;
}
```

That’s all for this tutorial, you should now have a good understanding of how to create keyboard shortcuts using JavaScript. If you enjoyed this tutorial we also have a number of other [JavaScript tutorials](https://w3collective.com/tag/js/) for both new and experienced developers.
Tips CMD
Tags: terminal, macos
Published: 2023-05-23 04:09:58

# Working tips

It just note everything when I researching my working issue.

## How to know which network you are using when you turn on both ethernet and wifi connections

After researching some guide on the internet. I summarize it to a one line terminal for checking.

The first thing, I will check the IP address from ethernet connection at network setting

![check ip address](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5mscqeg2p74xgce8h98z.png)

After that I use terminal and type the following command:

```bash
route -n get 0.0.0.0 | grep interface |  awk '{print $2}' | xargs ipconfig getifaddr
```

The result will show the ip was active.
Day 112 of #365DaysOfCode & Day 12 of #100DaysOfPython
Tags: webdev, javascript, beginners, programming
Published: 2023-05-23 03:21:20

Google OAuth 2.0 is done and dusted! Today, I successfully completed establishing distinct paths for both signing in and signing up for different user types in my application. The process now is a lot more streamlined and user-friendly.

When a user attempts to log in, the system first verifies their presence in the database. If the user is found, they’re immediately redirected to a set of secret pages. However, if the user is not found in the database, they’re gently nudged to sign up instead.

The sign-up process is also designed to be straightforward and efficient. It begins by checking the database for the user’s email. If it doesn’t find a match, the system creates an account for the user and immediately redirects them to the onboarding component. Here, the user can create their profile in their own time and at their own pace.

With Google OAuth 2.0 out of the way, I’m contemplating what to work on next. One potential feature I’m considering is a user search function based on preferences. It’s not a pressing feature to have, but it would definitely add value to the user experience.

Now, onto Python. Well, I didn’t exactly write code today, but I did watch some Python tutorials. Not quite the same as hands-on coding, I know, but it still counts as learning, right? Each tutorial brings me a step closer to becoming more proficient in Python, which is the ultimate goal.

That’s it for today! Another day of tackling new challenges and solving problems. As always, I’m looking forward to what tomorrow’s coding journey will bring.
I'm trying to find out how to create games on website by myself.
Published: 2023-05-23 03:14:08

# What kind of game i want to make?
+ The game that i would like to make is this game called Helix Jump
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dgr62czz5tjn0reh1831.png)

# Where i will learn it?
+ I will go on YouTube and search. Finally i found couples of videos teaches us how to do so:
- https://www.youtube.com/watch?v=m2e6RPNY0_E
- https://www.youtube.com/watch?v=tiIaOoMfJ5U
- https://www.youtube.com/watch?v=CjzgoZnOY_c
Beautiful Count down timer in React for (sales/promotional countdown)
Tags: react, webdev, frontend, npm
Published: 2023-05-23 01:39:46

🧑‍💻 Today present a remarkable React **countdown** timer that will leave your visitors spellbound. Whether you're running a flash sale, promoting a limited-time offer, or counting down to a grand product launch, this beautiful timer is the secret weapon to captivate, engage, and convert. 

Let's dive into the enchanting world of our React countdown timer and discover how it can transform your promotional campaigns into unforgettable experiences.

So first of all setup the project. We will create a react project using vite.

```sh
npm create vite@latest countdown-time -- --template react
cd countdown-time
npm install
npm install react-countdown
npm run dev
```

No remove all the unnecessary code from the `app.jsx` file - 

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

Now on `app.jsx` file I wrote this code - 
```react
import './App.css';
import Countdown from 'react-countdown';

function App() {
  return (
    <div>
      <Countdown date={Date.now() + 10000000} />
    </div>
  );
}

export default App;
```

And the output (screenshot) is - 

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


**Custom & Conditional Rendering**
In case you want to change the output of the component or want to signal that the countdown's work is done, you can do this by either using the `onComplete` callback, a custom renderer, or by specifying a React child within `<Countdown></Countdown>`, which will only be shown once the countdown is complete.
Example - 
```react
import './App.css';
import Countdown from 'react-countdown';

const Completionist = () => <span>Time Finish!! You are good to go!</span>;

function App() {
  return (
    <div>
      <Countdown date={Date.now() + 5000}>
        <Completionist />
      </Countdown>
    </div>
  );
}

export default App;
```
And after the time is finish , it will hide the timer and show a message like this - 

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

You can add style as you like. For example for one of my project I have make this countdown timer below using tailwind CSS. 

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



See? This `react-countdown` package is awesome and it has more awesome use case. Like Sales, Marketing, Exam Scheduling, Ticket Selling and many more. 

You can read more details about this on their [official documentation.](https://www.npmjs.com/package/react-countdown).

Thank you so much for reading.❤️
8 expert tips for mastering Nginx
Tags: devops, nginx, performance, beginners
Published: 2023-05-23 01:31:00

35% of websites around the globe use Nginx as their web server. 8 expert tips for mastering Nginx:

## 1. High performance:
NGINX is known for its high performance and ability to handle large amounts of traffic. Here's an example configuration to configure Nginx for high performance:


## 2. Reverse proxy support:
NGINX can act as a reverse proxy, allowing it to distribute incoming requests to multiple servers. Here's how to configure Nginx as reverse proxy:

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


## 3. Caching:
NGINX has excellent support for caching, which can improve the performance of your website or application. Here's how to enable caching in Nginx.


## 4. HTTP/2 support:
NGINX supports HTTP/2, which allows for faster and more efficient communication between the server and client. Here's how to enable HTTP/2 in Nginx:


## 5. Load balancing:
NGINX can act as a load balancer, distributing incoming requests evenly across multiple servers. Here's an example configuration to use Nginx as a loadbalancer:


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


## 6. SSL/TLS termination:
NGINX can terminate SSL/TLS connections, allowing it to handle encryption and decryption of traffic. Here's an example configuration to use nginx for TLS termination


## 7. HTTP/3 support:
NGINX supports the new HTTP/3 protocol, which provides even faster and more efficient communication. 


## 8. Dynamic modules:
NGINX supports dynamic modules, allowing developers to easily extend its functionality. Here's an example of how to load a dynamic module in nginx configuration.


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


Nginx's simplicity, performance and scalability make it an ideal candidate for a variety of applications. Whether you are new to DevOps or an experienced professional, learning how to use NGINX can help you take your career to the next level. I hope this post helps you with that. 

Thanks for reading this.

If you have an idea and want to build your product around it, schedule a call with [me](https://calendly.com/pragyanatvade).

If you want to learn more about DevOps and Backend space, [follow me](https://dev.to/pragyanatvade).

If you want to connect, reach out to me on [Twitter](https://twitter.com/pragyanatvade) and [LinkedIn](https://www.linkedin.com/in/pragyanatvade/).
From newbie to pro: Join me on the journey of becoming a skilled software engineer! 🚀
Tags: webdev, frontend, saas
Published: 2023-05-23 01:09:56


Ready to level up your software engineering skills? I'm here to guide you through every step of the way. Whether you're a complete beginner or already have some coding experience, this journey will transform you into a pro.

Follow me for practical tips, coding tricks, and insider knowledge that will fast-track your progress. We'll dive into fundamental concepts, explore different programming languages, and tackle real-world projects. No matter your starting point, I'll break down complex topics into simple, easy-to-understand explanations.

Together, we'll cover essential programming principles, data structures, algorithms, and design patterns. I'll introduce you to the latest tools, frameworks, and technologies used in the industry. You'll gain hands-on experience with projects that mirror real-world scenarios, allowing you to build a robust portfolio.

But it doesn't stop there. I'll also share career advice, interview tips, and strategies to excel in the software engineering field. We'll discuss best practices for collaboration, version control, and project management, ensuring you're well-prepared for professional success.

So, whether you aspire to develop cutting-edge web applications, dive into mobile app development, or explore the realm of artificial intelligence, join me on this exciting journey. Together, we'll unlock your full potential as a software engineer.

Stay tuned for regular updates, coding challenges, and opportunities to interact with a vibrant community of fellow learners. Let's embark on this transformative adventure together!
How to fix Dart Lang Error: RangeError (index): Index out of range: no indices are valid: 0
Tags: dart
Published: 2023-05-23 00:56:16

In C like languages like JS, its a common operation to assign a value to an array in a `for` loop at a given index using []. Like this:

![JS Forloop](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p935lk0ulnxyrt030ioj.png)

With Dart lang trying this:

![Dart Incorrect For Loop](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kutidet56zeguznzxr5c.png)

You get the error: `RangeError (index): Index out of range: no indices are valid: 0`

The solution is to use List's insert method `.insert(i, value)` or `.add(value)`.


![Dart Lang using add in for loop](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dw36h5kc792nli87k8p0.png)
Bandit Level 0
Tags: writeup, ctf, overthewire, bandit
Published: 2023-05-23 00:39:56

### Introduction

Bandit0 is the first level of the OverTheWire Bandit wargame. In this level, we will learn how to use SSH to connect to the remote server and gain access to the password for the next level.

### Steps

1. Open your terminal application.
2. Enter the following command to ssh into the remote server:

```
ssh bandit0@bandit.labs.overthewire.org -p 2220
```

1. You will be prompted to enter a password. Enter "bandit0" and hit enter.
2. You are now connected to the remote server and are able to execute commands.

Congratulations! You have successfully connected to Bandit0 using SSH and gained access to the next level.
AI Generated Dad Jokes Web App ✨ 😂
Tags: githubhack23, funny, react, javascript
Published: 2023-05-23 00:27:37

## What I built
A Web App that shows AI generated dad jokes, never repeating and only one a day.

### Category Submission:
Wacky Wildcards

### App Link
https://daily-dad-joke.vercel.app/

### Screenshots 
![The Daily Dad Joke Preview](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0qhk8xib10t24vnz7xqb.png)

### Description
Web App that shows daily AI-generated dad jokes, integrated with Supabase and OpenAI to to make them unique and never repeating. Uses Github Actions in order to deploy on Vercel and check dependencies. Developed using Github Codespaces!

### Link to Source Code
https://github.com/danicunhac/daily-dad-joke

### Permissive License
MIT

## Background (What made you decide to build this particular app? What inspired you?)
I used to tell a joke to finish every standup while at Adalo and I always had a hard time figuring out which joke to tell or to remember a good joke, that we call Dad Joke. My friend Jake Apple helped to figure out the final idea. 

### How I built it (How did you utilize GitHub Actions or GitHub Codespaces? Did you learn something new along the way? Pick up a new skill?)

I used Github Actions to build the CI pipeline for deploy on Vercel, in this process I learned YAML and how to setup a Github Action from scratch. Github Codespaces was used as the environment for development and I learned how to manage it.

### Additional Resources/Info
Was also a great experience and I could learn more about Github, Github Actions, Supabase and how to use OpenAI's API.
Thank you to the Github and DEV team for this opportunity! Now I have a good joke everyday for my team's standup.