teleren/devto huggingface dataset:
What hell are .phony targets?
Tags: makefile, make, phony
Published: 2022-04-10 09:40:56

---
title: What hell are .phony targets?
published: true
description: a brief introduction about Makefile configuration and its .phony targets
tags: makefile, make, phony
series: makefile
---

## A brief introduction to rules

In previous article about this Makefile serie I wrote a very very simple Makefile. Rules are written in a very very simple way:

```
target_name:
   <instruction 1>
   <instruction 2>
    ....
```

or a little more complex, but still very simple way:

```
target_name: another_target
   <instruction 1>
   <instruction 2>
    ....
```

Sometimes I met something more complex in some open source project or simply in my working projects. Here a little example:

```
target_name: another_target
   <instruction 1>
   <instruction 2>
    ....
.PHONY :target_name
```

The question is. What the hell is the `.PHONY`?

## Conflict with a file with the same name

Suppose to have this kind of rule:

```
bighello:
	echo "hello"
```

After run `make bihello` we can see prompted "hello". But what happens when a file called bighello is created in the same folder?

```
touch bighello
```

So, ... we have a rule called `bighello` and a file called in the same way. What happens now when we run `bighello`?

```
make bighello                                                                                                                                                                                 
make: `bighello' is up to date.
```

Here we have a conflict!

## Phony targets

This kind of target is not the name of a file. It is just a name for a recipe. A recipe that must be executed when you make an explicit request. This manner to write rules avoids conflicts with a file of the same name.

In other words, ... adding .PHONY to a target will prevent make from confusing the phony target with a file name.

We can rewrite the rule with the .PHONY sintax:

```
bighello:
	echo "hello"
.PHONY: bighello
```

Now it works!

## Conclusion

As said before, ... .PHONY syntax helps to avoid conflicts with a file of the same name. There is more complexity in this special targets. I think that for non complex usages of Makefile is enough. But if you want to go deep into the phony targets I suggest you to red gnu official documentation about [.Phony targes](https://www.gnu.org/software/make/manual/html_node/Phony-Targets.html).
Introducing SpeakCaptcha - A captcha that makes you speak out the answer
Tags: hackwithdg, deepgram, deeplearning, ai
Published: 2022-04-10 09:39:22

---
title: Introducing SpeakCaptcha - A captcha that makes you speak out the answer
published: true
description: SpeakCaptcha is a captcha that makes you speak out the answer and uses Deepgram's technologies to process it
tags: hackwithdg, deepgram, deeplearning, ai
---

### Overview of My Submission

SpeakCaptcha is a captcha service that makes you speak out the numbers you see in the image instead of clicking images or typing out text.

Our voice is the easiest and most powerful thing we can use, and so, this makes SpeakCaptcha one of the easiest-to-complete captchas for humans, but still keeps it hard for bots.

SpeakCaptcha is hosted online at <https://speakcaptcha.gq>, and some examples are hosted at <https://examples.speakcaptcha.gq>

### Submission Category: 

Wacky Wildcards

### Link to Code on GitHub

{% embed https://github.com/arnu515/speakcaptcha %}

### Additional Resources / Info

Demo video:

{% embed https://vimeo.com/697849856 %}
Top Python game development frameworks
Tags: python, programming, devops, gamedev
Published: 2022-04-10 09:37:35

Python is one of the top distinct advantages in the coding field for game engineers. Python structures are assisting with growing the worldwide gaming industry with brilliant functionalities and highlights. The interest and supply of vivid gadgets and web associations have helped the gaming business to arrive at a higher level. Numerous Python systems work as key instruments for the game turn of events. Python programming structures utilize creating game applications by computerizing a few assignments that usually work in-game turn of events.

Here’s a [list of Python frameworks for Game development](https://qfinancialadvisors.com/top-10-python-game-development-framework/) that would be helpful for Developers:

- Pygame
- Pykyra
- Pyglet
- PyOpenGL
- Kivy
- Panda3D
- Python-Ogre
- Ren’py
- Cocos2D
- Soybean plant bean3D
Absolute import for your React Typescript project
Tags: react, typescript, webdev, beginners
Published: 2022-04-10 09:35:57

Working on any project, one of the most annoying and confusing things has to be adding relative imports. It always creates confusion and is difficult to change whenever you ship your component to any other folder/component. We are always worried if it would break anything!!!. Absolute imports to the rescue...

So instead of importing files like `../../../components/header`, with absolute imports we can import file like `components/header` and now we don’t care about the relative positions of the file. We only care about the position of the file relative to the root of the project.

**Benefits**:

- Clean and maintainable code
- Copy pasting imports to other components is a lot more easier.
- Easily locate files when absolute imports are used.

For React projects created using [typescript](https://create-react-app.dev/docs/adding-typescript/), we have a **tsconfig.json** file, where we just want to add:

```
{
  "compilerOptions": {
    ...
    "baseUrl": "src"
  },
  "include": ["src"]
}
```
Now restart your app to see the imports working for you. You can sometimes this error see the `Cannot find module components/header`, to resolve that you just have to restart VS Code, and that should do the work.

If the issue still persists, you can Open the settings(Ctrl + ,) > search for **Import module specifier**, under Typescript settings, change setting to auto or non-relative, VS Code will decide how the import has to be done based on your tsconfig.json file. You may need to restart the IDE again for this to take effect.

Let me know in the comments if this worked for you.

Thanks.
Fixing the ligatures curse with translate attribute
Tags: html, webdev
Published: 2022-04-10 09:23:53

Use the `translate` attribute set to "no" to stop Google translate from trying to translate the ligature of your icon, and end up with readable text, instead of a nice icon.
```html
<i class="icon" tranlsate="no">trash</i>
```
If you've ever used ligatures to define your icons in an icon font, or a ready made icon font with ligatures defined, like [Google Material Icons font](https://fonts.google.com/icons), then you must faced issues with multi-lingual interfaces.

If you control the languages, then you can always

- Display the icon text with one language, and toss it under the rug (no considerations for accessibility, which can be dealt with using `aria-` and `title` attributes).
- Or you can add all possible ligatures to the icon when you create your font (with tools like [icomoon](https://icomoon.io/)), this is accessible alright, but bloats the icon font file.

But if your audience try to translate page using Google translate, your options are slimmer. The icon will appear as text. And well translated. That, might not be what you aim for. So `translate="no"` is the the best visual solution. Of course, for data integrity, you can simply let it be.

RESOURCES
- [HTML translate on MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/translate)
( JavaScript Tip 💡 ) - delete Operator
Published: 2022-04-10 09:16:53


delete operator is lesser-known operator in JavaScript. This operator is more specifically used to delete JavaScript object properties.

The delete operator removes a property from an object; if no more references to the same property are held, it is eventually released automatically.

```
const User = {
  firstName: 'John',
  lastName: 'Wick'
};
​
delete User.lastName;
​
console.log(User);
// Output: { firstName: "John" }

