teleren/devto huggingface dataset:
Format C/Cpp files automatically on VS Code
Tags: vscode, tutorial, cpp, settings
Published: 2022-04-10 20:01:51

The year is 2022, you're already know some things about programming and your college is teaching you logics with Cpp.

The recommended IDE that they show you is something too to even bother to look, so okay, let's code this on VS Code.

![Cat Typing GIF](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/twxlvixc93j8vmm4zp53.gif) 

##⚠ The problem 

You got everything set up and looking great with the compiler and VS extensions, but as you begin to code you notice that your code isn't formatting itself.

You already got Prettier + ESLint working fine, but they don't offer support C/Cpp. **So, how do i format only C/Cpp code with another formatter?**

##✔ The solution

Searching around the web i found out that the VS Code C/Cpp support extension already comes with **clang-format**.

That being said, we doesn't need to install any other thing than the spoken extension, **to make our code indent automatically and customize how that formatting is gonna be.**

1. Open your VS Code and press `Ctrl + Shift + P` to open the Command Pallete;
2. Type 'JSON' and click on the 'Open Settings (JSON):
![VS Code Options Screenshot](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5sbiim6fkuak1r1own8z.png)
3. With the VS Code `settings.json` open, we can make clang-format as our default formatter **(for C/Cpp language only)**, adding the following code:

```javascript
"[c]": {
    "editor.defaultFormatter": "ms-vscode.cpptools"
    //☝🏼 Select the MS extension as defaultFormatter
  },
  "[cpp]": {
    "editor.defaultFormatter": "ms-vscode.cpptools"
  },
```

🥳_That's it! Your code will now auto format!_ 🎆🙌 
But... How i customize this? 🤔

##🎨 Custom your formatting

