teleren/devto huggingface dataset:
7 Time-Saving Tips For Writing CSS
Tags: css, programming, webdev, productivity
Published: 2022-10-06 15:00:46

I wanted to take the time today to share with you one of my biggest time-saving tips for writing CSS. 

I've been developing websites for over 15 years now and have seen my fair share of development techniques. The best knowledge I have ever gained is learning to write your CSS correctly in order to save as much time as possible when developing a website.

## Writing CSS code can be time-consuming, especially if you have to do it over and over again. 

This generator allows you to generate your CSS code in seconds so you don't have to waste time typing it out yourself!

## 1. [Neumorphism](https://neumorphism.io/#e0e0e0)
Neumorphism design has been increasingly popular in recent years. It is fun to change different aspects of the image, including the color, the size, the radius, the distance, and many more.


## 2. [CSS Gradient](https://cssgradient.io)
 You can make a gradient backdrop for your website for free with CSS Gradient, a service that calls itself “a joyful little website.”


## 3. [Get Waves](https://getwaves.io/)
Get Wave is a fantastic tool that lets you make SVG waves with CSS for your designs


## 4. [CSS Accordion Slider Generator](https://accordionslider.com)
Create fully responsive, CSS-only accordion sliders.


## 5. [Coolors](https://coolors.co/)
Coolors allow you to create your palettes in the blink of an eye. It’s a breeze to browse the web. 


## 6. [Layout generator](https://grid.layoutit.com)
Quickly design web layouts, and get HTML and CSS code. Learn CSS Grid visually and build web layouts with our interactive CSS Grid Generator.


## 7. [CSS Grid Generator](https://css3generator.com/)
The CSS3 Generator web app has over 10 different code generators including for CSS columns, box shadows, and even the newer flexbox property.


## To sum it up

Generating your CSS code has never been so simple. Creating and customizing your own style sheets is quite convenient, especially if you have a specific color or pattern that you want to be consistent throughout your website. Your site's code will become less cluttered, as the generator can make your CSS code more organized. 

One of the best features of using a generator like this is that all element positioning will be automatically calculated by the program, which can save you a lot of time and headaches.

______________________________

I love jotting down my thoughts on my blog [Sleepless Yogi](https://www.sleeplessyogi.com/).

Follow me on Twitter [@sleeplessyogi]
Algorithms and Data structure- A heads up
Tags: computerscience, beginners, algorithms
Published: 2022-10-06 14:51:24

Hi Folks,

Before getting into it we all have come across the word saying "what algorithm you used to solve this problem?" and our answer obviously is  
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o08uz36ayxzq4j0mxvps.gif)


This Blog-series talks about the basics of algorithms and DS(Data Structure), this blog will give you a little heads up on Algorithm ok let's learn algo(awɡu)


> what is Algorithms?

`An algorithm is any well-defined computational procedure that takes some value, as input and produces some value, or set of values, as output. An algorithm is thus a sequence of computational steps that transform the input into the output.`

In simple terms let's say you need to drop your friend at the Railway station before 10 pm, For that you need to build an algorithm to find the Shortest Route (which is your output), you would consider their parameters the distance, number of alternative routes, speed, traffic and time(these are your input) using which you can do some analysis and come up with the shortest route 

likewise, the algorithm is a series of steps that is implemented with the given input to get the desired output.

> why the Algorithm is needed to solve a problem?

From the above example if you go on your wish you cant drop your friend at the correct time, similarly, a computational operation working on an algorithm can give you the desired output efficiently

> What is a Data structure?

`A data structure is a way to store and organize data in an ordered fashion. so that it's easy to access and manipulate`

it's good to learn many DS as possible so that it's easy to build or implement an algorithm 

> Algorithm in real-life!

we might wonder are we using those in real life! the answer would be yes and some of the examples are

1. Search algorithms- When we search a file in folder or a link in the internet it uses any of the famous search algorithms to get the result at minimal time

2. E-commerce - Technologies used in electronic commerce include encryption and digital signatures which are based on numerical algorithms


To sum up These are some Infos to know about Algorithms and DS we will see more about them in later part of the Series 


Thank You!!
🟣🟢Do you know what is https status code
Tags: webdev, browser
Published: 2022-10-06 14:48:07

---

 If you people encounter with such error message Like 404,301 while browsing on internet then you should definitely know about http status code 

This type of message called http status code there are numerous Http status code ranging from 100-500

Let's jump in to this 


## <u>Table of content</u>

