teleren/devto huggingface dataset:
Batch delete Docker images in a Azure Container Repository
Tags: docker, azure
Published: 2022-07-07 07:35:11

This is mostly a note to self and i no credit whatsoever to myself. Info collected mainly from this SO question, but i had some issues with the info there, mainly stuff caused by changes to Azure CLI and some code formatting issues.

https://stackoverflow.com/questions/41446962/how-to-delete-image-from-azure-container-registry

1. Login with Azure CLI, `az login`
2. Pick the correct subscription, `az account set -s your_id`
3. Then run this command. 

```
az acr repository show-tags -n YourRegistry --repository YourRepository | ConvertFrom-String | %{$_.P2 -replace "[`",]",""} | where {$_ -notin "4698a2ae296ed953890c1d61bfaf370deedfb29f" } | %{az acr repository delete -n YourRegistry --image YourRepository:$_ --yes}
```
Agora sim, o grande ganho do enum no Dart 2.17
Tags: dart, flutter, enum, news
Published: 2022-07-08 00:14:45


Como mencionado no [artigo anterior](https://kmartins.dev/enum-no-dart-215), não era possível declarar **membros** nos nossos `enums` e de certa forma vários `devs` ficavam chateados(as) e magoados(as) 😤

Mas para nossa alegria, isso finalmente mudou, fique tranquilo(a), você não leu errado, melhoria implementa e [issue](https://github.com/dart-lang/language/issues/158) fechada _(oiá até rimou 🤪)_.

Vai, bora dar aquele **refactor** em um código que está usando uma `extensions`!? Eu sei que você quer, então só vamos...

- Versão que causa certa tristeza ao olhar 🥲

```dart
enum Transport { car, truck, airplane, train, boat }

extension TransportExt on Transport {
  int getSpeed() {
    switch (this) {
      case Transport.car:
        return 65;
      case Transport.truck:
        return 55;
      case Transport.airplane:
        return 600;
      case Transport.train:
        return 70;
      case Transport.boat:
        return 22;
    }
  }
}
```

_Fique tranquilo, você ainda pode fazer assim_ 😮‍💨

- Versão que causa alegria ao olhar 😆

```dart
enum Transport {
  car(65),
  truck(55),
  airplane(600),
  train(70),
  boat(22);

  final int _speed;
  const Transport(this._speed);

  int getSpeed() => _speed;
}
```

Como algo "simples" pode deixar tanto(a) `dev` feliz não é mesmo 💁🏽‍♀️

Ei, calma que só melhora, há mais coisas que vão te dar uma "explosão" de felicidade 🥳

- Use com `generics`:

```dart
enum Transport<T extends num> {
  car<int>(65),
  truck<int>(55),
  airplane<double>(600.50),
  train<num>(70.25),
  boat(22); // A inferência do tipo também funciona ;)

  final T _speed;
  const Transport(this._speed);

  T getSpeed() => _speed;
}
```

- Adicione `mixins` e implemente `interfaces`:

```dart
mixin Speedometer {
  // int speed = 0; Se usado no enum, deve ser final  
  int get maxSpeed;
}

abstract class Validation {
 bool isValidSpeed(int speed);
}

enum Transport with Speedometer implements Validation {
  ...
  const Transport(this.maxSpeed);

  @override
  final int maxSpeed;

  @override
  bool isValidSpeed(int speed) => speed <= maxSpeed;
}
```

- Faça `Factory constructors`:

```dart
enum Transport {
  ...
  const Transport(this.speed);

  factory Transport.faster() => Transport.airplane;

