teleren/devto huggingface dataset:
Top 7 CSS Generators
Tags: html, javascript, webdev, css
Published: 2021-12-10 15:46:06

## In this post I am going to list some of the CSS Generators that can help improving your productivity and make development a lot easier.

### 1. CSS Flexbox Generator ([Link](https://loading.io/flexbox))
<h4>This generator can help you generate flex box templates and can make work a lot more easier.</h4>
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ovmutoze8sfal73y5bpj.png)

### 2. Neumorphism Generator ([Link](https://neumorphism.io/))
<h4>This generator can help you generate Neumorphism UI's and can make work a lot more easier.</h4>
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ehk900q3096yq9rqkety.png)
### 3. Glassmorphism Generator ([Link](https://hype4.academy/tools/glassmorphism-generator))
<h4>This generator can help you generate Glassmorphism UI's and can make work a lot more easier.</h4>
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a7y7bc85e21ixz0k3wtm.png)

### 4. Fancy Border Radius Generator ([Link](https://9elements.github.io/fancy-border-radius/))
<h4>This generator can help you generate Stylish Border Radius templates and can make work a lot more easier and save a lot of time.</h4>
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9obi89al3fkbj95fvn35.png)
### 5. CSS Grid Generator ([Link](https://cssgrid-generator.netlify.app/))
<h4>This CSS Generator you can easily generate Grid templates that can save a lot of time.</h4>
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u8o8d005ts28nfkh9f9j.png)

### 6. Text Shadow Generator ([Link](https://html-css-js.com/css/generator/text-shadow/))
<h4>This CSS generator helps to generate text shadows within no time.</h4>
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ek1q9xnmf0q1smzh4eq3.png)
### 7. Gradient Button Generator ([Link](https://gradientbuttons.colorion.co/))
<h4>This generator helps to generate gradient hover buttons within no time and saves a lot of time.</h4>
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6fdwpm8ygqtv2i414518.png)
 
<h4>I hope this blog helped you in your development journey, all these generators really helps to make work more faster and reduces development time.</h4>
CSS background changer.
Tags: codepen, css, backgroundchange, html
Published: 2021-12-10 15:45:37

<p>this project is a simple HTML and CSS background changer by using CSS animation and transition  which helps in making it.</p>

