teleren/devto huggingface dataset:
Frost Effect in CSS
Tags: html, css, tutorial
Published: 2022-01-24 11:55:44

Hey **fellow creators**

How to create a *glassomophorism (frost effect)* in CSS? 
 
If you prefer to watch the video **version**, it's right here :

{%youtube 8_oovFfb_fw%}

&nbsp;
##1. The HTML structure.
Create a button inside two divs:
```html
<div class="home">
      <div class="container">
        <button>Welcome</button>
      </div>
</div>
```

&nbsp;
##2. Style your button.
Add an image to the background of the page:
```css
.home {
	background: url("https://images.unsplash.com/photo-1631515998058-69359a50da68?ixlib");
	background-repeat: no-repeat;
	background-attachment: fixed; 
	background-size: cover;
	height: 100vh;
	padding-top: 125px;
}
```

&nbsp;
Now style the container that will look frosted:
```css
.container {
	margin: auto;
	width: 450px;
	height: 275px;
	box-shadow: 0 0 10px 0 rgba(0, 0, 0, .4);	
	border-radius: 5px;
	position: relative;
	z-index: 1;
	background: inherit;
	overflow: hidden;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}
```
(The *z-index* will create a new stacking context).

You do inherit the background of the page at the same position (if you comment it, you’ll see that otherwise you inherit the background as a whole inside of that container, which isn’t what we want!).

&nbsp;
Next, style the button:
```css
.container button {
	padding: 10px 15px;
	border-radius: 5px;
	border: none;
	cursor: pointer;
	font-family: Lora;
	background: #b6604f;
	color: #f1f1f1;
	font-size: 27px;
	padding: 15px 30px;
	text-transform: uppercase;
	letter-spacing: 2px;
	font-weight: 800;
}
```

&nbsp;
##3. Add the frost effect!
You need to use the pseudo-element *before* in order to create that effect:
```css
.container::before {
	content: "";
	position: absolute;
	background: inherit;
	z-index: -1;
	inset: 0;
	filter: blur(10px);
	margin: -20px;
}
```
The z-index will also create a new stacking context, but since the pseudo-element before is kind of a child of the container, it will always stay at the top of the container.

Bravo, you are done!

&nbsp;
Come and take a look at my **Youtube channel**: https://www.youtube.com/c/TheWebSchool

*See you soon!*

Enzo.
What's An Virtual Environment
Tags: virtualenv, webdev, python, mac
Published: 2022-01-24 11:43:23

## **Virtual Environment**
Virtualenv will isolate your Python/Django setup on a per-project basis. This means that any changes you make to one website won't affect any others you're also developing.
Installing packages globally can be avoided by Virtual Environment.
_when a virtual environment is active, the packages will be installed within the environment and not in the whole system._

**Installing Virtual Environment**
In the terminal of your mac entering the command below in working directory, which installs it in your working directory
`
python3 -m venv myvenv
`

- Here, myenv is the name of our virtual environment

- We can keep any other names, lower case letters are suggestable.

**Running Virtual Environment and Working In It**
Running the below command in the directory we installed our virtual environment will activate or start the virtual environment
`
source myvenv/bin/activate
`

- _Here we should replace myenv with the name of the virtual environment with the name we used for virtual environment_

_When we start the virtual environment, we can identify that it started when you see the prompt in your terminal or console is prefixed with (myenv) like this, _
`
(myvenv) manoj@Manojs-MacBook-Air ~ % 
`

**_We had successfully understood the way to install a virtual environment in a directory and how to make it running_**
Dear machine learning newbies, please don't skip steps
Tags: machinelearning, beginners, python, ai
Published: 2022-01-24 11:15:44

I know machine learning is a hot topic. You probably are motivated by news, social media saying how smart an AI system is. Your parents might have advised you to follow this field. Your smarty pant friend writes a very smart program to analyse weather. Maybe you, come from other majors than computer science, are influenced by your own professors.

Then you decide to google "how to study machine learning" or "good university for AI major" or "how to make an assistant like Jarvis" despite the fact that you don't even know how to write a simple program. You probably don't understand the following abbreviations: CLI, OS, OOP. Magically, you copy code just like a monkey. It works, but you don't understand WHY. 

Basically, this is you -> https://youtu.be/MNb9Q8vAzjw?t=49

Congratulations, you have taken shortcuts. Everyone is happy and clapping. And that's my sarcasm.

