teleren/devto huggingface dataset:
How to support dark mode in Next.js App Router with almost no "use client"🌞🌜
Tags: nextjs, css, tailwindcss
Published: 2023-07-25 02:45:32

## Demo
[https://next13-dark.vercel.app](https://next13-dark.vercel.app)
The version of Next.js is 13.4.10.

## Conclusion

- Saving and reading the current theme using the [cookies](https://nextjs.org/docs/app/api-reference/functions/cookies)
- The theme change using the [Server Actions](https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions)
- Thematic styles can be set with CSS Modules or Tailwind CSS

## Step 1: Enable `Server Actions`
```js
// next.config.js

/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    appDir: true,
    serverActions: true // Add,
  },
};

module.exports = nextConfig;
```
## Step 2: Set the current theme to `html` tag
```tsx
// layout.tsx

import { cookies } from "next/headers";

import ThemeToggle from "./_components/themeToggle"

export default function RootLayout({ children }: { children: React.ReactNode }) {
  const defaultTheme = "light";
  const cookieValue = cookies().get("theme")?.value || "";
  const isTheme = cookieValue === defaultTheme || cookieValue === "dark";
  const theme = isTheme ? cookieValue : defaultTheme;

  return (
    <html className={theme}>
      <body>
        <ThemeToggle currentTheme={theme} />

        {children}
      </body>
    </html>
  );
}
```
## Step 3: Create a button to switch themes
```tsx
// themeToggle.tsx

"use client"; // Required to set the onClick.

import { setTheme } from "./action";

export default function ThemeToggle({ currentTheme }: { currentTheme: string }) {
  const changeTheme = () => setTheme(currentTheme);

  return (
    <button onClick={changeTheme}>
      {currentTheme === "light" ? "Dark" : "Light"}
    </button>
  );
}
```
## Step 4: Create a `Server Actions` to change the theme
```ts
"use server";

import { cookies } from "next/headers";
import { revalidatePath } from "next/cache";

export const setTheme = (currentTheme = "") => {
  const newTheme = currentTheme === "light" ? "dark" : "light";
  cookies().set("theme", newTheme); // This method can only be used with `Server Actions` or `Route Handlers`.
  revalidatePath("/");
};
```
## Step 5: Change styles by theme
```scss
// globals.scss

html {
  background: white;
  color: black;
  &.dark {
    background: black;
    color: white;
  }
}

a {
  color: steelblue;
  html.dark & {
    color: skyblue;
  }
}
```
For Scss Modules.
```scss
// page.module.scss

.wrap {
  background: white;
  color: black;
}

:global(html.dark) {
  .wrap {
    background: black;
    color: white;
  }
}
```
WAX Hello World Contract
Tags: wax, cpp, tutorial, blockchain
Published: 2023-07-25 01:31:05


## Introduction

In this section, we will go over using the tools we covered in the previous sections to create a new Smart Contract, and compile it.

## Connecting to Docker

We previously created a Docker container. If you have been following along, you may already have a terminal that is connected to your environment. If not, let’s `sh` into the Docker container as we did before:

```bash
docker run -it --name wax-tutorial--publish 8888:8888  -v $(pwd):/wax waxteam/dev bash
```

## Creating a WAX project

Now that we are in the container, we can create a new project. We’ll call this one hello-world:

```bash
cd wax # This is the folder mount point we specified in the above commands
eosio-init -project helloworld
```

The three important files here are:

- `helloworld/include/helloworld.hpp` - contains the definitions for our contract
- `helloworld/src/helloworld.cpp` - contains the implementation of our contract
- `helloworld/ricardian/helloworld.contracts.md` - contains the Ricardian contract - human readable version of the methods our contract exposes to the world

## Compiling the project

Let’s ensure that our environment is setup correctly by compiling this Smart Contract. Typically, I will use a one-liner to compile since we need to change directories to compile the code:

```bash
( cd helloworld/build ; cmake .. ; make )
```

When this command completes, you will have successfully compiled the contract!

We won’t bother publishing this contract since it doesn’t do much, but now we are ready to get into the details of WAX Smart Contract development!

## Wrapping up

When we were building Dark Emblem NFT, this was our humble starting point. Many projects just begin by making sure the basics are understood and taken care of before moving onto more complex functionality.

Next post: [WAX Guestbook Smart Contract](https://dev.to/idmontie/wax-guestbook-smart-contract-59ad)

## E-book

Get this entire WAX tutorial as an [e-book on Amazon](https://amzn.to/3ZjwaK7).

## Additional links

- [Github Hello World example](https://github.com/CapsuleCat/wax-nft-tutorial/tree/main/helloworld)
- [WAX Developer Portal](https://developer.wax.io/)
- Photo by [Pablo Gentile](https://unsplash.com/@polhow?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com/photos/3MYvgsH1uK0?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)
Navigating the Complexities of Web3 Raw Blockchain Development Essential Skills and Pain Points
Tags: webdev, career, blockchain, database
Published: 2023-07-25 02:43:49

We wrote [this article](https://medium.com/weavechain/navigating-the-complexities-of-web3-raw-blockchain-development-essential-skills-and-pain-points-cfe3d5969dea) on the difficulties & painpoints to become or work as a blockchain developer. Would love to know your thoughts!
![Navigating the Complexities of Web3 Raw Blockchain Development Essential Skills and Pain Points](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yqjfsbmwj3ujr8dfkq0h.png)

**TLDR**
- Essential skills for blockchain development include cryptography, programming languages, knowledge of the legal and regulatory environment, consensus algorithms, and security and cryptography skills.
- Developers should understand peer-to-peer networks and the strengths and weaknesses of different P2P networks.
- Common pain points in blockchain development include interacting with core protocols, security research, and choosing the right tools.
- Blockchain development will continue to play a crucial role in shaping various industries, and developers should stay updated with the latest trends and best practices.
Overview of Data Engineering
Tags: data, beginners
Published: 2023-07-25 02:27:35

During my journey as a software engineer I decided to change focus to more of a backend, data driven development path and I started my Data Engineering journey today with DataCamp and couldn't be more excited. In my first course which was an overview of data engineering this was my understanding of the basic concepts. 

Data engineering is the process of designing and creating systems for the collection, storage, processing, and analysis of data. A data engineer is responsible for developing, constructing, testing, and maintaining data architectures and systems.

## Basic Concepts and Understanding

### Data Pipeline

A data pipeline is a sequence of steps for moving data from one location to another, transforming it along the way. It consists of several components, including data ingestion, data processing, data storage, and data delivery.

It helped me to think of a pipeline as just simply a highway. There is a lot going on while on the highway just like through a pipeline theres many components in play. 

### ETL

ETL stands for Extract, Transform, and Load. It is a popular method for moving data between systems. In this process, data is extracted from a source system, transformed into a format that can be used by the target system, and loaded into the target system.

### Data Warehouse

A data warehouse is a system used for storing and managing large volumes of data. It is designed to support business intelligence activities such as reporting, data analysis, and data mining.

### Data Lake

A data lake is a centralized repository that allows you to store all your structured and unstructured data at any scale. It enables you to break down data silos and combine different types of data to gain insights and make better decisions.

For someone completely new to coding, understanding data or anything related to this the differences between data lake and data warehousing can be challenging to grasp. 

## Conclusion

Data engineering is a crucial discipline for any organization that deals with large volumes of data. Understanding the basic concepts and principles is essential for building robust and scalable data architectures and systems.
Statistics and the Ascending Key Problem
Tags: programming, tipsandtricks, sqlserver
Published: 2023-07-25 00:45:03

This article examines the Ascending Key Problem, which can affect query performance due to outdated statistics, and provides ways to mitigate it through SQL Server. Solutions discussed include updating statistics more regularly than the built-in thresholds, and using Traceflag 2371 to reduce the threshold for statistics updates.

[Visit the link](https://matthewmcgiffen.com/2023/07/21/statistics-and-the-ascending-key-problem-3/) to read more clearly about it.

## Summary:
This article looks at the Ascending Key Problem, which can cause problems in query performance due to outdated statistics, and provides mitigations to deal with it in SQL Server.

### Key takeaways:
1. The Ascending Key Problem relates to the most recently inserted data in a table, which may not have been sampled and included in the statistics histograms.
2. The Optimizer will guess that there are zero rows if the range you are looking for falls beyond the top of the histogram captured in the statistics object.
3. Scans aren't always bad for performance, as they can bail out once they are satisfied.

### Counter arguments:
1. Updating statistics more regularly than the built-in automatic thresholds may not be necessary.
2. Traceflag 2371 reduces the threshold for statistics updates.
AlmaLinux: habilitar NTP Sync
Tags: sre, ptbr, almalinux, beginners
Published: 2023-07-25 02:13:29

```
$ sudo timedatectl set-ntp true
```

Quer ver se está habilitado? Veja se o comando abaixo retorna `System clock synchronized: yes`

```
$ sudo timedatectl
               Local time: Thu 2023-07-13 09:24:39 -03
           Universal time: Thu 2023-07-13 12:24:39 UTC
                 RTC time: Thu 2023-07-13 12:24:39
                Time zone: America/Sao_Paulo (-03, -0300)
System clock synchronized: yes
              NTP service: active
          RTC in local TZ: no
```
LVM: como adicionar novo disco a um volume group
Tags: sre, lvm, ptb
Published: 2023-07-25 02:09:24

Qual disco será usado, e qual grupo será extendido?

```
$ lsblk
NAME            MAJ:MIN RM  SIZE RO TYPE MOUNTPOINT
sda               8:0    0   16G  0 disk
|-sda1            8:1    0    1G  0 part /boot
`-sda2            8:2    0   15G  0 part
  |-centos-root 253:0    0 29.4G  0 lvm  /
  `-centos-swap 253:1    0  1.6G  0 lvm
sdb               8:16   0   16G  0 disk
sr0              11:0    1 1024M  0 rom
```

Aqui eu quero adicionar `sdb` ao `/` (grupo `centos-root`). Execute sempre como usuário `root`:

```
pvcreate /dev/sdb
lvmdiskscan -l
vgextend centos /dev/sdb
lvm lvextend -l +100%FREE /dev/mapper/centos-root
xfs_growfs /dev/mapper/centos-root
```
How to Generate Slug in Laravel
Published: 2023-07-25 02:01:42

public function store(Request $request)
    {
        $post            = new Post();
        $post->title  = $request->title;
        $post->slug = \Str::slug($request->title);
        $post->save();
    }

Thanks to:
https://codelapan.com/post/how-to-generate-unique-slug-in-laravel-8
TIL about building gradients in CSS
Published: 2023-07-25 01:56:24

While creating my link-in bio project, I ran into some difficulty with styling my background to include an animated gradient, and I plan to discuss my roadblocks with a TA this week. Although I had issues figuring out the animated gradient, I did learn more about using the [CSS linear-gradient function.](https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/linear-gradient) through reading documentation on MDN!

Gradients allow developers to create smooth transitions between multiple colors, and there are 3 basic types of CSS gradients:

1. [Linear Gradients](https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/linear-gradient)

1. [Radial Gradients](https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/radial-gradient)

1. [Conic Gradients](https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/conic-gradient)



Below is an example of a simple linear-gradient with two color stops:
```CSS
.simple-linear {
  background: linear-gradient(blue, pink);
}
``` 
The three CSS gradient functions include a [number of properties](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_images/Using_CSS_gradients) that allow for endless customization!
AntDB Core database replacement of a provincial customer center of China Mobile
Tags: database
Published: 2023-07-25 01:55:08

AntDB helped a provincial customer center of China Mobile complete core data replacement, including province-wide channel center, customer center and other businesses. In terms of system design, the AntDB high-availability version was deployed in centralized mode and the dual-center disaster recovery security mechanism ensures availability. Innovative microlibrary architecture also achieves heterogeneous data exchange and parallelism.

application effectiveness:

- 96% compatibility with Oracle

- 0% failure rate
What is JavaScript?
Tags: javascript, webdev, beginners, programming
Published: 2023-07-25 01:42:37

JavaScript is a lightweight, object-oriented, scripting, dynamic programming language that's used for web development. It's can create, read, update, and delete an HTML Element.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yjz9m346x0ck09i5w9qh.jpg)
Im a Self-Teaching C++ Dev on the road to an internship!
Tags: cpp, opensource, codenewbie, beginners
Published: 2023-07-25 00:39:18

Hello Dev.to! 

My name is Tre and I am attempting (And will accomplish... eventually) learning C++ in order to land a better job in my area.

I have a bit of experience in Unity and love video games, but Im really interested i the inner working of an engine and coding in general! I have struggled immensely with learning due to ADHD but Im pushing through it and hoping the community could help me on my journey!

I am currently halfway done with Beginning C++ Through Game Programming and learned about vectors and iterators aswell as making a Hangman clone with book assistance. I have the code in my github and would like to invite you guys to come check out my notes and leave me feedback! I would be immensely grateful and maybe other beginners could get some contributions by helping me! This is a link to my github!:

https://github.com/TrevSh

I have all my book code under "ClassAssignmentX_Assignment" and will add more assignment code as I go through the book!

I would be deeply indebted to any programmer willing to help assist me and am open to hiring C++ tutors but I am low on money at the moment (Hopefully not for long lol) so I cant afford much but would totally be open to the idea!

I hope this post comes off correctly and not like Im begging or anything, Im just really eager to learn this great language so I can land a good job and make some awesome small games in the near future!

Many blessings and thank you for welcoming me to your community and hope you all stay amazing!
Streamline Visual Creation with Automated Solutions
Tags: webdev, beginners, tutorial, programming
Published: 2023-07-25 01:30:00

## **[Duply.co ](https://www.aiforme.wiki/ai/tools/duply.co)**is an innovative platform that offers automated visual content creation, enabling users to design once and generate multiple images or videos effortlessly.

By harnessing the power of API, URLs, and integrations, Duply.co streamlines the process of image and video generation, saving time and effort for users.

## Key Features of Duply.co:

API Integration:
[Duply.co](https://www.aiforme.wiki/ai/tools/duply.co) offers a seamless API that facilitates image creation automation. Users can effortlessly generate visual content programmatically, streamlining their workflows.

Dynamic URLs:
Customizable URLs allow users to generate unique personalized images instantly. With dynamic URL parameters, users can create visual content tailored to specific preferences.

Effortless Batch Image Generation:
The versatile form feature enables users to generate multiple images with just a few clicks. This batch image generation functionality ensures efficiency and saves time during content creation.

Automation with Zapier & Make.com:
Duply.co integrates with Zapier and Make.com, enabling users to automate workflows for their designs. This integration enhances productivity and simplifies design processes.

Design Once, Reuse, Generate:
Duply.co provides an automated solution for visual content creation, eliminating the need to open the editor every time. Users can design once and reuse templates, generating images without repetitive manual effort.

Conclusion:
[Duply.co](https://www.aiforme.wiki/ai/tools/duply.co) revolutionizes visual content creation by offering a suite of automated tools, including API integration, dynamic URLs, form-based batch image generation, and automation with Zapier and Make.com. With Duply.co, users can streamline their workflows, save time, and effortlessly generate personalized images and videos. Embrace Duply.co to optimize your visual content creation process, enhance efficiency, and unlock the potential of automated solutions for visual generation. Design once and generate more with Duply.co.
How to get data from Postgres DB as Java Map?
Published: 2023-07-25 01:19:16

In this post i will talk about how we get retrieve data from Postgres DB as map of list as well as list of maps in Java.

## To fetch data from RDS as List of Map:

```
public List<Map<String, Object>> readResultSetAsList(String query) throws SQLException {
    System.out.println("query(" + query + ")");
    Statement queryStatement = connection.createStatement();
    ResultSet resultSet = queryStatement.executeQuery(query);
    ResultSetMetaData md = resultSet.getMetaData();
    int columns = md.getColumnCount();
    List<Map<String, Object>> rows = new ArrayList<Map<String, Object>>();
    while (resultSet.next()) {
      Map<String, Object> row = new HashMap<String, Object>(columns);
      for (int i = 1; i <= columns; ++i) {
        row.put(md.getColumnName(i), resultSet.getObject(i));
      }
      rows.add(row);
    }
    System.out.println("rows=====" + rows);
    return rows;
  }
```

## To fetch data from RDS as Map of List:

```
public Map<String, List<Object>> readResultSet(String query) {
    System.out.println("query(" + query + ")");
    Map<String, List<Object>> resultList = null;
    try {
      Statement queryStatement = connection.createStatement();
      ResultSet resultSet = queryStatement.executeQuery(query);
      ResultSetMetaData md = resultSet.getMetaData();
      int columnCount = resultSet.getMetaData().getColumnCount();

      resultList = new HashMap<>(columnCount);
      for (int i = 1; i <= columnCount; ++i) {
        resultList.put(md.getColumnName(i), new ArrayList<>());
      }
      while (resultSet.next()) {
        for (int i = 1; i <= columnCount; ++i) {
          resultList.get(md.getColumnName(i)).add(resultSet.getObject(i));
        }
      }
      System.out.println("resultList=====" + resultList);

      resultSet.close();
      queryStatement.close();
    } catch (SQLException e) {
      Assert.fail(
          "Failed to execute query("
              + query
              + ")! Reason - "
              + e.getSQLState()
              + " "
              + e.getMessage());
    }
    return resultList;
  }

```

Let me know in comments if this was helpful.
ReactJS Coding and TechTalking, come join :D
Tags: react, frontend, javascript, podcast
Published: 2023-07-25 00:15:40

Programming a real company app with reactjs, using microfroentds and typescript C#, javascript, html, css, net core, kubernetes.

Worked for more than 6 tech companies, including AbInbev, Banco Safra e Dell Computers. For now i own a fintech and i am also building a new startup.

[Youtube Live](https://www.youtube.com/watch?v=7DmWus1OAAc)
TIL Blog Day 7 - Intro to Ruby
Tags: webdev, beginners, programming, ruby
Published: 2023-07-25 00:10:57

Over the course of a few days I worked on and finished the Intro to Ruby module. Overall it was a lot more enjoyable than Codecademy. While Codecademy is definitely a great resource to learn programming basics, I find the content can be a little dry and the site holds your hand too much. The Ruby modules on First Draft were great and it pushed you to think about what you learned when doing the graded code blocks.

I have a little over a year of learning JavaScript so I love to see some of the differences between JS and Ruby. Below are a couple of differences I noticed while working on the modules.

### Truthiness and Falsiness
While working through the 'If statements' module i noticed that Ruby has less 'falsy' values compared to JavaScript.
In Ruby, only `false` and `nil` are consdered falsy values.

JavaScript on the other hand has the following falsy values.
```js
false
undefined
null
0
-0
On
NaN
""
```

### Equality
Another area were Ruby differs from JavaScript is the equality operator. In Ruby you can only use 
```ruby
== 
!=
```

In JavaScript you have access to a third equality operator.
```js
!= // not equal to
== // loose equality, equal to but attempts to convert operands that are different types
=== // strict equality, both operands must be same type
```
Using the `==` operator can create problems in your code
```js
// The following code returns true
'2' == 2
```
This can lead to errors in your code, so generally it is recommended to always use the strict equality operator.

While Ruby does have a `===` operator, it is not used for comparing equality. The `===` operator in Ruby checks if an object belongs to a class or range. It can be used like this:
```ruby
(1..10) === 1
# => true

String === 'foo'
# => true
```

Overall I really like the simplicity of Ruby. It is easy to type and it doesn't have a lot of curly braces and parentheses all over the place like JS.
TIL 2
Published: 2023-07-25 00:07:10

html 101

Header:
```
<head></head>
```
Body:
```
<body></body>
```
Headings:
```
<h1></h1>
```
Paragraphs:
```
<p></p>
```
Division/Section:
```
<div></div>
```
Bold:
```
<strong></strong>
```
Italics:
```
<em></em>
```
Break/New Line:
```
<br>
```
Unordered Lists(list with dots):
```
<ul>
  <li>Limes</li>
  <li>Tortillas</li>
  <li>Chicken</li>
</ul>
```
Ordered Lists (List with numbers):
```
<ol>
      <li>Russia</li>
      <li>United States</li>
      <li>Canada</li>
</ol>
```
Images(src=source):
```
<img src="image-location.jpg" />
```
Images Alt(basically a text description added to the image):
```
<img src="image-location.jpg" alt="image description" />
```
Videos(include "control" if you want user to have controls):
```
<video src="url" width="x" height="x" controls>
  whatever text you wanted to show if video didn't load
</video>