teleren/devto huggingface dataset:
React.js Page Transition With Framer-Motion layout .
Tags: javascript, webdev, react, animation
Published: 2024-02-02 04:31:13

Certainly! To implement page transitions in a React.js application using Framer Motion, you can follow these steps. I'll provide a simple example using Framer Motion's **motion** and **AnimatePresence** components for page transitions.

```
npm install framer-motion react-router-dom
```
Create a layout component that will handle the page transitions. Let's call it **Layout.js**:

```
// Layout.js
import React from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import { useLocation } from 'react-router-dom';

const Layout = ({ children }) => {
  const location = useLocation();

  return (
    <AnimatePresence exitBeforeEnter>
      <motion.div
        key={location.pathname}
        initial={{ opacity: 0 }}
        animate={{ opacity: 1 }}
        exit={{ opacity: 0 }}
      >
        {children}
      </motion.div>
    </AnimatePresence>
  );
};

export default Layout;
```
In this component, we are using **AnimatePresence** to handle page transitions. The **key** attribute ensures that Framer Motion animates when the page changes.

Set up your main **App.js** file using React Router and the **Layout** component:

```
// App.js
import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Layout from './Layout';
import Home from './Home'; // Create your Home component
import About from './About'; // Create your About component

const App = () => {
  return (
    <Router>
      <Layout>
        <Switch>
          <Route path="/about" component={About} />
          <Route path="/" component={Home} />
        </Switch>
      </Layout>
    </Router>
  );
};

export default App;
```

Replace **Home** and **About** with your actual page components.

Now, you can create your page components, such as **Home.js** and **About.js**. For example:

```
// Home.js
import React from 'react';

const Home = () => {
  return (
    <div>
      <h1>Home Page</h1>
      <p>Welcome to the home page!</p>
    </div>
  );
};

export default Home;
```

Now, when you navigate between the home and about pages, Framer Motion will handle the page transitions with a fade effect. Customize the animations and transitions based on your specific needs

---
Fade and scale transition:

```
// Layout.js
import React from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import { useLocation } from 'react-router-dom';

const Layout = ({ children }) => {
  const location = useLocation();

  return (
    <AnimatePresence exitBeforeEnter>
      <motion.div
        key={location.pathname}
        initial={{ opacity: 0, scale: 0.8 }}
        animate={{ opacity: 1, scale: 1 }}
        exit={{ opacity: 0, scale: 0.8 }}
        transition={{ duration: 0.5 }}
      >
        {children}
      </motion.div>
    </AnimatePresence>
  );
};

export default Layout;
```
Using Find Command on Linux
Tags: linux, beginners, bash, devops
Published: 2024-02-02 01:38:32

Pada postingan ini kita akan membahas `Find` command line pada linux yang menurut saya sangat penting dan banyak manfaat. Dengan command ini kita bisa mencari atau mengeksekusi perintah. 

Oke kita langsung saja ke penggunaan command ini. Untuk basic penggunaanya sesederhana ini

```
find file_atau_folder
```
Misalkan kita ingin mencari file dengan nama tertentu cukup dengan seperti ini

```
find playbook.yml
find playbook*
find *book*
```
Akan tetapi find hanya mencari di lokasi folder dimana ia dijalankan, misalkan kita berada pada `~/Documents` maka `find` hanya mencari file playbook.yml didalam `~/Documents`. 
Jika ingin mencari sampai kedalam sub folder kita perlu menambahkan parameter `name`.

```
find -type f -name playbook.yml
```
Jika ingin mencari file selain file yg kita inginkan maka bisa menggunakanya seperti ini

```
find -type f ! -name playbook.yml
```
Jika kita ingin menampilkan berdasarkan rentang waktu bisa sebagai dengan opsi ini

```
find -type f -ctime +30 playbook.yml
find -type f -amin +10 playbook.yml
```

| Options   | Description |
|------------|----------|
| -amin n    | Terakhir kali file diakses `n` dalam menit |
| -atime n   | Terakhir kali file diakses `n*24 jam` atau dalam hari |
| -cmin n | Terakhir kali file diubah (changed) `n` dalam menit |
| -ctime n | Terakhir kali file diubah `n*24 jam` atau dalam hari |
| -mmin n | Terakhir kali file dimodifikasi (Modify) `n` dalam menit |
| -mtime n | Terakhir kali file dimodifikasi `n*24 jam` atau dalam hari |
| -daystart | Terakhir perintah dijalankan, 24 jam dihitung dari jalanya perintah| 

> _Perbedaan changed dan modify. 
Jika changed dihitung dari perubahan metadata, jika modify dihitung dari perubahan isi file/folder_