  factory Transport.slower() => Transport.boat;
}
```

_Só não se esqueça, o `enum` continua sendo uma **constante**, você não pode **estender** dele, **sobrescrever** o `index`, `hashCode`, o operador `==` e nem se quer pensar em **declarar um membro** chamado `values`_ 😉

Sobre essa melhoria, deixo a seguinte frase do qual não sei o seu autor(a):
>_"Não existe começo perfeito, a evolução é um processo."_

**Reflitamos** 🤔

Se chegou até aqui, não fique acanhado(a), deixe aquele **like**, **compartilha** com os(as) `devs` e **me segue** nas redes sociais 🍻

_Esqueci ou errei algo? Não hesite e me avise_ 🤗

### Links úteis
{% https://medium.com/dartlang/dart-2-15-7e7a598e508a  %}
My Six Months Strategy Plan for Building Up A Community.
Tags: productivity, community, blog, opensource
Published: 2022-07-08 12:38:59

Communities are an integral part of any product’s journey in tech. They help you grow at lightning-fast speed while not burning out and having fun! 
For me, the community is more like “commUNITY”.

So, here’s what my 6 Months plan looks like -

1st Month -> I call the first phase “Create, Set and Address”.
So, in this initial phase, we can create the branding and set a mission for our community and address it to the people to make them aware of our mission. It will be the time phase to start delivering the right actions and message. The focus at this stage should be on the objective of building a community that attracts everyone.

2nd Month -> I call this stage “Think Ahead ”.
It is important to think ahead and create a detailed process to factor in new developments to the existing plan. After creating a safe space we now have to focus on the growth of the community. We now have to create a connection with the audience through social media pages, mailing lists, and discord channels. Now it's high time to be consistent.

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

3rd Month -> I call this stage “Call for Volunteers”.
Here, in this phase, we can create roles and have people volunteer and participate. We can also create some interesting challenges and some interaction sessions on trendy topics in tech which fulfils the requirement of community members.

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


4th Month -> I call this stage “Finding Sponsors and Connect ”.
So, connecting with others is a way to feel motivated and safe. In a large group, you have someone to listen to. We can Invite our sponsors or representatives and connect with them. We can Connect online or at In-person meetups.

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



5th Month -> I call this stage “Future Thinking ”.
Now, that we have made the momentum and have promises, now we have to keep going. We have to focus on staying agile and adaptive in ever-changing tech practices. We have to prepare some strategies to deliver and develop an improved product. We also have to ensure that buyers and users feel satisfied with our product.

6th Month -> I call this stage “Get Ready and Repeat ”.
Now we have successfully built up the community and have seen growth. Now it's time to repeat the whole process again.

#Note-Once you get into it, there's no looking back.

🏁 The End 
Let me know your feedback in the comment.
Thank you :)
100 Days of Learning From My Mistakes – Day 2
Tags: sass, css, cli, beginners
Published: 2022-07-13 15:37:03

Why aren't my styles updating?! I've tried everything. Debugged my entire Sass project file by file. All imports correct. Everything peachy. What. The. Hell! 

Did I forget CSS? Am I a terrible developer? Is this even for me? Why is the world against me?!

Oh. I forgot to run my Sass compiler...

```
npm run compile:sass
```
...deletes semi colon in any Sass file, hits cmd+s...the magnificent green console letters show up...main.scss compiled to app.css....

Dummy...

Note to self: Always make sure my Sass compiler is actually running before freaking out :)

-Dan
dndl.me
Luos integrations: survey
Tags: opensource, microservices, embedded, luos
Published: 2022-07-22 15:44:51

A few days ago, we created a poll to find out what integrations would be most useful for you who are using or discovering Luos.

Thanks for your opinion, it will help us to add your ideas in our roadmap.

As a result of this survey, we have added Zephyr, cloud providers (like AWS, Azure etc.), Zapier and Silicon Labs to our development roadmap. 🎉
How to change React Native app name (iOS / Android)
Tags: tutorial, mobile, reactnative
Published: 2022-07-26 10:03:00

In the example below I have a sample app that I named **owler_franchise** in the setup process.


![Initial app name ios](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/knb8qm7qq4e99gphyohn.png)

Now I want to change that to Owler Franchise.


- **iOS**

For **iOS**, go to **ios** folder and find the folder named after your project name. 
In my case I called it **owler_franchise**. Inside that folder find the **Info.plist** file. 


![Find ios folder for Info.plist](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8kibti77s22fbfgpt4fx.png)

Inside **Info.plist** file replace the value after `<key>CFBundleDisplayName</key>` to your app name.

![iOS before update](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1655dr5cadeyfzkzn6z5.png)

For my example, I changed it to **Owler Franchise**. 

![iOS after update](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ywppz7v6yjnypy85fj9v.png)

That's it for **iOS** 👍.


![iOS ready](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6h4wkm20q5aoevvckxsj.png)

- **Android**

For **Android**: Go to the following folder in order: _android > app > src > main > res > values_ and open **strings.xml** file, replace the `<string name="app_name">` tag's value.


![Path to strings.xml file](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eezi1fhf4xwv80hfew6f.png)


![before update android](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cztxf36qfqulki46hdjt.png)

Again, in my example, I changed it to **Owler Franchise**:

![after updated android](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d59h7i4kqxlk9nss3ogv.png)


That's it for **Android** too ✅.


![android done](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kvlp1qn95hb49u8k2isx.png)


Thanks for reading! 

If you like this post, then follow me on twitter. You will be bombarded with coding memes 😁.

My twitter page 👉 [@nmnjnv](https://twitter.com/nmnjnv)
Design Patterns 2 | Types
Published: 2022-09-05 07:29:33

Before diving into the types of design patterns, we need to brush up our memories on what design patterns are. Design patterns are templates for solving recurring problems in our software designs.

Now that we know what design patters are, understanding the types of design patterns will make it easy to know the right one to use in solving your problem.

There are several types of design patterns which are categorized into three. They are:
-Creational,
-Structural, and
-Behavioral.

## Creational

These patterns are all about class instantiation and object creation. They can further be categorized as Class-creational patterns and Object-creational patterns.
Creational design patterns are the 
- Factory method

- Abstract Factory

- Builder method

- Singleton

- Object pool

- Prototype.

## Structural

These patterns are efficient for the structure of classes and objects to increase their functionality.
They are the 
- Adapter
- Bridge
- Composite
- Decorator
- Facade
- Flyweight
- Private Class Data
- Proxy.

## Behavioral

These patterns are formed based on how classes communicate with each other.
These patterns are the 
- Chain of Responsibility
- Command
- Interpreter
- Iterator
- Mediator
- Mement
- Null Object
- Observer
- State
- Strategy
- Template Method
- Visitor Method.

Now that we know what the types of design patterns are, lets know more about its pros and cons in the [next article](https://dev.to/abdulhameedanofi/design-patterns-3-appendix-4e38).
Custom react icon context wrapper
Tags: reactic, react, context, tailwindcss
Published: 2022-09-03 08:33:25

React icons are cool and all but tey do have that pesky issue of hvving to wrap them in an <IconContext.provider> in order to be able to resize them or change their colors so i made this wrapper


```ts
import React from 'react'
import { IconContext, IconType } from "react-icons";

