teleren/devto huggingface dataset:
VueJs Component interaction: props and events
Tags: vue, props, events, leaflet
Published: 2022-07-29 02:24:17

In this post we are going to see how to pass data from parent to child component and vice versa in VueJS. We will be using a small web app for showing the working of both these methods. [working demo](https://m-vue-leaflet.netlify.app/) , [github link](https://github.com/manojkmishra/vue-leaflet-mapping), [stack-overflow link](https://stackoverflow.com/questions/61998500/call-parent-methods-from-child-components-vue-js/62035245#62035245).
 

Best way for passing data in front-ends like vuejs is to use state management like vuex or pinia which I will cover in my other posts, but sometimes we do not need them in small applications. In such cases we need to use props and events. Props for passing data from Parent to Child and Events for passing data from child to parent component.

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






**Files and Components**

We have 3 vue components here 
Brew.vue - parent component, accesses breweries apis and passes to childs via props.
BrewList.vue - child component, shows list of breweries on left side
BrewMap.vue- child component, shows the breweries on map on right side.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7ecnuo1ozwswpxd80jgo.PNG)



**Overall data flow**


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



**Props: Parent to child**
We are accessing brewery list via an api parent component Brew.vue and passing it to child component BrewList.vue and BrewMap.vue . Brew.vue parent component is sending brew prop to BrewList.vue child. While passing the brewery list prop, we also added a parameter iconsize which will be used in BrewMap to show the icon on map.

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

We are accessing the props sent by parent component in child BrewList.vue and listing them in a table as below. we can also watch prop in child components using watcher and check the values.

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



**Events: Parent to Child**

Now comes the events part where are going to pass mouse over and mouse leave event information from BrewList.vue child to parent Brew.vue . So whenever we are entering mouse on BrewList.vue breweries names, it triggers these events and passes to Brew.vue parent.

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


Parent Brew.vue is accessing these events and attaching them to methods for changing the iconsize to large or normal which is visible on BrewMap.vue leaflet map.


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


Thank you.
Implement the New AWS CloudScape Design System into NextJS
Tags: nextjs, design, aws, javascript
Published: 2022-07-29 02:18:36

Something exciting has happened recently. AWS has released the design system that they now use for the AWS Console as open-source! The name for the design system in CloudScape and it is as beautiful as it is functional.

