teleren/devto huggingface dataset:
Conecciones de Microservicios y AWS
Tags: aws, microservices, webdev, programming
Published: 2021-12-08 17:07:48

## ¿Como se se comunican los Microservicios?

<u>Hay 2 formas:</u>

- La forma síncrona: comunicación entre servicios por medio de HTTP, manejando resquests y responses. Pero esto tiene un tiempos de respuesta altos.

- La forma asíncrona: es utilizar colas de mensaje, si quiere comunicar un servicio A con uno B en el medio habrá una cola de mensajes, de la cual se hará cargo el servicio receptor a medida que vaya estando libre. Aminora los costos.

---


## ALGUNOS SERVICIOS AMAZON WEB SERVER (AWS)


<u>**SQS**</u>

Amazon tiene un servicio llamado SQS (Simple Queue Service) , que maneja estas colas de forma serverless,  no tienen costos, las mantiene Amazon.

<u>**DynamoDB**</u>

Es un servicio de base de datos no relacional, permite todo tipo de operaciones CRUD y admite ACID principles.

<u>**RDS: Relational Database Service**</u>

Servicio de Amazon que nos brinda de base de datos relacional de forma serverless, el más común es aurora MySql.

<u>**Plataforma**</u>
Nos brinda la infraestructura base y una capa sobre de software para facilitar la administración de las aplicaciones desplegadas.

<u>**Cloudwatch/Datadog**</u>

Servicios de monitoreos, alertas y visualizacion de logs, sobre servicios AWS.

<u>**VPC: Virtual Private Cloud**</u>

Es principalmente una VPN, una red privada por la cual se conectan varios servicios, se puede configurar seguridad por medio de firewalls.

<u>**API Gateway**</u>

Permite exponer todos los servicos a través de una url única. Un rooteador de responses/requests y podes aportarle reglas de seguridad.

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


---

Ejemplo de conección a Dynamo con una libreria usando NodeJs

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2076avbwjgugf70q57j9.png)
Como foi o desafio Daily CSS Image
Tags: css
Published: 2021-12-08 16:58:52

---
title: Como foi o desafio Daily CSS Image
published: true
description: Como foi o desafio Daily CSS Image
tags: css
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bhkk8m0ki0l4rv2ms8rc.jpeg
---

Sempre gostei de desenhar mas infelizmente eu não tenho o talento de desenhar a mão, até que um dia vi o desenho feito em CSS do Homer Simpson do Bernard De Luna.

Cheguei a fazer alguns desenhos com CSS mas acabei abandonando esse hobby, até que um dia topei com o Desafio do Daily CSS Image, estava lá super enrolado no serviço, com um filho de 2 anos quase sem tempo para nada. Por que não fazer?
O desafio consiste em desenhar 1 desenho usando CSS por dia durante 50 dias.

A primeira semana até que foi tranquila.

![Imagem com 5 desenhos que fiz em css, panda, elefante, esquilo, tigre e um peixe](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bhkk8m0ki0l4rv2ms8rc.jpeg)

Conforme ia chegando os temas os desenhos foram aumentando a dificuldade.

Então comecei a fazer eles durante um cache e outro da tarefas da agência e no horário do almoço, era tipo uma linha de código e uma colher de comida. rs

Confesso que teve dia que não consegui fazer e tiver que fazer 2 no dia seguinte, não conta para o criador do desafio e nem pro meu chefe. kkk

![Imagem com 6 desenhos que fiz com css, relógio, régua, caderno, calendário, mion e uma pizza](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o279cuqyklmx6aw97xuy.jpeg)

Ta, mais você vai usar isso no seu dia dia?

A resposta é simples: NÃO.

Então por que eu fiz isso?

A resposta também é simples: Porque é divertido.

![Imagem com 6 desenhos que fiz com css, hambúrguer, taco, bolo, torta, mostro e mostro ](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7jywdxb7jsnwykl7lwlk.jpeg)

Faça um desenho usando somente CSS e você vai ver como é muito divertido e quando você terminar e vê o resultado final, você fala C#@$@ eu fiz isso.

Mas deixando de lado a brincadeira, quando você faz esses desenhos usando CSS você aprende a usar um monte de propriedades do CSS como:

- Position
- Transform
- Border-radius
- z-index
- Animations
- Flex-box
- Calc
- Gradiente

O céu é o limite. :)

Agora isso sim vai fazer diferença no seu dia dia!

![Imagem com 9 desenhos que fiz com css, Drácula, mion, fantasma, superman, lanterna verde, iron main, capitão america, coração e um tablet](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/emfo99nkts5yh3livm92.jpeg)

