teleren/devto huggingface dataset:
HTML tags | picture
Tags: html, tags, picture
Published: 2021-10-01 06:08:19

It is used to **offer different versions of an image for different screens or devices**. To do this, zero or more `<source>` elements and one `<img>` element must be specified inside.

The browser will look at the `srcset`, `media` and `type` attributes of each `<source>` and of the one it considers most appropriate it will load the image specified in its `srcset` attribute.

If the browser does not find any valid option or does not support the `<picture>` element, then it loads the `<img>` that we have indicated as the default image. This `<img>` is also used to set the size of the displayed image, its presentation and some of its attributes, such as `alt`.

Some use cases for `<picture>` are:

* **Art Direction**: cropping or modifying images for different `media` conditions (for example, loading on smaller screens a simpler version of an image that has a lot of detail).
* **Offer alternative image formats**: for cases in which certain formats, such as AVIF or WEBP, are not supported, but it is interesting to specify them due to the advantages they offer if they can be used.
* **Save bandwidth and speed up page load time**: by loading the most suitable image for user viewing.

**If you are going to use versions with higher pixel density for high resolution displays** (retina), use `src` in the `<img>` element. This allows browsers to opt for the less dense versions in data saver modes, and it is not necessary to write `media` conditions explicitly.

You can use the CSS `object-position` property to adjust the position of the image within the element's frame, and the `object-fit` property to control how the image is resized to fit within the frame. These two properties must be used in the `<img>` element, not in the `<picture>`.

- Type: *-*
- Self-closing: *No*
- Semantic value: *No*

[Definition and example](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture) | [Support](https://caniuse.com/picture)
TIL: Docker | Prune Only Unnamed Volumes
Tags: todayilearned, docker
Published: 2021-10-01 06:00:32

## Story

I was trying to do some cleanup of space for docker and needed to prune my unnamed volumes names.

## Question

How to prune all unnamed docker volumes?

## Answer

Use `--filter` option. From docs:

> By default, all unused volumes are removed. You can limit the scope using
> the `--filter` flag. For instance, the following command only removes
> volumes which are not labelled with the `keep` label:
>
> ```console
> $ docker volume prune --filter "label!=keep"
> ```

But to create correct filter first we need to `inspect` volumes to find what labels and other parameters are present for them

```console
$ docker volume inspect project_volume
[
    {
        "CreatedAt": "2021-09-30T11:35:55Z",
        "Driver": "local",
        "Labels": {
            "com.docker.compose.project": "project",
            "com.docker.compose.version": "2.0.0",
            "com.docker.compose.volume": "project_volume"
        },
        "Mountpoint": "/var/lib/docker/volumes/project_project_data/_data",
        "Name": "project_project_data",
        "Options": null,
        "Scope": "local"
    }
]
```

So we could filter our volumes like this

```console
$ docker volume prune --filter 'label!=com.docker.compose.project'
```

**Note** `negative` filtering does not work for `docker volume ls` for some reason.

```console
$ docker volume ls --filter 'label!=com.docker.compose.project'
Error response from daemon: Invalid filter 'label!'
```

## Links

-   https://docs.docker.com/engine/reference/commandline/volume_inspect/
-   https://docs.docker.com/config/pruning/#prune-volumes
10 JavaScript tips that can help you understand this programming language better
Tags: webdev, programming, javascript, beginners
Published: 2021-10-01 05:36:20

_If you found value in this thread you will most likely enjoy my tweets too so make sure you follow me on [Twitter](https://twitter.com/VladPasca5)  for more information about web development and how to improve as a developer. This article was first published on my [Blog](https://vladpasca.hashnode.dev/)_

Get a random item from an Array

{% twitter 1435288025907466240 %}

Use splice() if you want to delete an element from an array

{% twitter 1436010283403730949 %}

Use map() when looping through arrays

{% twitter 1436735335539658753 %}

Stop using "=="

{% twitter 1437460591250190349 %}

Get a random number

{% twitter 1438184893847113740 %}

The trim() method
{% twitter 1438909417223860231 %}

The isFinite() method

{% twitter 1440361499264839685 %}

The toFixed() method

{% twitter 1441083719519850497 %}

This is a way you can empty an array in JavaScript

{% twitter 1441808742073257991 %}

Destructuring

{% twitter 1442534049717764099 %}

_I hope found this useful and if you did please let me know. If you have any questions feel free to DM me on  [Twitter](https://twitter.com/VladPasca5)._
How to solve Xcode 13, iOS 15 LaunchScreen exceeds memory limit issue.
Tags: ios, tutorial, devops, mobile
Published: 2021-10-01 05:20:01

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/letud7knyvdlh2wcm43y.png)

This problem can be fixed using the following 2 methods listed below:
-> Method 1 (Image must be 1024px) and Follow these 2 steps below: 
1.  Download a 1024px image,  you wish to use-(png or jpeg preferably).
2. Add to your assets.

Method 2:  A workaround in case you have a much bigger image which is not 1024px, use these simple steps:
1. Generate your app icon 
-> Method 2:  A workaround in case you have a much bigger image which is not 1024px, use these simple steps:
1. Generate your app icon 
![Screenshot 2021-10-01 at 07.07.07](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eirgt7ns6vufta8eaap9.png) 
2. Go to the app icon folder 
 ![Screenshot 2021-10-01 at 07.09.28](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t84olxrtfz51qrbkkto9.jpeg) 
3. Copy the 1024px of that image and
4. Then add to assets as your launch screen image.
Both methods works perfectly.
Wish to list communities created by Developers
Published: 2021-10-01 05:08:56

Hi friends,
Apologies for not contributing much in this forum. I am not a developer and hence, I couldn't benefit from a vast knowledge one could gain from this forum. But recently, I have been trying to learn nocode stuff like Bubble and webflow and hopefully people here might discuss about it too.

I recently made a simple blog called Community Software where I am writing about Online Communities and also nonprofits.

If developers or tech founders here have made any communities related to specific field of interest or technology, I will be happy to feature it on my blog. 

- https://www.communitysoftware.co/

Just mail me when you find time. I will be happy to feature. My email id is in below url.

https://www.communitysoftware.co/feature-community/

Good luck to you and thank you

Venkat
Playfair Cipher Encryption Program In Python
Tags: computerscience, python, programming, security
Published: 2021-10-01 05:08:49

In this post I'm going to explain you how to code playfair cipher to encrypt plaintext to cipher. So this post is all about encryption program and will soon add decryption program in this series also so stay tuned!

If you don't know how the algorithm works checkout previous post in this series.

**So Without further ado, LET'S BEGIN!!👨‍💻👩‍💻**

##Can you recall what were the steps of algorithm?
**Yes, You're right!** 
The Algorithm was consist of **three** steps:

1. Convert plaintext into digraphs (i.e., into pair of two letters)
2. Generate a Cipher Key Matrix
3. Encrypt plaintext using Cipher Key Matrix and get ciphertext.

<p>&nbsp;</p>
#Programming Playfair Cipher:
## Step: 1 Creating function to convert plaintext into digraphs
{% gist https://gist.github.com/Karan-Munjani/ab358cb147bbe635e79d4fb4432b45c1 %}

<p>&nbsp;</p>

## Step: 2 Function to generate a cipher key matrix

{% gist https://gist.github.com/Karan-Munjani/f4107256ee6c0d966bbf26017bb9dd2f %}

<p>&nbsp;</p>

## Now we need to locate index of particular character inside cipher key matrix to perform encryption:
{% gist https://gist.github.com/Karan-Munjani/ec1941142153dfded1ecc8518656a2ad %}

<p>&nbsp;</p>

## Step: 3 Encrypt plaintext using cipher key matrix and get ciphertext

{% gist https://gist.github.com/Karan-Munjani/224ecd5fb77540a10382791cfe40b0f7 %}

<p>&nbsp;</p>

## Final Step! Running our code from main method:
{% gist https://gist.github.com/Karan-Munjani/925006aaa19ea8cab30c49c466ef286a %}

<p>&nbsp;</p>
<center> * * * * * * *</center>
<p>&nbsp;</p>

### Thanks a lot for reading out!
**I hope the code with comments was actually sufficient to understand the logic.**

Here's the repository link to the whole code file [GitHub Repo](https://github.com/Karan-Munjani/Cryptography_Using_Python/blob/main/Playfair%20Cipher.py)

But if you still have any doubts feel free to mention below in discussion section, I would love to answer them.

**Also drop a heart ❤ if you gained some knowledge!**
How to Customize the Logarithmic Axis in Blazor Charts
Tags: blazor, webdev, dotnet, csharp
Published: 2021-10-01 05:00:06

Learn how easily you can add a logarithmic axis to Syncfusion [Blazor Charts](https://www.syncfusion.com/blazor-components/blazor-charts) and customize it with various built-in options.

 In this video, you will learn how to display higher-order and lower-order magnitude values in the vertical axis instead of numeric values by using a logarithmic axis. You’ll see how to use available axis customization options like setting custom ranges and intervals for the y-axis as well as how to display the y-axis values with different log base values. You will also learn how to format axis labels. 

Explore our tutorial videos: https://bit.ly/3zSWkFc 

Download example from GitHub link: https://bit.ly/3ifAlm5

{% youtube _67hCchVOu4%}
Web 3 Community - Hacktoberfest 2021
Tags: hacktoberfest, opensource, web3, blockchain
Published: 2021-10-01 04:46:29

[Hacktoberfest](https://hacktoberfest.digitalocean.com/) starts today. This year [Web3Community](https://github.com/web3community) is excited to take part in the fest for the first time. 

An excellent opportunity for everyone to learn more about the open-source environment, meet active contributors and win a t-shirt or have a tree planted in your name!

## What is Hacktober?

Hacktoberfest is a month-long celebration of open source software run by DigitalOcean. Hacktoberfest is open to everyone in our global community!. You can sign up anytime between October 1 and October 31. 

Making four or more contributions between October 1-31 will allow you to get a memorable t-shirt as a token of appreciation, or you can choose to have a tree planted in your name and help make Hacktoberfest 2021 more carbon neutral.

You can follow this [guide](https://hacktoberfest.digitalocean.com/resources/participation) for rules.

## Why contribute to Web3Community?

[Web3Community](https://github.com/web3community) is an Open Source Community that focuses on decentralized applications, web 3, and blockchain technologies ✨

Here you will get to interact with some awesome folks. 🤓
No one is expert, we all are learning, you can join us and Learn blockchain tech together, develop some great Open Source Projects. 

Every single contribution matters.

## How can I contribute? 


- Create an issue first before creating a Pull request.
- Fork the Repository and create a Branch for any Issue that you are working upon.
- Create a Pull Request which will be promptly reviewed and suggestions would be added to improve it.
- Add Screenshots to help us know what changes you have done.
- Once you receive the approval from the team, the contribution is ready to be merged and taken into account for the overall Hacktoberfest activity.


For help you can join our [Discord](https://discord.gg/3EN2UVE9mH)


Happy hacking!
Html
Tags: html
Published: 2021-10-01 04:36:01

HTML code contains some sections such as DOCTYPE, meta tags, head, and body. All the tags that we include in an HTML file, needs to be first opened and then closed by angular brackets.
Doctype HTML- Doctype HTML justifies that it is a HTML document. So, we are defining specifically for a browser to understand that it is an HTML document.
html lang= “en”> - It is the opening part of the HTML tag that tells us the language of the document is in English.
<head> - Head contains all the meta-tags in it which is used to describe the contents of a website. Meta means providing information about information. Therefore, meta tags are used to define the keywords and descriptions on our website.Head also contains the title of the website and all the external files like CSS and JavaScript that we link to it.
body> - Body contains all the contents of the webpage in it.
OSD600 - Working In Multiple Branches
Tags: opensource
Published: 2021-10-01 04:28:34

## 1. Lab3 requirements
In this lab, I am going to make some changes to [my repo](https://github.com/hlavu/my-ssg), they are listed below:
* [Add an optional feature for specifying a language](https://github.com/hlavu/my-ssg/issues/19) so that user can specify the language they want the created HTML files use. 
* [Add support for inline code blocks and horizontal rules in Markdown file](https://github.com/hlavu/my-ssg/issues/20)

As this week I am learning about `git merge <commit>` command so I am going to work on a different branch for each change. 

## 2. Modifications

* **Modification for the first change - working on branch [issue-19](https://github.com/hlavu/my-ssg/tree/issue-19)**: 
Implementing the specifying language feature is quite easy since I used the [create-html](https://www.npmjs.com/package/create-html) package to generate HTML files. 

First of all, I add an option for user to specify the language they want to use then create a global variable to store `argv.lang` value, this value will be passed to other modules and be used in `generateHTML`.

In *index.js* 
```
 .option("l", {
    alias: "lang",
    describe: "language used in HTML",
    default: "en-CA",
    type: "string",
    demandOption: false,
  })
```
Then, in the *generateHTML.js* module, I set up the value of `lang` to `language`(or `argv.lang`). 

```
 const html = createHTML({
    title: `${title}`,
    head: `<meta name="viewport" content="width=device-width, initial-scale=1">`,
    body: `${body}`,
    css: `${cssLink}`,
    lang: `${language}`,
  });
```
By doing so, now user can specify the language in which they want the created HTML document used.

* **Modification for the second change - working on branch [issue-20](https://github.com/hlavu/my-ssg/tree/issue-20)**: Adding support for Markdown file is much easier cause I just need to use appropriate **regex** inside a replace function then it will do the rest for me.

In *readMDFile.js*
```
      .replace(/`([^`].*?)`/gim, "<code>$1</code>") // Search for all occurences of Inline code and replace them with the corresponding <code> tags.
      .replace(/---\r?\n/gim, "<hr>") // Search for all occurences of horizontal rules and replace them with the corresponding <hr> tag.
     
     
```
## 3. Merging branches
* *First commit* [8a6bbe](https://github.com/hlavu/my-ssg/commit/8a6bbe) using `git merge issue19`
* *Second commit* [159b3d](https://github.com/hlavu/my-ssg/commit/159b3d) using `git merge issue20`

Fortunately, there was no conflict between two commits so merging them to the `main` branch was totally smooth. 

## 4. Overall
This lab is a good practice for me to work on different branches. Sometimes, when coding a project I forget to check which branch I am currently in. As a result, I usually messed up my code and that's terrible. Besides, working with merging was a truly interesting experience. 

All in all, thank for spending time reading this post.
Happy coding!
Spotify Heart Component
Published: 2021-10-01 04:21:57

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/57ieedg72gvnjbx06v32.PNG)
Web component of Spotify Heart with animations controlled by a finite state machine, inspired by xstate.

{% codepen https://codepen.io/adamrybins/pen/powzpWO %}
My Hacktoberfest Repos
Tags: hacktoberfest, javascript, webdev
Published: 2021-10-01 04:10:09

## Hello everyone! 👋🏻
Hacktoberfest is here! I have a couple of repos that I am going to be working on during the month and welcome anyone to work on the project as well! 

## MongoDb, Express, Node.js Template
[Repo Link](https://github.com/cdthomp1/mongo-express-node-template)
This template is designed to help kick start Node.js applications that use Express.js, MongoDB, and Passport.js. Currently the application is set up to use ejs as the view engine, but can be adapted to use React or any other frontend framework. 
### My Goals
Here are my goals for this project that I want to work on during the month
- Make this an npm script to allow for easy installation (similar to `npx create-react-app`) 
- Have an option to template with React

## Filament Hero
[Repo Link](https://github.com/cdthomp1/filament-hero)
This is a new project of mine that helps those who use a 3d printer keep track of their filament usage as well as the parameters that made a print great or bad. 
### My Goals
- Help users store their print settings, so they can keep track of them
- Clean up the dashboard and how data is loaded, for speed

If you have any interest in any of these projects, please fork and work on it, I welcome any PR to be reviewed 😃

Happy Hacking! 💻
Asp.net Core configuration appsettings.json Giriş.
Tags: dotnet
Published: 2021-10-01 04:06:41

Öncelikle aşağıdaki projeyi local'inize indirin. 

## [Proje](https://github.com/MustafaSamedYeyin/Yazilarimin-Kaynak-Kodlari/tree/main/DevConfiguration/Dev.to)

Dev.to.Configuration.Part2 projesini açın.

Bu projede default bir mvc projesi oluşturdum. Ve sadece iki dosyada değişiklik yaptım :

1. appsettings.json
2. Index.cshtml

## Neler eklendi ? 

1. appsettings.json dosyasına :

```
"MustafaConfiguration": {
    "Soyad": "YEYIN",
    "Yas":  "24"
  }
```
configuration'ını ekledim.

2. Index.cshtml dosyasına 

```
@inject Microsoft.Extensions.Configuration.IConfiguration _config
```
satırını ve
```
@_config["MustafaConfiguration:Soyad"]
@_config["MustafaConfiguration:Yas"]
```
satırlarını ekledim.

#### Burada yapılmaya çalışılan şey : appsettings.json dosyasında configuration'lara c# tarafında(veya burada olduğu gibi razor tarafında) ulaşmak.

##### Bunu yapabilmek için : Startup.cs default olarak eklenmiş gelen IConfiguration interface'ini kullandım(View da bir service kullabilmek için inject keyword'ü ile service'in adını yazmanız yeterli.).

```
public class Startup
    {
        public Startup(IConfiguration configuration)
        {
            Configuration = configuration;
        }
.
.
:
```
### Kısaca açıklama gerekirse : IConfiguration bizim configuration'lara ulaşmamıza sağlayan bir interface'dir.

### Ödeviniz : 

Local'inize indirdiğiniz projenin (Dev.to.Configuration.Part2 adlı projenin) HomeController adlı controller'ına IConfiguration adlı interface'i di olarak geçin.

Index action'ında MustafaConfiguration adlı configuration tıpkı benim "Index.cshtml"de yakaladığım gibi yakalayın.

"Index.cshtml"e action'dan bilgi göndererek aynı yazıyı yazdırmanız gerekiyor.
Yani ekran da yeniden: "YEYIN 24" içeriğinin çıkması gerekiyor.

Bir dahaki yazıda görüşmek üzere.

En iyi dileklerim ile.

Mustafa Samed Yeyin.
Museum Gunung Messner di Tyrol Selatan
Tags: mountain, travel, webdev, showdev
Published: 2021-10-01 03:46:47

Bertengger di puncak Gunung Kronplatz di provinsi Tyrol Selatan Italia, Museum Gunung Messner yang baru – Corones adalah bab keenam dan terakhir dalam serangkaian <a href="https://www.mountainmusicmuseum.org">mountainmusicmuseum</a> yang didedikasikan untuk pendakian gunung oleh pendaki terkenal Reinhold Messner. Seorang pendaki berpengalaman yang terkenal mendaki Gunung Everest dua kali tanpa menggunakan oksigen botol, Messner juga orang pertama yang mendaki 14 gunung di dunia yang puncaknya lebih dari 8.000 meter.

Di Museum Gunung di Kronplats/Plan de Corones, ia menyajikan perkembangan pendakian gunung selama 250 tahun terakhir dalam hal peralatan, serta cerita dan peristiwa yang berkaitan dengan pendakian gunung di wilayah Tyrol Selatan. Dirancang oleh Arsitek Zaha Hadid, museum ini terletak di dalam batu puncak gunung, untuk menciptakan pengalaman pengunjung yang sangat khusus di mana pengunjung turun ke bagian dalam gunung yang gelap untuk kemudian keluar ke teras enam meter yang tergantung di atas lembah, menawarkan pemandangan spektakuler Dolomites dan pegunungan sekitarnya lainnya.

Messner bersikeras bahwa bukaan museum selaras dengan puncak Alpine ikonik tertentu. Dengan senang hati, para arsitek menciptakan jendela yang membingkai siluet Gunung Peitlerkofel di tenggara, bukaan kedua yang mengarah ke puncak Heiligkreuzkofel di selatan, dan balkon enam meter yang menghadap Ortler dan Selatan.

Tirol ke barat. 4.000 meter kubik tanah dan batu digali untuk memberi ruang bagi bangunan, yang kemudian ditempatkan di atas dan di sekitarnya, secara harfiah tertanam ke dalam lanskap. Kanopi dan dinding beton bertulang bangunan dicor di tempat, dan tebalnya antara 40 dan 70 cm untuk menopang berat batu di atasnya.

Kelongsong bangunan, yang mungkin merupakan ciri gaya ZHA yang paling dikenal di proyek ini, terdiri dari panel yang dibuat di pabrik atau dibuat di lokasi menggunakan beton cor; elemen lengkung yang lebih kompleks dibuat dengan menyemprotkan lapisan beton serat berkinerja tinggi ke dalam cetakan yang dibentuk mengikuti model 3D arsitek.
Create a Netflix clone from Scratch: JavaScript PHP + MySQL Day 67
Tags: php, javascript, webdev, tutorial
Published: 2021-10-01 03:44:28

Netflix provides streaming movies and TV shows to over 75 million subscribers across
the globe. Customers can watch as many shows/ movies as they want as long as they are
connected to the internet for a monthly subscription fee of about ten dollars. Netflix produces
original content and also pays for the rights to stream feature films and shows.

In this video,we will be Creating watchVideoCompleted function
{% youtube rMLM-sGMLYE %}



If you like my work, please consider
[![Buy me a coffee](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jm11knj7d8zwcvo150q2.png)](https://www.buymeacoffee.com/cglikpo)
so that I can bring more projects, more articles for you

If you want to learn more about Web Development, feel free to [follow me on Youtube!](https://www.youtube.com/c/ChristopherGlikpo)
Asp.net core configuration Giriş.
Tags: dotnet
Published: 2021-10-01 03:22:43

## Configuration ne işe yarar ?

Uygulamamızın davranışını etkilememizi sağlar.

## Asp.net core'da default olarak gelen configuration kaynakları nelerdir ?

1. appsettings.json
2. appsettings.Environment.json
3. App secrets
4. Environment Variables.
5. Cli arguments.

## Asp.net core'da yukarıda belirtilen beş kaynak uygulamamızda nasıl ayağı kalkar ?

```
public class Program
{
    public static void Main(string[] args)
    {
        CreateHostBuilder(args).Build().Run();
    }

    public static IHostBuilder CreateHostBuilder(string[] args) =>
        Host.CreateDefaultBuilder(args) // bu satırda 
            .ConfigureWebHostDefaults(webBuilder =>
            {
                webBuilder.UseStartup<Startup>();
            });
}
```

Aps.net core ile gelen default configuration  ayarlarını CreateDefaultBuilder sağlar.

CreateDefaultBuilder default configuration ayarlarını şu sırayla hayata geçirir : 

1. appsettings.json
2. appsettings.Environment.json
3. App secrets
4. Environment Variables.
5. Cli arguments.

Yani aynı configuration'ı appsettings.json ve App secrets olarak geçersek uygulamaya: App secrets'da olan configuration , appsettings.json da olan configuration'ı ezer.

Bir dahaki yazımda appsettings.json'ı inceleyeceğim.

En iyi dileklerim ile.

Mustafa Samed Yeyin