teleren/devto huggingface dataset:
Lava-lamp color
Tags: javascript, canvas
Published: 2019-05-17 02:47:34

# Intro

This is a cool simulation of a lava lamp implemented using “metaballs”.  This time the lava lamp is colorful.

# What do you need?

To run the code in this article you don’t need to install anything on your local computer.

Just open the online JavaScript playground from [codeguppy.com/code.html](https://codeguppy.com/code.html) and copy and paste the following code in the integrated editor.

When ready, press the “Play” button to run the code.

![](https://thepracticaldev.s3.amazonaws.com/i/6gx3po207zw2vnz0wl5p.png)


# Source code

```
// Color lava lamp with metaballs
const w = 80;
const h = 60;
const displayStyle = 2;

var mult = 900;
var scaleX = width / w;
var scaleY = height / h;

colorMode(HSB);
noStroke();

var balls = [];

function enter()
{
    for(var i = 0; i < 5; i++)
    {
        balls.push({ x : random(w), y : random(h), dx : random(1, 2), dy : random(1,2)});
    }
}

function loop()
{
    update();
    display();
}

function update()
{
    for(var b of balls)
    {
        b.x += b.dx;
        b.y += b.dy;
        
        if (b.x > w || b.x < 0)
            b.dx *= -1;
            
        if (b.y > h || b.y < 0)
            b.dy *= -1;
    }
}

function display()
{
    for(var x = 0; x < w; x++)
    {
        for(var y = 0; y < h; y++)
        {
            var sum = 0;
            
            for(var b of balls)
            {
                sum += 1 / dist(x, y, b.x, b.y);
            }

            var col = mult * sum;
            displayDot(x, y, col);
        }
    }
}

function displayDot(x, y, col)
{
    fill(col, 255, 255);
    
    switch(displayStyle)
    {
        case 0:
            rect(x, y, 1, 1);
            break;
        case 1:
            rect(x * scaleX, y * scaleY, scaleX, scaleY);
            break;
        case 2:
            ellipse(x * scaleX + scaleX / 2, y * scaleY + scaleY / 2, scaleX, scaleY);
            break;
    }
}

```

# Feedback

If you liked the article, please follow [@codeguppy](https://twitter.com/codeguppy) on Twitter and / or visit [codeguppy.com](https://codeguppy.com) for more tutorials and projects.

Also, if you want to extend this article with detailed instructions explaing how to build the program step by step, please leave feedback in the comments.
Eyes follow the mouse pointer
Tags: javascript, canvas
Published: 2019-05-17 02:44:44

# Intro

Learn how to build the famous eyes that follow the mouse cursor. 

It is an awesome effect that can be implemented easily in CodeGuppy with the help of a little bit of trigonometry.

# What do you need?

To run the code in this article you don’t need to install anything on your local computer.

Just open the online JavaScript playground from [codeguppy.com/code.html](https://codeguppy.com/code.html) and copy and paste the following code in the integrated editor.

When ready, press the “Play” button to run the code.

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


# Source code

```js
// Use cartesian - polar coordinates conversion to implement
// eyes that follow mouse coursor

function loop()
{
    clear();

    drawEye(200, height / 2, 60);
    drawEye(380, height / 2, 60);
}


function drawEye(x, y, r)
{
    fill("white");
    ellipse(x, y, r * 2);

    drawEyePupil(x, y, 0.75 * r, 0.5 * r);
}

// Draw eyes that follow the mouse position
function drawEyePupil(x1, y1, r, pr)
{
    var angle = atan2(mouseY - y1, mouseX - x1);

    var x2 = x1 + r * cos(angle);
    var y2 = y1 + r * sin(angle);

    fill("black");
    ellipse(x2, y2, pr);
}

```

# Feedback

If you liked the article, please follow [@codeguppy](https://twitter.com/codeguppy) on Twitter and / or visit [codeguppy.com](https://codeguppy.com) for more tutorials and projects.

Also, if you want to extend this article with detailed instructions explaing how to build the program step by step, please leave feedback in the comments.
Don't be Afraid to Ask Questions
Tags: learning, questions, confidence
Published: 2019-05-17 00:25:35

---
title: Don't be Afraid to Ask Questions
published: true
description: I'm an engineer and a natural-born master of asking questions. I used to be afraid of it, but there's really no reason to be.
tags: learning, questions, confidence
cover_image: https://thepracticaldev.s3.amazonaws.com/i/om47qocu0lb2cgzd7u0g.jpg
---

There's no such thing as a stupid question. There may be stupid timing for it, such as a student asking when an exam is 5 minutes after the teacher already announced that information. But that was still a good question, they just asked it at a horrible time.

In general, there are not too many restrictions on asking questions. It's a lot about timing them. For example, you don't want to ask too many specific questions about implementation details if you're still trying to find out what a client needs in a potential product. Their needs are *probably* going to change every time you talk to them at this point and planning the implementation too rigorously could be a waste of time.

So, what are the benefits of breaking out of your fear of asking questions and just doing it?

### Learning, learning, learning

To an extent, who cares how they feel about you asking a bunch of questions? Your career is yours and only you can be responsible for taking it to the next level.

### Making new friends

I can't tell you how many people I've met through the DEV Community site and Twitter over this past month. It's really exciting how much support you can find in this industry if you put yourself out there.

### Building your confidence

Sometimes the scariest part about asking questions is knowing *how* to ask them. You can make 10 attempts at Googling something and Google isn't going to judge you for doing it. Re-wording a question to a human a few times to make sure you're getting the right information? That can potentially be frustrating for both of you. But good news! The more you ask questions, the better you get at wording them.

Have any insight on questions that you'd like to share? Leave a comment or [send me a tweet](https://twitter.com/ashleemboyer)! :)

---

Did you know I have a newsletter? 📬

If you want to get notified when I publish new blog posts or make major project announcements, head over to [https://ashleemboyer.com/newsletter](https://ashleemboyer.com/newsletter).

---

*[Image](https://unsplash.com/photos/gn5EmRwZb_Y) by [kgrkz](https://unsplash.com/@pepitaphotos) on [Unsplash](https://unsplash.com).*
Setting up Tailwind 1.0 on a new Laravel project
Tags: css, tutorial, beginners, laravel
Published: 2019-05-17 00:03:59

---
title: Setting up Tailwind 1.0 on a new Laravel project
published: true
description: Let's review how simple it is to get up and running with Tailwind on a fresh Laravel installation.
tags: css,tutorial,beginners,laravel
---

Setting up Tailwind 1.0 on a fresh Laravel installation is really simple. Follow along below to get up and running in a couple of minutes.

Let me know what else you'd like to see!

{% youtube UbL1VlVMCIc %}
TIL: Datalist elements can have values and labels
Tags: html, webdev
Published: 2019-05-17 18:18:33

---
title: TIL: Datalist elements can have values and labels
published: true
tags: html, webdev
canonical_url: https://www.stefanjudis.com/today-i-learned/datalist-elements-can-have-values/
---

Today I was reading [an issue](https://webplatform.news/issues/2019-04-10) of [Šime Vidas'](https://twitter.com/simevidas?lang=en) great [Web Platform news](https://webplatform.news/). He describes something that was news to me – `datalist` elements not only provide values that can be chosen but also have a mechanism to show labels, too. 

```html
<label>
 Animal:
 <input name=animal list=animals>
</label>
<datalist id=animals>
  <option value="Dog">🐶
  <option value="Cat">🐱
  <option value="Duck">🦆
</datalist>
```

The markup above results in the following:

![Input field with auto-completion including values and labels](//images.ctfassets.net/f20lfrunubsq/3qmuEeNOdRPOrmMq4M3KKW/f2d0ad766ec446161165c5aa2ebb7e57/datalist.jpg)

That's very cool in my opinion. :) 

**But heads-up: before you jump onto using this - make sure to read [Šime's article about it](https://webplatform.news/issues/2019-04-10). Currently, there is [a Firefox bug](https://bugzilla.mozilla.org/show_bug.cgi?id=869690) that troubles user experience tremendously.**

If you want to play around with it and see it in action you can have a look at [this CodePen](https://codepen.io/stefanjudis/pen/Mdoyxd).
What Is The Liskov Substitution Principle?
Tags: oop, solid, cleancode
Published: 2020-09-01 12:13:35

---
title: What Is The Liskov Substitution Principle?
published: true
date: 2019-05-17 00:00:00 UTC
tags: 
canonical_url: https://ellehallal.dev/blog/2019/05/2019-05-17-what-is-the-liskov-substitution-principle/
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/mz0onzug31sr2meabu9s.png
tags: #OOP, #SOLID, #cleancode
---

<center><h3>Originally posted at <a href="https://ellehallal.dev" target="_blank">ellehallal.dev</a>👩🏽‍💻</h3></center>

---

## The Principle Definition

> _Let φ(x) be a property provable about objects x of type T. Then φ(y) should be true for objects y of type S where S is a subtype of T._

That’s great, but what does it mean 🤷🏽‍♀️? In simpler terms, a child class should be able to substitute a parent class, without any unexpected behaviour. It ensures inheritance is being used correctly.

* * *

## An example of adhering to the Liskov Substitution Principle

Below is the class `Animal`. When the `speak` method is called, a string is expected to be returned. The method does not have any parameters.

```java
class Animal
    def speak
    ""
    end
end
```

Below are subclasses `Cat` and `Dog`. Both inherit from `Animal` and have a `speak` method.

```java
class Cat < Animal
    def speak
    "Meow!"
    end
end

class Dog < Animal
    def speak
    "Woof!"
    end
end


cat = Cat.new
dog = Dog.new

cat.speak  # "Meow!"
dog.speak  # "Woof!"
```

Although calling the speak method on `Cat` returns 'Meow!' and 'Woof!' for `Dog`, a string is returned in both cases. In addition, no arguments are required. As a result, instances of these subclasses can be substituted where an instance of `Animal` is used.

* * *

## Violation of the Liskov Substitution Principle

Below is the class `Jellyfish`, which is a subclass of `Animal`. Its speak method has a parameter name and returns a string.

Although this method returns a string, it needs a name as an argument when called. As the parent class’ `speak` method doesn’t require a name argument, an instance of the `Animal` class cannot be substituted with an instance of the `Jellyfish` class.

```java
class Jellyfish < Animal
    def speak(name)
    "#{name} cannot speak"
    end
end

jellyfish = Jellyfish.new
jellyfish.speak("Jelly")  # "Jelly cannot speak"
```

In addition, if the speak method of a subclass returned anything other than a string, this would also violate the principle.

* * *

## In conclusion

To adhere to the Liskov Substitute Principle, a child class should be able to substitute a parent class, without any unexpected behaviour. This is to ensure inheritance is being used correctly.

* * *

### Helpful resources

- [Liskov substitution principle - Wikipedia](https://en.wikipedia.org/wiki/Liskov_substitution_principle)
- [Back to Basics: Polymorphism and Ruby](https://thoughtbot.com/blog/back-to-basics-polymorphism-and-ruby)
How to copy props in react dev tools
Tags: todayisearched, todayilearned, reactdevtools, react
Published: 2019-05-16 23:25:16

---
title: How to copy props in react dev tools
published: true
description: 
tags: todayisearched,todayilearned,reactdevtools,react
---

Today, while I was working on a bug, I found myself needing to copy a props of a React component, so I realized that the react dev tools did not have this functionality, after some searches, i found the solution.

![](https://media.giphy.com/media/MUHNdrm3vk7MoyUsCO/giphy.gif)

*EDIT: react dev tools has a [pretty simple solution](https://dev.to/karataev/comment/apgk), thanks to Eugene*


1. Open the [ReactDevTools](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en) in Browser
![](http://imgur.com/6fAUwkql.png)
2. Select the component that contains the props, in that you need copy
(when you make this, the browser will be create a variable for save the component that you clicked, generally the name is $r)
![](http://i.imgur.com/WyNEERh.png)
3. Open the console, and save the prop in another variable
![](http://i.imgur.com/VGb7muk.png)
4. Use the copy method and "don't worry, be happy! :D" as me.
![](http://imgur.com/nHyMnALl.png)


Cheers! :kissing: :kissing: :heart:
Looking for beta testers for express-easy-routes
Tags: javascript, express, node, opensource
Published: 2019-05-16 22:22:23

---
title: Looking for beta testers for express-easy-routes
published: true
description: 
tags: javascript,express,node,opensource
---

Express Easy Routes sets up a happy medium [Convention over Configuration](https://en.wikipedia.org/wiki/Convention_over_configuration) approach to express routes.

Do you use express? Would you care to give [express-easy-routes](https://www.npmjs.com/package/@paciolan/express-easy-routes) a spin?

If you are used to writing express routes this way 👇, you might find Express Easy Routes useful!

```javascript
app.use(express.static()); // ❌ NO!

// ❌ NO!
app.get("/", (req, res) => {
  res.send("Hello World!");
});
```

Instead of configuring each route, tell express where to find your routes.

```javascript
// ✅ YES!
routes({ app, path: __dirname + "/middlewares/**/*.middleware.js" });
routes({ app, path: __dirname + "/controllers/**/*.controller.js" });
```

I have convinced Paciolan of the benefits of contributing to the open source community. I am hoping to turn this into a positive experience so they continue to give us devs the time and resources to make more contributions.

All feedback welcome! Want to contribute? Head over to the [Github](https://github.com/Paciolan/express-easy-routes).

Continue to: [npm](https://www.npmjs.com/package/@paciolan/express-easy-routes) [github](https://github.com/Paciolan/express-easy-routes)

Cheers!
How much time on average do you spent coding outside of full-time work?
Tags: discuss, life, wellness, coding
Published: 2019-05-16 22:15:34

---
title: How much time on average do you spent coding outside of full-time work?
published: true
description: That's me coding in the park :)
tags: #discuss, #life, #wellness, #coding
cover_image: https://thepracticaldev.s3.amazonaws.com/i/m93fqiolwu87odziuwnv.jpg
---
If you're like me, I have an imaginary backlog full of ideas I want to test out, tech I want to learn next, articles and tutorials I want to explore, and projects I want to work on. 

But between 40 hours a week at work, going to gym and trying to have enough time to rest, I'm finding it a challenge to hit the right amount of hours in a day / week that's a good amount.

I want to get an idea on how many hours devs spent on average, and no better place to ask than Dev.to 👨‍💻👩‍💻

I'll start:

### Me: 16 hours a week on average, with varying focus and regularity

weeknights: 3 hrs per day, except Friday (rest day)
- less focus: most of energy consumed during the day
- regular: it's easier to get it going 4 straight days in a row

weekends: 2 hours per day
- better focus: full brain power, since no work
- irregular: because of errands, cooking, going out, friends, family. It's the weekend after all 😄 🛍️ 🏞️ 🚴‍♂️ 🏀

## What about you? 
(Details optional, main thing is the hrs per day/week)
Lara: Server-side rendering and virtual DOM in C#
Tags: csharp, html, opensource, webdev
Published: 2019-05-16 21:46:18

Lara is a new open-source cross-platform UI CSharp library to develop web apps.

With Lara you can code in C# on the server and modify the HTML document as if you were in JavaScript, and Lara updates the browser's document based on the server-side virtual DOM.

Check out [Lara on Github](https://github.com/integrativesoft/lara)
Arity In Functional Javascript
Tags: horriblesnippets, code, javascript, functional
Published: 2019-05-16 21:19:16

---
title: Arity In Functional Javascript
published: true
description: Simple/Advanced uses of Javascript
tags: horrible-snippets, code, javascript, functional
---

Good References:
* [Understanding Currying in JavaScript – Bits and Pieces](https://blog.bitsrc.io/understanding-currying-in-javascript-ceb2188c339)


I think most of the time it's easier for me atleast to read someone else's code instead of long drawn out blog posts.  Let's take a look at this non-functional JS snippet:

```javascript

function nfMultiply(a, b, c) {
  return a * b * c;
}

console.log('non-functional', nfMultiply(1, 2, 3));
```
Arity in essence is the number of functions you can pass into an object.  It's all rather confusing, but i think of it as the amount of functions you can curry into one function, let's convert the function above into an arity of _3_.

```javascript
function multiply(a) {
  return b => {
    return c => {
      return a * b * c;
    };
  };
}

console.log('arity breakdown', multiply(1)(2)(3));
```

If you think about it simply how many times can i fold this function against itself.  This becomes useful when we start creating more complex functional javascript statements(I really enjoy using lodash in my node code, and also because it's included in AWS lambdas by default, thus not really bloating it.):

## More Advanced
```javascript
const { has } = require('lodash');

const fakeDataFunc = () => 3;
const fakeObjFunc = () => ({ uncool: 'blue' });

function coolDude(a) {
  return b => {
    return c => {
      return d => {
        return e => {
          return {
            a,
            bTimesC: b * c(),
            d,
            eHas: has(e(), 'cool') ? 'sure does' : 'nope',
          };
        };
      };
    };
  };
}

console.log(
  'testing',
  coolDude('Mutliplied Value times a function is: ')(2)(fakeDataFunc)(
    'and here we generate a ternary if something is in an object:',
  )(fakeObjFunc),
);
```

You can take the above snippets and kind of meld them to your wishes, and play with them to create Higher Order Functions, enjoy!!!
Remember to Probably Target an Empty Object with Object.assign()
Published: 2019-08-23 15:10:35

---
title: Remember to Probably Target an Empty Object with Object.assign()
published: true
tags: 
canonical_url: https://macarthur.me/posts/remember-to-probably-target-an-empty-object-with-object-assign
---

Hearken back, for a moment, to what it was like merging objects in 2014. There was no support for the feature in JavaScript runtimes themselves, and it was quite common to find a solution to the problem by wading through StackOverflow to find something like this:

```
function merge(obj1, obj2) {
  var newObject = {};

  for (var attributeName in obj1) {
    newObject[attributeName] = obj1[attributeName];
  }

  for (var attributeName in obj2) {
    newObject[attributeName] = obj2[attributeName];
  }

  return newObject;
}

var var1 = {
  key1: "value1"
};

var var2 = {
  key2: "value2"
};

console.log(merge(var1, var2));

// { key1: "value1", key2: "value2" }
```

Despite the advancements JavaScript has made since then, I reminisce this approach. It’s extremely clear what’s going on when you throw values into the method. The two objects are received, and a new, separate object is returned containing the properties & values of both. Neither of your arguments are modified at all, and you could continue to go on and use `var1` and `var2` elsewhere, unscathed.

Recently, I made the mistake in assuming that `Object.assign()` operates in a similar way. I wanted a new merged object, but I also wanted to preserve the values I passed into the method for later use.

```
let var1 = {
  key1: "value1"
};

let var2 = {
  key2: "value2"
};

let var3 = Object.assign(var1, var2);
```

I _expected_ this to leave each of my three variables with the following values:

```
// What I THOUGHT I'd get:

var1 = {
  key1: "value1"
};

var2 = {
  key2: "value2"
};

var3 = {
  key1: "value1"
  key2: "value2"
};
```

But that’s not what I got. Instead, `var1` had been mutated, giving it the exact same value as `var3`:

```
// What I ACTUALLY got:

var1 = {
  key1: "value1"
  key2: "value2"
};

var2 = {
  key2: "value2"
};

var3 = {
  key1: "value1"
  key2: "value2"
};
```

Looking at [the documentation](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign) for `Object.assign()`, this makes sense. Here’s the syntax:

```
Object.assign(target, ...sources)
```

And the description is pretty clear about what it does:

“The Object.assign() method is used to copy the values of all enumerable own properties from one or more _source_ objects to a _target_ object. It will return the target object.”

The method makes no promises to not mutate that target object. It’ll copy over properties to it and spit it that mutated version back to you.

Obviously, the solution to this is pretty simple. Pass a new, empty object as the target, and you’re good to go:

```
-let var3 = Object.assign(var1, var2);
+let var3 = Object.assign({}, var1, var2);
```

A few more characters, a lot less frustration, and no more surprise mutations.
Decode ListView
Tags: flutter, mobileappdevelopme, mobileapps, iosappdevelopment
Published: 2019-06-29 16:00:21

---
title: Decode ListView
published: true
tags: flutter,mobile-app-developme,mobile-apps,ios-app-development
canonical_url: https://medium.com/@greg.perry/decode-listview-a0bc4b90f82d
---

[![](https://cdn-images-1.medium.com/max/2600/1*a5xl4e4EnQtONUZyWJF_6w.png)](https://medium.com/@greg.perry/decode-listview-a0bc4b90f82d?source=rss-64fbd8c9e171------2)

An in-depth look at Flutter’s ListView Widget

[Continue reading on Medium »](https://medium.com/@greg.perry/decode-listview-a0bc4b90f82d?source=rss-64fbd8c9e171------2)
Managing Data  in the Cloud ☁
Tags: sql, azurestorage, azure, mongodb
Published: 2019-05-17 18:40:29

---
title: Managing Data  in the Cloud ☁
published: true
tags: sql,azure-storage,azure,mongodb
canonical_url: https://blog.jeremylikness.com/managing-data-in-the-cloud-82c5fa0be9d1
---

#### Learn how to classify and host your data using cloud services.

Monday, May 13th, 2019 was the date we kicked off the inaugural [.NET South conference](https://dotnetsouth.tech). It was also the date I delivered a new talk, “Managing Data in the Cloud.”

![](https://cdn-images-1.medium.com/max/1024/1*9K3vUSo20I00CPPqBCFbKw.png)

The session was recorded, and I’ll update this post with the link when it becomes available.

The presentation features three case studies that illustrate different approaches to managing and accessing data. There is a flights database that traverses a graph of nodes and vertices to compute possible flight paths between two airports. The link shortening example highlights the entirely serverless application I run in production to create, use, and report on URLs. Finally, the Tailwind Traders application leverages microservices that include a Node.js app with a MongoDB backend and a .NET Core API on top of Azure SQL.

{% twitter 1127987856130101253 %}

The presentation contains all the relevant links and walks through how to classify data, how each class of data translates to cloud services, and how apps are built to use the various options. The deck concludes with a look at a service designed to migrate your data from existing on-premises solutions to the cloud.

💾 [Download the presentation](https://jlikme.blob.core.windows.net/presentations/Likness-ManagingCloudData-DotNetSouth.pptx)

The repository dives even deeper. It contains links for the prerequisites to run the presentation. It includes step-by-step instructions for every demo. Finally, there are links to the hands-on learning modules and documentation for all the services covered.

{% github JeremyLikness/managing-cloud-data %}

If you are exploring moving your data to the cloud or building a new solution and curious about what options are available, you may find these resources helpful. Enjoy!

Regards,

![](https://cdn-images-1.medium.com/max/197/1*KwXn3ElS7vnWIk8lNVhBsA.gif)

* * *