teleren/devto huggingface dataset:
Linktree | Made with Gatsby JS
Published: 2022-06-02 10:23:51

![Linktree | Made with Javascript | Gatsby JS](https://res.cloudinary.com/madewithjavascript/image/upload/v1654165050/large_linktree_made_with_gatsby_js_665ace4c91.png "Linktree | Made with Javascript | Gatsby JS")


### Meet Linktree, the free bio link tool used by the world’s best brands, creators and influencers.

> The Only Link You’ll Ever Need
> 
> Connect audiences to all of your content with just one link
> 
> ### Use it anywhere
> Take your Linktree wherever your audience is, to help them to discover all your important content.
> 
> ### Link to everywhere
> Linktree is the launchpad to your latest video, article, recipe, tour, store, website, social post - everywhere you are online.
> 
> ### Collect payments
> From tips for your content, to donations for your projects, let your fans & followers support you in monetizing your passions.
> 
> ### Easily managed
> Creating a Linktree takes seconds. Use our simple drag-and-drop editor to effortlessly manage your content.
> 
> ### Safe, trusted, private
> Privacy is non-negotiable. Linktree is committed to protecting the privacy of you and your visitors.
> 
> ### Customize your Linktree
> Make your Linktree pop. Embody your brand through custom colors, fonts and images.
> 
> ### Analytics and Insights
> Gain valuable insight into your traffic and discover which content is performing with your audience.
> 
> ### Powerful Third-Party Integrations
> Collect email subscribers, connect with third-party analytics and remarket to your audience.

## Check out more such amazing projects on our website

[Made with Javascript](https://madewithjavascript.club)

## Want us to feature your project

[Submit your Project to Made with Javascript](https://madewithjavascript.club/submit-project)


You can also write to us for any of your queries at:

[Email Made with Javascript](mailto:madewithjavascript@gmail.com)

## Project already shared on our social media handles.

| SocialMedia | SharedLink |
| ----------- | ---------- |
| Twitter | [Linktree on Twitter](https://twitter.com/withjavascript/status/1532305506936705025?s=20&t=gTorCk-zE0TZRHCzEI8VHg)
 |
| Medium | [Linktree on Medium](https://medium.com/@madewithjavascript/linktree-made-with-gatsby-js-cb741caa060e)
 |
| Facebook | [Linktree on Facebook](https://www.facebook.com/madewithjavascript/posts/pfbid0cKQmZrCBvLf5pnMtCCrNr8Wfw55TUBTbj3fhNmawGizKE4Qt2zbAWxWaVCKM95AQl)
 |
| Tumblr | [Linktree on Tumblr](https://www.tumblr.com/blog/view/madewithjavascript/685941974207971329?source=share)
 |
| LinkedIn | [Linktree on LinkedIn](https://www.linkedin.com/feed/update/urn:li:activity:6938071513191395328)
 |
| Pinterest | [Linktree on Pinterest](https://pin.it/eSCYloe)
 |

Filled Under:

 - [Made with Javascript](https://madewithjavascript.club)    
 - [Made with Gatsby JS](https://madewithjavascript.club/categories/gatsby-js)

Make sure to give this post ❤ 50 ❤ hearts, click the 🦄 unicorns 🦄 and follow 👉 @madewithjavascript 👈 for more such awesome showcases. Show you love for the people who have worked so hard!
What makes a good UI/UX design?
Tags: ux, ui
Published: 2022-06-02 10:19:59

The [UI/UX design](https://datashaft.in/best-ui-ux-design-company-in-chennai/) can be achieved through a number of methods but studying demographics and researching the competition are key. A good interface must be intuitive, easy to use and efficient. You need to give the user a clear direction on what they need to do so that they can be successful using it the first time around. It should be immediately obvious how to interact with the design. It’s also important that you avoid sending mixed messages about what input is required from the user and where to find that input. Clear visual design is also crucial for a great interface.  A good interface will clearly show what is click-able and where the controls are within an app or website.
Icons 8 | Made with Nuxt JS
Published: 2022-06-02 10:10:07

![Icons 8 | Made with Javascript | Nuxt JS](https://res.cloudinary.com/madewithjavascript/image/upload/v1653497131/large_icons_8_made_with_nuxt_js_5398b6fc6b.png "Icons 8 | Made with Javascript | Nuxt JS")


### Free Icons, Clipart Illustrations, Photos, and Music

> Download design elements for free: icons, photos, vector illustrations, and music for your videos. All the assets made by designers → consistent quality ⚡️
> 
> ### Icons, illustrations, photos, music, and design tools
> 
> #### Free icons
> 
> #### Free design tools
> 
> #### Free illustrations
> 
> #### Free photos
> 
> #### AI-powered
> 
> #### Music

## Check out more such amazing projects on our website

[Made with Javascript](https://madewithjavascript.club)

## Want us to feature your project

[Submit your Project to Made with Javascript](https://madewithjavascript.club/submit-project)


You can also write to us for any of your queries at:

[Email Made with Javascript](mailto:madewithjavascript@gmail.com)

## Project already shared on our social media handles.

| SocialMedia | SharedLink |
| ----------- | ---------- |
| Twitter | [Icons 8 on Twitter](https://twitter.com/withjavascript/status/1532111538819158020?s=20&t=DCzlC_0JnK06SlLfiMZhrQ)
 |
| Medium | [Icons 8 on Medium](https://medium.com/@madewithjavascript/icons-8-made-with-nuxt-js-d94ac363f535)
 |
| Facebook | [Icons 8 on Facebook](https://www.facebook.com/madewithjavascript/posts/pfbid02C39NqDzDAT58JM3ezdiRfqgZtTBNScJWPsSdPvz487C1gW4XsGYoipFK1oPcMevGl)
 |
| Tumblr | [Icons 8 on Tumblr](https://www.tumblr.com/blog/view/madewithjavascript/685941105427169280?source=share)
 |
| LinkedIn | [Icons 8 on LinkedIn](https://www.linkedin.com/feed/update/urn:li:activity:6938068190119829504)
 |
| Pinterest | [Icons 8 on Pinterest](https://pin.it/wwMdNg1)
 |


Filled Under:
 - [Made with Javascript](https://madewithjavascript.club)    
 - [Made with Nuxt JS](https://madewithjavascript.club/categories/nuxt-js)

Make sure to give this post ❤ 50 ❤ hearts, click the 🦄 unicorns 🦄 and follow 👉 @madewithjavascript 👈 for more such awesome showcases. Show you love for the people who have worked so hard!
Setting up a new dev machine
Tags: discuss, webdev, productivity, tooling
Published: 2022-06-02 10:03:43

As developers we have had to set up our development environment from scratch at least once. 

Whether it's after getting a new machine or switching your operating system (as I have done a couple if times 😂) could you share

- The first tool/software you setup?

- your must-have tools and environment variables?
Python daily exercise 2: string
Tags: beginners, python, string
Published: 2022-06-02 09:51:31

## Question:
- Write a program to create a new string made of an input string’s first, middle, and last character.
- Given
```python
str1 = "James"
```
- expected output
```python
Jms
```

## Solution
### My initial solution(Fail)
```python
str1 = "James"  
length_of_name = len(str1)  
print(str1[0]+str1[length_of_name/2]+str1[-1])
```
### Recommend solution
```python
str1 = 'James'
print("Original String is", str1)

# Get first character
res = str1[0]

# Get string size
l = len(str1)
# Get middle index number
mi = int(l / 2)
# Get middle character and add it to result
res = res + str1[mi]

# Get last character and add it to result
res = res + str1[l - 1]

print("New String:", res)

```
## Reflection
- This time I haven't figure out the correct solution
- It just keep showing TypeError: string indices must be integers
	- I have also try the string with even number
- After seeing the recommend solution, I just realise the type of "length_of_name/2"  is not default to integers, it doesn't matter the length_of_name is even number or not
	- and confirm by using type() as follow
```python
str1 = "Jamees"  
length_of_name = len(str1)  
half = length_of_name/2  
print(length_of_name)  
print(f"half = {half}")  
print(f"the type of half is {type(half)}")  
#print(str1[0]+str1[half]+str1[-1])
```


![The length of a string is 6, the half of the length is 3.0, it is a float type](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m5u8vntiwtn1ngxf0yha.png)
### So, what to learn is 
After the / operator, even the outcome is an integer in maths, its type is a float, must be changed to int for index

exercise from [PYnative](https://pynative.com/python-string-exercise/)
[CSS Trick] Mask Image
Tags: css
Published: 2022-06-02 09:50:27

We can use css mask to change the svg icon color.

```html
<h1 class="text">AIRCRAFT</h1>
```
```css 
.text::before {
  content: "";
  display: inline-block;
  height: 25px;
  width: 25px;
  margin-right: 8px;

  background-color: #eb2f64;
  -webkit-mask-image: url(../img/SVG/aircraft.svg);
  -webkit-mask-size: cover;
  mask-image: url(../img/SVG/aircraft.svg);
  mask-size: cover;
}
```

Result:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6qdmse703ux85nbtzvwu.png)
Arty Farty - AI Song Contest 2021
Published: 2022-06-06 13:00:38

---
title: Arty Farty - AI Song Contest 2021
published: true
date: 2022-06-02 09:30:00 UTC
tags: 
canonical_url: https://dataroots.io/research/contributions/arty-farty-4
---

Since 2020, dataroots participate in the AI Song Contest. Since the contest is around the corner and the team is working hard, we thought to tease with our[previous participations!](https://www.aisongcontest.com/participants/beatrootsai-2021)

For the 2021 submission, Beatroots upped their game and studied the Jukebox model released by OpenAI. This model opened many opportunities to sample musical audio waves and complete musical ideas in the style of many genres and artists. Beatroots fine-tuned the model with curated similar sounding songs and picked the most promising sample it could generate. The final sample was then remixed into an actual song, which Beatroots named Robotic Love. An open source Style GAN trained on 70s sci-fi comics created an accompanying music video.
The awesome speech recognition toolkit: Vosk!
Tags: python, machinelearning, node
Published: 2022-06-02 09:28:29

## What is Vosk?

Vosk is a speech recognition toolkit supporting over 20 languages.
The language model is 50MB light and easy to embed. So you will easily can do speech recognition completely offline.

Vosk provides bindings for Python, Java, C#, and also Node.js!

- Supports 20+ languages and dialects 
- Works offline, even on lightweight devices - Raspberry Pi, Android, iOS

See [Vosk's page](https://alphacephei.com/vosk/) for detail.

## Let's try!

### Install Vosk

Now you can try Vosk with Python!
Vosk can be installed by pip. However, I prefer [poetry](https://python-poetry.org/), so I'll install it there.

> :warning: Poetry will try to install the latest version (0.3.38). But that version is not compatible with MacOS. So I installed it by specifying the version to be installed by pip. (as of 2022-05-19)

And you can download the python module from [Vosk examples](https://github.com/alphacep/vosk-api/blob/v0.3.32/python/example/test_simple.py).

### Download the language model

The language model is available [here](https://alphacephei.com/vosk/models). Extract the zip file and place it.

### Prepare an audio file

You will need an audio file in the correct format - PCM 16khz 16bit mono.
> If you are English speaker, you can get [the test voice](https://github.com/alphacep/vosk-api/blob/v0.3.32/python/example/test.wav) from Vosk example.

You can convert with [ffmpeg](https://ffmpeg.org/).

```shell
ffmpeg -i my_voice.wav -ar 16000 -ac 1 -f s16le my_voice_16khz.wav
```

### Run Vosk

Run the python module...

![Run in terminal](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9crv5rjm4ywx4rs7lj4z.gif)

Done it!! :tada:
There are some differences. But, Vosk also recognized Japanese Kanji characters. :mahjong:
> I'm a Japanese speaker, so recognized a Japanese audio file.
> The text of the audio is "ご視聴ありがとうございました！グッドボタンとチャンネル登録よろしくお願いします！".

The complete commands is below.

```shell
poetry add vosk@0.3.32
curl -O https://raw.githubusercontent.com/alphacep/vosk-api/v0.3.32/python/example/test_simple.py
curl -O https://alphacephei.com/vosk/models/vosk-model-small-ja-0.22.zip
unzip vosk-model-small-ja-0.22.zip
mv vosk-model-small-ja-0.22/ model/
poetry run python test_simple.py my_voice_16khz.wav
```

---

The codes are on GitHub and Replit.
I hope you'll enjoy Vosk too! Thank you.

{% embed https://github.com/kama-meshi/HelloVosk %}

{% embed https://replit.com/@kama-meshi/HelloVosk %}
button onclick popup video player using react
Tags: javascript, react, programming, discuss
Published: 2022-06-02 09:22:16

I got response from api and stores it in usestate variable then how to pass video url ( api res) as source for video player in react js.

check here : [stackoverflow question](https://stackoverflow.com/questions/72471979/display-row-wise-button-onclick-popup-video-player-using-react)
How do you debug working with PHP? + Search Results
Tags: debug, productivity, php, discuss
Published: 2022-06-02 09:12:09

---
title: How do you debug working with PHP? + Search Results
published: true
description: What is you method for debugging when working with php?
tags: debug,productivity,php,discuss
---

### How are you debugging your code if you are working with PHP?

What is the most efficient way to debug code and find errors when coding in different projects with PHP?
ways to Disable WooCommerce Reviews Tab In WordPress
Published: 2022-06-02 09:08:20


When working with plugin like WooCommerce, it is hard to avoid customization, a lots of it. In my recent project, I adopted WooCommerce to achieve product management without shopping cart experience. You guessed it, disable and hide so many options.

**Option 1: Using a Plugin**

Disable Comments is a plugin that allows administrators to globally disable comments on any post type, including custom post type. As review is just using comments feature for Product (custom post type). So we can disable product review and hide the tab in product page by just disabling comment on Product.

**Option 2: woocommerce_product_tabs filter**

The other way is to use woocommerce_product_tabs filter provided by WooCommerce plugin. The filter gives us direct control to hide the tab(s) we don’t need.

```
// Disable product review (tab)
function woo_remove_product_tabs($tabs) {
	unset($tabs['description']);     			// Remove Description tab
	unset($tabs['additional_information']);  	// Remove Additional Information tab
	unset($tabs['reviews']); 					// Remove Reviews tab

	return $tabs;
}

add_filter( 'woocommerce_product_tabs', 'woo_remove_product_tabs', 98 );

```

**Reference Blog**
[ways to Disable WooCommerce Reviews Tab In WordPress](https://www.gomahamaya.com/disable-woocommerce-reviews-tab/)
An error occured while trying to create a file in the destination directory: Access is denied
Tags: discuss, vscode, webdev, errors
Published: 2022-06-02 09:05:26

I am using VS Code in my windows 10 desktop to develop Web projects. For some days, an error dialogue box popped up suddenly with the following notice:

![An error occured while trying to create a file in the destination directory: Access is denied](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5hbctvsn26cfel6v71p7.png)

The popup persisted for almost a month and it annoyed me.
I **tried** to resolve that by updating and reinstalling VS Code, and by deleting the **000unins.exe** file in the destination folder. But _**the error wasn't resolved.**_

**Here is what worked for me:**

1. When I run VS Code as administrator the error didn't occured. So I set VS Code to run as Administrator. [See how to do that](https://dev.to/crat_bot/set-windows-applications-to-run-as-administrator-307n)
2.  I uninstalled VS Code and downloaded [VS Code ZIP](https://code.visualstudio.com/docs/?dv=winzip) file instead of the installer and unzipped it in my AppData\Local\Programs folder. It's been working fine and the error hasn't occured.
Get $100 worth of credits for Access Node API
Published: 2022-06-02 09:03:12

To empower blockchain developers in the space, we’re giving away $100 credits to anyone who needs access to on-chain data. By using our access node API, any developer or institution can interact with major PoS blockchains instantly, reducing development complexity and cost.

To claim your credits, follow these three simple steps:
1. Follow RockX on [LinkedIn](https://www.linkedin.com/posts/rockx-official_blockchain-developer-dev-activity-6938015733335359488-7ZB8?utm_source=linkedin_share&utm_medium=member_desktop_web) to stay up to date with our new products: 
2. Create an account on our portal https://bit.ly/3M0fPS8
3. Fill in the form to claim your credits: https://lnkd.in/duxWziyk

The new access node portal enables anyone to easily subscribe, manage, and make use of API keys with just a few clicks. 
Try it out for yourself to see how simple it is at access.rockx.com
How To Fix Defer Parsing Of JavaScript In WordPress
Published: 2022-06-02 08:57:25


**Why Should You Defer Parsing of JavaScript?**

When you open a website, your browser will receive the site’s content from the server and loads the code from top to bottom. However, if it finds JavaScript, the loading process will be interrupted until it finishes downloading all the JavaScript.

To solve this issue, you can defer parsing of JavaScript, which allows the browser to load the full content without waiting for the scripts to load. By implementing this task, JavaScript parsing won’t negatively affect your website’s loading time.

**How to Defer Parsing of JavaScript in WordPress?**

This section will show you a step-by-step guide to defer parsing of JavaScript. To top it off, we’ll also show you how to analyze the problem and test the changes after applying the task.

**Analyze the site**

To find out whether you should defer parsing of JavaScript in your WordPress website, analyze it using site speed testing tools like GTMetrix. As an example, here is the performance result of a website before implementing the method.
It shows that there’s an issue regarding JavaScript parsing, which means the website site needs to defer it.

**Defer Parsing of JavaScript Without plugin (Only For WordPress users)**

For that, you need to log in to your wp-admin. Then click over appearance then theme editor. Inside that find the Function.php file and paste the following code

`function defer_parsing_of_js ( $url ) {
if ( FALSE === strpos( $url, ‘.js’ ) ) return $url;
if ( strpos( $url, ‘jquery.js’ ) ) return $url;
return “$url’ defer “;
}
add_filter( ‘clean_url’, ‘defer_parsing_of_js’, 11, 1 );`

**Reference Blog**
[How To Fix Defer Parsing Of JavaScript In WordPress](https://www.gomahamaya.com/defer-parsing-of-javascript/)
What is Identity : Auth0
Tags: identity, security, auth0
Published: 2022-06-02 08:52:55

**What is this identity?**
Basically you are interacting in the tech world in lots of platforms, websites etc. Everything has different codes but the most important thing is that you are using services and get logged into it from websites, apps , watches and so on. So, how do they identify that it is you? Surely, there is a database from where they check your details and make you logged in. This is thus a very complex matter . 
Auth0 here solves the problem for your organization providing multiple security options. 

- Auth0 has ways of abstracting away, the details of how you connect to multiple sources of identities. Every identity provider will have a different style of doing their identity transactions, and we abstract all of that away from you.

- Auth0 gives you a way of dealing with user management lifecycle. Like they have user representations. Moreover, they have features for dealing with the lifecycle of users and similar. They also have a very large number of SDKs and samples which help you to cross the last mile so that when you are using a particular development stack, you can actually use those components to connect to Auth0 in a way that is aligned with the idiom that you are using in that context

- Auth0 gives you the degree of customizability that is absolutely unprecedented in the industry.

<img src="https://c.tenor.com/Tvd3VKwtse0AAAAC/cat-cute.gif">
I used to hate typescript, now it's my favorite 💖
Tags: typescript, javascript, webdev, programming
Published: 2022-06-02 08:44:02

Hello, world, am Evans based in Africa - Kenya, I have 4+ years of experience in software dev and I love Typescript 💖 💖 💖.

Anyway I created the entire https://melbite.com with react and typescript.

### Why did I choose Javascript
* Javascript is awesome.
* It provides my daily meal 🥰

### Why I hated Javascript.
* Did not catch bugs in real-time and I used to write poor code.

### Why I loved Typescript.
* Catches bugs effectively.
* Clean syntax and self-documented code.
* Easy to collaborate with a team for no one will write poor code.

You can read more on this kind of articles on [melbite](https://melbite.com)

Why do you love your stack and how has it helped you?
🛑 STOP thinking about React lifecycle methods.
Tags: react, javascript, webdev, programming
Published: 2022-06-02 08:41:02

In this post let's talk about the paradigm shift from lifecycle methods to state synchronization and hooks in ReactJs.

When class components were a thing in ReactJs (Well it still is, but no one likes them anymore), we use to think a lot in terms of mouting, unmounting, and lifecycle methods.

![lifecycle diagram](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/340r7t1rsjtvyqbgjwef.png)

Whenever a class component mounts, the lifecycle methods are called in following sequence: constructor → render → DOM and refs update → componentDidMount

But then came React Hooks, and we started to think in terms of dependency array.

And, often times we ask:

> What is the hooks equivalent to [some lifecycle method]?

The quick answer is that hooks are a paradigm shift from thinking in terms of "lifecycles" to thinking in terms of "state and synchronization with DOM".


![lifecycles!=hoooks](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j2t7c1ymoiavzdjci11m.png)

Trying to take the old paradigm and apply it to hooks just doesn't work out very well and can hold you back.

```js
useEffect(fn) // fn invoked on all updates

useEffect(fn, []) // invoked on mount

useEffect(fn, [a, b, c]) // invoked if any of the members of the array are updated
```

The above snippet is not the right way to think about React hook.

Lifecycles are gone, but we still think of useEffect with empty dep array as componentDidMount, and that’s not the right way to think about React Hooks.

Now I want to present to you the right way to think about react hooks.

## State Synchronization

See, the question is not "when does this effect run" the question is "which state does this effect synchronizes with"

```js
useEffect(fn) // useEffect with no dep array, sync with all state

useEffect(fn, []) // useEffect with empty dep array, sync with no state

useEffect(fn, [stateA, stateB]) // useEffect with stateA and stateB in dep array sync with stateA and stateB.
```

And that’s how you should think about React Hooks.

-------------

Hope, you found this video useful, and if so, make sure show your support by subscribing.

I also run a weekly newsletter, so you can join me there also: https://swastikyadav.com

Thank You!
What were your reasons to shift to Linux OS from a MAC/ Windows OS ?
Tags: linux, discuss, opensource, ubuntu
Published: 2022-06-02 08:30:21

A lot of my friends have suggested me to shift to Linux operating system due to a lot of privacy advantages and it being developer friendly as well as it being more useful for when we start working in the industry. I am currently using windows operating system and am able to get most of my work done with it. Plus I heard we need to manually install a lot of drivers for our devices for Linux OS which would make it complex for me to get started as a beginner.

I do want to try it though but I am not convinced if I should really switch to it. I would love to know your thoughts/ advantages you felt there were on switching from a MAC/Windows OS to Linux. Also, please suggest some good/ beginner friendly ways to get started with Linux and which was the first Distro you used? I am sure other beginners who are trying to get started with it, will also benefit from this thread!

Thank you if you commented :smiley: