teleren/devto huggingface dataset:
Tricks to write less JavaScript Code
Tags: javascript, webdev, react, jamstack
Published: 2022-05-27 16:12:40

If you’re new to javascript or always looking to improve your skills, consider writing short-hand javascript when appropriate.
Here I will give you some javascript tricks to write less and optimized code

## Declaring Variables

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

## Assignment Operator

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

## Ternary Operator


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

## Arrow Function


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

## Object with same Keys and Values


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

If you have others tricks do share. I would love to add them into this post.

Like this post and follow me

Thanks
Update Firefox products now to fix critical vulnerabilities
Tags: news, discuss, security, webdev
Published: 2022-05-27 16:08:38

During the Pwn2Own Vancouver 2022 hacking event, Manfred Paul demonstrated an attack on the Firefox browser that involves two types of vulnerabilities: prototype pollution ([CVE-2022-1802](https://www.mozilla.org/en-US/security/advisories/mfsa2022-19/#CVE-2022-1802)), and improper input validation ([CVE-2022-1529](https://www.mozilla.org/en-US/security/advisories/mfsa2022-19/#CVE-2022-1529)). The attack took about *8 seconds* to perform, resulting in a sandbox escape and eventually controlling the victim's operating system. In practice, users can be affected right after visiting a malicious website on a vulnerable system.

Two days after the demonstration, Mozilla released Firefox 100.0.2, Firefox for Android 100.3.0, Firefox ESR 91.9.1, and Thunderbird 91.9.1 to patch the vulnerabilities. Other Firefox-based browsers such as Tor are also affected by the vulnerabilities. Users and system administrators are recommended to upgrade the affected products to the latest version as soon as possible.

The attack is shown below (starts at 3:23).

{% embed https://youtu.be/lBfVPtmhXl8?t=203 %}

___

Interested in programming? My other articles might be helpful to you!

- [GitHub CLI in 3 minutes](https://hungvu.tech/github-cli-in-3-minutes)
- [Semantic commits, HTML semantic elements, semantic versioning](https://hungvu.tech/conventions-for-semantics-in-software-development)
- [How to make the most out of your dev.to blog post?](https://hungvu.tech/an-analysis-of-the-trends-on-devto)
- [Advanced GitHub Actions - Conditional Workflow](https://hungvu.tech/advanced-github-actions-conditional-workflow)
Open source is the default solution when choosing software
Tags: opensource, microservices, github, luos
Published: 2022-05-27 16:02:32

**Open source is the default solution when choosing software**

Stability and security is the only dimensions we asked about where a majority of users think open source software is generally better than proprietary software (58%). 

72% say that they always look for open source options when evaluating new tools.

This survey was initiated by Github in 2017, but many questions are still relevant in 2022.

We are an open-source project; feel free to comment if you have any tips for improvement.

Source : opensourcesurvey
Bots para WhatsApp
Published: 2022-05-27 15:17:56

## Bot para WhatsApp usando la conexión de Baileys MD (Multidevice)
[Link de GitHuh](https://github.com/darlyn1234/darl2-bot)

- Crea stickers.

- Descargar música.

- Búsquedas de imágenes.

- Administrar grupos.

- Kickall, hacknum y Bin.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tw5orrku5ermhnicl0mi.jpg)
Learn Creating a Sub-Content with Scroll
Tags: webdev, programming, html, css
Published: 2022-05-27 13:14:21

Hello everyone this is my first blog. Today I would like to share my experience while develop my personal project. In my project I want to make a sub-content that have a scroll bar but the height of that content is 100% to the remaining parent height space. The parent height here is depend on the viewport size.

After a while searching about the solution I have discover to make the sub-content fill the remaining parent height space we could use flex-box and change the flex direction to column. One problem is solved. 

My next problem is how to make only the sub-content have the scroll bar and the parent (body) doesn't. Then finally I got the solution after learning about overflow. What is new that I learn here is if we have our sub-content wrapping by a div for the container, we have to set both of the container and the grand-child of our body to have overflow value. 

And that it's my sub-content know have scroll auto and the height is depend on the remaining it parent height.

Here is the html code:

```
<div class="container">
  <div class="box-container">
    <div class="box">
      <div class="list"></div>
      <div class="list"></div>
      <div class="list"></div>
      <div class="list"></div>
    </div>
  </div>  
</div>
```

And following css:

```
.container {
  box-sizing: border-box;
  height: 100vh;
  background-color: #f5f5f5;
  border: 2px solid red;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.box-container {
  overflow-y: auto;
  display: flex;
}

.box {
  overflow-y: auto;
  flex:1;
  height:auto;
  background-color: yellow;
}

.list {
  height: 200px;
  border: 2px solid green;
  margin-bottom: 2px;
}
```

Thanks for reading and sorry for my bad english. Keep it up for those who are finding problems in coding 💪
Book Club: "Test Driven Development: By Example" #10 -TDD can help you write great error messages
Tags: books, tdd, discuss
Published: 2022-05-27 14:31:13

---
title: Book Club: "Test Driven Development: By Example" #10 -TDD can help you write great error messages
published: true
description: A chapter by chapter discussion of "Test Driven Development By Example" by Kent Beck
tags: books, tdd, discussion
series: Book club TDD By Example
---

## Book Club: "Test Driven Development: By Example" #10
### Chapter 10: Interesting Times

This chapter is interesting and pithy. Firstly, we have a failing test where the error message is not helpful. Kent Beck guides us through defining a `toString` method to give us a better test output. I see unhelpful errors like this all the time - they really are giving me nothing, and yet, making such a change to the error output feels like I'm treading on someones toes. This is something to overcome. Helpful messages when our code goes wrong are so useful to the investigating developer; updating them as they're encountered is a great way to leave to codebase in a better state than when you found it.

The process of TDD allows us to preview failing tests and to experience the error messages our tests leave as their legacy, so helpful messages if and when the code breaks are a huge advantage of using TDD.

We're also introduced to a bit of a pickle for the first time, when our code change leaves us stuck in the red, and the safest route out is to undo the change and write another test first. 

>"The way forward, is sometimes the way back."
> <sup>Quote from Labyrinth (1986)</sup>

This sticking point was an experiment, and Beck points out that if you don't have tests you're forced to spend time thinking through possible scenarios and outcomes before moving forward. The test process here gives us some agility to experiment. We can go back to the last point when the code was green, and let the computer do some theorising on our behalf.

🔎 View my code-along repo at https://github.com/ruthmoog/test-driven-development-by-example 

-----

![Book cover](https://learning.oreilly.com/library/cover/0321146530/250w/ ) Kent Beck's "[Test Driven Development: By Example](https://www.oreilly.com/library/view/test-driven-development/0321146530/)" was released in 2002. The book aims to explain how to use TDD to write quality code that works.
Crypto React App;Material UI, Firebase and Vercel
Tags: webdev, react, vercel, firebase
Published: 2022-05-27 14:56:18

This week I was tasked with building a react site from scratch, and implement a Firebase authentication. I came up with the project idea which was, _A site where users can access both the news and information about various cryptocurrencies._ This was my first _big-ish_ react app.
The live site can be found [here](https://coin-watch-app.vercel.app/) , the design [here](https://www.figma.com/file/uixKCtl6niypOAnO7I8g70/Crypto-watch-react-app?node-id=8%3A101) and the repository on [GitHub](https://github.com/CKawara/Coin-watch)

**The MVPs for the site were;**
1. A home page with a list of the coins.
2. A filter for the currency they want to use for the coin price (USD / EUR)
3. A news page
4. Coin details page
5. Time filter for the graph in the detail section
7. Log in to coin to favorites 


In this article, I will talk about my experience with the various technologies I used. 

## [React-js](https://reactjs.org/)
React is a JavaScript library for building user interfaces.
To create a react app you run `npx create-react-app my-app
` on your terminal and it will create a project for you with some starter code.
I worked with various hooks like _useState()_ to handle various states  and 
 _useEffect()_ to handle fetching data from APIs I also used context API to handle props.

## [Material UI](https://mui.com/) 
I used _MUI_ for styling. It provides a simple, customizable, and accessible library of React components.
To install _Mui_, run `npm i @mui/core` on your terminal.
Now, with react 18, you might encounter an error, upon which you will run `npm i @mui/core --force`  Because React 18 was just launched some libraries can't find a way to fit in properly.
It was my first time interacting with Mui, so it was a bit challenging, but with tutorials and documentation, I was able to achieve my set goals.

## [Firebase](https://firebase.google.com/)
I used Firebase for authentication and to store users' favorite coins.
This was such a challenging feature for me to implement as it was a feature I had not planned for.
I was able to attain the set goals through various tutorials on you tube and articles.

## [Vercel](https://vercel.com/)
I used Vercel for deployment. I had issues deploying my site as my git files some how got corrupted while pushing some code to GitHub.
I had planned on using netlify as I have interacted with it before, but it could not deploy my work from GitHub, or manually. That is when I discovered Vercel, it is very easy to use, it doesn't need any build command and if it encounters a problem while deploying, it will give you a solution suggestion. All you need to do is connect it to your GitHub account.

## Conclusion
React is a very interesting framework. I enjoyed working on this project and I'm looking forward to working on more React projects.
The 3 Conversations That Improve Developers' Lives w/ Reprise's Jennie MacDougall
Tags: management, podcast, techtalks, productivity
Published: 2022-05-27 14:54:42

*We want to make the Dev Interrupted podcast a vital, enjoyable part of your week.* ***Please take 2 minutes and answer our new [Listener Survey](https://www.surveymonkey.com/r/PRYRNC5).*** *It lets us know a bit about you, what you want from Dev Interrupted and what you want from podcasts in general!*

If you’re doing your job right, most of your time and your team’s time should be spent actually building things. That means conversations should be reserved to the very important ones.

In our latest [Dev Interrupted](https://devinterrupted.com/podcasts/) episode, [Reprise’s](https://www.getreprise.com/) Director of Engineering Jennie MacDougall looks back on the most useful conversation she has ever had with her devs that are also the ones she encourages them to have with others.

From the most important conversation when evaluating a prospective dev to the question that actually keeps engineers motivated and invested, this was an incredible download of things I started doing right after the recording was finished.

{% spotify spotify:episode:6GylfLluj7yaVwpBM65XmT %}

## Episode Highlights Include:
* (6:27) Jennie's favorite interview question
* (11:49) What to look for in a junior dev
* (20:59) The "Donut Exercise"
* (25:41) Things devs hate doing
* (31:17) Do you want it fast or complete?
* (37:52) Balancing product & engineering

***Starved for top-level software engineering content? Need some good tips on how to manage your team? This article is inspired by [Dev Interrupted](https://devinterrupted.com/podcasts/) - the go-to podcast for engineering leaders.***

*Dev Interrupted features expert guests from around the world to explore strategy and day-to-day topics ranging from dev team metrics to accelerating delivery. With new guests every week from Google to small startups, the Dev Interrupted Podcast is a fresh look at the world of software engineering and engineering management.*

[***Listen and subscribe on your streaming service of choice today.***](https://devinterrupted.com/podcasts/)

![https://devinterrupted.com/podcasts/](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gl8yy3hpnevlyboet97b.png)
Delimitação de um Software
Published: 2022-05-27 14:51:03

Delimitação de um software:  indica o que o software vai resolver. A delimitação deve ser extraída dos requisitos funcionais do software.

Limitações de um software: indicam as funcionalidades não serão implementadas, por outros factores. Estas funcionalidades devem fazer parte de um conjunto de funcionalidades possíveis para o software.

Existem vários factores que dificultam a implementação de certas funcionalidades do software:
- Requisitos não prioritários;
- Complexidade do negócio;
- Complexidade Técnica;
- Necessidade de equipas grandes;
- Ausência de recursos finaceiros.

**Questões relacionadas**
Delimitações
- Qual é o objectivo do software?
- Onde começa o software?
- Onde termina?

Limitações
- O que ficou para o futuro?
- O que poderia ser implementado?

É importante declarar a delimitação e as limitações do software, porque ajuda a focar nas prioridades iniciais do sofware e deixar as outras funcionalidades como propostas futuras.

**Exemplo:** Delimitação de um Sistema de Recrutamento e Seleção.



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


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


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6wf5kjl636npyui0e4or.jpg)

Para mais Artigos: 
https://www.dev.to/ortizdavid
https://www.medium.com/@ortizaad1994
Reducing JS code in your Vue bundle
Tags: javascript, css, vue, astro
Published: 2022-05-27 13:13:07

I recently got a typical task for a UI component library.
Creating an atomic video component.

Not hard to achieve, take an embed url for example one of those from Youtube and set it as the src attribute of an iframe.

As a requirement there should be a default width-to-height ratio on the iframe and the possibility to customize it.

The following code examples are simplified.

My first approach is probably what would occur first to every Vue dev put in front of this problem.

```vue
<script setup lang="ts">
interface Props {
  url: string
  ratio?: [number, number]
}
withDefaults(defineProps<Props>(), {
  ratio: () => [776, 437],
})
</script>

<template>
  <iframe
    :src="url"
    :style="{ aspectRatio: `${ratio[0]} / ${ratio[1]}` }"
  />
</template>
```

This exposes a nice API, wehere the customer can customize the ratio like this
```vue
<UiVideo url="somewhere" :ratio="[3, 1]"/>
``` 

But we have added a prop and silently a computed prop just for a CSS property value.

Not a big deal in an SPA but what if you are building a site where you want your JS to be as small as possible?

Well we could use Astro of course ;-)

But what if not?

A teammate came up with a great idea, it avoids the JS at the price of a tiny little bit of extra CSS!

```vue
<script setup lang="ts">
interface Props {
  url: string
}
</script>

<template>
  <iframe :src="url" style="aspect-ratio: var(--video-ratio, 776 / 437)" />
</template>
```

The extra prop is gone!
Consuming the component and customizing the ratio will now look like

```vue
<UiVideo url="somewhere" style="--video-ratio: 3 / 1"/>
``` 
You can also create a CSS class and apply that instead of using an inline style of course.

Really convenient! While I think that the first version is still a bit more developer friendly (TS + your IDE will suggest `ratio` as a prop when you start typing `<UiVideo ...`) the second does everything you actually need and is even cleaner from some point of view (CSS from `style` or `class`, data + logic from `props`)

In a big SPA where initial page load performance is not an issue, I would still prefer the first version though, maybe I still have to get used to this great pattern that leverages the power of CSS custom props.

Good documentation and a reliable CSS props naming strategy is absolutely necessary to make this scale and not become messy.
CloudPouch - AWS Cost Optimization Tool
Tags: awscostoptimization, awsbudget, costoptimizationtool
Published: 2022-05-27 14:43:01



AWS Cost Optimization Tool - CloudPouch (Desktop Application)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g63cue5qld047jz1tfcb.png)
 
 
As a solution architect I was looking for Cost Optimization tool that will help me/my client to look insight of AWS Service usage and give me detail overview of instance and cost. 
It should not be SaaS application as I don’t want to share my credential over web but an application which is more on my private system means it should be a desktop application where I can configure multiple accounts and monitor resource usage. Help me to use AWS resources optimum and cost effective to save money.
I found similar kind of tool which match our requirement – [CloudPouch](https://cloudpouch.dev/). 

Feature which impressed me and can’t wait to use:
1.	It is a Desktop Application which is fully in your own control no need to save / share your credential over web.
2.	Fast and Easy to use – Installation is very simple just download from Github and install on your local machine / cloud env (available to support Linux, Macintosh, and Windows OS)
3.	Support Multiple AWS Account – On a same you can view multiple account by navigating to your account name. you can view graphical reports for different period and can filter as per region.

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

4.Easy to configure – You can setup your multiple account details in ~/.aws/profiles & ~/.aws/config  file with least privilege to get access cost explorer 

5.Best feature is that you can see insights of each service (Mouse hover) usage / cost and recommended optimization that save thousands of dollars in a very short duration as per your usage.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7r94k6piksgeqzb0hw7w.png)
 
 
6.Cost Anomaly Detection – For all service costs are analyzed and an icon is displayed if any cost spike. Each spike is marked by a red triangle on a chart, so you know what triggered cost anomaly detection

Thanks #cloudpouch #PawelZubkiewicz for AWESOME tools.
Paracetamol.js💊| #127: Explica este código JavaScript
Tags: javascript, spanish, webdev, programming
Published: 2022-05-27 14:42:38

## **<center>¿Qué regresa por consola la siguiente función?</center>**
#### <center>**Dificultad:** <mark>Avanzado</mark></center>

```js
const formatearPrecio = ({ cantidad = 0, moneda = "USD", formato = "en-US", maxDecimales = 2}) => {
  return new Intl.NumberFormat(formato, {
    style: 'currency',
    currency: moneda,
    minimumFractionDigits: maxDecimales
  }).format(cantidad);
}

console.log(formatearPrecio({
  cantidad: 3598,
  moneda: 'GBP',
  formato: 'en-GB',
  maxDecimales: 3
}));
```

A. `undefiend`
B. `$3,598.0`
C. `£3,598.000`
D. `Uncaught TypeError: NumberFormat is not a function`

Respuesta en el primer comentario.

---
When Companies Fake Diversity Initiatives 🎙
Tags: news, inclusion, ruby, python
Published: 2022-05-27 14:35:42

This week's DevNews episode covers Ruby at Scale, and PyScript as newsworthy items in the dev world lately, but the headlining topic is coverage of [fake diversity interviews](https://www.nytimes.com/2022/05/19/business/wells-fargo-fake-interviews.html).

Listen in for coverage on this, as well as [Shopify's investments in Ruby](https://shopify.engineering/shopify-ruby-at-scale-research-investment) and [Python in the browser](https://anaconda.cloud/pyscript-python-in-the-browser)

## Listen on Apple Podcasts

{% embed https://podcasts.apple.com/us/podcast/s8-e7-faking-dei-efforts-ruby-at-scale-and-diving/id1525581923?i=1000563969403 %}

## Listen on Spotify

{% embed https://open.spotify.com/episode/0LckhQWojjLIy0bbjxMoie?si=OpwcFigyTWW0Jd2KwtcKOQ %}

### **[Or listen right here on DEV](https://dev.to/devnews/s8e7-faking-dei-efforts-ruby-at-scale-and-diving-into-pyscript) 🎉**

***

**If you like this episode, definitely subscribe to the show!**

Happy coding news!