Aiyana  Miller

Aiyana Miller

1625058300

Azure Data Services at 50,000 Feet

Azure Data Services at 50,000 Feet

A fun, high level, look at Azure Data Services (PaaS) options, when you would use them, how they scale, and how they integrate with R and Python. This presentation demystifies the subject.

#azure #data services #paas

What is GEEK

Buddha Community

Azure Data Services at 50,000 Feet
Ruth  Nabimanya

Ruth Nabimanya

1624850863

Azure Data Catalog: A Quick Introduction to Data Handling Service Around

What is Azure Data Catalog?

Azure Data Catalog is a Data Catalog cloud service of Microsoft using a crowdsourced approach. It provides an inventory of data used for discovering and understanding the data sources. Microsoft Azure is a Software as a Service (SaaS) application.

“Build Confidence in Azure Data Catalog even having more than millions of accounts”

**Source: **Gartner, Inc

Azure Data Catalog enhances old investments’ performance, adding metadata and notation around the Azure environment’s data. It informs about the Data sources which we have discovered or which we already have. It expresses documentation and describes the schema of the data source. The data source location and a copy of the metadata are present in the Azure Data Catalog. The user can access it easily when needed, and the indexing of metadata helps discover data through a search.### What is Azure Data Catalog?

Azure Data Catalog is a Data Catalog cloud service of Microsoft using a crowdsourced approach. It provides an inventory of data used for discovering and understanding the data sources. Microsoft Azure is a Software as a Service (SaaS) application.

“Build Confidence in Azure Data Catalog even having more than millions of accounts”

**Source: **Gartner, Inc

Azure Data Catalog enhances old investments’ performance, adding metadata and notation around the Azure environment’s data. It informs about the Data sources which we have discovered or which we already have. It expresses documentation and describes the schema of the data source. The data source location and a copy of the metadata are present in the Azure Data Catalog. The user can access it easily when needed, and the indexing of metadata helps discover data through a search.

#big data engineering #blogs #azure data catalog: a quick introduction to data handling service around #azure data catalog #data handling service around #service

Siphiwe  Nair

Siphiwe Nair

1620466520

Your Data Architecture: Simple Best Practices for Your Data Strategy

If you accumulate data on which you base your decision-making as an organization, you should probably think about your data architecture and possible best practices.

If you accumulate data on which you base your decision-making as an organization, you most probably need to think about your data architecture and consider possible best practices. Gaining a competitive edge, remaining customer-centric to the greatest extent possible, and streamlining processes to get on-the-button outcomes can all be traced back to an organization’s capacity to build a future-ready data architecture.

In what follows, we offer a short overview of the overarching capabilities of data architecture. These include user-centricity, elasticity, robustness, and the capacity to ensure the seamless flow of data at all times. Added to these are automation enablement, plus security and data governance considerations. These points from our checklist for what we perceive to be an anticipatory analytics ecosystem.

#big data #data science #big data analytics #data analysis #data architecture #data transformation #data platform #data strategy #cloud data platform #data acquisition

Big Data Consulting Services | Big Data Development Experts USA

Big Data Consulting Services

Traditional data processing application has limitations of its own in terms of processing the large chunk of complex data and this is where the big data processing application comes into play. Big data processing app can easily process complex and large information with their advanced capabilities.

Want to develop a Big Data Processing Application?

WebClues Infotech with its years of experience and serving 350+ clients since our inception is the agency to trust for the Big Data Processing Application development services. With a team that is skilled in the latest technologies, there can be no one better for fulfilling your development requirements.

Want to know more about our Big Data Processing App development services?

Visit: https://www.webcluesinfotech.com/big-data-solutions/

Share your requirements https://www.webcluesinfotech.com/contact-us/

View Portfolio https://www.webcluesinfotech.com/portfolio/

#big data consulting services #big data development experts usa #big data analytics services #big data services #best big data analytics solution provider #big data services and consulting

Gerhard  Brink

Gerhard Brink

