teleren/devto huggingface dataset:
Performance Enhancements in Next.js 14
Tags: webdev, javascript, react, nextjs
Published: 2024-01-12 01:35:02

## Introduction
Next.js 14 introduces significant performance improvements, marking a substantial step forward in the framework's evolution. This article delves into the specifics of these enhancements, examining how they contribute to faster build times, more efficient server-side rendering, and improved client-side routing experiences.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ngsv65r5yyji9nzee93t.png)
## Faster Build Times in Next.js 14
Next.js 14 has optimized its build process, significantly reducing build times. This is achieved through advanced code splitting, smarter dependency management, and parallel processing. These improvements mean developers can enjoy a more efficient development workflow, especially in large-scale projects.

## Optimized Server-Side Rendering (SSR)
Server-side rendering in Next.js 14 has been enhanced to be more efficient. The SSR mechanism now utilizes smarter caching and streamlines data fetching processes, resulting in quicker page load times and better overall performance, particularly for dynamic and content-heavy applications.

## Enhanced Client-Side Routing
Client-side routing in Next.js 14 has been overhauled for speed and efficiency. The new routing mechanism employs intelligent prefetching strategies and route caching, ensuring smoother page transitions and a more responsive user experience.

## Impact on Web Performance
The cumulative effect of these enhancements is a notable improvement in web performance. Faster build times accelerate development, optimized SSR enhances user experience with quicker server responses, and improved client-side routing ensures a seamless navigation experience.

## Conclusion
The performance enhancements in Next.js 14 represent a significant upgrade to the framework. These advancements not only improve the development experience but also greatly enhance the end-user experience, making Next.js 14 a compelling choice for modern web development.

## References
To further explore these enhancements, refer to the [official Next.js 14 release notes and documentation](https://nextjs.org/docs), along with various technical blogs and articles that offer deeper insights into each performance improvement area.
Design and Share Custom Flyers with Our Free Online Flyer Maker
Published: 2024-01-12 01:32:28

Simplified offers a free online [flyer maker](https://simplified.com/create/flyer
) that allows you to design stunning flyers. Customize the layout, add your own text and images, and generate professional-looking flyers in minutes.
With our [free online flyer maker](https://simplified.com/create/flyer
), you can create custom flyers for any event or promotion. Choose from a variety of templates, add your own text and images, and make your flyers stand out with personalized designs.
Add Vitepress docs to existing project
Tags: javascript, vue
Published: 2024-01-12 01:31:13

Vuepress is an amazing tool to create fast documentation and it can live inside your main project with few configuration changes.

## Your existing project

For this example, we are going to set a static html project as the "parent" project, but it could use any technology without issues.

### Create the existing project

```
mkdir my-site
cd my-site
touch index.html
```

We can add a pretty simple html layout as an example using tailwindcss:

```html
<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
  <h1 class="text-3xl font-bold underline">
    Hello world!
  </h1>
  <a class="mt-6" href="/docs/index.html">Documentation</a>
</body>
</html>
```

## Install

Run: 

```
npm add -D vitepress
```

## Init Vitepress

Run:

```
npx vitepress init
```

As we are setting `/vitepress` as the vitepress dev directory, the configuration wizard should look like this:

```
┌  Welcome to VitePress!
│
◇  Where should VitePress initialize the config?
│  ./vitepress
│
◇  Site title:
│  My Awesome Project
│
◇  Site description:
│  A VitePress Site
│
◆  Theme:
│  ● Default Theme (Out of the box, good-looking docs)
│  ○ Default Theme + Customization
│  ○ Custom Theme
└
```

## Configuration changes

in `vitepress/.vitepress/config.mts` add this key-values:

```
base: '/docs/',
outDir: '../docs',
```

## Work in your documentation

Execute in your project root path:

```
npx vitepress dev vitepress
```

Go to `http://localhost:xxxx/docs` and make your required changes as you need.

## Build documentation for production

Run:

```
npx vitepress build vitepress
```

You can open your main project and link your docs with an anchor tag to `/docs/index.html`

## Bonus

Sometimes you would prefer to go directly to the docs and avoid the vitepress default homepage

Replace `index.md` content with:

```
<meta http-equiv="refresh" content="0;url=/docs/markdown-examples.html" />
```

It could redirect to any html generated page.

## Deploy

Take in mind that your entry point for this configuration should be `/`, that automatically is going to try to load `/index.html`, so it could probably require to adjust your output directory, eg: vercel settings


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r9ug8cvswz72wzuiy3mf.png)
State: The Ever Shifting Heart of React Component
Tags: javascript, react
Published: 2024-01-12 01:16:48


In the realm of React, components waltz across the screen, responding to user clicks, changing data, and painting a dynamic picture. What's the driving force? What breathes life into these digital performers? Enter state: the ever-shifting heart of the React component.


