teleren/devto huggingface dataset:
I created an easy way to create color combination schemes for UI 🌈
Tags: showdev, design, javascript, webdev
Published: 2019-06-27 22:57:23

## **[Colorbook 🎨](https://liyasthomas.github.io/colorbook)**
### Color schemes for UI design

For one of my project redesign, I was searching for an online color combination generator. There were many color pickers, generators, etc. but none seems to generate color combinations that suits my UI.

That's why I created an online designer tool: [Colorbook](https://liyasthomas.github.io/colorbook) for creating color combinations that work together well. Use the [Colorbook](https://liyasthomas.github.io/colorbook) to create great color combination palettes.

![UI](https://raw.githubusercontent.com/liyasthomas/colorbook/master/icons/screely.png)

[Colorbook](https://liyasthomas.github.io/colorbook) is an open-source color scheme generator optimized for UI like font, background, border, etc.

With [Colorbook](https://liyasthomas.github.io/colorbook), now I can create color palettes for my UI, and measure the accessibility of any color combination.

Picking a color scheme is now as simple as 1, 2, 3!

1. Pick a color.

2. View preview of sample UI.

3. Copy color codes.

![Colors](https://raw.githubusercontent.com/liyasthomas/colorbook/master/icons/screely2.png)

Bonus: 🌈 I also added a gradient color generator tool with customizable number of transition steps.

### **[Demo 🚀](https://liyasthomas.github.io/colorbook)**

### Feel free to contribute on **[GitHub](https://github.com/liyasthomas/colorbook)**

{% link liyasthomas/i-m-writing-a-book-de-coding-the-passion-project-2c07 %}

---

If you want a heads up on my next projects, or just want to chat about the web, life and happiness make sure to follow me [@liyasthomas](https://twitter.com/liyasthomas) on Twitter 💙. If any of my projects helped you please consider [making a donation](https://paypal.me/liyascthomas).

![yep](https://media.giphy.com/media/XbxZ41fWLeRECPsGIJ/giphy.gif)
When  to actually use curly braces in React
Tags: react, syntax, javascript, flatiron
Published: 2019-06-27 22:17:07

To answer that question, it would be easier to explain when you don't need a curly brace

####3 instances where you don't need a curly brace:
1. around a string `<Component propKey = " " />`
2. around the prop key `<Component propKey = {this.prop.thing} />`
3. creating an id or className `<div id="hello">`


Otherwise, you will need to use a curly brace. The good news, aside from example #2, it's always better to err on the side of using the brace.

But here are some common examples of when you <b>need</b> to use curly braces.

####Use curly braces where you:
- render your JSX element `render() { return goes here }`
- initialize state `state = { name: "jeff" }`
- reference props `{ this.props.name }`
- setState `this.setState({ number : "james" })`
- are doing string interpolation `I love ${snack.name}`

####Brief example of curly braces in action:

[codepen](https://codepen.io/jasterix/pen/ZdXvxR)

```javascript
class Toggle extends React.Component {
state = {
  toggleOn: true
};

  handleClick= () => {
    this.setState({
      toggleOn: !this.state.toggleOn
    });
  }

  render() {
    const buttonStyle = {};
    if (this.state.toggleOn) {
      buttonStyle.backgroundColor = "red"
    } else {
      buttonStyle.backgroundColor = "blue"
    }
      
    return (
      <button style={buttonStyle} onClick={this.handleClick}>
        {this.state.toggleOn ? 'ON' : 'OFF'}
      </button>
    );
  }
}
```

In keeping with tradition, [here is a great resource](https://reacttraining.com/blog/jsx-the-confusing-parts/) to learn more about JSX and its curly braces
When ER Diagrams are not enough
Tags: database, datamodel, entityrelationship
Published: 2019-06-27 22:00:09

This is an excerpt from this article:
https://dataedo.com/blog/you-dont-need-an-er-diagram-to-understand-your-database

ERDs are good tool for documentation of data models for small, simple, well designed databases with obvious domain. But they if you try to use then to visualize real databases then they might fall short. Here are some reasons for that

## Too many tables

ERDs may work if you have a couple dozen tables at most. If you put more it's going to be confusing rather than informative.

![](https://dataedo.com/asset/img/blog/large_oracle_erd.png)

## Too many columns

ERDs communicate well if they have a minimum set of columns. Some tables have over a hundred of columns and this information hides the big picture

![](https://dataedo.com/asset/img/blog/large_erd_tables.png)

## Confusing names

Real databases have confusing, misleading names and unused tables and columns and just by looking at a name doesn't tell you anything.

What data you think this sample table in SAP holds?

![](https://dataedo.com/asset/img/blog/sap_table.png)

## Non-obvious model and domain

You probably understood data models from sample diagrams you saw easily because it describes something that is simple and you know well and understand - school classes, movie rentals, etc. Those are relatively simple processes we have contact within our lives. However, there are many domains that we don’t know, understand or are very complex with many caveats. Diagram will not explain to you what the data represents and what is its logic.

## A solution?

There's no one simple solution but a good mixture of domain description, a set of simple diagrams and complete data dictionary for reference could do the trick.

[See sample database documentation that works](https://dataedo.com/samples/html2/AdventureWorks/#/doc/d2/adventureworks-database)
What career advice would you give to your younger self?
Tags: career, beginners, discuss, advice
Published: 2019-06-27 21:28:42

---
title: What career advice would you give to your younger self?
published: true
description: 
tags: career, beginners, discuss, advice
---

Imagine you time-travelled back to the ~~future~~ past and met your younger self.

What career advice would you give yourself? What do you wish you had been told when you started out in the software industry? What wisdom would you share to help your younger self?
The Fear of Effectiveness
Tags: story, internship, beginners
Published: 2019-06-27 20:44:51

---
title: The Fear of Effectiveness
published: true
description: A little story about my internship
tags: story,internship,beginners
cover_image: https://thepracticaldev.s3.amazonaws.com/i/foeggllwc073wdc6r1r9.jpg
---
I started my first internship as a software developer at a huge German industrial company in 2003. I was ready to rule the world or least code something with great value. It was a big thing and I was exited.

![I'm gonna rule the world](https://thepracticaldev.s3.amazonaws.com/i/10qrtofs28pq1a4gaqxt.jpg)

That suddenly stopped  when I learned that I had to program in VBA (Visual Basic for Applications) to automate large Excel sheets. To make it even worse, my main task was to type out large piles of paper into Excel. And when I say "large piles of paper", I meant that literally. We were applying for public tenderings and got thousands of pages of a printed specification. Each page contained a table with items that needed quotation. So two interns and me were hired to type out every item into Excel which would usually take 2-3 weeks and then hand it over to the project managers.

VBA was actually only used to calculate intermediate sums for each sections.

![So exciting](https://thepracticaldev.s3.amazonaws.com/i/f2cq7hbbhhkiwk7zz54r.jpg)

So after one or two of these specifications, I was wondering what this little floppy disk are, that most boxes contained together with the paper.

I asked the other interns but they did not know. I asked the project manager and they told me it's some special file format they cannot read with Excel and they don't have any other program that could read it. But it may contain the specification.

So it appeared that they hired three interns for years instead of buying the application that could actually the the file.

I decided that I would not waste my time anymore. Instead, I reverse-engineered the format and implemented a parser in Excel that would directly create a well-formatted Excel sheet in a few minutes instead of weeks.

I was quite happy to demo that to the other interns. The reaction was not what I had anticipated. They told me to not use it because it would kill our jobs.

I did not listen and went to the project manager. He had a look at the resulting Excel sheet and found a couple of encoding errors (German umlauts have not been decoded correctly) and decided that my program was not correct and I must do this by hand because it's more accurate.

![Yeah...but no](https://thepracticaldev.s3.amazonaws.com/i/hx8kt6sg77o0vcnk1lje.jpg)

Obviously, I did not listen again. For the rest of my time there, I used my program, fixed the umlauts and other issues manually and reading stuff online the rest of the time. When one of the project manager came around, I opened an Excel sheet I had always prepared in background and pretended I was working. 

![Boredom](https://thepracticaldev.s3.amazonaws.com/i/j14zhi01ozz7efysbzhs.jpg)

Eventually, I couldn't take the boredom anymore and applied for another internship internally.

What was your first internship or maybe first job like?
What actually is React State?
Tags: react, javascript, state, flatiron
Published: 2019-06-26 23:53:20

State is a weird concept to wrap your head around. But I hope this short read will help you conceptualize this core concept.
####Key takeaway
React state makes it so that when your state data changes, React triggers a re-render of your components, which then updates the DOM accordingly. 

So as a developer, you won't have to worry about getting the right elements to change the DOM because React will handle that.


###Getting started with state 
####Setting the initial state
This can be done with a constructor of like this:

```javascript
state = {
    toggleOn: true
  };
```

####Updating the state
State can be updated with `setState`. Never update state directly with `state =`
```javascript
this.setState{toggleOn: false}
```

###How it all comes together 
#####([codepen]( https://codepen.io/jasterix/pen/ZdXvxR)

```javascript
class Toggle extends React.Component {
state = {
  toggleOn: true
};

  handleClick= () => {
    this.setState(prevState => ({
      toggleOn: !prevState.toggleOn
    }));
  }

  render() {
    return (
      <button onClick={this.handleClick}>
        {this.state.toggleOn ? 'ON' : 'OFF'}
      </button>
    );
  }
}

ReactDOM.render(
  <Toggle />,
  document.getElementById('root')
);
```


####Difference between State and Props
- Any data your components use will accessed in state or in [props](https://dev.to/jasterix/what-exactly-are-react-props-f91)
- State is internally maintained (rather than being passed in like prop) 
- State lets us update the information in a component without requiring its parent to somehow send updated information
- You initial state in the constructor


If you're still confused, below is a (very) simplified test for determining if a component should have state. Start by understanding what isn't/doesn't have state

#####no state
- if a component is passed its data through its props, that piece of data should not be in the state
- if a component/data remains unchanged over time, it doesn't need/isn't state

#####state
- if a component holds data, it may have state
- if a component sets data for its child components, it may have state

[Here is a great article](https://www.freecodecamp.org/news/get-pro-with-react-setstate-in-10-minutes-d38251d1c781/) with a more depth look at React state
Update Your .NET Core Projects, Folks!
Tags: dotnetcore, netcore, support
Published: 2019-06-27 20:34:44

---
title: Update Your .NET Core Projects, Folks!
published: true
description: Just a little reminder to upgrade your .NET Core projects
tags: dotnet-core, .net core, support
cover_image: https://thepracticaldev.s3.amazonaws.com/i/ro5fp2x4uhvpe4uw3cjp.jpg
---

_the header image for this post was taken from the [official Support Policy for .NET Core](https://dotnet.microsoft.com/platform/support/policy/dotnet-core)_

It's finally that time! Yes: [.NET Core 1.0 and 1.1 have gone out of LTS](https://dotnet.microsoft.com/platform/support/policy/dotnet-core) and are no longer receiving servicing support from Microsoft.

### What Does That Mean?

Well, you should have already upgraded you projects to (at least) .NET Core 2.1 (though 2.2 is preferred). Which means you don't need to read this article.

Yay!

But for those of you who haven't upgraded: now is the time to do it. Seriously, talk to your project managers/project owners/clients/whoever and tell them that you _need_ to take the time to upgrade to a supported version of .NET Core.

It's up to you what you do if they don't want to give you the time. But personally, I wouldn't want to support an application stack which was written against an unsupported framework.

For some, the upgrade path will be super simple: edit the csproj, up the version of the [Target Framework Moniker](https://docs.microsoft.com/en-us/dotnet/standard/frameworks) to 2.1 or 2.2, hit build, voilà!

_thanks to [Paul Seal](https://codeshare.co.uk/) for pointing out my typo here 🎻_

For others it will be a little painful and might mean changing some things.

Either way, it'll be worth taking a look at the [1.x to 2.x migration guide](https://docs.microsoft.com/en-us/aspnet/core/migration/1x-to-2x/?view=aspnetcore-1.0) found in the docs.

Also, it's worth knowing what the support dates are for .NET Core. That way you can plan around migrating your projects to ensure that they stay supported.
Being Distracted
Tags: discuss, devops, css
Published: 2019-06-27 20:04:36

Hey!
like most of us, we are all trying to learn by ourselves from online resources.
I'm a beginner in programming, but lately i have been lost from the much of available online resources and also the when i look at how many things in a programming language i need to know though i have been made a plan for what and where and how and the amount of time i will be learning.
But i have become very frustrated lately and don't know how to handle this.
heartthrob-vision: making the web more accessible
Tags: npm, opensource, machinelearning, azure
Published: 2019-06-27 20:02:30

With a simple configuration you can make your website more accessible by adding description to your images automatically via Azure Cognitive Services.

After loading your page, the heartthrob-vision will send the url of every photo on your page to the Microsoft Azure Cognitive Services to create a description of what is showing on the image.

NOTE: We recommend to create manually all alt text for every image on your website. It will improve way more the accessibility of your website than using heartthrob-vision.

Look at examples at the documentation (http://heartthrob.vtnorton.com/vision.html) and the GitHub repository (https://github.com/vtnorton/heartthrob-vision).
Detect chrome dev tools (working trick)
Tags: javascript
Published: 2019-08-28 07:53:20

---
title: Detect chrome dev tools (working trick)
published: true
tags: Javascript
canonical_url: https://yon.fun/detect-chrome-dev-tools/
---

![Detect chrome dev tools (working trick)](https://yon.fun/content/images/2019/06/chrome-dev-tools-2.png)

Have you ever thought about how to detect if the _chrome dev tools is opened_ or not, even more, _listen when it's opening_? I have, and today I'm going to show a simple trick.

After some Google researches, I found many tricks but unfortunately, many of them aren't working anymore. There's just one solution (after me) which can deal with that. Take a look to this (copy and paste it to your code, it's ready to use solution):

```js
const element = new Image();
Object.defineProperty(element, 'id', {
  get: function () {
    /* Call callback function here */
  }
});
console.log('%c', element);
```
<figcaption>Detect Chrome Dev Tools Javascript Code</figcaption>

Let's dive into it a bit and understand what's going on there. So, first of all, we create an _element_ (it doesn't require to be `new Image()`, I think `new Audio()` would work just as well), we use `Object.defineProperty` to define the `id` property of the _element_ and add a _function callback_ on `get`. Pretty clever, right? Now every time when the _element.id_ is taken, the _callback function_ will run - that's what we need, put there the functions to run when _chrome dev tools_ will be opened.

So the interesting part is the last line, why _callback function_ is not running if the `console.log` is already called which means _element.id_ as well? Well, it's not true, `console.log` is called **only** when **chrome dev console tool** is opened which tries to `log` _element_ as well as `id` _property_ - and what's happening when `id` _property_ is taken? Right, it triggers the (`get`) callback function.

Do you know other tricks that nowadays really work? Share them with us, I'll include in this article.
What They Really Mean When They Say "We Don't Give Interview Feedback To Avoid Lawsuits"
Tags: career, hiring, beginners, tips
Published: 2019-06-27 19:33:21

---
title: What They Really Mean When They Say "We Don't Give Interview Feedback To Avoid Lawsuits"
published: true
description: A comprehensive dissection.
cover_image: https://thepracticaldev.s3.amazonaws.com/i/2gy8xmvqyjftxlw9f292.jpg
tags: career, hiring, beginners, tips
---
"The candidate criteria we use is illegal."
Building low latency geo-distributed apps & apis in python
Tags: replit, python
Published: 2019-06-27 18:35:08

Today’s applications are required to be highly responsive and always online. To achieve low latency and high availability, instances of these applications need to be deployed in multiple regions that are close to their users.

But these globally distributed apps need a geo distributed fast data platform that can transparently replicate the data anywhere in the world to enable these apps & apis to operate on a copy of the data that's close to its users. Similarly the apps need geo-replicated and local streams to handle pub-sub, ETL and real-time updates from the fast data platform.

This post shows how one can do the above quickly using python leveraging Macrometa fast data platform. Link: https://www.macrometa.co

Feel free to agree/disagree and let me know your thoughts & suggestions.

{% replit @durgaMacrometa/Building-geo-distributed-apps-and-apis %}
My experience with React
Tags: react, javascript, beginners
Published: 2019-06-27 19:03:47

---
title: My experience with React
published: true
description:  
tags: react, Javascript, beginner
cover_image: https://thepracticaldev.s3.amazonaws.com/i/pe9457um7f1s0y28byxl.jpg
---

During these days I read some front-end developer job announcements and I realized that 90% of them ask for React's knowledge and the remaining 10% ask for knowledge of Vue.js.

In the past few months, I have worked for a project with Vue.js. I had never used it, but for a new project my boss asked me to learn it and I must say that today I know it very well. It's easy to learn, simple to use and easy to maintain a code! I immediately fell in love with Vue.js but I realize that it is the latest and companies are using React and Angular and have no intention of migrating to Vue.js.

So, to be in line with those positions, I decided to start learning React. I have already the component based logic in my mind, so I just have to learn how to put the pieces together.

First of all, I visit their website and read "React is a JavaScript library for building user interfaces". Okay, not a framework, a library!

I go to the tutorial section but their examples seem messed up, not for a beginner. I get upset and think "but why not use Vue.js?".

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

So I decided to go to YouTube to look for video tutorials. Fortunately I find this [2-hour video](https://www.youtube.com/watch?v=Ke90Tje7VS0) really well done by [Moshfegh Hamedani](https://twitter.com/moshhamedani).

I look at it all and think again "but why not use Vue.js?" and the answer I gave myself is this "Companies want it!"

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

They taught me that the best way to learn something is to do it, so I decided to start developing a weather interface in different cities around the world.

I started from the basics:
<pre>npm install -g create-react-app
create-react-app weather-UI
npm start --o
</pre>
Et voilà, React homepage in online on you localhost!

#### _"They taught me that the best way to learn something is to do it"_

And here comes the real fun, build the various components, pass values from parent to child and vice versa, fetching the data from the REST API, build the interface with its CSS style, and so on!

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

In the end, what [I have developed](https://weather.matteomazziotti.it) can you found here! I know it's not perfect, there are still a lot of things to do! For example, having the details hour by hour of the day, change the scenario of the header according to the selected day and other little things.

How about React? What difficulties did you find learning React? What do you think are the strengths and weaknesses of this library?

Indulge in comments!😃


[GitHub Repository](https://github.com/gitmazzio/weather-UI) - [Demo link](https://weather.matteomazziotti.it)
[My website](https://matteomazziotti.it)


Cover photo by Fatos Bytyqi on Unsplash
Open Links in a New Tab on Dev.to
Tags: discuss
Published: 2019-06-27 18:18:07

---
title: Open Links in a New Tab on Dev.to
published: true
description: discussion for opening links in a new tab
tags: discuss
cover_image: https://thepracticaldev.s3.amazonaws.com/i/r7as7btpwvctdfs5fhnm.png
---

Dev.to needs a way to insert links into the markdown that will open in a new tab.  I like to open links without leaving the article.  Is this possible to implement? Who else thinks this would be a good idea?
WSL as a proxy server.
Tags: wslproxy
Published: 2019-06-27 18:07:16

I have a Windows (10) application that has a UDP interface only.  But I need to connect to a device that accepts only telnet connections.  I wrote a Python program that creates a telnet client and automatically connects to a telnet server.  I was wondering if it was possible to run my Python program in WSL to make the telnet connection, create a UDP socket (to Localhost?), and then use my Windows program to connect to that - which would give me the connectivity that I need.