teleren/devto huggingface dataset:
Generating Material UI Color Palette in Metro 4
Tags: javascript, css, html, metro4
Published: 2020-11-13 19:39:10

Preamble - [Metro 4](https://metroui.org.ua) is a free open-source impressive components library written on HTML, CSS, and JAVASCRIPT.

In version 4.4.3. I added a new component `color-selector` and improved the module for working with color, including a function to generate a color palette in the Material UI style.

To demonstration these features, I have written a small and simple application on codepen.io. You can see it on https://codepen.io/olton/pen/abZXBmO

With this example, I wanted to show once again how easy it is to write on Metro 4 with its declarative approach. 

Thank you for your attention.
Visualizing React hooks' lazy initial state
Tags: react, javascript, beginners, epicreactdev
Published: 2020-11-13 19:33:22

Most examples of React hook's [lazy initial state](https://reactjs.org/docs/hooks-reference.html#lazy-initial-state) uses inline arrow functions to showcase the usage:

```js
function App() {
  const [state, setState] = React.useState(() => expensiveComputation());
  // ...
}
```

Paired with the idea that whatever you pass to `React.useState` is the initial value of the state, it can be hard to grasp the difference from the example below:

```js
function App() {
  const [state, setState] = React useState(
    expensiveComputation(),
  );
  // ...
}
```

For me, it helps to visualize the difference if you assign what’s inside the parentheses to a constant.

```js
function App() {
  const initialState = 0;
  const [state, setState] = React.useState(initialState);
  // ...
}
```

Everytime `App` re-renders, the function `App` will re-run completely. This means `0` is set to `initialState` in every render. Now let's do the same with the expensive computation example:

```js
function App() {
  const initialState = expensiveComputation();
  const [state, setState] = React.useState(initialState);
  // ...
}
```

It's pretty clear now that the expensive function _is called every time the component renders_. `React.useState` is just **ignoring** its result in subsequent renders. And that's what you want to avoid when passing a function to the hook.

`React.useState` implementation detects if you're passing a function and makes sure to call it once for the component's lifetime.

The tradeoff now is that you're creating a new function for every render. That's acceptable if the computation takes longer or is more complex than instantiating an inline function. If that's not the case (for example, when setting a constant like `0` in the first example), go with passing the value directly to `React.useState`.

<small class="image_caption__2QQwZ" style="display: block;"><span>Photo by <a href="https://unsplash.com/@proozenburg">Presley Roozenburg</a> on <a href="https://unsplash.com/photos/gklfv5avr4c">Unsplash</a></span></small>
Spring JPA many to many 3 tables
Published: 2020-11-13 19:17:36

Hi,
I was reading the article, https://forum.hibernate.org/viewtopic.php?p=2372504
and stuck with data insertion via api i.e. setter methods. How can I use repository persist/save/saveflush to create records in RelationABC table , when i create a TableA record. If I need to create TableA,B, C records, how to insert into RelationABC
Ask Octopus - Can I have a test Octopus Server?
Tags: octopus, devops
Published: 2020-11-13 18:44:21

---
title: Ask Octopus - Can I have a test Octopus Server?
published: true
description: You need another Octopus Server instance to test upgrades. Do you need another license? Find out in this Ask Octopus!
tags: octopus,devops
series: Ask Octopus
---

You need another Octopus Server instance to test upgrades. Do you need another license? Find out in this Ask Octopus!

{% youtube 95AfIABANZM %}

Other resources:
 - https://help.octopus.com/t/can-i-have-multiple-octopus-servers-on-one-license/25961
 - https://octopus.com/pricing/faq#server-instances

Do you have a question about how to use Octopus? Email advice@octopus.com and someone from our team will get you an answer. You might even see it in a future episode.

Join our community slack at https://octopus.com/slack
What is load testing? and why is it important?
Tags: webdev, testing, performance, productivity
Published: 2020-11-13 18:39:09

The simple definition of load testing is
>Load testing is the process of putting demand on a system and measuring its response.

Generally, we use manual and automation testing in our project which is okay for checking if the functionality is working fine and those are functional tests. 

>But, Just because your application will pass a functional test doesn't mean it can perform the same under a load.

Consider your application is working fine for 10 simultaneous users. Are you sure that your application will behave fine with more people using it simultaneously? If so, How many people will be able to use it simultaneously? 

We can't have the same number of QAs as end-users who simultaneously check the system unless we have a budget to hire these many QAs.

Many times we hear that the site goes down due to sudden spikes in site traffic. So this type of testing is necessary, right?

>So How we will ensure that our application will work well under the pressure like us :) !

