teleren/devto huggingface dataset:
Paracetamol.js💊| #159: Explica este código JavaScript
Tags: javascript, webdev, spanish, programming
Published: 2022-07-01 14:19:40

## **<center>Explica este código JavaScript</center>**
#### <center>**Dificultad:** <mark>Intermedio</mark></center>

```js
const perro = {
  id:1,
  nombre:"Dogge",
}

const persona = {
  nombre:"Carlos"
}

console.log({...perro, ...persona}); //A
console.log({...persona, ...perro}); //B
```

A. `{ id:1, nombre: "Carlos" }`, `{ id:1, nombre: "Dogge" }`
B. `{ id:1, nombre: "Dogge" }`, `{ id:1, nombre: "Carlos" }`
C. `{ id:1, nombre: "Carlos" }`, `{ id:1, nombre: "Carlos" }`
D. `{ id:1, nombre: "Carlos" }`, `{ id:1, nombre: "Carlos" }`

Respuesta en el primer comentario.

---
Dry run the code before compile
Tags: codenewbie, dryrun, code, debug
Published: 2022-07-01 14:07:44

**What is dry run?**
Tracing code manually on pen & paper.


<u>**Common mistakes in Dry run**</u>

❌ Skipping lines or skipping loop completely/half-completely.
❌ Don't track updated values of variables.
❌ Not tracing the real code rather than another  imaginary code in your mind because of lack of concentration.
❌ Reading mistakes(silly mistakes like comma, semicolon , typos etc.).
❌ Conceptual lacking(not clear about execution sequence , execution context, data flow , loop execution etc.).  


<u>**Good practice in Dry run**</u>

✔ Always write updated values of variables by drawing box shape . In case of loop, use table like chart to track every updated variables of every iteration. 
✔ Read lines letter by letter.
✔ Evaluate arithmetic expression according to precedence rule of operator.
✔ Give enough time for dry run.



<u>**Why need dry run?**</u>
- understand the code properly.
- clear the coding concept.
- find bugs easily.
Gett: Legacy project support for an international taxi ordering service
Tags: ruby, webdev, writing, programming
Published: 2022-07-01 14:04:09

Gett is an international company that provides a taxi and delivery service. The main product of the company is a cloud service that connects providers and consumers of transport services. A large line of business is corporate transportation, with Gett serving a quarter of the Fortune 500 companies.