Clang-format has a lot of options for your format your code the way your prefer more. You can check their documentation in this 👉🏽 [link](https://releases.llvm.org/12.0.0/tools/clang/docs/ClangFormatStyleOptions.html) to see all the options you have.

**How to set this options on your VS Code:**

1. Follow the same steps as above to open your `settings.json`,
and put your options inside this code:

```javascript
"C_Cpp.clang_format_fallbackStyle": "{optionOne: true, optionTwo: 2 }"
```

2. All the options needs to be inside this quotes, so **you can't format this object in more lines than 1**. Even if it is an object.

This are the configs that I find the best for my use:

```javascript
"C_Cpp.clang_format_fallbackStyle": "{ BasedOnStyle: Google, IndentWidth: 3, IncludeBlocks: Merge, IndentGotoLabels: true, KeepEmptyLinesAtTheStartOfBlocks: true}"
```
**If you wanna check the settings i use on my VS Code & Terminal, you can check my 👉🏽 [repos](https://github.com/Thiagoow/My-Settings) on GitHub! 😊**

##👨🏻‍💻 Special thanks & credits to:
Other devs on Stack Overflow who faced the same problem &/or helped to find solutions. ✌🏼
How to Change the Favicon in Gatsby
Tags: gatsby, favicon, tutorial
Published: 2022-04-10 19:51:06

_PHOTO CREDIT: [Figure: Favicon, Author: Seobility - License: CC BY-SA 4.0](https://www.seobility.net/en/wiki/Favicon)_

---

In this tutorial, if you don't know what a favicon is, it's briefly described, and then I go step by step on how you can change the favicon in your Gatsby project to something else, instead of the default Gatsby icon.

---

## What is a Favicon?

Here is a great explanation of what a favicon is from the [MDN web docs](https://developer.mozilla.org/en-US/docs/Glossary/Favicon):

> A favicon (favorite icon) is a tiny icon included along with a website, which is displayed in places like the browser's address bar, page tabs and bookmarks menu.
>
> Usually, a favicon is 16 x 16 pixels in size and stored in the GIF, PNG, or ICO file format.

[On our blog](https://whenshitbreaks.com), you'll see that the favicon is a piece of a shit💩

---

## How to Change the Favicon

### Steps

**1. Install the plugin `gatsby-plugin-manifest` if it's not installed already.**

```
// shell
npm install gatsby-plugin-manifest
```

If you had set up Gatsby with any of the starter packs, e.g. `gatsby-starter-default`, `gatsby-starter-blog`, then this plugin is most likely already installed. Otherwise, if you initialized your Gatsby project with the command `npm init gatsby`, selecting the option to generate a manifest file will have installed this plugin. You can check if the plugin is installed via `package.json`.

**2. Add your favicon to the assets / images folder.**

By default, this is the `src/images` folder (at least in Gatsby v4.3.0), and this is where you'll find the default Gatsby icon (`src/images/icon.png`). This may differ depending on your project setup and preferences.

**3. Configure the plugin in your `gatsby-config.js` file.**

Change the file path for `options.icon` to where your favicon is from Step 2.

```
// gatsby-config.js
module.exports = {
  // ...siteMetaData
  plugins: [
    {
      resolve: 'gatsby-plugin-manifest',
      options: {
        "icon": "src/images/icon.png"
      }
    },
    // ...other plugins
  ];
}
```

**4. (Re)Run `gatsby develop` to see the favicon for your Gatsby app.**

```
// shell
gatsby develop
```

And that's it! Pretty simple shit, right?

---

## Resources

- [MDN Web Docs Glossary: Definitions of Web-Related Terms > Favicon](https://developer.mozilla.org/en-US/docs/Glossary/Favicon)
- [Using gatsby-plugin-manifest](https://www.gatsbyjs.com/docs/how-to/performance/add-a-manifest-file/#using-gatsby-plugin-manifest)
Django User Profile Image
Published: 2022-04-10 19:50:19

**Models.py**
```python
from django.db import models
from django.contrib.auth.models import User
from PIL import Image

class profile(models.Model):
    image = models.ImageField(default='default.jpg', upload_to='profile_pics')
    user = models.OneToOneField(User, on_delete=models.CASCADE)

    def save(self, *args, **kwargs):
        super(profile, self).save(*args, **kwargs)

        img = Image.open(self.image.path)

        if img.height > 300 or img.width > 300:
            output_size = (150, 150)
            img.thumbnail(output_size)
            img.save(self.image.path)
```
**Forms.py**
```python
from .models import profile
from django import forms
class updateProfile(forms.ModelForm):

    class Meta:
        model = profile
        fields = ['image']
```

**Views.py**

```python
from .forms import updateProfile
def profilePage(request):
    if request.method == 'POST':
        form = updateProfile(request.POST, request.FILES, instance=request.user.profile)
        if form.is_valid():
            print('ok')
            form.save()
            return redirect('profile')
    else:
        form =  updateProfile()
        context = {'form':form}
    return render(request, 'app/profile.html',context)
```
**profile.html**

```python
<form method="POST" enctype="multipart/form-data">
          {% csrf_token %}
          <fieldset class="form-group">
              <legend class="border-bottom mb-4">Profile Info</legend>
              {{ form }}
          </fieldset>
          <div class="form-group">
              <button class="btn btn-outline-info" type="submit">Update</button>
          </div>
      </form>
```

**Urls.py**

```python
urlpatterns = [
    path('profile/',views.profilePage,name='profile'),
]
```
**Create Signals.py**

```python
from django.db.models.signals import post_save
from django.contrib.auth.models import User
from django.dispatch import receiver
from .models import profile
from django.core.exceptions import ObjectDoesNotExist

@receiver(post_save, sender=User)
def create_profile(sender, instance, created, **kwargs):
    if created:
        profile.objects.create(user=instance)


@receiver(post_save, sender=User)
def save_profile(sender, instance, **kwargs):
    try:
        instance.profile.save()
    except ObjectDoesNotExist:
        profile.objects.create(user=instance)
```
**Apps.py**

```python
from django.apps import AppConfig


class UsersConfig(AppConfig):
    default_auto_field = 'django.db.models.BigAutoField'
    name = 'app'

    def ready(self):
        import app.signals
```

**Urls.py in main project**

```python
from django.conf import settings
from django.conf.urls.static import static


urlpatterns = [
    path('admin/', admin.site.urls),
    path('',include('app.urls')),
    
]

if settings.DEBUG:
    urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
```
**Setting.py**
```python
import os 

MEDIA_ROOT = os.path.join(BASE_DIR,'media')
MEDIA_URL = '/media/'
```
**Make migrations**

```python
> Python manage.py makemigrations
> Python manage.py migrate
```

## Enjoy with 100% work well
AWS Provisioning Three Ways
Tags: aws, serverless
Published: 2022-04-10 19:50:19

I just read the news about [AWS Function URls](https://aws.amazon.com/blogs/aws/announcing-aws-lambda-function-urls-built-in-https-endpoints-for-single-function-microservices/) and I wanted to try it out ASAP. In a nutshell, this allows you to instantly have a public HTTP endpoint for any lambda you've got. This was always possible by configuring an API Gateway, but that is quite complex and provides features that could be overkill if you just want a webhook or something simple.

Most AWS tutorials I find show you how to do things step-by-step in the console. While that's helpful for starting out, what you want in the long run is infrastructure-as-code, which means all the resources in your application should be described in files that can be checked into version control.

I stood up a quick demo in [this GitHub repo](https://github.com/dysmento/the-ways-of-aws-infra-as-code) that shows setting up a simple serverless application (with Function URL!) in three different ways:

1. pure AWS CLI commands. In this method, you create a shell script to create resources, using commands such as `aws iam create-role` and `aws lambda create-function`. This is the "no frills method."
2. Serverless framework. There's a lot to like about [Serverless framework](https://serverless.com). It provides commands for deploying to different stages (think dev/test/prod) as well as invoking locally for test purposes. This method uses is a front-end for [AWS CloudFormation](https://aws.amazon.com/cloudformation/), which was a pioneer in infrastructure-as-code wave. One downside is that provisioning takes a bit longer, so the feedback loop when making code updates is not as quick as I like.
3. Terraform. [Terraform from Hashicorp](https://terraform.io) is a big deal. They have pulled off an amazing feat: to unify all the clouds and over 1,000 different providers into a single provisioning language. One of my favorite things about Terraform is that it helps you see differences between your application as configured and how it _really_ is in the real world. Configuration drift really exists, and it is important to stay on top of it.

So far, I haven't even mentioned that the demo code I wrote is in [Clojure](https://clojure.org), my favorite language. Usually, it's quite a bit of effort to deploy clojure, because you need a compiler and build pipeline to get your artifacts ready to run. Thanks to a lightweight interpreter called [nbb](https://github.com/babashka/nbb), you can interpret Clojure in a lambda as easily as you can interpret JavaScript. If you're not into Clojure, it's not a problem. These three forms of provisioning lambdas work with any of the lambda runtimes (node, python, java, go, ruby, and .NET).
[Deepgram x DEV Hackathon Innovative idea]
Tags: hackwithdg
Published: 2022-04-10 19:49:10


Innovative Ideas Challenge

### Introduction

Hello. My name is Ammar Ahmad and I am currently a sophomore in college. My majors are Computer Science. Currently, my passion is to gain much knowledge as possible and use every opportunity that helps me reach my career goals. Deepgram Hackathon is a very beautiful opportunity where I can use my knowledge to make Deepgram a more beautiful and useful platform and also increase interaction with beautiful and talented people. Unfortunately, This is my first encounter with Deepgram but I am looking forward to having a beautiful experience with this and many more. 

### My Deepgram Use-Case

As a student of Computer Science, I am always interested in activities like these though I don't have a computer science background lol. I am sure I will have an amazing experience and I will get a lot of things to learn in this hackathon. My Idea is to provide a catalyst for the companies that use deepgram for their work. It will improve their work efficiency related to audio to text by providing a new valuable service. 


Deepgram is a very useful platform to convert audio into text. Some new features will make it more useful and valuable.
Companies such as Microsoft, Google, call centers, etc, use software to convert speech to text, and after that their employees collect data such as id numbers, product numbers, or any other useful data they want to collect from that text which software generates that takes a bunch of time. Our Goal now is to give more service in less time. The idea is to add a new feature that will automatically generate such data from the script it is converting at the end. e.g., the user is converting an audio file into the text from which he/she wants the product id. He/she will set a trigger type option in Deepgram which will automatically write out or highlight the product id from the whole text which will be generated by the Deepgram at the end. This will be efficient in many ways such as saving time for the employees, collecting data without any error, and profitable for company revenue as well. 



### Conclusion

I am looking forward to having a beautiful experience in this hackathon and participating in more like these in the future. If you have any questions, you can reach me at following links:

Linkedin: https://www.linkedin.com/in/ammar-ahmed-027b08217/
Github: https://github.com/ammarahmad1
—
python DOM. pip install domonic. 0.9.10 python. create html with python DOM for html generation. python3 python html
Tags: python, html, webdev, programming
Published: 2022-04-10 19:44:20

Have you tried domonic?

A dom made for python.

```
pip install domonic

python3

from domonic.html import *
mydom = html(body(h1('Hello, World!'), a("somelink", _href="somepage.html")))

print(f"{mydom}")

<!DOCTYPE html>
<html>
	<body>
		<h1>Hello, World!</h1>
		<a href="somepage.html">somelink</a>
	</body>
</html>
```

https://github.com/byteface/domonic/
An Intro To Git
Tags: opensource, beginners
Published: 2022-04-10 19:43:01

## Git

Git is a free and open-source distributed version control system used by the vast majority of software development companies.

Git is commonly used for both open source and commercial software development, with significant benefits for individuals, teams, and businesses:

- Git lets developers see the entire timeline of their changes, decisions, and progression of any project in one place. 

- Developers can work concurrently in any time zone while maintaining source code integrity.

- Teams using a Git platform such as Github or Gitlab can break down communication barriers between teams and keep them focused on doing their best work.

> At Grey Software, we use both Github and Gitlab! Why? We primarily use Gitlab for development and collaboration because we found it easier to remotely collaborate on multiple projects across an organization compared to Github. We still use GitHub because of its vast community, classroom platform, and sponsorships program!

## Git Guides

- [Official Git Tutorial](https://git-scm.com/docs/gittutorial)
- [Git: The Simple Guide](https://rogerdudler.github.io/git-guide/)
New Web3 Opportunity
Tags: music, blockchain, web3, crypto
Published: 2022-04-10 19:28:20

Hey, guys. My name is Tim and we are building a new web3 music ecosystem that puts the artist back in the driver seat when it comes to managing their music sharing, developing and promoting. 

I encourage all people interested in the idea, crypto or the web3 to leave me a message. 

https://www.linkedin.com/in/tim-cvetko-32842a1a6/

Tim
# CSS Tip: #1 - has()
Tags: css, tip, webdev
Published: 2022-04-10 19:15:48

The CSS `has()` function can be used to apply a style to an element depending on whether a condition is met or not. In this small article we are going to see how we can use it in a specific case.

Suppose we are defining the styles for the `label` tags of our forms and what we want is to define a certain style only for all those `label` that are associated to an element of type `checkbox`. That is, we want the styles to apply to the `input` element of a markup like the following:

```html
<label for='my-checkbox'>
  <input id='my-checkbox' type='checkbox' value='my-value' />
</label>
```

It is clear that the first thing we have to define is that our css rule has to apply to all the `label` tags of the form but we are going to make use of the `has()` function to be able to launch a kind of *query* or *condition* that has to be given in order to apply the CSS rules we want to apply to this type of `label`. That is to say, we would start from something like the following:

```css
label:has() {
  /* CSS rules to be applied. */
}
```

We see that what we want is to invoke the `has()` function on the `label` tags and only in the case that the condition received as a parameter is met then the set of CSS rules we are going to define will be applied.

But how do we establish that the condition has to be met? Well, this is where we have to make use of the **CSS selectors** we know. We have to think that what we want is that the rules apply only to elements of type `checkbox` and how is this expressed in CSS? Well, with something like the following:

```css
input[type="checkbox"]
```

Now, how should we determine that a style should be applied to the direct descendants of `label` tags that are of the checkbox type? Well, we would make use of the `>` operator (direct descendant of CSS as follows:

```css
label > input[type="checkbox"] {
  /* CSS rules to be applied. */
}
```

With this we are very close to achieving the goal we are pursuing as we know that now the set of CSS rules we put between braces would apply to the checkbox element but we have to remember that the problem we are trying to solve is that we want these rules to apply to the `label` element. So what if we use this selector as a parameter to the `has()` function? That is, we write something like the following:

```css
label:has(> input[type="checkbox"]) {
  /* CSS rules to be applied. */
}
```

Well, the answer is that this is the correct solution because CSS will (to simplify the explanation) look at each of the `label` tags and invoke the `has()` function on them asking something like *do you have a direct descendant that is a checkbox?*. If the answer is yes, then it applies the rules I'm going to give you in braces; otherwise you ignore them.

> We should use the CSS `has()` function when we want a set of styles to be applied to a given element when it is satisfied that it contains elements of certain types.

---
**Nota:** para obtener más información acerca de cómo funciona la función `has()` se recomienda leer [esta entrada](https://developer.mozilla.org/en-US/docs/Web/CSS/:has) de la MDN.
ALL YOU NEED TO KNOW ABOUT THE AMAZON CLOUDWATCH
Tags: beginners, tutorial, webdev, aws
Published: 2022-04-10 19:10:04

Amazon cloudWatch is a service that lets you have insight into the health and operational performance of your instances or applications. This helps in monitoring your instances and making sure they are ready for business. 
CloudWatch gives you the opportunity to set up automated responses which are triggered when a condition is met. The function of this service presents an opportunity for users to minimize incidents, errors, or outages of the infrastructure or instances. 
This service is mostly used by personnel in charge of operations and site engineers.
Amazon cloudWatch can be used for the following;
Collect and store logs.
Amazon cloudWatch allows you to store logs from vended logs, logs published from AWS resources, and Amazon CloudTrail.
Collect and aggregate container metrics.
		Aws CloudWatch collects and aggregates metrics from compute performance such as CPU, memory, network, and disk information. 
Monitor operational view with dashboards.
The dashboard feature of Amazon CloudWatch allows you to visualize your cloud resources and create a reusable graph to understand their performance.
Providing Application Insights:
	This feature provides you with the possibility of setting up automated observation of applications to have an idea of their performance.

To learn more about the features of the Amazon cloudWatch, visit [Amazon CloudWatch Product Features - Amazon Web Services (AWS)
](https://aws.amazon.com/cloudwatch/features/?msclkid=e01f81e4b8e011eca736e9d6aab5424a)

Below are some of the graphics highlighting how the features involved in creating CloudWatch.

![This graphics indicate creating a dashboard in cloudWatch
](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3rmjha2aldnan6og8rlg.png)       This graphics indicate creating a dashboard in cloudWatch

![This graphic shows the addition of widget to the dashboard](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p9p6p91a3pzbxto7q2b0.png)              This graphic shows the addition of widget to the dashboard


![This graphic shows the final dashboard after adding the widgets and source points for the data.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h3pbkzb4rf92ixzn3anr.png)     This graphic shows the final dashboard after adding the 
 widgets and source points for the data.

**_In the next write up I will be demonstrating how to create a dashboard and alarm in cloudWatch._**
Use Mapster in .Net 6
Tags: api, automapper, mapster, dotnet6
Published: 2022-04-10 18:57:40

Hello! I just published the article"Enjoy Using Mapster in .Net 6" I hope you found this post helpful 🌷❤️

[Link](https://medium.com/@M-S-2/enjoy-using-mapster-in-net-6-2d3f287a0989)
You are allowed to be the worst (as a software engineer)
Tags: codenewbie, 100daysofcode, beginners, career
Published: 2022-04-10 18:41:48

I was recently asked: if you could go back in time and meet yourself at the time when you were just learning to code, what advice would you give yourself? 

In this video I share one piece of advice for all code newbies out there, especially for self-taught software engineers:

{% embed https://youtu.be/EhvRAV-_nWY %}.
Interactive Portfolio
Tags: threejs, react, node, nextjs
Published: 2022-04-10 18:41:43

Hello guys!
Do you like creativity? Me too!
I created an interactive portfolio with reactjs, threejs, html and css. Use Blender and 3D Builder to edit some objects. I'll post the link soon! Check my projects on [github! :D](https://github.com/cristiancmoises)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2lazcbbr4ea6ge6yr0xn.png)