teleren/devto huggingface dataset:
Cara Install Flutter dengan Android Studio di Arch Linux
Published: 2022-07-28 01:49:00

## Install Android Studio
Let's say android studio sudah terinstall di PC anda.
Jika belum bisa jalan perintah berikut di terminal.

```
paru -S android-studio
```
Anda bisa menggunakan AUR Helper, disini saya menggunakan [paru](https://github.com/Morganamilo/paru) sebagai AUR Helper.

---

Setelah berhasil install android studio, ikuti saja dialog petunjuk konfigurasinya. Kemudian masuk ke settings dengan cara menekan shortcut `ctrl + alt + s`. Kemudian pergi ke `Appearance & Behavior > System Settings > Android SDK`. Pastikan `Android SDK Command-line Tools` dan `Android SDK Platform-Tools` telah tercentang✅. Klik Apply.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lz733iz0vsxdue2mb50j.png)

## Install Flutter
Download melalui SDK Github repository melalui perintah berikut pada terminal

```
mkdir ~/.flutter
cd ~/.flutter
git clone https://github.com/flutter/flutter.git -b stable
```
Kemudian tambahkan `bin` directory pada PATH agar `flutter` dapat digunakan pada terminal. Tambahkan baris ini pada `.bashrc` atau `.zshrc` tergantung shell yang anda gunakan. Disini saya menggunakan zsh.

```
nano ~/.zshrc
```
Tambahkan ini di paling bawah. Kemudian save.
```
# Flutter SDK
export PATH=$HOME/.flutter/bin:$PATH
```
Close terminal kemudian buka lagi. Coba jalankan perintah ini

```
flutter --version
flutter doctor
```

---

## Memperbaiki Flutter Doctor Issue
Pada saat pertama kali install biasanya akan muncul beberapa issue pada flutter doctor.

**Android Lisence Issue**
Cara memperbaikinya adalah anda hanya perlu accept semua lisence. Jalankan perintah berikut.

```
flutter doctor --android-licenses
```

**Google Chrome Issue**
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/86i6jnoi87jepr984ar5.png)
Cara memperbaikinya dengan menambahkan chrome pada PATH. Jalankan perintah ini untuk mengetahui dimana lokasi chrome terinstall. 
```
where google-chrome-stable
nano ~/.zshrc
```
Kemudian tambahkan baris ini pada `~/.zshrc` 

```
export CHROME_EXECUTABLE=usr/bin/google-chrome-stable
```
save. Kemudian close terminal. Jalankan lagi `flutter doctor`.
How to Build an eCommerce Website Using NextJs, NodeJs, Redux, MongoDB, JavaScript, Firebase Authentication.
Tags: nextjs, node, mongodb, redux
Published: 2022-07-28 01:11:00

**Hi everyone,
Now I am very excited to share an eCommerce website. I already done a lot of projects using react but now I am trying to do something new using NextJS.
😊😊😊😊😊
I also used redux in this project and also Node.js, MongoDB, Express-js, Firebase Authentication, Heroku.**

