teleren/devto huggingface dataset:
HTML TUTORIAL FOR BEGINNERS PART 2
Tags: html, 100daysofcode, webdev
Published: 2021-07-22 14:52:26

In HTML `img` element is used to display every types of images like:jpg, png, jpeg...
It can also display svg.
` img ` has many attributes but the most common ones are:loading, src, srcset, height, width and alt.
When we wanna to put image into website we have target the path or address of that image we interested in it.
#####It's implementation looks like below:
```
<img src='yourimagepath/yourimagename.png'/>
```
Inside src attribute we can put local images path or online path.
The second important attribute is alt attribute, you have to always include this attribute into your img element because sometimes your image path isn't correct so the text is written inside alt attribute instead displays.
Your text should be meaningful that conveys the purpose or aim of your image to users.
When your user has slow internet connections your images won't load properly in that case alt attribute plays crucial role.
For example
```
<img src="https://www.freecatphotoapp.com/yourcatphoto.jpg" alt="my cat photo eating food"/>
```
One thing keep in mind that HTML is not case sensitive language you can write it's elements into capital case or camel case it doesn't shows any error message.
Google chrome developers recommend us to use loading attribute to speed image loading process.
#####Looks like this
```
<img src="https://www.freecatphotoapp.com/yourcatphoto" loading="lazy-loading"/>
```
We can control the width and height of images using width and height attributes.
#####Look at this:
```
<img src="https://www.freecatphotoapp.com/yourcatphoto" width=200 height=150/>
```
I hope you enjoy the tutorial.
If you have any suggestions or criticism please let me know.
Please share let others to know
Domínio personalizado no azure static web apps
Tags: azure, braziliandevs, webdev
Published: 2021-07-22 22:31:51

Oi Pessoal!

Nesse post vou mostrar como aplicar um domínio personalizado no Azure Static Web Apps.

## Você precisa de:

- Uma assinatura no [Azure](https://portal.azure.com/)
- Um [Aplicativo Web Estático do Azure](https://azure.microsoft.com/pt-br/services/app-service/static/)
- Um domínio personalizado, eu adquiri o meu no [Registro.br](https://registro.br/)

>Você pode criar uma conta no azure e consumir os créditos para teste, mas nesse artigo os recursos que irei consumir são gratuítos.

##Coaltime

O [Coaltime](https://dev.to/silverio27/angular-azure-static-web-apps-2kda), aplicação fictícia que apresentei em outros artigos, foi implantado no azure static web app, durante o processo foi gerada uma url aleatória, agora precisamos adicionar o domínio correto da aplicação.

O aplicativo está com essa url:
https://ambitious-field-0575b3f0f.azurestaticapps.net/

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gi02dtlefavs93svjirt.png)

Mas ele será acessado por essa url:
https://www.silverio.dev.br/
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oo782h2cyv5vkghxdf8e.png)

## Registro.br

Entre no site do [Registro.br](https://registro.br/), acesse seu painel e selecione o domínio que você quer vincular ao app:
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x8untj50oe459clix9ve.png)

Vá até a sessão de DNS e clique em editar zona:
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l60qe5h3fe3kqzf49pr9.png)

Adicione o servidor de email na entrada MX e a url do azure static web app no CNAME e clique em salvar:
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/saz01mvpnv4r3uqfxko1.png)
 
## Azure

Acesse seu Aplicativo Web Estático e clique em Domínios personalizados:
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jiiq8j917l4trrsdczrc.png)

Clique em adicionar: 
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h9xoby9inkkcy6owza5k.png)

Preencha o nome do domínio, clique em avançar:
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hueek5rzh7278rpmshdu.png)

Selecione o tipo de registro CNAME e clique em adicionar:
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p6jazti0rn8klbfvr7vz.png)

Pronto! Em alguns instantes você já vai poder acessar o aplicativo pelo seu domínio!

Espero que isso te ajude!
Introducing the Rapyd Dev & Fintech Discourse Community
Tags: community, news, devrel, api
Published: 2021-07-23 00:24:59