Find CloudScape here: [https://cloudscape.design/](https://cloudscape.design/)

You can integrate it with NextJS but you may run into some some problems, so I wrote a blog post about it:

[https://www.andrewstacy.com/blog/using-cloudscape-with-nextjs/](https://www.andrewstacy.com/blog/using-cloudscape-with-nextjs/)

I hope it helps! Enjoy CloudScape!
Almacenamiento HDD vs SSD
Published: 2022-07-29 01:26:18



## ¿Qué almacenamiento es mejor HDD o SSD?

En primer lugar, hay que saber que las siglas HDD significan Hard Drive Device o Unidad de Disco Duro en español, SSD por otro lado significa Solid State Drive o Unidad de Estado Sólido en español. Ambos tipos de almacenamiento tienen grandes diferencias que enumeraremos enseguida.

  Las principales ventajas de los HDD son las siguientes:

- Tienen una capacidad de almacenamiento mucho mayor a los almacenamientos SSD, pueden llegar hasta a 10 Terabytes por unidad

- Su precio es mucho menor que el de los SSD
Tienen una capacidad de reescritura mucho mayor a los SSD


Las principales ventajas de los SSD son las siguientes:

- Su velocidad de lectura y escritura son mucho mayores que los HDD sobre todo si están en formato NVMe o M.2

- Son mucho más silenciosos que los discos HDD

- Tienen una mayor durabilidad

- Tienen una exigencia energética mucho menor

- Como no funcionan con discos no tienen problemas con el magnetismo

- Son más fáciles y seguros de transportar y hay una menor posibilidad de pérdida de datos o la corrupción de estos

- Tienen una talla considerablemente menor a la de los HDD

Como pueden ver, los almacenamientos SSD tienen una cantidad mucho mayor de ventajas que los discos HDD. Además, a menos que tengas que utilizar mucho espacio o vas a instalar y desinstalar muchísimos archivos, los almacenamientos SSD son la mejor opción en particular para tener un alto rendimiento y gaming. 

¿Dónde encontrar discos duros SSD?

Hay una gran cantidad de tiendas online donde se pueden comprar discos SSD, pero les recomendamos [TheShadowTech](https://theshadowtech.com/), una nueva tienda online disponible en casi todo el mundo que solo acepta productos de la mayor calidad a un muy buen precio y tiene una gran cantidad de discos SSD de ambos formatos [SATA 3.0](https://theshadowtech.com/product/kingspec-512gb-ssd-sataiii-2-5-inch-hdd-256gb-sata3-128gb-6gb-s-hard-drive-240gb-ssd-for-laptop-internal-solid-state-hard-disk/) y [NVMe](https://theshadowtech.com/product/netac-ssd-1tb-2tb-4tb-ssd-m2-nvme-pcie-4-0-x4-m-2-2280-nvme-ssd-drive-internal-solid-state-disk-for-ps5-desktop/) (el formato más rápido que hay en este momento).
Project: Sigil
Tags: social, mediaonline
Published: 2022-07-29 01:24:18

Sigil is a prosocial social media platform where ideas compete for space. We believe that social media users deserve a say in how digital spaces are moderated and what content gets promoted. We believe your data and attention belong to you. Vote on what matters to you and make your mark on a canvas anyone can write on.

 Website: https://sigilspace.com/
CSSBattle | #29 Suffocate
Tags: css, challenge, cssbattle, suffocate
Published: 2022-07-29 01:11:33

Welcome to CSSBattle Challenges!

In this short article, I go through my solution for [CSSBattle - #29 Suffocate](https://cssbattle.dev/play/29) challenge. Please refer to the code snippet below to get a better insight into my thought processes and the implementation detail.

---

> #### Challenge:

![Suffocate Challenge](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nyamscxyupwaadg1or4d.png)

---

> #### Solution:

```html
<div class="container">
  <div class="transparent-square">
    <div class="circle top-left"></div>
    <div class="circle top-right"></div>
    <div class="circle bottom-left"></div>
    <div class="circle bottom-right"></div>
  </div>
</div>
<style>
  * {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
  }
  .circle {
    width: 200px;
    height: 200px;
    border-radius: 50%;
  }
  .container {
    background: #f3ac3c;
    width: 100vw;
    height: 100vh;
    position: relative;
  }
  .transparent-square {
    width: 200px;
    height: 200px;
    background: #1a4341;
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    overflow: hidden;
  }
  .top-left,
  .top-right,
  .bottom-left,
  .bottom-right {
    background: #f3ac3c;
    position: absolute;
  }
  .top-left {
    transform: translate(-50%, -50%);
  }
  .top-right {
    transform: translate(50%, -50%);
  }
  .bottom-left {
    transform: translate(-50%, 50%);
  }
  .bottom-right {
    transform: translate(50%, 50%);
  }
</style>
```

---

> #### Key Takeaway(s):
- using different shapes around an element to shape the center element, for example, we surrounded 4 circles around the diamond square to create its shape

As always, I welcome any feedback or questions regarding the implementation detail of the challenge. Otherwise, I hope this was useful!
Loops... where we are going we don't need loops
Published: 2022-07-29 00:46:42

Here is hopefully the first of many... on several different coding and IAC topics.  

There is nothing against loops, however one of the main challenges with them is sometimes it can be especially difficult to iterate through when you may have several conditional `if` statements or  different bits of logic happening in the loop.

Wanted to touch on `map()` in Python.  As its one of my new favorite things to reduce some of the amount of code when it concerns needing a `for` loop.

The `map()` is defined as the following:
```
map(function, iterable[, iterable1, iterable2,..., iterableN])
```

With the `map()` function, you can see that there is two things going on here.  There is a function and then an object that you are passing in.  The object you are passing in can also be a `list`, `tuple`, etc.

In my example, I am taking in a list of scopes that is coming from a variables file that is being passed in to be consumed for an infrastructure as code module.  I need to format the scopes in a certain fashion that will then be applied to an API Gateway.

In the example below I have a pretty simple amount of code that I have used to format, parse and structure a set of scopes that I needed to be applied to my API.


```python
API_SCOPES = "read:stuff, write:stuff, delete:stuff"
```

Just to add in some extra protections where someone may have added  some white space, aka spaces, into the string.  I added an extra statement to remove any additional spacing and then I am spliting on commas. 

```python
['read:stuff', 'write:stuff', 'delete:stuff']
```

The result is a `list` that has all of the scopes from the original comma separated string.

```python
API_SCOPES = "read:stuff, write:stuff, delete:stuff"
DOMAIN_NAME = "api.example.com"

def api_authorization_scopes(name: str) -> str:
    """
    Takes a string of scopes and returns a list of properly formatted scopes.

    Args:
        name (str): The scope string

    Returns:
        Optional[str]: Formatted scope string

    """
    return f"https://{DOMAIN_NAME}/{name}"

parsed_scopes = API_SCOPES.replace(' ', '').split(",")
allowed_oauth_scopes = map(api_authorization_scopes, parsed_scopes)
```

This results in a `map` object that I can output as a list and it looks like the following.

```python
['https://api.example.com/read:stuff', 'https://api.example.com/write:stuff', 'https://api.example.com/delete:stuff']
```
Installing Psycopg2 in Macos
Published: 2024-03-28 16:21:34

---
title: Installing Psycopg2 in Macos
published: true
date: 2022-07-29 00:45:15 UTC
tags: 
canonical_url: https://jinyuz.dev/posts/installing-psycopg2-in-macos/
---

TL;DR

```
env LDFLAGS="-I/usr/local/opt/openssl/include -L/usr/local/opt/openssl/lib" pip install psycopg2


# OR

env LDFLAGS="-I/usr/local/opt/openssl@3/include -L/usr/local/opt/openssl@3/lib" pip install psycopg2

# OR

# https://github.com/brianmario/mysql2/issues/795#issuecomment-337006164

env LIBRARY_PATH="/usr/local/opt/openssl@3/lib" pip install psycopg2 --no-cache

```

Source: https://stackoverflow.com/questions/26288042/error-installing-psycopg2-library-not-found-for-lssl/39244687#39244687

The reason is that probably it might work faster in my machine if it was installed using the not binary version
Alignment in CSS: Absolute positioning
Tags: css
Published: 2022-07-29 00:33:38

*Cover photo by Daniel McCullough.*

**Welcome back to alignment in CSS! Today's post is fake-sponsored by this gif:**

![The most popular google search result for "css gif"; it shows a popular cartoon character destroying a pair of blinds by adjusting them repeatedly.](https://media.giphy.com/media/13XW2MJE0XCoM0/giphy.gif)

*By the way, it's pronounced "gif".*

## More with absolute positioning and translations

Have you ever tried to use a percent for `left`, `right`, `top`, or `bottom` for positioning something absolutely? You'd think that something like `top: 50%` would work to vertically center an element...

{% codepen https://codepen.io/tchaflich/pen/zVoWRx %}

Normally the ***top*** *of the child* is flush with with ***top*** *of the parent*, so bumping the "baseline" down aligns the ***top*** *of the child* with the ***middle*** *of the parent*, rather than truly centering it.

In order for something to be aligned, we want the ***middle*** *of the parent* and the ***middle*** *of the child* to be along the same axis.

So how do we get the child element's middle to where its top currently is?

{% codepen https://codepen.io/tchaflich/pen/JQbLaR %}

If you happen to know the height of your inner element, and your element is positioned outside of the document flow (such as `position: absolute; top: 50%;`) you can almost certainly [use a negative margin](https://stackoverflow.com/a/11499018) to bump it up:

{% codepen https://codepen.io/tchaflich/pen/KjNRqp %}

The formula for this is that you want `margin-top = -0.5 * $height`. That is **half the height of the inner container**, with the margin being negative to push it in the "up" direction instead of what it would normally do (which is "down").

> 💡 Why can't I use a `margin-top: -50%`?
>
> Because CSS is cruel. The [margin and padding properties](https://drafts.csswg.org/css-box-3/#propdef-margin) accept various formats, but when a percent is specified, they use the *width* of the element. You can use this to make a [responsive perfect square](https://dev.to/tchaflich/a-width-responsive-perfect-square-in-pure-css-3dao), which is cool, but it's pretty annoying when all you want to do is vertically center something.

If you don't know what your height is, you can use [CSS transforms](https://developer.mozilla.org/en-US/docs/Web/CSS/transform), particularly `translateY`. This one doesn't even require any math, you just apply `transform: translateY(-50%)` to the inner container.

{% codepen https://codepen.io/tchaflich/pen/vqyRem %}

This works just as well, and since it's a 2d transform it's [pretty well supported](https://caniuse.com/#feat=transforms2d).
Spring - Inversion of Control
Tags: java, spring, espanish, programming
Published: 2022-07-29 00:31:00

La _Inversion de Control (IoC)_ es un proceso donde los objetos definen sus dependencias, es decir, las dependencias de otros objetos con los que están trabajando. Se hace simplemente mediante un constructor de argumentos, un argumento a un método de fábrica, o estableciendo propiedades de los objetos cuando se están construyendo. Las dependencias son inyectadas por el contenedor cuando se crea el bean. La inversión de control (IoC) se puede lograr a través de diversas técnicas, como la inyección de dependencias (DI), el patrón de localización de servicios (SLP) y el patrón de diseño de estrategia (SDP).

**Hay dos tipos de contenedores de IoC:**

**- BeanFactory:** La interfaz de BeanFactory está disponible en el paquete _org.springframework.beans._ . Es la interfaz raíz para acceder al contenedor bean. También proporciona técnicas básicas de configuración para administrar los objetos bean de cualquier tipo. Podemos decir que _BeanFactory _es un método heredado para usar.

**- ApplicationContext:** La interfaz _ApplicationContext_ está disponible en el paquete _org.springframework.context._ .Es un superconjunto completo de una interfaz _BeanFactory_. También se conoce como una interfaz central que proporciona la configuración a una aplicación.


**Diferencia entre ApplicationContext y BeanFactory**

Tanto _ApplicationContext_ como _BeanFactory_ son las interfaces Java ambas son los tipos de contenedor IoC. Pero la principal diferencia entre ambas interfaces es que  _BeanFactory_  proporciona las características básicas de IoC y DI, mientras que  _ApplicationContext_ ofrece las características avanzadas.

Algunas de las otras diferencias se dan a continuación:

- La interfaz de _BeanFactory_  no admite la internacionalización (i18n), mientras que _ApplicationContext_ proporciona soporte para ella. La internacionalización es el proceso de construir una aplicación de tal manera que cualquier idioma pueda adaptarla sin ninguna modificación.
- La interfaz de _BeanFactory_ utiliza la técnica de inicialización perezosa(lazy initialization), mientras que ApplicationContext utiliza una inicialización ansiosa(eager initialization), es decir, BeanFactory crea solo un bean singleton cuando se solicita, pero ApplicationContext produce todos los beans singleton en el momento de la inicialización.
- BeanFactory no admite la configuración basada en anotaciones, mientras que ApplicationContext admite anotaciones como @Autowired, @ComponentScan, etc.
Day 110: Fighting with Axios
Published: 2022-07-29 00:12:49

Hi!
Today was good and everything was goin smoothly until I had to pair program with a friend on his task which involved working with Axios which was so challenging but I managed to learn about Axios configs and the way it handles data. but the issue is not fixed we are still struggling with the bit of it but since it's now too late we will get back to it tomorrow. For me tomorrow will be a busy one as I have a task due tomorrow that need to be taken care of but it is under control. The upcoming few day s I will be navigating through Flutter and Mobile UI/UX design i hope it will be fun.

Signing off...
Why do companies struggle to implement a DevOps culture?
Tags: devops, productivity, culture
Published: 2022-07-29 00:05:04

Since DevOps began being implemented within companies, one of the concepts brought together was its fundamental culture.
 
Which leads us to the question: what is DevOps culture? According to this [Atlassian article](https://www.atlassian.com/devops/what-is-devops/devops-culture#:~:text=DevOps%20Trends%20Survey-,What%20is%20DevOps%20culture%3F,a%20more%20unified%20customer%20focus.):

> At its essence, a DevOps culture involves closer collaboration and shared responsibility between development and operations for the products they create and maintain. It helps companies align their people, processes, and tools toward a more unified customer focus.

Realistically, embedding DevOps culture within companies can sometimes be difficult to implement. This can be due to many factors, including how adopting a new culture can be challenging for staff who are used to the current way of working.
However, [Google](https://cloud.google.com/devops/state-of-devops) has shown how software delivery can be faster by using [DORA metrics](https://www.youtube.com/watch?v=Uohc4XSyp30&t=168s), which is a part of this culture.

Still, developers want to showcase better performance and have functional and efficient workflows to deliver their code faster between the environments without needing to dive deep into a complex operational side of things. In addition to this, they will need to familiarize themselves with topics like cluster management, sysadmin and so many others.

So how can we find a resolution to this? Well, there are many options like DevOps as a Service or a Developer Control Plane, which focuses primarily on the developer experience and enhancing its performance overall with software delivery and tooling.
If you are interested in learning about Developer Control Plane, I invite you to read this [article](https://cto.ai/blog/what-is-a-developer-control-plane/).

Now, what do you think about DevOps culture? Do you think this is one of those beautiful concepts on paper that might not be practical when actioned? Let's discuss it!
Blog: 2022-07-29: Content & Tooling Team Status Update
Published: 2022-08-18 15:44:10

---
title: Blog: 2022-07-29: Content & Tooling Team Status Update
published: true
date: 2022-07-29 00:00:00 UTC
tags: 
canonical_url: https://puppetlabs.github.io/content-and-tooling-team/blog/updates/2022-07-29-status-update/
---

## Quick Friday Update 💨

I’ll be keeping this Friday update brief as a lot of work this week has been happening behind the scenes; mainly regarding evolving the product strategy and setting in place our planned delivery for the second half of 2022.

## Welcome to the team Molly Erdle 🎉

I am excited to announce that Molly Erdle will be joining the CAT team as our new Product Manager. We are all looking forward to working with you!

## Upcoming Apache Release

A new major version of the Apache module will be released next week. This release will include multiple backwards incompatible changes and a major rework of the module syntax and various datatypes.

## Community Contributions

We’d like to thank the following people in the Puppet Community for their contributions over this past week:

- [`puppetlabs-apache#2266`](https://github.com/puppetlabs/puppetlabs-apache/pull/2266): “Define apache\_name via a let block”, thanks to [ekohl](https://github.com/ekohl)

- [`puppetlabs-apache#2263`](https://github.com/puppetlabs/puppetlabs-apache/pull/2263): “Drop suphp support”, thanks to [ekohl](https://github.com/ekohl)

- [`puppetlabs-inifile#483`](https://github.com/puppetlabs/puppetlabs-inifile/pull/483): “Fix broken idempotency with empty sections”, thanks to [kajinamit](https://github.com/kajinamit)

- [`puppetlabs-java#519`](https://github.com/puppetlabs/puppetlabs-java/pull/519): “Make ubuntu 22.04 also default to openjdk-11”, thanks to [rswarts](https://github.com/rswarts)

- [`puppetlabs-kubernetes#565`](https://github.com/puppetlabs/puppetlabs-kubernetes/pull/565): “Don’t try to guess docker\_version (#564)”, thanks to [deric](https://github.com/deric) and the following people who helped get it over the line ([danifr](https://github.com/danifr))

- [`puppetlabs-stdlib#1240`](https://github.com/puppetlabs/puppetlabs-stdlib/pull/1240): “Switch parsejson() from PSON to JSON parsing”, thanks to [seanmil](https://github.com/seanmil)
#JulyOT 29: Discover how Azure Percept can deliver Edge AI solutions at scale in partnership with NVIDIA
Tags: julyot, iot, ai, edge
Published: 2022-07-29 23:15:30

---
title: #JulyOT 29: Discover how Azure Percept can deliver Edge AI solutions at scale in partnership with NVIDIA
published: true
date: 2022-07-29 00:00:00 UTC
tags: julyot,iot,ai,edge
canonical_url: https://JulyOT.dev/blog/2022-07-29-azure-percept-edge-ai
series: JulyOT 2022
cover_image: https://JulyOT.dev/assets/images/JulyOT-banner-2022-07-29-azure-percept-edge-ai-65970c4f3c993a028511e994aef864b7.png
---

## Discover how Azure Percept can deliver Edge AI solutions at scale in partnership with NVIDIA[​](#discover-how-azure-percept-can-deliver-edge-ai-solutions-at-scale-in-partnership-with-nvidia "Direct link to heading")

Accelerate edge AI with Azure Percept and other services to simplify AI and ML training and deployment at scale. Together, NVIDIA and Microsoft are transforming AI and ML by leveraging the power of the GPU at the edge combined with Azure services. We'll showcase demos and how we work with partners to develop and scale solutions for business growth.

Check out this video from [Microsoft Inspire](https://inspire.microsoft.com/) to learn more:

[![Click here for the video](https://JulyOT.dev/assets/images/azure-percept-inspire-dfb7d30b055433ddee3f4c6d1628e10f.png)](https://inspire.microsoft.com/sessions/99883333-1a37-4251-9dcf-5808ef39dc9d?wt.mc_id=eventspg_16482_webpage_reactor)