teleren/devto huggingface dataset:
Random Hex Color Code Generator
Tags: webdev, design, colors, hex
Published: 2020-10-19 06:43:15

Colorful HEX code generator designed to be lightweight, fast and easy to use. Generate or browse beautiful color combinations for your designs. A virtual color wheel to randomly pick a color. **[Random color generator](https://hexcolor.co/random-colors)** which outputs HEX code, RGB and HSL. This color tool generates random colors that you may want to use for your next project. Find inspiration by looking at our random colors! The colors are generated with true randomness originating from atmospheric noise. Hexadecimal color codes are used to represent colors numerically as three values in the [0,255] range: red, green and blue. The greater each value, the higher the intensity of the corresponding component. Hexadecimal color codes are often used to represent web colors.

https://hexcolor.co/random-colors
Setting up a basic Node Server
Tags: node, beginners, webdev
Published: 2020-10-19 06:38:30

Node.js is a Javascript platform that is built on Chrome's V8 Javascript engine and allows you to build powerful applications.

## 1. Installing Node
You can install node js by visiting [this link](https://nodejs.org/en/download/)

## 2. Setting up Node
After you have downloaded and installed node.js from the above link, it's time to set up the project directory!
    
 - Create an app directory
 - Create a file named **index.js** in that directory

There you go! You have successfully set up a basic node.js project directory!

## 3. Creating the server
We will be creating a basic HTTP server in our index.js file. For that, we need to first **import** the **http** module inside our file. To do that write the following line inside **index.js** :

```
const http = require("http);
```

Next write the following lines of code:

```
http
  .createServer((req, res) => {
    res.writeHead(200, { "Content-type": "text/plain" });
    res.end("Hello World\n");
  })
  .listen(3000);
```
The **createServer** function called above is used to create a basic HTTP server. We have passed a callback function to it as an argument. The callback function has two parameters: **req** which represents the request part and **res** which represents the response part.

Inside the callback function, we write the following lines of code:

1. The first line uses the **res.writeHead** methods to set the response code and the header object for the response that our server is going to send. 
   - The status code **200** is used to denote that everything is :+1:. You can read more about status codes [here](https://developer.mozilla.org/en-US/docs/Web/HTTP/Status)
   - The second parameter we pass is an object to denote the **response header**. Here we are telling the browser the response received is of the type **plain text**. Read more about content headers [here](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers)

2. The second line we use the **res.end** function to send a response and end the **request-response cycle**. Here we have returned the customary Hello World greeting.

The **listen** function tells the server to listen for any requests on the port passed as the parameter. Here we pass 3000 as port.

In the last line, we log something to the console so we know the server has started and is working.

After this navigate to your directory and in the terminal type the following command  `node index.js`

After this navigate to **http://localhost:3000** and voila! You should see **Hello World** written in your browser.

To stop the server use `Ctrl+c`

And just like that, you have created your basic Node.js server! Stay tuned for more articles like this!
THINK
Tags: hacktoberfest
Published: 2020-10-19 06:21:36

## What I Learned From Hacktoberfest
The most important thing is to __THINK__ and proceed, in the way you will learn lot of new function and method. 

<!-- What did you learn that can help others contribute to the project you worked on? What did you learn that can help the users of that project?! -->
Everyone learning process are different some may learn by seeing videos and some may learn by reading different lecture so learn by your own techniques and with your own pace.
how to restore recursive array (array with childreN)
Published: 2020-10-19 05:48:40

if I want to resort data. for example, I want to move the element ` { id: 0, text: "test one" },` to be a sub inside `"main"`. How to do that?
```
const myData = [
  { id: 0, text: "test one" },
  { id: 1, text: "test tow" },
  { id: 2, text: "test three" },
  {
    id: 3,
    text: "main",
    sub: [
      { id: 4, text: "sub 1" },
      { id: 5, text: "sub 2" },
    ],
  },
];
```
I tried to do it by deleting the element and then reinsert it wherever the user drop. but when I uncomment ` state.push(i.item) ` or `state.splice(f + p, 0, i.item);`  I got error :`Maximum call stack size exceeded` event when ` state = state.filter((el) => el.id !== i.item.id);` is uncomented as well.

--
Morover, `state = []` dons not work as it expected when `element == item`beleong to an item inside the main, I which it should convert main to `[]`
---
and their are more unexpected issues.

```
function recursiveUpdate(state, action) {
  // state.splice(i, 1);
  //
  const { item, type, i, f, p } = action;
  state.forEach((element) => {
    if (element == item) {
      console.log({ f: state });
      // state.splice(f + p, 0, i.item);
      // state.push(i.item);
      //state = [];
    }
    if (element.id === i.item.id) {
      console.log({ i: state });
      // state = state.filter((el) => el.id !== i.item.id);
    }
    if (element !== i.item && element !== item && element.sub)
      recursiveUpdate(element.sub, action);
  });

  return state;
}
```
Well, just Remot-ed. Hacktober-updates. Exam weeeeeek.
Tags: opensource
Published: 2020-10-19 04:43:49

Well, Well, Well. This week was fun, more like the calm before the storm. The coming week I have 4 midterm exams each day from Monday to Thursday. So was super busy studying and finishing up assignements and labs. Did not get to finish all, but enough to prepare for the midterms. Anyways enough updates, not to let you guys know what I learned this week.

I just learend how to remote  agit repo. Me and my friend did it together. It was so freaking awesome as it opens up unlimited number of opportuinties to work online. It gives you the option to track other peoples works on you rrepo so that way you can stay updated. It was super fun. I also added a feature to my friend's CLI program, the feature allows the user to parse out the data he/she wants. For ex, if the person wants only the good links to be outputted, he/she can use the extra command "--good" to parse out only good links and vice versa. I am really looking forward to next next week, cause it will be study week. Damn, how fast this semester is going.

I have yet to make an updated blog post regarding release 2.0 2nd PR. This is because I have been assigned a huge one yesterday. My duty is to change the entire UI of an app. So, I was thinking of what design to come up with, I think I got what I will use, I'll implement it later this week (I know its due by tomorrow, but still (sorry)). I am also looking for more PR opportunities for hackotber, and hopefully will score some more.

This is so far from me today, I'll be sure to update yall anytime I learn new stuffs. Thank You!
OsProgramadores
Tags: ptbr, tutorial, desafios, brasil
Published: 2020-10-19 03:37:17

Tentando ajudar quem quer aprender a programar, eu juntei amigos que trabalham no [Google](https://Goole.com), [Red Hat](https://www.redhat.com/en) e outras empresas do mundo e criamos o [OsProgramadores.com](https://osprogramadores.com)  e o [Grupo no Telegram](https://t.me/osprogramadores) que já conta com mais de 3000 pessoas inscritas. 

Criamos [desafios](https://osprogramadores.com/desafios/), [rank de participação](https://osprogramadores.com/scores/), [Canal no YouTube](https://www.youtube.com/channel/UCt_YNYGl6K5yNXlXEQDdwWg?view_as=subscriber) e o [Podcast](https://anchor.fm/osprogramadores) para divulgar a experiência de outros programadores.

Tudo no site é grátis e open source e todos [podem enviar Pull Requests](https://github.com/OsProgramadores/op-website-hugo) com melhorias, novos desafios, etc. 

Recentemente conseguimos doar oito computadores usados para pessoas do grupo que só tinham celulares e desta forma vamos fazendo a diferença para alguns.

Nossa motivação para criar isso tudo vem de histórias como a do [Lucas](https://osprogramadores.com/blog/2020/08/01/contrib-odin/) e a possibilidade de ajudar os que precisam ser ajudados.

Participem e nos ajudem a divulgar.

Forte abraço e sucesso para todos.
My Journey in Hacktoberfest 2020
Tags: hacktoberfest
Published: 2020-10-19 04:31:37

## What I Learned From Hacktoberfest

It was a great experience with Hacktoberfest2020. This is the first time when I had contributed to Hacktoberfest2020. I got to learn about different git features,how to contribute in open source and with the help of existing knowledge of C and C++ i was able to make 4 Pull Requests.

It was a great and really exciting journey with Hacktoberfest2020 and will love to contribute in Hacktoberfest2021.

and finally i would like to thank [link](https://hacktoberfest.digitalocean.com) for their beginners guide due to which i am able to contribute in different open source projects in github

<!-- What did you learn that can help others contribute to the project you worked on? What did you learn that can help the users of that project?! -->
Release 0.2
Tags: opensource
Published: 2020-10-19 04:24:34

# How to find an issue to work with.

It's hard to find an issue that easy to work on. After a search on a different combination of labels, I find a program to work with. But the issue is a little bit general and not specific. Then I notice this program using an old way to handle go modules. So I filed a new issue to add the right way to support go modules and updated the docker file at the same time.

The issue I worked with [https://github.com/jamesmawm/golang-user-microservice/issues/17](https://github.com/jamesmawm/golang-user-microservice/issues/17)

# What I did to fix the issue.

After clone the repo [https://github.com/jamesmawm/golang-user-microservice.git](https://github.com/jamesmawm/golang-user-microservice.git), I run the command `go init github.com/jamesmawm/golang-user-microservice` to generate the `go.mod` file. And replace the import part of the program from v1 to github.com/jamesmawm/golang-user-microservice. 

There is also a docker file to fix and the readme file.
Getting sudo with ansible on Debian
Tags: linux, devops
Published: 2020-10-19 03:47:52

---
title: Getting sudo with ansible on Debian
published: true
description: Getting started using ansible. In this example we will install sudo with ansible on Debian. The script will install all dependencies required and add a user to the sudo group.
tags: linux, devops
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/to44j5wmhkya0oitlu5z.jpg
---

{% youtube UNqYlEko6K8 %}

Getting started using ansible. In this example we will install sudo with ansible on Debian. The script will install all dependencies required and add a user to the sudo group.
Hacktoberfest - The Second PR
Published: 2020-10-19 03:44:50

[Release 0.2](https://github.com/Seneca-CDOT/topics-in-open-source-2020/wiki/release-0.2) Hacktoberfest week 2...
I probably looked at at least 20 repositories trying to figure out which one to contribute too.  Finally narrowed it down to 3 and then made sure one of them was acceptable for my second PR. 

The [issue](https://github.com/remoteintech/remote-jobs/issues/639) was simple.  I needed to look at a list of companies and find one labeled with a yellow triangle.  These companies have very little or no information in them.  I requested to participate and it was a go!  I made my [Fork](https://github.com/strawberries73/remote-jobs) and then created the [Branch](https://github.com/strawberries73/remote-jobs/tree/Issue-639).  I discovered that this company "Black Pixel" was now Hypergiant.  Took some time to figure out what information was best for the template provided by the original owners of remoteintech. Once I filled in all the necessary information I saved and pushed to my git repository. The I made the [pull](https://github.com/remoteintech/remote-jobs/pull/816) request.  I had to fix the information in the README and my PR was accepted by an automated system that checked my changes.  Of course it wasn't over. I went to sleep that evening all happy that I completed my assignments. I woke up at 2 am realizing that I should have let the author know that Black Pixel have a new name and I should completely make new file and delete the old one. Of course the busy mom that I am had to deal with my daughter's birthday.  It did not surprise me that during the small gathering with my children, I received a message from the author to make the change. So after I made the changes, my final commit - [083c30]( https://github.com/strawberries73/remote-jobs/commit/083c3056611da89ca32227ab7123ce760a871b98) was complete. My contribution was [merged](https://github.com/remoteintech/remote-jobs/commit/6bc9e98dc891982f0b5a300f1d96ff782894a642) on October 19, 2020.

Conclusion...
I am definitely starting to feel more comfortable with contributions. It is kind of neat to see all the different ways people put projects together!
When Does Abstraction Become Overkill
Tags: graphql, prisma, abstraction
Published: 2020-10-19 03:42:40

---
title: When Does Abstraction Become Overkill
published: true
description: 
tags: GraphQL, Prisma, Abstraction
//cover_image: https://direct_url_to_image.jpg
---


Having worked on Dev tools for more than 6 years, I have written my fair share of abstractions.  We try to abstract much of the complexities needed for developers using our framework / library to have to worry about.  I have heard of this complexity referred to as "plumbing".  But thinking about it more lately, when does abstracting too much from developers become a detriment?

Take GraphQL as an example.  GraphQL is a way for front end developers to query the backend for just the data they need.  It also provides a caching mechanism so we as developers do not need to think about it.  As a front end developer, we just need to know how to write our query so that the backend can understand how to fetch the data.  On the backend, resolvers are written so that it can give that data to the front end.  So on the front end, all of the logic of the orchestrating the data is abstracted from us.  (There is not really any difference here as using RESTful endpoints other than we now only need to call one endpoint to get all the data we need).  On the backend, all the data is orchestrated to be sent back via the resolver function, so no real abstraction.

Now, let's go ahead and add Prisma to the mix.  Prisma provides an ORM type of layer on top of GraphQL.  It gives developers a way to get access the database to create the models that can be used in the GraphQL queries by creating the models from the database tables and relationships.  It also provides a pattern for writing the resolvers.  This "magic" is all accomplished through a simple CLI command.  

But "magic" comes at a cost.  Abstracting all the "plumbing" may make rapid development easier but it also removes the developers to have to think about how things work.  It becomes a black box.  The problem with black boxes are that when they break, getting insight on how to fix it becomes extremely tough.  It also makes all the decisions for you.  There are usually ways to override the decisions, but it feels much like you are hacking your way around.  

Here we just talk about GraphQL and Prisma, but it is prevalent in the ecosystem today.  From lower level abstractions like front end frameworks to higher level abstractions like low code / no code software like Webflow.  As someone whose first website was written with the WYSIWYG editor Microsoft FrontPage, I think that lowering the barrier on entry for newcomers to the industry far outweigh the perils of not knowing exactly how something works. From personal experience, I know that having the details abstracted from me as I was using FrontPage to fumble around dropping in images and using the font selector build my first website, it sparked an unquenchable thirst to learn more.  It lead to me wanting to learn the spaghetti that was ASP and VBScript.  And here I am, still learning and loving it 20 years later.
10 Great Sites for UI Design Patterns you Must Save🏷️
Tags: beginners, uiweekly, design
Published: 2020-10-19 03:40:47

You don’t want to spend your whole life redesigning the wheel do you? No, neither do I. If you are looking for a design that solves a problem that has been solved inside a different application before; then the template for your wheel is probably already out there. That’s a design pattern for you and me.

I’ve put together a list of some of the best places to find design patterns on the web. Now, whilst all of these resources are free some may ask you to pay for premium resources.

💠http://ui-patterns.com/
>I like UI Patterns; it makes it easy to find patterns that you like and to group them together once you’ve decided that something is useful. They also have a bunch of interesting articles on UI design patterns which can help extend the way you approach using patterns in your designs

💠http://www.welie.com/patterns/index.php
>WELIE isn’t the prettiest site I’ve ever seen but there’s a very useful interaction design patterns library that is logically grouped and incredibly helpful.

💠https://patterntap.com/patterntap
>Pattern Tap is closing on 10,000 User-Generated Sets of patterns and that makes it an awe-inspiring resource for UI designers. The drop-down menu system makes it really easy to find what you want in moments.

💠http://uiscraps-blog.tumblr.com/
>The good, the bad, and the ugly of UI design. UI Scraps is a great blog that looks at interface design as a whole and then tinkers with the patterns used. You can find some great work here and some truly awful stuff too; it’s all thoroughly critiqued so you can see why something doesn’t work too.

💠http://www.patternbrowser.org/code/pattern/pattern.php
>Pattern Browser does exactly as the name suggests; it lets you quickly switch between UI patterns in your browser window. There aren’t as many patterns here as on some of the bigger sites but it’s a good resource nonetheless.

💠http://www.uie.com/
>User Interface Engineering offers more than patterns, it’s a heavy resource that can meet a lot of your UI needs. The user and site generated commentary is invaluable.

💠http://designsnips.com/
>Very nice graphical library of Design Snips for users to browse through and then put into play in their own UI work.

💠http://www.smileycat.com/category/elements-of-design/
>There are some handy groupings of design elements for use on Elements of Design. This goes a little beyond UI but that’s OK there’s plenty for the UI pro to use here too.

That's it for now.
Have a great day ahead!
_
✍️§Ðj
2nd PR for Hacktoberfest -- Regexp in Golang
Tags: opensource, hacktoberfest
Published: 2020-10-19 03:35:12

**The issue** I am helping with for the second PR of Hacktoberfest is regarding regexp expression in Golang, click [here](https://github.com/konveyor/move2kube-api/issues/27) to see the issue description. The first sight of seeing this issue made an illusion for me that it should be a piece of cake to be solved. So I asked the owner to assign this to me, when I am planning to implement it in several hours, maybe. I thought this may be an easy issue opened for Hacktoberfest, I was wrong. I had to choose another documentation issue for my first PR and left this for the second. I am a newbie for Golang, and I cannot even understand what this project is about. I even thought to give it up. 

**HOWEVER!** One night I sat down in front of my computer and thought to go through with the code. I checked each function of the lines that needed to be fixed, and all of a sudden I felt like I understood what the owner wanted! Then the long journey of communicating with the owner about the [PR](https://github.com/konveyor/move2kube-api/pull/30) started... and **got merged minutes ago!**

I have **learned** so much about regexp in Golang, the syntax, the methods, and how Golang can do things so fast and conveniently with its powerful functions. I am so satisfied with myself that I hung myself there and figured it out with the help of the owner. 

In the process, I was sometimes confused that why the owner wanted me to help with this issue, since it seems he knows the stuff and it would be much faster if he wants to fix it himself. I know it is the symbol of **imposter syndrome**, but I just cannot help thinking of the point of having me to offer help. Am I eligible to do this? Is the owner frustrated communicating with me? Am I being a little stubborn to be persuaded? Maybe the solution the owner suggested should be better? Maybe I should just accept his opinion and do whatever he proposed? I am happy that I did not give up easily and kept communication and provide my opinion as much as I can. I still did not figure out the reason some people want help from newbies like me, since they can do it much faster than me, not to mention the price of having to communicate with me. But I know that as long as the issue is raised and I think I can be a little help, I would still try to offer whatever I can.
Another Format of PR, which I am not a fan of.
Tags: opensource, git, github
Published: 2020-10-19 03:28:27

This week's task is to try using git remote, git fetch, git merge... instead of submitting PRs.
We were required to add an extra feature to the urlChecker tool, which allows passing a flag with a file name containing URLs to be ignored. The code itself was not that hard to implement, but we are supposed to work on another classmate's repo, and after implementation, we should use git remote, git fetch, git merge, git pull.... instead of submitting a PR. I have to admit that I got messed up several times. I had to delete the whole folder and start all over again. When I review [Tony's](https://github.com/isabellaliu77/urlChecker/commit/31920d4b726c9043a54b09fe90ecb41efdb6289f) work on my repo, I should use commands as below: 
```
git remote add xxx URLofxxx
git remote -v
git branch -a
git checkout xxx/branch-name
```
If I want to create a branch based on his branch, the below command is needed: 
```
git checkout -b issue-10-track tonyvugithub/issue-10
```
When everything is fine, I should merge it to my master branch.
First I should change branch to master, then merge.
```
git checkout master
git merge issue-10-track
```

When I work on [Andy's](https://github.com/yzwdroid/goURL) repo, it gave me much more headache. I forked his repo before, so my copy of his repo is quite behind from his current one. I tried to use `git fetch xxx` and somehow it didn't work, and I tried several other things. All failed and even made some interesting/complicated issues for me, which I cannot solve. I had to delete the whole folder and chose another location to redo it. After finishing this lab, I am feeling that I should try to get rid of the Windows system to avoid conflicts or unpredicted issues. To work on the [issue](https://github.com/yzwdroid/goURL/issues/7) that I filed, I should create a branch first: `git checkout -b issue-7` and then I implement the feature on this branch. After finishing the code, I messaged Andy to check my commit remotely and see if I need to make more changes or it is ready to be merged. 
Playing with Git can be fun, while also a headache. What I should do is to play with it more often to get used to the routines and commands.