Today we are giving developers a new and engaging way to reach out and communicate with Rapyd engineers and other payment developers via [community](https://community.rapyd.net). We're aiming to create the go-to place for global fintech developers to share industry updates, API tips, best practices, and payment solutions. 

## The safe place to talk about all things fintech
A big part of the Rapyd Developer Community  is to always be open and [welcoming](https://community.rapyd.net/t/introduce-yourself/21) to everyone. We want you to feel safe and respected when you want to share your thoughts or pose questions about fintech on the whole or getting in the weeds with one of our APIs. We also ensure our community keeps up with the latest in security and privacy.

## A platform we all know
Discourse communities are known by developers  the world over for their simple and easy to use interface. The RapydDev [community](https://community.rapyd.net/) isn’t any different. 

##Get in on the conversation
Join Rapyd engineers and product professionals on the Rapyd developer community at https://community.rapyd.net. In addition, there are several other ways you can contact us such as [twitter](https://twitter.com/RapydPayments), [support tickets](https://support.rapyd.net/hc/en-us/restricted?return_to=https%3A%2F%2Fsupport.rapyd.net%2Fhc%2Fen-us), and our [YouTube](https://www.youtube.com/playlist?list=PLZCI0nuD6pB-ZU0vZA73zAOUhLLbw4LkE) videos. If you have ideas or suggestions and want to help us create the future of fintech then we will see you there!
Sorting in descending order in Firebase Realtime Database
Tags: firebase, realtimedatabse, sorting, descending
Published: 2021-07-23 02:45:09

In my case, upload images to Firebase storage and store the download url in realtime database. After fetch the url images display in ascending order that means which one I upload in first that one show in first on my website. But I want to display the latest uploaded image in first on my website then I search lot of websites, youTube videos ...
Finally I got the answer : Firebase doesn't allow returning by descending order.
But I am not ready to give up.
After a night I got the solutions,

I add new field like timeStamp and change timeStamp to negative number

![image1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x8x4q7i7r8klrjxnmqzk.jpeg)

then upload both url and negative timeStamp

![image2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ro5v3kyx8ysub8a3vky5.jpeg)
 

then fetch the data like 👇 from firebase :

![image3](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/40jpxywml2xnz44xwsur.jpeg)

then the images or videos display in descending order of negative timeStamp.
How to display uploaded file in html using JavaScript
Tags: javascript, java, html
Published: 2021-07-23 06:25:16

**How to display uploaded file in html using JavaScript**


Today we will see how to upload files in html using JavaScript. You must know about html.  html is a markup language from which you can design the content of a website and manage the layout of the website in css. And then javascript is used for programming the website. javascript is completely HTML code.  Can change. If there is any file of JavaScript, we can change it in HTML. There are many other programming languages ​​but JavaScript is very easy to learn. A developer should have a complete knowledge of JavaScript.  They are creating a website. Php which is server site language but Java browser site. Where client is browsing the website. JavaScript can communicate in many languages. It does not require compiler.  JavaScript only runs in browsers. In JavaScript you can also work with databases. Let's see some examples.
Example code:


```
<input type="file"  accept="image/*" name="image" id="file"  onchange="loadFile(event)" style="display: none;"></p>
 for="file" style="cursor: pointer;">Upload Image</label></p>
<p><img id="Output" width="100" /></p>

<script>
var loadFile = function(event) {
	var image = document.getElementById('Output');
	image.src = URL.createObjectURL(event.target.files[0]);
};
</script>
```
PHP Create slugify URL from All language to English
Tags: php, slugify, transliterator, webdev
Published: 2021-07-23 19:40:49

PHP transliterator_transliterate - examples . These are the top rated real world PHP examples of transliterator_transliterate extracted from open source projects. You can rate examples to help us improve the quality of examples.

##Programming Language: PHP
##Method/Function: transliterator_transliterate

####(PHP 5 >= 5.4.0, PHP 7, PECL intl >= 2.0.0)

...
### 📝Description

```
public Transliterator::transliterate ( string $subject [, int $start [, int $end ]] ) : string|false
```

### 📝Parameters



transliterator

    In the procedural version, either a Transliterator or a string from which a Transliterator can be built.
subject

    The string to be transformed.
start

    The start index (in UTF-16 code units) from which the string will start to be transformed, inclusive. Indexing starts at 0. The text before will be left as is.
end

    The end index (in UTF-16 code units) until which the string will be transformed, exclusive. Indexing starts at 0. The text after will be left as is.


## Code Example 1:


```
<?php

function slugify($string)
{
    $string = transliterator_transliterate("Any-Latin; Latin-ASCII; [\u0080-\u7fff] remove; Lower();", $string);
    $string = preg_replace('/[-\s]+/', '-', $string);
    return trim($string, '-');
}

echo '/n'.slugify('A æ Übérmensch på høyeste nivå! И я люблю PHP! ﬁ'); 
//out: a-ae-ubermensch-pa-hoyeste-niva!-i-a-lublu-php!-fi


echo '/n'.slugify('وب فارسی در مجله دلگرم delgarm');
//out: wb-farsy-dr-mjlh-dlgrm-delgarm


echo '/n'.slugify('أصبح تسجيل طلاب الصف الأول إلكترونيًا');
//out: asbh-tsjyl-tlab-alsf-alawl-alktrwnyaa

?>

```

## function Example 2:

```
 public static function slugify($string, $separator = null)
 {
     $separator = null !== $separator ? $separator : (null !== self::$separator ? self::$separator : '-');
     $slug = trim(strip_tags($string));
     $slug = transliterator_transliterate('NFD; [:Nonspacing Mark:] Remove; NFC; Any-Latin; Latin-ASCII; Lower();', $slug);
     $slug = preg_replace("/[^a-zA-Z0-9\\/_|+ -]/", '', $slug);
     $slug = preg_replace("/[\\/_|+ -]+/", $separator, $slug);
     $slug = trim($slug, $separator);
     return $slug;
 }
```
- [hotexamples](https://hotexamples.com/examples/-/-/transliterator_transliterate/php-transliterator_transliterate-function-examples.html) - 30 Code Examples

- [slugify sample urls](https://www.delgarm.com/song-by-sirvan-khosravi-diongi.a239734) Delgarm
TDD Conference 2021 - Which is better to Code by Contract: TDD or API-first? - Meenakshi Dhanani
Tags: tdd, oop, codenewbie, tutorial
Published: 2021-07-24 03:18:10

First International Test Driven Development took place on July 10th. 

In this series, I will include every talk together with my notes and further reading.

Hopefully, a lot of readers will watch and rewatch the talks, as they are worth several reviews.

Let's continue...

## Bio 

Meenakshi Dhanani works as a Developer Advocate at Postman where she advocates best practices for Postman, the larger API community, and an API-first approach to software development. She was previously a software consultant at ThoughtWorks, where she trained employees and worked on projects applying XP (extreme programming) practices - TDD, CI/CD, pair programming by the book.
 
> TL;DR: TDD and API-First are complementary techniques. We should embrace contracts. 

## Talk

{% youtube oTDei7E9XQM %}

# My Personal notes

- We make cakes by contracts we agree (the blueprint).
- A contract is an agreement.
- We should always focus on the contract and not the implementation to avoid overengineering.
- Designing by contracts leads to good design from the user perspective.
- With contracts, we have more predictable integration.
- Some Code by contract alternatives are:
-- TDD
-- [API-First development](https://blog.dreamfactory.com/api-first-the-advantages-of-an-api-first-approach-to-app-development/)
-- [BDD](https://en.wikipedia.org/wiki/Behavior-driven_development)
-- [Design by Contract](https://en.wikipedia.org/wiki/Design_by_contract).
- on TDD writing the tests first, avoids focusing on implementation early.
- TDD is mistakenly focused on the tests instead of how it guides software development.
- We play on the [workplace](https://www.postman.com/devrel/workspace/which-is-better-to-code-by-contract-tdd-or-api-first/overview) using a mock server.
- The emphasis is on what the API wants to expose
- We quickly compare TDD with API-First. They are complementary.
-- We can use them in tandem.

# Speaker Links

- Twitter [@mdhananii](https://twitter.com/mdhananii)
- Medium[@meenakshi-dhanani](https://meenakshi-dhanani.medium.com/)
- LinkedIn [@meenakshi-dhanani](https://www.linkedin.com/in/meenakshi-dhanani/)
- [Postman](https://community.postman.com/t/june-10-which-is-better-to-code-by-contract-tdd-or-api-first/25655/5)
- [Workplace](https://www.postman.com/devrel/workspace/which-is-better-to-code-by-contract-tdd-or-api-first/overview)

* * *

Please follow TDD Conference on:

- [YouTube](https://www.youtube.com/channel/UCKn-DadPoyYssfAOMk1LSew)
- [Twitter](https://twitter.com/tddconf)
Cheapest and best VPS for value
Tags: cheapvps, bestvps, affordablevps
Published: 2021-10-21 14:21:57

---
title: Cheapest and best VPS for value
published: true
date: 2021-10-21 04:00:00 UTC
tags: cheapvps,bestvps,affordablevps
canonical_url: https://postsrc.com/posts/cheapest-and-best-vps-for-value
---

[This post was originally published at PostSrc 🔥🔥🔥](https://postsrc.com/). If you like this kind of tutorial, I would really appreciate it if you give it a visit.

Virtual Private Server aka VPS are getting cheaper and cheaper nowadays and many providers provide very competitive offerings

  
[**Hetzner**](https://hetzner.cloud/?ref=VuQTJ1I4NrtS)

Hetzner is one of our favorite hostings today and it values a lot for the money. We have used it for quite some time now and the performance that it delivers for its cost doesn't compare with other VPS providers.  
  

For under less than 6 euro, we are getting specifications of 2 vCPU, 2GB of RAM, 40 GB of fast SSD storage, and 20TB of bandwidths which is insanely so much.  
  

By far, this VPS provider has the best offering on the market and the value for the price is worth it. [Claim Hetzner 30$ credit](https://hetzner.cloud/?ref=VuQTJ1I4NrtS)  

[![](https://postsrc.com/storage/46tzQHInhBOHUiuU343Cm1DJfuSW7t5FoPRBoaox.png)<figcaption>Hetzner Homepage</figcaption>](https://postsrc.com/storage/46tzQHInhBOHUiuU343Cm1DJfuSW7t5FoPRBoaox.png)

  
[**Vultr**](https://www.vultr.com/?ref=8375712-6G)

The second VPS that we would recommend is Vultr and the value is on point. They have different specifications just like Hetzner but with more different specs and configurations that we can choose to.  
  

They are very reliable and have more regions around the globe. [Claim Vultr $100 Credit](https://www.vultr.com/?ref=8375712-6G)  

[![](https://postsrc.com/storage/Qc9mqcBcLIDqP3ZgtpZszVZM3wPO3huc846HskkN.png)<figcaption>Vultr Homepage</figcaption>](https://postsrc.com/storage/Qc9mqcBcLIDqP3ZgtpZszVZM3wPO3huc846HskkN.png)

  
**Closing Note**

These VPS are the ones that we both use and recommend.
How to Fix Brightness Controller Missing on Linux XFCE Desktop?
Tags: linux, devops, tutorial, beginners
Published: 2021-07-24 08:53:33


XFCE is one of the most lightweight desktop environment among other Linux desktops, resource-friendly suitable for old PC/Computers. XFCE removed most of the non-essential elements such as glossy desktop design, animations, etc in terms of making it more resource-friendly. But the problem is, if you install XFCE on the top of another desktop environment (Such as installing XFCE desktop on Linux Mint Cinnamon environment), you will encounter this error due to the absence of XFCE meta-package.  


If you are also not able to adjust your screen brightness due to this missing component follow these steps below to fix it.   

1| Open your terminal and execute the following command...
```sudo apt-get install xfce4-power-manager-plugins```

![Linux Terminal](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6jbo8dteazaezun5veqs.png)

2| Enter your password and press the `y` key to continue (if asked)

3| Now, Right-click on the panel, Panel-> Add New Items...

![Add New Items](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mstginb461dtfjdsjsjq.png)

4| From the "Add New Items" list, search for `Power Manager Plugin`, select it then click on the Add button.

![Power Manager Plugins](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dbkwdqv8wvvhxkyyibfa.png)

5| Now, you will see the `Power Manager icon` appear on your panel, just click on that to begin adjusting your screen brightness. 

![Adjust screen brightness](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c19kke2ecrcdus2yvoi1.png)
<br>
Share your thoughts if you find any other essential components which are missing from the XFCE desktop...

###[Watch on YouTube](https://www.youtube.com/watch?v=237Sngl9N2I)

Thanks for reading. Have a great day :)

Coffee https://www.buymeacoffee.com/rahedmir
One month Python  Bootcamp
Tags: python, javascript, react
Published: 2021-07-24 10:54:07

{ Coding Bootcamp }

Information Technology (IT) is reshaping the global economy of most countries. The COVID-19 pandemic has already made a huge digital transformation. The demand for IT experts is increasing from time to time.
It is a very good time to join the IT industry as a Web Developer, Data Analyst, DevOps Engineer, or Cloud Engineer. Thanks to the internet, there are many educational platforms that help people to acquire certain skills.
However, most of the platforms lack one-to-one mentoring, collaborated project works, and career coaching. We plan to run different Bootcamps that fill the gaps that we have seen in others platforms.

We provide immersive Bootcamps:
- One Month Python
- One Month JavaScript
- One Month React

Trainings
- 6 Month Web Development(Git and GitHub, HTML, CSS, JS, Sass, React, Redux, Node, MongoDB, GatsBy)
- Data Analysis

Globally renowned educational materials:
30DaysOfReact: https://t.me/thirtydaysofreact
30DaysOfPython : https://t.me/ThirtyDaysOfPython
30DaysOfJavaScript : https://t.me/ThirtyDaysOfJavaScript

Join us on Google Meet to learn about the Bootcamps we provide

Google Meet: https://meet.google.com/fdm-pfcq-zwj
No More Zero Days - Achieve Great things
Published: 2021-07-24 17:44:55

⚠️ This Post is not related to Zero Day Vulnerability. It's about staying on track and productivity.

I Know, lot of you might start working on a project. In the Beginning your energy levels will be so higher. There will be some kind of fire inside you.

But when the day passes, you'll slowly start losing interest on that thing and immediately start working on something else. 

At the end, There will be no positive result for your time spent.

Here is where no more zero days comes in. Let me explain this.

It means, if you didn't even made a small progress on that project it'll be counted as zero day.

Our goal should be doing something on that project which can improve piece by piece daily.

Make progress every single day never stop doing it.

I read about this somewhere on Reddit and found it useful. So I shared it. I don't have link to the original post.

Edit: I found it.
https://www.reddit.com/r/getdisciplined/comments/1q96b5/i_just_dont_care_about_myself/cdah4af
In short, what to look for when refactoring
Tags: design, computerscience, architecture, codequality
Published: 2021-07-24 20:45:31

##The goal of software development
The goal of software development is to meet the needs of users with the least possible effort. Software that doesn't serve the needs of its users, simply isn't good software. And since the needs of our users changes often, it's important to make sure that software **was designed in order to be changed**.

Refactoring the code will help us achieve this goal.

----

### Refactoring is a way of removing or decreasing technical debt and improving the internal structure of our software system.
---

- How? - Improve code structure, readability and scalability from a software system
- Condition - Do not alter the external behavior of the code
- Why? - Improve internal structure
- Consequences - Minimize new bugs due to changes in the code, introduce new features and modify existing ones with ease

> Refactoring is the process of changing a software system in such a way that it does not alter the external behavior of the code yet improves its internal structure. It is a disciplined way to clean up code that minimizes the chances of introducing bugs. In essence when you refactor you are improving the design of the code after it has been written.

---
### While refactoring, we should look for:

   Ideally, a software system should be flexible, maintainable and scalable.

   **Flexible**: we could alter the code behavior easily without creating side effects.

   **Maintainable**: we could apply refactors easily to improve code structure.

   **Scalable**: we could add new features with less effort.
How to remove a directory in Linux?
Tags: resource
Published: 2021-07-17 00:00:00

---
  title: How to remove a directory in Linux?
  published: true
  tags: Resource
  date: Sat Jul 17 2021 05:30:00 GMT+0530 (India Standard Time)
  canonical_url: https://melvingeorge.me/blog/remove-directory-linux
  cover_image: https://melvingeorge.me/_next/static/images/main-278e88f4eacc04e2cbf06ebc092ef317.jpg
  ---
  [Originally posted here!](https://melvingeorge.me/blog/remove-directory-linux)
  
To remove a directory in Linux, you can use the `rm` command followed by a space and the `-r` flag and the name of the directory in the Linux terminal. This will also remove any other directories and their files inside the directory along with it.

For example, let's say you have a directory called `myDirectory` and wants to delete it. You can use the `rm` command like this in the terminal,

```bash
# Delete a directory with any files
# inside in Linux
rm -r myDirectory
```

Executing the above command will delete the `myDirectory` directory from the system.

See the execution of the above command live in [repl.it](https://replit.com/@melvin2016/delete-a-directory-with-all-the-files-in-linux#main.sh).

Sometimes when using the above command you will be prompted to confirm the deletion of some directories that are write-protected.

So to avoid that, and delete all the write-protected files without being prompted you can use the `-f` flag with the above command, so now the command will look like this,

```bash
# Delete a directory with any files without being prompted
# inside in Linux
rm -rf myDirectory
```

That's it 😃!

### Feel free to share if you found this useful 😃.

---
Same todo app with different technologies
Tags: javascript, vue, react, angular
Published: 2021-07-25 05:46:36

![Same todo app with different technologies](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p9rjko7mv1z3117ntss8.PNG)
It is a very simple "todo" app I made it as a challenge to myself.
I can add a lot of features but I want the app to be as simple as possible.
I am sharing to get some feedback on the code.

* #### JavaScript
[preview](https://todo-app-with-javascript.netlify.app/)

* #### Jquery
[preview](https://todo-app-with-jquery.netlify.app/)

* #### Vue.js
[preview](https://todo-app-with-vue-js.netlify.app/)

* #### React.js
[preview](https://todo-app-with-react-js.netlify.app/)

* #### Angular.js
[preview](https://todo-app-with-angular.netlify.app/)

---

#### source code for all apps
[https://github.com/ahmadfathy97/same-todo-app-with-different-technologies](https://github.com/ahmadfathy97/same-todo-app-with-different-technologies)