teleren/devto huggingface dataset:
Design responsive website with little or no media queires.
Published: 2021-04-16 07:33:04

## First of all, let's understand why do you need a responsive website.
The goal of responsive design is to make the user experience as good as possible across those devices, even though the design may look slightly different. For instance, you may present information in one column on a smartphone and two columns on a laptop, but the branding and content will remain exactly the same.

Creating a great user experience is essential to any business’s longevity. And believe it or not, your website is an extension of your physical business. Additionally, Google considers whether or not a website is mobile-friendly as part of its search engine algorithms.

The following are the ways to have responsive design without media queries:-


### - Setting minimum and maximum values in CSS
The min() function lets you set the smallest value from a list of comma-separated expressions as the value of a CSS property value. This function proves really useful in terms of helping text sizes to properly scale across different screen sizes, like never letting fluid type drop below a legible font size. Similarly, the max() function lets you set the largest value from a list of comma-separated expressions as the value of a CSS property value. 

Example:
```
body {
  font-size: max(1em, 12px);
}
div{
  font-size: min(14x, 22px);
}
```


### - Use Clamp
CSS clamp() offers the best of CSS min() and CSS max() combined. CSS clamp() essentially clamps a value between an upper and lower bound. clamp() enables selecting a middle value within a range of values between a defined minimum and maximum. It takes three parameters: a minimum value, a preferred value, and a maximum allowed value.

Example:
```
body {
  font-size : clamp(1rem, 40px, 4rem)
}
```


### - Use responsive units for font sizes
The way you start to make your site fluid is by using percentages for your height and width instead of static pixel sizes.
In CSS, you can determine sizes or lengths of elements using various units of measurements, and the most used units of measurements includes: px, em, rem, %, vw, and vh.

The text size can be set with a vw unit, which means the "viewport width".That way the text size will follow the size of the browser window.Note that relative units are more responsive compared to absolute units.

This way when someone resizes their browser window, your HTML tags will shrink or expand accordingly instead of breaking the page.
The following will scale based on the percentage of your screen.

Example:
```
div{
   width: 25%;
   height: 50%;
}
```

### - Use picture tag
Did you know that in modern browsers you can change an image source depending on your page width? That’s what `srcset` is made for!
HTML offers the <picture> element that allows us specify the exact image resource that will be rendered based on the media query we add.

Example:
```
<picture>
  <source media="(max-width: 799px)" srcset="elva-480w.jpg">
  <source media="(min-width: 800px)" srcset="elva-800w.jpg">
  <img src="elva-800w.jpg">
</picture>
```
Get Azure Pipelines UniversalPackages version
Tags: papertrail, azure, pipelines
Published: 2021-04-16 07:29:39

I was building an azure pipelines job and during it I uploaded a Universal Package using the `UniversalPackages` task. 

I then had to contact a REST API with the package and version of the newly published Universal Package. To do that I need to get the version and package name out of the task.

That looks like this:

```
    - task: UniversalPackages@0
      displayName: Universal Publish
      inputs:
        command: publish
        publishDirectory: '$(System.DefaultWorkingDirectory)/dist'
        vstsFeedPublish: 'MyProject/MyFeed'
        vstsFeedPackagePublish: 'package.name'
        packagePublishDescription: 'My super package'
        versionOption: patch #increment the patch part of the semantic versioning
        publishedPackageVar: someVariableName
```

After this task runs `$(someVariableName)` will hold a string like so "package.name 1.0.1", but that variable will not be available outside this current job. 

To make it available for other jobs you need to move it to an output variable. I did that like this:

```
    - powershell: echo "##vso[task.setvariable variable=PackageNameAndVersion;isOutput=true]$(someVariableName)"
      name: PackagePublish
```

Now the value is available in other jobs through `PackagePublish.PackageNameAndVersion`.

You can consume it in subsequent jobs by making sure those jobs depend on this job and then grabbing the variable from the output.

```
- job: 'RestAPICallingJob'
  dependsOn: 'BuildProductionStuff'
  pool: server
  variables:
    PackageNameAndVersion: $[ dependencies.BuildProductionStuff.outputs['PackagePublish.PackageNameAndVersion'] ]
```

Now I can add a step to call a REST API using the package name and version of my universal package.

**NOTE:** I ended up not using Universal Packages, because you can only download Universal Packages from Azure using the AzureCLI. Instead, I created a NuGet package that contained just my loose files using a .nuspec file.
Selection sort program in ruby
Tags: ruby, ds, sort
Published: 2021-04-16 07:22:50

```ruby
n=5 # the size of the array
a=Array.new # creating a blank aray

puts "Enter the numbers"
for i in (0...n)
  a << gets.to_i # getting user input and pushing that into the array
end
for i in (0...n)
  min=a[i] # storing the a[i] value in min for tracking the lower value
  loc=i  # storing the i's location
  for j in (i+1...n)
    if a[j]<min
      min=a[j]
      loc=j
    end
  end
  # swapping the lowest no 
  temp=a[i] 
  a[i]=min
  a[loc]=temp
end

puts "The sorted array"
# printing the numbers 
a.each_index do |x|
  print " #{a[x]}"
end
puts
 ```
Decentralized cloud storage (Dropbox or Google Photos clone) on IPFS?
Tags: discuss
Published: 2021-04-16 07:11:12

---
title: Decentralized cloud storage (Dropbox or Google Photos clone) on IPFS?
published: true
description: 
tags: discuss
---

Today I woke up with the following idea.

I thought that utilizing a system like [IPFS](https://ipfs.io) combined with client-side file encryption it would probably be quite straightforward to build a truly decentralized / distributed alternative to Dropbox & Co. No single authority would be in charge of your files as they are distributed among potentially hundreds of network participants' computer, like with Torrent back in the days. Yet, due to encryption, nobody participating in hosting parts of your files on the network would actually be able to access them.

I was wondering if someone already built something like this? Do you know of some implementation?

What I found so far is [SharpPhotos](https://www.sharpphotos.io/), but it seems to be in a very early stage of development and is not open source.
10++ Proven Ways To Get More Web Development Clients

Tags: javascript, webdev, html
Published: 2021-04-16 07:08:13

Do you know web development?

Have you been struggling to find Clients?

Can't find Clients at Upwork and other job boards?


Then you don't need to worry, I have got you covered. You just have to steal these proven tips I have been using over the past 6 years for getting more clients.

You can use these tips in all kinds of skills that will require you to look for clients to pay for your service. Including mobile developers, content writers, and graphic designers.

"The pie is so big for you to cut your share of it"

These guaranteed tips will get you more clients that will pay you and refer you to other clients as well.

But here is a little word of advice...

Every client count, especially your first 5 clients will... 
(Read more) https://gumroad.com/l/qDjuE
10 Threats To Your Database
Tags: database, security, webdev
Published: 2021-04-16 07:07:01

【Alibaba Cloud ApsaraDB YouTube - 10 Threats To Your Database】
[Watch Now >](https://www.youtube.com/watch?v=48ZdRZfIaGM&list=PL54EFTJJZrwg3gmLMQzVYSadR0rTPqEhV&index=2)
> The video is 5 mins long, enjoy yourself.

Are you just using the database directly without any custom configuration? Then this video is a wake-up call for you to prevent you from any future hacks. Check out and share more ideas with us, and your words will have a chance to be mentioned in our next video.

Next video preview: 10 Tips for Improving Your Database Defense

[Subscribe Us On YouTube ->](https://www.youtube.com/c/AlibabaDatabase/channels)
What comment sections do you use?
Tags: watercooler, webdev, ux
Published: 2021-04-16 06:54:28

---
title: What comment sections do you use?
published: true
description: 
tags: watercooler, webdev, ux
cover_image: https://static.wikia.nocookie.net/central/images/3/3d/Comments_input_box.png/revision/latest?cb=20200914142724
---
For the projects that need user feedback, the comment section is an absolute must-have.

Developing a fully functional and great-looking one can be pretty challenging tho, especially if tight deadlines have been set for the project.

That's where already built and easy-to-set-up solutions come into play. One of the most common ones I've seen is [Disqus](https://disqus.com/).

Can you recommend some others, preferably in the React/NextJS ecosystem? Or do you prefer to develop your own ones?
Cargue y obtenga una vista previa de un video usando JavaScript
Published: 2021-04-16 06:52:42

Para empezar, necesitamos un campo input y una etiqueta de video en nuestro HTML, así:

<code>
<input type="file" accept="video/*" id="input-tag"/>
<hr>
<video controls id="video-tag">
  <source id="video-source" src="splashVideo">
  Your browser does not support the video tag.
</video>
</code>

Ahora, en JS, obtengamos los identificadores de nuestros elementos HTMl y con esto listo, podemos escribir la función que leerá el video y lo mostrará dentro de la etiqueta de video, estamos usando la API FileReader:

<code>
const videoSrc = document.querySelector("#video-source");
const videoTag = document.querySelector("#video-tag");
const inputTag = document.querySelector("#input-tag");

inputTag.addEventListener('change',  readVideo)

function readVideo(event) {
  console.log(event.target.files)
  if (event.target.files && event.target.files[0]) {
    var reader = new FileReader();
    
    reader.onload = function(e) {
      console.log('loaded')
      videoSrc.src = e.target.result
      videoTag.load()
    }.bind(this)

    reader.readAsDataURL(event.target.files[0]);
  }
}
</code>

El truco aquí consiste en leer el archivo seleccionado como URL. De esta forma, se puede leer mediante la etiqueta de video.

Cuando el archivo se ha cargado (.onload evento), simplemente apuntamos la propiedad del video al resultado de la instancia de FileReader. Luego ejecute el método load() desde la etiqueta del video.
Designing Live Commenting in youtube/Facebook/Instagram live stream Video
Tags: systemdesign, faang
Published: 2021-04-16 06:48:30

Note - we are not focusing on the video streaming, but the live commenting feature.
Here it goes:
**Scope:**
•	User can comment on a content which she is viewing.
•	User Can view comments of other people who are commenting on the same content.

**Scale Numbers:**
•	10K Contents per minute.
•	650K comments per minute.
•	100K users view per sec.

**Clarifying Questions:**
Can a user only comment when the stream is live?
(based on this the data retention can be decided)

**Non-Functional Requirement:**
•	Highly Scalable
•	Highly Available (99.99 % )
•	Minimum Latency (p99 500MS)
•	Eventual Consistency
**API:**
•	POST/ ActivateViewerShip(userId, ContentId)
•	POST/ DeactivateViewerShip(userId, ContentId)
•	POST/ Comment(userId, ContentId, Comment)

**PULL Model:**
This will do http polling on a given interval, and get the related comments of the pertinent content.
This would not give real time experience to user, also if there are no comments we would be exhausting the http calls for doing nothing.
Minimizing the polling interval <=~5 sec would increase the server load drastically.

**PUSH Model:**
User lands to the content -> Stores the user viewership info into DB -> Get the Viewership Info of that content - > Broadcast to respective users.

**Data Modelling:**
Content_viewership:
Columns: ContentId, UserId, CreatedTime, IsActive
ContentId should be indexed, as most of the query will be on this column.
UserId can also be indexed when the users leaves the live commenting panel, it needs to update IsActive = false.
( we can delete the inactive records from the main table and put those in HDFS or any file system,
if future auditing or analytics are required, should be clarified)
Content_Comments
Columns: CommentId, ContentId, UserId, Comment, CreatedTime, IsActive
In this table also we need to index the ContentId and UserId(the one who makes the comment)..
IsActive flag for moving the deactivated data to some file system and free up the main table.
**Calculation:**
Compute:
W : 10K QPS
R : 100K QPS
*commenting rate is significantly lower than our viewing rate
Storage:
1 comment data = 3Kb ( viewership + comment)
Total : 3 * 650K
Approx : 2GB per minute
But if we are deleting the inactive rows we can assume, the there would be negligible growth in the DB.
High Level Design:
 ![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/roemz5mot1ehytawn9v2.PNG)
In addition to this *Write Locally and Read Globally* can be discussed during an interview, the concept is very well described in here : https://engineering.fb.com/2011/02/07/core-data/live-commenting-behind-the-scenes/
Too much of writing, I am putting the High Level Diagram. The scale, message queue, and caching details are pretty common.
If you see any any bottleneck or have any suggestion, feel free to put a comment.
CloudWatch LogsでWindows Defenderのログを収集する
Tags: aws, windows, cloudwatch, defender
Published: 2021-04-16 06:47:42

Amazon CloudWatch LogsにCloudWatch統合エージェントをインストールしてイベントログを収集する方法は、公式ドキュメントやその他ブログ記事もたくさんあり、そのまま従えば良いのだが、一番よくあるSystem、Application、Securityのログ以外にちょっとマニアックなもの（今回はWindows Defender）のイベントログをとるには、エージェントのconfigはどう書けばいいのか質問を受けたことがある。

まあ色々試せば誰でも発見できると思うが、あまり記事も見かけないし忙しい人達が自分で試す手間も減らしたいので、共有しようと思う。

<br>
configに使う`event_name`が、SystemやSecurityだとそれぞれそのまま記載すればいいのだが、それ以外のマイナーなイベントログだと何を指定するか知る必要がある。その確認方法は下記の通り。

<br>
Windows Serverで、`compmgmt.msc`を実行し、イベントビューアを展開する。
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qsxmyjraxdjp5nqceynp.png)

<br>
Windows Defenderのログは、Applications and Services Logs → Microsoft → Windows配下にある。
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dfpa56m19vbi97cek2f5.png)

<br>
あった。
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gxc01hbcyjwauo12u9jp.png)
 
<br>
右側のペインの`Operational`を右クリックし、プロパティを表示する。基本的にこのOperationalログが必要なもののようだ。
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wwpw40qhpjiytlteodwy.png)
 
<br>
プロパティウィンドウで表示されている`Full Name`が、必要な`event_name`に相当するので、これをコピーする。この場合は`Microsoft-Windows-Windows Defender/Operational`だった。

つまり、CloudWatchのconfigの中でこのイベントログの拾い方の定義は下記のように記述すれば良い。
```
{
"event_format": "xml",
"event_levels": [
"INFORMATION",
"WARNING",
"ERROR",
"CRITICAL"
],
"event_name": "Microsoft-Windows-Windows Defender/Operational",
"log_group_name": "WindowsDefender",
"log_stream_name": "{instance_id}"
},
```

<br>
例えばEvent ID 5007でフィルターしたい、という場合はCloudWatch Logsのフィルターパターンで下記のようにパターン定義すれば良いということになる。
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fum1s7sbyw3n46r2e8i8.png)

<br>
問題なくWindows DefenderのログがCloudWatch Logsに連携されていることを確認した。
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3vth1zurknxv6en63eg3.png)
 
<br>
こんな感じで、どんなWindowsイベントログでもCloudWatchに連携できるはず！
Fix Open Source Vulnerabilities AUTOMATICALLY with Dependabot
Tags: github, security, codenewbie, devops
Published: 2021-04-16 06:46:39

Keeping your dependencies updated is one of the easiest ways to __keep the software you build secure__. Unfortunately, it is also one of the most overlooked.

Luckily for us, __GitHub Dependabot__ can help with this, by updating your dependencies automatically, so you can spend less time updating dependencies and more time building.

### How does Dependabot work?

Let's quickly see how Dependabot works and then we'll see how to enable and use it.

First step, Dependabot __pulls down your dependency__ files and looks for any outdated or insecure requirements.

Then, if any of your dependencies are out-of-date, __Dependabot opens individual pull requests__ to update each of them.

Finally, you can check that your tests pass, scan the included changelog and release notes, and if everything looks ok, merge the changes back to your code.

### How to Enable Dependabot?

Enabling Dependabot is really easy.

![Enable Dependabot](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/602l0cpeonzhct5vgyt1.png)

First, fo to the _Security_ tab of your repository, then click on the _Enable Dependabot Alerts_ button.

At this point another screen will appear:

![Second step](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/beekuc4atwthiymv9stl.png)

The first button you have to click on to __enable Dependabot__ on your repository is the one I've highlighted in red. And technically this is all you need to have Dependabot enabled and look for vulnerabilities.

However, we want to take this __a step further__.

If you click on the other button, the one highlighted in green, Dependabot will be able to __automatically create pull requests__ for you to fix your vulnerable dependencies!

This is what we want, don't we? 👴🏻

### Video

Alright, enough talking... let's see this in practice.

{% youtube ijPoIfQWypQ %}

[Link to the video: https://youtu.be/ijPoIfQWypQ](https://youtu.be/ijPoIfQWypQ)

### Conclusions

Let me know in the comment section below if you want to see more about Dependabot or if you have any questions about it.

Also you may want to check out [this video here](https://youtu.be/A8SERCUE-i4), where I talk about __GitHub Code Scanning__ (which complements Dependabot in many ways).

__Like, share and follow me__ 🚀 for more content:

📽 [YouTube](https://www.youtube.com/CoderDave)
☕ [Buy me a coffee](https://buymeacoffee.com/CoderDave)
💖 [Patreon](https://patreon.com/CoderDave)
👕 [Merch](https://geni.us/cdmerch)
👦🏻 [Facebook page](https://www.facebook.com/CoderDaveYT)
🐱‍💻 [GitHub](https://github.com/n3wt0n)
👲🏻 [Twitter](https://www.twitter.com/davide.benvegnu)
👴🏻 [LinkedIn](https://www.linkedin.com/in/davidebenvegnu/)
🔉 [Podcast](https://geni.us/cdpodcast)

{% youtube ijPoIfQWypQ %}
5 Quick facts on Universal Selector
Tags: css, specificity, selector
Published: 2021-04-16 06:34:55

# 4 quick learning at CSS:

1. Specificity of a universal selector is zero. You can override it with a class or an id.
2. Browser reads CSS selectors from right to left. So try to put class or id at the end of the selector
3. You should only use a universal selector only in two cases. The first is while reset and the second is when you want to select all child elements inside a selector. Using universal selector is a controversial topic, so you shouldn't use this other than these two cases.
4. If you ever saw that your style isn't affecting the webpage, there might be a problem with CSS specificity. Determine the specify with a specificity calculator.
LeetCode 200. Number of Islands (javascript solution)
Tags: algorithms, javascript
Published: 2021-04-16 06:34:10

###Description:
Given an array of integers nums and an integer k, return the total number of continuous subarrays whose sum equals to k.

###Solution:
Time Complexity : O(n^2)
Space Complexity: O(1)

```javascript
// DFS solution
var numIslands = function(grid) {
    const gridLength = grid.length
    const rowLength = grid[0].length
    let count = 0
    
    // Loop through every cell in the grid
    for(let i = 0; i < gridLength; i++){
        for(let j = 0; j < rowLength; j++) {
            // When we hit land we know we are on an island
            // We will use this cell to visit all the 1's connected to it
            // Once we've visited all the 1's connected to this cell then we increase the count
            if(grid[i][j]==="1") {
                dfs(i, j)
                count++
            }
        }
    }
    
    // DFS search
    // Look in all directions and set the current cell to 0 to prevent this cell from being visited again
    function dfs(i,j) {
        if(grid[i][j] ==="1") {
            grid[i][j] = '0'
            // look north
            if(i - 1 >= 0) dfs(i-1,j)
            // look east
            if(j + 1 < rowLength) dfs(i,j+1)
            // look south
            if(i + 1 < gridLength) dfs(i+1,j)
            // look west
            if(j - 1 >= 0) dfs(i,j-1)
        }
    }
    
    return count
};

```
Media queries in Vuejs
Tags: spanish, webdev, vue
Published: 2021-04-16 06:03:13

Vue has become my favorite JavaScript Framework for many reasons, but this time I am not talking about that but about an NPM package that allows you to render certain content from your template depending on the size of the screen.
As FrontEnd developers it is our duty to adapt our web applications to different screen resolutions to offer the best possible experience, that is why while I was developing a website I had the need to change some elements depending on the device with which it was being used accessing.

Requirements:
- Vue 3
- NPM

We execute the following command in the terminal
<code>npm install vue3-mq</code>

To finish its installation and configuration we will go to our main.ts file where we will import the package and add the screen resolutions, in the end it should look similar to the following:
<code>
import { createApp } from "vue";
import VueMq from "vue3-mq";

const app = createApp({});

app.use(VueMq, {
  breakpoints: {
    sm: 450,
    md: 1250,
    lg: Infinity,
  }
})

app.mount('#app');
</code>

We will place the content between the labels
<code> \<mq-layout mq="lg">\</mq-layout></code>
where mq is the property where we will indicate the screen resolution for that content to be displayed.

An example of use would be the following:
<code>
<mq-layout mq="lg">
  <span> Display on lg </span>
</mq-layout>
<mq-layout mq="md+">
  <span> Display on md and larger </span>
</mq-layout>
<mq-layout :mq="['sm', 'lg']" tag="span">
  Display on sm and lg
</mq-layout>
</code>

Quite simple truth, with this we have finished and I hope that you also find it useful as it was for me, but I still cannot withdraw without first providing you with the developer repository of this NPM package https://github.com/craigrileyuk/vue3-mq.

Don't forget to program with ♥ ️.
Day 33 of 100 Days Of SwiftUI
Tags: swift, 100daysofcode
Published: 2021-04-16 06:33:35

I just completed day 33 of 100 days of SwiftUi. Today I learnt more about animations. 

The animation modifier for implicit animations like most modifiers only modifies before its declaration. That means only modifiers that come before an animation modifier will be animated. Again like most modifiers, you can use the animations modifier more than once per view.

You can also create your own animation modifiers based on existing animations using extension functions.