teleren/devto huggingface dataset:
Server-Side Rendering with Next.js: Improving Performance and SEO
Tags: nextjs, serversiderendering, webperf, react
Published: 2023-08-08 09:00:00

Server-side rendering (SSR) has become an essential technique for building fast, search engine optimised web applications. In this post, I will try to explore how to leverage SSR in Next.js to boost performance and SEO. 


### What is Server-Side Rendering?
The browser receives a simple HTML page and JavaScript code when using typical client-side rendered apps. After that, the JavaScript retrieves data from APIs and produces the page. As a result, initial load times are slower and SEO crawling is unreliable. 

Before transmitting the page to the client, the server prepares a completely rendered HTML page using SSR. This allows the website to load faster and for search engine crawlers to see it correctly. SSR is supported by Next.js out of the box.


### Faster Initial Page Loads
Pages rendered by Next.js on the server skip the initial empty loading state. The HTML is fully rendered, so the browser can start processing the page immediately. 

For example, here is how we can use `getServerSideProps` in Next.js to pre-render a page with data:

```jsx
export async function getServerSideProps(context) {

  const res = await fetch(`https://.../data`) 
  const data = await res.json()

  return {
    props: {
      data 
    }
  }

}

export default function Page({ data }) {
  // data is pre-rendered
} 
```


### Consistent SEO Crawling
Search engine crawlers receive a fully rendered HTML page from Next.js rather than having to wait for JavaScript execution. This means pages have consistent SEO regardless of JS complexity.

We can verify rendering with `getInitialProps`:

```jsx
export async function getInitialProps(context) {

  return {
    props: {
      title: 'My SEO Optimized Page' 
    }
  }

}

export default function Page(props) {
  return <h1>{props.title}</h1>
}
```

The page title will be present in the generated HTML and readable by crawlers.


### Scalable Performance
Next.js offers multiple forms of SSR to fit different performance needs. 

- `getServerSideProps` - Execute code on every request
- `getStaticProps` - Build HTML at build time
- `getInitialProps` - Legacy option

Choosing the best technique is dependent on the frequency and volume of your material.


In conclusion, leveraging Next.js SSR is an effective technique to improve website speed and SEO. The ability to pre-render pages enables performance advantages and SEO capabilities that other frameworks lack.
How to Enable Virtual Scrolling in Blazor Scheduler Component
Tags: webdev, blazor, dotnet, csharp
Published: 2023-08-08 08:45:50

Learn how to enable virtual scrolling in the Syncfusion Blazor Scheduler component. This video demonstrates how to use virtual scrolling and virtual scrolling templates. 

The Scheduler is a fully featured calendar component that allows you to manage your time efficiently. It facilitates easy resource scheduling and appointment rescheduling through drag and drop, resizing actions, and more. 

A wide variety of built-in view modes are available: day, week, workweek, month, agenda, month-agenda, year, and timeline. Easily configure each individual view with view-specific options. 

Users can create and edit events and appointments in line with a single click on the schedule cells or on an appointment’s subject. Pressing Enter after the new subject text is typed in the inline text box will update and save the appointment. 

**Product overview**: https://www.syncfusion.com/blazor-components/blazor-scheduler

**Tutorial video**: https://www.syncfusion.com/tutorial-videos

{% youtube yAtUHA2CieI %}
Check database information by laravel command...
Published: 2023-08-08 08:24:33

If you want to see the details of your database, you just need to type this on your terminal: 
```
php artisan db:show
```
It will show the basic configuration of your database which is attached on your projects. As well as, you can see total number of tables and connections. 
Now, you may have more than one database connected with your projects. If you wanna see a certain database details, you need to type

```
php artisan db:show --database=sqlite
```
or
```
php artisan db:show --database=pgsql
```

Thanks. Happy coding!!
💻 How to ensure a #secure work environment for your employees?
Tags: cybersecurity, remote, programming, webdev
Published: 2023-08-08 08:23:43

🔒 Empower your #remote workforce with robust #cybersecurity measures from Devler.io. Our article offers practical tips and #recommendations to keep your remote #team safe and secure. Check out [the link 🛡️](https://devler.io/blog/implementing-robust-cybersecurity-measures-for-remote-workforce)
It's done! Rust-like API in your JavaScript code
Tags: javascript, programming, opensource, productivity
Published: 2023-08-08 08:08:11

Hello, my name is Vitali. I'm love to learning things. A few months ago I'll start learning Rust and I was impressive. The language with minimum undefined behavior. During my learning things I was found that unwrapping the `Result` and `Option` is very useful when programmer writes the code. Of course, this approach have a 1 negative point - unwrapping. It's make the reader(code reviewer) to understands what is you code does, why you are unwrapping the result, etc. Okay, so what is the reason to create a package with same approach? The answer is - undefined behavior!

During my career I'm not only to write some code, but also writes automated tests. During the tests we need to say that some thing will works on future and creates a caveats, mocks and stubs to make e2e stuff testable.

Of course this hell is made me motivation to avoid `try/catch/finally`, because we hired juniors who is not skilled to cover all possible cases.

## So, how to start?

Install the dependency:

`npm i @rslike/std` and here you go!

In your JS/TS file you can writes something like this:
``` ts
import {Ok, Some, Err, None} from '@rslike/std';