Selanjutnya perintah find juga bisa digunakan untuk menghapus file/folder.
```
find . -type f -name playbook.yml -delete
```
Tapi saran saya jika ingin menghapus lebih baik dengan option
exec. Dimana exec akan mengeksekusi command dari shell linux.

```
find ~/Download -type f -name *filenya* -exec  rm -rf {} \;
find ~/Downloads -user nzucode -type f -exec chown seno {} \;
```
Sebenarnya masih banyak lagi kegunaan dari syntax find ini. Kita bisa liat referensi lain pada artike atau dokumentasinya.
Selamat mencoba, semoga bermanfaat.
iOS developer link list
Published: 2024-02-02 04:22:57


["Swift Eğitim Seti | Başlangıç, Orta, İleri Seviye | Uğur Kılıç"](https://www.youtube.com/playlist?list=PLQQB30fiyEnRP92I9wmCHTOyOBpVAC4ro)

["Swift Dersi | Furkan Vural"](https://www.youtube.com/playlist?list=PLQQB30fiyEnR_3o8LzxqwNcMVF5kPtqIT)
When and How to Use the Facade Pattern
Tags: javascript, node, webdev, backend
Published: 2024-02-02 04:19:37

In conversational English, the term facade has a bad rep. We say, that when someone is fake or untrustworthy, they have a facade. I think this has done very little for the humble facade pattern. Without even knowing what it is you are already judging it. 

Let's do this pattern justice and look at when we should use it. We have all worked with legacy code.  Let's say, for instance, you have this piece of code that tunes a guitar:

```
function Guitar(highE, B, G, D, A, lowE) {
  return {
    play: function(){
      console.log("🎶")
    }
  }
}
```
Nifty, right? We new up Guitar, which gives us back a perfectly tuned guitar that we can play(). Notice, though, that we need to pass it six variables, each corresponding with the pitches for each of the strings. No problem, we're rock stars, we know exactly how to tune a guitar.

But now the rest of the band comes along and, guess what, they have their instruments that they need tuned up and ready to go. 
```

function Bass(G, D, A, E) {
  return {
    play: function(){
      console.log("🎶")
    }
  }
}

function Trumpet(tuningSlide) {
  return {
    play: function(){
      console.log("🎶")
    }
  }
}

function Piano(toolboxFullOfStuff) {
  return {
    play: function(){
      console.log("🎶")
    }
  }
}
```
You can probably handle the bass guitar but what the heck is a tuning slide and what is the pianist handing you an entire toolbox for? So, now you need to do something.  You've got to hand this over to your roadies to get you finely tuned instruments and there is no way you can teach them the intricacies of each of these instruments.

In comes the facade pattern. We can create one interface and, through that one interface, we can new up any one of these instruments. Then, within the context of the pattern, we can handle all the nitty-gritty details of each of the instrument tuning requirements:

```
function Instrument(instrument) {
  const instruments = {
    piano: Piano,
    guitar: Guitar,
    bass: Bass,
    trumpet: Trumpet
  }
  return new instruments[instrument]()
}
```
Now, if we want to new up a guitar, it's as easy as 
```
const guitar = new Instrument("guitar")
guitar.play()
```
So, here we had a situation where we had multiple objects that all had different interfaces and all had very specific configurations. We used the facade pattern to create one, uniform implementation that allowed us to create any of the objects with very little knowledge of how each one was implemented. This is where the facade pattern should be a key component of your technical repertoire.
How do you copy and paste from Microsoft Word to Wordpress?
Tags: wordpress, html, beginners
Published: 2024-02-02 04:16:36

Can you provide instructions on copying and pasting content from Microsoft Word to WordPress? I'm looking for a seamless process to transfer my text without losing formatting or encountering any issues.


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

I'm working on a post about **[digital marketing agency in sri lanka](https://weblankan.com)**. Can you share insights on what makes a digital marketing agency stand out? I'm particularly interested in key factors like innovative design approaches, client communication, and project delivery. Any tips or success stories would be appreciated!
100days C++ standard Algorithms
Tags: cpp, algorithms, programming, beginners
Published: 2024-02-02 04:11:40

Day 1: Started with a book by Šimon Tóth. 
simple vector output program with **ranges** and **for_each**
```
#include <iostream>
#include <vector>
#include <ranges>

int main()
{
    int count =0, sum =0;
    std::vector<int> data = { 1, 2, 3, 4, 5, 6, 7, 8, 9};
    //used the vector for an example

    std::ranges::for_each(data, [&](int el)
    {
        count++;
        sum += el;
        std::cout<<sum;
    });
}
```
ConnectOS
Tags: startup, startos
Published: 2024-02-02 04:08:14

https://ajinkyabhat.com/connectos
The Lean and Automated CRM for Startups

Ditch the expensive subscriptions and embrace a new era of CRM with ConnectOS. This powerful Notion-based tool empowers startups to manage their contacts, automate workflows, and streamline their sales and marketing efforts.

Key Features:

- People Database:
    - Store all your contact information directly from LinkedIn using automation tools like Bardeen.
    - Tag contacts based on their role (investor, customer, collaborator, etc.) for easy organization.
    - Track contact interactions using Kanban board views for a clear overview of your progress.
    - Filter investors by priority, area of investment, and stage of investment for targeted outreach.
    - Receive real-time notifications through Slack integration whenever a teammate updates a contact record.
    - Integrate with other StartOS modules for seamless data flow and enhanced functionality.
- Companies Database:
    - Store and manage information about companies you're interacting with.
    - Tag companies based on their industry, stage of funding, and focus area.
    - Utilize filters to identify potential investors and tailor your outreach accordingly.
    - Pull company data into front-end views like Investor CRM, Sales and Marketing Database, and Customer and Collaborators Boards for comprehensive analysis.

Benefits:

- Reduced Costs: Eliminate expensive subscription fees and manage your CRM within Notion.
- Improved Efficiency: Automate repetitive tasks and streamline your workflows.
- Enhanced Collaboration: Work together seamlessly and share information with team members.
- Data-Driven Decisions: Gain valuable insights into your sales and marketing efforts.
- Increased Productivity: Save time and focus on what matters most.

ConnectOS is the perfect solution for:

- Startups: Manage your contacts efficiently and grow your business.
- Sales and marketing teams: Streamline your sales pipeline and close more deals.
- Entrepreneurs: Stay organized and manage your relationships with key stakeholders.
Embrace the Power of Double-Sided Business Cards
Tags: bestprintingservice, topclassprintingintorrance, businesscardprinting, uniquestyleprinting
Published: 2024-02-02 04:07:37

 
Impress your customers with captivating double-sided business cards. Are you trying to find a quality printing service in Torrance? Look no further! At Printing Graphics, we ensure quality printing services for a wide range of business products. Call to get striking **[double-sided business cards](https://buyprint.net/printing-services/color-printing/business-cards/)**. 
**Connect with us: **
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ily0cy0yfmm3o3zyqv5q.jpg)
Printing Graphics
21236 S.Western Ave,
Torrance, CA 90501
Phone: 310 787-7774
Email: info@buyprint.net
Website: www.buyprint.net
Where is pacman in windows Rails installation?
Tags: ruby, rails, mysql
Published: 2024-02-02 04:00:20

Yesterday I was encountering

```bash
The specified module could not be found.   - C:/Ruby/lib/ruby/ge
ms/2.0.0/extensions/x64-mingw32/2.0.0/mysql2-0.3.16/mysql2/mysql2.so (LoadError)
```

It was because I updated the AWS RDS from to 8.0 version last week. The applications that use Linux doesn't have problems but Windows.

So I downloaded the MySQLConnectorC and do 
``bash
gem install mysql2 -- --with-opt-lib c:/your/path/to/Ruby27-x64/msys64/mingw6/lib64
``
It recognize the library location but there are somemore errors

```bash
error: mingw32: key "5F944B027F7FE2091985AA2EFA11531AA0AA7F57" is unknown
error: key "5F944B027F7FE2091985AA2EFA11531AA0AA7F57" could not be looked up remotely
error: mingw64: key "5F944B027F7FE2091985AA2EFA11531AA0AA7F57" is unknown
error: key "5F944B027F7FE2091985AA2EFA11531AA0AA7F57" could not be looked up remotely
error: msys: key "5F944B027F7FE2091985AA2EFA11531AA0AA7F57" is unknown
error: key "5F944B027F7FE2091985AA2EFA11531AA0AA7F57" could not be looked up remotely
error: database 'mingw32' is not valid (invalid or corrupted database (PGP signature))
error: database 'mingw64' is not valid (invalid or corrupted database (PGP signature))
error: database 'msys' is not valid (invalid or corrupted database (PGP signature))
```

the anwer is to use MSYS2 installation with the following command: pacman -Syu

But the problem is there is no executable file in Ruby windows called pacman.

So that's where ridk comes in. ridk is the Ruby Installer Developement Kit. if you just execute ridk in command line, you will know.

The command to run pacman using ridk is this

```bash
ridk exec pacman -Syu
```
Viola! It will recreate the corrupted databases
[20 Days of DynamoDB] Day 16 - Enhancing Write Performance with Batching
Tags: dynamodb, serverless, database, cloud
Published: 2024-02-02 03:40:12

**Posted: 2/Feb/2024**

The DynamoDB `BatchWriteItem` operation can provide a performance boost by allowing you to squeeze in **25** individual `PutItem` and `DeleteItem` requests in a single API call - this can be done across multiple tables.

Here is an example that combines `PutItem` and `DeleteItem` operations for two different tables (`customer`, `orders`):

```go
	_, err := client.BatchWriteItem(context.Background(), &dynamodb.BatchWriteItemInput{
		RequestItems: map[string][]types.WriteRequest{
			"customer": []types.WriteRequest{
				{
					PutRequest: &types.PutRequest{
						Item: map[string]types.AttributeValue{
							"email": &types.AttributeValueMemberS{Value: "c3@foo.com"},
						},
					},
				},
				{
					DeleteRequest: &types.DeleteRequest{
						Key: map[string]types.AttributeValue{
							"email": &types.AttributeValueMemberS{Value: "c1@foo.com"},
						},
					},
				},
			},
			"orders": []types.WriteRequest{
				{
					PutRequest: &types.PutRequest{
						Item: map[string]types.AttributeValue{
							"order_id": &types.AttributeValueMemberS{Value: "oid_1234"},
						},
					},
				},
				{
					DeleteRequest: &types.DeleteRequest{
						Key: map[string]types.AttributeValue{
							"order_id": &types.AttributeValueMemberS{Value: "oid_4321"},
						},
					},
				},
			},
		},
	})
```

Be aware of the following constraints:

- The total request size cannot exceed 16 MB
- `BatchWriteItem` cannot update items

**Recommended reading:** [BatchWriteItem](https://pkg.go.dev/github.com/aws/aws-sdk-go-v2/service/dynamodb#Client.BatchWriteItem) API doc
antDesign Pro set up error fix
Tags: antdesign, react, web, router
Published: 2024-02-02 03:27:06

Uncaught Error: Absolute route path "/*" nested under path "/user" is not valid. An absolute child route path must start with the combined path of all its parent routes.

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


solution

Comment out lines 40 - 43 of file config/routes.ts

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jwji69obwz0azzo7fwjo.png)
daga88asia
Tags: daga88, daga88asia, dagatructiep, daga
Published: 2024-02-02 01:39:35

Daga88.asia - web phát đá gà trực tiếp thomo CP1 CP2 CP3, đá gà cựa dao hôm nay miễn phí 24/24. Daga88 kết nối các anh em có cùng đam mê và theo dõi những trận đấu gà kịch tính, hấp dẫn.
#daga88 #dagatructiep88 #daga8 #daga88asia
Điện thoại: 078887779
Email: daga88asia@gmail.com
Địa chỉ: 19 Dương Đình Nghệ, phường 8, quận 11, Tp. Hồ Chí Minh
web: [https://daga88.asia](https://daga88.asia)
Web 2.0:
[http://ae8888.webflow.io/](http://ae8888.webflow.io/)
[http://ae8888.webflow.io/](http://ae8888.webflow.io/)
[https://dagavegas79.webflow.io/](https://dagavegas79.webflow.io/)
[https://dagasv388.webflow.io/](https://dagasv388.webflow.io/)
[https://daga888.webflow.io/](https://daga888.webflow.io/)
[https://daga8.webflow.io/](https://daga8.webflow.io/)
Google:
[https://docs.google.com/spreadsheets/d/1uQe2I0HT4f0UpMRVFukRrI3JaaVOFyL-ml9i3QVswHg](https://docs.google.com/spreadsheets/d/1uQe2I0HT4f0UpMRVFukRrI3JaaVOFyL-ml9i3QVswHg)
[https://docs.google.com/document/d/1sXCiXokjN4xQNdtrZSLqhHvJQG0MEyhzYrzI9YQlc_0](https://docs.google.com/document/d/1sXCiXokjN4xQNdtrZSLqhHvJQG0MEyhzYrzI9YQlc_0)
[https://docs.google.com/forms/d/e/1FAIpQLSeRTrMn6K-3b_KF1Q3TZcC8UnYsBveptEGey10i0i4EsBXrMA/viewform](https://docs.google.com/forms/d/e/1FAIpQLSeRTrMn6K-3b_KF1Q3TZcC8UnYsBveptEGey10i0i4EsBXrMA/viewform)
[https://docs.google.com/presentation/d/1m0pRe85ooMDGEYYeuenTaCRBxMj2U_t231STmo1zVDE](https://docs.google.com/presentation/d/1m0pRe85ooMDGEYYeuenTaCRBxMj2U_t231STmo1zVDE)
[https://www.google.com/maps/d/viewer?mid=1WGKtx4U0o34n0c3WcCMwPxF0C6TVNTQ&ll=16.083766985141875%2C105.80356199999999&z=6](https://www.google.com/maps/d/viewer?mid=1WGKtx4U0o34n0c3WcCMwPxF0C6TVNTQ&ll=16.083766985141875%2C105.80356199999999&z=6)
[https://colab.research.google.com/drive/1BWNKwDYk723DdkcsD7KYUZGv5RPv0zIn](https://colab.research.google.com/drive/1BWNKwDYk723DdkcsD7KYUZGv5RPv0zIn)
Data Structures and Algorithms: Recursion
Tags: javascript, beginners, algorithms, datastructures
Published: 2024-02-02 02:30:15

## Introduction

Recursion is a programming technique where a function calls itself repeatedly until it reaches a base case, which is the point at which the problem is solved. 

There are two steps to recursion:

1. Base case
2. Recursive case

## Solving a problem with recursion

We can use recursion to solve the problem of finding the factorial of any given integer. 

### Base Case
To solve this with recursion, first we must create our base case. We will use the base case to prevent the function from running forever, at which point it will stop calling itself to return a result. 

Given that the factorial of a number n is the product of all positive integers less than or equal to n, the function will stop calling itself once n is equal to 1. At this point the return value will be 1. 

```
if(n === 1) {
   return 1;
}
```

### Recursive Case
The second part is recursive case, where the function will call itself until it reaches the base case. 
In order to find the factorial, the function will be call itself whilst decrementing the value of n. 

```
n * factorial(n - 1);
```
The recursive case can be divided into 3 steps:

1. Pre: where an operation is performed before recursing, for example, multiplying the function by n.
2. Recursion: where the function is called.
3. Post: where n operation is performed after recursing, for example, logging the value of n.

With the base case and recursive case defined, we can now write out the function to find the factorial of an integer. 


```
function factorial(n){
  if (n === 1) {
    return 1;
  }
  return n * factorial(n - 1);
}

```

## Conclusion

Recursion can be a useful tool for breaking down complex programming problems. It is often used as an alternative to iteration(for and while loops) and is very useful for traversing trees and graphs.
Why You Can't Get Budgets for Plugins or Tools from Clients as Ecommerce Developers?
Tags: hocify, ecommerce, developers, storeowner
Published: 2024-02-02 02:25:13

Do you, as a freelance developer, face challenges with store owners like Min who allocate insufficient budgets for necessary plugins or tools, leading to limitations in website functionality? Explore a real-life situation with us!

Max: Hi Min, I’ve been mulling over some challenges we’re facing in our ecommerce website project. I’ve noticed that there’s a limitation in the website’s functionality, mainly because the budget for essential plugins and tools seems a bit tight. I’d love to understand the reasoning behind it. Can we chat about this?

Min: Absolutely, Max! I’m all ears. What’s bothering you?

Max: Thanks, Min. I appreciate it. Firstly, why was there a decision to allocate a limited budget specifically for plugins and tools?

Min: Well, Max, I was trying to be mindful of the overall project cost. You know, trying to keep things within a reasonable budget.

Max: I completely understand the importance of staying within budget constraints, Min. However, why do you think these plugins and tools are crucial for the website’s success?

Min: Hmm, to be honest, I might not have given it as much thought. What makes them so crucial?

Max: Great question. These plugins and tools play a crucial role in shaping the website’s functionality. They contribute to a smooth user experience, ensure security, and can significantly impact our sales. Without them, we might face challenges that could affect the overall success of the project.

Min: I see your point, Max. But why do you believe the success of the project is dependent on these tools?

Max: Excellent question. Imagine our website as a car. The plugins and tools are like the engine and safety features. Without a robust engine, the car won’t perform well, and without safety features, there’s a higher risk of accidents. Similarly, without the right tools, our website may not function optimally, and we could face potential issues affecting our success.

Min: I hadn’t considered it that way. So, what are the consequences if we don’t have these essential tools?

Max: Another great question, Min. Without these tools, we might encounter security vulnerabilities, experience slower website performance, and find it challenging to implement crucial features. This could lead to a loss of potential customers and revenue, impacting the success of our project in the long run.

Min: That’s a lot to consider. I appreciate you bringing this up, Max. What can we do about it?

Max: I’m glad you’re open to discussing it, Min. Let’s continue this conversation and explore potential solutions to ensure the success of our ecommerce website project while keeping our budget in mind.

Steps to Get Budgets for Plugins or Tools from Clients for Ecommerce Developers:https://hocify.com/x/4nbt