{% codepen https://codepen.io/Abhi7raj/pen/oNGzxqw %}

> guys if you have any doubt please ask in the comment section.

## CODEPEN LINK

[codepen link](https://codepen.io/Abhi7raj/pen/oNGzxqw)
Boloberry proporciona los diferentes materiales disponibles para la impresión 3D

Published: 2021-12-10 15:38:59

Filamentos 3D disponibles
Boloberry cuenta con una amplia gama de filamentos de todo tipo, sin embargo, hay que mencionar el PLA y el ABS, que son los más comunes dentro de la industria de la impresión. El Ácido Poliláctico (PLA) es un termoplástico fabricado con base en recursos naturales renovables como el almidón de maíz, raíces de tapioca o caña de azúcar y se ha hecho popular dentro de la industria por su origen ecológico. Los filamentos disponibles en Boloberry con este tipo de material son: PLA Standard, PLA Tough (Ultrarresistente) y PLA-X3.

Por otro lado, el Acrilonitrito Butadieno Estireno (ABS) es un material que se caracteriza por ser muy resistente a los golpes, lo que resulta ideal para la impresión de piezas automovilísticas y de otras que requieran de resistencia, tanto en el ámbito industrial como en el doméstico. De estos filamentos, Boloberry maneja el ABS, ABS Gama X, Policarbonato ABS (PC ABS) y el Policarbonato ABS V.0 (PC ABS V.0).

También trabajan con filamentos solubles, metálicos, técnicos, flexibles, entre otros; que garantizan piezas con acabados de alta calidad y 100% funcionales.

Amplia gama de filamentos personalizados
Con una experiencia de más de 5 años en la fabricación aditiva, Boloberry tiene disponible una amplia gama de filamentos, todos realizados con diferentes características, que permiten al cliente elegir el que mejor se ajuste a su proyecto de impresión 3D. Hoy en día, la mayoría de los fabricantes de impresoras 3D limitan la temperatura para materiales como el PLA y el ABS, sin embargo, los profesionales de esta empresa configuran sus impresoras, en función del modelo, hasta los 300° o 500°, lo que les permite trabajar con cualquier filamento disponible en el mercado, incluyendo la gama industrial.

La selección del material para la impresión de una pieza es un elemento muy importante dentro del proceso, ya que de esto dependen sus propiedades mecánicas, sus características funcionales y el aspecto deseado de la reproducción, razón por la que Boloberry cuenta con un equipo altamente capacitado para orientar al cliente en la selección adecuada del filamento de acuerdo al producto final que se desea. 

[ver mas...](https://diarioalbacete.com/)
Las cajas gourmet a domicilio de Las Flores No Se Comen

Published: 2021-12-10 15:38:15

Opciones de cestas gourmet para celebraciones
Para diferentes tipos de ocasiones y festividades, como aniversarios, bodas, cumpleaños, Navidad o simplemente para disfrutar de un desayuno exquisito con la persona más cercana, las cestas gourmet a domicilio son una excelente opción. Están compuestas por ricos comestibles y accesorios como tazas, flores o tarros seleccionados para cada celebración.

Una característica resaltante es que los artículos son 100% personalizables, sin coste extra. Para usar este servicio, se pueden escoger alimentos de un extenso catálogo que incluye panes horneados, frutas, bebidas, café, vinos, cervezas, zumos, tazas, flores y ramos, velas, ibéricos, quesos, snacks y muffins, entre muchas otras opciones. Algunos productos están elaborados por la compañía, mientras que otros pertenecen a algunas de las mejores marcas del país. Asimismo, es posible solicitar productos extra y colocar un mensaje dedicatorio para quien reciba el presente.

Un mercado creciente para este comercio es el área empresarial. En la actualidad, es frecuente que los dueños de organizaciones busquen detalles para congraciarse y valorar a sus empleados. Las cestas gourmet son un regalo original para cualquier ocasión. En este sentido, ponen a la disposición de los consumidores este servicio con un sistema de pedido online fácil de usar.

Hacer un pedido de cajas gourmet a domicilio
Hacer un pedido desde la plataforma de Las Flores No Se Comen es muy fácil. Primero, se tiene que elegir una de las cajas de desayuno o de merienda y personalizarla al gusto. Después, escribir la fecha y el horario de entrega, el cual se realizará en un período no mayor a 24 horas. Por último, es necesario especificar la dirección de envío.

Los transportes de lunes a viernes son gratuitos y cuentan con un servicio de asistencia telefónica en caso de dudas durante el traslado.

Las Flores No Se Comen trabaja cada día para ofrecer a sus clientes más opciones y un trato profesional. En la página web de la empresa, se puede encontrar una gran variedad de productos para regalar en próximas festividades, como Navidad y Año Nuevo.

[ver mas...](https://diarioalbacete.com/)
RUST Issue
Published: 2021-12-10 15:36:17

@krowemoh  - Your rustc tutorial is great, but I am stuck moving the struct from main.rs to schema.rs and am receiving compilation errors that I dont know how to resolve.  Any Advice or Source code example would be awesome!!!

For reference and my error.

https://dev.to/krowemoh/a-web-app-in-rust-06-registering-a-user-57po
Create an API server with Clojure and Pedestal
Tags: clojure, functional, programming
Published: 2021-12-10 15:33:48

#### Build your first web API in the functional programming world of Clojure with this step-by-step guide.

### <br>

## Introduction

This article will walk you through building a web API using Pedastal, a Clojure web framework. [Pedastal](http://pedestal.io/) is focused on APIs first and exemplifies the very best possibilities of Clojure's functional paradigm.

You'll put together a basic project with the necessary dependencies and serve up some basic information about superheroes. In a later article, we'll also secure the API using a collection of best practices and Auth0!

## Requirements

For this tutorial, you won't need much out of the box. Be sure you've:

1. Installed the [JDK](https://www.oracle.com/java/technologies/downloads/). This tutorial was written with the latest and greatest version of Java.
2. If you're on windows, set JAVA_HOME as an environment variable.
3. Wondered why JAVA_HOME isn't set by the JDK installation in 2021
4. Installed [Clojure](https://clojure.org/guides/getting_started)

Open up your command-line interface and check that you're good to go:

```bash
clj --version
 
Clojure CLI version 1.10.3.967
```

## Setup a New Clojure Project

>If you're brand new to Clojure, check out ["Why Developers Should Look into Clojure"](https://auth0.com/blog/why-developers-should-look-into-clojure/) first.

Clojure's ecosystem provides several build and dependency management tools. While [Leiningen](https://leiningen.org) and [Boot](https://github.com/boot-clj/boot/) provide this functionality and have been around a while, the Clojure team has provided the solution we'll be using for this article  [tools.deps](https://clojure.org/guides/deps_and_cli).

Skipping Leiningen reduces the number of things we need to install. **tools.deps** is included with the Clojure CLI and satisfies all of the requirements for this article, so you should be set.

Like `package.json` for Node, `pom.xml` for Maven projects, and `requirements.txt` in Python, Clojure's CLI uses a single file to manage its dependencies. Create a root folder (`clojure-pedastal`) for your project on your system and, in it, create a file called `deps.edn`.

`deps.edn` contains dependencies (for different environments, like development or production), additional commands/scripts, and much more. We'll keep it simple for now - but do know that EDN stands for ["Extensible Data Notation"](https://github.com/edn-format/edn) and is used across the Clojure universe.

[Read more...](https://auth0.com/blog/create-an-api-server-with-clojure-and-pedestal/?utm_source=content_synd&utm_medium=sc&utm_campaign=clojure)
Living in the Shell #11; cp (Copy Files/Directories)
Tags: productivity, linux, bash, devops
Published: 2021-12-10 15:31:10

## `cp` 🏭

Creates copies of files and directories.

⚠️ Default behavior is to **overwrite** destination files.

## Copy single file

```sh
cp ~/.bashrc ~/.bashrc-copy
```

## Copy multiple files into a new directory `-t`

```sh
cd ~ && cp .bashrc .zshrc target-dir
cd ~ && cp -t target-dir .bashrc .zshrc
```

> Both create `target-dir` directory and copy `.bashrc` and `.zshrc` into it.

## Copy by wildcard selection `-t`

```sh
cd ~ && cp -t target-dir *.zip *.txt
```

> Copies all `.zip` and `.txt` files to `target-dir` directory.

## Copy a directory `-r`

```sh
cp -r ~/.config ~/.config-copy
```

## Update only newer files `-u`

```sh
cp -ru ~/.config ~/.config-last-backup
```

> This just copies files that modified after the last copy.

## Create backup for existing destination files `-b`

```sh
cp -rb ~/.config ~/.config-last-backup
```

## Set to ask for overwriting `-i`

```sh
cp -ri ~/.config ~/.config-last-backup
```

## Set to keep existing files (no overwrite) `-n`

```sh
cp -rn ~/.config ~/.config-last-backup
```
A sample e-commerce web app built with ReactJS, ExpressJS and MongoDB

Tags: webdev, javascript, react, tutorial
Published: 2021-12-10 15:29:34

MERN stack which stands for MongoDB, ExpressJS, ReactJS and NodeJS has become a popular choice for fullstack Javascript web developer.

As a personal project for education purpose, I developed a basic bookstore web app with MERN stack.

Through this project, beginners could have a useful resource to understand how to implement ReactJS, Redux, React Router and others related libraries in React ecosystem to build up a functional front-end solution.

In addition, the back-end developed with ExpressJS and MongoDB is also an example for building a web api with Javascript.

Further detail information is available on Homepage of the live demo at:
https://bn-bookstore.herokuapp.com/#/

The source code is available at:
https://github.com/linhtch90/bn_bookstore_public_source

Please give me a Github star ⭐ as a compliment if my effort is useful for you! Thanks!
December 11 is App Day ❖ 
Tags: android, ios, mobile
Published: 2021-12-10 15:27:32

Which apps we used most in 2021 vs 2020? Let’s find out!

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pnskjcva1r6rcachx7nj.png)

As the survey by App Annie reports, in 2021 users worldwide:
★ spent most the money on streaming apps like YouTube and TikTok
★ massively downloaded video editors like CapCut
★ shared most content via Instagram and TikTok
★ were active on dating apps like Tinder and Bumble
★ participated in lots of Zoom calls

Comparing iOS and Android app users, the survey noted that the first group spent the most money during the year: 65% vs 35%. This isn’t surprising if you ever studied consumer spending statistics: iOS users tend to be the paying audience, especially when it comes to games.   

➥ This year’s overall spending on apps is over $135 billion — by 25% more than in 2020

The most downloaded app in 2021:
❖ on AppStore — TikTok
❖ on GooglePlay — Facebook

____________________________________
What’s your favorite app?
background changing using CSS animation.
Tags: css, html, animation, backgroundchange
Published: 2021-12-10 15:27:27


## BASIC KNOWLEDGE OF HTML AND CSS

For creating a background change you need to know about the basic of the html and css and `@keyframe` keyword which is in css.

1. basic html tags - html, body, head, etc.

![css animation properties name](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7mff4kkwyy1aol3yb3st.jpeg)

2. css animation - animation properties name which helps us to create animation in css.


![css animation properties name](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xqr9y04dlc3kn0nsq53i.jpeg)
. `@keyframe` - Specifies the animation code

. animation-name - Specifies the name of the @keyframes animation.

. animation-duration - Specifies the name of the @keyframes animation.

. animation-delay - Specifies a delay for the start of an animation .

. animation-direction - Specifies whether an animation should be played forwards, backwards or in alternate cycles.

. animation-iteration-count - Specifies the number of times an animation should be played.

. animation-play-state - Specifies whether the animation is running or paused.

. animation-timing-function - Specifies the speed curve of the animation.

below is the link of for the details of all the properties of animation in css

[css animation properties list link](https://www.w3schools.com/css/css3_animations.asp)

## MY HTML CODE :


![html code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/64h35ccoyozu87kbvdec.PNG)

## MY CSS CODE :

```
css code page 1
```

![css code page 1 ](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6tmio66bu1tuc0307vif.PNG)

```
css code page 2
```

![css code page 2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t3ofwpjjztle8nnjxwiw.PNG)

## END :

> hey guys if you have any doubt please ask me in the comment section.
and guys if you don't still don't understand then just copy my code and paste it into your computer or laptops and then run it 
and maybe then you can understand or otherwise ask again.

## CODEPEN LINK EXAMPLE

[codepen link example](https://codepen.io/Abhi7raj/pen/oNGzxqw)
An Overview of Versatile Data Kit
Tags: database, datascience, sql, python
Published: 2021-12-10 15:26:06

The Data Engineer job requires a variety of skills, including building data pipelines, evaluating databases, designing schemas and managing them. In short, the Data Engineer loads, extracts, manipulates and in general manages data. Often this work requires a lot of skills and if the process is not automated, the Data Engineer risks making many mistakes and wasting a lot of time in resolving unexpected events.

Recently, I have tested a very interesting framework, which facilitates the Data Engineer duties: the Versatile Data Kit, released by VMware as open source on Github.

Versatile Data Kit allows Data Engineer to perform its tasks semi-automatically. In practice, they will have to focus only on the data and the general configuration of the framework, such as database setup and cron tasks scheduling, without worrying about manual deployment, versioning and similar stuff.

In other words, Versatile Data Kit simplifies the life of Data Engineers, as it allows to manage data in a simple and fast way, as well as to deal with unexpected events quickly.
A Data Engineer can build a full data processing workload (Data Job, in the Versatile Data Kit language) in just three steps:
* Ingest data
* Process data
* Publish data

In this article, I give an overview of Versatile Data Kit, as well as a practical use case, which shows its potentialities. For more information, you can read the Versatile Data Kit full documentation.

## 1 Overview
Versatile Data Kit is a framework which enables Data Engineers to develop, deploy, run and manage Data Jobs. A Data Job is data processing workload.

Versatile Data Kit consists of two main components:
A Data SDK, which provides all tools for data extraction, transformation and loading, as well as a plugin framework, which permits to extend the framework according to specific requirements of data application.

A Control Service, which permits to create, deploy, manage and execute Data Jobs in Kubernetes runtime environment.
Versatile Data Kit manages three types of Data Jobs, as shown in light green in the following figure:

### 1.1 Ingestion Jobs
Ingestion Jobs involve pushing data from different sources to the Data Lake, which is the basic container for raw data. Data may be provided in different formats, such as CSV, JSON, SQL and so on.

Ingestion can be defined through different steps, including, but not limited to the creation of the data schema and the process to load data into a table. All these steps can be specified either writing a Data Job (typically in Python or SQL) or through a plugin. Versatile Data Kit provides some prepackaged plugins, for example for CSV and SQL ingestion, but you can implement your own plugin.

### 1.2 Processing Jobs
Processing Jobs permit to create curated datasets from those contained in the Data Lake. Usually, these jobs involve... continue reading on [Towards Data Science](https://towardsdatascience.com/an-overview-of-versatile-data-kit-a812cfb26de7)
Contributing to Telescope project (part 2)
Published: 2021-12-10 15:20:29

## Introduction
Hello everyone, my name is Dustin. Today, I'd like to talk about the process of contributing to an open source project on Github, which is [🔭](https://github.com/Seneca-CDOT/telescope).

## Process
In this part, I mainly go through all issues that I've worked on and and a little introduction about what it is. And in part 3, I'll give more details about each issue and how I really feel about it.

First issue:
The issue can be found [here](https://github.com/Seneca-CDOT/telescope/issues/2240#event-5678707545). This issue was open for quite a long time and was resolved by one of contributors but as the project grew, people introduced the same issue over and over again, so the issue was open again. The issue was about moving from using `const fetch = require('node-fetch')` to extract it from `@senecacdot/satellite` as `satellite` exposes it. 

Second issue:
My second issue can be found [here](https://github.com/Seneca-CDOT/telescope/issues/2117)
Image using Telescope one day, and you find an interesting post and you want to share it with your friends but the process of going to the original url and copy the url is quite cumbersome, so I introduced a `share` button which will help user to copy the origin url directly to the clipboard. Apart from that, This issue also contains another potential feature which is `bookmarking` posts. In my opinion, this feature is quite cool and important as Telescope is about all `PULLING` all blogs from different sites and different people and putting it in one place. One who likes a blog posted on dev.to by person a and a blog posted on medium.com by person b has no other way but going to original url's and signing up and saving it. What if we can make it way more easy for Telescope's users by implementing `bookmarking` in Telescope. I already filed an issue for the idea which can be found [here](https://github.com/Seneca-CDOT/telescope/issues/2549). This may be another cool feature so I leave it for future students

Third issue:
My third issue can be found [here](https://github.com/Seneca-CDOT/telescope/issues/1408)
This issue was open a year ago but doesn't seem to catch lots of other students' interest. This issue is about showing post count when users do a search. Without post count, user is just like a sailor without a compass. They just keep going and going but don't know where they're going exactly. The issue required me to not only figure out how to work with data returned back but also some styling. 

Thank you for reading.
How to use Git with Visual Studio
Tags: visualstudio
Published: 2021-12-10 15:13:01

Git is a version control system commonly used for software development. It offers a number of features such as the ability to merge, split and compare versions. 

Visual Studio offers a Git integration that allows developers to access those features without leaving the environment. 

In this video, I provide an overview of how to use git in Visual Studio.

I cover the following topics :

- Create a GIT repository
- Create a branch
- Saving changes
- Combine multiple commits into one.
- Modify the last commit
- Push to a remote repository
- Fetch, pull, sync a remote repository
- Merge
- Revert a commit
- Go back in time with Reset
- Resolve merge conflicts

Watch the video here : 

{% youtube 8zSVvTQXSIc  %}
What is a Neural Network?
Tags: deeplearning, neuralnetworks, beginners, python
Published: 2021-12-10 15:02:54

**Neural Networks** are simply a set of algorithms that are used to models working of the human brain in a computer program. They are networks formed by interconnection of neurons and are mostly used for solving complex problems. These neural networks can recognize certain patterns from the data which can then be used in solving problems. They can also learn and adapt to changing inputs and generate possible results without the need to redesign output criteria.
DevTips Daily Update 10/12/21
Tags: beginners, devtipsdaily, javascript
Published: 2021-12-10 14:42:50


So in this week's videos on DevTips Daily, we've still being carrying on with our end-to-end project and there's been lots of configuration and setup of our server to get it ready to deploy our code. For example, we setup a web server, pointed our domain to it and enable HTTPS with an SSL certificate!

Here's a link to each individual tutorial:

[Installing nginx](https://youtu.be/3K-pCTW6oR4)
{% youtube 3K-pCTW6oR4 %}

[nginx Configuration](https://youtu.be/A0pb8Aa9L7M)
{% youtube A0pb8Aa9L7M %}

[Pointing the domain to the server](https://youtu.be/HVfo_bacbo8)
{% youtube HVfo_bacbo8 %}

[SSL with LetsEncrypt](https://youtu.be/8i3OjPqPHmc)
{% youtube 8i3OjPqPHmc %}

[Directories for Node App](https://youtu.be/jE8pv_ULHKA)
{% youtube jE8pv_ULHKA %}

[Setup Node.js on the server](https://youtu.be/DJHdeqxTL-w)
{% youtube DJHdeqxTL-w %}

[Setup Docker on Ubuntu Server](https://youtu.be/JUfhhrGZ8eQ)
{% youtube JUfhhrGZ8eQ %}

Next week we're going to be carrying on with the project again, we've got a touch more configuration to do and then we'll be revisiting our GitHub action to finally push our code to our server!

Thanks for watching 👍