1620629020

Getting Started With Data Lakes

Frameworks for Efficient Enterprise Analytics

The opportunities big data offers also come with very real challenges that many organizations are facing today. Often, it’s finding the most cost-effective, scalable way to store and process boundless volumes of data in multiple formats that come from a growing number of sources. Then organizations need the analytical capabilities and flexibility to turn this data into insights that can meet their specific business objectives.

This Refcard dives into how a data lake helps tackle these challenges at both ends — from its enhanced architecture that’s designed for efficient data ingestion, storage, and management to its advanced analytics functionality and performance flexibility. You’ll also explore key benefits and common use cases.

Introduction

As technology continues to evolve with new data sources, such as IoT sensors and social media churning out large volumes of data, there has never been a better time to discuss the possibilities and challenges of managing such data for varying analytical insights. In this Refcard, we dig deep into how data lakes solve the problem of storing and processing enormous amounts of data. While doing so, we also explore the benefits of data lakes, their use cases, and how they differ from data warehouses (DWHs).


This is a preview of the Getting Started With Data Lakes Refcard. To read the entire Refcard, please download the PDF from the link above.

#big data #data analytics #data analysis #business analytics #data warehouse #data storage #data lake #data lake architecture #data lake governance #data lake management

Cómo Crear Un Cargador De Solo CSS Usando Un Elemento

Si tiene un sitio web, es útil tener un cargador para que los usuarios puedan saber que algo está sucediendo una vez que hayan hecho clic en un enlace o botón.

Puede usar este componente del cargador en muchos lugares y debería ser lo más simple posible.

En esta publicación, veremos cómo construir dos tipos de cargadores con solo una <div>y unas pocas líneas de código CSS. No solo esto, sino que los haremos personalizables para que pueda crear fácilmente diferentes variaciones del mismo código.

Esto es lo que construiremos:

Spinner y Progress Loader solo para CSS

Spinner y Progress Loader solo para CSS

Cómo crear un cargador giratorio

A continuación se muestra una demostración de lo que estamos construyendo:

https://codepen.io/t_afif/pen/PoJyaNy

 <div class="loader"></div>
 <div class="loader" style="--b: 15px;--c: blue;width: 120px;--n: 8"></div>
 <div class="loader" style="--b: 5px;--c: green;width: 80px;--n: 6;--g: 20deg"></div>
 <div class="loader" style="--b: 20px;--c: #000;width: 80px;--n: 15;--g: 7deg"></div> 
 .loader {
   --b: 10px;  /* border thickness */
   --n: 10;    /* number of dashes*/
   --g: 10deg; /* gap between dashes*/
   --c: red;   /* the color */

   width: 100px; /* size */
   aspect-ratio: 1;
   border-radius: 50%;
   padding: 1px;
   background: conic-gradient(#0000,var(--c)) content-box;
   -webkit-mask:
     repeating-conic-gradient(#0000 0deg,
        #000 1deg calc(360deg/var(--n) - var(--g) - 1deg),
        #0000     calc(360deg/var(--n) - var(--g)) calc(360deg/var(--n))),
     radial-gradient(farthest-side,#0000 calc(98% - var(--b)),#000 calc(100% - var(--b)));
           mask:
     repeating-conic-gradient(#0000 0deg,
        #000 1deg calc(360deg/var(--n) - var(--g) - 1deg),
        #0000     calc(360deg/var(--n) - var(--g)) calc(360deg/var(--n))),
     radial-gradient(farthest-side,#0000 calc(98% - var(--b)),#000 calc(100% - var(--b)));
   -webkit-mask-composite: destination-in;
           mask-composite: intersect;
   animation: load 1s infinite steps(var(--n));
 }
 @keyframes load {to{transform: rotate(1turn)}}

Tenemos 4 cargadores diferentes usando el mismo código. Con solo cambiar algunas variables, podemos generar un nuevo cargador sin necesidad de tocar el código CSS.

Las variables se definen como sigue:

  • --b define el grosor del borde.
  • --n  define el número de guiones.
  • --gdefine el espacio entre guiones. Como estamos tratando con un elemento circular, este es un valor de ángulo.
  • --c define el color.

Aquí hay una ilustración para ver las diferentes variables.

Variables CSS del cargador Spinner

Variables CSS del cargador Spinner

Abordemos el código CSS. Usaremos otra figura para ilustrar una construcción paso a paso del cargador.

Ilustración paso a paso del cargador giratorio

Ilustración paso a paso del cargador giratorio

Primero comenzamos creando un círculo como este:

.loader {
  width: 100px; /* size */
  aspect-ratio: 1;
  border-radius: 50%;
}

Nada complejo hasta ahora. Tenga en cuenta que su uso aspect-rationos permite modificar solo un valor (el width) para controlar el tamaño.

Luego agregamos una coloración de degradado cónico de transparente al color definido (la variable --c):

.loader {
  width:100px; /* size */
  aspect-ratio: 1;
  border-radius: 50%;
  background: conic-gradient(#0000,var(--c));
}

En este paso, introducimos la maskpropiedad para ocultar algunas partes del círculo de forma repetitiva. Esto dependerá de las variables --ny . --dSi observa detenidamente la figura, notaremos el siguiente patrón:

visible part
invisible part
visible part
invisible part
etc

Para hacer esto, usamos repeating-conic-gradient(#000 0 X, #0000 0 Y). De 0a Xtenemos un color opaco (parte visible) y de Xa Ytenemos uno transparente (parte invisible).

Introducimos nuestras variables:

  • Necesitamos un espacio igual a gentre cada parte visible por lo que la fórmula entre Xy Yserá X = Y - g.
  • Necesitamos nla parte visible, por lo que la fórmula de Ydebería ser Y = 360deg/n. Un círculo completo es 360degasí que simplemente lo dividimos porn

Nuestro código hasta ahora es:

.loader {
  width: 100px; /* size */
  aspect-ratio: 1;
  border-radius: 50%;
  background: conic-gradient(#0000,var(--c));
  mask: repeating-conic-gradient(#000 0 calc(360deg/var(--n) - var(--g)) , #0000 0 calc(360deg/var(--n))
}

El siguiente paso es el más complicado, porque necesitamos aplicar otra máscara para crear una especie de agujero para obtener la forma final. Para ello usaremos lógicamente a radial-gradient()con nuestra variable b:

radial-gradient(farthest-side,#0000 calc(100% - var(--b)),#000 0)

Un círculo completo del que quitamos un espesor igual a b.

Añadimos esto a la máscara anterior:

.loader {
  width: 100px; /* size */
  aspect-ratio: 1;
  border-radius: 50%;
  background: conic-gradient(#0000,var(--c));
  mask: 
   radial-gradient(farthest-side,#0000 calc(100% - var(--b)),#000 0),
   repeating-conic-gradient(#000 0 calc(360deg/var(--n) - var(--g)) , #0000 0 calc(360deg/var(--n))
}

Tenemos dos capas de máscara, pero el resultado no es el que queremos. Obtenemos lo siguiente:

Puede parecer extraño pero es lógico. La parte visible "final" no es más que la suma de cada parte visible de cada capa de máscara. Podemos cambiar este comportamiento usando mask-composite. Necesitaría un artículo completo para explicar esta propiedad, así que simplemente daré el valor.

En nuestro caso, debemos considerar intersect(y destination-outpara la propiedad prefijada). Nuestro código se convertirá en:

.loader {
  width: 100px; /* size */
  aspect-ratio: 1;
  border-radius: 50%;
  background: conic-gradient(#0000,var(--c));
  mask: 
    radial-gradient(farthest-side,#0000 calc(100% - var(--b)),#000 0),
    repeating-conic-gradient(#000 0 calc(360deg/var(--n) - var(--g)) , #0000 0 calc(360deg/var(--n));
  -webkit-mask-composite: destination-in;
          mask-composite: intersect;
}

¡Hemos terminado con la forma! Solo nos falta la animación. Esta última es una rotación infinita.

Lo único a tener en cuenta es que estoy usando una stepsanimación para crear la ilusión de guiones fijos y colores en movimiento.

Aquí hay una ilustración para ver la diferencia.

Una animación lineal frente a una animación de pasos

La primera es una rotación lineal y continua de la forma (no la que queremos) y la segunda es una animación discreta (la que queremos).

Aquí está el código completo, incluida la animación:

 <div class="loader"></div>
 <div class="loader" style="--b: 15px;--c: blue;width: 120px;--n: 8"></div>
 <div class="loader" style="--b: 5px;--c: green;width: 80px;--n: 6;--g: 20deg"></div>
 <div class="loader" style="--b: 20px;--c: #000;width: 80px;--n: 15;--g: 7deg"></div> 
 .loader {
   --b: 10px;  /* border thickness */
   --n: 10;    /* number of dashes*/
   --g: 10deg; /* gap between dashes*/
   --c: red;   /* the color */

   width: 100px; /* size */
   aspect-ratio: 1;
   border-radius: 50%;
   padding: 1px;
   background: conic-gradient(#0000,var(--c)) content-box;
   -webkit-mask:
     repeating-conic-gradient(#0000 0deg,
        #000 1deg calc(360deg/var(--n) - var(--g) - 1deg),
        #0000     calc(360deg/var(--n) - var(--g)) calc(360deg/var(--n))),
     radial-gradient(farthest-side,#0000 calc(98% - var(--b)),#000 calc(100% - var(--b)));
           mask:
     repeating-conic-gradient(#0000 0deg,
        #000 1deg calc(360deg/var(--n) - var(--g) - 1deg),
        #0000     calc(360deg/var(--n) - var(--g)) calc(360deg/var(--n))),
     radial-gradient(farthest-side,#0000 calc(98% - var(--b)),#000 calc(100% - var(--b)));
   -webkit-mask-composite: destination-in;
           mask-composite: intersect;
   animation: load 1s infinite steps(var(--n));
 }
 @keyframes load {to{transform: rotate(1turn)}}

Notarás algunas diferencias con el código que usé en la explicación:

  • Estoy agregando padding: 1pxy configurando el fondo paracontent-box
  • Hay +/1degentre los colores de larepeating-conic-gradient()
  • Hay algunos porcentajes de diferencia entre el color dentro del radial-gradient()

Esas son algunas correcciones para evitar fallas visuales. Se sabe que los degradados producen resultados "extraños" en algunos casos, por lo que debemos ajustar algunos valores manualmente para evitarlos.

Cómo crear un cargador de progreso

Al igual que el cargador anterior, comencemos con una descripción general:

https://codepen.io/t_afif/pen/bGoNddg

 <div class="loader"></div>
 <div class="loader" style="--s:10px;--n:10;color:red"></div>
 <div class="loader" style="--g:0px;color:darkblue"></div>
 <div class="loader" style="--s:25px;--g:8px;border-radius:50px;color:green"></div>
 .loader {
   --n:5;    /* control the number of stripes */
   --s:30px; /* control the width of stripes */
   --g:5px;  /* control the gap between stripes */

   width:calc(var(--n)*(var(--s) + var(--g)) - var(--g));
   height:30px;
   padding:var(--g);
   margin:5px auto;
   border:1px solid;
   background:
     repeating-linear-gradient(90deg,
       currentColor  0 var(--s),
       #0000 0 calc(var(--s) + var(--g))
     ) left / calc((var(--n) + 1)*(var(--s) + var(--g))) 100% 
     no-repeat content-box;
   animation: load 1.5s steps(calc(var(--n) + 1)) infinite;
 }
 @keyframes load {
   0% {background-size: 0% 100%}
 }

Tenemos la misma configuración que el cargador anterior. Variables CSS que controlan el cargador:

  • --n define el número de guiones/rayas.
  • --s define el ancho de cada franja.
  • --g define el espacio entre las rayas.

Ilustración de las variables CSS

Ilustración de las variables CSS

De la figura anterior podemos ver que el ancho del elemento dependerá de las 3 variables. El CSS será el siguiente:

.loader {
  width: calc(var(--n)*(var(--s) + var(--g)) - var(--g));
  height: 30px; /* use any value you want here */
  padding: var(--g);
  border: 1px solid;
}

Usamos paddingpara establecer el espacio en cada lado. Entonces el ancho será igual al número de rayas multiplicado por su ancho y el espacio. Eliminamos un espacio porque para Nlas rayas tenemos N-1espacios.

Para crear las rayas usaremos el siguiente degradado.

repeating-linear-gradient(90deg,
  currentColor 0 var(--s),
  #0000        0 calc(var(--s) + var(--g))
 )

De 0a ses el color definido y de sa s + gun color transparente (la brecha).

Estoy usando currentColorcuál es el valor de la colorpropiedad. Tenga en cuenta que no definí ningún color dentro border, por lo que también se usará para el valor de color. Si queremos cambiar el color del cargador, solo necesitamos establecer la colorpropiedad.

Nuestro código hasta ahora:

.loader {
  width: calc(var(--n)*(var(--s) + var(--g)) - var(--g));
  height: 30px;
  padding: var(--g);
  border: 1px solid;
  background:
    repeating-linear-gradient(90deg,
      currentColor  0 var(--s),
      #0000 0 calc(var(--s) + var(--g))
    ) left / 100% 100% content-box no-repeat;
}

Estoy usando content-boxpara asegurarme de que el degradado no cubra el área de relleno. Luego defino un tamaño igual a 100% 100%y una posición izquierda.

Es hora de la animación. Para este cargador, animaremos el background-sizede 0% 100%a 100% 100%lo que significa el ancho de nuestro degradado de 0%  a100%

Al igual que el cargador anterior, confiaremos en steps()tener una animación discreta en lugar de una continua.

Una animación lineal frente a una animación de pasos

El segundo es el que queremos crear, y lo podemos lograr agregando el siguiente código:

.loader {
  animation: load 1.5s steps(var(--n)) infinite;
}
@keyframes load {
  0% {background-size: 0% 100%}
}

Si observa detenidamente la última figura, notará que la animación no está completa. Nos falta una raya al final, incluso si hemos usado N. Esto no es un error, sino cómo steps()se supone que funciona.

Para superar esto, necesitamos agregar un paso adicional. Aumentamos el background-sizede nuestro degradado para contener N+1rayas y usar steps(N+1). Esto nos llevará al código final:

.loader {
  width: calc(var(--n)*(var(--s) + var(--g)) - var(--g));
  height: 30px;
  padding: var(--g);
  margin: 5px auto;
  border: 1px solid;
  background:
    repeating-linear-gradient(90deg,
      currentColor  0 var(--s),
      #0000 0 calc(var(--s) + var(--g))
    ) left / calc((var(--n) + 1)*(var(--s) + var(--g))) 100% 
    content-box no-repeat;
  animation: load 1.5s steps(calc(var(--n) + 1)) infinite;
}
@keyframes load {
  0% {background-size: 0% 100%}
}

Tenga en cuenta que el ancho del degradado es igual a N+1multiplicado por el ancho de una franja y un espacio (en lugar de ser 100%)

Conclusión

Espero que disfrutes este tutorial. Si está interesado, he creado más de 500 cargadores div únicos solo para CSS . También escribí otro tutorial para explicar cómo crear el cargador de puntos usando solo propiedades de fondo .

Encuentre a continuación enlaces útiles para obtener más detalles sobre algunas propiedades que he usado y que no expliqué a fondo debido a su complejidad:

¡Gracias por leer!

Enlace: https://www.freecodecamp.org/news/how-to-create-a-css-only-loader/

#css