teleren/devto huggingface dataset:
CSS FILTER ON THE BACKGROUND ELEMENT
Published: 2021-02-03 13:27:06

I once while practicing just decided to make a photo editor app using react you can check the code [here](https://github.com/CoulKe/photo-editor), while on the research I ended up discovering about CSS filters. It's a way of applying filters (obviously) to an html element.
On this tutorial I will show you how to create a filter on a background element. Something like the cover image.
The complete demo can be downloaded on [codepen](https://codepen.io/luteya-coulston/pen/ZEBbpBP)

First we'll create an html file  called index.html with basic styling.

```html 
<body>
    <div class="content">
        <h1>Backdrop test</h1>
        <p>Just a demo on the CSS backdrop-filter</p>
    </div>
<style>
body {
            margin: 0px;
            background-image: 
                url('https://source.unsplash.com/600x800');
            display: flex;
            height: 100vh;
            width: 100vw;
        }

        .content {
            margin: auto;
            align-self: center;
            width: 50%;
            background-color: #fff;
            padding: 2rem;
        }
</style>
</body>
```

The body here is our background element with a background image linked inside the style tags and other styles for basic design.

You probably already know about the Css `filter` tag but if we use that, the whole body element and the content area will be applied the filters too.
To only apply filters on the background, we use `backdrop-filter` which uses the values of the normal `filter` tag. So let's do that, inside the body styles, we'll add a `backdrop-filter` style as seen below:
```CSS
body{
    backdrop-filter: blur(90px);/*added here after other styles*/
}
```
### Something to look out for:
There are browsers like opera mini as seen [here](https://operamini.tips/#/) which doesn't support CSS filters, how do you solve that you may ask.

To avoid such surprises, it's better to check for support before applying. We can do that using the CSS `@supports` as seen below.

```CSS
background-color: #fff;
   @supports (backdrop-filter: blur()) {
    background-color: transparent; /*Has to be transparent*/
    backdrop-filter: blur(100px) contrast(90%);
  }
```
**Note:** Here I have used a background image so adding a background color isn't necessary here but there are situations where you have no background image then you better apply a background color and inside the @supports check you apply a transparent background color.
Check [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter) for the documentation.
I hope you find this useful, have a nice day 🙂
On the journey to writing better comments
Tags: comments
Published: 2021-02-03 13:20:38

Tl;dr: Write them before writing the actual code

You always hear how you should write more, better comments... But this is a habit we probably all struggle with

A few days ago I was working on a function that I knew what it should do, which is to take an image at a specified path and create a copy of that image with a different width to a subfolder of the original image, the subfolder's name being the new width.

Here is the base structure of this function (yes, I write PHP, sue me):

```

    public function compressImage(string $imagePath, int $size)
    {

    }
```

I knew what the function should do, but didn't quite know how to make it do what I wanted to, so I jotted down my ideas in the form of comments: 

```
    public function compressImage(string $imagePath, int $size)
    {
        // Find out path of original image
        // Scale down image
        // Create new path if it does not exist yet
        // Save scaled down version in new path
        // Return relative path to compressed Image
    }
```

With this I managed to organize my mind. Next came the part of actually writing the code, which was now a lot easier because the comments told me, what I was supposed to do. This is the final function:

```
    public function compressImage(string $imagePath, int $size)
    {
        // Find out path of original image
        $originalImgPath = '';
        $splImgPath = explode('/', $imagePath);
        $fileName = array_pop($splImgPath);
        $originalImgPath = implode('/', $splImgPath);

        // Scale down image
        $imgObject = imagecreatefromstring(file_get_contents($imagePath));
        $scaled = imagescale($imgObject, $size);

        // Create new path if it does not exist yet
        if (!is_dir("${originalImgPath}/${size}")) {
            mkdir("${originalImgPath}/${size}", 0777, true);
        }

        // Save scaled down version in new path
        imagejpeg($scaled, "${originalImgPath}/${size}/${fileName}");

        return "${originalImgPath}/${size}/${fileName}";
    }
```

(_I was lucky because I could basically just copy the part of the actual scaling (`imagejpeg($scaled, "${originalImgPath}/${size}/${fileName}");` from a function I'd written a few months ago, so it was pretty much straight-forward._)

I hope you found this approach interesting and will be able to at least give it a try in one of your own projects. I would also be delighted to hear your ideas on how to write good comments.

Lastly, I hope you have a lovely day, wherever you may be
Incercept HTTP for logs
Tags: python, http, logging
Published: 2021-02-03 13:08:47

If you need a fast way to intercept HTTP requests for debugging, you can use `pyserv`. It's a one-class python library which simply logs inbound HTTP requests.

```
pip install pyserv
serv 8001

# in another terminal:
curl -X POST "http://localhost:8001/blub/lol" -H "accept: */*" -H "Content-Type: application/json" -d "[{\"yay\": \"data\"}]"
```

```
INFO:root:Starting HTTP SERVER at PORT 8001
INFO:root:POST  request,
Path: /blub/lol
Headers:
Host: localhost:8001
User-Agent: curl/7.54.0
accept: */*
Content-Type: application/json
Content-Length: 17



Body:
[{"yay": "data"}]

127.0.0.1 - - [03/Feb/2021 14:07:27] "POST /blub/lol HTTP/1.1" 200 -
```
Create and use a simple Swift package
Published: 2021-02-13 20:28:33

---
title: Create and use a simple Swift package
published: true
date: 2021-02-03 13:07:44 UTC
tags: 
canonical_url: https://peterwitham.com/create-a-swift-package
---

Creating a Swift Package is straight forward in Xcode once you know the basics. This video will show you exactly that.

You will learn how to create a Swift Package, Deploy it, and then use it in an application.

 <iframe src="https://www.youtube.com/embed/XMaRrJccPv4" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" style=" position: absolute; top: 0; left: 0; width: 100%; height: 100%; "></iframe> 

If you are not familiar using source control in Xcode then I have a video to help you, [Xcode source control with GitHub](https://youtu.be/-cIlyo52zYA).
Daily Developer Jokes - Wednesday, Feb 3, 2021
Tags: jokes, dailydeveloperjokes
Published: 2021-02-03 13:00:14

---
title: "Daily Developer Jokes - Wednesday, Feb 3, 2021"
description: "Check out today's daily developer joke! (a project by Fred Adams at xtrp.io)"
series: "Daily Developer Jokes"
cover_image: "https://private.xtrp.io/projects/DailyDeveloperJokes/thumbnail_generator/?date=Wednesday%2C%20Feb%203%2C%202021"
published: true
tags: #jokes, #dailydeveloperjokes
---

Generated by Daily Developer Jokes, a project by [Fred Adams](https://xtrp.io/) ([@xtrp](https://dev.to/xtrp) on DEV)

___Read about Daily Developer Jokes on [this blog post](https://xtrp.io/blog/2020/01/12/daily-jokes-bot-release/), and check out the [Daily Developer Jokes Website](https://dailydeveloperjokes.github.io/).___
### Today's Joke is...
![Joke Image](https://private.xtrp.io/projects/DailyDeveloperJokes/public_image_server/images/5e12588f481d4.png)

---
*Have a joke idea for a future post? Email ___[xtrp@xtrp.io](mailto:xtrp@xtrp.io)___ with your suggestions!*

*This joke comes from [Dad-Jokes GitHub Repo by Wes Bos](https://github.com/wesbos/dad-jokes) (thank you!), whose owner has given me permission to use this joke with credit.*

<!-- 
Joke text:
___Q:___ How many Prolog programmers does it take to change a lightbulb?

___A:___ Yes.
 -->
CSS Battle - #2 Carrom
Tags: css, cssbattle
Published: 2021-02-03 12:33:33

**HTML**
```html
<div class="column">
   	<div class="box"></div>
    <div class="box"></div>
</div>
<div class="column">
	<div class="box"></div>
	<div class="box"></div>
</div>
```

**CSS**
```css
  body {
    background: #62374e;
    margin: 50px;
    display: flex;
    justify-content: space-between;
  }
  .column {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  } 
  .box {
    width: 50px;
    height: 50px;
    background: #fdc57b;
  }
```
Easy to use Dockerfile for your next Node.js Project
Tags: docker, node
Published: 2021-02-03 12:33:28

---
canonical_url: https://blog.natterstefan.me/easy-to-use-dockerfile-for-your-next-nodejs-project
---

Docker has made our lives as developers easier. With just a few commands, we can start all kinds of programs and services without having to deal with the tedious installation of dependencies. Countless Docker images are freely available on Docker Hub. Whether you want to start your own open-source continuous integration & deployment server, such as [Strider](https://github.com/Strider-CD/strider), or your own NPM registry with https://verdaccio.org/, the possibilities are endless.

But these are mostly ready-made Docker images I was talking about. But for your own projects, you have to build your own Docker image. And in this article, I will show and describe in a few words how you can put your next NodeJS application into a Docker image. Here we go.

A simple `Dockerfile` looks something like this:

```
# We use the latest nodejs@14 image as our base image
FROM node:14-alpine

# set the default NODE_NEV to production
ENV NODE ENV=production

# make sure everything happens inside the /app folder
WORKDIR/app

# now we cache the node_modules layer
COPY ["package.json", "package-lock.json", "./"]

# install your dependencies
RUN npm install

# copy the source
COPY /src .

# and start the app
CMD ["node", "server. js"]
```

But what if you need to build the app first before you can run it? Let's take a look at this by using a  [multi-stage build](https://docs.docker.com/develop/develop-images/multistage-build/).

```
# We make use of ARG to set some variables that we
# can use in the Dockerfile
ARG node_version=14
ARG node_image=node:${node_version}-alpine

# STAGE 1: This is the "builder" stage where we build the
# application and give this step a name: "builder"
FROM $node_image as builder

ENV NODE ENV=production
WORKDIR/app

COPY ["package.json", "package-lock.json", "./"]

# compared to the first example we now install
# _all_ dependencies including devDependencies
RUN npm install

# copy the source
COPY /src .

# now build the app
RUN npm build

# STAGE 2: in this stage, we reduce the size of the
# image by only installing production dependencies
FROM $node_image as production

WORKDIR /app/

# install _only production_ dependencies to keep the
# docker image small
COPY --from=builder /app/package.json /app/package-lock.json ./
RUN npm install --production

# copy the build from the first stage (e.g. the dist folder)
COPY --from=builder /app/dist ./dist

# and start the bundled app
CMD ["node", "dist/index. js"]
```

This is it. You now have the option to choose between a multi-stage or a single-stage Dockerfile for your next project. Of course, we could optimize some things still and apply different approaches, but that's maybe part of another story of my [#90DaysOfProse challenge](https://blog.natterstefan.me/the-90daysofprose-make-writing-a-habit-challenge).

Cu,

Stefan

PS: Thanks Oliver for [the inspiration for this article](https://twitter.com/oliverjumpertz/status/1356605136555106306).
Comunidad para programadores y curso gratis
Tags: spanish, codenewbie, beginners
Published: 2021-02-03 12:28:31

# ¿Qué es esto?

![CodersAgora_Logo](https://dev-to-uploads.s3.amazonaws.com/i/59h121ej7iem7510blzy.png)
 

Hemos empezado una comunidad de programadores donde **la principal misión** es mejorar la experiencia de aprendizaje.
Donde forman parte profesionales del sector de la programación y diseño, y estudiantes del mismo.

No hay ningún interés lucrativo, queremos mejorar, que mejore nuestro entorno y hacer proyectos conjuntos y útiles.

Compartir y crecer. Crecer compartiendo.

## ¿Por qué surgió? 

Bien, sentíamos que hacía falta aclarar un poco el camino, además con todo el tema de la pandemia pues... el cóctel perfecto para sentirnos más perdidos todavía.

Así que después de un tiempo pensándolo nos hemos lanzado a montar la comunidad por fin. Coders'Agora.

## Curso gratis para empezar bien! 🎉

Bien, es un curso de principios de diseño y prototipado de apps, tanto web como móvil.

![Desktop](https://dev-to-uploads.s3.amazonaws.com/i/gvjmtrdsoct4a0av73de.jpg)
 

El contenido del curso será
- Inicio al diseño.
- Inicio al uso de la herramienta Figma.
  -  Frames, componentes, variables
- Principio de guia de estilos
- Prototipado de aplicación

Se os facilitará recursos para apoyar el curso y que podáis indagar una vez pasada la masterclass.

El curso se realizará en el discord de la comunidad, para evitar un spam máximo, dejamos el resumen de la definición de la comunidad en notion.


[MAS INFORMACIÓN AQUI](https://www.notion.so/saurasplace/Coders-Agora-Definici-n-4c89c55d19774d9fbc7537f099c6efa3)

Muchas gracias a esta magnifica comunidad por dar espacio y voz a gente como nosotros.

Cualquier duda o posibles mejoras por favor, comentadlas, estamos abiertos.
CSS Battle - #1 Simply Square
Tags: css, cssbattle
Published: 2021-02-03 12:18:18

**HTML**
```html
<div></div>
```

**CSS**
```css
  body {
    background: #5d3a3a;
    margin: 0;
  }
  div {
    width: 50%;
    height: 66.8%;
    background: #b5e0ba;
  }
```
Css: Aligning your lists with your text
Tags: webdev, css, html, beginners
Published: 2021-02-03 12:14:33

---
title: Css: Aligning your lists with your text
published: true
description: In this article/video i would like to show you how we can align our ordered and unordered lists on the left side with out text.
canonical_url: https://since1979.dev/aligning-your-lists-with-your-text/
cover_image: https://since1979.dev/wp-content/uploads/2021/02/aligning-your-lists-banner.jpg
tags: webdev, css, html, beginners
---

### Aligning list elements

In this article/video i would like to show you how we can align our ordered and unordered lists on the left side with out text.

{% youtube kBE23XbViUE %}

### The issue, and the "wrong" way of fixing it.

What is it that we are trying to "fix"? Well if you look at the image below you can see that ordered and unordered lists by default have an indent to the left. And if you are anything like me you will want to aling these.

![](https://since1979.dev/wp-content/uploads/2021/02/align-lists-one.jpg)

This space on the left side is caused by a padding on the left side of our lists, and that is easy enough to remove.

```css
ul {
    padding-left: 0;
}
```

Removing the padding will result in the image below.

![](https://since1979.dev/wp-content/uploads/2021/02/align-lists-two.jpg)

As you can see the bullets are now all the way to the left outside of our text area. To fix that we can add back a little padding by guessing the required amount, like in the code snippet below.

```css
ul {
    padding-left: 1.4rem;
}
```

Here we added a padding left of 1.4rem and as you can see in the image below in this case that is just enough.

![](https://since1979.dev/wp-content/uploads/2021/02/align-lists-three.jpg)

### A better way

But there is a better way. But first let me show you what the exact problem there is.

```css
ul {
    padding-left: 0;
    background-color: lightblue;
}
```

Here we add a background color of light blue to out list, and that will result in the image below.

![](https://since1979.dev/wp-content/uploads/2021/02/align-lists-four.jpg)

As you can see the problem is that the bullets are outside of our list element. And our problem would be solved if we could move these to the inside of our list. And it turns out that we can do exactly that.

```css
ul {
    padding-left: 0;
    list-style-position: inside;
}
```

By using the css [list-style-position](https://developer.mozilla.org/en-US/docs/Web/CSS/list-style) property and setting that to "inside" our bullets move to the inside of our list element, and in combination with the padding of 0 our list align perfectly with the rest of our text.

![](https://since1979.dev/wp-content/uploads/2021/02/align-lists-three.jpg)

This is just a simple trick but it is a nice one to add to your reset.css or whatever file you keep your standard styles.

### Subscribe and Follow

**[Subscribe to my Youtube channel.](http://www.youtube.com/channel/UCeyqA3y26RlnfUSx3ufgFoA?sub_confirmation=1)**

**[Follow me on Twitter](https://twitter.com/Vanaf1979)**

**Thanks for reading/watching and stay safe**
programming love languages
Tags: ruby, programming, devjournal
Published: 2021-02-03 11:59:17

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ofpsy9kpah8uywxdg5fh.jpg)

happy new month! happy new theme. after ‘new’, you know what’s coming… love (said no one ever, ha!). so, how do we start illustrating programming languages by means of love languages? let’s try with numbers. there are 5 love languages according to mr. gary chapman and (as of this writing) 700 programming languages according to wikipedia. further to this, according to mr. chapman, each person has one primary and one secondary love language. i believe that the same is true for programming languages. although i can argue that there is nothing wrong with having multiple of each instead of just one. and maybe to end, like love languages, one programming language is not necessarily better than the other. the important thing is you know which one are you. i know i am ruby.

---

further reading: centimentalcomics.com
How Kubernetes helps businesses manage their IT infrastructure?
Tags: kubernetes
Published: 2021-02-03 11:54:11

Today’s times of cut-throat competition demand high-quality applications that deliver collective client experience. Most of the business owners are worried about their IT infrastructure as it requires advanced apps that ensure security, flexibility, and robustness. Small and large businesses focus on making their business processes run smoothly using digital transformation. Enterprises are focusing on innovative trends to modernize their digital infrastructure.

DevOps help businesses become more agile and reliable. As businesses deal with the growing needs with stable IT services, DevOps helps to deliver the right technology solutions – CI/CD, regular monitoring, and maintenance of a production environment.


<b>Kubernetes is an effective tool for CTOs, CIOs, IT business owners, and product owners as it helps them achieve their business objectives.</b>Using <a href="https://addwebsolution.com/kubernetes-consulting-services">Kubernetes Consulting Services</a>, enterprises can save a lot of money as it requires less manpower to manage IT infrastructure. It automates the management of containers and helps to make apps more functional and scalable.

<b>The need for Containerized Apps</b>
Digital transformation is being adopted by a lot of enterprises all over the world. The main reasons why enterprises are shifting towards digital transformation are:



1) Build new apps that engage customers in different ways.
2) Improve processes and operations to deliver better products and services at affordable costs.
3) Generate new revenue streams by adapting new market trends.
 

With a growing need of effective, smart, and autonomous apps, businesses are looking for an architecture that fosters responsive development and deployment, while maintaining performance and security. Containers form the backbone of the applications that support digital transformation.


<b>Developed by Google, Kubernetes is a part of CNFC (Cloud Native Computing Foundation), providing a balanced implementation for various servers engaged simultaneously.</b>. 
It can be deployed in the system to allow multiple servers to manage the workloads easily. As Kubernetes can run on-premises and within the public cloud, it makes the tasks of IT teams easier. Being an open-source container orchestration platform, it delivers the most reliable results that help to improve an organization's IT infrastructure.

<b>Role of Kubernetes in businesses</b>

1) Multi-cloud flexibility
2) Faster time to market
3) Improved Scalability & Performance
4) Cost-effective option

To Know more about Kubernetes's use in IT infrastrcuture, Read Complete article here <a href="https://addwebsolution.com/blog/how-kubernetes-helps-businesses-manage-their-it-infrastructure">How Kubernetes helps businesses manage their IT infrastructure?</a>
Emotion Classification
Tags: python, keras, sentimental, machinelearning
Published: 2021-02-03 11:53:40

![Banner](https://dev-to-uploads.s3.amazonaws.com/i/i0imn001uy5oedeh5b6o.jpg) 

Description: *Tells You about the emotion/Sentimental Analysis of a Sentence*

It can tell you about the following emotions, all are for English Only Except for Hate:

Joy
Anger
Love
Sadness
Fear
Surprise
Hate (Hindi Only)

See Code on GitHub, do give it a 🌟 star: https://github.com/Siddhant-K-code/Emotions-Classification
:out-of-range pseudo-selector : CSS
Tags: webdev, css, codenewbie, programming
Published: 2021-02-03 11:46:47


New Shorty post on CSS after a long time. We'll learn about the `:out-of-range` selector. 

As the name says, the `:out-of-range` CSS pseudo-class select elements whose current value is outside the range limits specified by the min and max attributes. It works on an `<input>` element. 

It is only **applicable** to the elements that have *range limitation set*.

```html
<input type="number" min="5" max="10" />
```

```css
input:out-of-range{
    border: 2px solid #ff0000;
}
```

Demo: 

{% codepen https://codepen.io/rahxuls/pen/QWGwxKy %}

---

⚡Thanks For Reading | Happy Designing☕

Get weekly newsletter of amazing articles I posted this week and some offers or announcement. Subscribe from <a href="https://mailchi.mp/9f73b65b9c38/rahulism" target="_blank">Here</a>

<a href="https://www.buymeacoffee.com/rahxuls" target="_blank"> <img src="https://res.cloudinary.com/rahulism1/image/upload/v1608182430/bmc_nbxakd.png"></a>
How to get post data in json in express JS APIs - Node JS
Tags: node, express, api, webservices
Published: 2021-02-03 11:32:46

Thought it sounds simple and straight forward, this thing killed a lot of my time at the initial time of getting into node JS.

the query string are directly available in the request for both get and post methods but to get the post data you send in json format you need to update you express JS index.js . In the root of your express JS setup you have index.js add the following line on the top after the creation of app.

```
app.use(express.json());
```

Now you will be able to access the json data in post request in req.body