teleren/devto huggingface dataset:
React.js–Get started in Dart #2
Tags: react, dart, javascript, webdev
Published: 2019-01-08 11:08:47

In [Part 1](https://dev.to/graphicbeacon/reactjsget-started-in-dart-1-37ko) of this series, we built our `Greeting` component that took a name parameter and rendered this onto the screen. Here's what the snippet for this looked like:

```dart
var Greeting = createReactClass({
  "render": allowInteropCaptureThis(
    (ReactClassInterface self) => React.createElement(
      'h1', null, ['Hello, ${getProperty(self.props, "name")}']),
  )
});
```

And we used it by doing:

```dart
void main() {
  ReactDOM.render(
    React.createElement(
      Greeting,
      makeJsObject({
        'name': 'John'
      }),
      null,
    ),
    querySelector('#output'),
  );
}
```

In this part, we will refactor our solution and proceed to build out the stateful component example. Here's the video:

{% youtube bdrqQXg2Gjs %}

→ [**Watch on YouTube**](https://youtu.be/bdrqQXg2Gjs)
→ [**Get the source code**](https://github.com/graphicbeacon/reactjs-get-started-in-dart/tree/part-2)

---

## Conclusion

I hope this was insightful and you learned something new today.

**Subscribe to [my YouTube channel](https://www.youtube.com/channel/UCHSRZk4k6e-hqIXBBM4b2iA?view_as=subscriber) to be notified when Part 3 is ready**. Thanks!

**Like, share and [follow me](https://twitter.com/creativ_bracket)** 😍 for more content on Dart.

## Further reading

1. [js package](https://pub.dartlang.org/packages/js)
2. [How to Use JavaScript libraries in your Dart applications](https://dev.to/graphicbeacon/how-to-use-javascript-libraries-in-your-dart-applications--4mc6)
3. [**Full-stack web development with Dart**](https://bit.ly/fullstackdart)
Basic commands to start Git and GitHub
Tags: git, linux, github, motivation
Published: 2019-01-08 10:43:33

---
title: Basic commands to start Git and GitHub
published: true
description: 
tags: git, linux, github, motivation
---


Hello Folks, Git and GitHub are very useful tools for people like us.
It's a good habit to make notes of anything we are learning and there are many online tools which make note taking easier.
[notepad.pw](https://notepad.pw) and [simplenote](https://simplenote.com/) are some clean and simple tools for note-taking. Happily, I have also developed this good habit and created a document while learning Git.
Some good [Dev.to](https://dev.to/) posts motivated me to pull out those documents and write them here also, which might help someone here and definitely me also.
So here are the basics commands to start Git and host source code on GitHub(remote repository)

Install git.
`sudo apt-get install git`
	
Create a git repository locally in a directory.
`git init`

Set your globle user details.
`git config --global user.name <name>`
`git config --global user.email <email>`

Create a README file to store the description of the repository.
`touch README.md`

Create a file to ignore some files and directories from the repository.
(write the relative path of files and directory, wild cards can also be used here)
`touch .gitignore`

Create project's files or paste the existing files in current directory.

Add changed files for committing.
`git add <filename>`
or add all files at once
`git add .`

Check the status of the repository.
`git status`

It's time to commit the first changes locally.
`git commit -m "initial commit"  <file>`

Everything we did is stored locally, Now we will link the local repository to a remote repository.

Create a fresh repository on GitHub (now we can create unlimited private repos on GitHub also, Thanks GitHub for this new year gift 😊).
Click that green button 'Clone or download' and copy the URL of the repository.

Link the remote repository with the local repository.
`git remote add origin <repo_url>`

Push the changes to the master branch of remote repository.
`git push -u origin master`

**One extra command. 💡**
If you accidentally commited changes or want to undo the commit these commands can save you time.
`git reset --hard HEAD^`
`git push -f`

Thank you for reading 😊. 
There are much more commands out there. These are only the basics which can help in getting started. Please let me know if have some doubts, I am happy to help you out.
The Best Way To Unsubscribe RxJS Observables In The Angular Applications!
Tags: angular, javascript, node, webdev
Published: 2019-01-08 09:32:29

---
title: The Best Way To Unsubscribe RxJS Observables In The Angular Applications!
published: true
description: An epic journey to RxJS .subscribe()-less Angular applications 
tags: angular,javascript,node,webdev
cover_image: https://thepracticaldev.s3.amazonaws.com/i/zg4lqqxzx8qb24ej64o6.jpg
canonical_url: https://medium.com/@tomastrajan/the-best-way-to-unsubscribe-rxjs-observable-in-the-angular-applications-d8f9aa42f6a0
---

# What Are We Going To Learn?

On our journey we will go through various possible solutions to subscribing to RxJs Observable.

1. The .subscribe() aka “The Memory Leak”
2. The .unsubscribe()
3. Let’s get declarative with takeUntil
4. Use the take(1) for initialization
5. The fabled | async pipe
6. The detour — | async pipe taken too far 😵
7. The final destination — NgRx Effects



[Read more...](https://medium.com/@tomastrajan/the-best-way-to-unsubscribe-rxjs-observable-in-the-angular-applications-d8f9aa42f6a0)
Flutter Grocery Shopping App Fully Working Template
Tags: flutter, dart, flutterapp, fluttermobileapp
Published: 2019-01-08 08:45:15

---
title: Flutter Grocery Shopping App Fully Working Template
published: true
description: 
tags: flutter, dart, flutter app, flutter mobile app
---

Flutter Grocery Shopping App

Grocery Shopping Flutter app is created as a wonderful solution for any food shop Flutter App UI template.



It is a template for a Flutter developer that want to create a grocery application with a clean design. The template is only lay outing without data flow and communication with the backend system. This Flutter UI Template can reduce your development time and well loved by the developer that hate lay outing design!

You can use this Flutter app as one big supermarket app to sell the product of your store. This app makes easy for the user to buy the product from the store with easy steps and store can get easy order.

Source Code - https://lnkd.in/fdr9qWw
How to secure and manage secrets using Google Cloud KMS
Tags: security, programming, gcp, git
Published: 2019-01-08 07:03:38

---
title: How to secure and manage secrets using Google Cloud KMS
published: true
description: Secrets + Google KMS + Git = Awesome
tags: security,programming,gcp,git
cover_image: https://cdn-images-1.medium.com/max/800/1*_Cf1p5h7nfoNfo4wNswuNw.jpeg
---

Let’s jump right in. We all know it’s a bad idea to store application secrets within our code. So why we are storing there it still? Let’s take an example.

We could store those secrets in a file and add it to the gitignore so it’s not added to version control. But there are a couple of hurdles:

How do we manage those secrets?
What happens when the local copy is deleted?
How do we share it with other developers?
How do we manage versioning of those secrets during changes and an audit log of who changed what?
A lot of questions! So we end up storing it within the code, since it’s too much complexity to deal with.

For a big application or application which needs a higher level of security, we can use Production grade secret management services like [Hashicorp Vault](https://www.vaultproject.io/).

In this article, we will look at a decent approach in dealing with secrets while still achieving better security. We are going to achieve this using Google KMS + Git + IAM + automation.

[Read more](https://medium.freecodecamp.org/securing-managing-secrets-using-google-cloud-kms-3fe08c69f499)
Read the markdown file data into display the content using reactjs
Tags: help, react, opensource, contributorswanted
Published: 2019-01-08 05:23:33

---
title: Read the markdown file data into display the content using reactjs
published: true
tags: #help, #reactjs, #opensource, #contributorswanted
---

I have listed of markdown files data, it will read the data and display the content using reactjs. Anyone will give ideas or provide solutions?

*Repo:* https://github.com/10secondsofcode/10secondsofcode
Tweet with "#obniz"! Flag will shake!
Tags: diy, obniz, ai, opencv
Published: 2019-01-08 04:55:59

---
title: Tweet with "#obniz"! Flag will shake!
published: true
description: It shake a flag when someone tweet with hashtag “#obniz”.
tags: DIY, obniz, AI, OpenCV
---

## How it works
It shake a flag when someone tweet with hashtag “#obniz”.

![](https://storage.obniz.io/images/f46c7a958f1e4bff1526175174901)

## Materials
1. obniz – 1
1. servomotor – 1
1. flag – 1
1. battery or usb adaptor & cable – 1


## Program
https://obniz.io/explore/1
BLE and Slack Notification
Tags: diy, obniz, ai, opencv
Published: 2019-01-08 04:52:38

---
title: BLE and Slack Notification
published: true
description: HandsFree, Send message “in home” or “leaving” on slack.
tags: DIY, obniz, AI, OpenCV
---

![](https://storage.obniz.io/images/c1d1f44269db1f721526177613300)

## How it works
HandsFree, Send message “in home” or “leaving” on slack.

obniz is monitoring BLE advertisements.
When people who has BLE ad App, obniz found it and notify it to program.
Then program calls SlackAPI.


[![IMAGE ALT TEXT HERE](http://img.youtube.com/vi/Y7VkO3yHjoE/0.jpg)](http://www.youtube.com/watch?v=Y7VkO3yHjoE)

## Program
https://obniz.io/explore/7
Google Home Integration
Tags: diy, obniz, ai, opencv
Published: 2019-01-08 04:45:37

---
title: Google Home Integration
published: true
description: 
tags: DIY, obniz, AI, OpenCV
---

![](https://thepracticaldev.s3.amazonaws.com/i/supuhhmdqixfnxcy67qi.png)

## How it works

Controlling a Trash by just saying “OK Google Open the Trash!”
Google Home already has integration with IFTTT.
And IFTTT has Webhooks integration.

[![IMAGE ALT TEXT HERE](http://img.youtube.com/vi/OWMZR7nxphQ/0.jpg)](http://www.youtube.com/watch?v=OWMZR7nxphQ)
obniz has a messaging API.
It is easy to send message from any other webservices to obniz.
By adding Webbhooks to obniz on IFTTT, GoogleHome integrasion is as easy as possible.

![](https://storage.obniz.io/images/4f152b1f1a39cdfc1526176449656)

## Materials
-obniz – 1
-battery or usb adaptor & cable – 1
-Servo motor & Trash – 1
-Steps
-Step 1
-Connect Servo motor to an obniz.
-like

1. io1: GND,
1. io2: VCC,
1. io3: signal
Then power up your obniz.

![](https://storage.obniz.io/images/fd422866975297751526176453621)

## Step 2
Add webhook on IFTTT.
![](https://storage.obniz.io/images/c35c92f27cf3bd011526176456275)

## Step 3
Write code below.
And run it on HTML or nodejs.

## Program
https://obniz.io/explore/5
Docker command to try the Ionic Preview app
Tags: docker, ionic
Published: 2019-01-08 04:13:00

---
title: Docker command to try the Ionic Preview app
published: true
description: 
tags: Docker, Ionic
---


    docker run --rm -p 8100:8100 --namionic node:8 bash -c \
      "git clone https://github.com/ionic-team/ionic-preview-app.git; cd ionic-preview-app &&\
      npm install && npm install -g ionic && ionic serve"

    open http://localhost:8100
There is no official style guide for React
Tags: react, styleguide
Published: 2019-08-02 11:10:08

---
title: There is no official style guide for React
published: true
tags: react, styleguide
canonical_url: http://metamn.io/react/there-is-no-official-style-guide-for-react/
---

And we clearly miss it.

<!--more-->
## Style guides

Style guides associated with programming languages enhance code quality and code reuse.

When code follows a style guide it is easy to understand and to extend by anybody else who also follows the same style guide.

Usually a style guide incorporates industry best practices. It does without doubt, thus adopted by many, offering a true relief for its users.

React, unfortunately, has no official style guide provided by Facebook. This role is taken voluntarily by AirBnb, and it is questionable.

Just some bits:

- Use `.jsx` as file extension instead of `.js` — a suggestion with _doubt_, against the gut, at least for me personally.
- Pass params as list instead of array, which contradicts the [loose coupling](https://alistapart.com/article/coding-with-clarity#section3) general coding principle.

```
// bad
function getFullName(user) {
  const firstName = user.firstName;
  const lastName = user.lastName;

  return `${firstName} ${lastName}`;
}

// good
function getFullName(user) {
  const { firstName, lastName } = user;
  return `${firstName} ${lastName}`;
}

// best
function getFullName({ firstName, lastName }) {
  return `${firstName} ${lastName}`;
}
```

As a conclusion I do not use any styleguide for now. I rather wait for the official styleguide to come out.

It’s not that the AirBnb styleguide is wrong. The fact is that even React itself doesn’t stick to it.

## Update

- [Dan Abramov explains](https://overreacted.io/writing-resilient-components/) why React has no official style guide.


## Resources

- [The AirBnb style guide with a contradictory best practice suggestion](https://github.com/airbnb/javascript#destructuring)
- [Coding with clarity](https://alistapart.com/article/coding-with-clarity#section3)
He's Back
Published: 2019-01-08 03:05:29

---
title: He's Back
published: true
description: 
tags: 
---

So it's been a couple days. Not a daily habit yet. Seems like a good thing to
do though, so I'll do my best to stick with it.

What have I done since the last post.

I've started worked on the Zip project. I will admit though that I haven't been
on top of the C++ reading. Just moved to a new place so I've been a little
caught up in that. The zip project though is going decently so far. I've
implemented the basic huffman compression algorithm.

I created my own special magic number that of course spells out my initials,
IDJL. After that, I store the size of the uncompressed file as an 8 byte value. Then comes the compressed tree. 0 represents a parent node and 1 represents a leaf node (after a 1, I then store the character at that leaf in a byte). An important note that I had to think about so that I could understand how this compression was valid is that a parent node is guaranteed to have two children (i.e. the tree is 'full'; a node has either 0 or 2 children).

Then comes the compressed data. I struggled with figuring out how to output
bit by bit in C++. I then came to the conclusion that you simply format it byte by byte and forfeit adding a couple extra bits at the end (max 7 extra bits).
This is possibly one of the reasons to have the uncompressed file size. Either way, that's what I'll be using it for.

And that's it so far. Next step will just be to hook it up to the display
service so that the executable displays statuses as the file is compressed.
Of course after that it will be decompression. I was also thinking about
implementing arithmetic coding. I've seen that around and it's piqued my
curiousity. We'll have to see though. I'm trying to get back on the Andrew Ng
ML course that I started a while back. Goal is to have at least the first week
reviewed by this weekend. I'll try to continue reading the Effective Modern C++ book on the side if I have time; it will be useful eventually.

I am flitting back and forth between projects. Hopefully I can relax that habit this term and just get the main goals done (Zip project
and ML course). We'll see what I can do. That's all for now.

Oh wait yeah how could I forget. Had my first day at Ritual today. Very
interesting place. Very different than Shopify in many ways, including
development. Definitely less hand-holding on the first day which I found quite refreshing. Maybe that will come during orientation next week. Either way, I think there is some serious potential here to have some real impact.
What podcasts should I be listening to in 2019?
Tags: discuss, podcast
Published: 2019-01-08 02:49:10

---
title: What podcasts should I be listening to in 2019?
published: true
description: 
tags: discuss, podcasts
---

Hey DEV-ers! I really got into podcasts last year and I am looking for more to check out. What podcasts are you currently digging? What should I check out?
I'm a Google Code-in 2018 Finalist - I Need Help 😓
Tags: help, discuss, askdev, opensource
Published: 2019-01-08 02:49:05

---
title: I'm a Google Code-in 2018 Finalist - I Need Help 😓
published: true
description: 
tags: help, discuss, askdev , opensource
---
I'm Going Totally To-The-Point

I'm a Google Code-in Finalist of this year and I'm supposed to get a T-shirt and a Hoodie

#### My Chest is : 45 Inch
#### Sleeve Length : 22 Inch
#### Body Length : 31 Inch

And Here's The Size Chart they provided: 

![Size Chart Loading...](https://thepracticaldev.s3.amazonaws.com/i/35kdrko7lahyfkcx7h49.jpg)

T-shirt size is fine for me , XL would be perfect but **There's No Size Group For Hoodies Which Matches My Requirements!!** 😣😣

What Should I Do?

In the email which instructed me about steps to get the prizes , there was a mention to contact _GoogleOpenSource[at]shumsky.com_ for anything related t-shirt/hoodie. 

I emailed at it explaining my problem but surprisingly their staff thinks that **XL of Hoodie will fit me** 😒 I mean, you can look into the chart yourself , XL is nowhere near my requirements!

I tried explaining and suddenly got a unexpected Out Of Office Email 😯 

Yesterday Evening (January 7 Evening , Indian Standard Time) , She (I hope she's she) replied : 
> Hi!

>I spoke with the factory today and they confirmed that the garments run true to size so please order the size you would normally wear!

>Thanks,

>[Her First Name]

I don't really understand what she meant, if there're no size group that matches my requirements , **how I'm supposed to order the size I would normally wear??**😒

I also emailed at _gci-support[at]google.com_ explaining my problem but nah... No reply!😣

Now , I Don't Understand What Should I Do? Please Give Me Some Suggestions?
First Milestone to get familiar with Git
Tags: guidingtheory, thinkable, tools, undefined
Published: 2019-10-01 16:47:58

---
title: First Milestone to get familiar with Git
published: true
cover_image: https://esabook.files.wordpress.com/2019/01/capture.png
tags: Guiding theory,Thinkable,Tools,Undefined
canonical_url: https://esabook.wordpress.com/2019/01/08/first-milestone-to-get-familiar-with-git/
---

Here is just my note for little imagine-inspiration.

Please read each terminology about what is and why should happen, **don’t read the command** if you not familiar with it. There regularly order from initial basic:

1. [Head](https://git-scm.com/book/en/Git-Internals-Git-References), [Branch](https://git-scm.com/docs/git-branch)
2. [Init](https://git-scm.com/docs/git-init)
3. [Clone](https://git-scm.com/docs/git-clone)
4. _[Fork](https://git-scm.com/book/en/GitHub-Contributing-to-a-Project)_
5. [Checkout](https://git-scm.com/docs/git-checkout)
6. [Commit](https://git-scm.com/docs/git-commit)
7. [Tag](https://git-scm.com/docs/git-tag)
8. [Stash](https://git-scm.com/docs/git-stash)
9. [Merge](https://git-scm.com/docs/git-merge)
10. [Rebase](https://git-scm.com/docs/git-rebase)
11. [Fetch](https://git-scm.com/docs/git-fetch)
12. [Push](https://git-scm.com/docs/git-push)
13. [Pull](https://git-scm.com/docs/git-pull)
14. [Reset](https://git-scm.com/docs/git-reset)
15. [Reverse](https://git-scm.com/docs/git-revert)
16. [Cherry Pick](https://git-scm.com/docs/git-cherry-pick)
17. [Patch](https://git-scm.com/book/en/v2/Appendix-C:-Git-Commands-Patching)

Goto the official document **[https://git-scm.com/docs](https://git-scm.com/docs)**

Simple good tools for GUI-ing git:

1. [GitKraken](https://www.gitkraken.com/)
2. [SourceTree](https://www.sourcetreeapp.com/)
3. [Git Desktop](https://desktop.github.com/)
4. IDE – like Atom, Sublime, VS Code, Intelij, Visual Studio, RAD, etc
5. [more](https://git-scm.com/download/gui/windows) . . .
6. Git Flow or Trunk??
BitBucketからGitHubのプライベートリポジトリに引っ越した
Tags: bitbucket, github, japanese
Published: 2019-01-08 00:53:58

---
title: BitBucketからGitHubのプライベートリポジトリに引っ越した
published: true
description: 
tags: bitbucket,github,japanese
canonical_url: https://crieit.net/posts/BitBucket-GitHub
---

GitHubのプライベートリポジトリが無料でも作れるようになりました！　無料で共有できるのは３人までですが、僕がやっているような個人開発は一人で使うことが多いため非常に嬉しいです。

ずっとプライベートリポジトリとしてBitBucketを使っていましたが、重かったり使いづらかったりで不満はあり、GitHubを使いたかった気持ちはあったので、とりあえず一番頻繁に使っているCrieitのリポジトリをBitBucketからGitHubに引っ越ししてみました。

## GitHubでプライベートリポジトリを作成

まずはGitHubにて空のプライベートリポジトリを作成しておきます。

![Create a New Repository.png](https://thepracticaldev.s3.amazonaws.com/i/zcferkvse0xvxaaaweer.png)

## 各環境のremote参照を変更

開発環境、本番環境など、Gitで参照しているremoteのURLを変更します。とりあえず現状のURLを見てみます。

```sh
$ git remote -v
origin  git@bitbucket.org:alphabrend/dev.git (fetch)
origin  git@bitbucket.org:alphabrend/dev.git (push)
```

URLを変更します。

```sh
git remote set-url origin git@github.com:dala00/crieit.git
```

再度確認してみると変更されていることがわかります。

```sh
$ git remote -v
origin  git@github.com:dala00/crieit.git (fetch)
origin  git@github.com:dala00/crieit.git (push)
```

実際にpushしたりする際にはGitHubの方にも鍵を登録しておく必要があります。ローカルはBitBucketにもGitHubにも登録しているかもしれませんが、本番環境は個別に登録していく必要がある場合が多そうです。

諸々準備できたらfetchしたりpushしたりを試してみてください。（まだざっとしか試していないのでうまくいかなかったらすみません…）

## 草も移動するっぽい

多分ちゃんと草も移動してくれてるっぽい（？）です。

![contribution.png](https://thepracticaldev.s3.amazonaws.com/i/r78a0ma2hm9vaadwto1l.png)

## まとめ

あとはCIとかも引っ越す必要がありますのでまた対応したら記事を書いていきます。

Crieitはdev.toとQiitaを参考に作った、というところからdevという変なリポジトリ名になっていたのですが、この機会にちゃんとしたリポジトリ名にできたのも良かったです。
New Developer Year Resolutions!
Tags: career, discuss
Published: 2019-01-08 00:42:42

---
title: New Developer Year Resolutions!
published: true
description: 
tags: career, discuss
---

What are your development resolutions this new year? Some of the things I plan to work on include: 

1. Be more mindful about pull requests.
This year I plan to spend at least 30 minutes reviewing code every morning. I want to pay careful attention both for the sake of learning and catching issues.

2. Design and develop my own service: I’m looking forward to managing a project from the design phase through promotion to production this year. 

3. Get up to speed on interview questions. I have fallen out of practice with coding interviews and plan to brush up on my algorithms this year by practicing with friends or on interviewing.io.

4. Take better care of my eyes. In honor of Sarhak’s dev.to post on eye care I plan to get blue tinted glasses and spend some time every 20 minutes bouncing a ball to give my eyes a screen time break. 

5. Update my terminal tools to make them nicer to use. I plan to spend some time updating my shortcuts and installing some visuals to make my terminal nicer to look at this year.

6. Rather than complaining about processes that are broken, I want to get in the habit of changing what is broken. Often it just takes one person to fix a bad wiki page/process/communication pattern. 

7. Learn about design patterns. I plan to brush up on my design patterns by watching a video series like this one. 

What are your development resolutions for the year? Consider adding goals related to learning, being a better engineer overall, and protecting your health.

![image](https://thepracticaldev.s3.amazonaws.com/i/j0w2un38yohwjh3y7sxz.gif)