✅Http status code 

✅Classification

  ↘️Informational response (100–199)

  ↘️Successful response (200–299)

  ↘️Redirection message (300–399)

  ↘️Client error response (400–499)

  ↘️Server error response (500–599)


when ever client send a request to the server every time server response this request in the from of http status code

These are  codes the server can generate in response to HTTP requests 

HTTP status codes are three-digit codes, and are grouped into five different classes

## <u>1️⃣1xx (Informational response)</u>

It means the request has been received and the process is continuing.

The informational response is classify as:

**✅100** - Continue.

**✅101** - Switching protocols.


## <u>2️⃣ 2xx (Success response )</u>

It means the action was successfully received,understood,accepted.

The 2xx response is classify as:

**✅200**:The request is OK

**✅201**:The request has been created

**✅202**:The request has been accepted for processing, but the processing has not been completed
**✅204** : The server successfully processed the request, and is not returning any content


## <u>3️⃣3xx (Redirection message)</u>

It means further action must be taken in order to complete the request.

The 3xx is classify as:

**✅301**:The 301 status tells that the request has moved permanently to a new URL

**✅302**:The 302 HTTP status tell that requested page exists at different URL



## <u>4️⃣ 4xx (Client Error)</u>
It means the request contains incorrect syntax or incorrect url.

The 4xx is classify as:

**✅402**:this response indicates that the user not made the required payment.

**✅404**:The content you are trying to looking for in a website is not present in server

 

## <u>5️⃣5xx (Server Error)</u>
It means the server failed to fulfill thevalid request.

The 5xx is classify as:

**✅500**:The server is unable to fulfill the request due to an unexpected condition.

**✅503**:The server cannot handle the request because it has run out of resources
**✅505** : The server doesn’t support the HTTP protocol version used in the request. Using an outdated web browser usually triggers this response code.

## key takeaway 

- 
These status codes serve as a means of communication between the server and the internet browser 

- 
HTTP status codes are generated by the server that's hosting the site when it responds to a request made by a client


That's wrap up 

Thanks for reading 

Do consider to 

like ♥️
Comment 💬


And follow me @learnwithbrain 
For more 

Means Alot 💙
Paracetamol.js💊| #187: Explica este código JavaScript
Tags: javascript, webdev, spanish, programming
Published: 2022-10-06 14:41:54

## **<center>Explica este código JavaScript</center>**
#### <center>**Dificultad:** <mark>Básico</mark></center>

```js
class Animal {
  #name;
  constructor({name="S/N", age=0, color}){
    this.#name= name;
    this.age = age;
    this.color = color;
  }

  get getName(){
    return this.#name;
  }
}

const dog = new Animal({
  name:"Doggue", 
  age:2, 
  color:"red"
  });

console.log(dog.#name);
```

A. `undefined`
B. `Uncaught SyntaxError: Private field '#name' must be declared in an enclosing class`
C. `Doggue`
D. `ReferenceError: '#name' is not defined`

Respuesta en el primer comentario.

---

Respuesta:
B. `Uncaught SyntaxError: Private field '#name' must be declared in an enclosing class`

En ES2020 se introdujo una manera de declarar atributos privados dentro de una clase en JavaScript, para dicho propósito debemos usar el símbolo `#` seguido del nombre del atributo, por ejemplo: `#name`. 

Con esto logramos que dicho atributo solo pueda ser accedido dentro de la clase `Animal`, entonces se dice que el atributo `#name` esta encapsulado y por ende para poder usarlo fuera de la clase `Animal` tenemos que crear y llamar un _getter_ como `getName` que aunque esta declarado no lo usamos en el ejemplo.

En este caso no es posible usar encadenamiento como `console.log(dog.#name)`, ello producirá el error `Uncaught SyntaxError: Private field '#name' must be declared in an enclosing class`.
Proper cross-fade in CSS
Tags: css, webdev, tutorial
Published: 2022-10-06 14:40:01

In https://www.youtube.com/watch?v=PYSOnC2CrD8, @surma and @jakearchibald talked about what a proper crossfade is, why it is complicated to do with the current technologies. And at the end of the video, they mentioned that they just proposed this to the CSS working group.

## What is a proper cross fade?

If we want to transition from a text `A` to a text `B`, the easiest is to vary the opacity from 1 to 0 on `A`, and from 0 to 1 on `B`.

