teleren/devto huggingface dataset:
Don't Memorize What You Can Google!
Tags: beginners, productivity, discuss, codenewbie
Published: 2022-04-09 13:51:09

This is something that might seem weird for beginners, yet is something that every beginner should know if they want to save their time and frustration.

What do I mean by "Don't Memorize What You Can Google"?
Simply: Memorize core concepts and functions that are essential for working with your programming language or framework, but don't memorize random functions, code snippets and concepts that you will rarely use! Instead, take advantage of external resources(forums, blogs, notes, books, documentations...) for those things when they are needed.

Don't memorize things that take 1 minute to find through google like:
![Googling](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xehm1mu6bc6rkgg7wp6r.gif)

## Why This is Important for Beginners
I've seen beginner programmers memorize random things about a language or framework because they thought that memorizing more will make them more competent since they will be faster since they'd be able to code without using google often.
![Yes but no](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9w0m10nvmf58e7eryx3b.png) 
Yes you will code a bit faster, but this approach will backfire sooner or later. See, this approach might make you faster for a bit of time, but it will bring 3 major downsides in the long run:
1. The first downside is **brain cluttering**. Trying to clutter your brain with random info that is rarely used is as dumb as it sounds. Instead, you should memorize core concepts, functions and code snippets that you use often.
2. The second downside is a **steeper learning curve**. If the way you learn a new language or framework is by memorizing a ton of different, mostly irrelevant things, you will have a hard time every time you try to learn something new.
3. The last downside is **frustration**. You will likely get frustrated if you can't remember something and when this happens too much, you can turn your programming life into a living hell.

Instead, you should memorize only what is essential for working with your language or framework. For example, if you're working with PHP, you should memorize how to use "GET" and "POST". Or, if you're working with data science in Python, you should memorize how to load a dataset through pandas. You get the idea. Don't worry about the non-essentials.

##In Conclusion
Your brain's "storage" is precious and limited. Don't fill it with random code snippets, functions and concepts.

See you next time👋
Bulk delete stored npm packages from Azure Artifacts
Tags: azure, devops, azureartifacts, powershell
Published: 2022-04-09 13:32:26

At my work we used to store our npm packages in an Azure Artifacts feed. We realized this was no longer necessary since we didn't publish our own custom packages anymore. Plus, over time all the different versions of the stored npm packages were taking up a large amount of space, close to 3GB in our cloud instance.

Using the Azure DevOps REST API, I came up with a Powershell script that will bulk delete all npm packages from an Azure Artifacts feed. You will need to generate a PAT (Personal Access Token) with full privileges regarding packages and paste it into the script code. The organization name and feed id also needs to be added.

If there is a large amount of packages with accompanying versions, the script will need to run multiple times. There is a limit to the number of stored package versions that can be retrieved at one time.

The way the script works is it retrieves all the versions of the stored npm packages, loops through the versions and deletes them. In order to delete any package in Azure Artifacts, be it npm or NuGet, you have to delete the specific package version. The script can be modified in case you want to only delete certain versions of packages by changing the url that retrieves the package versions.

Here is the script. Run it on your local machine.

