teleren/devto huggingface dataset:
Building AutoLink component in React
Tags: react
Published: 2020-07-30 12:58:04

---
title: Building AutoLink component in React
published: true
description: How to build a React component which takes the text with URLs and adds links there. It uses a little known string.split feature.
tags: react
canonical_url: https://blog.rstankov.com/building-auto-link-component-in-react/
---

I had to implement a React component which takes text and adds links to the detected URLs:

```jsx
<AutoLink>
  This text contains link to http://example.com and https://example.com
</AutoLink>
```

This generates the following HTML:

```html
<p>
  This text contains link to <a href="http://example.com" target="_blank">http://example.com</a> and <a href="https://example.com" target="_blank">https://example.com</a>
</p>
```



In order to build this component, I had to use а little know feature of the [String.prototype.split](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/split) method. Most people know that if you have the following string `a,c,d,e` you can split it by `,`, you get an array:

```js
"a,b,c".split(/,/) // => ["a", "b", "c"]
```

**Today I learned**, that you can actually include the separator in the results:

```js
"a,b,c".split(/(,)/) // => ["a", ",", "b", ",", "c"]
```

This uses the [regular expression group feature](https://www.regular-expressions.info/brackets.html).

Using this feature, I created a `mapLinks` function. It takes the text and yields the links it detects.

```js
const EXP = /(https?:\/\/(?:www\.|(?!www))[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9]\.[^\s]{2,}|www\.[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9]\.[^\s]{2,}|https?:\/\/(?:www\.|(?!www))[a-zA-Z0-9]+\.[^\s]{2,}|www\.[a-zA-Z0-9]+\.[^\s]{2,})/gi; 

export function mapLinks(text, fn)) {
  // this splits the text, by links but it still keeps those links in the result
  return text.split(EXP).map((chunk, i) => {
    if (chunk.match(EXP)) {
      return fn(chunk, i);
    }

    return chunk;
  });
```


Then I just used this function for the component itself:

```js
export default React.memo(({ children }) => (
  <p>
    {mapLinks(children, (url, i) => (
      <a href={url} target="_blank" key={i}>
        {url}
      </a>
    ))}
  </p>
)}
```
How to create a Playlist as File
Tags: playlist, xspf, music
Published: 2020-07-30 12:39:35

Hello 👋

you want to create a playlist for a party to a file which runs on every PC?

The best way is a [`XSPF`](https://xspf.org/)-File.
It's simply just a XML File. [JSON?](#if-you-want-a-json-raw-jspf-endraw-)

I know it, it's nothing for development. But i think this article can for many people be helpfull

## Create a file

First create a File named `playlist.xspf` with this content.

```xml
<?xml version="1.0" encoding="UTF-8"?>
<playlist version="1" xmlns="http://xspf.org/ns/0/">
    <trackList>
        <track><location>Song.mp3</location></track>
        <track><location>Directory/AnotherSong.mp3</location></track>
        <track><location>SongWith%20Space.mp3</location></track>
        <track><location>http://song.from/internet.mp3</location></track>
    </trackList>
</playlist>
```

## Add some Metatags

If you want to add some metatags to the playlist, open the file and add in the `<playlist>`-Element:

```xml
<!-- title of the playlist -->
<title>My best tracks for the party</title>

<!-- name of the author -->
<creator>No Name Pro</creator>

<!-- website of the author -->
<info>https://dev.to/nonamepro0</info>
```

And add Meta-Tags (like Custom-Name) for the Tracks in the `<track>`-Element:
```xml
<!-- artist or band name -->
<creator>Led Zeppelin</creator>

<!-- album title -->
<album>Houses of the Holy</album>

<!-- name of the song -->
<title>No Quarter</title>

<!-- comment on the song -->
<annotation>I love this song</annotation>

<!-- song length, in milliseconds -->
<duration>271066</duration>

<!-- album art -->
<image>http://images.amazon.com/images/P/B000002J0B.01.MZZZZZZZ.jpg</image>

<!-- if this is a deep link, URL of the original web page -->
<info>http://example.com</info>
```

## Check if playable

You can open this File with VLC to check if the File is readable and playable for the XSPF Format.

You can use another app, which is listed here: https://xspf.org/applications/

## If you want a JSON (`JSPF`)
Check out: https://xspf.org/jspf/

## If you have questions
Then write a comment or check the offical informations from XSPF out: https://xspf.org/

## Another examples
Are here: https://xspf.org/quickstart/ :)
How to embed a web server inside desktop applications
Tags: csharp, dotnet, wpf, asnet
Published: 2020-07-30 12:44:27

In this article, we will see how we can embed a web server inside a desktop application. This is done using asp.net core and a WPF application, but the same experience can be ported to a Windows Form or console application without any big difference. This is a very unusual scenario, as we usually have a client that connects to the API, and both are in a different place. Anyway, there are situations where integrating a visual UI with a web server to a client may be useful. I’m thinking about embedded devices that have to be controlled remotely or a workstation that wants to share data, but I’m sure you have more imagination than me and you already found more interesting use cases 😃

For example, I used this situation for creating [jSOS](https://github.com/zeppaman/jSOS), a general-purpose API system for extending javascript capabilities, for example adding direct printing or file system access. The result is hosted on Github and it is a fully working application. Curios? Well, I will use this project as a use case to explain how to configure a WPF application for acting as a webserver!

[Read the article](https://levelup.gitconnected.com/how-to-embed-a-web-server-inside-desktop-applications-643ce3cb51bf?source=friends_link&sk=497924541d93d1144b794c5d726ba786)
Top 3 Hybrid App Development Frameworks
Tags: hybridappdevelopment, ionicapp, react, reactnative
Published: 2020-07-30 12:40:57

Technologists are always attempting to overhaul the current levels of frameworks and procedures. Much the same as they brought cell phones and portable applications in the operational casing, we are probably going to witness more creative ideas in next few years.

Discussing hybrid application, we have seen new Technologies/frameworks are coming up that claim to facilitate the lives of designers. We have shortlisted the best hybrid frame-works for you.

###React Native:###
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/jxlonfnprg4i3li6f11v.png)
Topping our rundown of hybrid application development is React Native. It empowers engineers to assemble cross platform applications with negligible exertion that allow a local like affair to the end-clients. There is a tremendous network of developers to help you in the event that you go to a state called gridlock. In spite of the fact that the structure isn’t exhorted for fledglings to attempt their hands on, the enormous network urges them to make a plunge and investigate.

###Ionic:###
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ipk1yq2vupmcmt054ouw.jpg)
Fit for building local looking applications, this structure has picked up prominence in the past and overpowering when worked in mix with AngularJS. Engineers have favored it for hybrid application advancement especially because of its broad rundown of features, predefined components and obviously, a vast network of designers and developers who are constantly prepared to encourage you.

###Phonegap:###
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/dkga0gzia90hslu1atmq.png)
Regardless, you can’t remove this exceptional framework for cross platform application development from this list. It empowers designers and developers to utilize a similar code for various platforms like android and ios to utilize their current web development knowledge to rapidly design applications that are upheld by different frameworks. Information of HTML, CSS, and JavaScript is sufficient to begin with PhoneGap application.
How to learn and practice coding efficiently
Tags: webdev, javascript, career
Published: 2020-07-30 12:25:03

Hey guys, aspiring coder here. I was wondering what is the best way to learn and practice coding?  I know to look at tutorials and online lessons, but what should I do to practice whatever new lesson I learned whatever it is about a new html tag or java-script function, etc?  Is there any websites that will help you learn and practice what you learn?  When should I start trying to build something?  Because it doesn't make sense to try to build something after only learning some basic java-script lessons and html lessons because that wouldn't be enough to make something, right?  I could be wrong but I don't know.  What if I only learn a more coding about java-script?  Honestly, I just what to know what is the best way to learn and practice coding efficiently.  And, how many hours a week should I practice it.  And how much knowledge do I need to know to build something after doing some java-script lessons.  And if there are any good websites that can help with this goal of mine.
How to choose the best Magento Development Company for your ecommerce store?

Tags: magento2upgradeservices, magento2developmentcompany, magentodevelopmentservices
Published: 2020-07-30 12:21:04

We all know that finding the best Magento Web development company in this competitive market is very tough as all have their different working styles, experiences, pros, expertise, skillset, etc. So it’s been difficult to select from such a huge pool of resources.

Read More:- https://giftsandfreeadvice.com/how-to-choose-the-best-magento-development-company-for-your-ecommerce-store/
Exporting Google Cloud Storage File List to BigQuery (CSV)
Tags: googlecloud, bigquery, gsutil
Published: 2020-07-30 12:18:36

Sometimes you need to run complex queries against the list of files storage in your Google Cloud Storage. In my case, I wanted find out which files were no longer referenced by my database and clean them up.

Here is how I did it:

## Exporting the File List to a CSV file

This simple 1-line script will allow you to the entire file list from Google Cloud Storage to a simple CSV format that can be then loaded into Google BigQuery:

```bash
gsutil ls -l gs://bucket-name/** | head -n-1 | awk 'BEGIN{print "Size,Modified,Path"}{print $1","$2",\""$3"\""}' > filelist.csv
```

Make sure to replace `bucket-name` with your actual GCS bucket name.

## Loading the CSV file to BigQuery

Before you can load the CSV File to Google's BigQuery, you first need to upload it to Google Cloud storage. You can do it by running:

```bash
gsutil cp filelist.csv gs://some-bucket/filelist.csv
```

Then, you can load it right into bigquery:

```bash
bq load --autodetect --source_format=CSV mydataset.mytable gs://some-bucket/filelist.csv
```

Make sure you change `some-bucket` to your actual bucket name, and `mydataset` and `mytable` to the target BigQuery dataset and table, respectively.

I tested this process for a bucket containing about 350,000 files and it worked flawlessly.
Code Quality Check in Magento 2
Tags: magento2, grumphp, magento, php
Published: 2020-07-30 12:07:04

# What is GrumPHP?
GrumPHP is a composer library which helps to check the code quality at the time of code commit. GrumPHP creates a git hook before your commit and validates the code quality using the set of rules provided by us(in this case a set of rules provided by Magento). It helps to write the same quality of code as Magento core developers.

# Installation of GrumPHP
 I am assuming that you have already installed Magento’s latest version and composer into your local system. Now, let’s open our terminal or command prompt, navigate to our Magento root directory and run the following command.

`composer require --dev phpro/grumphp`

This command will help us to install grumphp with all the dependencies. At the end of the installation, GrumPHP will ask to create a grumphp.yml file type ‘yes/y’ and then in the next step, we need to select the coding standard that we need to follow. For our Magento project select PHPCS. 

Now, we need to install other required dependencies like phpcs and phpmd. PHPcs stands for PHP code-sniffer whereas phpmd stands for PHP mess detector.

Execute the following command from our terminal to install these dependencies.

`composer require --dev squizlabs/php_codesniffer phpmd/phpmd` 

Once both the dependencies are installed successfully,  it’s time to set our coding standards in a grumphp.yml file. Open grumphp.yml file in any text editor and add the following content.

``` # grumphp.yml
grumphp:
   tasks:
       phpcs:
           standard: "dev/tests/static/framework/Magento/ruleset.xml"
           tab_width: ~
           ignore_patterns: []
       phpmd:
           exclude: []
           ruleset: ['dev/tests/static/testsuite/Magento/Test/Php/_files/phpmd/ruleset.xml']```
Here, inside the tasks option, we have set the standards for PHPcs and PHPmd. We can add different sets of rules based on our requirements.

Now, to check that our grumphp is working or not, navigate to our Magento root directory and check the git status for any changes using the following command.

`git status`

Now add the file that we need to commit using the following command

`Git add <your-file-name>` 

You will not get any error or warning message this point of time, because the grumphp hook only works on before commit. Let’s commit our code using the following command.

`Git commit -m <your-commit-message>`

Once we execute this git commit command the code is validated by the coding standard that we have set inside the grumphp.yml file and it will throw an error message.

Once you resolve all the issues and code quality matches with the standard, you will be able to see the success message.

Grumphp adds a hook before your commit and terminates the process to restrict the code from being committed. This will help to match the code quality and maintain the coding standards as core Magento developers. Your colleagues will also learn to write better code according to the best practices of your team.
Get the job done much easier with themes for Bootstrap 5 | Trending now!
Tags: bootstrap, webdev, design
Published: 2020-07-30 12:03:59

Amazing product just has been hunted on Product Hunt by @chrismessina 🔥

The launch is about a collection of 22 predesigned themes that were created to meet the high expectations of Admins, SAAS agencies, Ecommerce shops, Bloggers, Developers, and many more. Here is the list of templates:

 - Ecommerce
 - Admin
 - SAAS
 - Blog
 - Magazine
 - Landing Page
 - and many more!

All templates are:

 - FREE ❤️
 - MIT licensed (free for personal & commercial use)
 - Based on the latest Bootstrap 5 (with plain JS)
 - Designed by professionals with Material Design 2.0 guidelines

Look through them 👉 [Bootstrap 5 & Material Design Templates](https://www.producthunt.com/posts/bootstrap-5-material-design-templates) & support MDB if you enjoy using it! :) 

Cheers!
UCOPIA RADIUS SERVER
Published: 2020-07-30 12:00:23

Hi to all my respectful senior
I just have one query about a software name *UCOPIA*
DOES SOMEONE KNOWS ABOUT IT .ITS A RADIUS SERVER USED TO FACILITATE INTERNET SERVICE PROVIDERS.I JUST WANT TO KNOW THAT WHILE USEING MAC ADDRESS FILTERING WITHIN A NETWORK .CAN WE BYPASS THE LIST OF ALLOWED MAC ADDRESS WITHIN A NETWORK BY SPOOFING MAC ADDRESS TO THE LIST OF ALLOWED USERS.
Daily Developer Jokes - Thursday, Jul 30, 2020
Tags: jokes, dailydeveloperjokes
Published: 2020-07-30 12:00:21

---
title: "Daily Developer Jokes - Thursday, Jul 30, 2020"
description: "Check out today's daily developer joke! (a project by Fred Adams at xtrp.io)"
series: "Daily Developer Jokes"
cover_image: "https://private.xtrp.io/projects/DailyDeveloperJokes/thumbnail_generator/?date=Thursday%2C%20Jul%2030%2C%202020"
published: true
tags: #jokes, #dailydeveloperjokes
---

Generated by Daily Developer Jokes, a project by [Fred Adams](https://xtrp.io/) ([@xtrp](https://dev.to/xtrp) on DEV)

___Read about Daily Developer Jokes on [this blog post](https://xtrp.io/blog/2020/01/12/daily-jokes-bot-release/), and check out the [Daily Developer Jokes Website](https://dailydeveloperjokes.github.io/).___
### Today's Joke is...
![Joke Image](https://private.xtrp.io/projects/DailyDeveloperJokes/public_image_server/images/5e1259d54c109.png)

---
*Have a joke idea for a future post? Email ___[xtrp@xtrp.io](mailto:xtrp@xtrp.io)___ with your suggestions!*

*This joke comes from [Dad-Jokes GitHub Repo by Wes Bos](https://github.com/wesbos/dad-jokes) (thank you!), whose owner has given me permission to use this joke with credit.*

<!-- 
Joke text:
___Q___: Did you here about the witch who was off by two when casting a hex?

___A___: They failed to make the target DEAD and made them DEAF instead!
 -->
Comparing React and Vue - part 2
Tags: react, vue, javascript
Published: 2020-07-30 11:55:00

This is my 2nd post for my React & VueJS comparisons... purely for learning and understanding the basics of these 2 frameworks a little better. Here's [Part 1](https://dev.to/simonhlee97/comparing-react-and-vue-part-1-572n).

#Let's look at basic conditional statements in Vue

```html
<p v-if="show">conditional example</p>
```

In your Vue instance's data, if you set "show" to equal true, this paragraph will show in the DOM. If "show" is set to false, it hides this paragraph.

```js
var myapp = new Vue({
  el: '#my-app',
  data: {
    show: true
  }
})
```

There's also a v-else directive that you can use after a v-if.
```html
<div v-if="show">First Div</div>
<div v-else>Second Div</div>
```

Now, if you set show to false, the DOM will display the text "Second Div".

# Conditional Rendering in React

In React, to do if-else conditional rendering, it will involve writing a little more javascript compared to Vue.

Inside your render() function,  and before you return your JSX template, you'll need to assign this.state to your condition variable. You also need to create a function that includes your condition logic.

```jsx
render() {
  let {isLoggedIn} = this.state;
  const showOneButton = () => {
    if (isLoggedIn){
      return <button>Logout</button>
    } else {
      return <button>Login</button>
    }
}
```

Inside your JSX return () statement, you call that function:

```jsx
return (
      <div>
        { showOneButton() }
      </div>
    );
```

You could refactor this using Ternary Operators, or a switch statement. There's also the Logical && Operator. So plenty of options, and some are more elegant than others. Try them out and have fun!
Recursively fetch data from paginated API
Tags: javascript, typescript, webdev
Published: 2020-07-30 11:43:38

Data from APIs are commonly paginated. We also have often use cases when we have to fetch all the records from an API. For example, when we want to make data visualizations. Therefore, we have to iteratively fetch all the pages which contain the data we need.

In this example, I show you a simple recursive way to achieve that goal from the World Banks API when we want to get indicator data by country.

If you're not familiar with recursive function, A recursive function is a function that calls itself.

First, we import Axios and define our baseUrl. 
```js  
import axios from 'axios'

const baseUrl: string = 'https://api.worldbank.org/v2/country/'
```

Then we define our function. This function takes a country, indicator and page with default value 1 as it's parameters and it returns a Promise. Inside the function we define the query with our baseUrl, parameters and fetch our data and save it to a constant.
```js 
const getIndicatorByCountry = async (country: string, indicator: string, page:number=1): Promise<[]> => {  
  const query = `${baseUrl}/${country}/indicator/${indicator}?page=${page}&format=json`
  const response = await axios.get(query)  
  const data = response.data
}
```

Our data looks like this:

```js
[
  {
    "page": 1,
    "pages": 2,
    "per_page": 50,
    "total": 60,
    "sourceid": "2",
    "lastupdated": "2020-07-01"
  },
  [
    {...},
    {...},
    /*50 Items in total*/
  ]
]
```

The response from API gives us information about which page we have fetched and the total number of pages. With this information, we can recursively fetch the rest of the data.

First, we check if the number of pages in our data is higher than our page parameter is. If there are more pages we can fetch, we call the function again with the same parameters except we add up page number by one. We do this until there are no more pages to be fetched and return the data.

```js
if (data[0].pages > page) {
  return data.concat(await getIndicatorByCountry(country, indicator, page+1)) 
} else {
  return data
}
```

All in all our code looks like this. At the end the function return data from all pages.
 
```js
import axios from 'axios'

const baseUrl: string = 'https://api.worldbank.org/v2/country/'

const getIndicatorByCountry = async (country: string, indicator: string, page:number=1): Promise<[]> => {  
  const query = `${baseUrl}/${country}/indicator/${indicator}?page=${page}&format=json`
  const response = await axios.get(query)  
  const data = response.data

  if (data[0].pages > page) {
    return data.concat(await getIndicatorByCountry(country, indicator, page+1)) 
  } else {
    return data
  }
}

```
This is a simple way to fetch data recursively from an API if the data is paginated. You could do this in just a normal for loop also, nothing wrong with that, but it is also nice to try something new every now and then.

You can learn more about the World Banks API from [here](https://datahelpdesk.worldbank.org/knowledgebase/topics/125589-developer-information).
Job Search Week 23
Published: 2020-07-30 11:38:44

I worked mainly on the front-end of my portfolio this week using react. I also did a review at the start of this week so see how I'm doing in terms of my process.

Day 1

I started off the week by doing a review. This one would be my sixth review. This one was a grade organiser to count and display the grades. It went well I was asked more questions and was able to get all the essential information before starting which was an improvement on last

Day 2

On Tuesday I went back to the review to tidy it up and finish off any part that was left undone. I always do this with the reviews I go back and finish them off with the feedback in mind to make sure I remember it.

Day 3

I went back to working on my portfolio on Wednesday. I Updated the styling on the Navbar, wrote up a profile for the homepage and added some styling to the IFrame.

Day 4

Thursday I added experience component for my work experience and spent the rest of the day styling projects and experience component.

Day 5

Finally, at the end of the week, I created the education component for displaying where I learned to code and styled it using cards. After that, I created the skills component to show off my technical skills.

Summary

This week went well because I got the review done and got positive feedback telling me I had improved which is always good. I'm also getting bits and pieces of my portfolio done which is nice to do because I like working with React. So overall a good week.