teleren/devto huggingface dataset:
6 VS Code Plugins Every Developer Needs!
Tags: tooling, webdev, beginners, vscode
Published: 2021-12-14 14:43:49

The best thing about [Visual Studio Code](https://code.visualstudio.com/) is that you can customise it to suit you and your code style - but there are some plugins that you simply must have!

## 1. [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)
This is the most important plugin! [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) will format your code every time you save your file (although you can customise that). You can also customise the config if you have specific formatting preferences.

## 2. [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)
If you write **JavaScript**, this is the second most important plugin. It combines well with [prettier](https://prettier.io/) allows you to setup a config to lint your **JavaScript** and keep the code clean. Especially good on shared codebases to keep everyone aligned.

## 3. [Better Comments](https://marketplace.visualstudio.com/items?itemName=aaron-bond.better-comments)
This plugin lets you set up different types of comments and format them differently within your code. This is a brilliant when looking for a specific type of comment as they will stand out in the code.

## 4. [GitLens](https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens)
If you're using [git](https://git-scm.com/downloads) - then [GitLens](https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens) is a really nice plugin to give you more Git functionaly directly inside [Visual Studio Code](https://code.visualstudio.com/).

## 5. [Live Share](https://visualstudio.microsoft.com/services/live-share/)
For remote or hybrid workers, live share will let you virtually pair programme with someone on your team. The beauty of this tool is that you can see what the other person is doing but also lets you code in separate files so you can collaborate in multiple different ways.

## 6. [Setting Sync](https://marketplace.visualstudio.com/items?itemName=Shan.code-settings-sync)
This is a great plugin if you code on different devices. It allows you to save and sync your settings so you don't have to find all your plugins every time. Also a good idea if you're about to move to a new device.

## 7. Themes
Lastly, get yourself a nice theme! There are thousands out there so pick something that works best for you and is easy on the eyes. Well if you ask me I would suggested to install [Shades of Purple by Ahmad Awais](https://marketplace.visualstudio.com/items?itemName=ahmadawais.shades-of-purple)
Copy Text From Input To Clipboard Javascript With Bootstrap 5
Tags: bootstrap, css, html, javascript
Published: 2021-12-14 14:36:30

Click button Copy text from the input is mostly used in websites. So here we made a simple UI for this element using Bootstrap 5 and components.

Also Read:- [Bulma Responsive Pricing Table](https://w3hubs.com/bulma-responsive-pricing-table/)

In this element, we used the javascript execCommand method for copying input text using ID. To look into grouping UI we used input group form components with input ID. This is a responsive modal for mobile and tablet views.

Make it yours now by using it, downloading it, and please share it. we will design more elements for you.

[Source code](https://w3hubs.com/copy-text-from-input-to-clipboard-javascript-with-bootstrap-5/)
Custom Video Player
Tags: webdev, html, css, javascript
Published: 2021-12-14 14:28:48

How to create Custom Video Player with Javascript. You can add other features with the following source code.

###[Source Code](https://github.com/enesskilic/javascript-projects)

![Preview](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d8njlouu0et38r3igpil.png)
Being lazy with PowerShell
Tags: powershell, blog
Published: 2021-12-14 14:24:14

So this is a brief introduction to give some context to some posts that I want to make. I'm putting this as a its own post so I can focus on the code and solution on the next ones.

## The problem
Currently I'm working on a project with several different repos and I need to switch between them constantly. Everything works well, the repos are on my `c:\src` folder, so navigate to them using regular methods (`cd /src/repo-name-here`) with a fair share of tab auto-complete is not a huge problem. But I've decide to try and make it as simple as possible, firstly because simplicity is good, second because I like the challenge and it's a good excuse to train my (fairly weak I must admit) pwsh muscles.

My idea is to be able to go to the desired folder as fast as possible regardless of where I'm on my system. Ideally having a function called `repo1` that is a very simple script that will `cd` me to the right folder. I can surely do that by hand, create one function for each repo on my profile file and call it a day, but that's not fun :D (and doesn't scale well), so I want to create those functions programmatically (that goal may change on the future, let's see).

## What's next
The idea is to do some research and incrementally enhance my solutions and I'll create new posts with my findings. I wanted to make a huge post with the whole exploration, but that would just take a long time to get done and I'd probably never finish it (:stares at the list of drafts on the dashboard:), so I've decided to try and make a series of posts and see how it goes.

See you on the next post.

P.S.:
For sure the problem is pretty simple and the solutions will probably be over-engineered, but that's the fun of this kind of exercise :D.
Cara mengirim pesan whatsapp yang berisi Tombol via API dengan PHP cURL
Tags: whatsapp, whatsappapi, php, curl
Published: 2021-12-14 14:01:00

Baru-baru ini whatsapp merilis pesan yang dapat berisi tombol, selain tombol juga terdapat header dan footer pada pesan tersebut, sehingga menambah kesan bahwa pesan tersebut resmi, dan customer tidak perlu repot mengetik pesan dari menu, cukup klik tombol yang telah disediakan pada pesan tersebut.

Menurut aku ini sangat berguna sekali dalam membuat pesan Auto Reply yang sudah pasti customer tidak akan salah mengirim pesan karena hanya klik tombol yang sudah disediakan.

Namun pada artikel kali ini akan membahas tentang mengirim pesan yang berisi tombol via API.

1. Pastikan kamu sudah memiliki device aktif dan API KEY yang akan digunakan sebagai Authorization.

2. Buatlah file index.php untuk meletakkan seluruh kode. Salin kode berikut ini kedalam file index.php
{% codepen https://codepen.io/alatwa/pen/oNeLyWN %}

3. Buat file **button_action.php**
File button_action.php digunakan untuk menerima form dari index.php kemudian mengirim ke alatwa.com dengan cURL.
Salin kode berikut ini kedalam file button_action.php

```
<?php

$url = 'https://app.alatwa.com/api/send/message/button';
$header = array(
    'Content-Type: application/json',
    'Authorization: API KEY',
);
$params = [
    'device' => 'Your Device',
    'type' => $_POST['type'],
    'phone' => $_POST['phone'],
    'message_header' => $_POST['message_header'],
    'message' => $_POST['message'],
    'message_footer' => $_POST['message_footer'],
    'button_1' => $_POST['button_1'],
    'button_2' => $_POST['button_2'],
    'button_3' => $_POST['button_3'],
];
$params_post = json_encode($params, JSON_PRETTY_PRINT);
$post = curl_init($url);
curl_setopt($post, CURLOPT_HTTPHEADER, $header);
curl_setopt($post, CURLOPT_POSTFIELDS, $params_post);
curl_setopt($post, CURLOPT_RETURNTRANSFER, true);
$response = curl_exec($post);
curl_close($post);
echo $response;
```
- Ganti API KEY dengan API KEY yang kamu miliki
- Ganti Your device dengan nama device kamu yang aktif dan status connected

Response OK

```
{
    "status": "OK",
    "message_id": "3EB0582ED23A147BA19F",
    "from": "6285157757217",
    "to": "6285772897870"
}
```

#### Selesai

> Gunakan kode negara saat mengisi bagian phone.
Contoh: 085157757217 menjadi 6285157757217
Untuk mendapatkan API KEY, daftar terlebih dahulu pada halaman berikut ini https://app.alatwa.com/register

Selengkapnya kunjungi [alatwa.com](https://alatwa.com/)
Breaking Changes tl;dr 3: “The ACCESS Act of 2021, Part 2”
Tags: podcast, news, api
Published: 2021-12-14 13:57:24

{% spotify spotify:episode:3fYVEVuzgIq1GiWEXeV3rf %}

In this Breaking Changes tl;dr mini-episode, Postman Chief Evangelist Kin Lane welcomes  Mark to discuss the Augmenting Compatibility and Competition by Enabling Service Switching (ACCESS) Act of 2021 moving through the United States Congress.

**Host:** Kin Lane, Chief Evangelist at Postman ([Linkedin](https://www.linkedin.com/in/kinlane/), [Twitter](https://twitter.com/kinlane))

**Speaker:**: Mark Nottingham, Co-chair, IETF HTTP Working Group ([Linkedin](https://www.linkedin.com/in/mnot/), [Twitter](https://twitter.com/mnot))

Mark Nottingham has helped to define and develop the internet since the late 1990s. He has written, edited, or substantially contributed to more than thirty IETF RFCs and W3C recommendations about topics like HTTP, caching, linking, web architecture, privacy, and security.

You can [follow Breaking Changes](https://dev.to/breakingchanges) to get episode notifications and listen right in your feed — or subscribe on your platform of choice! 



- 
[Youtube ](https://www.youtube.com/playlist?list=PLM-7VG-sgbtA5ywMlGAYlPo_PYy6vdJ4O)

- 
[Spotify](https://open.spotify.com/show/5ig80ZlBLiC2iXxql0s1q2)

- 
[Apple Podcasts](https://podcasts.apple.com/us/podcast/breaking-changes/id1574147652) 

- 
[Google Podcast](https://podcasts.google.com/feed/aHR0cHM6Ly9mZWVkLnBvZGJlYW4uY29tL2JyZWFraW5nY2hhbmdlcy9mZWVkLnhtbA==)

- 
[Amazon Music ](https://music.amazon.com/podcasts/ea40d8b4-8cbb-4061-b618-794c3bbbbd42/breaking-changes)

- 
[RSS Feed](https://www.google.com/url?q=https://feed.podbean.com/breakingchanges/feed.xml&sa=D&source=docs&ust=1638470528888000&usg=AOvVaw0el4gQ5fXUW4tCFuvVOxQL)

Watch the full episode here:

{% youtube xG29rWjqQVM %}

PS: We’re new here and excited to be part of the community.  Hit ⭐️ or show :heart: if you like an episode and leave your thoughts in the comments below.
IT infrastructure monitoring: will your IT infrastructure survive the holiday season?
Tags: monitoring, performance, devops
Published: 2021-12-14 13:50:41

At the end of the year, companies worldwide start to prepare the corporate IT infrastructures for intensive traffic and unstable loads. It's the time when corporations, especially e-commerce, wholesale and retail industries, make most of their annual revenue in just a few weeks. But, the risks of being hit with a software outage increase equally, no matter what industry your business belongs to.
  
Don’t see risks of software downtime? Trust your provider? Well, as we saw in December 2021, even AWS was hit with an outage that took down some websites and services such as Disney+, Slack, Alexa, etc. In a matter of minutes, Amazon’s warehouse and delivery operations reported on Reddit that the issue became nationwide. Reddit news: https://www.reddit.com/.../so_apparently_amazon_is_down.../

We have prepared useful tips and recommendations that can help your IT infrastructure handle traffic increases, avoid software downtimes, and prevent you from losing revenue during the holiday season. 

Top 10 holiday-proof tips to keep IT infrastructure up while holidays:

1. Monitor business-critical metrics with a proper threshold. Choose the proper framework for IT infrastructure monitoring and alerting. 
2. Get actionable insights. Don’t work with raw data but get the most out of it to know what steps should be taken, especially under the pressure of intensive traffic. 
3. Streamline alerting. Ensure your alerts matter to not waste time on fake occasions, e.g. when someone accidentally hits the load balancer with faulty requests.
4. Ensure that your service is ready to handle more loads through auto-scaling. Check that the autoscale policy is configured and working.
5. Ensure that your storage & disks have enough free space. Don’t rely on luck but always have an extra amount of resources available.
6. Perform synthetic monitoring for your websites and APIs. It’s better to benchmark web services through emulation than real and unpredictable traffic loads.
7. Decide a “plan B” workflow in the case of third-party services getting down. Be circumspect since even the most widely used platforms may fail. 
8. Identify on-call workflow and engineers for weekends and holidays. It’s not a manager’s preference, it’s a necessity.
9. Keep software up-to-date. Apply updates, patches, and hotfixes in advance to avoid a bug causing downtime.
10. Enhance IT security. The holiday season (in fact, all seasons) isn't the right time to experience data breaches, leakage, or get contaminated pieces of data from the Internet.

Take care of your IT infrastructures! 

Provided by InsightCat https://insightcat.com/
Working Across Time Zones - International Software Teams
Published: 2021-12-14 13:49:45

{% youtube 0OpHX7VtfRM %}
Let's talk about working across borders and time zones. Adrian, our Front End Developer, presents: 

🟣 Example of global software development project
🟣 Working across borders and time zones
🟣 What challenges do global software teams have to face?
🟣 Handy tools and life hacks
🟣 Communication in global teams and software companies
🟣 Why do companies work with international software teams?
🟣 Advice for team members working with global projects
🟣 What does the work look like in a remote team?

Enjoy, you can read the article at [Frontend House](https://frontendhouse.com/experts-zone/working-across-time-zones-international-software-teams-experts-zone-talks-14)
Ghostwriting Proficiency | GhostwritingProficiency
Tags: writing
Published: 2021-12-14 13:49:24

Ensuring promising outcomes, Ghostwriting Proficiency has proven to be excelling not only with their writing expertise but also with affordable rates and pricing. They work hard through dedication to make sure that the fictional books written are read all around the world. Customer's satisfaction is surely their priority. Through their excellent writing capabilities, they make sure to create an emotional bond with the reader.  

## The Writers Are Competent to Acquire Leading Positions

It is a fact that the excellence of [Ghostwriting Proficiency](https://www.ghostwritingproficiency.com/) services is because of their talented and skilled professional fiction ghostwriters. They have chosen some of the most amazing authors from every corner of the world on a single platform to have written promising content. They invest their time and devotion to bring out quality content to let their customers excel with leading positions. 

## Versatility in Writing Style

Versatility is a feature that sets the Ghostwriting Proficiency apart from other fictional ghostwriters. They are masters to dig out their customer’s minds and write as per their thoughts and ideas all with versatility. The fictional ghostwriters are thriving towards creative content that is no doubt captivating for the reader. 

## A Most Convenient Service So Far

The fictional ghostwriting service is the most convenient service of the Ghostwriting Proficiency. no matter your content is a short story or a huge novel consisting of multiple volumes, the whole process is simple and fully accomplished. 

## Customers Are Given Priority

As Ghostwriting Proficiency, fictional ghostwriters are there to fulfill your needs. As per your ideas and thoughts, you will be shared a draft of the plot and a project brief. Upon your satisfaction and approval, the work will be started. In case you need an amendment that will b also accompanied.
Making a rain animation with WebGL shaders in Three.js.
Tags: webdev, programming, threejs, tutorial
Published: 2021-12-14 13:46:39

I made a small shader that resembles rain on a window. You can try it [here](https://rain-shader.nordicbeaver.io/).

Check out the full code here:
{% github NordicBeaver/rain-shader %}

The most interesting part is the fragment shader, where the magic happens. I tried to add some comments, so it's easier to read.

```glsl
in vec2 uvInterpolator;
uniform float u_time;
uniform sampler2D u_texture;

// Generate a random float from a single input and seed.
float Random11(float inputValue, float seed) {
  return fract(sin(inputValue * 345.456) * seed);
}

// Generate a random float from a 2d input and seed.
float Random21(vec2 inputValue, float seed) {
  return fract(sin(dot(inputValue, vec2(123.456, 43.12))) * seed);
}

// Generate drops as distortions, that can be applied to UV coordinates
vec2 Drops(vec2 uv, float seed) {
  // Randmply move everything
  float shiftY = Random11(0.5, seed);
  uv.y += shiftY;

  // Split UV spac into cells. Each cell will contain a drop.
  float cellsResolution = 10.0;
  uv *= cellsResolution;

  // Move each row randomly.
  float rowIndex = floor(uv.y);
  float shiftX = Random11(rowIndex, seed);
  uv.x += shiftX;

  vec2 cellIndex = floor(uv);
  vec2 cellUv = fract(uv);

  vec2 cellCenter = vec2(0.5);
  float distanceFromCenter = distance(cellUv, cellCenter);

  // We don't want to show every drop. So randomly remove some of them.
  float isDropShown = step(0.8, Random21(cellIndex, seed + 14244.324));

  // Decrease each drop intensity with time. Then make it appear again.
  float dropIntensity = 1.0 - fract(u_time * 0.1 + Random21(cellIndex, seed + 32132.432) * 2.0) * 2.0;
  dropIntensity = sign(dropIntensity) * abs(dropIntensity * dropIntensity * dropIntensity * dropIntensity);
  dropIntensity = clamp(dropIntensity, 0.0, 1.0);

  // We only need results from inside a specefec radius of a drop.
  float isInsideDrop = 1.0 - step(0.1, distanceFromCenter);

  vec2 vecToCenter = normalize(cellCenter - cellUv);

  // Drop value is a vector to the center that increases with distance form it.
  vec2 dropValue = vecToCenter * distanceFromCenter * distanceFromCenter * 40.0;

  vec2 drop = dropValue * isInsideDrop * isDropShown * dropIntensity;
  return drop;
}

void main() {
  vec2 uv = uvInterpolator;

  // Run the Drop function 10 times to create seemingly random pattern.
  vec2 drops = vec2(0.0);
  for(int i = 0; i < 10; i++) {
    drops += Drops(uv, 42424.43 + float(i) * 12313.432);
  }

  // Distort UV.
  uv += drops;

  // Sample the texture after distorting the UV space.
  vec4 color = texture2D(u_texture, uv);

  gl_FragColor = color;
}
```

Basically, all I do is generate drops at random positions. For every pixel around the drop I then calculate how much I need to distort the background. And then I apply the distortion to the UV space and sample the texture with the updated coordinates.

It's way easier to explain visually, so I made a video of the whole process of making this.

{% youtube Rl3clbrsI40 %}
Jest e Redis (problema de testes unitários com cache do banco)
Tags: node, javascript, jest, redis
Published: 2021-12-14 13:44:47

Problema com testes unitários (Jest) e cache do banco (Redis)

Fala galera, vou comentar sobre um problema, relativamente simples de resolver, que tive fazendo testes unitários (usando Jest) e com cache do banco (usando Redis).

De forma bem resumida o problema era que em alguns momentos um determinado teste passava e em outros momentos não. E se eu testasse de forma isolada também passada.

![Erro, era esperado um array vazio para ‘companies’, mas estava sendo retornado valor.
](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rmh01ffkn9ls2fgd5mie.png)

De cara deduzi que fosse o cache do Redis, pois era a única coisa nova e diferente do que eu já estava acostumado a fazer.

Logo pensei em algumas possíveis soluções:

 1. Trocar a ordem em que os testes eram declarados, logo a ordem de execução também seria alterada e os testes com o cache só viria a ser executados por último (isso funcionou mas não resolveu o problema na raiz)
 2. Outra ideia veio do Led, que sugeriu alterar o CPF (que faz parte do payload do UseCase em questão a ser testado) para um diferente do que já havia sido utilizado nos testes anteriores (funcionou mas também não resolveu o problema na raiz)
 3. Pesquisar um pouco mais e entender porque isso estava acontecendo (resolver o problema na raiz rsrs)

Então dando uma pesquisada no pai Google encontrei mais sobre o assunto. Descobri que era necessário destruir/resetar todos os mocks antes que um próximo teste fosse iniciado.

A solução mais simples e direta foi fazer o uso do 'resetAllMocks' dentro de um 'beforeEach' :
```javascript
 describe(‘Check XPTO Use Case’, () => {
   beforeEach(() => {
     jest.resetAllMocks() // dessa forma aqui
   })
 
   it(‘should return ….’, async () => {
   // ...
   })
})
```
**Poderia ter sido também um 'afterEach', surtiria o mesmo efeito.*

Dessa forma tudo que havia sido salvo pelo Redis em cache num teste anterior não estaria mais disponível para o próximo teste, logo todos eles iriam rodar de forma "isolada" uns dos outros.

No final tudo deu certo:


![Sucesso em todos os testes, mesmo rodando várias vezes.
](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kdhswaf882yndjud2xtz.png)

*Uma observação, tentei usar 'jest.clearAllMocks()*' mas não funcionou e ainda não sei porque, em breve pesquiso mais e se souber faço outro post aqui.*

Links que encontrei sobre o assunto:

 - https://stackoverflow.com/questions/69869063/how-to-clean-up-reset-redis-mock-in-an-express-jest-test
 - https://jestjs.io/pt-BR/docs/jest-object#jestresetallmocks
responsive people grid using flexbox
Tags: codepen, responsive, grid, people
Published: 2021-12-14 13:40:14

<p>this is a responsive people grid using flexbox by using css and html.</p>

## CODEPEN LINK :
{% codepen https://codepen.io/Abhi7raj/pen/oNGBpBa %}

if you have any doubt please ask 
thankyou guys.
Day 90/100 Color Theory
Tags: 100daysofcode, css, design, motivation
Published: 2021-12-14 13:30:45

Every design must have a properly structured color system to be used on a project. Obtaining insight on a practical approach and putting more effort into bringing the ideal color system would eventually help select the suitable scheme.

![banner](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/37aff85fvsxmfq1p73z1.png)

## Best Practices

- **Use neon colors sparingly.**
While the use of neon colors can feel hip, they are often hard on a user’s eyes.

- **Avoid vibrating colors.** Vibrating colors result from
pairing two colors with high saturation together that may be
complementary to one another. It creates a glowing or moving effect, which also can be hard on one’s eyes.

- **Use backdrops to separate vibrating colors.**
In the example, the white backdrop behind the green card reduces the space where the contrasting colors (red and green) are directly next to each other, but the overall effect is still too intense for most websites.

- **Avoid color combinations with insufficient contrast**, including:

 - Bright colors on top of bright colors
 - Light colors on top of light colors
 - Dark colors on top of dark colors

- Even if there’s enough contrast in these pairings for the different colors to be legible, they likely won’t create enough contrast to attract the user’s attention.

## Summary

I'm almost done with the challenge, making this daily made me think of doing something opposite. For instance, I read an article about "I completely ignored the front end development scene for 6 months. It was fine". I think I'll do fine if I finished this one.

[![resource](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lnqikv0uaucjhxhs3x8d.png)](https://rachsmith.com/i-completely-ignored-the-front-end-development-scene-for-6-months/)