teleren/devto huggingface dataset:
React.js–Get started in Dart #1
Tags: react, dart, javascript, webdev
Published: 2019-01-01 12:19:42

Happy New Year folks!

In this three-part series, we will go through the React.js homepage examples and learn how to reproduce these in Dart using the **js** interop package.

{% youtube DCgMfj-eFuE %}
→ [**Watch on YouTube**](https://youtu.be/DCgMfj-eFuE)
→ [**Get the source code**](https://github.com/graphicbeacon/reactjs-get-started-in-dart/tree/part-1)

---

# Before we begin:

## 1. Set up your project

Set up your web project quickly with Stagehand:

```bash
$ mkdir getting_started_react && cd getting_started_react
$ stagehand web-simple
```

## 2. Install the js interop package

Ensure that the `js` dependency is added to your `pubspec.yaml` file:

```dart
dependencies:
  js: ^0.6.0
```
Save and run `pub get` to update your dependencies.

## 3. Import the React.js libraries

In `web/index.html` in the `<head>` before `<script defer src="main.dart.js"></script>` import the dev versions of the library:

```html
<!-- Note: when deploying, replace "development.js" with "production.min.js". -->
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>

``` 

→ [**Watch the full video**](https://youtu.be/DCgMfj-eFuE)
→ [**Get the source code**](https://github.com/graphicbeacon/reactjs-get-started-in-dart/tree/part-1)

---

## 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 2 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**](http://bit.ly/2P2N1jC)
Monkey patching: What is it and should you be using it?
Tags: javascript, webdev
Published: 2019-01-01 11:55:58

---
title: Monkey patching: What is it and should you be using it?
published: true
description: An article about monkey patching
tags: javascript, webdev
---
## 🐵What is monkey patching?
A monkey patch is a way to change, extend, or modify a library, plugin, or supporting system software locally. This means applying a monkey patch to a 3rd party library will not change the library itself but only the local copy of the library you have on your machine. The term *monkey patching* refers to changing code at runtime. This may be done as a workaround to a bug or a feature. No software can be totally free from bugs. Sometimes with a major update, little bugs that are not that devastating creep into the software but make our work more difficult. 

Though, this does not mean *monkey patches* are only used in case of bugs in the library or code we are using. It can also be a means to change some behavior that does not do what we desire. Like a console log that has been left in production or that one function that should be returning integers instead of floating-point numbers. It is possible to make changes to the code using *monkey patching*.

However, this only applies a *patch* to the original code. It does not affect the actual code, but only **your copy** of it. This means if you installed a math library using npm, a monkey patch will only affect the library for you, it won't change the library npm has.

## 😈Why is it considered evil?
*Monkey patching* is not a unique technique. It is not "evil" per se. Any technique irresponsibly used can be considered evil. There are other ways to solve problems that can be solved by monkey patching. There are very rare cases where monkey patching may be the only solution. That is why, there are so few situations where monkey patching is required, that it is considered evil by developers. 

Patches made to a module might not work after the module is updated and some methods are changed. This might create a major bug or cause the website/app to crash depending on the patch applied and the changes made to the module. So if the patches are not applied conditionally, it can lead to unfavorable outcomes.

If two or more components/modules apply a monkey patch to the same method, depending on which component/module runs last, the other monkey patch will be meaningless.

Monkey patches can be very confusing to someone who is not aware of them. Differences between the installed module and the actual behavior of the source code can lead to frustrated developers.

## 🤔Should you use it?
It all depends on your preference. If the situation calls for it, then you should use it while making sure to avoid common pitfalls. Though you will probably go through your entire career without facing a situation where you would need to use it, if you find yourself in one, now you know there's a solution for that pesky problem.
Generate UML diagram from a textual description
Tags: uml, documentation, productivity
Published: 2019-01-01 11:26:09

---
title: Generate UML diagram from a textual description
published: true
description: Generate UML from a textual description using plantUML
tags: uml, documentation, productivity
---

Hi everyone,

I always hated UML because every tool I saw, I needed to "draw", I feel that I'm less productive. 
So I found PlantUML and my world changed, now I could write and generate the diagram. One of the reasons I liked that option is to keep the diagrams updated, now it is simple and fast (to me).

Let's see how we can use the tool.
Firstly, another thing nice to me, I can use docker =).
I use 2 docker images, first to generate the diagram to me. I use [https://hub.docker.com/r/think/plantuml/](https://hub.docker.com/r/think/plantuml/)
In this case, I created a file called test.uml:

```
@startuml
autonumber
Bob -> Alice : Authentication Request
Bob <- Alice : Authentication Response

autonumber 15
Bob -> Alice : Another authentication Request
Bob <- Alice : Another authentication Response

autonumber 40 10
Bob -> Alice : Yet another authentication Request
Bob <- Alice : Yet another authentication Response

@enduml
```
I run this command
```
cat test.uml | docker run --rm -i think/plantuml > test.svg 
cat test.uml | docker run --rm -i think/plantuml > test.png 
```

As you can see, that's the result.
![Diagram generated](https://thepracticaldev.s3.amazonaws.com/i/o18copjfp9zgmbqxtblf.png)

Another way, I run the server to write and see the diagram. I use [https://hub.docker.com/r/plantuml/plantuml-server/](https://hub.docker.com/r/plantuml/plantuml-server/)

In this case, I run the command 

```
docker run -d -p 8080:8080 plantuml/plantuml-server:jetty
```

then, I open my browser and I access http://localhost:8080. As you can see, that's the result.
![plantUML as a server](https://thepracticaldev.s3.amazonaws.com/i/h6760nbn3ygl76dv65e7.png)

If you want to play now you can use the [official server](http://www.plantuml.com/plantuml/uml/SyfFKj2rKt3CoKnELR1Io4ZDoSa700000), the good thing to use that server, is you can share the diagram

I recommend you access the official [documentation](http://plantuml.com/), my goal was to show you options to generate your diagrams and help you to be more productive.


I'd like to show you a suggestion how to use dev.to using UML =)
![Activity to read posts at dev.to](https://thepracticaldev.s3.amazonaws.com/i/8exx9icxtgms8adqlj9e.png)

I'd like to invite you to write/draw a diagram and share here in the comments, let's inspire others readers =)
Multicopy
Tags: browserextension, extensions, addon, firefoxaddon
Published: 2019-01-01 10:26:07

---
title: Multicopy
published: true
description: Copy multiple things and paste any from right click menu
tags: browserextension, extensions, addon, firefoxaddon
---

A usability extension, which lets you to copy multiple texts and shows them in right click menu. Paste any of the text in any input field.

To Copy: Right click on selected text -> Multicopy -> Copy this!
To Paste: Right click on text area -> Multicopy -> Select the entry

Firefox - https://addons.mozilla.org/en-US/firefox/addon/multi-copy

Chrome - https://chrome.google.com/webstore/detail/multicopy/bbihhbmcpmmbidebeomhomjelncfghcl
New changes to LaravelCollections.com
Tags: laravel, sideprojects, productupdate, php
Published: 2019-01-01 09:25:24

It's been two weeks since the [launch](https://simplestweb.in/blog/launching-laravelcollections?utm_campaign=post-update-1) of my latest side project - [LaravelCollections.com](https://laravelcollections.com/?utm_campaign=post-update-1). The response I have been getting from the users is generally positive. Going through user emails and feedback motivates me to put in more time and effort into making the site better.

I had some time last week and I worked on some of the common suggestions I had from users. I want to update you on the changes here.

### New Changes
- You can now search the 400+ Laravel related links
- The most recently added link is shown on the Homepage
- The landing page has been improved
- Added an [about page](https://laravelcollections.com/about?utm_source=simplestweb.in&utm_medium=referral&utm_campaign=post-update-1) to explain about the project
- Users can [submit links](https://laravelcollections.com/submit?utm_source=simplestweb.in&utm_medium=referral&utm_campaign=post-update-1) to Laravel Resources

### Upcoming Features
- Tagging links, this way users can see all links relating to a tag
- A page to show 10 most recently added links
- Homepage redesign
- Pagination in the Collection Pages
- Better sorting of links in the Collection Pages
- Improve search efficiency
- Add a roadmap to the [About page](https://laravelcollections.com/about?utm_source=simplestweb.in&utm_medium=referral&utm_campaign=post-update-1)
- RSS feed for each Collection
- Promoted link - I was approached by a Laravel Book author about this, but I am still thinking about it

### Conclusion
That's all I have to share about [LaravelCollections.com](https://laravelcollections.com/?utm_campaign=post-update-1). I will update when something major changes to the project. If you have any feedback or suggestion, do drop an email to - laravelcollections@gmail.com.

Thank You.

*P.S. - More about me and my work at [Simplest Web](https://simplestweb.in/utm_campaign=post-update-1).*
Python app for pulling DFES information
Tags: python
Published: 2019-01-01 08:10:03

---
title: Python app for pulling DFES information
published: true
description: Python app for pulling DFES information
tags: Python
---

URL : https://github.com/RavenTheDev/PullDFES


I would love some feedback on my latest app in Python. After some people in my local area were bad mouthing the local volunteer fire brigade, I had the idea to create the app. It pulls information via RSS from the DFES and Emergency.gov.au websites and displays it nicely.
Lets see what 2019 can do!
Tags: goals
Published: 2019-01-01 08:00:05

---
title: Lets see what 2019 can do!
date: 2019-01-01 08:00:05 UTC
published: true
canonical_url: https://www.funkysi1701.com/posts/lets-see-what-2019-can-do-42ni
description: This is my annual lets make some goals for the new year blog post.
tags: goals 
---
This is my annual lets make some goals for the new year blog post. So in no particular order.

##Improve House
I can’t outdo last years goal of buying a house but I can continue to make efforts to improve it. I was going to put something about decorating or doing something to our bedrooms, however today I spotted a hole in the roof so this may well absorb most of my home improvement budget.

##Connect with local area
Since we moved in October we haven’t really connected with our local area yet. My only interaction with my neighbours was when my car blocked his drive!

I am going to make efforts to change this in 2019. I don’t exactly know how yet, but I have some ideas. My son starts nursery and later school this year so could be one way to meet other parents and teachers. I want to connect with a local church, so far this hasn’t happened so need to make more effort with this. There are other local groups that put on child friendly events which would be good to attend.

##Lightning Talk
I failed last year to do this so it is back on my list. I know I must have stuff of value to share so going to try again on this.

A lightning talk is a very short talk or presentation given at a conference or user group. I am not a natural public speaker so this is a step out of my comfort zone, however I am going to start small and see what happens.

##Family Holiday
As always we Fosters are going to have a holiday in the summer and have some quality family time. I also want to take the boys to London for a weekend.

##Blogging
This blog has taken a bit of a backseat in 2018 so I want to try and refocus it for 2019. My commitment is for 12 blog posts in 2019, that is one a month. It doesn’t sound like much but I know how easily life can get in the way.

Having said that my log has had record views this year. 7159 views. However I believe this number to be incorrect and has been inflated by my app development and some of the automated processes taking place.

##Routine
Last goal is to try a get more of a routine going. With two small boys, one of which is starting school in September a routine is going to be essential and will allow all of us all a chance to get more things done.
Starting the new year(2019) #discuss
Tags: webdev, newyear, goals, productivity
Published: 2019-01-01 06:33:33

---
title: Starting the new year(2019) #discuss
published: true
description: looking back on the year and what comes next in 2019  
tags: web development, new year, goals, productivity.
---

I'd like to start off by saying happy new year!

2018 has been a crazy year for me and many other people. I spent most of the year starting my own business as a freelance web developer and it went amazing for most of the time, for the most part... It definitely got stressed and crazy times because of the inconsistent income but it was time for change so i took a leap. I got approached by a young startup to become a SWE to build their products and infrastructure. Now looking back, i am so grateful that i took that oppurtunity to join their team.

Now 2019, a year that starts with me finishing up stuff to get all those aforementioned products launched in Q1. I am definitely unprepared for what comes next, but what i can say is that i'm strapped in for the ride and excited to see what comes next.
Openmoji - Open Source Emojis For Everyone
Tags: githunt, emoji, showdev, opensource
Published: 2019-01-01 06:33:10

---
title: Openmoji - Open Source Emojis For Everyone ❤
published: true
description: openmoji
tags: githunt, emoji, showdev , opensource
---

😀😀 Openmoji , a open source project for developers and designers to include emojis 🙂 to their creations. 😊😊

{% github hfg-gmuend/openmoji %}

🎯🎯 This GitHub repository contains all of the source (currently .ai Adobe Illustrator) and exported png and svg files of the OpenMoji project.🌠🌠

Visit <http://openmoji.org> for more 🎉🎉

---

And At the End Wishing All The Readers a **Happy New Year ❤❤**
dev.to is still in 2018 (GMT+8)
Tags: newyear
Published: 2019-01-01 03:59:52

---
title: dev.to is still in 2018 (GMT+8)
published: true
description: happy new year
tags: #newyear
---

![](https://thepracticaldev.s3.amazonaws.com/i/c20kt65edy6ukyrkdp08.png)
Redesigning an app: Refactor or start from scratch?
Tags: javascript, webdev, beginners
Published: 2019-01-01 03:48:28

---
title: Redesigning an app: Refactor or start from scratch?
cover_image: https://images.ctfassets.net/wixhz498cwbn/3apTILnstWaawyWusmKg6U/040a9c623514cd4b6f7af2f263294944/jorge-zapata-44723-unsplash.jpg?w=2360&h=1573&q=50&bg=rgb%3A000000
published: true
description: When faced with a major refactor, should you spend time molding what you already have or start from scratch?
tags: #javascript #webdev #beginners
---

Redesigning my side project, [Reading Length](https://www.readinglength.com), has long been on my radar - the day I hit 'deploy' I knew major changes needed to be made before I could implement some of the features I wanted. Problem is, I barely knew JavaScript and didn't know where, or the best way, to begin.

And so, the long journey of learning JavaScript started. Now that I know the ins and outs of Node, React, NoSQL, GraphQL, and a whole bunch of other stuff I'm left to make a decision:

## Do I refactor what I have, or start from scratch?
Before I go ahead and delete my codebase, I have one primary consideration: __writing it in the first place took a long damn time__. Would it be worth it to rewrite what I have to make it cleaner or break it up into pieces that fit into my vision?

One part of me wants to [dive into the repo and refactor what I can](https://github.com/Putnam14/ReadingLength/tree/refactor). Another part of me attended business school and is aware of the sunk cost fallacy.

An objective look at the codebase shows that you could probably get away with selling it in an Italian restaurant. I wrote this back when I knew next to nothing about JavaScript. JavaScript made sense because it appeared to be the way of the future and it would give me more control than what WordPress offered. Node looked cool so I chose that and fumbled my way to a working website.

A year later, and I know so much more about JavaScript. I've read books, taken some great courses, and built some slick sites. I've implemented a style guide. I've learned object-oriented concepts. The code I have right now does not represent my skills, and I certainly would approach the problem differently now. So why tie myself to this old code? 

__I'm going to start my redesign from scratch and document that journey here, from start to finish.__

This is the first post in a series where I redesign my website, [Reading Length](https://www.readinglength.com). This post was originally published [on my blog](https://bridgerputnam.me/blog/reading-length-2-0-refactor-or-start-from-scratch).

*Photo by [Jorge Zapata on Unsplash](https://unsplash.com/photos/4nXkhLCrkLo).*
jboss eap 7.1 without deployment artifact and memory usage
Tags: jboss, eap, jvm
Published: 2019-01-01 02:18:02

---
title: jboss eap 7.1 without deployment artifact and memory usage
published: true
description: just how much eap-7.1 will eat ur memory
tags: jboss, eap, jvm
---

#The big question
Do you actually know how much eap-7.1 will use your memory by default? 
So before you start deploying your application might as well u do a bit of benchmark.
 
##tools we will be using
* jboss-eap-7.1 ( duh)
* visualvm-1.4.2

##how we do it
1. run your eap
2. fire up your visualvm
3. connect your visualvm with the right jvm process 

##output

![heap without any deployment artifact]
(https://thepracticaldev.s3.amazonaws.com/i/6vmx4tr1y0q4jovfmv99.png)

![metaspace without any deployment artifact]
(https://thepracticaldev.s3.amazonaws.com/i/psbyi8w51d4ws53tvw75.png)

![number of classes loaded by eap without deployment artifact]
(https://thepracticaldev.s3.amazonaws.com/i/g0kk1ohui081mkyq5vtm.png)

##things to ponder
1. What will happen when you deploy simple spring MVC REST hello world?
2. Do anyone need to know all of these JVM's memory management thingy?
When programming on a laptop: Mouse or Trackpad?
Tags: discuss, laptop, humaninterface
Published: 2019-01-01 01:02:12

---
title: When programming on a laptop: Mouse or Trackpad?
published: true
description: #TeamMouse, #TeamTrackpad or something else?
tags: discussion, laptop, human interface
---

While a lot of programming and actions can be strictly keyboard driven, when you don't use the keyboard, do you reach for a mouse or use a trackpad?

I'm half expecting the vast majority to be #TeamTrackpad as you do get portability benefits.

- Do you use a Mouse or Trackpad? (Or just a keyboard shortcut master?)
- Why do you use that? (Faster, easier, more portable etc?)
Dropping balls for New Years
Tags: javascript, css, html, example
Published: 2019-01-01 00:25:04

---
title: Dropping balls for New Years
published: true
description: We try to build page that drops some balls for New Years eve. This is stream content cut down for value.
tags: JavaScript, css, HTML, example
---

{% youtube gQ7UHBV0wE0 %}
Artistic Terminal with Docker & Go
Tags: docker, go, terminal, fun
Published: 2019-01-01 00:22:09

---
title: Artistic Terminal with Docker & Go
published: true
description: 
tags: docker,go,terminal,fun
cover_image: https://thepracticaldev.s3.amazonaws.com/i/3e8xte3lrh84skg7pwns.PNG
---

I am not a fan of using the _Terminal_, and I've always liked seeing things, and clicking on them. But often times I find myself obligated to writing commands on the Terminal. Sometimes because it's faster, and sometimes it's the only way to getting my thing done.

As with anything in life, sometimes things don't work out. And with the Terminal, errors can be daunting to grasp, and you will be like..

![alt text](https://media.giphy.com/media/13xHqoOQOdFu5a/giphy.gif "Looking shocked")

Because I like illustrations, I was thinking of something that I can watch on Terminal that would take my mind off whatever I was doing. Hence I came up with the following :



![alt text](https://raw.githubusercontent.com/Elgarni/Ascii-Art-with-Docker-and-Go/master/docs/result-on-terminal.gif "Ascii art using Docker image")

So I created a Docker image that wraps around a Go application that displays artistic text on the Terminal. To give it a go, you may run the following :

```shell
docker run --rm -e text="Your favorite word" elqarni/hala
```

Going one step further, you might want to send the _"Docker run.."_ command to a friend, but with text hidden. You can hide the text by having it encoded with _base64_ .

For example, the text _"Hello there"_ is encoded with base64 to _"SGVsbG8gdGhlcmU="_. Then you run the command :
```shell
docker run --rm -e text="SGVsbG8gdGhlcmU=" -e hidden=true elqarni/hala
```
In my case, I'd encourage you to run the following :) 

```bash
docker run --rm -e text="SGFwcHkgTmV3IFllYXI=" -e hidden=true elqarni/hala
```

Lastly, if you are interested, you can find _Dockerfile_ and _Go source code_ on [Github](https://github.com/Elgarni/Ascii-Art-with-Docker-and-Go)