The main issue with this method is that, for instance, during the middle of the animation, both will have a 50% opacity. Due to how CSS composes layers, we'll still have a color with 75% opacity. But in cross fade, the opacity should always be 100% as we are animating from the start to the end, without any notion of "this is on top of the other".

Here you can see the difference between improper and proper cross fade:

Incorrect 75% opacity | Fixed version
-|-
![double 0.5 opacity](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kqwj9v3ap0pxazqo77pk.png) | ![double 0.5 opacity with proper cross fade](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/imlrcqgemsvdatj0al51.png)


## How to achieve this

The way to do it is to add `mix-blend-mode: plus-lighter` on the second text, so that CSS knows how to blend this layer with the other ones.

In addition to setting the `mix-blend-mode`, we should add `isolation: isolate` on the container so that CSS knows that the composition operation should only be computed within this element, and that we shouldn't also apply it with the full background.

Here is the MDN article on `mix-blend-mode`: https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode.

{% codepen https://codepen.io/ayc0/pen/wvjPpQq %}
Qué es Programación Dinámica
Tags: programming, spanish
Published: 2022-10-06 14:33:32

Técnica para optimizar problemas que tienen la característica de contar con una **sub estructura óptima**.

Básicamente estamos optimizando problemas mediante una optimización de los problemas más pequeños que componen el problema más grande en cuestión.

Se necesita tener problemas empalmados para poder utilizar programación dinámica. Esto quiere decir que la solución óptima se obtiene al resolver el mismo problema en varias ocasiones.

Un buen ejemplo de la optimización siguiendo la descripción anterior es la **memoización**.

## Memoización

Memoización es guardar el resultado de operaciones previas para que en el futuro sea simplemente consultar en la memoria el resultado previamente guardado y de esa manera ahorrar en tiempo de ejecución.

Ejemplo:

Número de Fibonacci

    F(n) = F(n-1) + F(n-2)

Al implementar fibonacci siguiendo el proceso estricto de la fórmula, se obtiene un algoritmo ineficiente porque el crecimiento computacional (complejidad) es exponencial.

Sin embargo, para poder obtener una respuesta favorable y correcta, es obligatorio realizar el mismo proceso repetitivo.

Entonces, debido a que es un problema que se soluciona realizando una tarea de forma repetitiva, es posible aplicar dynamic programming para optimizar el resultado, se aplica al utilizar memoización en nuestra solución.

```python
import sys

def fibonacci_recursive(n):
    if n == 0 or n == 1:
        return 1
    return fibonacci_recursive(n - 1) + fibonacci_recursive(n - 2)

def fibonacci_with_memo(n, memo={}):
    if n == 0 or n == 1:
        return 1
    try:
        return memo[n]
    except KeyError:
        resultado = fibonacci_with_memo(n - 1, memo) + fibonacci_with_memo(n - 2, memo)
        memo[n] = resultado
    return resultado

if __name__ == "__main__":
    sys.setrecursionlimit(10002)
    n = int(input("Escoger número: "))
    result = fibonacci_with_memo(n)
    print(result)

```
((CAnlı izle]TRABZONSPOR MONACO MAÇI CANLI İZLE EXXEN SPOR
Published: 2022-10-06 14:30:52

Trabzonspor, UEFA Avrupa Ligi H Grubu'nda Monaco ile 6 Ekim Perşembe günü karşılaşacak. Monaco Trabzonspor mücadeles Exxen dijital platformundan canlı olarak yayınlanacak..



>>>> [CANLI YAYIN IZLE](http://canli.90dh.cc/)


Monaco Trabzonspor maçı ne zaman, saat kaçta, hangi ..Monaco ile Trabzonspor 22/23 UEFA Avrupa Ligi3.hafta maçında karşı karşıya geliyor. tarafından yönetilen Monaco-Trabzonspor maçı, ...


06 Ekim 2022 Monaco vs Trabzonspor maçı Hangi Kanalda ...Monaco – Trabzonspor, UEFA Avrupa Ligi maçı, 06-10-2022 Perşembe günü Exxen, kanal(lar)ından yayınlanacak. Maçın başlama saati 19:45.

6 Ekim Per..Monaco - Trabzonspor


Trabzonspor'da Monaco maçı hazırlıkları başladı - AsporSüper Lig'de Kayserispor'u deplasmanda mağlup etmeyi başaran Trabzonspor'da, UEFA Avrupa Ligi H grubundaki rakibi Monaco maçı için ...


Monaco - Nantes maçı ne zaman, saat kaçta ve hangi kanalda?Fransa Ligue 1'de heyecan devam ederken Monaco sahasında Nantes'i konuk edecek.Mücadele öncesinde merak edilen konular arasında maçın yayın ...


AS Monaco Trabzonspor maçı ne zaman, saat kaçta ve hangi ...AS Monaco Trabzonspor maçı ne zaman, saat kaçta ve hangi kanalda? UEFA Avrupa Ligi H Grubu'ndaki temsilcimiz Trabzonspor, üçüncü maçını AS ...


Monaco - Trabzonspor Maçı Hangi Kanalda Saat Kaçta?Monaco - Trabzonspor Maçı Ne Zaman Saat Kaçta Hangi Kanalda? Futbol. emoji_eventsUEFA Avrupa Ligi. event06.10.2022 | Perşembe. schedule19:45. tvExxen.


Trabzonspor'da Abdullah Avcı, Monaco'yu gözüne kestirdiTrabzonspor, UEFA Avrupa Ligi H grubundaki rakibi Monaco'yu yenerek çıkışını ... MONACO - TRABZONSPOR MAÇI NE ZAMAN, HANGİ KANALDA?


Besiktas monaco maci saat kacta - ApprovoBEŞİKTAŞ MONACO MAÇI HANGİ KANALDA SAAT KAÇTA? ... Pubg mobile efsanevi hangi renk Telefon kaskosu neleri kapsar Gs trabzon özet bein sport.
Arrow function variation in javascript.
Tags: javascript, webdev, beginners, tutorial
Published: 2022-10-06 14:29:48

I have already discussed the arrow function in JavaScript in one of blogs.[Arrow function ](https://dev.to/stali1234/javascript-arrow-functions-2ne3).

<u>In this blog let's deep dive in arrow function variations.</u>

There are two factors that affects arrow functions.

1) `The number of arguments required.`
2) `Whether you'd like an implicit return.`


## Number of arguments

_zero arguments._ : we can substitute the parenthesis with an underscore (_).


```
const zeroArgs = () => {/* do something */}
const zeroWithUnderscore = _ => {/* do something */}
```

_One arguments._ : we can remove parenthesis.


```
const oneArg = arg1 => {/* do something */}
const oneArgWithParenthesis = (arg1) => {/* do something */}
```

_Two or More._ : we will be the normal arrow function syntax.



```
 const twoOrMoreArgs = (arg1, arg2) => {/* do something */}
```

## Return type.

The below example would clearly describes how arrow functions handles return type.


```
// 3 lines of code with a normal function
const sumNormal = function (num1, num2) {
  return num1 + num2
}
```

```
// Can be replaced with one line of code with an arrow function
const sumArrow = (num1, num2) => num1 + num2
```

Happy learning.
Basic git commands every web developer should know
Tags: git, github
Published: 2022-10-06 14:28:43

## git init
The `git init` command is used to initialize a new git repository. this command is used to set up a new repository.
## git status
This command can be used to see which files have been modified, which files are new and which files are not tracked by git.
## git add <directory or file>
The `git add` command is used to add files to the staging area.
## git commit -m "commit message"
The `git commit -m "message"` command is used to commit changes to a git repository.
## git push
The `git push` command is used to push commits from a local repository to a remote repository.
## git pull
This `git pull` command is used to fetch and download content from a remote repository and update the local repository to match the remote.
## git branch
The `git branch` command is used to create, list, rename and delete the branches.
## git checkout branch <branch name>
The `git branch <branch name>` command is used to switch one branch to another branch in a git repository.
## git merge <branch_name>
The `git merge` command is used to join two or more development branches.
## deleting a remote branch
The `git push origin --delete <branch>` is used to delete the remote branch.
## deleting a local branch
The `git branch --delete <branch>` is used to delete the local branch.
## squash all git commits into one
to squash all the git commits into one commit.
1. `git rebase -i HEAD~4` (4 is the number of commits to a particular branch)
2. `git push origin <branch_name> --force`

## git log by the amount
`git log -2` (the following command will display only the 3 most recent commits.)

## exit git log
The `q or z` is used to quit from logs.

## exit from git vim editor
The `:wq` is used to save the change. and `:wq!` is used for no changes to save.
Qué es la Programación Estocástica
Tags: programming, spanish
Published: 2022-10-06 14:26:20

La programación estocástica es el uso de probabilidades a la hora de plantear la solución del problema en el que estamos trabajando, en otras palabras, usamos programación estocástica en la solución de problemas no deterministas.

## Conceptos estadísticos

Las distribuciones permiten entender de diferentes maneras cómo están repartidos los diferentes valores de una variable, dentro de una población.

La distribución normal se define con base en la media y la desviación estándar.

El valor promedio o medida de tendencia central, nos permite ver en dónde se encuentran la mayoría de los valores de la muestra y normalmente es la media de la población.

Varianza y Desviación son datos de dispersión.

La varianza mide la propagación de un conjunto de datos en relación a la media.

La desviación estándar es la raíz cuadrada de la varianza.
Esto permite manejar media y su dispersión en la misma unidad.

Muestreo

El muestreo es muy importante cuando no tenemos acceso a toda la población que queremos explorar. Uno de los grandes descubrimientos de la estadística es que las muestras aleatorias tienden a mostrar las mismas propiedades de la población objetivo. Hasta este punto todos los muestreos que hemos hecho son de tipo probabilísticos.

En un muestreo aleatorio cualquier miembro de la población tiene la misma probabilidad de ser escogido.

En un muestreo estratificado tomamos en consideración las características de la población para partirla en subgrupos y luego tomamos muestras de cada subgrupo, esto incrementa la probabilidad de que el muestreo sea representativo de la población.

Inferencia

Se utiliza para estimar o realizar conclusiones con respecto a una población, a partir de una muestra aleatoria.
Esto se debe a que una muestra aleatoria tiende a manifestar las mismas características que la población de la cual fue extraída.

Sesgar una muestra, es sesgar las conclusiones acerca de la población que se harán a partir de la muestra.

Falacia del Apostador
Es una mentira en la que se cree que debido a que un suceso independiente extremo ocurre, ocurrirán eventos extremos opuestos al anterior para nivelar la media.

Regresión a la Media.
Señala que después de un evento aleatorio extremo, el siguiente evento probablemente será menos extremo.
Javascript arrow functions
Published: 2022-10-06 14:25:21

Arrow functions are preety cool 😎 . They help you make code shorter, which gives less room for errors to hide. They also help you write code that's easier to understand once you get used to the syntax.

**The Syntax.**

Arrow function is denoted by (=>) . In ES6 its a new way to make anonymous function.

_ Normal function : _

```
const normalFunction = function (arg1, arg2) {
  // pls do something
}

```

_Arrow function_


// Arrow Function

```
const arrowFunction = (arg1, arg2) => {
  // pls do something
}
```

<u>Steps to convert normal function to arrow function.</u>

1) `Remove function keyword from a normal function .`
2) `Add => after the parenthesis to get an arrow function.`