type MyProps = {
  // using `interface` is also ok
  Icon: IconType;
  size: string;
  color: string;
  iconstyle?:string;
  iconAction?: () => any;
};
type MyState = {
  iconstyle: string;
};
export class TheIcon extends React.Component<MyProps, MyState> {
   constructor(props:MyProps) {
    super(props)
    this.state = { iconstyle:this.props?.iconstyle?this.props?.iconstyle:"" };
    this.clickAction = this.clickAction.bind(this); 
    }
    clickAction(){
      if(this.props.iconAction){
      console.log("click action")
      return this.props.iconAction()
      }
      return console.log("")
      }
     render() {
    return (

      <div>
        <IconContext.Provider value={{ size:this.props.size,color:this.props.color,
          className:this.state.iconstyle}}>
            <this.props.Icon onClick={()=>this.clickAction()}/>
        </IconContext.Provider>
    
      </div>
    );
  }
}


```

example usage 

```
import { FaTimes} from "react-icons/fa";
import { TheIcon } from './../Shared/TheIcon';

<TheIcon Icon={ FaTimes } size={"34"} color={"green"} />

```

[full project](https://github.com/tigawanna/gitdeck)
[live demo](https://gitdeck-two.vercel.app/)
Javascript: Declarative vs Imperative programming style
Tags: javascript, programming, functional, tutorial
Published: 2022-09-04 13:57:27

These are programming paradigms:

Declarative: tells `What to do`

Imperative: tells `How to do`

**Example: Find the summation of salary for the employees with dept 'justCode'**

### Imperative Style:

```javascript
const employees = [
{id: 1, name: 'james', dept: 'admin', salary: 10000},
{id: 1, name: 'Tom', dept: 'finance', salary: 10000},
{id: 1, name: 'peter', dept: 'justCode', salary: 12500},
{id: 1, name: 'tunner', dept: 'justCode', salary: 14500},
];