Confira todos os desenhos no [Codepen](https://codepen.io/collection/AQGpWO/)

Como falei no começo que não tenho talento para fazer desenho a mão, mais através dos desenhos feito com CSS achei uma maneira de me expressar e aprender brincando.

Tenho muito para aprender sobre CSS e este é apenas o começo de uma longa viagem que vou continuar…

Espero que eu possa ter inspirado alguém a começar sua jornada!

Obrigado por parar um tempo para ler sobre a minha jornada. Se você conhece alguém que achou essa postagem útil ou inspiradora, compartilhe-a com elas e dê a esta postagem um coração verde.

:)
How i plan to maximise my learning to improve my skills
Published: 2021-12-08 16:48:29


I have recently completed my professional development plan and have come up with a few different ways to maximise my learning to reach my goals. 

##Keep practising even if I think I have perfected it!

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6zlyt3vpqgq2mgr281ns.jpg)
 
Learning a topic or process may be easy, but it is just as easy to forget it in a couple of weeks if not put into practice.  I think the easiest way to keep on practising is to have a structure to follow instead of working out of my head from scratch. I have found a few challenges listed below which i am going to attempt to try at some point to keep practising my skills.
- [100 days of css](https://100dayscss.com/)
- [Daily UI](https://www.dailyui.co/)
- [JavaScript Challenges](https://hackernoon.com/javascript-practical-coding-challenges-for-beginners-4bq3ugr)

  


##Teaching someone else to help improve my understanding.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/aglci21vx2ea50rkuw8f.jpg)
 
Once I think I have an in-depth understanding of a topic. I think a great to cement it is to teach or collaborate with others. This will also help me to improve my communication and teamwork skills. This method is often referred to as the protégé effect. It has ben proven to  improves your learning process by increasing your metacognitive processing, increasing your use of effective learning strategies, increasing your motivation to learn the material, and increasing your feelings of competence and autonomy.




##Figure out what time management system works best for me


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cjzqdrketwkv0bzqd1k4.jpg)
 
There are many different learning methods out there and have yet to find the perfect one for me. I am going to try some of the few listed below to see what works best. Doing this will hopefully help me maximise my learning my using my time effectively. 
- [Pomodoro Technique](https://www.themuse.com/advice/take-it-from-someone-who-hates-productivity-hacksthe-pomodoro-technique-actually-works)
- [Pareto Analysis](https://www.projectsmart.co.uk/pareto-principle/pareto-analysis-step-by-step.php)
- [Eisenhower Matrix](https://www.eisenhower.me/eisenhower-matrix/)
How to download an image from URL in nodejs
Tags: node, react, javascript, webdev
Published: 2021-12-08 16:45:22


In this article, we'll learn that how can we download images from a remote URL. After downloading the image, we will encode it in base64 format.

## [original post](https://www.dsabyte.com/posts/blog/How-to-download-an-image-from-URL-in-nodejs/61b0dfd6d9c5ad4f4d2735cd)

```js
const { Buffer } = require("buffer");
const axios = require("axios");
let url = "https://res.cloudinary.com/practicaldev/image/fetch/s--nh8zSFgY--/c_fill,f_auto,fl_progressive,h_320,q_auto,w_320/https://dev-to-uploads.s3.amazonaws.com/uploads/user/profile_image/285604/94170c66-2590-4002-90e0-ec4dc94ed7b5.png";

async function downloadImage(url){
    try{
    // download the raw image file
    const raw = await axios.get(url, {
        responseType: "arraybuffer",
    })
    
    // create a base64 encoded string
    let base64 = Buffer.from(raw.data, "binary").toString("base64");
    
    // create image src
    let image = `data:${raw.headers["content-type"]};base64,${base64}`;
    
    // actual image 
    let imgFile = `<img src="${image}"/>`;
    }catch(e){
        console.log(e);
    }
}
```
Visibility modifiers, keyword of static – all in one of JavaScript ES5 standard you need for today ! [2021-12-30] (2 ed.)
Tags: javascript, class, visibility, modifiers
Published: 2021-12-08 16:30:19

Before ES6 came into Object Oriented Programming (OOP) field of JavaScript, we could only dream for a standardized PHP class like syntax , we've got one the moment ES5 been updated to ES6 in 2015 . Still, some people (including myself) tend to keep tactility sense of the syntax into hands (*in charge*), rather than an easy legible candy *a.k.a.* so called syntactic sugar of the class pattern presented in ES6. It means we can still preserve all the features of ES6 such visibility modifiers (**protected, private**) also define methods as **static** if needed rather than instance-related one. All these are still possible in ES5 which we will see in a minute. Of course **ES6 class syntax** will probably always remain per recommendation to use , although programmers who want to preserver "feeling" of the code may still be suggested to revise this empowered initially by @obscerno [comment](https://dev.to/obscerno/comment/1fahp) :

> **HOW TO** : open console, examine the code & its output as well:

{% codesandbox visibility-mods-js-2ed-nc7xr %}
> **NOTE** : As this is 2 ed. I have tried to use **protected** as variable (member) name within source code , whereas codesandbox IDE red it out . It appears ESnext (2022+) reserved it already , I'll guess there are a shiny future for ECMAScript (JavaScript) is coming for sure , so stunned , JavaScripters !  

---

**To conclude** : Instead of using this for production, use this as a background of what really is going on in terms of Javascript ES6 class syntax under the hood. I will repeat myself that **ES6 class syntax will remain per recommendation to use**. That's all for now. If any suggestion or typo found, please leave a comment below. Thank you for reading! :) 

---

<u>Useful references</u>

- [javascript.info : private, protected](https://javascript.info/private-protected-properties-methods)
- [ESnext 2022+ reserved keywords](https://tc39.es/ecma262/#sec-keywords-and-reserved-words)
How to fix the broken experience for Screenreader (Search field)
Tags: a11y, webdev
Published: 2021-12-08 16:20:53

Hey Folks!!

Do you know how screen readers perceive your code? How even a screenreader works? 

Today I will show you the experience of screenreader users. I will highlight the issues in the app and how to fix them. 

Let's consider an example: Header with brand logo, search input, and a button.

You will learn:

1. aria-label
2. input type
3. aria-live
4. aria-role

> All the demo is from Apple Mac and voiceover.

[Watch the demo here](https://youtu.be/wbjYUibJG_I)

## Problem:

1) Screenreader is not able to recognize what field is it

2) Screenreader is not able to notify when the error message comes on the screen.

## Let's dig into the code

``` HTML
<header>
    <h1>Brand Logo</h1>
    <form>
      <input placeholder="product name..." />
      <button id="search-button">Search</button>
     </form>
 </header>
 <div id="message" class="hide" class="search-errorMessage"></div>
```

## Lets fix the code 

```HTML
  <header>
     <h1>Brand Logo</h1>
     <form submit="" role="search">
       <input type="search" aria-label="Search" placeholder="Search items" />
       <button id="search-button" type="submit">Search</button>
     </form>
  </header>
  <div id="message" class="hide" role="region" class="search-errorMessage" aria-live="assertive"></div>
```

1) We have added the `role=search` with form 

```HTML
<form submit="" role="search"></form>
``` 


2) We have added the `type=search` and `aria-label="search"` this will help the screen reader users. 

It is a must to have a label with every input tag. If the label is not there due to design then it is best to use `aria-label` for screen readers.

It is a must to add the correct attribute with the input tag. These attributes guide the screen reader's users on what the field is about.

```HTML
<input type="search" aria-label="Search" placeholder="Search items" />
```


3) We have added the `role` and `aria-live`. This will help screen reader users get notified as soon as the message change. (PS: I used JavaScript to add the dynamic content and change the visibility of the div)

`aria-live` notify the screen reader users of any dynamic content change. Here I have to use the value `assertive` which will announce all the notifications and pause other announcements (you can call it rude :) ) 

```HTML
<div id="message" class="hide" role="region" class="search-errorMessage" aria-live="assertive"></div>
```

[Watch the video of demo](https://youtu.be/x8bZQBHx_RA)

Happy Learning!!
Function Types in C (and C++)
Tags: c, cpp
Published: 2021-12-08 16:10:14

---
title: Function Types in C (and C++)
published: true
description: Using typedef to define function types.
tags: #c #cpp
---

Even after programming in C for decades, I occasionally still discover things about it. While `typedef`s of pointer to function are common, I just discovered that you can have `typedef`s of function by stumbling across their use in some open-source project (though I don't recall which one). That is instead of the common:

```c
typedef void (*PF)(int);
PF pf;                    // pf is a pointer to function
```

you can instead do:

```c
typedef void F(int);
F *pf;                   // pf is (also) a pointer to function
```

One advantage the latter is that it makes it more obvious that you're dealing with pointers.

I suppose the reason for not knowing about `typedef`s of function is that there are no such examples in either the first or second editions of _The C Programming Language_ (though there are examples of `typedef`s of pointer to function). There is, however, an example in the C99 standard §6.7.7.4:

> After
>
> ```
>     typedef int MILES, KLICKSP();
> ```
>
> the constructions
>
> ```
>     extern KLICKSP *metricp;
> ```
>
> are all valid declarations. The type of ... `metricp` is ‘‘pointer to function with no parameter specification returning **int**’’ ....
Wednesday Links - Edition 2021-12-08
Tags: java, jvm, gradle, spring
Published: 2021-12-08 15:57:55

Low Latency Java with the Disruptor (14 min)💥
https://blog.scottlogic.com/2021/12/01/disruptor.html

Creating Terabyte Sized Queues with Low-Latency (4 min)👾
http://minborgsjavapot.blogspot.com/2021/12/java-creating-terabyte-sized-queues.html

Loop Fission (8 min)🪓
https://richardstartin.github.io/posts/loop-fission

5 Mundane Java Performance Tips (11 min)💡
https://richardstartin.github.io/posts/5-java-mundane-performance-tricks

Why General Inheritance is Flawed and How to Finally Fix it (9 min)🩹
http://minborgsjavapot.blogspot.com/2021/12/why-general-inheritance-is-flawed-and.html

JEP draft: Value Objects (8 min)💲
https://openjdk.java.net/jeps/8277163

How to Internationalize a Spring Boot Application (11 min)🎌
https://reflectoring.io/spring-boot-internationalization/

Multiple Spring Boot applications in the same project (3 min)🗂️
https://blog.frankel.ch/multiple-spring-boot-apps-same-project/

On Parallelism and Concurrency (8 min)🔀
https://inside.java/2021/11/30/on-parallelism-and-concurrency/

Spring Data MongoDB - Relation Modelling (6 min)🤝
https://spring.io/blog/2021/11/29/spring-data-mongodb-relation-modelling

Spring Cloud 2021.0.0 (2 min)🎉
https://spring.io/blog/2021/12/02/spring-cloud-2021-0-0-codename-jubilee-has-been-released

Composition over inheritance: Gradle vs Maven (6 min)⚔️
https://melix.github.io/blog/2021/12/composition-in-gradle.html

Kotlin DSL in Gradle [slides] (4 min)🐘
https://speakerdeck.com/martinbonnin/everything-you-didnt-want-to-know-about-the-kotlin-dsl

Safeguard your containers with new container signing capability in GitHub Actions (4 min)🔏
https://github.blog/2021-12-06-safeguard-container-signing-capability-actions/

The best way to log SQL statements with Spring Boot (3 min)📝
https://vladmihalcea.com/log-sql-spring-boot/

ECMAScript Proposals (2 min)🏂
https://www.proposals.es/
LaTeX & Macros: Macros with repeated arguments
Tags: codenewbie, latex
Published: 2021-12-08 15:50:56

Hello, how are you? :) 

In this post I tell you 
- How to declare a macros with repeated arguments 

We have seen [how to declare macros](https://dev.to/latexteada/latex-macros-creating-macros-macros-without-arguments-4338), [how to declare macros with arguments](https://dev.to/latexteada/latex-macros-macros-with-arguments-2a42), [how to put math in macros](https://dev.to/latexteada/latex-macros-math-in-macros-1b1d), and [how to declare macros with optional arguments](https://dev.to/latexteada/latex-macros-macros-with-optional-arguments-1he) 

But what if there is a symbol or parameter which appears multiple times in your macros? Do we need to write it each time it appears in our macros? It would be a waste of time!!!, fortunately we can declare a *repeated argument*

## Macros with repeated arguments

We just need to put multiple times the argument that we want to repeat in the positions where it must be. Let's see an example 

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

Let's check this code, here I declare the instruction `\dint` as short of *definite integral* with 4 arguments

1. The function to be integrated
2. Here is the *repeated argument* it is the variable by which the integral will be done, after the differential, and under the integral symbol
3. Inferior limit
4. Superior limit

It produces 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2xde43eo75lwfnmd0gly.png)
 
See? you just need to put the variable once and it appears in two places

Play with this macros and discover its limits

This is all for today. 

Do not forget to follow me on Twitter `@latexteada`

See you. Greetings :)
Cypress Plugin for AG Grid
Tags: testing, cypress, testautomation
Published: 2021-12-14 10:59:29

---
title: Cypress Plugin for AG Grid
published: true
date: 2021-12-08 15:37:02 UTC
tags: Testing, Cypress, TestAutomation
canonical_url: https://blog.ag-grid.com/cypress-plugin-for-ag-grid/
---

 ![Cypress Plugin for AG Grid](https://blog.ag-grid.com/content/images/2021/12/cypress-ag-grid--1--1.png)

Kerry McKeever created a [Cypress plugin](https://github.com/kpmck/cypress-ag-grid) for helping automate AG Grid. The plugin is open source and available on Github.

## Introduction

Kerry created the Cypress Plugin for helping the teams he works with incorporate [Cypress](https://www.cypress.io/) automation in their development process.

The plugin is continuously developed and expanded as Kerry encounters new use-cases in production development and has been use in multiple companies. Because the plugin is open sourced on Github, it has also been added to by other Cypress users working with [AG Grid](https://www.ag-grid.com/).

In an [overview blog post](https://kerrymckeever.com/how-to-test-ag-grid-with-cypress/), Kerry describes the need to be careful about the scope of automating when working with 3rd party components: "The point of this plugin is to not exhaustively test AG Grid in your application, but to allow you to effectively test your implementation of it." Because the responsibility for fully testing the component "falls on the shoulders of the vendor" but "it’s still super important to make sure your application works with the utility."

Kerry was kind enough to spend some time with us to explain how the plugin works and demonstrate it in action.

## Demo Overview Video

{% youtube lL3e0wRBluM %}


[Watch On YouTube](https://www.youtube.com/watch?v=lL3e0wRBluM)

## Trying it out

The plugin can be installed into a project from npm:

```
npm install cypress-ag-grid --save-dev

```

There are full instructions on how to use it in the [Github repo](https://github.com/kpmck/cypress-ag-grid).

The repo itself contains a sample application, which you can see running in the associated video for this post.

To try out the plugin and see the example code:

- clone or download the [Github repo](https://github.com/kpmck/cypress-ag-grid)
- `cd cypress-ag-grid`
- `npm install`
- then to run the application and run the tests headlessly
  - `npm test`
- to run the tests in the GUI
  - `npm run test:watch`

## More Information

You can find more information on:

- [Cypress AG Grid plugin on github](https://github.com/kpmck/cypress-ag-grid)
- [Kerry McKeever's blog](https://kerrymckeever.com/)

And we have other testing and test execution blog posts in the [testing category](https://blog.ag-grid.com/tag/testing/) with information on Enzyme in the [documentation testing section](https://www.ag-grid.com/javascript-data-grid/testing/).
Why you should invest in Julia now, as a Data Scientist
Tags: machinelearning, datascience, julia, science
Published: 2021-12-08 15:35:25


![Julia for Data Science](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wqh1x2z5lbmdo9zcvb0z.png)

[Julia](https://julialang.org) is a high level, dynamic programming language built to be as fast as C or C++ while remaining as easy to use as Python. For data scientists, this is a computational dream come true.

In this post, we will talk about the following topics with the goal being to convince a data scientist that the Julia ecosystem is worth investing time into. At a high level, the main reason to switch to Julia (or use it to suppliment existing workflows) is the productivity it enables for developers. Who doesn’t love being able to work more effectively?!

## Topics we will cover:

- Julia use-cases 🧑‍💻
- Data Science packages 🤖
- Interoperability 🔀
- Speed ⚡️
- Learning Resources 📚


To find out more, check out the full medium post I wrote up here: [https://medium.com/@logankilpatrick/why-you-should-invest-in-julia-now-as-a-data-scientist-30dc346d62e4](https://medium.com/@logankilpatrick/why-you-should-invest-in-julia-now-as-a-data-scientist-30dc346d62e4).
5 Tips For A Responsive CSS Design
Tags: html, webdev, responsivedesigns, ui
Published: 2021-12-08 15:32:27

Hi there! I’m here with some tips for you guys! Below are some of them that I personally use to make my websites responsive.

## Padding/Margin
We usually use a lot of padding to make our websites look attractive and interesting. But you have to keep in mind that, when you’re making your website responsive for mobiles and tables, try reducing the existing padding/margin.

## Box Sizing 
Using box sizing on HTML with a percentage width will solve a lot of problems that padding causes. Box sizing with a percentage width will keep padding in mind as opposed to you having to adjust the width during padding. 
`{box-sizing : border box;}
`
## Flex-wrap
Flex-wrap helps you to align your HTML elements like `<div>,<p>`, and forces those elements on a single line or wraps them on multiple lines according to the width. 

## em/rem/ percentages
 
Try to always use `em/percentage/rem` instead of px the next time you’re trying to make a responsive design so that texts and image sizes would adjust according to the device that is being used. 

## Media query 
To set a graphic according to the breakpoints (refers to the width where the website starts to look distorted), use media query to set the width and height. 


If you know of other tips & tricks, let me and our fellow devs know so we’re all better off when we make our next responsive designs. **Cheers! :)**



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