teleren/devto huggingface dataset:
Data Science: Saving Pandas Dataframe the Efficient Way
Tags: datascience, python, pandas, beginners
Published: 2022-12-04 11:30:00

So you are done processing your data, now what? You might want to send the processed data to someone else or save the result for later. In such case you you will use pandas method `to_format(file_name)`. let say you want to save to `.csv` you will write `.to_csv("csv.csv")`. The most common way is to save it as **.csv** form because is the most **versatile** and anyone can open and understand the content of file. 

But But But saving it to .csv is not the best way to save a **DataFrame**, as there are many flaws of saving it to a .csv file. Let say our original dataframe had some columns with **object** as a datatype and durign the processing we converted it into a category datatype now if we save the dataframe to a `.csv`, it **will loos the changed datatype** and we have to start all over again. Now what is the solution?

Pandas support saving to many other file formats such as **parquet**, **feather**, **pkl**, **hd5** etc. All these formats saves the information about the datatype. Lets do some comparison between all these formats. 

- I used [this](https://stats.govt.nz/assets/Uploads/Balance-of-payments/BoPIIP-June-2022-quarter/Download-data/balance-of-payments-and-international-investment-position-june-2022-quarter-csv.csv) dataset to perform the benchmarking.
- I read the CSV file and saved them into different files.
- Used seaborn to plot the graphs.

## Write Speed


![Write Speed](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ex88nc3zhoq8xa7epzay.png)



From the above graph we can see that saving to csv takes the most time and all other formats takes significantly less time to save. Feather is the clear winner followed by h5 and pkl then parquet. 

## Read Time


![Read Time](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1x6ycn489pe95og74xrp.png)




From the above graph we can see that reading a csv takes the most time and all other formats takes significantly less time to read. PKL is the clear winner followed by feather and h5 then parquet.

## File Size


![File Size](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gbnjb36crv50ofrqu14y.png)



Now this is something interesting as you can see parquet is the clear winner and the runner up feather  takes almost 3 times more than that. 

From the above results you can decide by yourself which format you want to use. You might stick to csv if you are working with non technical people, but if you are working in tech and collaborating you might find parquet the perfect fit for sharing online because of its low file size.

If you have anything to say comment down below I'm new to blog writing so any type of feedback is appreciated Thanks.
Understanding Svelte Reactivity 
Tags: webdev, beginners, programming, tutorial
Published: 2022-12-04 11:27:51

Reactivity is one of the most important and useful features of Svelte. It helps to keep the DOM in sync with the application state. Now let's take a look at the example.


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


As we see above, we are not using any state variables like we do in React to update the application state. In our example, whenever the value of count changes, Svelte reacts automatically and updates the application state, and keeps our application state in sync with the DOM. Svelte uses something called a "reactive declaration" to keep variables also in sync with each other. Let's understand with an example.




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



In the above example as we can see doubledCount is referring to the count variable whenever the value of count is doubled Svelte automatically re-renders the entire code again to update the value of doubledCount. In this way we can keep variables in sync with each other. In Svelte, any changes made to an array or object do not cause components to re-render on their own. Let's try to understand with an example.


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



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

In the above example, we are trying to push a random number between 1 and 10 into an array when the button is clicked. In the above case, no matter how many times we click the button, it does not cause a component to re-render, as Svelte on its own does not react to any changes that happens to arrays or objects. We can solve the above problem manually by causing a component to re-render. This can be done as shown below.


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


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

As we see above, we are causing a component to manually re-render
by assigning a variable to itself. As we know in Svelte assignment always causes a component to re-render. In this way, we are indirectly making this component react to any changes that happen to the array. Now, for every button click, a new random number will be displayed on the screen.
Release 0.4 - My Progress So Far
Published: 2022-12-04 11:19:43

Hi everyone,

This week I worked on the [issues I described here last week](https://dev.to/neilan99/release-04-planning-43fg).

First, I tackled the [issue here](https://github.com/ayoayco/astro-reactive-library/issues/216). This issue looks to update the favicon logo to match the current logo that they are using. To do this, I used the .svg logo they had and generated a favicon.ico with it. I created a [pull request](https://github.com/ayoayco/astro-reactive-library/pull/221) and had some feedback about it. I had only tested it visually using light mode and had not considered how it would look using dark mode. On dark mode, the icon had bad contrast since the it was dark blue on a dark grey background. So to fix this, I added a circular white background to the logo so that it would look good on both light and dark mode.

The next [issue](https://github.com/ayoayco/astro-reactive-library/issues/148) is still a WIP. I have created a basic implementation of the script, but I am still working out some logic.

Overall, I feel that I am on track to complete the issues I have chosen (hopefully).
How to Code a Website Using HTML & CSS | Simple website using HTML and CSS with source code
Tags: webdev, javascript, html, css
Published: 2022-12-04 11:17:05

{% embed https://youtu.be/_rJalXmxcVQ %}

**How to Code a Website Using HTML & CSS** | Simple website using HTML and CSS with source code | Can I create a website using HTML only | Can I make a website just using HTML and CSS


HI 👋
I'm Daily Web Design
In this channel, I make videos about the Complete Responsive website.
You can check out my channel 👇


📺 My Channel : https://www.youtube.com/@dailywebdesign
🔔 Subscribe: https://www.youtube.com/@dailywebdesign


🔗 Essential links
-----------------------------
✅ How TO Learn to Code: https://youtube.com/playlist?list=PLP1xU0duo6-jA8B-UCe-Cv5Vn0H-37CLZ
✅ CSS Project : https://youtube.com/playlist?list=PLP1xU0duo6-gSt54DxihbSzvxhISEbgJd
✅ JavaScript Project : https://youtube.com/playlist?list=PLP1xU0duo6-gFYT8Cn-8nJFklS4TkM8j2
✅ Completely Responsive Web Design : https://youtube.com/playlist?list=PLP1xU0duo6-jhNWX9geGXak3I_I22PL6C


⏱️ Timestamps
-----------------------------
0:00 How To Create Complete Website Design Using HTML And CSS
2:07  navbar html css
10:47  main menu html css
14:20  team html
20:14  page title design
23:56  flexbox css
32:53  Illustrations 
42:47  service section html css
48:50  banner slider in html css
54:15  client slider html css
1:00:43 contact form html css
1:07:49 footer html css reponsive 
1:11:22  links in html
1:15:19 online koral demo


💜 Like & Subscribe
-----------------------------
👨‍💻 Dev :-           https://dev.to/dailywebdesigns
📘 Facebook :- https://www.facebook.com/dailywebdesigns
💻 Website :-   https://www.dailywebdesigns.com

  @dailywebdesign   


⚠️ Disclaimer
-----------------------------
video is for educational purpose only. Copyright Disclaimer Under Section 107 of the Copyright Act 1976, allowance is made for "fair use" for purposes such as criticism, comment, news reporting, teaching, scholarship, and research. Fair use is a use permitted by copyright statute that might otherwise be infringing. Non-profit, educational or personal use tips the balance in favor of fair use
How to Make Responsive Agency Website Using HTML CSS JavaScript With Source Code
Tags: webdev, javascript, html, css
Published: 2022-12-04 11:15:24

{% embed https://youtu.be/Oj-KzpbOJvM %}

**How to Make Responsive Agency Website Using HTML CSS JavaScript with Source Code**

This video will show you how to make responsive agency website using html css javascript


HI 👋
I'm Daily Web Design
In this channel, I make videos about the Complete Responsive website.
You can check out my channel 👇


📺 My Channel : https://www.youtube.com/@dailywebdesign
🔔 Subscribe: https://www.youtube.com/@dailywebdesign


🔗 Essential links
-----------------------------
✅ How TO Learn to Code: https://youtube.com/playlist?list=PLP1xU0duo6-jA8B-UCe-Cv5Vn0H-37CLZ
✅ CSS Project : https://youtube.com/playlist?list=PLP1xU0duo6-gSt54DxihbSzvxhISEbgJd
✅ JavaScript Project : https://youtube.com/playlist?list=PLP1xU0duo6-gFYT8Cn-8nJFklS4TkM8j2
✅ Completely Responsive Web Design : https://youtube.com/playlist?list=PLP1xU0duo6-jhNWX9geGXak3I_I22PL6C


⏱️ Timestamps
-----------------------------
0:00 Virtual Reality Website Design Using HTML CSS And  JavaScript
2:02 file setup
4:00  header / navbar 
17:00  home section 
21:38  wave animation 
24:25  nuts animation 
27:33  about section 
40:16  service section 
46:57  team section
55:29  contact form html css
1:02:40  FAQ page html css
1:12:22  footer html css reponsive
1:14:46 virtual reality website design using html CSS and JAVASCRIPT


💜 Like & Subscribe
-----------------------------
👨‍💻 Dev :-           https://dev.to/dailywebdesigns
📘 Facebook :- https://www.facebook.com/dailywebdesigns
💻 Website :-   https://www.dailywebdesigns.com

  @dailywebdesign  


⚠️ Disclaimer
-----------------------------
video is for educational purpose only. Copyright Disclaimer Under Section 107 of the Copyright Act 1976, allowance is made for "fair use" for purposes such as criticism, comment, news reporting, teaching, scholarship, and research. Fair use is a use permitted by copyright statute that might otherwise be infringing. Non-profit, educational or personal use tips the balance in favor of fair use
What is Docker? ELI5
Tags: docker, programming, devops
Published: 2022-12-04 11:15:17

Docker is a tool that helps people to manage and run applications. It makes it easier to move applications from one computer to another, and to run multiple applications on the same computer without them getting in each other's way.

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


Imagine you have a toy box full of different toys. Each toy has its own special parts and pieces, and they all need to be put together in a certain way to work properly. Docker is like a special organizer that helps you to keep all your toys in order, so that you can find the right toy quickly and easily.

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


For example, let's say you have a toy car and a toy robot. The car needs to be assembled with its wheels, doors, and engine, and the robot needs to be assembled with its arms, legs, and head. Without Docker, you would need to find the right parts for each toy, and put them together in the right way. But with Docker, you can use special containers to organize the parts for each toy, so that you can easily find the parts you need and assemble the toys quickly and correctly.

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


Docker is also like a special playroom where you can play with your toys without making a mess. In the playroom, you can have your toy car and toy robot set up and ready to go, without worrying about losing any parts or mixing up the pieces from different toys. This makes it easier and more fun to play with your toys, and it helps to keep everything neat and tidy.

Overall, Docker is a helpful tool that makes it easier to manage and run applications, just like a special organizer and playroom make it easier to play with your toys.
what is service discovery? (example provided)
Tags: consul, express, microservices, beginners
Published: 2022-12-04 11:13:35

Service discovery is a process by which services that are available on a network are identified and located. This can be useful in distributed systems, where multiple services may be running on different machines and need to communicate with each other.

Service discovery typically involves the use of a discovery service, which maintains a list of available services and their locations on the network. Clients can query the discovery service to find the location of a specific service, and then connect to that service directly to access its functionality.

## Service discovery tools
There are many tools that can be used to implement service discovery in a distributed system. Some common tools include:

**Consul**: Consul is a tool for service discovery and configuration management in distributed systems. It provides a simple and effective way to locate services and manage their configurations.

**Zookeeper**: Zookeeper is a distributed coordination service for distributed applications. It provides a centralized registry for services, allowing clients to discover and connect to the services they need.

**Eureka**: Eureka is a service registry for the Netflix OSS ecosystem. It provides a way for services to register themselves and for clients to discover and connect to the services they need.

**etcd**: etcd is a distributed key-value store that can be used for service discovery. Services can register themselves by storing their metadata in etcd, and clients can discover and connect to the services they need by querying etcd.

**Kubernetes**: Kubernetes is a container orchestration platform that provides built-in support for service discovery. Services can be registered with Kubernetes and accessed using DNS or an API, allowing for easy and efficient discovery and connectivity.

Here is an example of how service discovery might be implemented using** Express.js** and **Consul**:

```js 
// Register the service with Consul
consul.register({
  name: "service-name",
  port: 8080,
  check: {
    http: "http://localhost:8080/health",
    interval: "10s"
  }
});

// Create an Express.js app
const app = express();

// Register the service with Express.js
app.register("service-name", {
  port: 8080,
  check: {
    http: "http://localhost:8080/health",
    interval: "10s"
  }
});

// Start the Express.js app
app.listen(8080); ````

In this example, the service is registered with both Consul and Express.js, providing a way for clients to discover and connect to the service using either tool. Consul is also used to manage the service's configuration, allowing for dynamic updates without requiring a restart.
How to build NFT Marketplace website using HTML CSS JS with Source Code
Tags: webdev, javascript, html, css
Published: 2022-12-04 11:11:22

{% embed https://youtu.be/su3TIDFcCck %}

**How to build nft marketplace website using HTML CSS JavaScript with Source Code**

In this video, I will show you how to create (responsive) nft marketplace.


HI 👋
I'm Daily Web Design
In this channel, I make videos about the Complete Responsive website.
You can check out my channel 👇


📺 My Channel : https://www.youtube.com/@dailywebdesign
🔔 Subscribe: https://www.youtube.com/@dailywebdesign


🔗 Essential links
-----------------------------
✅ How TO Learn to Code: https://youtube.com/playlist?list=PLP1xU0duo6-jA8B-UCe-Cv5Vn0H-37CLZ
✅ CSS Project : https://youtube.com/playlist?list=PLP1xU0duo6-gSt54DxihbSzvxhISEbgJd
✅ JavaScript Project : https://youtube.com/playlist?list=PLP1xU0duo6-gFYT8Cn-8nJFklS4TkM8j2
✅ Completely Responsive Web Design : https://youtube.com/playlist?list=PLP1xU0duo6-jhNWX9geGXak3I_I22PL6C


⏱️ Timestamps
-----------------------------
0:00 NFT Website
2:19  header html css responsive
15:00 menu bar html css
20:06  notification html css
26:40  home page in html css
30:38  trending page
46:16  new page
51:23  download html page
52:48 image responsive css
54:22  about us page in html and css responsive
56:00  screenshots html 
1:01:59  scroll bar html css
1:05:22  footer html css reponsive 
1:16:59 How To Create Website For NFT


💜 Like & Subscribe
-----------------------------
👨‍💻 Dev :-           https://dev.to/dailywebdesigns
📘 Facebook :- https://www.facebook.com/dailywebdesigns
💻 Website :-   https://www.dailywebdesigns.com

  @dailywebdesign  


⚠️ Disclaimer
-----------------------------
video is for educational purpose only. Copyright Disclaimer Under Section 107 of the Copyright Act 1976, allowance is made for "fair use" for purposes such as criticism, comment, news reporting, teaching, scholarship, and research. Fair use is a use permitted by copyright statute that might otherwise be infringing. Non-profit, educational or personal use tips the balance in favor of fair use
.reverse() | .split('') | .join('') and palindrome in JS Explained
Tags: javascript, beginners, programming, palindrome
Published: 2022-12-04 11:10:46

1.Create a function that takes string.
Print the reverse of that string to the console.

`let unoReverse = str => console.log(str.split('').reverse().join(''))`

// **.split(')** takes the string and it returns it into an array 
//once we have the array, **reverse() **can reverse each
// in this case we** split('')** in individual letters ; **.reverse()** can take those individual letters and it can reverse them 
//Once we reversed our array, we joined back together **join('')** to get back a string, otherwise we will still be dealing with an array and we want our string back. 
// **reverse()** doesn`t need quotes "" because when they`ve made the reverse method they didn`t needed to take in an argument to do the reversing.


2.Create a function that takes in a string.
Alert if the string is a palindrome or not.
`const palindromeCheck = str => alert(str === str.split('').reverse().join(''))
palindromeCheck('racecar')`

//We are going to take in a string and see if it equals the same as that reversed. So if the str(string) equals the str reversed, we know that we have a **palindrome**. In this case will alert 'true'.

_In simple terms, when the numbers, strings, or characters are reversed that return the same result as the original numbers or characters, it is called a Palindrome._
MongoDB Atlas Hackathon 2022 on DEV - Introducing CSE buddy
Tags: atlashackathon22
Published: 2022-12-04 04:24:08

## What I built
Made a website where user can get all the resources of the different domains of Computer Science. Also, get help on their projects. Get details about events and also register for them.

### Category Submission:
Choose Your Own Adventure

### App Link
https://home.cuchapter.tech/

### Screenshots


### Description
 

### Link to Source Code
https://github.com/ank1traj/cucoders

### Permissive License
MIT

## Background
(What made you decide to build this particular app? What inspired you?)
I faced a lot of problems during my college for project as well as resources. So, decided that now nobody will face the same issue. 


### How I built it
(How did you utilize MongoDB Atlas? Did you learn something new along the way? Pick up a new skill?)
MongoDB Atlas is used to storing all data from user details, event details, project submission, resources as well as contact messages from the users.

### Additional Resources/Info
How to Make a Responsive Education Website Using HTML CSS JavaScript With Source Code
Tags: webdev, javascript, html, css
Published: 2022-12-04 11:09:49

{% embed https://youtu.be/zAHOrvWleDs %}

**How to Make a Responsive Education Website Using HTML CSS JavaScript With Source Code**

This video will show you how to build a (responsive) education website using html css javascript.


HI 👋
I'm Daily Web Design
In this channel, I make videos about the Complete Responsive website.
You can check out my channel 👇


📺 My Channel : https://www.youtube.com/@dailywebdesign
🔔 Subscribe: https://www.youtube.com/@dailywebdesign


🔗 Essential links
-----------------------------
✅ How TO Learn to Code: https://youtube.com/playlist?list=PLP1xU0duo6-jA8B-UCe-Cv5Vn0H-37CLZ
✅ CSS Project : https://youtube.com/playlist?list=PLP1xU0duo6-gSt54DxihbSzvxhISEbgJd
✅ JavaScript Project : https://youtube.com/playlist?list=PLP1xU0duo6-gFYT8Cn-8nJFklS4TkM8j2
✅ Completely Responsive Web Design : https://youtube.com/playlist?list=PLP1xU0duo6-jhNWX9geGXak3I_I22PL6C


⏱️ Timestamps
-----------------------------
0:00 School Website Design Using HTML
2:50  header html css responsive
19:00  home page in html css
25:25  info page
29:46 category page html css
36:03 about us page in html and css responsive
39:10 courses section
48:24  pricing section
54:51  contact form html css
1:05:22  review section html css
1:08:56  blog post card html and css
1:14:20 Education Website HTML CSS


💜 Like & Subscribe
-----------------------------
  @dailywebdesign   


⚠️ Disclaimer
-----------------------------
video is for educational purpose only. Copyright Disclaimer Under Section 107 of the Copyright Act 1976, allowance is made for "fair use" for purposes such as criticism, comment, news reporting, teaching, scholarship, and research. Fair use is a use permitted by copyright statute that might otherwise be infringing. Non-profit, educational or personal use tips the balance in favor of fair use
How To Make a Cosmetic Website Using HTML CSS And JAVASCRIPT With Source Code
Tags: webdev, javascript, html, css
Published: 2022-12-04 11:04:01

{% embed https://youtu.be/iBWbkiHhJIE %}

**How To Make a Cosmetic Website Using HTML CSS And JAVASCRIPT With Source Code** | How can I create a cosmetic website | How can I make a beautiful website using HTML and CSS | How do I create a fashion website using HTML


HI 👋
I'm Daily Web Design
In this channel, I make videos about the Complete Responsive website.
You can check out my channel 👇


📺 My Channel : https://www.youtube.com/@dailywebdesign
🔔 Subscribe: https://www.youtube.com/@dailywebdesign


🔗 Essential links
-----------------------------
✅ How TO Learn to Code: https://youtube.com/playlist?list=PLP1xU0duo6-jA8B-UCe-Cv5Vn0H-37CLZ
✅ CSS Project : https://youtube.com/playlist?list=PLP1xU0duo6-gSt54DxihbSzvxhISEbgJd
✅ JavaScript Project : https://youtube.com/playlist?list=PLP1xU0duo6-gFYT8Cn-8nJFklS4TkM8j2
✅ Completely Responsive Web Design : https://youtube.com/playlist?list=PLP1xU0duo6-jhNWX9geGXak3I_I22PL6C


⏱️ Timestamps
-----------------------------
0:00 Cosmetic Website
3:40   header html css responsive
19:15  home page in html css
29:30  category page html css
32:23  about us page in html and css responsive
38:10  shop page html css
47:16  banner in html css
50:55  gallery html css
56:24  message box html css
1:00:36  blog post card html and css
1:08:00  service section html css
1:10:12   footer html css reponsive 
1:19:45 Ecommerce Website 


💜 Like & Subscribe
-----------------------------
  @dailywebdesign  


⚠️ Disclaimer
-----------------------------
video is for educational purpose only. Copyright Disclaimer Under Section 107 of the Copyright Act 1976, allowance is made for "fair use" for purposes such as criticism, comment, news reporting, teaching, scholarship, and research. Fair use is a use permitted by copyright statute that might otherwise be infringing. Non-profit, educational or personal use tips the balance in favor of fair use