We can't have actual users to test, but we can have virtual users right? who can do the requests for us simultaneously... Load testing uses this concept of creating virtual users. Through the load testing tools and libraries, we can test our application against sudden spikes in the traffic and catch the behaviour before it directly occurs in production.

Moreover, performance testing will help us scale our project. It draws a line and we should optimize our application to not cross that line.

There are many load testing tools available, Some of them are
- [k6](https://k6.io/)
- [WebLOAD](https://www.radview.com/)
- [LoadNinja](https://loadninja.com/)
- [SmartMeter.io](https://www.smartmeter.io/)
- [LoadView](https://www.loadview-testing.com/)
- [Apache JMeter](https://jmeter.apache.org/)
- [LoadRunner](https://www.microfocus.com/en-us/products/loadrunner-professional/overview)
- [Appvance](https://www.appvance.ai/)
- [NeoLoad](https://www.neotys.com/neoload/overview)
- [LoadComplete](https://support.smartbear.com/loadcomplete/docs/general-info/introducing-loadcomplete.html#:~:text=LoadComplete%20is%20a%20load%20testing,for%20web%20servers%20and%20services.&text=LoadComplete%20automates%20creating%20load%20tests,of%20virtual%20users%20working%20simultaneously.)

These tools are awesome and provide many functionalities and performance statistics such as copying the user behaviour and based on that do the load testing with virtual users and so on.
Exciting and exhilarating hacking 
Tags: hacktoberfest
Published: 2020-11-13 18:34:07

<!-- ✨! ✨ -->


### [The journey of Open Source  ]
<!-- I Recently learned about DEV community of like minded people, participated in year Hacktoberfest festivity and contributing to open source.  --> 
### Background

<!-- I am brand new to open source and literally just had my first PR. Started coding a couple of years ago, got to know about here through university's community   →

### Progress

<!-- Share a bit about where you’re at in your Hacktoberfest journey. What stage are you at? How has the process been?  -->


### Reflections
<!-- Overall, my journey with Hacktoberfest 2020  has been exhilarating starting with my first PR and then onwards was wayyy too exciting to describe in words, learned lots of thing and there is still a long way to go. It was simply awesome and I hope to participate again next time.    -->
[docker] Another small tool that i'm working on
Tags: docker, container, javascript, tooling
Published: 2020-11-13 18:18:20


A small adventure that i took recently is to try developping a small tool to control my containers deployement by consuming docker api engine.

https://docs.docker.com/engine/api/v1.40/

My experience with using rancher was good so i tried to reproduce that with my own tool.

first of all you will need to edit and restart your docker.service file

```
vi /lib/systemd/system/docker.service
#edit this line like : 
ExecStart=/usr/bin/dockerd -H=fd:// -H=tcp://0.0.0.0:5555
systemctl daemon-reload
sudo service docker restart
```

You can contribue : https://github.com/tkhadir/docker-manager

Thank you :)

## List of images 


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


## List of containers running

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ca2bpcfrmqycb3u36mm5.png)
To My First 1k of Users 🚀
Tags: showdev, webdev, javascript, programming
Published: 2020-11-13 18:12:17

Today my side project [Architecture Analysis](https://arc.patico.pro) has got first 1000 visitors. Not a very big deal, but these people are really driving this project, their experience lemme know what is going wrong, what I need to improve, and what is well done.

I really appreciate it and want to say
# BIG THANK YOU, GUYS
Only you let me know that I do useful stuff and you drive me to continue this work.

During this month Architecture Analysis got the support of JavaScript language and more accurate analysis algorithm, started to provide components insights, and generate badges for GitHub repositories' readmes.
Also recently feedback form was added so any feedback or feature requests are welcomed!

*Thank you guys and welcome to*  [https://arc.patico.pro](https://arc.patico.pro)  
*Sincerely yours, Paul*

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ofz6100j0fyb2rcewnin.gif)
Know when to walk away...
Published: 2020-11-13 17:59:59

How many times have you sat staring at a screen with your head in your hands, trying to figure out how to best get around that thing you've been staring at for the last 2 hours?

I'll answer it for you - lots. 

How do I know this? Because we have all been there and we've all seen countless others with that look of despair plastered over their faces. 

So, whats the best way around this? Simple; do nothing!

Go for a walk, make some food, watch an episode of something on Netflix or if you have some _totally_ unrelated work to do then do that. Taking your mind off a problem has been proven to help solve said problem, the University of British Columbia found that our brains are much more active when we daydream than previously thought (read the full article [here](https://www.sciencedaily.com/releases/2009/05/090511180702.htm)).

Next time you are staring out of the window or thinking about what to do at the weekend, don't feel guilty! But don't use it as an excuse...
What was your win this week?
Tags: discuss, weeklyretro
Published: 2020-11-13 17:57:21

---
title: What was your win this week?
published: true
description: Got to all your meetings on time? Started a new project? Fixed a tricky bug?
tags: discuss, weeklyretro
cover_image: https://cl.ly/188e843c2985/download/Image%202019-02-15%20at%202.36.37%20PM.png
---

Happy Friday!


**Looking back on your week — what was something you're proud of?**

All wins count — big or small 🎉

Examples of 'wins' include:

- Starting a new project
- Fixing a tricky bug
- Cleaning your desk... or whatever else might spark joy 😊 


**Have a great weekend!**

![Toast!](https://media.giphy.com/media/l0JMmfhjQdeh7QSmA/giphy.gif)
Hacktoberfest 2020
Tags: hacktoberfest
Published: 2020-11-13 17:50:32

 
Hello everyone!
Today I got the confirmation mail that my contributions to open source during hacktoberfest 2020 are approved. It was my first contribution to open-source, and it was really helpful for me to explore and learn.

# Contributions:

-> Here, I have created a basic resume template.
link: https://github.com/CodeMacrocosm/HacktoberFest2020/pull/136

-> In this, I have created an introductory webpage for Hacktoberfest-2020.
link: https://github.com/AbhishekMaira10/Hacktoberfest2020/pull/146

-> link: https://github.com/mujacm/Hacktober2020Contributors/pull/12

-> Here, I have designed shapes only with CSS.
link: https://github.com/CodeMacrocosm/HacktoberFest2020/pull/140

After 14 days review period all the PRs were accepted.

Hacktoberfest is really a great platform to improve your skills, gain confidence, and practice coding.
Thank you DigitalOcean.
How Traindex Leverages the Keyword Search?
Tags: nlp, machinelearning, datascience, patents
Published: 2020-11-13 17:50:23

Traindex is a semantic search engine for corporate datasets to retrieve the most relevant results from a corpus. This search not only incorporates the meaning of the words but also includes contextual awareness. It enables a semantic search engine to outperform any keyword search engine; to find more, you can head out to our detailed [article](https://dev.to/traindex/how-is-semantic-search-different-from-keyword-search-578d) about the difference between both these approaches.  

Traindex performance is measured using a variety of benchmarks, ranging from automated algorithms to manual experts' classification. For instance, we are using the [Jaccard Similarity](https://dev.to/traindex/benchmarking-of-textual-models-jaccard-similarity-1c3i), which counts how many words from the retrieved results match the query's keywords. The following graph illustrates the visual intuition of this benchmark:

![Screenshot from 2020-11-13 22-48-23](https://dev-to-uploads.s3.amazonaws.com/i/otxfhw6pri8vw8js8b5k.png)
 
The blue bar represents the query's keywords, whereas the orange bars represent the matched keywords. The higher the bar, the more keywords in common.

In general, the benchmarking queries contain around 1200+ unique words. We have achieved a 47% average Jaccard Similarity score for the first twenty results against each query in our latest API release. This score means that we are implicitly applying the keyword search over the corpus since it approves that on average, Traindex could retrieve 564 common keywords with the query, which is far more than any keyword search engine can offer. 

Moreover, the common words are not just random words because they are meticulously picked by an algorithm that decides about the query's best representative. The same algorithm also incorporates their semantic meaning during the search, which leads the percentage of Jaccard Similarity score sometimes to raise up to 90% and 99%.

When it comes to response time, Traindex is fairly quick. You can imagine how much time it would take to perform a keyword search of 564 words on 8.5M+ documents. It will require a lot of time and resources to go through the entire corpus, match the keywords, and bring up the relevant results. However, Traindex searches and ranks the results by their semantic similarity and not by the highest keyword match, as you can see from the above figure.

## Conclusion
Traindex could give you the best of both worlds: keyword search and semantic search. Keyword search over millions of documents will take a long processing time and too many resources and produce a lot of false positives. Traindex, on the other hand, permits you to do a query with an entire document with even tens of thousands of words, and still, the response time is quick, and results are quite relevant.
Rick and Morty Dead or Alive
Tags: react, javascript, portfolio, api
Published: 2020-11-13 17:34:10

I made a Rick and Morty dead or alive game using the Rick and Morty API. It uses React with Hooks, and Context for state. 
Waste 5 minutes on it and tell me what you think.
[Rick and Morty Dead or Alive link](https://rm-doa.vercel.app/)
Venn and Euler Diagram Challenge with prizes!
Tags: challenge, javascript
Published: 2020-11-13 17:32:01

# Challenge Details
To celebrate the new chart type additions of <a href="https://jscharting.com/blog/whatsnew-version-30/">JSCharting 3.0</a> we are launching a Venn and Euler Diagram challenge where top entries will win free licenses.

1. <a href="https://jscharting.com/download/">Download</a> JSCharting 3.0 if you haven't already.
2. Create your own Venn Diagram or Euler Diagram chart using JSCharting and send us a link to your site, blog, codepen or tweet #JSCVenn.
3. **Win a free license** of the complete JSCharting bundle (top 3 entries).

Get inspired from some of the <a href="https://jscharting.com/examples/chart-types/venn/">example Venn and Euler charts</a> included. The JSCharting download will also include these samples and their code.

# What is the difference between a Venn and Euler Diagram?
A Venn diagram shows all possible relationships between two or more sets while an Euler diagram only shows the relationships that are actually possible in the real-world.

**Example Venn Diagram:** Click the images below for interactive Javascript and SVG versions of these charts.
<a href="https://jscharting.com/examples/chart-types/venn/icon-groups/">![Digital Marketing Venn Diagram](https://dev-to-uploads.s3.amazonaws.com/i/6kisqx6xbbacgzryvdtm.png)</a>

**Example Euler Diagram:**
<a href="https://jscharting.com/examples/chart-types/venn/euler-diagram-of-british-isles/">![Euler Diagram of the British Isles](https://dev-to-uploads.s3.amazonaws.com/i/ne1cwq14loy60qthbpgk.png)</a>
We can't wait to see the Venn / Euler diagrams you come up with! If you have any questions about how to use the JavaScript charting library, please reach out to the support team and they will be happy to help.
Dual Booting Ubuntu 20.04 LTS along with Windows 10
Published: 2020-11-13 17:28:02

This will be a story for those who did not get the expected result while dual booting Ubuntu along with Windows.
Since i was completely new to tech-stuffs  i took my time , referred various websites and watched many Youtube tutorials to get a grip of what i was about to do . After a while i decided to execute what i learned . At first the process went smooth until i was at this page where i need to choose between "Try Ubuntu" and "Install Ubuntu". Since it was obvious that i need to install Ubuntu i clicked that option but only i was shown a tab stating that this system uses Intel RST which needs to be turned off before installing Ubuntu. So the i followed their instructions and went and turned off RST. After i applied changes I closed the Bios menu and then i thought my system was loading but then, it showed "YOUR PC RAN INTO A PROBLEM . WE WILL RESTART IT FOR YOU". After that my system restarted ,again that message was shown on the screen . After which i turned off my PC . On opening my laptop  a screen opened showing Automatic repair and gave two options Restart and Advanced Options. Since restart didn't work well i chose the other option "Advanced Option",then i was shown three options namely 

1.Continue

2. Troubleshoot

3.Turn off your PC

Since i knew neither of the option 1 and 3 was not going to work i clicked the Troubleshoot option, after which i was shown 4 options namely 

1.Refresh your PC

2.Reset you PC 

3.Microsoft recovery and diagnostic toolset 

4.Advanced Options 

Since this system was very new and not many important data was stored in my system so i decided to use the option "Reset Your PC ".I know it may sound lame and stupid to erase all the data in my PC instead of using Advanced options, but the thing is that i  didn't know what to do further and decided to play it safe . So i decided to factory reset my PC and after nearly 40 mins i got my system back to how it used to be  . That night i researched why my Windows didn't work   and i found out that  my windows was no longer able to boot the moment i turned off RST in my BIOS menu. After which i consulted my seniors who sent more resources on this matter after which i  did some research . After  a week i resolved this matter and was successfully able to dual boot Ubuntu along with windows . 
But the most important thing to remember  is that keep a backup of your data as your system may crash multiple times . 
The thing is that try patiently, even if you get errors multiple times and learn from your mistakes . 

P.S some of the websites i visited  
1. https://support.thinkcritical.com/kb/articles/switch-windows-10-from-raid-ide-to-ahci#:~:text=Right%2Dclick%20the%20Windows%20Start,start%20with%20AHCI%20drivers%20enabled.
2. https://discourse.ubuntu.com/t/ubuntu-installation-on-computers-with-intel-r-rst-enabled/15347

Keep Learning !!
Return JavaScript from Laravel controller method
Tags: laravel, php, webdev
Published: 2020-11-13 17:24:40

If you want to return some JavaScript code from your Laravel controller method, you can do so just by setting a header like below:
```php
public function show()
{
    return response()->view('storefront')
            ->header('Content-Type', 'application/javascript');
}
```
- `Content-Type` header and its value set to `application/javascript`.
- You can then use it by specifying the Route URI from `web.php` file, like below:
```html
<script src="https://example.com/storefront/script"></script>
```
- `storefront` is a **Blade** view and is stored as `storefront.blade.php`
```
console.log('works')
```

### Few thoughts on it

- There is a trade-off that you loose JavaScript syntax highlight and linting. But, you get dynamic values from database which will be filled for you before outputting this JavaScript. 
- Otherwise you will need to make **Ajax** request to fetch them.

### Practical use-case for this
When we are loading the *script* registered via [Shopify ScriptTag API](https://shopify.dev/docs/admin-api/rest/reference/online-store/scripttag) on **shop storefronts**, we want our *script* to already have values from database for that specific **shop**.
How to finish a project
Tags: management, devjournal
Published: 2020-11-13 17:14:01

We all know that we are really good at starting projects but we are really bad at finishing them.

#__And that’s ok.__#

__BUT__, since we live in a world where time is money and what we strive for is mostly success, as developers or creators, we always want to have a “finished” product.

Being real, there’s never a finished product, the product can always be better, more versatile, more performant.

Let’s take for example the case of creating a personal website or blog.
You start with an idea of what it should accomplish and then you start working on that. 

Suddenly, you begin to think that you want your website to use material design but then you check the latest trends and then you go into isomorphic design and then you think about just using wordpress with a template and then you think that you want it to be simple without complexity and then, and then...

Too many choices gather and you can easily get paralyzed and leave it for later and suddenly you abandon the project.

__And that’s natural.__

The real problem when starting a project are limitations.

We need to set proper limitations so that we know that we are on track with the project so that we can commit to it consistently.

__So, let’s start with ways of adding limitations to the projects.
What I usually use is:__

1. Add a deadline
2. Find out the 1 thing that the product should do
3. Limit the tools that you’re using
4. Implement and review
5. Detach from the project

---

The list is pretty straightforward but let’s go through it a little.

1. By adding a deadline you free yourself from “unlimited potential” work that should be done thus you can feel more serious about the project.
2. By finding out what the product should do you setup the acceptance criteria for the project end.
3. Limiting the tools is important since you can always add new sparkles to the project but those have no real value for the project.
4. Just do it! Start working on the implementation and then review the work, do not add extra stuff that are not essential to the project.
5. Finally, detach yourself from the project, don’t think that it could’ve been done better because it must surely could. BUT you’re way ahead of the people that didn’t finish. ;)


#__Fazit! (Conclusion in German)__#

The best way to think about projects is like a sculptor that uses what he has to break things down until the final product is in place. 
We are limited beings with limited time so it’s better to have meaningful finished projects than just bits and pieces of “what could’ve been” projects.

Cheers!