**Link:[(https://redux-ecommerce-final.vercel.app/]**

## GitHub:[https://github.com/mahamud751]





.
JavaScript's Object Overview
Published: 2022-07-28 00:52:49

This is an overview on how to create a basic object class in JavaScript.

##JS Objects
JavaScript is not an object-oriented programming language. However, you can create 'objects' in JavaScript that behave similar to other OO languages. 

Per the [MDN Document](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object), an object is a collection of properties.

JavaScript uses objects as a data type that provides a framework for how a particular item should behave. An instance method is used to define a specific instance's characteristics.

##Syntax

```
    class Dog {
        constructor(name, breed, age, owner){
            this.name = name;
            this.breed = breed;
            this.age = age;
            this.owner = owner;
        }
    }
```
###The Constructor Method
Every class uses the constructor method to instantiate a new instance of the object. In my example above, we pass in a `name`, `breed`, `age`, and `owner` when we create a new `Dog` object. We set `this` instance of `Dog` to be equal to the variables passed in. The keyword `this` refers to that particular instance of `Dog`. 

Note that the above is just the method for creation; no instance of `Dog` has yet been created.

To better understand the object's properties versus the arguments given, you could alternatively set up your constructor per the below. Note that `dogName`, `dogBreed`, ... are the arguments passed in, and `.name`, `breed` are the properties each `Dog` instance will obtain.
```
    class Dog {
        constructor(dogName, dogBreed, dogAge, dogOwner){
            this.name = dogName;
            this.breed = dogBreed;
            this.age = dogAge;
            this.owner = dogOwner;
        }
    }
```

###Create an Object
Create a new object with the `new` keyword, followed by the class name. I prefer to store a new object in a variable so we can use it later to modify.
```
dog1 = new Dog("Fluffy", "Golden Retriever", "4", "Jane Smith") 
// Dog {name: 'Fluffy', breed: 'Golden Retriever', age: '4', owner: 'Jane Smith'}
```

###Retrieve an Object's Data
With our variable, `dog1`, we can access that variable's data by calling their properties.
```
dog1.name
// 'Fluffy'

dog1.breed
// 'Golden Retriever'

dog1.age
// '4'
```

###Give an Object Behavior with Instance Methods
An instance method takes action on that particular `Dog` instance it is called on.

In the example below, the method named `bark` gives each instance of `Dog` the ability to "woof" when called. Similarly, the `ageUp` method increases that specific dog's age by 1 and returns its new age.
```
    class Dog {
        constructor(name, breed, age, owner){
          ...
        }

       bark(){
           return `${this.name} the dog says woof!`;
       }
       ageUp(){
           this.age += 1;
           return this.age;
       }
    }

dog1.bark()
// "Fluffy the dog says woof!"

dog1.ageUp()
// 5
```
Day 602 : Run
Tags: hiphop, code, coding, lifelongdev
Published: 2022-07-28 00:49:45

_liner notes_:
- Professional : No meetings today so I got a bunch of stuff done. Looked over a draft for an upcoming blog post. Pushed some code to a new repo. Added to some documentation. Then took a first pass at updating some code snippets in some documentation. Not a bad day.

- Personal : Last night, I reviewed some Japanese radicals. There's 26 and I only got like 1 wrong because I was rushing, but I knew it. Worked on my side project. Refactored some code and made the new feature responsive.

![Rows and rows of yellow tulips extending into the distance with a mountain range under some clouds in Skagit Valley, WA, United States](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e0um7avatfyfw83x4d2q.jpg)

So I saw that the money I have in an account was getting like .16% interest. I noped most of that money into my savings account which is now getting 1.25% interest. It's not much, but it's more and better than nothing. haha. I've got another Japanese Radicals review scheduled for later. Made some good progress on the new feature for my site so I may continue working on that. Hoping to get a form on there that can pass data to the backend. I'll also need to get the Twitter login working also. May have to do that first. Gotta run.

Have a great night!

peace piece
Dwane / conshus
https://dwane.io / https://HIPHOPandCODE.com
{% youtube yfFeNTcmGPY %}
A LIFE WITHOUT CODE
Tags: discuss, career, random, coding
Published: 2022-07-28 00:18:29

For many here, we probably spend most of our productive time staring at the computer screen coding away. Some young, some old, but the thirst for knowledge and creation never ends. 

Now, suppose something unnatural was to happen that stopped the world from having to write code, how do you think it would go for you?

Would you just join a focus group where you talk about the good old coding times and try to come to terms with the new life? Would it not mean anything to you as you have substitute leisure, family, or other endeavors that you can have more time for? 

Do you think you would go broke in some time and how relevant would you be in Other Industries? How sad, pleasant or depressing would it be? Would you still keep some of the relationships that were established majorly because of coding? How useful would your laptop and other gadgets still be to you?

Let’s discuss, a life without coding…
Twenty Plus Years of Blogging
Tags: blogging, writing, webdesign
Published: 2022-07-31 07:33:46

---
title: Twenty Plus Years of Blogging
published: true
date: 2022-07-28 00:00:00 UTC
tags: 
  - blogging
  - writing
  - webdesign
canonical_url: https://wildermuth.com/2022/07/28/twenty-years-of-blogging/
cover_image: https://wilderminds.blob.core.windows.net/img/2022/07/28/cover.jpg
---
I’ve been logging a long time. My wife and I were talking about it. We realized that it’s been over twenty years since my first nascient online attempts. It’s been an amazing many years. While many have gone the route of using a CMS or a blog engine (e.g. WordPress), I have always used my personal blog as a testing ground for the bleeding edge of tech that I wanted to learn about.

In addition, I’ve tried to style the site(s) myself to a different level of success. I’m always tweaking it but I’m no designer.

Take a look at the twelve iterations of the blog and see what I built them in. To see the screenshots, check out the original post:

> https://wildermuth.com/2022/07/28/twenty-years-of-blogging

I wonder, how long have you been reading my rants and ramblings? Please comment below!

[![Creative Commons License](http://i.creativecommons.org/l/by-nc-nd/3.0/88x31.png)](http://creativecommons.org/licenses/by-nc-nd/3.0/)

 This work by [Shawn Wildermuth](http://wildermuth.com) is licensed under a [Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License](http://creativecommons.org/licenses/by-nc-nd/3.0/).  
 Based on a work at [wildermuth.com](http://wildermuth.com).

* * *

If you liked this article, see Shawn's courses on [Pluralsight](http://shawnw.me/pscourses).
Temperature war system
Published: 2022-07-27 23:10:00

System used to control temperature introduce as input in the web application. 
This code and the manually build system controls temperature measuring the time temperature was in the desire range.

[Click to view code in Github](https://github.com/jesusalbarca/Temperature-war-System)


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k87cx8iqrv2runyx1x5l.png)
Software and the chicken and the egg problem
Tags: webdev, discuss
Published: 2022-07-27 22:55:00

I have an idea for a SAAS business. But so does everyone. Its about execution that counts. 

But which do you do first? Do you write code or market it first? Do you built it or sell it first?

Theses are very really questions. 

My response is market it and validate the need for it first.

## So here's my idea 💡 

If you want to start out and build an online store where do you go? Etsy? Shopify? 

Great but here the problem. I'm not sure about you but do you pay fees for just about everything on Etsy? You pay a fee to have a store, you pay a fee to selling a new product. Fees fees fees.

And shopify is great but at £29 a month... when you start out and have 2 orders every few months. That's a big hit to the budget when you don't sell. And at that cost you still have to design and build your site before going public....

## So what's the solution?

Sell products and only pay 1 fee when you sell something. 

Upload product details and the site will do the rest. 

Customise a store front like a YouTube channel and be featured on the home page.

### What do you think?

Here's the marketing, before the building.

Do you think this is the right way around? Do you think this will work? 

Leave a comment or follow to keep up on the progress of this idea. 

Thank you for reading 📚 

To help me to fund this please could you buy me a coffee?  

[![Buy Me A Coffee](https://cdn.buymeacoffee.com/buttons/default-black.png)](https://www.buymeacoffee.com/lukeecart)
How to Get User Groups Using Okta
Tags: okta, cybersecurity, iam
Published: 2022-07-27 22:32:00

In this post, we will explain how to get user groups and how Datawiza handles user groups when using Okta as the identity provider. 

## Get User Groups in Okta

Add the Group Claim in Token

Okta supports customizing tokens returned from Okta with a Groups claim. For this solution, you need to get the token depending on the Oauth 2.0 flow you chose and decode the token.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3avt4up4v42x8kuhk4iu.png)

You can add the Group claim for the Org Authorization Server or the Custom Authorization Server.

## Get user groups by Okta core API

Besides decoding user info from ID Token, the Okta User API provides operations to manage users in your organization. For example, Get Current User fetches the current user linked to an API token or session cookie, and Get User’s Groups fetches the groups of which the user is a member. These two APIs can be used to retrieve different information, which can further be combined into a user profile. For this solution, you need to create an API Token to authenticate requests to Okta APIs.


## How to Get User Groups when Using the Datawiza Cloud Management Console (DCMC)

Datawiza supports both of the above solutions to get user groups. By default, Datawiza will try to get user groups from ID Token. So you need to add the Group claim in Okta ID Token: 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0yxw0tonszrd42pmqizp.png)

If you specify the scope when adding the group claim in ID Token, you need to add the same scope in the Okta configuration.

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

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

Meanwhile, you can enter the API Token while configuring Okta in DCMC -> IdPs -> Select IdP -> Edit -> Okta API Token. Datawiza will use the API Token to fetch user profiles and user groups from Okta APIs:

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


What’s more, you can use DCMC to configure access control based on the user groups:

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


## References

- [Customize tokens returned from Okta with a Groups claim](https://developer.okta.com/docs/guides/customize-tokens-groups-claim/main/)
- [Secure a Web APP using Okta](https://docs.datawiza.com/tutorial/web-app-okta.html)
- [Difference between Groups claim filter in App itself or a group claim under claims in the default auth server](https://support.okta.com/help/s/question/0D54z00006vyDVICA2/difference-between-groups-claim-filter-in-app-itself-or-a-group-claim-under-claims-in-the-default-auth-server?language=en_US)

Written by the [Datawiza](https://datawiza.com) team — hope you enjoyed! Join us if you have any questions or need any help [on our Discord server](https://discord.com/invite/Sn3nbc83Up).
🪄 Introducing jq tricks to Grype-Contribs
Tags: devops, security, news, productivity
Published: 2022-07-27 22:26:26

## 🗞️ About

I'm quite excited to announce the arrival of a set of new productivity resources for [`Grype`](https://github.com/anchore/grype) in :

{% github opt-nc/grype-contribs %}

## 🪄 `jq` tricks

This time we opened a new topic around `Grype` reporting : 

> Export vulnerabilities as well formated `csv` wthin a single line of code

## 💰 ROI 📊

With clean `csv`, you can **easily create and share** your analysis  wit JupyterNotebook... see dedicated issue in the pipe :

{% embed https://github.com/opt-nc/grype-contribs/issues/10 %}

## 🍿 Demo

{% youtube  https://youtu.be/mvYckVNnaS4 %}

## 🔮 Next `jq` trick coming

{% embed https://github.com/opt-nc/grype-contribs/issues/8 %}
HostListener + Output = 🤔
Published: 2022-07-27 22:01:00

A `HostListener` lets us listen to events.

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

An `Output` emits observable events.

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

Can they be used together? Yes they can! ([open in Stackblitz](https://stackblitz.com/edit/angular-ivy-3h8nnl?file=src/app/counter.component.ts))

```ts
@Component({
   selector: "my-counter",
   template: `
      Counter: {{ count }}
   `,
   changeDetection: ChangeDetectionStrategy.OnPush,
})
export class Counter {
   @Input() count = 0

   @Output() 
   readonly increment = interval(1000)

   @HostListener("increment", ["$event"])
   handleIncrement(increment) {
      this.count += increment
  }
}
```

Intended behaviour? Perhaps not!

It was a little surprising to learn that Angular components and directives can listen to custom events published by the `Output` decorator. This gives us a convenient way to subscribe to an observable without cleaning up afterwards; the subscription is automatically disposed when the component is destroyed. We do however pollute the output namespace in the process 🙆‍♂️

No need for `share` either since outputs are automatically multicast to parent template subscribers. It even works with `OnPush`. What else can we do?

## Example With HTTP Request

Let's fetch some todos.

```ts
const handleError = ctx => source => source.pipe(
   catchError((error, source) =>
      ctx.handleError(error) ? source : EMPTY
   )
)

@Component({
   template: `
      I have {{ todos.length }} todos left to do
   `
})
export class Counter {
   protected todos = []

   @Output() 
   readonly response = inject(HttpClient)
      .get("https://jsonplaceholder.typicode.com/todos")
      .pipe(handleError(this))

   @HostListener("response", ["$event"])
   handleResponse(todos) {
      this.todos = todos
   }

   handleError(error: unknown) {
      console.error(error)
      return true
   }
}
```

Since Angular outputs are readonly new values cannot be assigned  like `AsyncPipe`. Instead we need to handle errors to prevent the subscription from collapsing.

### Other Things You Can't Do

- The `listen` event in `Renderer2` sadly doesn't share this behaviour.
- Subscribing to the same event twice with `HostListener` is not possible, only the last subscription will be used.
- This won't work in `AppComponent` since there's no parent view for `Output` to subscribe to.

## Summary

This is just a neat little trick saves you some subscription management without any third party libs. I hope you find it useful.

Happy coding!
Algunos métodos más allá del console.log en Javascript
Tags: javascript, webdev, programming, beginners
Published: 2022-07-27 21:59:00

A menudo, durante la depuración, los desarrolladores javascript solemos usar el método `console.log()` para imprimir valores. Pero hay algunos otros métodos de consola que te hacen la vida mucho más fácil. ¿Quieres saber cuáles son estos métodos? ¡Vamos a conocerlos!

## 1. `console.table()`
Mostrar arreglos u objetos largos es un dolor de cabeza usando el método `console.log()`, pero con `console.table()` tenemos una forma mucho más elegante de hacerlo.

```js
// Matrix
const matrix = [
  ["apple", "banana", "cherry"],
  ["Rs 80/kg", "Rs 100/kg", "Rs 120/kg"],
  ["5 ⭐", "4 ⭐", "4.5 ⭐"],
]
console.table(matrix);

// Maps
class Person {
  constructor(firstName, lastName) {
    this.firstName = firstName;
    this.lastName = lastName;
  }
}

const family = {};
family.mother = new Person("Jane", "Smith");
family.father = new Person("John", "Smith");
family.daughter = new Person("Emily", "Smith");
console.table(family);
```

![console.table()](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/37w9ez8w43n3ybe3bl94.png)

## 2. `console.trace()`
¿Tiene problemas para depurar una función? ¿Te quedas preguntándote cómo fluye la ejecución? ¡`console.trace()` es tu amigo!

```js
function outerFunction() {
  function innerFunction() {
    console.trace();
  }
  innerFunction();
}
outerFunction();
```

![console.trace()](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5422ywzh99jnppjifyqi.png)

## 3. `console.error()` y `console.warn()`
¿Cansado de logs/registros aburridos? Dale sabor a las cosas con `console.error()` y `console.warn()`

```js
console.error("This is an error message");
console.warn("This is a warning message");
console.log("This is a log message");
```

![console.error()](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/aqjpe6dwijmt7gvi3ra7.png)

## 4. `console.assert()`
¡Esta es otra herramienta brillante para la depuración! Si la aserción falla, la consola imprimirá el seguimiento/**trace**.

```js
function func() {
  const a = -1;
  console.assert(a === -1, "a is not equal to -1");
  console.assert(a >= 0, "a is negative");
}

func();
```

![console.assert()](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mfqqjbfcb6592mcjar01.png)

## 5. `console.time()`, `console.timeEnd()`, y `console.timeLog()`
¿Necesita comprobar cuánto tarda algo? ¡Los métodos del temporizador están ahí para rescatarte!

```js
console.time("timeout-timer");

setTimeout(() => {
  console.timeEnd("timeout-timer");
}, 1000);

setTimeout(() => {
  console.timeLog("timeout-timer");
}, 500);
```

![console.time()](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p23gnvotxhkr7ejvklhf.png)

NOTA: Los setTimeouts no se ejecutan de inmediato, lo que genera una pequeña desviación del tiempo esperado.

¡Eso es todo amigxs! ¡Espero que esto te ayude a convertirte en un o una mejor dev!

![Profile](https://res.cloudinary.com/khriztianmoreno/image/upload/c_scale,w_148/v1591324337/KM-brand/stickers/sticker-3_2x.png)


### @khriztianmoreno 
Hasta la próxima.
Day 109: Figma Auto-layout
Published: 2022-07-27 21:51:08

Hi!
Today I learned about the power of auto-layout, design systems, grids layout... in Figma, Figma is a very advanced prototyping tool with a big community behind and I was amazed by how much thing I didn't even know they existed in the application  before today. the auto layout feature is probably the one that I found more useful for building responsive designs faster and I got a chance of using auto layout features to clone a website landing page but I still need a lot of training  and practice
Tomorrow I will focus on development again new feature to start so it will be fun (I guess hahah:) we shall see

Signing off...
Wanna clean dock on your Mac 🍎? Add spacers between irrelevant apps and clear the clutter!
Tags: macos, utility, productivity, management
Published: 2022-07-27 21:09:05

You can add spacers(either small or default sized blank icon) between apps on your dock and put relevant apps together for quicker access. 💭

Hit the following command on your favorite terminal and VOILA! 🎉🎉🎉

```
defaults write com.apple.dock persistent-apps -array-add '{"tile-type"="small-spacer-tile";}'; killall Dock
```

the `killall Dock` will kinda restart your dock and add small sized spacers on the most right side. You can drag those spacers wherever you want to on your dock.

Instead of `small-spacer-tile` you can try `spacer-tile` in the aforementioned command and the default sized spacer will appear on the dock.

You can remove the spacers pretty easily. Check the following screenshot.
{% embed https://ibb.co/4PLHWC8 %}


Cheers! 🥂
Snippet: Spalte Dateigröße in der Mediathek hinzufügen
Tags: wordpress, codesnippet, functionsphp
Published: 2022-07-29 18:06:00

---
title: Snippet: Spalte Dateigröße in der Mediathek hinzufügen
published: true
date: 2022-07-27 20:14:31 UTC
tags: WordPress,CodeSnippet,functionsphp
canonical_url: https://bloggerpilot.com/snippet-media-filesize/
---

![Snippet: Spalte Dateigröße in der Mediathek hinzufügen](https://bloggerpilot.com/wp-content/uploads/2022/07/snippet-media-filesize-desktop.png)

Dieses Code-Snippet fügt der WordPress Mediathek eine neue Spalte mit...

Der Original-Artikel erschien auf [Snippet: Spalte Dateigröße in der Mediathek hinzufügen](https://bloggerpilot.com/snippet-media-filesize/).
Access your Mi Router 2 SMB (Samba) Storage from Windows without any third party application
Tags: tutorial
Published: 2022-07-27 20:01:00

Hit 
```
<Windows Key> + R
```
type `\\<Address>`
```
\\192.168.31.1
```
![Access SMB storage from Windows](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/702ceqqbenk5zcsaugku.png)