console.log(User.lastName);
// Output - undefined
```


If the property which you are trying to delete does not exist, delete will not have any effect and will return true.

If a property with the same name exists on the object's prototype chain, then, after deletion, the object will use the property from the prototype chain (in other words, delete only has an effect on own properties).

Note - delete operator doesn’t delete property value rather the property itself.
#25 Guess The Output ???
Tags: javascript, beginners, programming, webdev
Published: 2022-04-10 09:10:05

⭐ Reply with correct answer & Bonus points for explanation ⚡

💡 Correct answer with detailed explanation will be updated in comments after 48 hours.

```
const numbers = [35, 2, 4, 11, 7];
numbers.sort();
console.log(numbers[2]);
```
JOBPkdo- a smart voice search based platform to find Intern, Jobs
Tags: hackwithdg, javascript, nextjs, deepgram
Published: 2022-04-10 08:40:06

### Overview of My Submission
JOBPkdo is a platform where a person can find interns, freelance projects, remote jobs, and much more that comes through Twitter daily. Users can share jobs with their friends and save them for later.
Now JOBPkdo also allows users to search for their favorite jobs through the smart voice search.

### Why JOBPkdo is developed?
We all know Linkedin is a platform where people get internships, and remote jobs but opportunities are everywhere. I have seen a lot of people who got their first job or intern in startup companies through just Twitter DMs or cold emails. Don't you think this is awesome?🤔

We can't follow everyone but there are still a lot of jobs related to a particular field such as full-stack, marketing; which are out of our reach. So through this platform, I tried to build a space where a person can search for a specific job, share it with friends & save it for later.


### Submission Category: 
Accessibility Advocates


### Link to Code

- 
GitHub Link :- [https://github.com/Gulshanaggarwal/jobpkdo](https://github.com/Gulshanaggarwal/jobpkdo)

- App URL :- [https://jobpkdo.netlify.app/](https://jobpkdo.netlify.app/)



### Additional Resources / Info


![Voice Search](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jp4uuff3t828pc52zjqk.png)


![Login Page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qbibapzjhd34vhzacin1.png)


![Saved Jobs](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sl12dqbdsqqzso0i3vsz.png)



### Challenges

While using Deepgram most of the challenging thing I faced was not having appropriate transcription result for a specific job search output. For example, If a user speaks 'javascript jobs' then the transcription result was too poor. It consumed a lot of time and after having a call with Deepgram's product manager I got about the **keyword feature**. However it is still not accurate 100% but now in most cases, transcription output matches the user's requirement.

### Why I'm participating in Deepgram Hackathon

For the last 3 months, I have been continuously participating in hackathons and by participating in hackathons I have a chance to build something useful. When I participate in hackathons I have a strong enthusiasm to build something cool that can help others and need to complete the project by a given deadline which is necessary to learn something new after a time.

### My Deepgram Use-Case
I had never thought of voice base search functionality but with the announcement of the hackathon, I got a  new idea that helped me to enhance user accessibility.





### Conclusion

By Participating in the Deepgram's hackathon I got a chance to work with real-time data stream technology SOCKETIO which I have never tried, also to solve my problem I talked with their product manager which was an amazing session.

If you like the post, then don't forget like, comments & let's have some fun over the [Twitter](https://twitter.com/gulshanagg333)
Set Up OneDev Issue Labels
Tags: devops, git
Published: 2022-04-10 07:48:45

[OneDev](https://onedev.io) is designed to be flexible, and this is no different for issues. In this tutorial, I will show how to customize issue labels.

OneDev issues by default do not have label field, as custom fields work much better, for instance, you may have *Type* field with values *Feature/Bug/Task*, or *Subsystem* field with values *Client/Server/Api*, etc. However if you do want to have labels, here is how to do it:

1. Login as administrator, and switch to custom issue fields page

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

1. Add a custom issue field like below:

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

1. Continue to add available choices to include all possible label values, for instance:
  
    ![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mskf3u5s6ondr1kjuc7o.png)

1. Now create an issue and you will see that we can specify labels:

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

1. To specify labels for existing issues, batch edit them and choose Labels field to edit:

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

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

1. By default newly created field is not displayed in issue list or board. This can be changed by configuring display fields option in issue list and board respectively:

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

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

That’s all. Thanks for watching!
Finished first JavaScript project
Tags: javascript, webdev, beginners, programming
Published: 2022-04-10 07:47:43

Hello, people of dev! As of today just finished Rock, Paper, Scissors my first JavaScript toy project. It may not seem like much but this is the first project that mostly utilizes JavaScript and was done mostly by me and with help from the TOP discord community (no YouTube tutorials or other forms of handholding!). Although I finished this project there are some improvements to be made. Firstly I would like to implement more ways to not repeat myself as much, such as forEach method on my buttons which were created by individual event listeners. As you can probably tell I am not the best blogger so I will keep this short and sweet. Thank you for taking the time to read my first blog post!

**A few things I learned while doing this project.**

- Using breakpoints in Chrome DevTools for debugging.
- DOM (Document Object Model) Manipulating along with events.
- Learning more about the call stack as I had functions within functions.
- Callback functions.
- More practice with CSS using flexbox.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/11nyy3oiz12dwt6z3c35.PNG)
Developer on Github - Your GitHub Activities Are Now Relevant
Published: 2022-04-10 07:24:28

[CodeSpread’s](https://codespread.io) unique matching algorithm pairs buyers and their ideal **developer**: based on the buyer’s needs and the developer’s **GitHub** activity.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/77yqkvmupvzub1qy7exo.jpg)
The Next Generation of Customer Support Systems
Tags: hackwithdg
Published: 2022-04-10 07:19:49

### Introduction

For quite sometime, I have been working in the domain of designing customer support systems for B2B companies. I honestly believe that effective customer support is the backbone of any good business today. 

![Customer-Support](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/amuh671quufalaq723bt.jpg)

For past few weeks, we have been discussing in our team about new ideas for customer support and how can we take it to the next level. Recently, I got to know about Deepgram from the hackathon on DEV. And It clicked me immediately that how we can leverage it to build the next generation of customer support systems.

### My Deepgram Use-Case

Imagine that you use a software for doing some critical work everyday. Now one day you encounter a problem and the software starts to misbehave. After some unsuccessful attempts to try and fix it, you decide to raise a ticket on their support portal. When you go the support page, It presents you with a big form which asks for so many details about your problem. 

The above mentioned scenario is pretty common and almost all the companies have a similar support page for their customers. Now it may sound reasonable to fill up the details and raise a ticket but this is not the ideal user experience for a customer who is already irritated because of a not-working software. Also, written details will not provide the sentiment of the customer to the companies as well.

What if the customer can just speak about the problem he is facing instead of manually filling up a form? What if the companies can analyse the sentiment in customer's tone and decide the priority of the issue based on that?

### Dive into Details
The system would utilise Deepgram's speech to text feature. Customers will need to file their complaints in the form of audio clips. The support portal itself can have a record button which customers can click and start explaining their problem. The backend will convert speech to text and analyse the problem to create a support ticket. We can have AI for extracting relevant details from the transcript of the audio and create a support ticket for customer. 

Another feature will be to do sentiment analysis based on the customer tone, statistics on the time taken to explain and it will be used to determine the priority of the ticket.

We can also provide this feature only to the premium support customers so that they do not need to spend time filling up forms for frequent usecases.


### Conclusion
Seeing the documentation of deepgram, I can definitely say that it's easier to integrate with it compared to other platform. This hackathon gave me good amount of exposure to the APIs and features provided by Deepgram. We are definitely going to try this on our customer support portal as a pilot program and we will monitor how customer responds to it.
&nbsp;
Nonetheless, evolution is a continuous process and we will be experimenting with new ways to explore more dimensions of Customer Support.
&nbsp;
Thanks for giving it a read guys. Cheers 🍻
What is your Headless CMS of choice ?
Tags: webdev, beginners, discuss
Published: 2022-04-10 07:06:54

Hello everyone. So recently I discovered the world of CMS like Sanity or GraphCMS.

Well, I already knew WordPress before but never paid attention to it since I wanted to learn how to code before learning how to make websites, so yeah anyway. 

Do you have a preference for CMS in particular? 

If yes, then which one and why? 

Is a CMS more suitable for a specific task than another one?

Please feel free to share your knowledge and opinions with me in the comments.
React: Protecting your variables in production by using Environment Variables
Tags: react
Published: 2022-04-10 05:35:55

##What is Environment Variables?
It is a convention to store sensitive information (API Keys, DB URLs, API URLs...) with in your application  by wrapping it in a .env file.

##How to use Environment Variables?
create a .env file in the root directory and add your variables there.
environment variables are loaded from .env as long as they're prefixed with REACT_APP_, but not otherwise.
For example, having an environment variable named REACT_APP_PASSWORD will be exposed in your JS as process.env.REACT_APP_PASSWORD
Exemple:
`const myPassword = process.env.REACT_APP_PASSWORD
console.log(myPassword)`

##Is it secure to store sensitive data in Environment Variables?
Client sade code is not secure for storing sensitive information, with just Chrome devtools you can easily reveal these Environment Variables.
>WARNING: Do not store any secrets (such as private API keys) in your React app!

>Environment variables are embedded into the build, meaning anyone can view them by inspecting your app's files.
From [React official documentation]
(https://create-react-app.dev/docs/adding-custom-environment-variables/)

The Environment Variables are visible in browser because of source sourcemap file, just open your devtools in your Chrome and you will see the code in plain text
![devtools](https://raw.githubusercontent.com/CapsCode-Website/blogfiles/master/reactjs/how-to-hide-reactjs-code-from-browser/1.JPG?raw=true)

##What is sourcemap file?
>A sourcemap is a mapping between the generated/transpiled/minified JavaScript file and one or more original source files. The main purpose of sourcemaps is to aid debugging. Basically, if there’s an error in the generated code file, the map can tell you the original source file location.

##How to protect your Environmental Variables in production?
- tell Git ignore ".env"files when committing your project to the GitHub repository by adding this line of code to your".gitignore" file in your root directory,
`.env*`
- force react ignore sourcemap by adding this line of code to your .env file
`GENERATE_SOURCEMAP = false;`