const a = Ok(123);
const mapped = a.map(res => String(res));

console.log(mapped) // "123"
```

easy, isn't?

Yes API is similar from Rust as much as possible

Here is a few list of implemented API for Option and Result

- expect(reason)
- unwrap
- unwrapOr
- unwrapOrElse
- map
- mapOr 
and much more

Full list available in Wiki: https://github.com/vitalics/rslike/wiki

## Will it helps me?

Not sure that it will helps in your case, but we reduce bugs at 10% in general across all 5 projects.

## What's next?

I have a plans to develop this library. Right now test coverage is about 80% and not all cases and statements are covered.

UPD: now test coverage is 100%

Also I have a plans to integrate with Node.js native bindings , WebAPI and fetch. Who knows what will be next?🤔
📖 | Studying the Big Book Of Rules before Sending On-Topic Messages why you should read the rules
Tags: dasc, recentarticle
Published: 2023-08-08 08:05:57

DASC©️ has a Whole Bunch Of Rules On The Google Space Community Which is why You Should Follow them at all times! 

> Imagine just Joining a Community With No Rules Even Worst a Community that has a bunch of Rule Violators on them 

And DASC©️ isn’t just like other Communities… Discord Account Support Corporation©️ is Permitted to Ensuring that Everyone Creates Messages That are On-Topic & Related to DASC this Is Simply just like Wikipedia having their Own “ No Advertising Rule “ & We are Completely Not allowing advertisements as well you can advertise on a whole Bunch Of Other Platforms BUT NOT! DASC©️
Retrieving User Information from Jira using Groovy Script
Published: 2023-08-08 08:05:25

In today's interconnected tech ecosystem, automation and integration between platforms are of paramount importance. One such useful integration point is Jira, a popular issue and project tracking software developed by Atlassian. Developers often need to interface with Jira's API to automate or customize specific workflows. 

In this article, we'll dissect a Groovy script snippet that makes an HTTP request to Jira's API to retrieve user information based on a user's email or name and then extract the `accountId` from the resulting JSON.

#### **The Script Snippet:**

```groovy
def userResponse = httpRequest(
    authentication: 'JiraAuth',
    httpMode: 'GET',
    url: 'https://your-space.atlassian.net/rest/api/2/user/search?query=USER_EMAIL_OR_NAME'
)
def user = readJSON text: userResponse.content
def accountId = user[0].accountId
```

#### **Understanding the Snippet:**

**HTTP Request**:

   The `httpRequest` function sends an HTTP GET request. Let's break down the parameters passed to it:

   - `authentication: 'JiraAuth'`: This indicates that the request requires authentication, and 'JiraAuth' would be a predefined authentication method, possibly a token or user credentials specific to Jira.
   
   - `httpMode: 'GET'`: This parameter specifies the type of HTTP method being used. In this case, it's a 'GET' request.
   
   - `url`: The provided URL is an endpoint of the Jira API that allows searching for users based on a query which is expected to be either the email or name of the user.

**Reading the Response**:

   The `readJSON` function is used to parse the JSON response from the HTTP request. This parsed JSON is then stored in the `user` variable.

   `userResponse.content`: This gets the actual content of the response, which is expected to be in JSON format.

**Extracting the accountId**:

   `user[0].accountId`: The parsed JSON is expected to be an array of users. This line extracts the `accountId` of the first user in the list.

#### **Practical Use Cases:**

**User Verification**: By searching for users based on their emails or names, developers can verify if a particular user exists in the Jira system or not.

**User Management Automation**: By automating the process of fetching user details, larger scripts or programs can be built to manage users, such as assigning them to projects, groups, or roles based on certain criteria.

**Audit and Reporting**: This script can be incorporated into a more extensive system that audits user activities, checks for inactive users, or generates reports based on user interactions with Jira.

#### **Conclusion**:

The provided Groovy script snippet is a straightforward and effective way to communicate with Jira's API to retrieve user details. While it seems simple, the concept can be expanded and integrated into a wide variety of tasks and automations, making the developer's life easier and more efficient. If you're looking to integrate Jira with other platforms or automate specific Jira workflows, mastering such scripts is an excellent place to start.
𝐌𝐢𝐜𝐫𝐨 𝐟𝐫𝐨𝐧𝐭𝐞𝐧𝐝𝐬: 𝐁𝐮𝐢𝐥𝐝𝐢𝐧𝐠 𝐢𝐧 𝐏𝐮𝐛𝐥𝐢𝐜 𝐟𝐫𝐨𝐦 𝐒𝐜𝐫𝐚𝐭𝐜𝐡
Tags: microfrontend, react, angular, vue
Published: 2023-08-08 07:53:22

Micro frontends are one of the hottest web development trends right now, allowing teams to break apart monolithic codebases into independent features.

I'm excited to announce that over the next few weeks, I'll be sharing my hands-on journey of building a micro frontends architecture from scratch!

Follow along as I tackle topics like:
👉 Micro frontends basics - what are they and when to use them
👉 Implementing micro frontends - code splitting, routing, and integration
👉 State management across micro frontends
👉 Testing strategies for micro frontends
👉 Deployment and scaling considerations
👉 Lessons learned - the good, the bad, and the gotchas

I'll be documenting my successes and failures, showing real code examples, pitfalls to avoid, and tips I pick up along the way.

It will be a transparent, no-holds-barred look at the micro frontends approach from the trenches.

Whether you're already using micro frontends or just curious about them, I think you'll find value in coming along for the ride. There will be plenty of learning for developers of all levels!

Stay tuned over the next few weeks as I build out this micro frontends application in the open. Click follow so you don't miss an update!

Let me know if you have any other topics you'd like me to be sure to cover related to micro frontends. I'm excited to dive in!
How to Download Files Using Playwright in Typescript
Tags: playwright, playwrightautomation, playwrightdownloadfile
Published: 2023-08-08 07:43:09

Are you struggling with downloading files using Playwright in your Typescript projects? In this guide, I will walk you through a step-by-step solution to tackle this issue.

Specifically, we’ll focus on scenarios where there is a download button in the browser, and upon clicking it, a new tab opens to start the download. After the download is completed, the new tab closes automatically.

**The Download Button**

The first step is to create a function that clicks the download button and waits for the new tab to open. I will use Playwright waitForEvent method to handle this:

```
async function clickDownloadButton(){
    const [newTab] = await Promise.all([
        this.page.waitForEvent("popup"),
        this.waitAndClick(this.elements.button_downloadButton)
    ]);
    return newTab;
}
```

In the above function, we utilize waitForEvent("popup") to wait for the new tab to open. Once the download button is clicked, we capture the new tab object in the newTab variable and return it.

**Handling the Download Event**

Next, we need to handle the download event in the newly opened tab. The following code snippet does just that:

```
const newTab = await dashboard.clickDownloadButton();
const [download] = await Promise.all([
    newTab.waitForEvent("download")
]);
const path = download.suggestedFilename();
await download.saveAs(path);
```

Here, we call the clickDownloadButton() function and get the new tab object in the newTab variable. Then, we use waitForEvent("download") to wait for the download to complete. Once the download event is triggered, we obtain the suggested filename using download.suggestedFilename(). Finally, we save the downloaded file using download.saveAs(path)

**Summary**

With the provided code snippets, you should now be able to download files successfully using Playwright in your Typescript projects. This approach ensures you handle the download process effectively, even when dealing with new tabs and asynchronous events.

Feel free to try this solution in your projects and let me know how it works for you. Happy coding!
My PHP login page is not working.
Published: 2023-08-08 07:33:12


My PHP login page is not working. Registered data is captured on the database. But once I put my login details and click login. The login page just refreshes and nothing more. It doesn't give any error message.

The same codes used to work fine on my other works. BUT All them stopped working now.

I have tried uninstalling the current version of XAMP I'm using and installed previous version yet, it's still not working. 

Please I need help. I have been stuck in this for a week now. Please help me.
Gamedev.js Weekly #500: half a thousand weeks of web gamedev
Tags: gamedev, newsletter, anniversary, gamedevjs
Published: 2023-08-08 07:31:40

---
title: Gamedev.js Weekly #500: half a thousand weeks of web gamedev
published: true
date: 2023-08-08 07:22:17 UTC
tags: gamedev,newsletter,anniversary,gamedevjs
canonical_url: https://enclavegames.com/blog/gamedevjs-weekly-500/
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5pjn71a851avajsvppyp.png
---

It’s been five hundred weeks, or 3500 days since the beginning of January 2014 when I started publishing the [Gamedev.js Weekly](https://gamedevjsweekly.com/) newsletter. Time flies so fast!

It [began](https://us3.campaign-archive.com/?u=4ad274b490aa6da8c2d29b775&id=339d8aa56d) for the same reason [js13kGames](https://js13kgames.com/) was created in 2012: there was no such thing at the time, so I decided to start one myself. I know it’s not the best newsletter in the world, and the subscriber count is not that impressive given the time since inception (about ~7500 right now), but it’s still being sent! Every single week, every single Friday (though in those years I might’ve sent it two or three times on Saturday), no matter the conferences, holidays, or other events. Every. Single. Week. Times. Five. Hundred.

I love the community behind it: almost in every issue I’m publishing some content that was suggested by the readers. Most of the emails with a link starts with something along the lines of ”_hey, I’m a big fan of what you’re doing, been subscribed since a few years now, here’s my little something I’d like to share with the rest of the readers_”. Sometimes it’s tough to be consistent, especially in the span of almost ten years now, but knowing that there are genuine people enjoying an email in their inbox once a week help me keep going. **Thank you!**

![Gamedev.js Weekly t-shirt](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p0hlmovrxhzdfp2tvluu.png)

Ps. If you’d like to **support** what I’m doing, you can [buy this fancy t-shirt](https://gamedevjs.myspreadshop.com/gamedevjs+weekly-A64cc143f230a027f2744a796) in the **Gamedev.js Shop** my wife Ewa designed for this occasion, [donate via PayPal](https://paypal.me/end3r), or [get in touch](https://enclavegames.com/contact/) if you’d prefer crypto or bank wire. Every bit helps, especially now in those difficult times. Cheers!
🚀 How i Resolved the "Too Many Re-Renders" Error in React by Using Arrow Functions!
Tags: webdev, react, javascript, beginners
Published: 2023-08-08 07:10:30

Hey there, fellow developers! 👋 Recently, while working on a project, I encountered an error in my React application that led to an infinite loop in the rendering cycle. The error message was "Too many re-renders." After sometime, I discovered that the error was caused by a common mistake: not using an arrow function inside the onClick event handler.

![Reactjs error too many re-renders solution](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/52pvy9c3odl5wjmarxbi.png)

## Understanding the Error 🔍
The "Too many re-renders" error is a frequent stumbling block in React development. It occurs when a component's state or props are modified within a render cycle, causing an endless loop of renders. This error often results from unintentional side effects triggered during rendering, such as calling a function that updates state or triggers re-renders.

A crucial aspect contributing to this error is the use of non-arrow functions directly inside onClick event handlers. These functions are recreated with each render, leading to unexpected behavior. If such a function modifies state or prop values, it can inadvertently trigger further renders, resulting in the error.
**Non-Arrow Functions(or functions with unstable state management)  in onClick Handlers**
Let's delve into how the situation arises:

1. Component Renders: The component renders due to changes in its state or props.
2. onClick Handler: Inside the render, you attach a non-arrow function to the onClick handler. Since the function is recreated with each render, it's technically a new function instance.

3. Function Execution: When the element with the onClick handler is clicked, the function executes. If this function involves state changes (like setState in React), it triggers a component update.

4. Component Re-Renders: The state change caused by the function triggers a re-render of the component.

5. Repeat: Steps 2-4 repeat in a loop because the non-arrow function is created anew in each render and causes a re-render when executed.


## Solution 💡:

![onClick function with arrow function set state](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mzgw2mrv416ocje0simu.png)
The simplest and often recommended solution is to use an arrow function for the onClick handler. Arrow functions preserve the context of the surrounding scope, ensuring consistency across renders. This mitigates the risk of unnecessary re-renders and helps in avoiding the error. For instance, using this keyword inside the function maintains its expected context.

## Personal Experience 🎉
As a beginner in react this solved my error but still can't completely understand state management so, If you have insights or suggestions related to this topic,
Please feel free to share them in the comments section👨‍💻.
Choosing the Right Database: Exploring SQL and NoSQL for Web Applications
Published: 2023-08-08 07:01:08

In the fast-paced world of web development, selecting the right database is a pivotal decision that can impact the success and performance of your application. This blog aims to guide you through the critical choice between SQL and NoSQL databases, shedding light on their respective strengths, weaknesses, and ideal use cases.

In the realm of SQL databases, the relational model takes center stage. These databases, such as MySQL, PostgreSQL, and Microsoft SQL Server, are built on structured schemas that ensure data integrity and consistency. This makes SQL databases particularly suitable for applications where transactional reliability is paramount, such as financial systems or online shopping platforms. However, the rigidity of SQL schemas can sometimes hinder adaptability, and scaling these databases horizontally might pose challenges.

On the other hand, the NoSQL world offers a refreshing departure from structured data storage. Databases like MongoDB, Cassandra, and Redis embrace flexibility, allowing you to store data in varying formats. NoSQL databases excel in scenarios demanding scalability and performance, making them an excellent fit for applications with massive user bases or rapidly changing data needs. Nonetheless, this newfound freedom can come at the cost of certain ACID properties, potentially impacting data consistency and integrity.

Deciding between SQL and NoSQL hinges on factors like data structure, query requirements, scalability, and the expertise of your development team. The decision isn't binary; instead, it demands careful consideration of your application's unique characteristics and objectives. By delving into real-world use cases and drawing parallels between database types, you'll be empowered to make an informed choice that aligns with your project's needs.

In conclusion, the choice between SQL and NoSQL databases for web applications isn't a matter of one being definitively superior to the other. It's about understanding your application's requirements and striking a balance between data reliability, flexibility, and performance. Armed with insights from this exploration, you'll be well-equipped to navigate the dynamic landscape of web development and select the database that best serves your web application's ambitions.
Future-Proofing Your Coding Odyssey: Innovation or Stability?
Tags: codenewbie, beginners, discuss, career
Published: 2023-08-08 07:00:00

_Welcome to "Discover Your Code," guided by our official DEV moderator, Sloan the Sloth 🦥. This series is designed to help aspiring coders and students explore the coding universe, ignite their passion, and find their ideal career paths._

Today's question is:

> Does your coding heart yearn for the latest technologies or the tried-and-true foundations?

Responses from newbies and experienced devs alike are encouraged in order to broaden our horizons and showcase different POVs.

Follow the [CodeNewbie Org](https://dev.to/codenewbieteam) and [#codenewbie](https://dev.to/t/codenewbie) for more discussions and online camaraderie!

*{% embed* https://dev.to/codenewbieteam *%}*