teleren/devto huggingface dataset:
Next 13 - Data fetching
Tags: nextjs, webdev, beginners
Published: 2022-11-14 06:09:19

Data fetching is nothing new in Next, but they simplified how this works.

You might remember `getServerSideProps` and `getStaticProps` from the previous React versions. Those are no longer needed. In return, we get one uniform way of fetching data!

## Fetching data

The recommended way of fetching data is using [server components](https://daily-dev-tips.com/posts/next-13-sever-and-client-components/), as discussed in the previous article.

According to the docs, there are a lot of benefits from fetching from server components:

- Access to backend services like database and API that don't run on the client
- Keep your secure keys on the server so they don't leak to the client
- Fetch and render in the same environment
- Caching your renders on the server
- Send less JavaScript to bundle

One important note is that they recommend you refetch data over passing it down.
Underwater, they deduplicate your requests and return cached results.
So it's more efficient to have the server do the heavy lifting, and the client requests the data.

## How does the fetching work?

They changed to use the fetch Web API, which is fantastic. It's a super powerful API, so happy to see this choice.

Fetch will always return a promise so we can await the result; by default, it's a cached request/results.

Let's show you an example.

In our component, we can create a data fetching function that would look like this.

```js
async function getData() {
  const res = await fetch('https://jsonplaceholder.typicode.com/todos');

  return res.json();
}
```

Our component itself can then use this function like this.

```js
export default async function AccountPage() {
  const table = await getData();

  return (
    <ul>
      {table.map((todo) => (
        <li key={todo.id}>{todo.title}</li>
      ))}
    </ul>
  );
}
```

And yep, that's it, simple.
I like the abstraction of thought here to simplify everything using native APIs.

It's also a great abstraction to move towards a unique concern architecture by simply making the components as small and self-sufficient as possible.

We also get many options around the fetch API that we can leverage, but it might be best to review them once we need them.

### Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on [Facebook](https://www.facebook.com/DailyDevTipsBlog) or [Twitter](https://twitter.com/DailyDevTips1)
【Laravel】How to change the format for date&time in blade file?
Tags: laravel
Published: 2022-11-14 06:04:26

When you want to change the format for date&time in Laravel blade files, you can use "format" method.
The conditions are as below.

- Column name is "updated_at" and its data type for this column is timestamp (ex: "2022-03-22 04:55:01")
-In blade file, iterate the variables that is passed by the controller (ex:$post).
```
<div class="col-4">
 {{$post->updated_at->format('Y/m/d')}}
</div>

```
What you get in the web browser is as below.("-" is replaced by "/.")
```
2022/03/22
```
"Format" method from Carbon class works, too. You create a carbon instance by "Carbon\Carbon::parse(<timestamp>)," and then specify the format('Y/m/d') by format method.

```
<div class="col-4">
  {{Carbon\Carbon::parse($quotes->created_at)->format('Y/m/d')}} 
</div>
```
To parse date is to take string representation of a date, and returns a unix timestamp.
947. Leetcode Solution in cpp
Tags: cpp
Published: 2022-11-14 05:48:28

```cpp
class Solution {
 public:
  int removeStones(vector<vector<int>>& stones) {
    int numOfIslands = 0;
    vector<vector<int>> graph(stones.size());
    unordered_set<int> seen;

    for (int i = 0; i < stones.size(); ++i)
      for (int j = i + 1; j < stones.size(); ++j)
        if (stones[i][0] == stones[j][0] || stones[i][1] == stones[j][1]) {
          graph[i].push_back(j);
          graph[j].push_back(i);
        }

    for (int i = 0; i < stones.size(); ++i)
      if (seen.insert(i).second) {
        dfs(graph, i, seen);
        ++numOfIslands;
      }

    return stones.size() - numOfIslands;
  }

 private:
  void dfs(const vector<vector<int>>& graph, int u, unordered_set<int>& seen) {
    for (const int v : graph[u])
      if (seen.insert(v).second)
        dfs(graph, v, seen);
  }
};

```

#leetcode
#challenge
Here is the link for the problem:
https://leetcode.com/problems/most-stones-removed-with-same-row-or-column/description/
Share recommendation Visual Studio Code extensions
Tags: webdev, vscode, tutorial, productivity
Published: 2022-11-14 05:43:57

When we're working in a team, we would like to use the same set of tools to make the development process more robust and productive.

With Visual Studio Code, it makes sense to use the same set of extensions.

You can share the extensions with other people in your team by creating a file `extensions.json` located in the `.vscode` folder.

```json
{
    "recommendations": ["dbaeumer.vscode-eslint", "esbenp.prettier-vscode", "svelte.svelte-vscode"]
}
```

The `recommendations` key contains the list of extensions which each of them is defined by an extension identifier.

You can see the list of installed extensions by running the command: 

```shell
$ code --list-extensions
```

Example output
```
dbaeumer.vscode-eslint
rvest.vs-code-prettier-eslint
svelte.svelte-vscode
```

Follow me on [Twitter](https://twitter.com/fariasmateuss) and [GitHub](https://github.com/fariasmateuss) to get more useful contents.
Figma plugins that will help you succeed at your next UI/UX design project
Tags: figma, uiux, uiuxdesign, design
Published: 2022-11-14 05:33:06

Hello there ,
Hope your doing well ,
![GIF](https://media.giphy.com/media/icUEIrjnUuFCWDxFpU/giphy.gif)

The following Figma plugins will help you succeed at your next UI/UX design project


1. **html.to.design**
html.to.design is the plugin where you can paste the website link that you want to redesign you will get the full canvas of the entire website.

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

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

2. **Freepik**
Freepik is the plugin where you can find illustrations and images for free
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yc8aae8ci111kr1e6p8d.png)

3. **Iconify**
Iconify is the plugin where you can find all the icons that you needed for your next design project.

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

4. **Unsplash**
Unsplash is the plugin where you can find high quality images for your next UI/UX design project

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

As of now this are the list of the plugins I use most for my UI/UX Design projects.

An overview of where I've been, what I've done, and what I've learned.
Hope everyone is doing well, I haven't posted here in a year, so for the past year, I have been a software developer in one company. However, after working there for six months, I realized that I was interested in creative work. It has also been a challenging year for me, so I had to leave that job for obvious reasons, so I am now working on UI/UX case studies and design projects. 
Lastly hello @ben How you been all well ?

My humble request to everyone: if you find any opportunities related to UI/UX Design or product Design roles, please let me know.
Thanks,
Krishna.
How To Generate PDF Using DomPDF In Laravel 9
Tags: laravel, laravel9, pdf, dompdf
Published: 2022-11-14 05:30:00

In this article, we will see how to generate pdf using dompdf in laravel 9. For generating pdf files we will use the laravel-dompdf package. It creates a pdf file and also provides download file functionalities. 

It is very easy to generate pdf files in laravel 9. we will see an example of a very simple way to generate a pdf file and download it to your system.

Using barryvdh/laravel-dompdf pdf you can create a new DomPDF instance and load an HTML string, file or view name. 

You can save it to a file, or show it in the browser or download it. Also, you can generate pdf from HTML view in laravel 9.

So, let's see laravel 9 generates a pdf file using dompdf.

How To Generate PDF In Laravel 9 Using DomPDF

```
Step 1: Install Laravel 9 To Create PDF In Laravel 9

Step 2: Install barryvdh/laravel-dompdf Package

Step 3: Create Controller

Step 4: Add Route

Step 5: Create Blade File

Step 6: Run the Laravel 9 DomPDF Application
```
Compose multiple React providers
Tags: react, tutorial, architecture, cleancode
Published: 2022-11-14 05:03:25

Nowadays, it is commom to use React's context at the root of an application to manage a shared state between any components.


For example, checking whether or not the current user has logged in might be a accomplished by `AuthProvider` provider:

```javascript
const App = () => {
    return (
        <AuthProvider>
            {...}
        </AuthProvider>
    );
};
```
Using multiple providers could make the code harder to read because there are a lot of nested components:


```javascript
const App = () => {
    return (
        <Router>
            <AuthProvider>
                <ThemeProvider>
                    <LocalizationProvider>
                        {...}
                    </LocalizationProvider>
                </ThemeProvider>
            </AuthProvider>
        </Router>
    );
};
```
The providers can be composed together by using the `reduce` function:

```javascript
const compose = (providers) =>
    providers.reduce((Prev, Curr) => ({ children }) => (
        <Prev>
            <Curr>{children}</Curr>
        </Prev>
    ));
```
The provider declarations in the root can be shorten below:
```javascript
const Provider = compose([
    Router,
    AuthProvider,
    ThemeProvider,
    LocalizationProvider,
]);

const App = () => {
    return (
        <Provider>
            {...}
        </Provider>
    );
};
```

I hope it is helpful for you.
Define Implicit and Explicit Operator - C# Tips
Published: 2022-11-11 14:53:38

C# allow us to define Implicit and Explicit operators. Unlike casting **_Implicit_** and **_Explicit_** operators defines how C# should behave when encountering a equals sign.

**_Implicit_** operator execution can be invoke when assigning a variable or calling a method.

To use **_Explicit_** operator we should do the same as casting an object. It's similar to a **_cast_** an object.

```csharp
public record class Email(string Value)
{
    //define implicit operator
    public static implicit operator string(Email value) 
      => value.Value;
    
    //define implicit operator
    public static implicit operator byte[](Email value) 
      => Encoding.UTF8.GetBytes(value.Value);

    //define explict operator
    public static explicit operator Email(string value) 
      => new Email(value);
}
```

> _Define custom operators on Record Class_

To define a implicit/explicit we need to make use of "operator", "implicit" or "explicit" keywords.

The following example demonstrate the use of both operators.

```csharp
Email email = new("rmauro@rmauro.dev");

//use implicit operator. This is not a cast
string stringEmail = email;

Email secondEmail = (Email)stringEmail;

//output rmauro@rmauro.dev
System.Console.WriteLine(stringEmail); 
System.Console.WriteLine(secondEmail.Value.ToString());
```

> _Making use of defined Operators_

The explicit conversion is similar to a cast operation. We make visible the type to which we will convert the object. The implicit operator is less visible and difficult to understand if you don’t know it exists.
Day 03: Graphic Design from a novice.
Tags: watercooler, writing, ramblings, graphicdesign
Published: 2022-11-14 04:28:48

[![Total Word Count - 494](https://img.shields.io/badge/Total_Word_Count-494-00AC47?style=for-the-badge&logo=Google+Keep&logoColor=ffffff)](https://)

Day 3 of my writing challenge. Today was a hard day to have time to gather my thoughts to even begin writing about something. I have no idea where to even begin.

One of my favorite things to do is to make and create graphics. I have always enjoyed doing them. So today, I thought I would try to talk about my process on how I go about making graphics.

First off, let me say, I am in no way an expert. I am still learning. So, what does the process look like when I want to make a graphic?

---

## What's it for?

First thing I have to do is figure out what the project is that I am making the graphics for. Sometimes I will just make things because I have a cool idea I want to try out. But for this example, we'll use the banners I make for my dev.to post.

The first thing I did was figure out the maximum dimensions that a banner could be (1000 x 420). Then I went into photoshop and made a 1000x420 project with a transparent background.

---

## The design

Now that I had my blank template, I began thinking about the theme. I don't know if you've noticed but, my banners tend to follow the same design pattern.


![breakdown](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/55sxayakzs1ypu6kbgrm.png)

I start by selecting an appropriate background image for the topic of the article. Then I scale and/or crop it to fit the earlier mentioned dimensions.

Then I have a 1000x420 black rectangle overlaid on top of the image. I set the opacity for that to **40%**. This way I can overlay text over the image and it won't clash as much. Sometimes overlaying text over an image, the text is hard to read. So I added this black rectangle on top to dial back the background image just a bit.

After that, I have another 1000c420 rectangle on top of everything. Instead of doing a fill for this one, I set the fill to be transparent and set it to have a stroke of 6px. Using the properties button while having the rectangle selected, allows me to leave it on top and just change the color as needed.

Finally, I put text on top of everything. Here recently, I have just made everything be white text with a black stroke of 3px and a drop shadow and that's pretty much it!

![breakdown 2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jqd31p2mrcjs94fg7173.png)

---

## Conclusion

So that's basically my design process for my dev.to banners. I am currently thinking about re-designing them. I'm not 100% on this yet. I'll really have to think about what I would want to do with them. So, for the time being, I am just going to stick with what I am using now and worry about the new ones whenever I come up with a decent idea.

Anyway, that's going to be it for today. I appreciate you reading the mad ramblings of a graphic design scrub. Have a wonderful day!


![signature](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1es2bvaqpvt52m8lz1fl.png)
Filter🐍 Python Iterables by Complex Queries
Tags: python
Published: 2022-11-14 04:27:37

Python `filter` built-in function allows filtering Python iterables by function that shall return True/False. The problem with it ,that you can easily pass a query to that function to filter the iterable. 

Example of Python filter

```python
def filter_age(item):
    return item["age"] > 19
l = [{"name":"John","age":16}, {"name":"Mike","age":19},{"name":"Sarah","age":21}]
print(list(filter(filter_age,l)))
```


output
```python
[{'name': 'Sarah', 'age': 21}]
```

What if you want to pass the age as parameter to `filter_age` function. This will need a [partial](https://docs.python.org/3/library/functools.html) which isn't complex but isn't comprehensive enough.

## Leopards
[Leopards](https://github.com/mkalioby/leopards/) is a Python library that provides an easy and fast way to filter members of a list or a tuple. The member can be a dict or object. The library supports AND, OR and NOT implementations.

### Example
```python
from leopards import Q
l = [{"name":"Karen","age":"16"}, {"name":"Mike","age":"19"},{"name":"Sarah","age":"21"}]
filtered= Q(l,{'name__icontains':"k", "age__gt":16})
print(list(filtered))
```
output
```
[{'name': 'Mike', 'age': '19'}]
```

For more examples and how to install/ use the library. Please check the github repo.
{% embed https://github.com/mkalioby/leopards/ %}

Happy Coding.
Event-Driven Architecture
Tags: systems, beginners, tutorial, systemdesign
Published: 2022-11-14 04:25:09

Event-Driven Architecture or EDA is defined as an architectural pattern that uses events to maintain communication within a system. It leverages a message broken to publish and consume events asynchronously. Both producers and consumers are unaware of each other. In simple words, Event Driven Architecture is a method by which we can achieve loose coupling between services within the system.

## Events: Definition

An event is a data point to represent state changes in a system. Whenever a consumer makes a change, an event is formed. However, there is no specification as to what and how the state change should happen.

## Components of Event-Driven Architecture (EDA)

The Event-Driven Architecture has three components under it. Let’s see them individually.

#### 1. Event Producers: 
They produce an event for the router.

#### 2. Event Routers: 
The event routers filter and push the events produced by producers to the consumers.

#### 3. Events Consumers: 
They consume events to reflect the state changes in the system.

## Patterns of Event-Driven Architecture (EDA)

There are numerous ways for implementing EDA in your system depending upon your use case. Let’s see some of them:

- Sagas

- [Publish-Subscribe](https://dev.to/pragyasapkota/messaging-and-pubsub-1aj9)

- [Event Sourcing](https://dev.to/pragyasapkota/event-sourcing-1ml4)

- [Common and Query Responsibility Segregation (CQRS)](https://dev.to/pragyasapkota/cqrs-4doe)

## Advantages of Event-Driven Architecture (EDA)

- Producers and Consumers are unaware of each other.

- The system becomes highly scalable and distributed.

- Agility is improved.

- Guaranteed delivery

- Adding new consumers is easy.

## Challenges of Event-Driven Architecture (EDA)

- Error Handling is difficult.

- The system integrated with EDA is complex in general.

- Exactly once, in-order processing of events.

## Conclusion

Where the way of Event-Driven Architecture depends on the use case, there are various use cases like Metadata and Metrics, Server and Security Logs, Integrating heterogenous systems, Fanout and parallel processing, etc. In addition, we can check out some of the examples of the architecture in NATs, Apache Kafka, Amazon EventBridge, Amazon SNS, Google PubSub, etc.

{% embed https://github.com/Pragya2056/System-Design-Concepts %}

**_I hope this article was helpful to you._**

**_Please don’t forget to follow me!!!_**

**_Any kind of feedback or comment is welcome!!!_**

**_Thank you for your time and support!!!!_**

**_Keep Reading!! Keep Learning!!!_**
What is Blockchain
Tags: beginners, tutorial, web3, blockchain
Published: 2022-11-14 03:35:00

Hello 👋. You have at least heard about the excitement surrounding NFTs, and Web3 and Blockchain have become internet slang. This is the beginning of a new series of `Web3 Threads` in which we discuss all subjects pertaining to the fundamentals of Web3 and the technology underlying them. The postings in this series will include a succinct introduction to the subject and a straightforward explanation in everyday language.

{% embed https://twitter.com/Envoy_1084/status/1591989369950199808?t=07xqP_hQxkInHIUQA61eFg&s=19 %}

### 📍 Blockchain Definition

Blockchain is a distributed, immutable ledger that makes it easier to record transactions and track assets in a business network.

---

### 📍 Structure of Blockchain


- Blockchain groups information into units known as blocks, which hold sets of information.

- When a block's storage capacity is reached, it is closed and linked to the previous filled block, producing a data chain known as the blockchain.

---

### 📍 How secure is Blockchain?

- The hashes of the blocks are responsible for the blockchain's immutability. A hash is analogous to a fingerprint. Humans all have unique fingerprints. Hashes serve as unique identifiers/fingerprints in the case of blocks.

- Each block is digitally signed with a one-of-a-kind hash generated by a hashing algorithm/function.

- These hashes are generated using the current block, the preceding block, and a timestamp, and each change in input results in a completely new hash.

---

### 📍 Characteristics of Blockchain

- Decentralized
- Transparent and open
- Enhanced Security and immutability

---

### 📍 Types of Blockchains

- Public blockchains - Fully decentralized and open to public.
- Private blockchains - Requires permission to join the network.
- Hybrid blockchains - Combines features of both Public and Private.
- Consortium blockchains - Private Blockchain for Orgs

---

For more exciting brief web3 threads, follow me.

{% embed https://dev.to/envoy_ %}
{% embed https://twitter.com/Envoy_1084/status/1584856929259913216 %}

---
thuviencaycanh.net
Published: 2022-11-14 03:06:47

thuviencaycanh.net là nơi chứa đựng những gì cần biết về cây cảnh như: chăm sóc, chậu, kiến thức hay những ý tưởng thiết kế sáng tạo. Cùng khám phá nhé!
#thuviencaycanh #thuviencaycanhnet #kienthuccay #chamsoccaycanh 
Location: 44 Nguyễn Thái Bình, Hoà Minh, Liên Chiểu, Đà Nẵng 550000, Vietnam
Hotline: 0943438794
Email: info.thuviencaycanh.net@gmail.com
Build your mobile app with 10X speed using FlutterFlow
Tags: flutter, mobile
Published: 2022-11-14 02:53:54

Hello Everyone.
This is Serhii from Ukraine.
Last 6 years I have been working as fullstack developer, I mainly focused on web development.
But in the last year, I started mobile development and I mainly used Flutter to build apk.
There are many advantages of using Flutter for building the app, but there are also some disadvantages.
It needs more memory because it needs emulator.
But we cover this problem using FlutterFlow.
FlutterFlow is low code platform for Flutter app development.
In FlutterFlow, we build our app in browser and test it in browser as well.
I think if we could use this platform, we could increase the development speed much and we could build the app with low memory PC.
https://flutterflow.io/
Thanks.
PVC stuck in terminating state?
Published: 2022-11-14 02:50:11

```
# kubectl get pvc
NAME                                  STATUS        VOLUME                                     CAPACITY   ACCESS MODES   STORAGECLASS   AGE
service-vol-0                          Terminating   pvc-1517f4d4-48ac-4892-9618-5bc3bfb255db   1Gi        RWO            sc     33d
```

Add the finalizer all `null`, in place of `kubernetes.io/pv-protection` to be able to delete.

```bash
kubectl patch pvc service-vol-0 -p '{"metadata":{"finalizers":null}}'
```

---

docs to know more about pv-protection: https://kubernetes.io/docs/concepts/storage/persistent-volumes/#storage-object-in-use-protection
Community of Practice for Engineering Leaders
Tags: events, engineeringleaders, everydayproblems, communityofpractice
Published: 2022-11-14 02:41:54

We are launching our first Community of Practice program on February 28th, 2023! This program is designed to bring together a community of engineering leaders where you can share your challenges and experiences by focusing on real everyday problems. Weekly facilitated sessions across six weeks of engaging dialogue with relevant peers that you can learn from and turn to for future challenges and opportunities. For more info or to secure your spot, head over to https://lnkd.in/grz4srcX


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