teleren/devto huggingface dataset:
How do I create my first Chrome extension using TypeScript - PART 1
Tags: webdev
Published: 2020-07-20 22:36:51

In this post, I would like to share my journey of creating [AnyColor](https://any-color.vercel.app) - A Chrome extension that makes you pick up any pixel color from a web page.

#### Origin
To be honest, there are already many color picker/eyedropper extensions on the Chrome Web Store. Why do I need to create another one?
It's simple: none of them meet my simple requirement - the ability to pick up any color quickly when browsing.
To name a few extensions I have tried:
- [Eye Dropper](https://chrome.google.com/webstore/detail/eye-dropper/hmdcmlfkchdmnmnmheododdhjedfccka/)
Almost what I need but somehow slow and I don't need the color palette. The UX design could be better.
- [ColorPick Eyedropper](https://chrome.google.com/webstore/detail/colorpick-eyedropper/ohcpnigalekghcmgcdcenkpelffpdolg)
Similar to the above, not so quick to invoke the picker.
- [ColorZilla](https://chrome.google.com/webstore/detail/colorzilla/bhlhnicpbhignbdhedgjhgdocnmhomnp)
This is a color picker for DOM elements. No way to pick colors from images on a web page.

Although thousands of users use these extensions, they are just not what I want.

#### Idea
I realized the main problem of these extensions is UX design and performance.
As a front-end developer, [eyedropper from chrome-devtool](https://developers.google.com/web/tools/chrome-devtools/css/reference#eyedropper) came into my mind. The neat UX design is already there, all I have to do is to implement it as a Chrome extension, instead of calling devtool on each web page. 

#### Implementation
This is my first time developing a Chrome extension. The official developer guide is clear but the API is not so modern comparing to other google's products. In a word, I implemented using TypeScript, Web Component, and HTML5 Canvas.
I decide to leave the technical details in another post. The source code is public here [hankchiutw/any-color](https://github.com/hankchiutw/any-color).

#### Conclusion
Publishing tools for developers is fun and interesting. Give it a try ([AnyColor](https://any-color.vercel.app)) and any feedback is appreciated!
I also wonder how do you use a color picker/eyedropper extensions in your workflow? Share below!
Undo Monorepo
Tags: help
Published: 2020-07-20 22:34:45

I think I'm locked inside a Monorepo without a key. For an OS project I've been working on, I have very mixed feelings about this.

I wanted to try the monorepo style again for probably the 4th time in my career, it tends to end the same way, but not this time, I want to try something beyond just simple code cohabitation but instead a full test and release pipeline.

My project was going to looks like this.
```
/packages
    /p1 - client
    /p2 - lib
/release
    /p1 - git submodule
    /p2 - git submodule
```
This would have meant that each built package would get its own dist repository.
Sounds kind of nice.
But this is a node project and actually monorepo's are touted as an amazing way to work, but node doesn't resolve dependendent packages that sit side by side. There is a prescribed way and any other way is against the grain (including npm / yarn link).

The way I see my application is as follows, you have a client which is public and it consumes our lib package to provide the client or any newly developed client with functionality.
This means that I need to build the compiled language sources into it's respective release folder, install it's dependencies, link the development packages which also have to be built and installed.

It's a lot of boilerplate just to do something that should be trivial. It gets worse because adding a new package or deleting a package will not be straight forward, all those leftover artifacts you can never be sure if it's all been deleted. Then there's linking, I feel like symlinks could lead me into a false sense of security, come release something could actually not exist.

It's a real headache and it's going to be hard to change, I can go on writing tooling to manage the project I actually want to write, find a solution with your help, or refactor to a poly repository.
Day 178: What's Next?
Tags: hiphop, code, coding, lifelongdev
Published: 2020-07-20 22:26:29

_liner notes_:
- Saturday : Damn...RIP John Lewis. Before the radio show, I did some work in the van. Had to do a little modification to the carpet to get it to fit properly. Then I started working on the 3 remaining window coverings. I even got to test out the fans that I bought for the van. They worked pretty well. Going to buy a couple more. Didn't get as much done as I wanted in the van before the radio show. Had a great time doing the show as usual. The recording of this week's show is at https://kNOwBETTERHIPHOP.com

![John Lewis surrounded by a crowd giving a speech at the March on Washington](https://dev-to-uploads.s3.amazonaws.com/i/7luzrqnf7bixm7bsygj5.jpg)

- Sunday : Went back to working on the van after doing some post radio show promo work. Got the magnets glued to the frame. Took some updated measurements of the van for the framework now that the carpet is in. Did some work on my side project and I don't remember what else. haha I did watch a couple of episodes of some anime and 'NOS4A2'. Pretty sure I did more that than that. Oh well. haha

- Professional : Worked on a presentation for a show I'll be doing a demo of TicReactToe.com on Friday. Pretty much all done. Going to go back over it again with a fresh set of eyes tomorrow. So I got a new Twitter account and have a couple of followers. One is a person involved with a website I am a member of that helps makes building and showcasing Web Components. I even used them to embed some Web Components in a blog post for work. We spoke a little through Direct Message and interested in seeing what's next. Other than that, I went through the recordings of the tutorial walk throughs and took notes.

- Personal : The moving boxes I ordered came in, so I'll start packing up some clothes I don't wear often and some other items to clear out my room. Also bought some more glue for the van, it's the same brand, but this time it has a brush. When doing the first window covering, I had some difficulty getting the glue on the magnet while it's on the frame so I can place the covering on it so it's in the right place. The problem is that the glue would drip if I couldn't smooth it out in time and would dry by the time I did that and place the covering. I'm thinking with the new bottles, I can just brush the glue on the magnet and place the covering. We'll see tomorrow.

![Top down view of a forest from top of a mountain with a waterfall in Kerepakupai Meru, Venezuela](https://dev-to-uploads.s3.amazonaws.com/i/fxur2hxmfz5sn2j0jwpt.png)

Going to pack up some stuff in my room. Also, I really need to figure out and order the parts I need to build out the framework. Even if it's just a couple of pieces to get things started.

Have a great night!

peace piece
Dwane / conshus
https://dwane.io / https://HIPHOPandCODE.com
{% youtube WAfA0lUmR-o %}
In another state
Tags: react
Published: 2020-07-20 21:45:48

State, updating state, changing state, you might be thinking. ok get out of town! What is this state?

This was a confusing concept for me to grasp at first, so I wanted to provide a "explain it like I'm 5" sort of explanation that is sure to help someone.

So in vanilla javascript you can and do declare variables, variables are really not much different than algebra variables you used back in math class. However, if you want to change variables it changes more of the app/code. Enter, React and state management tools. React's selling point is you can easily and efficiently update your code and set different states which creates a better development experience.

A good way I like to think of state is a paint tray (hear me out!) In art class you mixed different colors on your palette to make the perfect color which you can reuse again and again. That mixed color is the app's state and the pieces you are mixing in are the variables.

As tricky as state sounds its just a way to make a variable or variables so you can group variables/functions together. 

Back to the paint example. If you are painting a picture and using your mixed color for the clouds and now you want to for the tree, it does not change any aspect of the painting and you are still free to use whatever colors you want for other areas of the painting.

Hope that helped, personally I found abstracting state into mixed paint colors as a very useful way to really understand it.
Creating Typescript Packages
Published: 2020-07-20 21:28:52

After using <a href="https://itnext.io/step-by-step-building-and-publishing-an-npm-typescript-package-44fe7164964c" target="_blank">this tutorial</a> (thanks Carl-Johan!) to create a few different npm packages, I decided to create a template repository to speed up the process in the future. If you're interested, you can clone the repository from <a href="https://github.com/philbaker4/base-ts-package/" target="_blank">here.</a> Enjoy!
Increc: An incremental learning recommendation software library
Tags: incrementallearning, recommendersystems, machinelearning, collaborativefiltering
Published: 2020-07-20 21:25:35

---
title: Increc: An incremental learning recommendation software library
published: true
description: An incremental learning recommendation software library done for my MSc thesis(https://github.com/Marko50/FEUP-DISS).
tags: incrementallearning, recommendersystems, machinelearning, collaborativefiltering
//cover_image: https://direct_url_to_image.jpg
---

Hello fellow developers!
I come here to share with you a Python project that I wrote which turned into a software library. It falls into the field of incremental learning applied to collaborative filtering recommendations.
It is hosted at Github: https://github.com/Marko50/FEUP-DISS

I want to share this with you in case you wish to attempt to do some research on these types of algorithms and need to want to use a library that is able to mine data streams and perform recommendations and rating predictions.

It has 11 implemented algorithms that fall into 2 categories:
Model-based and Neighborhood-based.
It supports algorithms for both implicit and explicit feedback.

Thank you very much for your time.
Codecademy Launched VR Course
Tags: news, codecademy, vr, virtualreality
Published: 2020-07-20 21:14:15

Hello Devs,

Our first virtual reality course is here. 😎

We worked closely with the [Supermedium](https://www.supermedium.com) team to design [Learn A-Frame](https://www.codecademy.com/learn/learn-a-frame?utm_source=twitter&utm_medium=organic-social&utm_campaign=a_frame&utm_content=announcement), a course where you can learn VR in the browser or... in a VR headset!

Check out the video to learn more:

{% twitter 1277653431042351109 %}

Course Link: https://www.codecademy.com/learn/learn-a-frame
Event-Driven Architecture
Tags: backend, webdev, systemdesign, scalability
Published: 2020-07-20 20:38:08

We tend to design systems based on requests and responses that allow our components to communicate and behave appropriately to streams of information. What do we do when components in our systems are more complex, dynamic, or loosely coupled? Event-driven architecture (EDA) is an architectural style based on an entirely different principle than requests to communicate changes in state, events.

Events are the fundamental entity in EDA that communicate something that has happened. For example, an event can be announced by a button when a user presses it, a mechanism we're familiar taking advantage of in web development with event listeners. Events are pieces of data that describe something that has happened and contain no logic. We call components that emit events event producers or event publishers.

Event producers are components of our system that generate events and announce them to our event-driven framework. Event producers are solely responsible for this and unaware of how we handle the events and where. An event producer's only coupling factor with the components that will react is the event message definition. The event message definition refers to the data and shape of that data that an event includes. 

In a request/response-based interaction, two communicating components have a large contract surface area, a measurement of coupling, or how much information components need to know about each other to communicate. For example, we often design components with the expectation of a side effect caused by the processing of a sent request. Additionally, components also must wait for a response. In this model service components and clients are coupled by the contract of what methods are available and logically as requests complete a given function.

Service components in EDA do not behave like a service, and we instead refer to them as consumer components or event consumers. Event consumers, only constrained by the event message definition, react to events. Events are routed to these consumers by an event-driven framework that might be making use of a service we could use a message broker on a worker queue model. Consumers are not constrained to respond to events either, for producers do not expect it. Whenever we can perform a task without any need for the results of the operation, we can consider leveraging an event-driven architecture.

EDA is hard to grasp since we are so used to thinking about software in terms of requests and responses. However, endeavoring to understand it should prove beneficial. Leveraging EDA makes it simpler for us to decouple components, which makes it easy for them to evolve and grow independent of each other. Similarly, EDA allows us to scale horizontally very well since we keep adding more consumers to react to an increasing amount of events.

---

Cover photo by [Artem Beliaikin](https://www.pexels.com/@belart84?utm_content=attributionCopyText&utm_medium=referral&utm_source=pexels) from Pexels.
CloudSkew featured at Cloud Community Days conference
Tags: azure, community
Published: 2020-07-20 20:33:04

A big thanks to the [Cloud Community Days](https://ccdays.konfhub.com/) conference for featuring CloudSkew. Here's the recording in which [Mithun Shanbhag](https://twitter.com/mithunshanbhag) (CloudSkew creator) talks about the internals of [cloudskew.com](https://www.cloudskew.com) and how it was built on top of Azure (skip to the [3:49:00 mark](https://youtu.be/_dZwMidN9wY?t=13742) for the start of the talk).

{% youtube _dZwMidN9wY %}
Git Cherry-pick 
Tags: git, github
Published: 2020-07-20 20:21:05

Cherry picking is the act of picking a commit from a branch and applying it to another.

Even though git cherry-pick is just a single command, it needs a whole process to get that right. So below are the list of commands need to be executed to have a successful cherry picking 😊

**Step:1**
Clone the remote repository in to local machine and change the root to your repository.

```
git clone remote_repo
cd local_repo

eg: 
$ git clone https://github.com/ravi-kolla/git-cherry-pick.git
$ cd git-cherry-pick
```

**Step: 2**
Checkout the branch you have changes in and pull all the commits from remote repo.

```
$ git checkout branch_with_commit
$ git pull //pulls all the commits from from your branch
```

**Step: 3**
Checkout the branch you want to add the changes

```
$ git checkout branch_to_add_changes
$ git pull 
*//pull all the commits to make sure your new branch is up to date before adding new changes*
```

**Step: 4**
Cherry pick a commit which you want to be added to the new branch by passing commit hash

```
$ git cherry-pick #commit-hash 
$ git cherry-pick 29cebd92
```

**Step: 4.1** *(Incase if you get merge conflicts on executing git cherry-pick)*
Lets say after executing step:4, you came across bellow error 😒

```
$ git cherry-pick 29cebd92
error: could not apply 29cebd92… commit_message
hint: after resolving the conflicts, mark the corrected paths
hint: with ‘git add <paths>’ or ‘git rm <paths>’
hint: and commit the result with ‘git commit’
```
check git status to identify the conflicts and resolve the files mentioned as both modified.

```
$ git status

On branch pre-release
Your branch is up to date with ‘origin/pre-release’.
You are currently cherry-picking commit 29cebd92.
(fix conflicts and run “git cherry-pick — continue”)
(use “git cherry-pick — abort” to cancel the cherry-pick operation)

Changes to be committed:

modified: file-path/sample.css
new file: file-path/sample.js
new file: file-path/sample.txt

Unmerged paths:
(use “git add <file>…” to mark resolution)

both modified: file-path/main.js
both modified: file-path/main.css
```

Once the merge conflicts are resolved add those files to git and then continue with git cherry-pick.

```
$ git add file-path/main.js file-path/main.css
$ git cherry-pick --continue
```

**Step: 5**
You’re all set to push the cherry picked commit(s) to your new branch 😄

```
$ git push //commits you selected will be pushed to the new branch
```
****
**Additional info..**

```
$ git cherry-pick A^..B
```
where A is the commit hash you want to start from (the ^ will include commit A instead of starting at next commit after A) and B is the commit you want to end after being applied.

```
$ git log --oneline
```
Gives you list of commits in single line so you can easily select commit hash codes for cherry picking.
CloudSkew featured on the Cloud Lunch & Learn show
Tags: azure, architecture, podcast, community
Published: 2020-07-20 20:05:04

A big thanks to the Cloud Lunch & Learn show for featuring CloudSkew last week. Here's the recording in which [Mithun Shanbhag](https://twitter.com/mithunshanbhag) (CloudSkew creator) and [Hugo Barona](https://twitter.com/HmsBarona) (host) talk about the internals of [cloudskew.com](https://www.cloudskew.com) and how it was built on top of Azure.

{% youtube aZyPlXiXsqY %}

Please do subscribe to Cloud Lunch & Learn's [youtube channel](https://www.youtube.com/channel/UCHZeZzSlTtmfgPozIq8J2Kw) for great Azure content!
How not to use Vue like jQuery
Tags: vue, javascript, jquery
Published: 2020-07-20 20:02:19

---
title: How not to use Vue like jQuery
published: true
description: How not to use Vue. There is why developers can't find tips about bad code.
tags: vue, js, javascript, jquery
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/d0oj8s8szyv3324cgf8s.png
---
There are a lot of posts on how to correctly use Vue.

![how to vue](https://dev-to-uploads.s3.amazonaws.com/i/qegokgdoszkarz8yemf6.png)

But 67 times less information on how not to use Vue. There is why developers cant finds tips about bad code.

![how not to vue](https://dev-to-uploads.s3.amazonaws.com/i/poonnxw8d1q25ikp40c8.png)

This is how generally developers and other professions search in google, "how to" but there is no guarantee that all developers understand the content well and right.
I often have questions with my self: Did I write code, right? is my code safe? Did I use the best approach to issue? Did I use the best and modern practices? and finally is my code correct?!

Sometimes, after a workday, before commit the project, I want to compare script with other experienced developers practices, find wrong ways and issues, improve code and make little refactoring. I try to find similar tasks and their solutions but all in vain.

This is the reason why any of us with not of big experience in Vue(or any other library, framework or language) can write "terrific" code.

Now, I wanna show you the worst code example of code has ever seen in Vue.js.

![vue.js example](https://dev-to-uploads.s3.amazonaws.com/i/d0oj8s8szyv3324cgf8s.png)

This code screenshot was posted on Facebook by Author (i call him Jimmy)and he was confused why this code is not working. He even doesn't understand that he used Vue not jQuery… I wanna help him, but then I didn't have time and it's very difficult to explain something in Facebook.

He doesn't understand the most important thing in Vue library - reactivity and even not use ES6 template literals. Ok, maybe he is an old fashioned developer but I don't think so. In this regard, I wrote a small example of code similar to this, with an example for newbie Vue developers.
How to simply add and remove inputs array in Vue with Vue style

Simple add and remove input arrays in Vue.js
{% jsfiddle https://jsfiddle.net/sosog/getc9d1h/ %}

This is what jQuery developer Jimmy wants to make with Vue.js. I hope Jimmy will like this post, I can't now find him but I wanna share to him a new experience.

After writing the code, I start thinking about jQuery. Should I write the same functionality code and show it to you? nooo, it is a horror movie, only for 18+, after Vue, I hate jQuery and don't want to waste time on it. In 2019 just you have to use jQuery and improve knowledge in Vue.js

P.S. Sorry for my bad English, I'm not a native speaker and this is my first post. Thanks for reading.
Writing my First "Hello World"
Tags: webdev, html, css, javascript
Published: 2020-07-20 19:52:19

 I wasn't sure what I was actually doing or what was really happening, but after seeing an average developer with experience between one to two years earning around $45,000 dollars a year, damn I knew I had to start writing codes.

Yes no lies, I was drawn to developing by money and now I'm addicted because I've just fallen in love with creating things that comes to my mind.

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

After doing some research reading posts on Dev.to, Medium, and so many of other blogs from developers, I decided to start my developer career by going through the Html/CSS and then JavaScript path.

Prior to wanting to write codes, I had no experience whatsoever in computer science, "You're student Transportation Management in the University like what are you thinking about to even plan on becoming a programmer", words from my friends.

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

Thankful to the great developers community I was able to realize I didn't really need previous experience or even a certificate to start living my new dream, so I went on planning my way into becoming a developer, a challenge and path worth taking.

Now, I have made up my mind, I'm definitely taking this journey, but how do I begin? programming is difficult and I have no teacher, no mentor, just some random posts and articles I read online. Luckily for me W3schools ![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/qshbd32lx7fhvzcdvil0.png) came to my rescue. I visited the website, clicked on "Learn HTML" and then I clicked on try it yourself. I edited the current markup in the editor and decided to write "Hello World" because for some reason it was a popular phrase in the developer community.