const justCodeDept = [];

// filter employees based on dept name.
for (let i=0; i<employees.length; i++) {
  if (employees[i].dept === 'justCode') {
    justCodeDept.push(employees[i]);
  }
}

// summation of justCodeDept employees.
let summation = 0;
for (j = 0; j<justCodeDept.length; j++) {
  summation = summation + justCodeDept[j].salary;
}

console.log(summation);
```
### Declarative Style:

```javascript
const employees = [
{id: 1, name: 'james', dept: 'admin', salary: 10000},
{id: 1, name: 'Tom', dept: 'finance', salary: 10000},
{id: 1, name: 'peter', dept: 'justCode', salary: 12500},
{id: 1, name: 'tunner', dept: 'justCode', salary: 14500},
];

console.log(employees.filter(item => item.dept === 'justCode').reduce(((previousValue, currentValue) => previousValue += currentValue.salary), 0));
```
A Trick to Further Breaking Down Angular Components
Tags: typescript, angular
Published: 2022-09-05 05:40:21

The usual Angular way of dealing with things is placing business logic in services and presentation logic in components. It is a good approach, as all the heavy lifting is delegated to services which are imported and re-used by different components. Yet, sometimes components start acquiring logic of their own, with time developing private methods involved with data processing on component level.

This sometimes becomes a problem with unit tests, as private methods and state are not testable, unless some dirty hacks are performed. Besides, unit testing a component requires mounting a module to declare and all dependent modules, which in turn increases the time required to run unit tests.

In this article I want to share an approach to further breaking Angular components into parts, so they are easier to create in unit tests and more flexible.

Let's take a look at a simple counter component:
```typescript
@Component({
  template: `<p>{{ calledTimes }}</p>
    <p><button (click)="increment()">increment</button></p>`,
  selector: 'app-root',
})
export class AppComponent {
  protected _calledTimes = 0;

  public get calledTimes(): number {
    return this._calledTimes;
  }

  public increment(): void {
    this._calledTimes++;
  }
}
```

It is pretty straightforward: click the button, counter increments by one. Is there a way to further break it down to pieces? There is, think of `AppComponent` as of class `App`, decorated by `Component` to create a new class, which extends the `App`. So let's extract the class and call it a `Counter`:

```typescript
export class Counter {
    protected _calledTimes = 0;

    public get calledTimes(): number {
        return this._calledTimes;
    }

    public increment(): void {
        this._calledTimes++;
    }
}

