teleren/devto huggingface dataset:
How to read CSV files in the typescript react app?
Tags: typescript, react, javascript, npm
Published: 2022-07-19 05:35:30

A comma-separated values (CSV) file is a delimited text file that uses a comma to separate values. Each line of the file is a data record. Each record consists of one or more fields, separated by commas. The use of the comma as a field separator is the source of the name for this file format. A CSV file typically stores tabular data (numbers and text) in plain text, in which case each line will have the same number of fields. [Wiki](https://en.wikipedia.org/wiki/Comma-separated_values)
In this article, we want to read a CSV file in react application and for this, we use Papa Parse  package. Papa Parse is the fastest in-browser CSV (or delimited text) parser for JavaScript.
Let's div in. First, we should install the package.
```
npm install papaparse
```
while this project is created with typescript we should install the typescript package.
```
npm install @types/papaparse –-save-dev
```
**One important thing about the CSV files in react app that is the CSV file should be copied to the public directory.**

![copy csv file in public directory](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/scnuqn66849fsyf4i4fl.png)

Then we must import Papa Parse.
```
import Papa, { ParseResult } from "papaparse"
```
ParseResult is papaparse type for result.
Then we define type of data.
```
type Data = {
  name: string
  family: string
  email: string
  date: string
  job: string
}

type Values = {
  data: Data[]
}
```
after that, we create the state.
```
const [values, setValues] = React.useState<Values | undefined>()
```
and create a function for getting csv file with Papa Parse package.
```
const getCSV = () => {
    Papa.parse("/file.csv", {
      header: true,
      download: true,
      skipEmptyLines: true,
      delimiter: ",",
      complete: (results: ParseResult<Data>) => {
        setValues(results)
      },
    })
  }
```
and put it in useEffect hook.
```
 React.useEffect(() => {
    getCSV()
  }, [])
```
That’s it. But for re-usability and separation of concerns reasons, we can create a custom hook.

![useReadCSV custom hook](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/75ky9eo5f58nurj3oq6g.png)

#conclusion
Reading and importing CSV files into the application is a challenge. In this article, we use Papa Parse. This is a great package for importing, reading, etc... CSV files in js applications. For more information about this package see the blog [Papa Parse](https://www.papaparse.com).
Introducing Rails mini series
Tags: rails, ruby, devops
Published: 2022-07-19 05:33:30

For the past 3 years I have been developing web applications with [Ruby on Rails](https://rubyonrails.org/). It is arguably one of the most robust programming frameworks out there being used to develop the likes of [Github](https://github.com/), [Shopify](https://shopify.com/), [Basecamp](https://basecamp.com/), [Airbnb](https://airbnb.com/), [Twitch](https://twitch.tv/), just to name a few.

I will be documenting my experience with Ruby on Rails from the initial command `rails new` to deploying to a remote instance that is accessible from anywhere in the world.

Stay tuned!
How to run two nodejs modules in distroless docker image
Tags: node, docker, distroless
Published: 2022-07-19 05:15:37

Recently I tried to replace the `Alpine` docker image with `Distroless` to get more [benifits](https://github.com/GoogleContainerTools/distroless#why-should-i-use-distroless-images). But I met an error said no shell available.
The [CMD](https://docs.docker.com/engine/reference/builder/#cmd) of the `dockerfile` is like:
```dockerfile
CMD node dosomething.js & node server.js
```
In this form(aka shell-form), it invokes a command shell to run the commands(node dosomething.js & node server.js). 
> If you use the shell form of the CMD, then the <command> will execute in /bin/sh -c

Since `Distroless` doesn't have the builtin shell the error happens.
> "Distroless" images contain only your application and its runtime dependencies. They do not contain package managers, shells or any other programs you would expect to find in a standard Linux distribution.

I started from the idea that to move the code of `dosomething.js` into `server.js` and finally found it's too complicated since the server.js was generated from the source code and it's difficult to insert something and wish it still works. 

Then it came to the second idea that is let a runner to start the `dosomething.js` and `server.js` as child process. Its code was like:

`runner.js`
```javascript
const { fork } = require('child_process')
const path = require('path')

fork(
  path.resolve('dosomething.js'),
  null,
  {
  detached: true
  }
)

fork(
  path.resolve('server.js'),
  null,
  {
    detached: true,
  }
)
```
Fork will start a [child process](https://nodejs.org/api/child_process.html) from the module(the first argument, e.g. `path.resolve('server.js')`) defined as the first argument. 
The second argument is the list of the arguments for server.js. When the `server.js` accepts arguments to control its behavior then we may add something here. I make it as null since no extra arguments needs for this sample. 
The last argument is the options and the `detached:true` indicates that the child process started from the module(e.g. server.js) run independently of its parent process. It has different behavior on differnt platform but in short you can think it makes the child process continue runing no matter the main dies or not. Suit my requirements.

So finally the CMD in docker file as:
```dockerfile
CMD ["runner"]
```

So above approuch fix the issue. But only when we needs both `dosomthing.js` and `server.js` runs it works. What if I want to `server.js` starts only when `dosomthing.js`ends with no error or with any error. It could be easily implemented using command shell with the operator `&&` and `||`. I will cover this in the next post.

Thanks for reading.
warp vpn in Ubuntu 20.0 usage guide.
Published: 2022-07-19 04:42:46

I am using warp which is also known as 1.1.1.1 vpn from cloudflare. My operating system is Ubuntu 20.0. After trials and errors I came to realize the set of commands I need to execute if the vpn is not working or the network is simply not connected.

First you need to disconnect from warp

`sudo warp-cli disconnect`

Then check your internet connection, it should be working.

Then you need to register before you connect.

`sudo warp-cli register`

Only after that you can connect to the server.

`sudo warp-cli connect`

One thing to take note is that if you are using other VPN connection, you need to disable the warp's wifi connection as follows.

`sudo warp-cli disable wifi`
Wisata Alam dan Kuliner di Tabek Patah, Sumatera Barat
Tags: beginners, trans, food, travel
Published: 2022-07-19 04:27:50

Tabek Patah adalah salah satu nama nagari(desa) yang berada di Kabupaten Tanah Datar, apabila berlibur ke Sumatera Barat sebaiknya anda tidak melewatkan berwisata ke Tabek Patah ini, disini anda akan mendapatkan [wisata](https://nasyitha.com) yang luar biasa yaitu pemandangan sawah yang menghampar luas dan wisata kuliner unik kopi Kawa daun.
Tabek patah terletak di jalan lintas Batusangkar-Bukittinggi, di sepanjang perjalanan anda akan menyaksikan hamparan sawah yang sangat luas dan warung-warung yang menyediakan minuman khas masyarakat Minangkabau Kopi Kawa Daun.
Tentang Kopi Kawa Daun
Kopi kawa daun adalah minuman yang unik merupakan hasil seduhan daun kopi, di tabek patah ini banyak warung/restoran dengan view hamparan sawah yang luas yang menyediakan kopi khas ini.
Kopi kawa daun ini muncul sejak zaman penjajahan, saat itu penjajah menyuruh masyarakat sekitar untuk menanam pohon kopi, setelah panen, penjajah membawa semua kopi-kopi tersebut ke negara asalnya sehingga masyarakat hanya mengigit jari melihat hasil bumi yang mereka tanam tidak bisa dinikmati, dikarenakan cuaca yang dingin terpaksalah mereka membakar daun kopi dan diseduh dengan air panas untuk diminum, sengsara membawa nikmat, mungkin itulah pepatah yang tepat untuk keadaan saat itu, ternyata daun kopi yang diseduh tadi tidak kalah nikmatnya dibandingkan dengan seduhan buah kopi, rasa yang khas dan enak membuat banyak orang ketagihan.
Selain rasa yang khas, disini penyajian kopi kawa daun ini juga unik lho…, minumnya mangkok yang terbuat dari batok kelapa dan ditemani oleh goreng pisang hangat akan memberikan sensasi ngopi yang berbeda.
Demikian ulasan singkat mengenai uniknya kopi Kawa Daun Tabek Patah, anda punya rencana berlibur ke Padang atau Sumatera Barat? jangan lupa untuk memasukkan Tabek patah dan Kopi kawa daun ke daftar kunjungan anda.
Is there any way to compress the data while using mongo persistence with NEventStore?
Tags: neventstore, mongodb, compression, dotnetcore
Published: 2022-07-19 04:27:44

I'm working with C#, Dotnet core, and NeventStore( version- 9.0.1), trying to evaluate various persistence options that it supports out of the box.

**More specifically, when trying to use the mongo persistence, the payload is getting stored without any compression being applied.**

Note: **Payload compression is happening perfectly when using the SQL persistence of NEventStore whereas not with the mongo persistence.**

I'm using the below code to create the event store and initialize:

```
private IStoreEvents CreateEventStore(string connectionString) 
    { 
        var store = Wireup.Init() 
                        .UsingMongoPersistence(connectionString,  
                                  new NEventStore.Serialization
                                  .DocumentObjectSerializer()) 
                        .InitializeStorageEngine() 
                        .UsingBsonSerialization() 
                        .Compress() 
                        .HookIntoPipelineUsing() 
                        .Build(); 
        return store; 
    }
```
And, I'm using the below code for storing the events:

```
public async Task AddMessageTostore(Command command) 
{ 
    using (var stream = _eventStore.CreateStream(command.Id)) 
         { 
                stream.Add(new EventMessage { Body = command }); 
                stream.CommitChanges(Guid.NewGuid()); 
         }
} 
```
**The workaround did:** Implementing the PreCommit(CommitAttempt attempt) and Select methods in IPipelineHook and by using gzip compression logic the compression of events was achieved in MongoDB.

Attaching data store image of both SQL and mongo persistence:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tnxh6rnjvxc6ao3p9sjs.png)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mg8felwt59dlzpxfbw0o.png)

**So, the questions are**:

1. Is there some other option or setting I'm missing so that the events get compressed while saving(fluent way of calling compress method) ?
2. Is the workaround mentioned above sensible to do or is it a performance overhead?
Lesser-known CSS property
Tags: css, webdev, beginners, javascript
Published: 2022-07-19 04:19:32

Before 1996 people were used to design websites and web pages with table tags. It was really a headache for the designer because they were managing the code on the same page and because of this management of code was difficult. 

After the invention of CSS, it becomes easy for the designer because now they don't have to manage all the things on the same page, and because of this it become easy to manage. Today CSS is very much popular and everyone is using it.

### 1. Writing-Mode In CSS

The writing-mode property defines that lines of text are laid out horizontally or vertically.
writing-mode property supports the following param:

- sideways-rl: Text and other content are laid out vertically from top to bottom and are set sideways toward the right.

- sideways-lr: Like sideways-rl, text and other content are laid out vertically from top to bottom but set sideways toward the left.

- vertical-rl: Text and other content are laid out vertically from top to bottom and right to left horizontally. If there are two or more lines, the lines are placed to the left of the previous line.

- vertical-lr: Unlike vertical-rl , horizontally the text is laid out left to right, and if there are two or more lines, the lines are placed to the right of the previous line.

### 2. background-clip in CSS
This property allows us to set a custom graphic to the element’s background. custom graphics can get extensions to the border-box, padding-box, or content-box of the element.    

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

OUTPUT

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

### 3. User-select in CSS
If you don't want the user to select your text from the website, you use this property. This property allows you to disable the selection of particular text on your webpage.

```
css
.text-to-select {
   user-select: all;  
}
```

### 4. white-space in CSS
the white-space property allows you to control the flow of text of an element. It has nowrap, pre, pre-wrap, pre-line, and normal as values. Look at the example
```
<style type="text/css">
	div{
  width:100px;   
}
p{
  background:red;
  font-size:2rem;
}
.nowrap{
  white-space:nowrap;
}
.pre{
  white-space:pre;
}
.pre-line{
  white-space:pre-line;
}
.nowrap1{
  white-space:nowrap;
  text-overflow:ellipsis;
  overflow:hidden;
}
</style>

<div>
<p>
First line of code
</p>
<p class='nowrap'>
nowrap text 
</p>
<p class='pre'>
Pre text 
</p>
<p class='pre-line'>
Pre-line text 
</p>
<p class='nowrap1'>
 Nowrap with overflow.
</p>
</div>
 
```

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b58fx05wz46422yl3ob1.png)
Best Web Developer in Bangladesh
Tags: seo, webdevelop, webdesign, smm
Published: 2022-07-19 04:19:00

[Web Developer](https://www.banglapuzzle.com/best-web-developer-in-bangladesh) is a specialized definition for a software programmer who develops global huge web applications (www) the usage of a customer server model. The programs generally use HTML, CSS, and JavaScript in the client. A web developer uses one or more programming languages like PHP, ASP.net (C#), Python, Node.js, move, or Java in the server, and HTTP for communications between consumer and server. A web developer can also specialize in purchaser-aspect applications (front-end developer), server-facet programs (returned-give up developer), or each (full-stack developer). Sometimes web Developer uses any framework primarily based on their capabilities and challenge needs.

**Prerequisite:-**

There are no formal academic or license requirements to become a web developer. However, many colleges, trade colleges, and government training tasks provide coursework in web development. Even many online route provider groups provide nice direction primarily based on a particular language.
There also are many tutorials and articles which train web development, often free to be had on the web — for example, on JavaScript.

Even though there are not any formal requirements, web development projects require net developers to have advanced expertise and skills such as:

• HTML, CSS, and JavaScript
• Server/client-aspect structure like several or some of the above noted
• Programming/coding/scripting in one of the many server-side languages or frameworks (e.g., Perl, Python, Ruby, the personal home page, move, Java, ASP.net, Node.js)
• Potential to utilize a database
• Developing a single-page application (SPA) with the use of front-end gear along with View, React.js, or Angular.

**Web Developer in Bangladesh:-**

Bangladesh is an emerging Tech friendly country in which authorities, universities, and schooling company employers work to complement quality web developers. Their builders are awesome and adopt new languages or technology easily.[see more....](https://www.banglapuzzle.com/best-web-developer-in-bangladesh)

source: [Bangla puzzle Limited](https://www.banglapuzzle.com/best-web-developer-in-bangladesh)
Show Me Your Desk Setup ! 🔥 🖥
Tags: discuss, watercooler, design, beginners
Published: 2022-07-19 04:15:49

Your Desk probably comes at second place after your bed.. where you spend your most of the time.

So it's very important to enjoy it.

**Show everyone your current Desk Setup and also your Dream Setup.**

**Get an Inspiration, Be an Inspiration.**
What are the metrics for measuring a system performance.
Tags: systemdesign, microservices, performance, availability
Published: 2022-07-19 04:15:25

CAP theoram states that the system which you are building should have 3 parts and all 3 of them is not possible:
C: consistency: when we do the write operation in the system. we store the data in the system. then when we are trying to fetch the data. latest data should be available.
A: Availability: system should be available. there should be no downtime.
- replication of database
- more instance of the service 
- non blocking request
- scaling horizontally
P****: performance: how is performance of the system measured:
1. throughput: it is usuallu calcualted in bits/second. how much data travels through a user from the system in time period.
2. latency: speed at which message is delivered
3. availability:uptime and downtime
How to prepare for your first tech interview?
Tags: beginners, programming, codenewbie
Published: 2022-07-19 04:14:31

In tech industry a requirement to get a job is to pass successfully the tech interview, there are many guides outside but  based on my persona l experience  I’m gonna give you some advices. 

### Get back to fundamentals

Sometimes, when we’re preparing for a tech interview we only focus on algorithms and data structures and coding challenges but we don’t practice the theory. It is also important to focus on practicing CS fundamentals here’s a list of topics that I’ve been studying for my interview:

- Object Oriented Programming
- Software Engineering
- Programing paradigms
- Testing
- Sorting algorithms
- Optimization
- Big O Notation

Of course there are a lot of subtopics inside that topics, for example: Polymorphism, Abstraction, Encapsulation and Inheritance are related to OOP. 

### Practicing the for the coding challenge

There are many sites where you can study algorithms and data structures for free including video tutorials explaining more specifically how it works. This week I’ve been practicing arrays and strings on Hackerrank. Also Leetcode have a lot of problems and you can filter them by the most popular ones. 
I’ll recommend you to solve at least 20-30 problems from different difficulty and data structures to crack the coding interview. 
Books: Cracking the coding interview is like the bible of technical challenges, it explains a lot of topics and it’s  going to be your best friend for practicing exercises for the coding challenge. 

Always try to practice with someone mocking interviews and relax, rest enough days before your interview. This point is very important because sometimes being nervous can be a big blocker. On the next weeks I’m going to be practicing more for my technical interviews.
Find vetted Freelance Ruby on Rails Developer for your project without any hassle
Tags: ruby, developer, programming, webdev
Published: 2022-07-19 04:11:44

Freelancing is not an alien word anymore. If you have a high-end skillset, there always will be an opportunity for you to grab. And the concept of freelancing is convenient for both the parties, including the employer and the employee as well.

Especially in the developing world, where if you have an app with a smaller size, it becomes quite expensive to hire a full-time developer to address the same query. Compared to that option getting a Freelancer Ruby on Rails Developer is cheaper and more convenient. Therefore, more and more leading global giants have been adopting this freelancing concept for their small or minor queries related to Ruby on Rails app development.

If you are not aware of this concept, the concept simply means one can do the job without making any long-term commitment. This also suggests that the entity will not be liable for constant pay or retirement compensation.

On the other hand, while you have the freedom of choosing who to hire, when to work or how to work, you also have the responsibility for the deadlines and efficient communication between the offshore team.

The main question arises: How will you find the best Freelance Ruby on Rails developer? How will you figure out who would do justice to the core requirement of your project? Here is the answer to your quest.

When you plan to _hire freelance Ruby on Rails Developer_ for your project, make sure you see these attributes first of that RoR Developer. 

<b>1. Available on Demand</b>
Even if you have a significant time difference gap between both the parties, if the developer is available on demand

<b>2. Viable</b>
You should be able to hire Freelance RoR Developer without getting into much of the complexity of contracts or NDAs. In other words, if you have an urgent requirement, the developer should be able to address it without any hurdles.

<b>3. Economic</b>
Undoubtedly, freelancing is considered one of the most convenient yet cheaper options than hiring a full-time developer. It matches the core advantages of an offshore Ruby on Rails Developer as it provides the same services.

Now, moving ahead, let’s discuss how a Freelance Ruby on Rails Developer can benefit you and your project in different ways. This Ruby on Rails development service consists of the following services overall,

- RoR App Maintainance
- Ruby on Rails Hosting
- Ruby on Rails Upgrade service
- Instant bug fixing
- Small task-based RoR development services

To conclude, ruby on Rails is one of the robust technology which gives you a strong backend base. However, in order to get the optimum advantage of this amazing technology, you would require a well-versed developer who can execute your primary goal of yours in reality.

Hence, <b>[hire freelance ruby on rails developer](https://www.bacancytechnology.com/freelance-ruby-on-rails-developer)</b> and get even a minor requirement addressed without any long-term commitment.
How to Customize the Vue Charts Axis
Tags: vue, webdev
Published: 2022-07-19 03:54:30

Learn how easily you can customize the Syncfusion's [Vue chart](https://www.syncfusion.com/vue-ui-components/vue-charts) axis to make it more informative. In this video, you will learn how to customize a chart axis with properties like axis crossing, tick lines, and grid lines. You will learn how to add multiple axes to a chart, place an axis opposite from its original position, and inverse the chart axis to display the highest value of the axis near the origin.

**Product overview**: https://www.syncfusion.com/vue-ui-components/vue-charts

**Explore our tutorial videos**: https://www.syncfusion.com/tutorial-videos

{% youtube S4PKGUUtROY %}
Remove version strings from CSS and JS link hrefs in WordPress
Tags: wordpress, security, webdev
Published: 2022-07-19 03:52:29

Yesterday I gave you a quick tip [how to remove meta generator tag](https://dev.to/texe/remove-meta-generator-tag-from-wordpress-1dfi) in WordPress. After applying this tip you can still see the WordPress version in the source code:


![WordPress version in link hrefs](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4vtjnzcp6cfdrcz7efp6.png)

What to do if you want to hide it? Just apply below code into `functions.php` file of your theme.

{% gist https://gist.github.com/texe/f0e3acc3c3c60543d9588b1346544d9d %}


If you want more tips follow me on Twitter: [@TexeChris](https://twitter.com/TexeChris):