teleren/devto huggingface dataset:
Apa itu Internet Positif? Apakah Begitu Penting?
Published: 2020-11-13 19:06:46

Di era digital saat ini, mungkin kita semua udah tau tentang Internet Positif.

Sedikit informasi untuk kalian, Internet Positif merupakan sebuah program dari pemerintah khususnya KOMINFO yang mana dengan tujuan memberantas atau memberikan pembatasan para pengguna Internet, untuk mengakses situs situs yang mengandung konten negatif, pornografi, ataupun judi.

Tapi ternyata, seperti yang dilansir pada laman [https://jaditau.my.id] (https://jaditau.my.id) Internet positif tidak semata-mata memblokir situs yang tersebut diatas saja, melainkan juga berdampak pada situs yang tidak memiliki konten negatif didalamnya.

Misalnya adalah reddit. Sebagaimana kita tau, reddit merupakan situs yang mana berisi beragam informasi dan juga kejadian menarik yang ada didunia.

Walaupun begitu, mungkin memang ada beberapa hal yang sekiranya negatif didalam reddit, tapi tentu tidak membuat situs tersebut masuk dalam kategori negatif, bukan?

Oleh karena itu, ada banyak pengguna internet yang berlomba mencari [Cara Menghilangkan Internet Positif](https://ameblo.jp/mu22tiakun/entry-12635410079.html) ataupun [Cara Melewati Internet Positif] (https://writeablog.net/jessicamellandrandul/cara-melewati-internet-positif) dengan beragam cara.

Tapi semua kembali lagi ke para penggunanya masing-masing. Tentunya tujuan dari MENKOMINFO ini berguna agar tidak ada lagi para pengguna internet yang sembarangan dalam mengaksess konten ataupun situs yang ada di Internet.

Sekian.
BlurHash as a service with Cloudflare Workers
Tags: javascript, serverless
Published: 2020-11-13 23:11:42

Last week I came across [BlurHash](https://blurha.sh/) on twitter. It’s an interesting tool for dealing with image loading issues. Basically it allows you to show a blurred version of an image while the real image is loading over the network. So you can show a kind of preview while it’s loading.

This is a pretty useful technique in terms of UX and perceived performance. It obviously looks a lot nicer, since you’ve got pops of colour and a bit of variety, but the more important part is that users can actively see that the website is loading.

When a user sees just a blank screen or a blank area they can’t get a sense that the page is loading. Maybe it’s broken, or stuck. If you introduce intermediate loading steps it feels to the user like there is an active loading process going on. This is the same concept behind skeleton screens, where a skeleton of the user interface is displayed while the page is loading.

The way BlurHash helps you out is through tooling, not through some specific component implementation. BlurHash gives you two main functions: an encode function and a decode function. The encode function turns the image into a short string of characters (similar to a hash), while the decode function turns a string into a blurred image. Here’s the diagram from their website:

![https---bucketeer-e05bbc84-baa3-437e-9518-adb32be77984.s3.amazonaws.com-public-images-51cad030-5581-45e2-aeeb-747f4196876a_1508x434](https://dev-to-uploads.s3.amazonaws.com/i/f7xnrhl34esnds5b6uoj.png)

What’s really cool about this is that you can generate the BlurHash string server side when you’re processing images, and then save it along with your model. Then on the client side you can render the blurred image while you’re waiting for the full image to load. Since the blurred image is just a string, you don’t need any sort of binary storage or transfer - just throw it in your JSON or your HTML and get on with it.

The situation this doesn’t work for is when you don’t have full control over server-side processing of your images. You might be consuming images from somebody else’s API, or you outsource your image uploads. I’ve been messing around with Cloudflare Workers a lot recently and it struck me that it would be pretty cool to have a worker do this processing for you.

---

The full text of this post is available on my Substack, where I go deep into how I implemented BlurHash as a service using Cloudflare Workers.

[BlurHash as a Service using Cloudflare Workers](https://taybenlor.substack.com/p/blurhash-as-a-service-with-cloudflare)

Thanks for reading!
How to Create a Venn Diagram with JavaScript: Visualizing What Makes the Perfect Recipe for Stay-At-Home
Tags: javascript, beginners, tutorial, datascience
Published: 2020-11-13 23:06:44

⚡️ Just published, a new awesome tutorial for beginners!
💻 [Learn how to easily create a stunning interactive Venn Diagram](https://www.anychart.com/blog/2020/11/11/venn-diagram-javascript/) for a website or app, which will look great on any device.

During the pandemic, many of us have become amateur chefs. In this tutorial, we'll figure out what makes the perfect recipe to try out when working from home.
Day 256: Heat
Tags: hiphop, code, coding, lifelongdev
Published: 2020-11-13 22:53:18

_liner notes_:
- Professional : Woke up with a huge pain in my shoulder. I can barely lift my arm. Good thing I don't need to lift my arms to code. haha Had a team meeting and basically worked on documentation. Couldn't do too much because my shoulder really hurts. I have no clue what I did to it. Maybe I banged it in my sleep?

- Personal : Last night, went through more tracks for this week's show. Did some research on my next project. Pretty much it.

![Sun shining down through the clouds on the plains and mountains of Mu Cang Chai, Vietnam](https://dev-to-uploads.s3.amazonaws.com/i/om69vyi4psgauqo21hbp.jpg)

Not sure what I can get done. My shoulder is still hurting me. haha Still have to do a couple of things left for the radio show. Maybe call it a night after I get that done so I can rest my shoulder. Maybe I'll put some heat on it or something.

Have a great night and weekend!

peace piece
Dwane / conshus
https://dwane.io / https://HIPHOPandCODE.com
{% youtube Bq055m1U0h0 %}
Connecting Now: Swag
Published: 2020-11-13 22:51:57

A common thing to see at meet ups or conventions is swag. These are the promotional items such as tee shirts, bags, notebooks, or stickers handed out by event sponsors. Some people like it, others see it as clutter. I understand the view that it is wasteful, things can pile up if you attend a lot of events, but I like the memories they hold. They can help start a conversation. Introverts need something to break the ice. 

But what about swag in the pandemic, are companies still handing out stuff in the age of virtual distancing?
Yes they are, in these times promotional items still exist. organizers still want to get the word out. You might not be in the office with your new shirt but you can still share it on Zoom. You'll have to wait for physical items to be shipped. Virtual items can be downloaded or emailed.

Heres's some of the the swag I've picked up during the virtual convention season.

**Codeland**
Microsoft Azure tee shirt. 
GitHub and Atom stickers. 
Virtual badge for DEV.to blog.

**GitLab**
StackHawk Tee shirt and sticker.
GitLab "You belong Here" shirt. This was earned by playing a virtual scavenger hunt through out their website, forums, and visiting vendor booths.

**Slack**
The coolest so far from a Slack presentation. It included a introduction from LEGO Masters contestant Corey Samuels. Corey was the one that said "You don't smash LEGO". Corey talked about teamwork which was the theme of the Slack product talk. After the presentation, attendees got a $25 eGift card for the LEGO Shop. I spent that on a Star Wars LEGO Set. When I can tie that in post you'll see it here.

**HacktoberFest**
Anyone that completed ,Hacktoberfest, with four accepted PRs could chose between a HacktoberFest shirt or having a tree planted plus a virtual badge for DEV blogs. 

Sometimes swag is earned by visiting vendor booths or filling out surveys. Other times it is given away at raffles at the event. It's marketing, learn about their product, exchange contact info and earn some swag. This could mean you'll be put on their email list so you'll get marketing email. If you don't like the emails unsubscribe from them. If you like them read them. If you get swag thank the sponsor and share it on social media.  

 
What do you think about swag? 
Have you picked up something this year?
What's the best Swag you every seen?

```
-$JarvisScript git push
```
Traduzir textos utilizando python
Published: 2020-11-13 22:37:07

Seja bem-vindo programador! Hoje vamos aprender a traduzir um texto utilizando a linguagem de programação python. Antes disso, que tal se juntar a milhares de programadores no Instagram? Recebendo memes e conteúdo resumido, Clique aqui!
1. Instale a biblioteca translate
Pressione Windows + R para abrir a caixa "Executar", depois digite "cmd" e clique em "OK" para abrir o prompt de comando, digite python -m pip install translate e tecle enter para instalar.
<a href="https://www.gustahtocantins.com.br/2020/11/traduzir-textos-utilizando-python.html"> Continuar lendo... <a/>
App redo time...
Published: 2020-11-13 22:31:33

Today I received an email from Twitter's Hiring team that I was rejected from their apprentice program. I was not given a reason why but I'm going to try to be productive to bounce out of this new low. I decided that I am going to work on one of my applications, The Smart Goals app. I plan on redoing the whole app with react native for mobile and web accessibility. My end goal is to deploy the app and make a startup of it. It sounds like quite the grand scheme at the moment but I feel that another app of that kind does not exist. I bounced the idea off of a close friend and he mentioned that it would have many applications within the education field. It could also be used as a general planner for life or business. I took his advice to heart and do plan on really overhauling this app to make it more usable. Its time to stop waiting for these companies to give me a shot at employment and make them really see who I am and my talents. Til next time readers, this next week is going to be interesting. :-}
Como proteger tu Azure function con Azure B2C y MSAL.js 2.0
Tags: azure, b2c, msal, javascript
Published: 2020-11-13 22:17:36

La mayoria de los tutoriales que encuentras en internet siempre enseñan a usar los "Code Keys" para proteger las funciones, pero podemos ir un paso mas alla con Azure B2C.

Los siguientes videos son de mi proceso de aprendizaje leyendo tutorials oficiales y stackoverflow para poder lograr el objectivo. Espero le sea util a alguien mas.

**Nota:** intente ocultar a como pude mis tenant Ids al final no pude, asi que borre las aplicaciones y mi tenant B2C que sale en los videos. :)

{% youtube f8f-BMS0Dag %}
{% youtube RYaNQWNV2RM %}
{% youtube 1d55YsfUhic %}
{% youtube UGtRYVYiByM %}
{% youtube sMBGQNnna_c %}
{% youtube vAh11ZMXVM0 %}
{% youtube GBENmQGd2PI %}
#codevember - 13 - Polygons - Made with tsParticles
Tags: codepen, javascript, webdev, showdev
Published: 2020-11-13 22:08:00

# Polygons animated background

**Made with [tsParticles](https://github.com/matteobruni/tsparticles)**

{% codepen https://codepen.io/matteobruni/pen/WNxPpMZ %}

Checkout more samples on CodePen [here](https://codepen.io/collection/DPOage)
29 apps created and 33 Docs issues closed..Hacktoberfest FTW!
Published: 2020-11-13 22:05:27

With 29 CockroachDB apps created and 33 Docs issues closed, it’s officially a wrap on [CockroachDB’s Hacktoberfest 2020 project](https://github.com/cockroachdb/cockroach/blob/master/CONTRIBUTING.md).

While planning for Hacktoberfest, we asked our community: What holds them back from contributing to open source and how we could help them overcome those obstacles? 

The unanimous response holding developers back from contributing to open source was that they wanted us to help curate "beginner-friendly issues.”

So that’s what we did. 

We combed through our [code](https://github.com/cockroachdb/cockroach/issues?q=is%3Aopen+is%3Aissue+label%3A%22good+first+issue%22) and [docs](https://github.com/cockroachdb/docs/issues?q=is%3Aopen+is%3Aissue+label%3Agood-first-issue) repos to identify beginner-friendly first issues. We also created a [sample applications repository](https://github.com/cockroachdb/cockroachdb-todo-apps) for folks to contribute CockroachDB apps using a language/framework of their choice. The goal here was to allow contributors to use a technology they were comfortable with while learning a new technology (CockroachDB), and helping our open source project build out our sample apps repo. Win-win!

The project served its purpose: It enabled folks to make their first-ever open source contributions:

{% twitter 1315670947785895942 %}


Mentored by our Education, SQL, and App Dev teams, the new contributors were able to take their first giant leap into the world of open source, and created some very cool PRs!

![Screen Shot 2020-10-13 at 12.11.15 AM](https://dev-to-uploads.s3.amazonaws.com/i/519isr5oerrtax4z7ovj.png)
 

Some contributors chose to contribute all 4 PRs required to win the Hacktoberfest to CockroachDB projects:

{% twitter 1322437712125677569 %}

In addition to the open source projects, we also published this article which proved to be a community favorite:

{% link https://dev.to/cockroachlabs/an-absolute-beginner-s-checklist-for-hacktoberfest-p2k %}

We had a blast participating in Hacktoberfest and welcoming new contributors into our open source community. Thank you DigitalOcean, Intel, and DEV for organizing the event. 

If you wanted to contribute to CockroachDB projects but missed out on Hacktoberfest, you can participate in the next [MLH Hackathon](https://hack.mlh.io/software/) and compete for the [‘Best Use of CockroachDB’ prize](https://hack.mlh.io/prizes/).

In the meantime, don’t forget to join the fun on our [community CockroachDB Slack](https://cockroa.ch/slack).
This is This and Self is Self
Published: 2020-11-13 21:09:42

The curriculum at Flatiron School jumps head first in JavaScript after several months of Ruby, Sinatra and Rails. It can be a little intimidating and overwhelming. I had a particularly tough time with the difference between `self` and `this`, but it turns out they're not so different after all!

`Self` in Ruby and `this` in JavaScript both give you access to the current object, however `this` behaves a little bit differently. First let's talk about Ruby's `self`. If `self` is located inside of an instance method, it refers to an instance of a class. For example: 
```
class Owner

  def walk_dogs
    self.dogs {|dog| dog.mood = "happy"}
  end
end
```
In this case, `self` is referring to an instance of the `Owner` class. We can walk all of an owner's dogs to make them happy.

We can also use `self` to define class level methods. This means that the method belongs to a class. Sticking with our owner theme:
```
class Owner
  def self.dog_park
    puts "I'm going to the dog park!"
  end
end 
```

Calling `Owner.dog_park` will output `"I'm going to the dog park!"`

`Self` is also useful in debugging and comparing objects! 

Now, onto JavaScript! `This` can be used in global and function context.

## Global Context
When we use `this` in the global context, it refers to the global object (window object in your browser).
```
this.dog = "Bark!"
console.log(window.dog);
```
This will log `"Bark!" into our console.

Function context is where things start to get a little bit tricky. There are several ways a function can be invoked (function, constructor, method and indirect invocation) and `this` works a little differently for all of them, because they each define their own context. For now, we'll just cover function and method invocation.

## Function Invocation

``` 
function simple() {
  console.log(this);  
}
```
Here, `this` refers to our window, or global object. If we invoke `simple()` in our console, it will log something like this: 
![screenshot of window object in browser console](https://dev-to-uploads.s3.amazonaws.com/i/nuo3dr783ews6pivlucg.png)


## Method Invocation
The code below is an example of method invocation from our function context column. In the context below, `this` references the object that the function is being called on. Sounds familiar, right? 

``` 
const owner = {
  dogs: 0,
  rescueDogs: function () {
    return ++this.dogs;
  }
}
```
When we call `owner.rescueDogs()`, we're adding to the `dogs` count of our owner. The `rescueDogs` function is a property of the `owner` object. `This` now refers to our owner object!


Constructor and Indirect invocations are a little more complicated, but we'll cover those next time!
Return a Portion of an Array with .slice()
Tags: javascript, programming, array, methods
Published: 2020-11-13 20:24:10

This week I am going to explain the .slice() JavaScript array method. Not to be confused with the .splice() method, .slice() allows you to return a portion, or slice as the name implies, of an array. The .slice() method can take in two arguments. The first argument gives the index of where to begin the slice, while the second is the index for where to end the slice (and is non-inclusive). If no arguments are provided the .slice() method starts at the beginning of the array and continues through to the end, basically making a copy of the entire array. I have seen people use .slice() to make copies of arrays, but if making a copy on an array is what I need to do I prefer to use ... which is the spread operator. Also, .slice() is a non-destructive array method, which means that it does not alter the original array. 

Here is an example of .slice() in action:
```
const arr = ["Lindsay", "Tobias", "Gob", "George Michael"];
let newArray = arr.slice(1, 3);
// Sets newArray to ["Tobias", "Gob"]
```
In this instance, arr.slice(1, 3) starts at the index in the 1 position, and stops at the index in the 3 position returning a new array with the elements at the 1 and 2 indexes while leaving the original array untouched.
Leaving Feedly for Miniflux
Tags: selfhost, productivity, kubernetes
Published: 2020-11-13 21:51:47

---
title: Leaving Feedly for Miniflux
published: true
date: 2020-11-13 19:57:42 UTC
tags: ["selfhost", "productivity", "kubernetes"]
canonical_url: https://www.joshkasuboski.com/posts/switching-to-miniflux/
---

I've wanted to move away from Feedly for awhile and finally found my alternative in Miniflux.

## Why the move

I had been having issues with the Feedly app where it would suddenly sign me out and take a while to log back in. Apparently that's all it takes for me to drop a service… I also wanted to run something myself and possibly build on top of it.

I had contemplated moving to microsub as outlined in my [replacing Feedly](https://www.joshkasuboski.com/posts/replacing-feedly/) post. I tried out [ekster](https://github.com/pstuifzand/ekster) and I think it's still running 🤷‍♂️. I didn't like the readers I tried and wasn't a fan of how ekster doesn't seem to store data persistently.

## Moving to Miniflux

I recently found [miniflux](https://miniflux.app/). It bills itself as “a minimalist and opinionated feed reader”. Minimalist and opinionated is all I can hope to be. Thankfully the [opinions](https://miniflux.app/opinionated.html) aligned pretty well with mine.

It's just a go binary and PostgreSQL. I run the binary on my [kubernetes cluster](https://www.joshkasuboski.com/posts/home-k8s-raspberry-update/) and PostgreSQL on a Lenovo Thinkcentre I recently bought. I'm still not super happy in my openEBS storage so am running the database using [podman](https://podman.io/) with a volume mount directly from the node.

Running containers as a non-root account is pretty easy with podman and can be managed by systemd. I did the below to set it up.

```
podman create --name postgres -v /home/postgres/postgres:/bitnami/postgresql -e POSTGRESQL_PASSWORD=<root password> -p 5432:5432 bitnami/postgresql:13
podman generate systemd postgres -n

```

You'll notice I'm using the bitnami postgresql image. This image doesn't run as root 👍. The output of the `podman generate systemd` can then be copied to `$HOME/.config/systemd/user`. More info can be found on the podman [site](http://docs.podman.io/en/latest/markdown/podman-generate-systemd.1.html#installation-of-generated-systemd-unit-files).

I like the minimal UI and it works pretty well on mobile as well. The delay in fetching feeds took a little getting used to. I did lower the thresholds, which was just an environment variable config. You can see my kubernetes config in [kasuboski/k8s-gitops](https://github.com/kasuboski/k8s-gitops/blob/master/default/miniflux/deploy.yaml)

![miniflux](https://www.joshkasuboski.com/posts/switching-to-miniflux/miniflux.png)

## Moving Forward 🐱‍🏍

With Feedly I had a limited set of feed categories because that was a limitation of the free plan. I want to decide what I actually want now that I have no limits with miniflux.

There is also an API that I want to build some things around. My first thought would be to make a way for others to follow what I follow as well.
Introduction to State Machines with XState and React
Tags: javascript, react, xstate, udemy
Published: 2020-11-13 19:57:25

# My first online course on Udemy

I have recently made a course about creating state machines with XState and using it inside React apps.

State machines with XState is a fresh topic for Frontend development, which allows us to better manage applications state.

If you are new to finite state machines' concepts or if you have ever heard about state machines, but you have no clue what is that about, then go and check on this course.

Check it out: https://www.udemy.com/course/introduction-to-state-machines-with-xstate-and-react

## Sample coding video with Video Player component

I also present a sample coding video from this course in which I code a Video Player component with a cool autoplay option. Video is to be seen on Youtube. Link below:

{% youtube ym8TQ8nLxuY %}

I really appreciate all kinds of feedback! Reviews and comments are welcome :)
🙀 What you were aware to ask about updating React components
Tags: react, webdev, beginners, codenewbie
Published: 2020-11-13 19:48:35

Recent time I've been interviewing a log and I often notice that understanding how an updating of a React components works is the complex theme. I see that's a little strange to ask this but you should know how it works to be an advanced React developer.

Let's start from first question:

## Why component may be updated?
The first thing: state was updated. It doesn't matter if you your new state is the same as old - they have different links that's why React thinks they are different. And the second thing: props was updated. Here the situation is the same as with the state.

Now we understand why component may be updated. The next question:

## What's going on with children components when a parent component was updated?
That's easy: they are updated too. That's all. It doesn't matter if props was the same - they have different links as the states too.

But we can avoid unnecessary updating if the values are the same. I mean if we have state like:
```
const state = {
	name: 'John',
}
```
And after updating we have the same `name: John` then why we should to update component?

So, the next question is:

## How we can avoid unnecessary updating of a component?
There is two variants. First - we can use `PureComponent` for class components or `React.memo` for function components. `PureComponent` shallowly compares the state and props and if there wasn't changes the component won't be updated. `React.memo` works the same but it compares only props.

Here can be the next question:

## How to deep compare the state and the props?
You shouldn't deep compare them because it is very inefficient and will harm performance. But if it is necessary then for the class components you can use `shouldComponentUpdate(nextProps, nextState)` and compare your `this.state` and `this.props` deeply with `nextState` and `nextProps`.
For the functional components you can provide a custom comparison function as the second argument to the `React.memo`. That function takes two parameters: `(prevProps, nextProps)`.

## Conclusion
I hope it will give you more understanding how updating of a React components works. Don't be hesitate to ask your questions about the topic or suggest idea for the next articles.

Happy coding and bye!