If you are a self-study machine learning newbie, please read the requirements of the course, learn the requirements, then learn the course.

For example, you take [Machine Learning by Tutorialspoint](https://www.tutorialspoint.com/machine_learning/index.htm).

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8nwu9jldqpc6a6gpr1re.png)
 
See that prerequisites, learn all that first. 

If English is not your first language, learn English vocabulary for Computer Science. Most of the documents about Machine Learning are in English. Don't trust me? Just ask your any fellow people who have been working or learning things related to computer. 

If you are following this major by going to university, focus on class, close this blog, start doing your assignments.
SetOps now has a Community Discord server open for all developers to join.
Published: 2022-01-25 10:30:42

---
title: SetOps now has a Community Discord server open for all developers to join.
published: true
date: 2022-01-24 11:15:22 UTC
tags: 
canonical_url: https://www.setops.co/blog/announcing-community-discord
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/udifl0uxjwyy2ufbmii6.png
---

We invite you to join our discord community and be part of creating a must-have power tool that every developer needs to deploy cloud apps to AWS with ease.

Read the full article here: [www.setops.co/blog](https://seto.ps/2677fd)

Or just join us on [discord](https://discord.com/invite/2jZsaP96Gs)
Mongoose get list of users who bought a ticket everyday of the week
Tags: mongoo, express, node
Published: 2022-01-24 11:12:06

I'm creating a product for a company, and one of the feature is that they want to award any user who buys an item everyday for the 7 days of the week.
I'm currently using node, express, and mongoose. 
So how do I get the records of only the users who bought at least an item everyday for the seven days of the week. This draw will be made every weekend
Lost in comfort zone
Tags: motivation, devjournal, career, watercooler
Published: 2022-01-24 11:07:51

Recently, I learned Angular and completed a task in an Angular Project. It was merged into the Main branch and successfully released into Production. So I should be confident to do a similar task in Angular, right? Unfortunately, I wasn't.

I had a feeling that I'm not good as others think I am. I doubt myself if I'm able to do this. Developers often have this situation and people call this Imposter Syndrome. This happens among developers as the internet says. Every time I intend to try something different, I was renewing my fear. I read more about this and found many ways to get rid of it but, my case was different. There was another factor influencing my fear. 

From the beginning, I built my tech stack around C# and related frameworks. I became fluent in ASP.NET Core and created many APIs in the past years. My comfort zone was filled with API development. But in a 10 member team, you have to Juggle multiple balls to cover all projects. So when I was assigned a front-end task on Angular for the first time, I was very excited and afraid at the same time. Learning new things always gives me a push and fortunately, I finished the first task without much hassle. Since I'm good at back-end development, I thought of ASP.NET Core as my hometown and I'll always go back there. When another front-end task was assigned, a couple of thoughts crossed my mind. “What if I couldn't complete the task? What if I'm not able to learn Angular well? I'm arguably fitted in the back-end team. I don't belong here.”. These uncertain thoughts almost pulled me back. But I didn't give much chance for these unwanted thoughts to grow. When I started doing the task, all my fears went away. I was able to finish it better than I expected. Also, I enjoyed learning new things in Angular and I even tried out some of those learnings in my hobby project on the weekend. It wasn't that bad, after all.

Every time I was assigned to do new things, I had this fear inside me. The fear of getting thrown out of my comfort zone and underestimating my capabilities. Later I figured it was not worth my time. I realized nobody is going to push me forward, it has to be me. I have to drive myself and get out of my comfort zone. There exist people who are facing their own fears and couldn't end up where they desired to be. It is okay to have fears in life and maybe we can't get rid of them all of a sudden yet, remember a small step is enough for a good start. Determining not to put pressure while trying new things was the first step I took, and indeed it laid a big ground for every step I took since then.
I Created A Gui Calculator With Java Swing
Tags: java, swing, calculator, gui
Published: 2022-01-24 10:51:12

**_Hai Friends_** ❗❗
I am Adithyan A and Thank you for clicking on my first ever post

###**What is this ?**
It is a arithemetical calculator made with java and swing library
This was my first ever project and now it in its complete stage
> This is the Screenshot of the Complete version of the app

> ![Image-1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r1q2tleez0rilsjpscgk.png)

> ![Image-2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0q7t0i650mfqsl1pa6iy.png)

> ![Image-3](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jcdwi0h9ltfmq20tpk0m.png)

> ![Image-4](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/74vc81ysenqeet12wobv.png)

###**Features**
- Fast
- Simple
- Responsive

###**Use it with .jar executable file**
1 - Clone the github repository 
```bash
git clone https://github.com/AdithyanA2005/Calculator_Swing.git
```

2 - Change the directory To Calculator_Swing/out/artifacts/Swing_Calculator_Java_jar

3 - Copy the executable file Swing_Calculator_Java.jar to your desired location

4 - Run the executable file by double clicking it


###**How To Use It With the Source Code ?**
> _**Using it is very simple, Follow the below steps**_

1 - Clone the github repository
```bash 
git clone https://github.com/AdithyanA2005/Calculator_Swing.git
```

2 - Change the directory
```bash
cd Calculator_Swing/src
```

3 - Compile the java file
```bash
javac Main.java
```
4 - Run The Program 
```bash
java Main
```

### Evolution Of The App ?
> As This is my first ever project
> This has evolved a lot

**The Screenshot of The First Ever Version**
> ![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/24k68eefhxsi53ad5wld.png)

**The Final Version Of The App**
> ![Image-2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0q7t0i650mfqsl1pa6iy.png)
How onMount() works in Svelte?
Tags: svelte, beginners
Published: 2022-01-24 10:46:35

Often, a series of actions requires to perform when a component renders to DOM. For example, we need to call a function before updating or removing a component. To handle this, Svelte has built-in lifecycle methods like `**onMount(), beforeUpdate, afterUpdate, onDestroy()**`.

In this article, we learn about the `onMount()` lifecycle method of svelte. If you are a beginner, you must visit my old posts on Svelte.

Svelte creates, mounts, updates, and destroys a component. In short, every component has a lifecycle. The application makes and eventually destroys a svelte component.

The `onMount()` method executes after the component renders to the DOM.

Create a new file `OnMountComponent.svelte`, And add the following content

```javascript
<script>
    import { onMount } from 'svelte'

    let tasks = []
    const url = 'https://jsonplaceholder.typicode.com/todos/'

    onMount( async () => {
        fetch(url)
            .then( response => response.json() )
            .then( data => { tasks = data } )
    });
</script>

<table>
    <thead>
        <tr>
            <th>Task Id</th>
            <th>Task Name</th>
            <th>Status</th>
        </tr>
    </thead>

    {#each tasks as t}
        <tr>
            <td>{t.id}</td>
            <td>{t.title}</td>
            <td>{t.completed}</td>
        </tr>
    {/each}
</table>
```
We imported an `onMount()` function and we use a public url `https://jsonplaceholder.typicode.com/todos/` to fetch the API. This is a public API for testing purpose, please do not abuse it.

Here we use an onMount() to get the data using the fetch API.

```javascript
onMount( async () => {
        fetch(url)
            .then( response => response.json() )
            .then( data => { tasks = data } )
    });
```

We'll discuss `fetch` API in different article.

Next is to import this component in the App.svelte.

```javascript
<script>
    import OnMountComponent from "./OnMountComponent.svelte";
</script>

<main>
    <OnMountComponent />
</main>

<style>
	main {
		text-align: center;
		padding: 1em;
		max-width: 240px;
		margin: 0 auto;
	}

	@media (min-width: 640px) {
		main {
			max-width: none;
		}
	}
</style>
```


Thats all for now. In this article, we learn how to the use onMount() function in Svelte to load the component in DOM. See you in the next article.
Deflationary Token Development Company | Developcoins
Tags: token, development, company
Published: 2022-01-24 10:41:15

[Deflationary Token Development Company](https://www.developcoins.com/deflationary-token-development)| Developcoins


**Deflationary Token Development **
 
Deflation in crypto finance refers to a reduction in the value of an asset owing to causes such as over-minting is popularly said as Deflation. When a token transfer occurs in a deflationary token model, a certain percentage of tokens are taken from the market. Burns is the process of eliminating these tokens from the market. 

**Deflationary Token Development Company**
 
Developcoins provides the best Deflationary Tokens on top of the Blockchain Platforms like Ethereum, Tron, EOS, Binance, Solana, Polygon, etc., based on your requirements.We also focus on deflationary tokens security due to the direct link between the company's success and the health of the token ecosystem. We also follow all necessary guidelines regarding the token's distribution and sale, the token's classification as security will have no impact on the ecosystem's health.

 
These tokens can be burned via two alternative techniques, which are as follows:

 **(i) [Buy Back and Burn](https://www.developcoins.com/deflationary-token-development)

 (ii) Burn on the Transaction**

**List Of Deflationary Tokens **

Bitcoin (BTC)

Crypto.com (CRO)

Binance Coin (BNB)

Litecoin (LTC)

Bitcoin Cash (BCH)

Tenset (10SET)

Filecoin (FIL)

Ripple (XRP)

TRON (TRX)

BOMB (BOMB)

NUKE (NUKE)

Terra (LUNA)

Polygon (MATIC)

SafeMoon (SAFEMOON)

PancakeSwap (CAKE)

Ethereum Classic (ETC)

Solana (SOL)

FTT

CRED

CRNC

TABOO

OPTI

VOIDX

CBN

SWAP

CUMMIES

HOPE

BINGUS

ADGNZ

THUG

ADA, etc

**Benefits of Our Deflationary Token Development:**
 

- It helps to keep the token's value stable once it's available for trading.
-  
- Because the market's demand for assets is higher, it improves liquidity.
-  
- It has attracted a large number of investors due to the limited supply of tokens.


**If you are interested to Create your Deflationary Tokens Now!**

Explore Here-> [https://www.developcoins.com/deflationary-token-development](https://www.developcoins.com/deflationary-token-development)
Book A Free Consultation via #Call/Whatsapp: +91 9843555651 
Telegram - https://t.me/Developcoins
Skype - live:Tech Innovate
Email id - sales@developcoins.com

Original Source - https://www.developcoins.com/deflationary-token-development
Publishing Unity WebGL builds to Unity Play
Tags: unity3d, webgl, tutorial, testing
Published: 2022-01-24 10:39:19

After updating my Unity to `v2020.3.26f1`, I realised something amazing. I might be a little late to the game but it seems Unity has unleashed automated web publishing straight from the editor, and hosted on Unity's own community platform 'Unity Play'. 


How it works (in a nut shell).

Make something amazing in Unity. For me, I used a tutorial 2D platformer project. When ready, use the toolbar up top to open Publish > WebGL Project. 

![Publish webgl editor option](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j2ex5zua8lkxulfocrmd.png)

View the (new?) Publish window looking all fancy and helpful. Select 'Create and Publish New Build'.

![Publish build window](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f2j9esu0ek9u2flecqwb.png)

Give it a couple of minutes to build & publish to Unity Play. Upon completion, your default browser will be taken to your Unity Play unique url. It'll be in edit mode so you can update the game title, description and icons. Hit 'Save' to continue.

![Hosting game in Unity Play](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o0z1fpfezzds3ckkuf7j.png)

After you're done editing your game info, you can start playing and even better, sharing your game. For each game, there's a 'viewed' & 'played' counter which is always exciting to see.

![Game now published](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lmaz7aaq299yfsxba18u.png)

Switching back to your editor, you'll see the confirmation dialog of a successful upload + publish.

![Upload complete dialog](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/stp0szvpb86qirlmpx8h.png)

And done! That's it.

![relief](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/55gg5mfu7l9hkmmq82s7.gif)

I was pleasantly surprised when I saw this feature. I typically either create standalone builds or host in Firebase. Recently I've seen an increase in Unity services available and their overall presence is ramping up online.  

Services such as this are what continues to pull me towards Unity and entice me to create anything my mind desires (or is able to ...). The ease of use and guidance is greatly appreciated, especially by those of us who aren't proficient in Unity.

Now, onto the next game/project/idea/thing!
My First, Only, and Last NFT!?
Tags: devjournal, devmeme, motivation, art
Published: 2022-01-24 10:20:20

My Journey to Create and Sell an NFT!

- NFT? 

- Why is it an exciting market? 

- Has anyone won anything? 

- How to create and sell?

discover this and much more in this post:

 https://link.medium.com/3wRY7ZOL4mb
Hello This is my test Blog.
Tags: test, javascript
Published: 2022-01-24 10:13:03

**Hello**
_Test_
[](https://www.youtube.com/watch?v=iSJDatacrFo)

- nwfor
- kjnonw

## nheading

> quote

`console.log('Jesus loves you')`

```
forEach(() => {
console.log('Jesus loves you')
})
```

![This is an image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/czvgteeivr8lkxi8pxre.jpg)
React Data Fetching: Axios
Tags: javascript, beginners, webdev, tutorial
Published: 2022-01-24 09:59:48

Hello there, today we'll go over how to get data in React in the simplest way possible utilizing React Hooks (useState and useEffect), the axios library, and a mock API (JSON Placeholder

Let's fetch some data, shall we? 
![fetch](https://media.giphy.com/media/dPWFfe3tykssE/giphy.gif)

Make a directory and create a react app with this command
<kbd>npx create-react-app .</kbd>

Install the axios package: `npm install axios`

---

Create a new component and call it whatever you like. I'll call it 'Fetching' for the purposes of this lesson. 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g1w59msx4obdih03hz76.PNG)
```javascript
import React from "react";

const Fetching = () => {
  return (
    <div>
      <h1>Fetching my Data</h1>
    </div>
  );
};

export default Fetching;
```

Now we need to construct the method that will retrieve our data from the API. 
```Javascript
import axios from "axios";
import React, { useEffect, useState } from "react";

function Fetching() {
  const [posts, setPosts] = useState([]);
  useEffect(() => {
    axios
      .get(`https://jsonplaceholder.typicode.com/posts`)
      .then((res) => {
        console.log(res);
        setPosts(res.data);
      })
      .catch((err) => {
        console.log(err);
      });
  }, []);
  return (
    <div className="output">
      <h1>Data Fetching </h1>
      <ul>
        {posts.map((post) => (
          <li key={post.id}>
            <p>Post id: {post.id}</p>
            {post.title}
          </li>
        ))}
      </ul>
    </div>
  );
}

export default Fetching;

```

---

## Import Fetching into your app

```javascript
import "./App.css";
import Fetching from "./Fetching";

function App() {
  return (
    <div className="App">
      <Fetching />
    </div>
  );
}

export default App;

```

---

Source Code link: [Click](https://github.com/drsimplegraffiti/sandbox/tree/main/fetchDataReact)

## Conclusion
I hope you found this article useful. Read more about React Js here: 
* [react-search-filter](https://dev.to/drsimplegraffiti/react-search-filter-2ec8)
* [React Conditional Rendering](https://dev.to/drsimplegraffiti/react-conditional-rendering-32b4)
A11y tips: don't remove focus indicator
Tags: a11y, tips, html
Published: 2022-01-24 09:47:10

Very often we use `outline: 0` to remove the effect of focusing on an element. This, which initially prevents a border from wrapping around it when you click/touch on it, means that **users navigating using the keyboard don't have a visual indicator of which element has focus**. And we know that [every interactive element needs a focus indicator](https://noti.st/ericwbailey/TcMJFP).

Therefore, it is recommended to address this problem using some of these solutions:

## 1. Style `outline property`

Use CSS to give the outline the effect you want, for example:

```
button:focus {
  outline: 4px dashed black;
}
```

## 2. Style element itself

Remove the outline but design other styles for the focused element, using the CSS properties that suit you best: `border`, `background-color`, `text-decoration`, `color`... In case you choose this option, it is important to be careful [not to use the color](https://www.w3.org/TR/WCAG21/#use-of-color) as the only element to provide information about the focus, since there may be colorblind people who are not able to distinguish between the normal state and the focus state.

```
button:focus {
  outline: none;
  /* any accessible style you want here */
}
```

## 3. Remove outline for mouse users only

Since the problem occurs when mouse users click/touch on an interactive element, it seems best to remove the outline for these users only. Luckily we have a well-supported CSS pseudo-class at our disposal that allows us to do something like this: `:focus-within`.

With [good browser support](https://caniuse.com/css-focus-visible) we can now do something like what [Lea Vérou proposes](https://twitter.com/LeaVerou/status/1045768279753666562).

```
button:focus:not(:focus-visible) {
  outline:none;
}
```

This way we **only remove the outline for users clicking/touching** the element, and we can complete our styles using the same pseudo-class for keyboard navigation:

```
button:focus-visible {
  outline: 4px dashed black;
}
```

There are very good articles on this subject by [Chris Coyier](https://css-tricks.com/the-focus-visible-trick/) and [Patrick H. Lauke](https://www.tpgi.com/focus-visible-and-backwards-compatibility/).