teleren/devto huggingface dataset:
Asosiasi profesi, sains, dan iptek (bagian 1)
Tags: writing, productivity
Published: 2021-01-24 21:54:55

# Bagian 1: Aspro bagian dari apa?

Oleh: [Dasapta Erwin Irawan](https://orcid.org/0000-0002-1526-0863)

Disclaimer: 
- Telaah ini dilakukan secara generik, bisa jadi tidak dapat diterapkan ke semua aspro; 
- Bahwa penulis berasal dari kelompok akademik, sehingga tinjauannya sangat mungkin masih "berat sebelah";
- Bahwa aspro sendiri bisa dibangun oleh kelompok profesi bidang akademik, sains, rekayasa, pemerintahan, dll. Jadi pasti akan ada nuansa berbeda.

--- 

Asosiasi profesi (aspro) adalah bagian dari pemangku kepentingan [pembangunan sains dan ipteks](https://peraturan.bpk.go.id/Home/Download/32734/UU%20Nomor%2018%20Tahun%202002.pdf) yang dikelompokkan dalam komponen `masyarakat`. Dalam berbagai telaah akademik tentang hal ini ([ref](https://www.ksi-indonesia.org/assets/uploads/original/2020/07/ksi-1594698887.pdf), [ref](https://www.dpr.go.id/doksileg/proses1/RJ1-20181115-111108-7250.pdf), [ref3](https://www.dpr.go.id/doksileg/proses1/RJ1-20181115-111108-7250.pdf).

![Rekomendasi generik untuk asosiasi profesi](https://pbs.twimg.com/media/Ese4lEKUcAADa44?format=jpg&name=large) 

Tinjauan di atas baru dilihat dari sudut pandang sains dan ipteks, belum dari sudut pandang industri, pemerintahan, dll. Sains dan ipteks sendiri bisa ditinjau dari sisi industri dan pemerintahan. Jadi pemikirannya akan meluas dan memang sangat luas. Tapi setidaknya ada benang merah yaitu aspro sebagai himpunan masyarakat yang berkerja mengembangkan profesi tertentu. 

Keberadaan aspro menghimpun berbagai sub pemangku kepentingan di bidang masing-masing. Sebagai contoh untuk bidang geologi, pemangku kepentingannya diantaranya adalah perguruan tinggi, lembaga penelitian, pemerintah (lokal, regional, nasional), industri, serta masyarakat. Masyarakat di sini bisa diartikan sebagai masyarakat yang berhimpun dalam organisasi atau LSM, bisa juga masyarakat secara individual (lihat gambar). Namun demikian menarik untuk dipelajari mengapa mayoritas keanggotaan mayoritas aspro bersifat homogen. Aspro biasanya didominasi oleh dosen/peneliti atau industri. 

Untuk itu dalam pengelolaannya aspro perlu mengakomodasi kepentingan berbagai pihak. Berbagai kegiatannya perlu mewakili anggotanya yang berasal dari berbagai pihak.
Welcome to the Open Coder
Published: 2021-01-24 21:52:43

## Introduction
**Hello!** My name is Griffin Sullivan. I am a Junior from Raleigh, North Carolina studying Human-Centered Design and Development at Penn State. My coursework is a combination of learning how to design systems and interfaces that solve human problems, and how to go about creating these applications in code. Through my education I have been able to merge my passions for people and technology.

## What's Open Coder?
The Open Coder is all about learning how open source technology can be used to benefit the applications that we create. Although I really enjoy web development, the Open Coder focuses on all different kinds of open source projects affecting multiple areas of technology like testing, DevOps, design, and development.

## My Background in Technology
Like I said before, my coursework at Penn State combines UX design and coding. I have taken multiple classes using Java to learn Object Oriented Programming principles and create final projects using web APIs. I've also taken coursework about web development using JavaScript, HTML, and CSS to gain a better understanding of web technologies like NodeJS. Regarding my design work, I'm currently in my fourth class learning about how to use design thinking and apply a greater understanding of the user to the design of the interface. 

Outside of the classroom, I am also the president of the Emerging Technologies club at Penn State. The goal for our organization is to teach new, industry-standard technologies to students in order to bridge the gap between the classroom and the tech industry. We use Raspberry Pis to teach students about anything from Linux to wiring breadboards. My role within this club has given me the opportunity to research different technologies, learn how they work, and then share that knowledge with my peers.

I have also had the pleasure of interning for Red Hat last summer as a Quality Engineering intern in Raleigh, NC. Although I was working remotely, I learned about the process of testing large-scale applications and was able to learn even more about Linux and open-source technology. During my time there, I got to write Python tests for Red Hat Satellite, verify over 30 bugs, take a Red Hat System Administration course, and write multiple Ansible playbooks that help deploy virtual machines for the Satellite QE team to run tests and verify bugs.

## Where I Hope to Go
As a developer who is passionate about design, open-source technology, and helping people, I want to work in front-end development. I believe this work will give me the greatest exposure to those three passions of mine. I also want to eventually get a MBA which could help me land a job working in a more managerial role. My dream job would be to work as a CTO for a large tech company, so that I could continue to merge my passion for people and technology. 

## Video
Here is a video about Ansible and it's role in Infrastructure-as-Code (IaC). I hope you learn something about how Ansible is being used to create tech infrastructure that is more flexible and reliable.
{% youtube cSaWKfyIW2U %}
Interview Question - How to create a text side by side output in node.js (as a diff). From Vanhack
Tags: devjournal, node, javascript, challenge
Published: 2021-01-24 21:43:22

This actually was an interview question from [VanHack](https://vanhack.com), a platform for remote digital work.

[In my blog i explain the details of this](https://gallant-bell-850d88.netlify.app/2021/january/how-to-create-diff-text-output.html)

They provide you with **2 assessments** and give you **24 hours** to solve it.

Even thou i couldn't pass all the test cases of the first assessment, it teach/refresh a lot of concepts from Data Structures, Algorithms, Buffers & Stream over traditionally file read.

## Key concepts

### [Node.js Buffers](https://nodejs.dev/learn/nodejs-buffers)

A buffer is an area of memory.

A simple visualization of a buffer is when you are watching a YouTube video and the red line goes beyond your visualization point: you are downloading data faster than you're viewing it, and your browser buffers it.

In order words **store data** to be **process later**

### [Node.js Stream](https://nodejs.dev/learn/nodejs-streams)

Traditionally, when you tell the program to read a file, the file is read into memory, from start to finish, and then you process it.
 
Using streams you read it piece by piece, processing its content without keeping it all in memory.

Streams provide two major advantages:
- Memory efficiency
- Time efficiency


### [ReadLine using CreateReadStream in Node](https://nodejs.org/docs/latest-v12.x/api/readline.html#readline_example_read_file_stream_line_by_line)

### [Know your BigO or Asymptomatic Analysis of Data Structures](https://www.bigocheatsheet.com/)


Source 
[Github code](https://github.com/eulier1/sidebyside-text-column)
Introduction to Me!
Published: 2021-01-24 21:38:23

What's up, everyone! My name is Anthony Tata, and I'm a senior (sad) majoring in Health Policy and Administration (*gasps* not an IST major) with a double minor in Psychology and...IST! I grew up in the suburbs of Boston (*gasps again* not outside of Philly) and I love my incredible family! Throughout my entire life I've been extremely interested in pursuing so many different fields, but more than anything, I really love getting to know people's stories, and genuinely helping people! I hope to build a career of my eclectic interests and passion for helping others. I have a pretty busy life, and technology is how I keep myself organized, acclimated, and routined for every hectic day of Zoom University I attend! My hope is to help other students who are in a variety of commitments learn more about how technology can leverage different aspects of their lives, from team-building services to personal financing, I'm extremely reliant on technology!

I'm involved in several different organizations on campus that have all contributed to aspects of my personality, and I'm forever indebted to this incredible school for helping me meet some of the closest, most supportive friends that always help me achieve my goals! I'm heavily involved in Penn State's dance MaraTHON (more commonly known as THON) where I serve this year as a Hospitality captain. I'm also a member of the co-ed business fraternity Alpha Kappa Psi (AKPsi), a camp counselor for the organization Camp Kesem, and a tour guide through Penn State's Lion Scouts! Having experience in various leadership roles in these programs, I'm constantly thrown into scenarios where I need to seek new technology platforms to help me achieve my goals. In college, I've learned so much about different systems that I will take with me into my future endeavors. 

If we're being honest, I still have a lot to learn, especially in the realm of technology. I don't feel as though I have a strong background in coding or complex software at all and haven't always felt like the IST minor has helped me learn too much. However, I'm excited for this class to challenge me and help me grow! 

Upon graduation, I will be starting my career through Highmark Health in Pittsburgh through their Sales and Development Program. I hope to learn more about tools in this class that can help leverage my sales skills.

Within my position in THON, I've quickly had to adapt to the service Microsoft Teams. Personally, I love this service, as it helps me "keep all my eggs in one basket" and today, I'll explain to you guys how to effectively utilize this service. Click the video here: https://youtu.be/xBM2CbrvBa8 

I can't wait to see where this class takes me, and I appreciate you for reading along!
Doodle 0.4.0 released
Tags: kotlin, webdev, javascript, opensource
Published: 2021-01-24 21:32:42

[Doodle](https://github.com/nacular/doodle) is a pure Kotlin UI framework for the Web, that lets you create rich applications without relying on Javascript, HTML or CSS. Check out the [documentation](https://nacular.github.io/doodle) and [tutorials](https://github.com/nacular/doodle-tutorials) to learn more.

Highlights include:

* Improved Font support with the ability to load fonts from file urls and oblique font styles
* New property delegates ([renderProperty](https://github.com/nacular/doodle/blob/master/Core/src/commonMain/kotlin/io/nacular/doodle/core/View.kt#L895), [styleProperty](https://github.com/nacular/doodle/blob/master/Core/src/commonMain/kotlin/io/nacular/doodle/core/View.kt#L883)) that automate trigger re-render and style notifications
* [Pointer](https://github.com/nacular/doodle/blob/master/Core/src/commonMain/kotlin/io/nacular/doodle/event/PointerListener.kt), [PointerMotion](https://github.com/nacular/doodle/blob/master/Core/src/commonMain/kotlin/io/nacular/doodle/event/PointerMotionListener.kt), and [Key](https://github.com/nacular/doodle/blob/master/Core/src/commonMain/kotlin/io/nacular/doodle/event/KeyListener.kt) listener DSLs for more compact consumption of a single event type
* DSLs to simplify usage of ListEditor, [Layouts](https://github.com/nacular/doodle/blob/master/Core/src/commonMain/kotlin/io/nacular/doodle/core/Layout.kt#L130) that only position, and CommonButtonBehavior that just render
* [TextField](https://github.com/nacular/doodle/blob/master/Controls/src/commonMain/kotlin/io/nacular/doodle/controls/text/TextField.kt#L21) now supports font/color for placeholder
* Added support for text decorations to StyledText

See the full [release notes](https://github.com/nacular/doodle/releases/tag/v0.4.0) for more details
Machine Learning Log 5: a brief overview of unsupervised learning
Tags: machinelearning, beginners, unsupervisedlearning
Published: 2021-01-24 21:18:52

## What is unsupervised learning? 
Unsupervised learning describes a subset of problems in machine learning where we want to find relationships in data, but we don't have the ability to "teach" or "supervise" the model with target outputs. This is what distinguishes this type of problem from supervised learning: The data is not labeled. Instead you give your model an input, which is your data, and the model, as its output, tries to derive structure based on the inherent similarities and groupings between various inputs. In unsupervised learning the model is looking for a description that summarizes the data. 

Here are some ways to divide up the data:

* Clustering: no labels are provided to the algorithm. Instead it separates data into different groups based on similarities between features in the data. 

* Density estimation: Summarizing the probability distribution that appears to give rise to the observed patterns in the data.

* Dimensionality reduction: A technique for finding a smaller set of input variables that retain the same properties as the original dataset, to improve the performance in predictive modeling that you might later feed these inputs to.


## Some uses for Unsupervised Learning

* Annotating large datasets: Say we have a massive amount of data and there's just too much to label manually. Unsupervised learning can help fill that gap.
* Data Mining: you have data, but you aren't yet sure what classes are present in the data, or even how many different classes there are. 
* Data Preparation: maybe you want to get an idea of the structure of your data *before* devising a classifier model.

So unsupervised learning can be used on its own, or as one of the intermediary steps between data preparation and predictive modeling. 

There is much more to be said about unsupervised learning, and I haven't really scratched the surface of it in my studies, so I will not be the one to say those things at this time. 😉

I hope you enjoyed learning a little bit about the possibilities of machine learning today.
Review Emails with ActionMailer::Preview
Tags: rails, tutorial
Published: 2021-01-24 20:40:58

---
canonical_url: https://community.codenewbie.org/mikerogers0/review-emails-with-actionmailer-preview-3nom
---

{% youtube 1HEClpa8A3M %}

Rails is one of my favourite frameworks, I think because it ships with a little known feature called [ActionMailer::Preview](https://guides.rubyonrails.org/action_mailer_basics.html#previewing-emails), which I really want every Rails developer to know about :D

It renders your mailers & lets your preview them in the browser, which means if you want to tweak some code or totally redesign it, you can just visit `http://127.0.0.1:3000/rails/mailers` on your local development machine & get building.

## Code Sample

```ruby
# spec/mailers/previews/user_mailer_preview.rb
# Preview all emails at http://localhost:3000/rails/mailers
class UserMailerPreview < ActionMailer::Preview

  def user_welcome_notification
    UserMailer.user_welcome_notification(user)
  end

  private

  def user
    @user ||= FactoryBot.build(:user)
  end
end
```

## FactoryBot For Sample Data

I used to use `User.first` as the starting point for my sample data, but I think a better approach is to use the [FactoryBot](https://github.com/thoughtbot/factory_bot) factories. The main advantage is it encourages me to write better factories & increases the value for money they offer.
Java: Files.readAllBytes()
Tags: java
Published: 2021-01-24 21:02:16

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/p98d7ep91yy1hxzmnxde.jpg)
Files.readAllBytes() reads all the bytes from a file #java. Check out STJ: Java fantasy card game at https://summonthejson.com/products/summon-the-json-java-deck
Workspaces em Golang
Tags: go, shell, workstations
Published: 2021-01-24 20:54:30

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/pytibxnuyh7km1degs76.png)


Em complemento ao artigo anterior referente <a href="https://dev.to/higordiego/introducao-ao-golang-4gj3">a instalação do Golang </a>, teremos que entender agora o conceito de Go Workspace, pois no momento da instalação o golang irá definir o local no qual o código ficará!

Por convenção, todo o seu código Go deve residir em um único espaço de trabalho chamado de worskpace. O workspace é que um diretório em seu sistema de arquivos cujo o caminho é armazenado na variável de ambiente GOTPATH.

No workspace temos três pasta:

<strong> 1 - pkg </strong>

Nessa pasta ficará os pacotes compartilhados da aplicação golang.

<strong> 2 - src </strong>

Nessa pasta é onde escrevesse o código fonte de cada aplicação.

<strong>3 - bin </strong>

Nessa pasta ficará os executáveis do programa.

<hr>

A variável de ambiente chamada de <i>GOPATH</i> especifica a localização da workspace. 

Caso não se sinta a vontade com diretório padrão do <i>GOPATH</i>, poderá modificar usando o simples comando no seu terminal.

```shell

$ mkdir $HOME/my_workspace
$ export GOPATH=$HOME/my_workspace

```

E para deixar  sempre atualizado esse comando em seu terminal, salvar no arquivo <i> ~/.bash_profile </i> , e se utilizar o shell <strong>Zsh</strong> use o arquivo <i> ~/.zshrc </i>.

Segue o comando para salvar no arquivo:

```shell

export GOPATH=$HOME/my_workspace

```

O GOPATH por padrão fica no caminho de <i>$HOME/go</i> em sistema Unix e no Windows em <i>%USERPROFILE%\go</i>.

<hr>

Como sempre utilizamos pacotes de terceiros para escrever o código, é preciso organizá-los de forma simples, com intuito de identificar a origem quando necessário.

Uma boa forma de utilizar a organização do import é usando uma pasta do Github dentro da sua <i>workspace</i>.

```shell
$HOME/my_workspace
├── bin
├── pkg
└── src
  └── github.com
  └── higordiego
    ├── slack_bot
    └── pacote_example
```

<hr>

Por fim, com a workspace configurada conforme orientado, será possível começar a escrever o códigos em golang.

<h3>Links úteis:</h3>
 <a href="https://www.callicoder.com/golang-installation-setup-gopath-workspace/
"> Golang Installation, Setup, GOPATH, and Go Workspace </a>
<a href="https://codingbee.net/golang/setup-a-workspace-for-go"> Setup a Workspace for Go  </a>
<a href="https://golang.org/doc/gopath_code.html"> How to Write Go Code (with GOPATH) </a>


<strong> Próximos capítulos em breve. </strong>
Get Diff and Patch Html
Tags: dotnet
Published: 2021-01-24 20:40:00

<sub><span>Photo by <a href="https://unsplash.com/@markusspiske">Markus Spiske</a> on <a href="https://unsplash.com/s/photos/different>Unsplash</a></span></sub>

In order to get diff and patch from text or any format, there are many libraries in .net.

I'll try [Diff.Match.Patch](https://github.com/pocketberserker/Diff.Match.Patch) based on [Google library](https://github.com/google/diff-match-patch).

#Diff

Diff are made of:
- text (part of the text related)
- operation to be applied (delete / insert / equal)

It's easy to get diff:

```csharp
	string a = "<SPAN TITLE=\"i=0\">a&para;<BR></SPAN><DEL STYLE=\"background:#FFE6E6;\" TITLE=\"i=2\">&lt;B&gt;b&lt;/B&gt;</DEL><INS STYLE=\"background:#E6FFE6;\" TITLE=\"i=2\">c&amp;d</INS>";
	string b = "<SPAN TITLE=\"i=0\">testa&para;<BR></SPAN><DEL STYLE=\":#FFE6E6;\" TITLE=\"i=2\">&lt;B&gt;b&lt;/B&gt;</DEL><INS STYLE=\"background:#E6FFE6;\" TITLE=\"i=2\">c&amp;d</INS>";

var diffs = DiffMatchPatchModule.Default.DiffMain(a, b);

```
Please note that diffs will contains a lot of Equal diff !
Result: ![Result](https://dev-to-uploads.s3.amazonaws.com/i/lqpzp3r1t4ykytbzr9ir.png)

# Patch

It's simple too to get patch from multiple texts!

```csharp
	string a = "<SPAN TITLE=\"i=0\">a&para;<BR></SPAN><DEL STYLE=\"background:#FFE6E6;\" TITLE=\"i=2\">&lt;B&gt;b&lt;/B&gt;</DEL><INS STYLE=\"background:#E6FFE6;\" TITLE=\"i=2\">c&amp;d</INS>";
	string b = "<SPAN TITLE=\"i=0\">testa&para;<BR></SPAN><DEL STYLE=\":#FFE6E6;\" TITLE=\"i=2\">&lt;B&gt;b&lt;/B&gt;</DEL><INS STYLE=\"background:#E6FFE6;\" TITLE=\"i=2\">c&amp;d</INS>";
	string c = "<SPAN TITLE=\"i=0\">a&para;<BR></SPAN><DEL STYLE=\"background:#FFE6E6;\" TITLE=\"i=2\">mon tittre en Or&lt;B&gt;b&lt;/B&gt;</DEL><INS STYLE=\"background:#E6FFE6;\" TITLE=\"i=2\">c&amp;d</INS>";

	var firstPatch = DiffMatchPatchModule.Default.PatchMake(a, b);
	var secondPatch = DiffMatchPatchModule.Default.PatchMake(a, c);
	DiffMatchPatchModule.Default.PatchApply(secondPatch, DiffMatchPatchModule.Default.PatchApply(firstPatch, a)[0].ToString());

```

Ouptut: 
```text
<SPAN TITLE="i=0">testa&para;<BR></SPAN><DEL STYLE=":#FFE6E6;" TITLE="i=2">mon tittre en Or&lt;B&gt;b&lt;/B&gt;</DEL><INS STYLE="background:#E6FFE6;" TITLE="i=2">c&amp;d</INS>
```

Please note that **DiffMatchPatchModule.Default.PatchApply(firstPatch, a)** outputs object[] !


Hope that helps !
React useState State Hook
Tags: javascript, react
Published: 2021-01-24 20:04:46

# Introduction
One of the biggest perks about React is the ability to maintain state both in a component and at the top level of your application if you include a state=management package such as Redux. Today, I want to talk about the React State Hook and how it has changed the way we manage state and, most importantly, cleaned up the code involved!

# At A Glance
[Looking towards the docs](https://reactjs.org/docs/hooks-state.html) for useState(), we catch a glimpse of how we go about using it:

```react
import React, { useState } from 'react';

function Example() {
  // Declare a new state variable, which we'll call "count"
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}
```

I'm going to explain what's happening, but let's visit the old way doing things below:

```react
import React, { Component } from 'react';

export default class Example extends Component {
    constructor(props) {
        super(props)
        this.state = {
            count: 0
        }
    }

    handleClick = () => {
        this.setState({ count: count + 1})
    }

    render() {
        return (
            <div>
                <p>You clicked {this.state.count} times</p>
                <button onClick={this.handleClick}>
                    Click me
                </button>
            </div>
       );
    }
}
```

Geeze, that's a lot of population in our code for something so simple. Enter `useState`...

# How `useState` Is Applied
If we pay attention to this line: `const [count, setCount] = useState(0);`, you'll see a deconstructed method for handling the state of `count`. The `setCount` method acts as a function that compares to triggering `this.setState({})` in the older way of handling state changes.

This can be seen where it is applied in the code snippet above for our button:
```react
<button onClick={() => setCount(count + 1)}>
    Click me
</button>
```

`setCount` is handling all of our logic which would normally be way more drawn out. Thanks to our React State Hook, our code is way more clean and readable. 

# Conclusion
React Hooks are incredible useful and time saving. There are more of them out there, and they all solve a problem that we developers would otherwise run into at some point or another. If you're new to React, this is going to change the game for you! Please enjoy, and as always, leave a comment if you have any questions!

Happy Sunday!