**What is State?**
State is a JavaScript object used to store and manage dynamic data in a React component. Picture state as a background dressing room. Here, components store their secret information, changing moods, and the data that defines their appearance and behavior. This room is constantly evolving, with props bringing in new information and user interactions triggering transformations. The component, ever attuned to its inner state, adapts its performance accordingly.

**What Is State Important?**
React applications often involve components that need to be updated or re-render based on user interactions or other events. State allows components to be dynamic and interactive. It enables them to:

- **Remember user choices:** Track selections, form inputs, and even shopping cart items.
- **Respond to events:** Change appearance on hover, toggle on click, and animate based on user actions.
- **Display real-time data:** Update counters, show live feeds, and react to changes from external sources.



**State In Action**

```
`// A simple counter component
const Counter = () => {
  const [count, setCount] = useState(0);

  const handleClick = () => setCount(count + 1);

  return (
    <div>
      <h1>{count}</h1>
      <button onClick={handleClick}>Click Me!</button>
    </div>
  );
};`
```
Here, the _Counter_ component uses the _useState_ hook to initialize and manage its state. The _count_ variable holds the current count value, and the _setCount_ function is used to update it. Each click on the button triggers the _handleClick_ function, which increments the count and re-renders the component with the updated value.



**Tips for Using State**

- **Keep state minimal:** Avoid storing unnecessary data in component state.
- **Use immutable updates:** Never directly mutate state; instead, create new state objects.
- **Embrace the context API:** For complex state management, consider using the context API to share state across components.
- **Debug carefully:** Use React DevTools to inspect state changes and identify potential issues.

By finessing state, you can create components that dance and respond to user interaction, thus transforming your React applications into mesmerizing digital experiences. So, dive into the realm of state, understand its rhythm, and watch your components come alive!
Android Compose API is pretty good
Tags: android, compose, flutter
Published: 2024-01-12 01:06:37

Both Android Compose and Flutter are UI frameworks used for building mobile applications, but they have some key differences:

**Android Compose:**

Native Android development: Focuses on native Android development, providing tight integration with Android APIs and tooling.
Kotlin-based: Uses Kotlin, a statically typed language, which can be appealing for developers familiar with the language.
Declarative syntax: Uses a declarative syntax where you describe the UI state and Compose takes care of rendering it, leading to less boilerplate code and potentially cleaner code.
Still in its early stages: While stable for production use, Compose is still evolving and adding features, so some functionalities might be missing compared to Flutter.

Both Android Compose and Flutter are UI frameworks used for building mobile applications, but they have some key differences:

Android Compose:

Native Android development: Focuses on native Android development, providing tight integration with Android APIs and tooling.
Kotlin-based: Uses Kotlin, a statically typed language, which can be appealing for developers familiar with the language.
Declarative syntax: Uses a declarative syntax where you describe the UI state and Compose takes care of rendering it, leading to less boilerplate code and potentially cleaner code.
Still in its early stages: While stable for production use, Compose is still evolving and adding features, so some functionalities might be missing compared to Flutter.

**Flutter:**

Cross-platform development: Aims for cross-platform development, allowing you to build the same app for Android and iOS (and web and desktop) with a single codebase.
Dart-based: Uses Dart, an object-oriented language created by Google specifically for Flutter.
Imperative UI: Uses an imperative approach to UI development, which might be more familiar to some developers but can lead to more boilerplate code compared to Compose.
Mature and feature-rich: More mature and established than Compose, with a wider range of features and widgets available.

Cross-platform development: Aims for cross-platform development, allowing you to build the same app for Android and iOS (and web and desktop) with a single codebase.
Dart-based: Uses Dart, an object-oriented language created by Google specifically for Flutter.
Imperative UI: Uses an imperative approach to UI development, which might be more familiar to some developers but can lead to more boilerplate code compared to Compose.
Mature and feature-rich: More mature and established than Compose, with a wider range of features and widgets available.

References:

* [ https://randomdraw.hashnode.dev/android-compose-and-flutter](https://randomdraw.hashnode.dev/android-compose-and-flutter)
* [https://androidauthority.dev/android-compose-api-flutter](https://androidauthority.dev/android-compose-api-flutter)
SonarQube Community Edition in a Docker Container on Mac M1
Tags: docker, code, codequality, community
Published: 2024-01-12 01:02:23



### Requirements

- Docker

If you don't already have docker installed, this link has more information for Mac and Windows. [docker](https://docs.docker.com/desktop/)

### Start container use:

I am using a Mac with an Apple M1 chip, so I was successful using this docker-compose:

1. Clone repo https://github.com/kevinlupera/SonarQube-docker-compose
2. Move into repository
`cd SonarQube-docker-compose`
3. Start Containers
`docker-compose up`

### Stop container use:

`Control + C` in this terminal or `docker-compose down`

## Scanning Your Code

Before scanning your code with SonarQube, you need to install SonarScanner on the operating system where your project is located.

For Mac, you can follow these steps:
`brew install sonar-scanner`

Once you have installed the **SonarScanner**, you can proceed with the following steps:

1. Go to the SonarQube URL (http://localhost:9000).
2. Log in to your SonarQube instance using the default credentials (login/pwd: admin).
3. Navigate to the Projects page.
4. Click on the “Create Project” button and choose the “Manually” option.
5. Fill in the required fields with relevant project information.
6. Generate a token and click “Continue.”
7. Select the appropriate option for your project’s language (e.g., “Other” for JS, TS, Go, Python, PHP).
8. Choose your operating system.
9. You will see a code snippet that represents the command to run the scanner. It will look similar to the following:


```
sonar-scanner \
-Dsonar.projectKey=PROJECTKEY\
-Dsonar.sources=. \
-Dsonar.host.url=http://localhost:9000 \
-Dsonar.login=TOKEN
```

Once the analysis is complete, return to the SonarQube server.
Why I Built a Vscode Extension
Tags: vscode, tools, ui, design
Published: 2024-01-12 00:40:11

A couple of times, we spend time tweaking VScode themes. It could be fun but sometimes tiring and time-consuming. I have travelled this road many times but went a little over the board this time, and why would I do that?

## The need for a suitable theme
I have enjoyed using wonderful themes, from Material Theme to Monokai. I always wanted to change something in every theme, especially the colours to resonate with me and the comfort of my eyes.

## A little adventure wouldn't hurt
During the close of the year, 2023 I decided to do something a little different from my usual development. I considered doing some design tasks, colour combinations and colour effects. It was nice to put it into practice. So boom, I built and published my Vscode theme extension.

## The need to give back to the community
The tech community has always been awesome in open-source and sacrificial endeavours. Almost everyone has it in mind to give back to this wonderful community of love.

## Final note
I enjoyed designing the theme. Some other time I will write about the process.
Thanks for reading and I hope you enjoyed this episode 🙂. To install on Vscode, search for `Dukana`.
Or check the [marketplace](https://marketplace.visualstudio.com/items?itemName=lekiagospel.dukana&ssr=false#overview). 
Be kind to support my endeavours.
Using Async/Await in JavaScript for Asynchronous Calls
Tags: javascript, beginners, programming, webdev
Published: 2024-01-12 00:31:18

## Introduction

In traditional JavaScript, handling asynchronous calls could be tedious and complicated. Developers had to use callback functions or promises to handle the asynchronous code. However, with the introduction of Async/Await, handling asynchronous code has become much easier and more efficient. It is a newer syntax introduced in ES2017 that allows developers to write asynchronous code in a synchronous manner. In this article, we will discuss the advantages, disadvantages, and features of using Async/Await in JavaScript for asynchronous calls.

## Advantages

1. **Simplified Syntax**: The syntax of Async/Await is more straightforward and readable than traditional JavaScript. It allows developers to write asynchronous code in a sequential manner, making the code more organized and maintainable.

2. **Error Handling**: Async/Await allows for better error handling compared to traditional JavaScript. In case of multiple asynchronous calls, if an error occurs, it can be caught and handled easily.

## Disadvantages

1. **Browser Support**: Async/Await is a relatively new feature, and hence, it is not supported by older browsers. Developers may need to use transpilers or polyfills to make it work in older browsers.

2. **Not Suitable for Long-Running Operations**: Async/Await is not suitable for long-running operations as it can only handle one asynchronous call at a time. This may affect the performance of the application.

## Features

1. **Async Functions**: The `async` keyword is used to mark a function as asynchronous, meaning it will always return a promise.

2. **Await Operator**: The `await` keyword is used to pause the execution of the function until the asynchronous code is resolved. This makes the code behave synchronously.

### Example: Fetching Data with Async/Await

Here is a simple example of using Async/Await to fetch data from an API:

```javascript
async function fetchData(url) {
  try {
    const response = await fetch(url);
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('Error fetching data:', error);
  }
}

fetchData('https://api.example.com/data');
```

This example demonstrates how the async and await keywords simplify handling asynchronous HTTP requests.


## Conclusion

In conclusion, Async/Await has made handling asynchronous calls in JavaScript much more manageable and efficient. It simplifies the syntax, allows for better error handling, and makes the code more readable. However, developers need to keep in mind the limitations and browser support before implementing it. Overall, Async/Await is a powerful feature that has greatly improved the development process in JavaScript.
RECOVER YOUR STOLEN BITCOIN HIRE / ADWARE RECOVERY SPECIALIST
Published: 2024-01-12 00:09:02

Bitcoin, the world's foremost cryptocurrency, has revolutionized the way we perceive and use money in the digital age. With its decentralized and secure nature, Bitcoin offers individuals unprecedented control over their finances and transactions. However, as with any digital asset, the possibility of loss or theft exists, making the need for effective Bitcoin recovery services increasingly crucial.

As the popularity of Bitcoin continues to soar, so does the risk of potential loss or theft. With the untraceable nature of Bitcoin transactions, recovering lost or stolen funds can be a daunting task for individuals who lack the technical expertise or resources to do so themselves. This growing demand has fueled the emergence of specialized Bitcoin recovery services like Adware Recovery Specialist. Adware Recovery Specialist is a leading Bitcoin recovery service that aims to assist individuals in reclaiming their lost or stolen cryptocurrency. With their team of skilled experts and cutting-edge technology, Adware Recovery Specialist offers a comprehensive solution to those who find themselves in the unfortunate situation of losing access to their Bitcoin funds.

Utilizing a combination of technical expertise, advanced tools, and meticulous investigation, Adware Recovery Specialist endeavors to trace and recover lost or stolen Bitcoin. Their team employs various methods, including forensic analysis, blockchain exploration, and cooperation with law enforcement agencies, to maximize the chances of a successful recovery. Contacting Adware Recovery Specialist brings numerous advantages to individuals seeking to reclaim their lost Bitcoin. Their experienced team not only possesses the necessary skills and knowledge but also understands the emotional toll of losing substantial financial assets. Moreover, their commitment to transparency and customer satisfaction guarantees a seamless and trustworthy recovery process. To save yourself from further stress and loss. Contact the information below.

Website: adwarerecoveryspecialist.expert

Email: Adwarerecoveryspecialist@auctioneer. net
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r2gyvm8teisdjzlt9bac.jpg)
Web Development Journey: Overcoming Misleading Advice?
Tags: discuss, codenewbie, beginner
Published: 2024-01-12 00:00:00

---
published_at : 2024-01-12 00:00 +0000
---
Reflecting on your web development journey, what's the most misleading or detrimental piece of advice you've ever received? How did it impact your work, and what valuable lessons did you learn from overcoming or debunking that advice?
<br>
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 *%}*
Tech Certifications in 2024?
Tags: devresolutions2024, discuss
Published: 2024-01-12 00:00:00

---
published_at : 2024-01-12 00:00 +0000
---
What tech certifications are you considering for the upcoming year, and how do you envision them shaping your professional journey?
<br>
Follow the DEVteam for more discussions and online camaraderie!
{% embed https://dev.to/devteam %}
Utility classes make global scope local
Published: 2024-01-15 11:33:31

---
title: Utility classes make global scope local
published: true
date: 2024-01-12 00:00:00 UTC
tags: 
canonical_url: https://www.oliverdavies.uk/archive/2024/01/12/utility-classes-make-global-scope-local
---

In my [recent pair programming session](https://www.oliverdavies.uk/archive/2024/01/09/using-tailwind-css-is-a-great-way-to-learn-css), building components with Tailwind CSS, we experienced another benefit of styling with utility classes.

CSS usually has a global scope, but utility classes change it to a local scope.

For example, having a card component with a `card` class on it, any changes to the styles will affect all instances of any card component that uses the `card` class.

How do you know you haven't broken something in a different component without re-checking every component manually?

How do you easily modify or extend it as requirements change or add more card types?

If you need to make a change in the future, you're likely to add more styles and modifiers and add to the CSS, causing it to grow rather than change the existing styles - in fear of breaking something else.

With utility classes, such as the ones generated by Tailwind CSS, you can see and understand what styles are applied to the HTML.

This also makes it easier to change, and because the classes and styles are added directly to that element, you don't need to worry about breakages elsewhere.

If you need to add a new class to that card type, you can do so knowing that it won't affect all card styles globally in your application - just the one you're working on.

This means you can change things more easily in the future but also work quicker now as you don't need to worry about all that additional context.

You can focus on what you're working on right now.

 P.S. Are you still using Drupal 7 and don’t know what’s involved to upgrade to Drupal 10? [Book a Drupal 7 upgrade consultation call](https://www.oliverdavies.uk/call) or [an upgrade roadmap](https://www.oliverdavies.uk/drupal-upgrade).
Host your .Net Core API on local machine
Tags: hosting, devtunnels, tcpholepunching, directconnect
Published: 2024-01-11 23:52:00

Use the **[dev tunnels](https://learn.microsoft.com/en-us/aspnet/core/test/dev-tunnels)** feature of Visual Studio 2022 to enable ad-hoc connections between machines.


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


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


* Learn more about [TCP hole punching](https://en.wikipedia.org/wiki/TCP_hole_punching), the technique to connect 2 machines via internet without the need for middle server.
* Also, Ngrok, a free/paid [service](https://ngrok.com/) for the same purpose.