In 2021, the company underwent an internal audit — the findings of which resulted in a decision to strengthen the team. [Gett approached Evrone’s experts in Ruby development](https://evrone.com/gett) to assist the company’s own team with servicing the project’s technical debt.
Monthly Amazon Location Service Updates - 2022.06
Tags: amazonlocationservice, amplifygeo, amplify, amazonlocationserviceupdates
Published: 2022-07-01 14:01:07

![img](https://day-journal.com/memo/images/logo/aws/location-service.png)

### Monthly Amazon Location Service Updates - 2022.06

<br>

This is a summary of the June updates for Amazon Location Service.

<br>

## 2022.06 Updates

[Amplify Geo - Map Style Add](https://github.com/aws-amplify/docs/pull/4287)
New map styles have been added to "Amplify Geo."

[Announcing Geofence Management in Amplify Geo (JavaScript), powered by Amazon Location Service](https://aws.amazon.com/about-aws/whats-new/2022/06/geofence-management-amplify-geo-javascript-amazon-location-service/)
The "Amplify Geo" geofence feature is now generally available in June 2022.

<br>

## Other Info

[Amazon Location Service Developer Guide](https://docs.aws.amazon.com/location/latest/developerguide)
Official Amazon Location Service Documentation.

[Amplify Geo Docs](https://docs.amplify.aws/lib/geo/getting-started/q/platform/js)
Official Amplify Geo Docs.

[Amazon Location Service Samples](https://github.com/aws-samples/amazon-location-samples)
Official Amazon Location Service samples.

[amazon-location-service-starter](https://github.com/dayjournal/amazon-location-service-starter)
Build environment to get started with Amazon Location Service.

[A Summary of How to Build Amplify Geo and Amazon Location Service](https://dev.to/aws-builders/a-summary-of-how-to-build-amplify-geo-and-amazon-location-service-5hal)
Summary of Amazon Location Service and Amplify Geo. (as of December 2021)  

[dev.to](https://dev.to/dayjournal)
Articles on Amazon Location Service.

[tags - Amazon Location Service](https://day-journal.com/memo/tags/Amazon-Location-Service)
[tags - Try](https://day-journal.com/memo/tags/Try)
Notes on Amazon Location Service. (Japanese)

<br>

## Related Articles

{% link https://dev.to/aws-builders/monthly-amazon-location-service-updates-202205-52pk %}
How to reduce bundle.js / main.[hash].js size in react js?
Published: 2022-07-01 13:59:54

In my react app, when I run npm run build then lot of chunk files are created and also one main.[hash].js file
and that main.[hash].js file size is ~138kb (attached screenshots below for reference)

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

Due to this performance of my app is getting low as per PageSpeed test or LightHouse test (attached screenshots below for reference) and its in Reduced unused Javascript
And in react app there's no such code which are unused

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1l5hxm05cmjsij1vdnob.png)
So how to reduce size of main.[hash].js file so that performance will increase ?

In this app I did not eject web-pack files so there no config file in this app
also I have already use code splitting technique like lazy/suspence in all routes.
Railscasts color scheme for VSCode integrated terminal
Tags: railscasts, vscode, terminal, colorscheme
Published: 2022-07-01 13:32:20

Anyone still using the Railscasts color scheme for development like me? I like the smooth earthy colors besides the fact that I have been used to it for more than 10 years. It all started in Sublime Text and I have adopted it for iTerm2 for consistency. When switching over from Sublime Text 2 to VSCode I was happy to found the color scheme present as well. Since then I was unhappy with the default color scheme of the integrated terminal, although I use it very rarely.

Today I have created a color customization for the integrated terminal of VSCode which you can find as a gist here: https://gist.github.com/donni106/04a9a3cff5f41c45db52785425732482

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

I found a nice script that was simple to use here: https://gist.github.com/2xAA/bd01638dc9ca46c590fda06c4ef0cc5a

```javascript
const col = [] // run your .itermcolors file through a parser to get json and replace the array with the output
      
function componentToHex(c) {
  const hex = c.toString(16)
  return hex.length === 1 ? `0${hex}` : hex
}

const mapping = {
  'terminal.background':'Background Color',
  'terminal.foreground':'Foreground Color',
  'terminalCursor.background':'Cursor Text Color',
  'terminalCursor.foreground':'Cursor Color',
  'terminal.ansiBlack':'Ansi 0 Color',
  'terminal.ansiBlue':'Ansi 4 Color',
  'terminal.ansiBrightBlack':'Ansi 8 Color',
  'terminal.ansiBrightBlue':'Ansi 12 Color',
  'terminal.ansiBrightCyan':'Ansi 14 Color',
  'terminal.ansiBrightGreen':'Ansi 10 Color',
  'terminal.ansiBrightMagenta':'Ansi 13 Color',
  'terminal.ansiBrightRed':'Ansi 9 Color',
  'terminal.ansiBrightWhite':'Ansi 15 Color',
  'terminal.ansiBrightYellow':'Ansi 11 Color',
  'terminal.ansiCyan':'Ansi 6 Color',
  'terminal.ansiGreen':'Ansi 2 Color',
  'terminal.ansiMagenta':'Ansi 5 Color',
  'terminal.ansiRed':'Ansi 1 Color',
  'terminal.ansiWhite':'Ansi 7 Color',
  'terminal.ansiYellow':'Ansi 3 Color'
}

console.log(JSON.stringify(Object.keys(mapping).reduce((obj, vsCodeKey) => {
  const itermKey = mapping[vsCodeKey]
  const red = componentToHex(Math.round(col[0][itermKey]['Red Component'] * 255))
  const green = componentToHex(Math.round(col[0][itermKey]['Green Component'] * 255))
  const blue = componentToHex(Math.round(col[0][itermKey]['Blue Component'] * 255))

  obj[vsCodeKey] = `#${red}${green}${blue}`
  return obj
}, {}), null, 2))
```

Before running the script I had to convert the itermcolors file to a JSON, which was able with a tool at: https://json2plist.sinaapp.com (Plist -> JSON).

The outcome needs to be copied in the VSCode settings under the `workbench.colorCustomizations` key.

Now it shines in the same glow :star:
Install docker, docker-compose in Ubuntu 22.04 in 5 commands
Tags: docker, ubuntu
Published: 2022-07-01 13:24:15

The [official guide](https://docs.docker.com/engine/install/ubuntu/) takes a bit of reading...

So here's the TL;DR version of it, in 5 commands:
```bash
# Install Docker
curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo gpg --dearmor -o /etc/apt/keyrings/docker.gpg
echo \
  "deb [arch=$(dpkg --print-architecture) signed-by=/etc/apt/keyrings/docker.gpg] https://download.docker.com/linux/ubuntu \
  $(lsb_release -cs) stable" | sudo tee /etc/apt/sources.list.d/docker.list > /dev/null
sudo apt update
sudo apt install -y docker-ce docker-compose-plugin

# Install docker-compose
sudo ln -s /usr/libexec/docker/cli-plugins/docker-compose /usr/bin/docker-compose
```

Add yourself to `docker` group (no need for `sudo docker` every time)

```bash
sudo usermod -aG docker $USER
```

Profit 😉
Week 9 - Trial and Error
Tags: webdev, javascript, beginners, programming
Published: 2022-07-01 13:23:22

A week late, but none the less, life has a way!

This will be a short post, just explaining the key findings that I have achieved.

# Lessons Learnt
One of the key things I found is the interaction with external APIs. The initial few days, were focused on reading over the documentation and the APIs. 

Using the fetchwrapper taken from the JS tutorials, the GET API was the major focus on this. However, extracting a bunch of data all in one go has its limitations and requires proper polling. 

Having saved all the data into separate files the next step is to begin to look at visualising the data.

# Next Steps
While the interaction with external APIs has been quite fun. I think the visualisation of the data is the next key step to compound my initial JS learning. In addition, I believe a review of data structures and algorithms maybe helpful.

# Wrap-up 

Thank you for checking up on my progress and I hope to provide some more interesting work in the next few weeks.

Jack/eXit
Book Club: "Test Driven Development: By Example" #15 - TDD: Letting the compiler direct you
Tags: books, tdd, discuss
Published: 2022-07-01 13:11:00

---
title: Book Club: "Test Driven Development: By Example" #15 - TDD: Letting the compiler direct you
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" #15
### Chapter 15: Mixed Currencies

One thing that makes my life easier when writing code test-first (and there are many things), is when I'm able to write the test I want and let the compiler work for me.

In this chapter we wrote a test for multi-currency conversion, and it allowed us to change a type in our wishful test, then follow the compiler prompt-by-prompt to complete the change.

We wanted to change the type of one of our objects, and call a `plus` method to add two amounts together, so writing the code below nudges me to create the `plus` method on `Expression`: 

```java
Expression fiveBucks = new Money.dollar(5);
...
Money result = bank.reduce(fiveBucks.plus(tenFrancs), "USD");
```
That's great and then I can add the implementation in `Expressions` sub-classes, no sweat.



🔎 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.
Project Blog
Published: 2022-07-01 13:02:02

**Name of the project**: NBA FAN PAGE STATS
**Ideation Process**: I am an NBA basketball fanatic. On several occasion, I have googled players' information like their city or which team they played in but the information I got from various websites were inaccurate or outdated. Thus I decided to develop a simple page where you can search for information about players like the city they come from and their real names. The page also allows the visitor to give reviews on the player. 
**Technology used/Requirements:**

- HTML
- CSS
- Javascript
- API -[ https://www.balldontlie.io/api/v1/players](url)
**Development process:**
The project design was created using Figma. After which it was coded into an actual static website using HTML and  CSS. Interactivity was added using javascript.  The website allows you to search for a player using his name. The value imputed is stored in a variable and passed dynamically in the Url used to fetch the players. The fetch returns different players with the same name.
**Website Usage:**
  Instead of typing a bunch of words, I will provide a link to a video that will take you through how to use the website.
[](https://www.loom.com/share/7814d73bd9b04b80ad1de89b8d2762d4)
**Website link:**
[tonnychweya.github.io/nba_stats/](url)
**Github link:**
[](https://github.com/TONNYCHWEYA/Nba_stats.git)
"Quiet" by Susan Cain: How to be a successful introvert without going insane
Published: 2022-07-01 12:57:57

I'm an introverted software engineer (former journalist) who does public speaking, youtube, social media, along with lots of volunteering and networking. 

I need people. Helping and empowering them brings me most joy. It also drains me, and I find some of the above-mentioned activities somewhat terrifying and tiring.

I still do all of them, with various levels of success, but with some consistency.

Watch the video to hear how I do what I do.  I also share what I've learned from "the Bible for introverts", "Quiet: The Power of Introverts in a World That Can't Stop Talking" by Susan Cain.

{% embed https://youtu.be/egR4-ExRY1c %}
An intro to Reactive programming in Spring Boot
Published: 2022-07-01 12:45:27


An ebook with an introduction to reactive programming in Spring Boot.


Programming comes in different paradigms.
For long, we did procedural programming using languages like C where the business logic was executed step by step in a procedural manner. Then came Object Oriented Programming where you modelled your business requirement into domain objects. It represented real world more closely and has been quite successful even now. 
And we also have Functional programming, Event Driven programming etc.
The latest among these is Reactive Programming.

Reactive programming is non-blocking, asynchronous , deals with data streams and supports backpressure. 

This ebook gives a quick intro to Reactive Programming in Spring Boot with sample demo in both Spring Boot and Javascript.

Contents:
1. Reactive programming – definition
2. Reactive programming in Spring Boot
3. How to create a reactive REST API – demo
4. How to consume a reactive REST API – demo
5. Backpressure
6. How to consume a reactive REST API in Javascript - demo
7. Conclusion
8. Further Reading


[An Intro to Reactive Programming in Spring Boot](https://vijaysrj.gumroad.com/l/springreactive)
tsParticles 2.1.3 Released
Tags: javascript, webdev, typescript, showdev
Published: 2022-07-01 12:31:00

# tsParticles 2.1.3 Changelog

## Bug Fixes

- Fix: Fixed typo in readme for react-tsparticles, thanks to @brainsaysno, closes #4245 
- Fix: Fixed issue with OutMode bounce when particles are moved outside the canvas bounds from other sources, closes #4247

---

{% github matteobruni/tsparticles %}
How to start career in IT. Story of Aleksandra
Tags: career, frontend, beginners, devjournal
Published: 2022-07-01 12:27:44

{% youtube IzkxACOnJEc %}

Hi!
How to get into IT with zero experience? Listen to Aleksandra and her powerful story that truly inspires to change! 

Hundreds of hours of studying, mastering skills and digging into the details brought the result. Watch her story path.

Enjoy! You can also read the article at [Frontend House](https://frontendhouse.com/experts-zone/how-to-start-career-in-it-story-of-aleksandra-experts-zone-talks-18).
A simple guide to using the Useless Facts API
Tags: api, opensource, showdev, django
Published: 2022-07-01 12:02:20

So, over the course of two weeks filled with pain and despair due to sickness, I created a simple API in django rest framework
to learn about itself and also apply concepts like Token Authentication, Scoped Rate Limiting, and how to document APIs to name a few.

Now, realizing that getting data is not so cheap and also scraping someone else's website can put unnessesary load on their website
and their wallet, I'm making whatever data I've collected available to everyone else through these APIs.

<br />

### Steps to using these APIs

**Step 1**: Call the `/auth/login/` endpoint, or `/auth/registration/` if you are a new user, to get back a *Token*

*Note- All demonstration done using [httpie](https://httpie.io/cli), but you can see how to do it using curl in the swagger doc [here](https://uselessfacts.fly.dev/swagger/)*

```shell
http POST https://uselessfacts.fly.dev/auth/login/ username=<your-registered-username> password=<your-registered-password>
```
OR
```shell
http POST https://uselessfacts.fly.dev/auth/registration/ username=<your-choice-of-username> password1=<your-choice-of-password>  password2=<same-as-password1>
```
You'll get back the following response -
```shell
{
    "key": "c596a03fd15783e14d512c843a7ee4ba84ea77eb"
}
```
This is the token we were talking about

<br />

**Step 2**: Send this *Token* as *Authorization* while calling the `v1` APIs to get back the useless facts!

```shell
http POST https://uselessfacts.fly.dev/v1/random-fact/ 'Authorization: Token c596a03fd15783e14d512c843a7ee4ba84ea77eb'
```
 OR
```shell
http POST https://uselessfacts.fly.dev/v1/fact/145/ 'Authorization: Token c596a03fd15783e14d512c843a7ee4ba84ea77eb'
```
And upon successful request you'll get back the useless fact like below

```shell
{
    "data": {
        "fact": "California consumes more bottled water than any other product.",
        "id": 145
    },
    "status": "success"
}
```
You can check out other respones in the swagger documentation [here](https://uselessfacts.fly.dev/swagger/)

Now the most important step, like a good person make sure you logout as well!

**Step 3**: To logout call the `/auth/logout/` endpoint with no body with sending the *Token* in authorization just like we did in the previous step

```shell
http POST https://uselessfacts.fly.dev/auth/logout/ 'Authorization: Token c596a03fd15783e14d512c843a7ee4ba84ea77eb'
```

Upon successful request you should get the following response -

```shell
{
    "detail": "Successfully logged out."
}
```

You can explore all the other available endpoints as well as the models in the swagger documentation mentioned above.

You can get in touch with me here or on [LinkedIn](https://www.linkedin.com/in/kaushal-sharma-/) OR [Instagram](https://www.instagram.com/kaushal_dev.py/) !
Hosting fonts locally for Subreply CSS
Tags: webdev, css, subreply
Published: 2022-07-01 11:53:12

As promised in the [previous post](https://tsk.bearblog.dev/introducing-subreply-css/), today I will show you how you can host the font that [Subreply CSS](https://github.com/HoangTuan110/subreply-css) used (which is [Route 159](https://dotcolon.net/font/route159/)) locally for your project, and use them with Subreply.

# Step 1: Download the font

Go to the website of [Route 159](https://dotcolon.net/font/route159/), then click on the `Download` button.

![Click on the `Download` button](https://files.catbox.moe/z0w3ca.png)

After that, the zip file containing the fonts should start installing.

# Step 2: Extract the font

After the installation was done, go to the folder containing the font, then unzip the zip file.

If you are using the terminal, use the command `unzip <filename>`, e.g. `unzip route159_110.zip`.

If you are using Windows, you can read [this article](https://support.microsoft.com/en-us/windows/zip-and-unzip-files-f6dde0a7-0fec-8294-e1d3-703ed85e7ebc) from Microsoft.

After unzipping, your fonts folder should look like this:

![Your fonts folder should look like this](https://files.catbox.moe/55n6yx.png)

# Step 3: Move the fonts file to your project

After extracted all the fonts, we need to move them into your project.

Go to the directory `Web Fonts`, then:

- If you are using the terminal, move the file `Route159-Bold.woff` and `Route159-Regular.woff` to your project.

```sh
mv Route159-Bold.woff <your-project>
mv Route159-Regular.woff <your-project>
```

- If you are using Windows, open your project's folder in another window, then drag the file `Route159-Bold.woff` and `Route159-Regular.woff` from the fonts folder to your project's folder.

![These two files!](https://files.catbox.moe/wrksgl.png)

# Step 4: Modify the CSS

Finally, we need to directly modify the CSS, so that it will work with our local fonts.

First, opening the CSS file containing Subreply CSS, using your favorite editor.

Then, using the `Find and Replace` feature of your editor, replace the following text with their corresponded text:

- `https://files.catbox.moe/gt6un3.woff` to `Route159-Regular.woff`
- `https://files.catbox.moe/outwck.woff` to `Route159-Bold.woff`

Save the file, and your fonts should start working!

> [Discuss on HN](https://news.ycombinator.com/item?id=31943679) | [Tweet this post](https://ctt.ac/8R3cd) |
> Have questions or feedback? [Email me](mailto:mail@dht.anonaddy.me)

<hr>

If you feel like the screenshot is from 2010 or something, then it's because I don't do image editing that well. This is my very first times using Krita and GIMP, so the quality isn't that good :)
Check if named slot exists in your page with Vue.js
Tags: vue, javascript
Published: 2022-07-01 11:50:38

In the Composition API we have the runtime function `useSlots()` that can be used to check if our slot exist or not, to do that we need to import it from Vue and check the existence of slot directly in template.

```javascript
<template>
    <div>
        <nav
            v-if="slots.myNamedSlot"
        >
            <slot name="myNamedSlot" />
        </nav>
    </div>
</template>

<script setup>
import { useSlots } from 'vue'

// this const will be avaiable on template
const slots = useSlots()
</script>

<style>
</style>
```

**Attention:** slots elements are dynamic and not reactive, so we need to check them directly in template.

That's it!

**See'ya!**