Happy Learning
Arrow functions
Published: 2022-10-06 14:22:11

Arrow functions are preety cool 😎 . They help you make code shorter, which gives less room for errors to hide. They also help you write code that's easier to understand once you get used to the syntax.

**The Syntax.**

Arrow function is denoted by (=>) . In ES6 its a new way to make anonymous function.

_ Arrow function : _

```
const arrowFunction =   (arg1, arg2) => {
  // pls do something
}

```
Beautifully shaped avatar - CSS only - A step-by-step tutorial
Tags: webdev, css, html, tutorial
Published: 2022-10-06 14:19:29

**Tutorial on how to create beautifully shaped avatar.**

![Avatar](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/05mx94lw4oudu2cxkawv.png)

## <u>HTML</u>
For HTML, we need only one div element with class "avatar".

```html
<div class="avatar"></div>
```

## <u>CSS</u>
For CSS, we'll style only the "avatar" class.

We'll set width and height to 150x100 pixels and border to 5 pixels solid brown.

I'll just set one random image that I found on google as a background image.

Now I'll position the image in center, and cover whole area by setting background-position property to center and background-size to cover.

To create this beautiful shape, I'll set border radius to 20% / 50%, which means that the 20% will be applied to horizontal radius and 50% to vertical radius.

```css
.avatar {
    width: 150px;
    height: 100px;
    border: 5px solid #AA771C;
    background-image: url('https://media.istockphoto.com/photos/beautiful-afro-girl-with-curly-hairstyle-picture-id1381221247?b=1&k=20&m=1381221247&s=170667a&w=0&h=4bt0RFmAffRSqrKa2N2vJAFbWgmbRg7x-0ziJaRtpxE=');
    background-size: cover;
    background-position: center;
    border-radius: 20% / 50%;
}
```
      
And that's it.

You can find video tutorial and full code [here](https://designyff.com/code/shaped_avatar).

Thanks for reading. ❤️