```
<# Azure DevOps REST API #>
$url1 = 'https://feeds.dev.azure.com/{organization}/_apis/packaging/Feeds/{feed_id}/packages?protocolType=npm&includeAllVersions=true&api-version=7.1-preview.1'

$Token = '{Personal_Access_Token}'

if ($Token -eq "") {
    Write-Host 'PAT not set'
    exit 1
}
$AzureAuthHeader1 = [Convert]::ToBase64String([Text.Encoding]::ASCII.GetBytes(("{0}:{1}" -f "", $Token)))

$headers1 = New-Object "System.Collections.Generic.Dictionary[[String],[String]]"
$headers1.Add("Authorization", ("Basic {0}" -f $AzureAuthHeader1))
$headers1.Add("Content-Type", "application/json")

$response1 = Invoke-RestMethod -Uri $url1 -Method GET -Headers $headers1

$packages = $response1.value

<# Loops through returned npm package versions and deletes them #>
Foreach ($i in $packages)
{
    $packageName = $i.name
    Write-Host $i.name -BackgroundColor cyan
    $allversions = $i.versions
    Foreach ($v in $allversions) {
        $packageVersion = $v.version
        $url2 = 'https://pkgs.dev.azure.com/{organization}/_apis/packaging/feeds/{feed_id}/npm/{0}/versions/{1}?api-version=7.1-preview.1' -f $packageName, $packageVersion
        $AzureAuthHeader2 = [Convert]::ToBase64String([Text.Encoding]::ASCII.GetBytes(("{0}:{1}" -f "", $Token)))

        $headers2 = New-Object "System.Collections.Generic.Dictionary[[String],[String]]"
        $headers2.Add("Authorization", ("Basic {0}" -f $AzureAuthHeader2))
        $headers2.Add("Content-Type", "application/json")

        $response2 = Invoke-RestMethod -Uri $url2 -Method DELETE -Headers $headers2
        Write-Host 'deleted' + $response2.value
    }
}
```
The [GitHub Gist link](https://gist.github.com/mdailey77/adaf4c7acf24836a9f2c3a3346a9a4da).
QR Code Generator by HTML CSS and JavaScript
Tags: javascript, html, css, beginners
Published: 2022-04-09 13:42:29

Hi Guys.In this post I will show you how to make QR code generator by HTML CSS and JavaScript.
[Output](https://nlsuet.mimo.run/index.html
)👇

![A pie chart showing 40% responded "Yes", 50% responded "No" and 10% responded "Not sure"](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3qrc17l87bcd39jqpxo2.jpg)
## HTML

```
<body>
  <h1>QR Code Generator</h1>
  <input 
    type="text" 
    spellcheck="false"
    id="text"
    value="https://google.com"
  />
  <div id="qrcode"></div>
</body>
```

## CSS

```
* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
  }
  
  body {
      width: 80%;
      height: 30vh;
      margin: auto;
      display: grid;
      place-items: center;
  }
  
  h1 {
      font-family: sans-serif;
  }
  
  input {
      padding: 10px;
      border-radius: 20px;
      border: 2px solid steelblue;
      font-size: 1.5rem;
      letter-spacing: 2px;
      outline: none;
  }
  
```
JavaScript

```
<script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
  <script type="text/javascript">

  const qrcode = document.getElementById("qrcode");
  const textInput = document.getElementById("text");
  
  const qr = new QRCode(qrcode);
  qr.makeCode(textInput.value.trim());
  
  textInput.oninput = (e) => {
    qr.makeCode(e.target.value.trim());
  };
  
```

![A pie chart showing 40% responded "Yes", 50% responded "No" and 10% responded "Not sure"
](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a1tqmhhjwm8swqwy0990.jpg)
For Example I used my twitter account link . It shows like this.
Output 👇

![A pie chart showing 40% responded "Yes", 50% responded "No" and 10% responded "Not sure"
](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l8h9t85xcz7sa3dtfnxj.jpg)
Thanks for reading my post please like share.
New Web 3 Landing Page
Tags: webdev, javascript, nextjs, web3
Published: 2022-04-09 13:42:21

Hey guys I have just added new Template to [DEV.UI](https://dev-ui.vercel.app/)
Check out this [New landing Page](https://dev-ui.vercel.app/templates/nftlandingpage)

[Github Link](https://github.com/kumard3/dev-ui-templates/tree/main/template-6)
[Deployed Link](https://circle-chain-web3.pages.dev/)
[PT-BR] Extras do Hero Animation no Flutter
Tags: flutter, mobile, animation, dart
Published: 2022-04-09 13:38:54

Olá amigos, vocês sabiam que podemos aplicar um widget durante a transição do Hero animation no Flutter ?
É isto que vamos ver aqui hoje, olha como fica:

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

O primeiro passo é dar uma olhada na primeira parte do tutorial, para que conheça o Hero Animation e possa fazer o projeto, pois é a partir dele que vamos avançar.
É bem rápido e pratico, leva alguns minutos.

Link: [[PT-BR] Utilizar Hero Animation no Flutter](https://dev.to/leonardos_dev/pt-br-utilizar-hero-animation-no-flutter-202g)

Ok, agora que já fez isto vamos avançar.
Nosso primeiro passo é baixar o Gif do nosso querido Dash, aqui:

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

Depois de baixar, vamos ao arquivo **"pubspec.yaml"** e liberar o acesso aos **assets**. Ficará assim:

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

Agora na **Raiz** do projeto vamos criar a pasta **assets** e mover o ficheiro **gif** lá para dentro. Ficará assim:

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

Agora vamos importar um packge para auxiliar o uso do Gif.
[Gif_view](https://pub.dev/packages/gif_view)
Agora basta adicionar ao projeto, assim:

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

_Você pode precisar reiniciar o projeto para que o ficheiro seja reconhecido._ 

Ok, a configuração está feita, vamos aos códigos.

No arquivo **main.dart** vamos até o nosso segundo _ElevatedButton_ para ter acesso a nossa _Hero Animation_.
Dentro do Widget Hero, nos vamos usar a função chamada **flightShuttleBuilder** que vai nos permitir colocar um Widget para ser exibido durante a transição da animação.

Ficara assim:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/63krnpjn73v1wijh6x0l.png)
 
_No arquivo **page2.dart** no Widget **FlutterLogo** defina o size para 50 para visualizar melhor._


Agora está quase pronto. Para que consiga visualizar melhor a animação e se tudo funciona bem, vamos até a função **_nextPageSlow** e definir o _transitionDuration_ para _5000 milliseconds_, assim vamos visualizar melhor.

Abaixo o repositório para estudo mais aprofundado do funcionamento do Hero: 
[Link](https://github.com/DevLSerrano/flutter_hero_animation)

Agradeço sua leitura, espero que tenha gostado. 🤩
Create An Online Food Store Website Using Angular, NodeJS, Express, And MongoDB, Lesson 3
Tags: angular, node, mongodb, webdev
Published: 2022-04-09 13:38:41

## Lesson 3 is published
[Check out the video](https://youtu.be/mZdNkA9o7cY) if you love to build an e-commerce website using Angular, NodeJS, Express, And Mongo DB
##Start from here if you didn't:
{% link https://dev.to/nasirjd/create-an-online-food-store-website-using-angular-nodejs-express-and-mongodb-52gd %}

## You Are Going To:
1. Create project's folder
2. Install @angular/cli
3. Create App as frontend

**The only requirement** for this course is the basic knowledge of Web Development.

Feel free to join our youtube community for having a productive relationship.

Happy Coding...
Crash Boom Bang: PoE & Lightning Strikes
Tags: homeassistant, networking, zigbee
Published: 2022-04-09 14:25:07

---
title: Crash Boom Bang: PoE & Lightning Strikes
published: true
date: 2022-04-09 13:00:00 UTC
tags: homeassistant,networking,zigbee
canonical_url: https://beanbag.technicalissues.us/crash-boom-bang/
---

A couple of days ago there was a severe storm that rolled through my area. Lots of thunder that literally rattled the walls of my house, lightning strikes near by, and high winds. At one point the power blinked out too. No big deal… or at least it wasn’t after I realized what was going on. The mystery I am referring to is that when the storm finished I realized my [PoE Zigbee Coordinator](https://www.tubeszb.com/product/cc2652_poe_coordinator/21?cp=true&sa=false&sbp=false&q=false&category_id=2) wasn’t back up and running.

At first, it seemed that it had somehow gotten zapped (aka hit by a power surge). Upon digging a little more into the device I found that I could power it via a USB cable. Interestingly, that not only made the device boot up, but also made the ethernet connection work again. This seemed odd because I’d think that anything that fried the PoE aspect of it would have fried the entire ethernet board. With that in mind, I started poking around on my UniFi switch and noticed that there was a power setting for the port that said “off” where the others said “PoE+.” I removed the usb power cord from the coordinator, crossed my fingers, and toggled the setting back to “PoE+.” Amazingly, all was well!

The really odd part to me was that my UniFi access points that are also powered by the same switch were fine. My best guess as to what happened is that the antenna on the coordinator attracted some of the electricity in the air from the nearby lightning strike and the switch protected itself (this is a total guess though). Regardless of how it happened, I know two things now that I didn’t before finding this setting:

- all my equipment survived the storm
- if ever I have another device that won’t power up that was working via PoE, I should check this setting

Here’s hoping I don’t have a reason to need to remember this anytime soon!

## Just in case…

Going on the assumption that my theory of what happened is even remotely possible, I am seriously thinking about getting a [Ethernet Surge Protector](https://store.ui.com/collections/operator-accessories/products/ethernet-surge-protector) from UniFi to put in-line between my coordinator and the switch. They are only $12.50 and seem well worth it. The catch is that I am going to have to have a drain wire installed so that there is a place for any absorbed surge to go. I already have plans to have a contractor I know out soon to do some other work so I will ask him about doing this too. If it isn’t cost prohibitive I am going to move forward with the extra protection of my equipment.
Configuration Hot-Reloading nedir?
Tags: cloud, cloudnative, microservices, webdev
Published: 2022-04-09 12:50:31

  Merhaba, bu yazımda cloud-native web uygulamalarında konfigürasyon yönetiminde kullanılan **configuration hot-reloading** konseptinden bahsedeceğim. Ufaktan başlayalım.

  Öncelikle geleneksel web servislerinde konfigürasyonların nasıl yönetildiğine bakalım. Genelde servis ayağa kalkarken dışarıdaki bir kaynaktan önceden tanımlanmış tüm değerleri alır. Bu kaynak bir environment dosyası, bir configuration manager veya direkt üzerinde çalıştığı işletim sistemi de olabilir. Devamında uygulamamız aldığı değerlerle uygulamada gerekli olan işlemleri yapar ve çalışmaya başlar. Restart atılana kadar konfigürasyon değişiklikleri ile ilgilenmez. 

Peki bu sistemde anlık olarak değişiklikleri izleyerek veya dışarıdan tetiklenerek konfigürasyon değiştirme ihtiyacımız neden olsun ?
- Bir çok sebebi olabilir ancak en yaygın olanından bahsetmek gerekirse **loglama**. Sunucunuzda çalışan tüm testlerden geçmiş, sorunsuzca çalıştığına inandığınız bir uygulama düşünün. Bir gün aniden anlam veremediğiniz bir sebepten dolayı istediğimiz gibi çalışmamaya başlıyor. Restart attığınızda ise tekrar çalışır hale geliyor. İlk işiniz logları okumak oluyor ancak loglarda problem görünmüyor çünkü loglama seviyenizden dolayı o an neler olduğuna dair yeterince detay bulamıyorsunuz. Bu büyük bir sistemde oldukça tehlikeli bir durumdur. Pimi çekilmiş bomba gibi gezen bir servisiniz var, her an bozulup diğer servisleri dolayısıyla production ortamını tehlikeye atabilir. 

Bunun gibi nadiren karşılaştığınız hatalarda production ortamında mevcut state'i koruyarak yani restart atmadan debugging yapma ihtiyacınız olur. İşte bu anlarda uygulamayı kapatmadan loglama seviyenizi değiştirmek yani hot-reloading için yardımımıza bu pattern yetişiyor.

Aşağıdaki basit web-server uygulamasında bu yapının nasıl çalıştığını görebilirsiniz.

![Configuration Hot-Reloading](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kihettcgf92l75rfqf94.gif)

Örnek uygulamanın kodlarına [buradan](https://github.com/msrexe/configuration-hot-reload) ulaşabilirsiniz. Başka bir yazıda görüşmek üzere...

Kaynak: Justin Garrison, Kris Nova - Cloud Native Infrastructure Patterns for Scalable Infrastructure and Applications in a Dynamic Environment
How Much Water Should You Drink?
Tags: codepen
Published: 2022-04-09 12:48:11

<p>My wife printed out a page off the Goodhousekeeping web site on how to calculate how much water you should drink daily.
I thought it would be handy to have a web 'widget' to make the task easy.
Here it is.</p>

{% codepen https://codepen.io/harunpehlivan/pen/vYpjwaw %}
PHP Realtime Chat Template
Tags: php, realtimechat, c4rl3, tutorial
Published: 2022-04-09 12:44:09

[https://github.com/carleii/Realtime-Chat-app-With-PHP](https://github.com/carleii/Realtime-Chat-app-With-PHP)
i wish there were tons of contributors on this project . I laid the foundation together let's do something Phew. in the meantime follow me 💓💓
Book Club: "Test Driven Development: By Example" #3
Tags: books, tdd, discuss
Published: 2022-04-09 11:35:53

---
title: Book Club: "Test Driven Development: By Example" #3
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
---

## Chapter 3: Equality for All

This chapter introduces the Value Object pattern. Value Objects,
- return a new object from operations
- implement `equals`

This pattern is useful for avoiding _aliasing_, e.g. if you set a number's value to some integer, and set another numbers value to the other _number_ rather than it's own integer. This reminded me of spreadsheet references, which I think makes for a nice visual representation of **aliasing**.

![Spreadsheet showing the number of cats in cell B1 as 5, and the number of dogs in cell B2 as the formula `=B1`](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kmtgfdibunpg2gywbp20.png)<sup>The number of dogs in B2 is _whatever value_ is put in B1. If I change the number of cats to 6, uhoh! I would find myself with 6 dogs as well.</sup>

Beck also talks about **Triangulation**, a TDD approach based on the process in mathematics for determining the location of a point. This is nice and robust way of ensuring your test covers the desired behaviour!
0. positive example behaviour: up is up.
0. negative example behaviour: up is not down.
0. generalise equality: up↑ is the same direction as up↑. 

Beck says,
> I use it only when I am completely unsure of how to refactor ... Triangulation provides a chance to think about the problem from a slightly different direction. What axes of variability are you trying to support in your design?

Sometimes this approach would be overkill - but it's a helpful thinking pattern to build clarity.

🔎 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.
Create An Online Food Store Website Using Angular, NodeJS, Express And MongoDB, Lesson 1 & 2
Tags: angular, node, mongodb, typescript
Published: 2022-04-09 12:22:00

## Lesson 1 & 2 are published
[Check out the video](https://youtu.be/Gv7OK1Kg4cw) if you love to build an e-commerce website using Angular, NodeJS, Express, And Mongo DB

By the end of this course, you will be able to design a beautiful and responsive frontend and a scalable backend, you can also deploy your website on popular cloud servers and have online payment functionality using payment gateways.

**The only requirement** for this course is the basic knowledge of Web Development.

### You Will Learn: 
[x] Creating object-oriented components Using Angular CLI
[x] Defining APIs using Express router
[x] Having different pages using Angular router
[x] Using Mongo Db Atlas for storing and querying the data
[x] Using Reactive Forms And Http Client for handling form inputs and send the data back and forth to the  APIs
[x] Managing application states using RXJS
[x] Handling authentication and authorization using    JsonWebToken 
[x] Also, you will learn how to deploy it on cloud servers like Heroku and using the Paypal gateway to have payment functionality on your website.
[x] Much More In Details

Feel free to join our youtube community for having a productive relationship.


Happy Coding...
Curso de Angular + Spring Boot
Tags: java, webdev, tutorial, angular
Published: 2022-04-09 11:35:27



Neste tutorial aprenda como criar uma aplicação Angular que utiliza um API Java com Spring Boot.


# 01 - COMO INSTALAR O ANGULAR NO LINUX
{% embed https://www.youtube.com/embed/G9mzNoqJJgw %}


# 02 - Angular Como criar um projeto gerenciador de Tarefas
{% embed https://www.youtube.com/embed/lWrjC83G7yI %}

# 03 - Minha aplicação Angular no Docker
{% embed https://www.youtube.com/embed/m34C6Hz0qF4 %}

# 04 - Como fazer o deploy de aplicação Angular na AWS
{% embed https://www.youtube.com/embed/KdOAX3pd9jE %}

# 05 - Github e Angular Como fazer o deploy de projeto Angular no Heroku e github
{% embed https://www.youtube.com/embed/bCS1hNdjiWY %}

# 06 - Projeto angular utilizando API Java com spring boot
{% embed https://www.youtube.com/embed/svv5MlMjupY %}

# 07 - Angular Upload de arquivos
{% embed https://www.youtube.com/embed/V_2ojYEr2pk %}
How I started My Open-Source contribution Journey.
Tags: webdev, frontend, javascript, opensource
Published: 2022-04-09 11:24:32

## first contribution..
 I still remember my fist issue and first pull request in one of my friends project [resumegen](https://github.com/jigar-sable/resumegen) it was a react project but I'm not familiar with react that time. So I just create a Readme.md file for that project😅. and I think that why he will merged my pull request even I don't did anything just create a Readme.md file and write some information about his project only 20 line of markdown I contribute in that project because I was curious about contributing in open-source project I did my first pull request and after a day my pull request was merged by the owner of the project.. 

And that's how I started contributing in open-source projects and then after a month I get to know that there is an open-source program is organized by Girl Script Summer of code it was a 3 month long program in which we have to choose any project according to our interest and contribute to them and I join the program I was selected as an open-source contributor I have contributed in many frontEnd projects and still contributing it was a great experience 

I highly suggest to beginner developers to contribute in open-source projects it gives you an idea of real world programming how to understand others code and many more 

Wish you a good day❤️