@Component({
    template: `<p>{{ calledTimes }}</p>
    <p><button (click)="increment()">increment</button></p>`,
    selector: 'app-root',
})
export class AppComponent extends Counter { }
```

What benefits does it bring us? Well, we have just made a perfectly agnostic class, not bound by the Angular, so it can be unit tested without mounting any ngModules. And since it is merely a class, it is free to be extended and decorated. We can create new components based on it or extend it to a service.

What if we wanted a new component that does the same counting, by increments by a 100 instead of 1? Well, fairly easy to do it by extending the counter and overriding the increment method:

```typescript
@Component({
  template: `<p>{{ calledTimes }}</p>
    <p><button (click)="increment()">increment</button></p>`,
  selector: 'app-increment-by-100',
})
export class IncrementBy100Component extends Counter {
  public override increment(): void {
    this._calledTimes += 100;
  }
}
```

So the main idea the *Component derived class deals with gluing the class to the template while having no state of its own. It is like a combo of a stateful and stateless component.
Ben 10- Omnitrix
Tags: javascript, css
Published: 2022-09-06 09:52:40

Hello Developers. I'm new to this kind of community thing. Hope I'll get to know about this soon. 
First let me know, What is your favourite cartoon character in your childhood? The character must brought you back to your childhood and make you feel so Nostalgic?
For me, It's **BEN 10**. Hope You know about that show. If you do so, Put your seat belts. I am going to take you back in the time. 
Just to make this a bit tricky one, I'm gonna shoot you with some easy questions. If you know the answers, Feel free to answer them in the comment section. 

- Who is the main antagonist in _Ben 10 Classic_?
 
- Who is the creator of _Omnitrix_?
 
- What is the name of this Alien?

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

Here are some sample screenshots of the website.🧬




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


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


**Click the below link to Get the Omnitrix (Virtual) Hands on Experience.**

[Link🔗](https://ben-10-watch.vercel.app/)
606. Leetcode Solution in cpp
Tags: chiki1601, misspoojaanilkumarpatel, cpp
Published: 2022-09-07 05:50:35

```
/**
 * Definition for a binary tree node.
 * struct TreeNode {
 *     int val;
 *     TreeNode *left;
 *     TreeNode *right;
 *     TreeNode() : val(0), left(nullptr), right(nullptr) {}
 *     TreeNode(int x) : val(x), left(nullptr), right(nullptr) {}
 *     TreeNode(int x, TreeNode *left, TreeNode *right) : val(x), left(left), right(right) {}
 * };
 */
class Solution {
 public:
  string tree2str(TreeNode* t) {
    return dfs(t);
  }

 private:
  string dfs(TreeNode* root) {
    if (!root)
      return "";

    const string& rootStr = to_string(root->val);
    if (root->right)
      return rootStr + "(" + dfs(root->left) + ")(" + dfs(root->right) + ")";
    if (root->left)
      return rootStr + "(" + dfs(root->left) + ")";
    return rootStr + "";
  }
};

```
#leetcode
#challenge
Here is the link for the problem:
https://leetcode.com/problems/construct-string-from-binary-tree/
Recommendation system #4 - Algorithm and final results
Tags: redishackathon, typescript, node, showdev
Published: 2022-09-08 04:28:40

In the previous [post](https://dev.to/meatboy/writing-recommendation-system-2-redis-node-architecture-kje) we looked closer at the algorithm and connection between Redis and Node. Today, quickly I summarize how the recommendation is made.

A single recommendation is an overlap between item tags and actor tag-event interactions. 

For example items:
Titanic has tags: drama, tragedy, history, action. 
Merlin has tags: adventure, fantasy, history, wizards. 
Harry Potter has tags: adventure, fantasy, action, wizards. 

Actor - user - previously could interact with some films:
Liked a film with tags: action, fantasy
Add to favourite film with tags: action, fantasy
Liked a film with tags: history, action, comedy
Liked a film with tags: adventure, fantasy, dragons
Liked a film with tags: wizards, history, action
Add to favourite film with tags: drama, wizards, fantasy

Now let's say, each like is a weight of 1 and each favourite is a weight of 3. The Sum of overlap (with or without duplication, with or without clamp to 1) divided by the maximum value per film is our overlap. And the higher it is, the stronger recommendation is.

![Spreadsheet](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mqqdre53kg68btfzf7ca.png)
Example with duplication

To make sure tags are still relevant, they have an expiration time. So as the interest may change, they expire and will be replaced with new tags. In this approach is also worth to notice the more keywords items have, the more suggestion is precise. 

### Demo of film recommendations with 10,000 videos 
{% youtube https://www.youtube.com/watch?v=_m1BandnVsQ %}

And the source code:
{% github pilotpirxie/recommendation %}

That was the last post about my Redis Hackathon journey. It was fun to participate and learn more about the technical aspects of Redis. Also, the hackathon allowed me to stay focused and finish another side project! What a wonderful event! ;)