teleren/devto huggingface dataset:
City Builder in Unity3D | Part 4 | Strategy & Factory
Tags: youtube, game, city, builder
Published: 2020-04-15 14:30:44

Hey!
This is my 4th part in my series, 
in this series I'm writing a City Builder Game,
In this episode I explain how I used the Strategy and Factory Design pattern in order to choose the right road model

Come, Watch and leave a Like and Subscribe :)

{% youtube 4-AH6OAdw44 %}

> Like this post? 
> Support me via [Patreon](https://www.patreon.com/eranelbaz)
> Subscribe to my [YouTube Channel](https://www.youtube.com/channel/UCVUNeBGM5wZJKcOx0QwAaTA?sub_confirmation=1)
Gradient Effect in React-Native
Tags: javascript, reactnative, gradient
Published: 2020-04-15 14:21:33

Gradients add a very modern touch to your mobile apps, specially to button backgrounds.

To add this we'll use react-native-linear-gradient cause it's totally designed for gradients, lightweight and allows both top-bottom and left-right gradient effects.

To install library run
    npm install react-native-linear-gradient --save
and for iOS:
    $ cd ios && pod install && cd ..
as it installs all the pod dependencies to your project, make sure to restart your packager after making any changes on native side.
Now let's go code… 

import the library to your file:
import LinearGradient from 'react-native-linear-gradient';
// Within your render function
<LinearGradient colors={['#4c669f', '#3b5998', '#192f6a']} style={styles.linearGradient}>
<Text style={styles.buttonText}>
    My Gradient Button
</Text>
</LinearGradient>
...

// Later on in your styles..
var styles = StyleSheet.create({
linearGradient: {
flex: 1,
paddingLeft: 15,
paddingRight: 15,
borderRadius: 5
},
buttonText: {
fontSize: 18,
fontFamily: 'Gill Sans',
textAlign: 'center',
margin: 10,
color: '#ffffff',
backgroundColor: 'transparent',
},
});

Above code will add a top-bottom gradient of shades of blue to your button styled text. Simple as that, you have to just pass array of colors you want your gradient as.

That was easy, now see what can we do if we need a left-right or vice versa. For that LinearGradient give us start and end property where you can define axis.

//in return statement
<TouchableOpacity
style={height: '100%'}
activeOpacity={0.9}
onPress={() => console.log('Beep Beep')}
style={ width: 312,
height: '17.5%',
marginBottom: '3%'
}>
<LinearGradient
start={x: 1, y: 0} //here we are defined x as start position
end={x: 0, y: 0} //here we can define axis but as end position
colors={['#3393E4', '#715886']}
style={
height: '100%',
justifyContent: 'center',
alignItems: 'center',
borderRadius: 5,
}>
<Text> Log in </Text>
</LinearGradient>
</TouchableOpacity>

Here we developed a react-native button with gradient effect. You can play around with axis to meet your desires. Here's output of above code:

Yeyyy!!!
And that's a wrap. If you find any difficulties ping me. If you like the article high-five.
Beautiful Dark Mode Dashboard for Analytics
Tags: codepen
Published: 2020-04-15 14:20:29

---
title: Beautiful Dark Mode Dashboard for Analytics
published: true
tags: codepen
---

<p>This pen shows how to create a  dashboard with a pivot table and charts on your web page and apply a dark theme to it. </p>

{% codepen https://codepen.io/flexmonster/pen/oNvpbOy %}
About Ruby Hash#>= (Superset)
Tags: ruby, hash, documentation
Published: 2020-04-15 14:11:52

---
title: About Ruby Hash#>= (Superset)
published: true
description: 
tags: ruby, hash, documentation
---

Get more information and more examples at my AboutRuby project:
* [AboutRuby project](https://github.com/BurdetteLamar/AboutRuby/blob/master/core/Hash/api/markdown.md#-superset)

Here's the write-up over at the Ruby project:
* [Ruby project](https://ruby-doc.org/core-2.7.0/Hash.html#method-i-3E-3D)

My main page is [here](https://github.com/BurdetteLamar/AboutRuby#about-ruby).

TL;DR

I've been working on enhancements to the documentation for the Ruby project.  Getting these enhancements posted to the Ruby project has been very slow.  They're not actually meeting resistance;  I know because my many PRs for enhancing class ENV were accepted (though not rapidly).  It's just that everyone is busy.

Anyhow, I'm stashing all this stuff on in my own project, called AboutRuby.  The piecemeal migration from there to the Ruby project is not going to be completed in my lifetime (I'm 77 years old).

So:  I'm going to blow my own horn here on DEV, to encourage you to use the enhanced documentation.
What are your favorite productivity tools and apps?
Tags: discuss, productivity, beginners, career
Published: 2020-04-15 13:59:53

---
title: What are your favorite productivity tools and apps?
published: true
description: We all look up to those around us who are really productive. What are the tools you use to be a productive developer?
tags: discuss, productivity, beginners, career
---

We all look up to those around us who are really productive. What are the tools you use to be a productive developer?

Anything from command-line shortcuts to apps. What are the things or processes that boost your output at the end of the day? 

Feel free to also reach out on Twitter:

{% tweet 1250415968628555777 %}
🎩 Top 3 VSCode Themes in 2020
Tags: vscode, themes, top3
Published: 2020-04-15 13:55:57

VSCode is the most popular code editor. The best part of VSCode is how extendable it is. It's actually a JavaScript and Electron-based application. 

Today, I'm going to share three top VSCode themes you should try in 2020. This is an opinionated post on what I believe are the top themes in the VSCode marketplace.

## 1. 🦄 Shades of Purple 

If you haven't tried [Shades of Purple](https://marketplace.visualstudio.com/items?itemName=ahmadawais.shades-of-purple) till now then, believe me, you are in for a treat. The author, [Ahmad Awais](https://twitter.com/mrahmadawais), has so meticulously designed this theme that it makes you fall in love with your code editor. The documentation itself is a piece of art. Millions of developers are using this theme. Over 100 five-star ratings.  ⭐️

[![Shades of purple](https://raw.githubusercontent.com/ahmadawais/shades-of-purple-vscode/master/images/1_sop.gif)](https://marketplace.visualstudio.com/items?itemName=ahmadawais.shades-of-purple)

## 2. 🦉 Night Owl

The number 2 on our list is [Night Owl](https://marketplace.visualstudio.com/items?itemName=sdras.night-owl) developed by [Sarah Drasner](https://twitter.com/sarah_edo) who is the VP of the Developer Experience at Netlify. As the name suggests, this theme is specially designed for folks who work at night & need a theme that doesn't hurt their eyes. The theme also offers a lighter version for developers who are not into night mode. It has a five-star rating with over 400k+ installs. ⚡️

[![Night Owl](https://i.imgur.com/z57OizC.png)](https://marketplace.visualstudio.com/items?itemName=sdras.night-owl)

## 3. 🎛 Material Theme

The last one we got is the amazing [Material Theme](https://marketplace.visualstudio.com/items?itemName=Equinusocio.vsc-material-theme) designed by [Mattia Astorino](https://twitter.com/equinusocio). This theme has over 8M+ downloads & 2M+ installs. It gives you a blend of dark green with light green & makes your code look so elegant. It got a four-star rating and definitely worth a shot.

[![Material Theme](https://i.imgur.com/YvEVfym.png)](https://marketplace.visualstudio.com/items?itemName=Equinusocio.vsc-material-theme)

🙌🏻 So that's all for today. Do let me know what your favorite VSCode theme is in the comment section down below. Also, if you are interested in saving tons of productivity hours on a weekly basis then check the [VSCode.pro](https://vscode.pro/) course. This course will make you a VSCode Power User in no time.
Case insensitive queries with LoopBack 4
Tags: loopback
Published: 2020-04-15 13:48:53

My first post!

If the results of the query must contain the upper or lower case of some text, you will need to do a case-insensitive RegExp search:

{% gist https://gist.github.com/nisajthani/f573a445e0c80bc0e04143c409ae8c0c.js %}

 Note: I used MongoDB for my database.
Daily Challenge #226 - Array to HTML Table
Tags: challenge
Published: 2020-04-15 13:41:52

---
title: Daily Challenge #226 - Array to HTML Table
published: true
series: Daily Challenge
description: Given a 2D array (list), generate an HTML table representing the data from this array.
tags: challenge
---
You need to write a function called `toTable`, that takes three arguments:

data - a 2D array (list),
headers - an optional boolean value. If True, the first row of the array is considered a header. Defaults to False,
index - an optional boolean value. If True, the first column in the table should contain 1-based indices of the corresponding row. If headers arguments is True, this column should have empty header. Defaults to False.
and returns a string containing HTML tags representing the table.
HTML table is structured like this:
```
<table>
  <thead>                 <!-- an optional table header -->
    <tr>                  <!-- a header row -->
      <th>header1</th>    <!-- a single header cell -->
      <th>header2</th>
    </tr>
  </thead>
  <tbody>                 <!-- a table's body -->
    <tr>                  <!-- a table's row -->
      <td>row1, col1</td> <!-- a row's cell -->
      <td>row1, col2</td>
    </tr>
    <tr>
      <td>row2, col1</td>
      <td>row2, col2</td>
    </tr>
  </tbody>
</table>
```

The table header is optional. If header argument is False then the table starts with <tbody> tag, ommiting <thead>.

So, for example:
```
toTable([["lorem", "ipsum"], ["dolor", "sit amet"]], true, true)

returns

`<table><thead><tr><th></th><th>lorem</th><th>ipsum</th></tr></thead><tbody><tr><td>1</td><td>dolor</td><td>sit amet</td></tr></tbody></table>"`
```

As you can see, no linebreaks or whitespaces (except for the ones present in the array values) are included, so the HTML code is minified.

IMPORTANT NOTE: if the value in the array happens to be None, the value of the according cell in the table should be an empty string ("")! Otherwise, just use a string representation of the given value, so, dependent on the language, the output can be slightly different. No additional parsing is needed on the data.

**Tests**
Find the output for each of these input parameters.
`input": [[["o"]]]`,
`input": [[["lorem", "ipsum"], ["dolor", "sit amet"]], true, true]`,
`input": [[[1, 2, 3], [4, 5, 6], [7, 8, 9]], false, true]`

Good luck!

***
_This [challenge](https://www.codewars.com/kata/5e7e4b7cd889f7001728fd4a) comes from David Gildor on CodeWars. Thank you to [CodeWars](<https://codewars.com/>), who has licensed redistribution of this challenge under the [2-Clause BSD License](<https://opensource.org/licenses/BSD-2-Clause>)!_

_Want to propose a challenge idea for a future post?  Email **yo+challenge@dev.to** with your suggestions!_
Effective Java! Design Interfaces for Posterity
Tags: java, effective, interfaces, architecture
Published: 2020-04-15 13:31:54

---
title: Effective Java! Design Interfaces for Posterity
published: true
description: A dive into chapter 21 of Effective Java
tags: java, effective, interfaces, architecture
series: Effective Java Review
canonical_url: https://blog.scaledcode.com/blog/effective-java/effective_java_design_interfaces_for_posterity/
---

Today we are focusing again on interfaces. The focus of today's chapter was largely on a feature that was added in Java 8, _default_ methods. The problem that _default_ methods try to solve is, before Java 8, once an interface was released to the wild you could never change it safely. If you did, the classes that implemented it would encounter an error as they would no longer be implementing the full interface. So how do _default_ methods attempt to solve this problem? What they allow us to do is provide a default implementation for a particular method so we can evolve an interface without requiring the consumer of the service to implement that method right away.

This sounds like a great idea and it can be a great tool but what should we be aware of when using a _default_ method? The main concern is that we don't have a guarantee that our default implementation will work with all the implementations of the interface. An example of how this can bite us is with the `removeIf` _default_ method added to the `Collection` interface in Java 8. This method takes in a `Predicate` and it iterates through the collection and calls remove on all the entries that match the predicate. This seems like a simple, logical implementation and it does indeed work a lot of the time. However, for example, in the Apache Commons library there is a `SynchronizedCollection` which implements the `Collection` interface and basically forwards all requests onto a backing collection after locking on the object. This method does not override the `removeIf` function and thus inherits the default implementation. However, this default implementation of `removeIf` breaks the invariants of the class since it doesn't lock on the object.

This chapter ends up being pretty short and simple, the summation of the chapter is as follows, even though we have default methods as a tool in our tool belt, we shouldn't count on using this ability. Just like when we are implementing classes for inheritance we should try implementing multiple classes off the new interface and also consider having another person implement a class off your interface. This allows us to get experience with using the interface and we can see if there is something missing or if there is unneeded items in our interface. So, although we may be able to fix some mistakes after the fact with default methods, we shouldn't count on that and put in the work to build it right the first time.
SEO in Nuxt.js with the Head Property
Tags: nuxt, vue, seo
Published: 2020-04-15 13:25:46

There are 3 ways to add a title and meta description to your Nuxt.js application which is extremely useful for Search Engine Optimisation. 

1) Use the nuxt.config.js file to add global titles and meta descriptions  so that they are available on all pages. This does of course give you the same title and description on every page but it covers you for when you forget to add meta to a particular page.

```javascript
export default {
  head: {
    title: 'Seo in Nuxt.js',
    meta: [
      {
        hid: 'description',
        name: 'description',
        content: 'SEO in Nuxt.js with the Head Property for amazing Search Engine Optimisation'
      }
    ],
  },
}
```

2) Add the head method as an object to your script tag in your page. This is a great way of setting a unique title and description for each page. 
```html
<script>
export default {
  head: {
    title: 'Home page',
    meta: [
      { hid: 'description', name: 'description', content: 'Home page description' }
    ],
  }
}
</script>
```
3) Add the head method as a function to your script tag in your page. With this option you can not only add a unique title and description for your page but you also have access to your data and computed properties.
```html
<template>
  <h1>{{ title }}</h1>
</template>
<script>
export default {
  data () {
    return {
      title: 'Amazing Seo with Nuxt.js',
      description: 'Nuxt.js gives you the most amazing SEO by just adding a title and meta description to your page.'
    }
  },
  head () {
    return {
      title: this.title,
      meta: [
        { hid: 'description', name: 'description', content: this.description }
      ]
    }
  }
}
</script>
```

Normally I set the nuxt.config.js with a global title and description and then in my pages I use the head as a function incase I end up using the the data for the title or meta description. This is extremely useful for when you are working with data from an api or dynamic pages where you don't know the title and meta description. 

And as well as adding a title and description you can also add links to google fonts or external scripts either globally in the nuxt.config.js or locally in the page component if you prefer.

```javascript
link: [      
       { 
         rel: 'stylesheet', href: 'https://fonts.googleapis.com/css?family=Roboto&display=swap' }
      ],
script: [
      {
        src: 'https://identity.netlify.com/v1/netlify-identity-widget.js',
        defer: true
      }
    ]
```
Nuxt.js uses vue-meta so checkout [the docs for all available metaInfo properties](https://vue-meta.nuxtjs.org/api/#metainfo-properties)
DatoRSS Restyling
Published: 2020-04-15 13:24:24

DatoRss has a new revamped homepage → https://datorss.com

I completely rethought and redesigned the content and added "Sources", a button that redirects to the source RSS list. 


<a href="https://ibb.co/YB3hcZR"><img src="https://i.ibb.co/0ycrCtD/Screenshot-2020-04-15-at-15-23-38.png" alt="Screenshot-2020-04-15-at-15-23-38" border="0"></a>


I'm working on a new version with a lot of great features.

Stay tuned!

{% github davidesantangelo/datorss %}

-----

Press is starting to talk about it :D

https://www.ilovefreesoftware.com/24/webware/rss-search-engine-to-search-rss-feeds.html
I developed a free React landing page template
Tags: react, showdev, codenewbie, opensource
Published: 2020-04-15 13:21:38

I’m seeing many developers fighting against the outbreak by developing new awesome projects. I really love this attitude, so as a small gesture to support their journey (and to inspire others), I released this free React landing page template.

- Check it live here: https://open.cruip.com/
- Download it on Github: https://bit.ly/3edNiJx

Feel free to use it for whatever you want 🙌
Best VPN for Multiple Devices
Tags: vpn, security, devices, privacy
Published: 2020-04-15 13:17:55

VPNs for those who can’t stop buying new devices and want to keep them all safe. 
For people who have big families or just a lot of devices, or maybe for those who have small businesses one VPN might not sound not enough, since many devices need to be connected to one account. Do not worry there are VPNs which support c multiple devices at the same time and you can secure a big number of devices simultaneously.
Multi device VPNs ensure that you can use a number of devices at the same time, you can connect all of your mobile phones, laptops, smart TVs and other devices and enjoy secure connection or bypass geographical restrictions.

<b>Best VPN for Multiple devices</b>

Below you will find VPNs that are great for supporting multiple devices and both are secure and perfect for streaming and bypassing geographical restrictions.

<a href="https://surfshark.com/deals?coupon=BESTSHARK">Surfshark</a>
Surfshark is the best VPN for those who want to secure multiple devices since Surfshark supports an unlimited number of devices. It is a perfect VPN for big families or small businesses.
Besides supporting multiple devices Surfshark ensures security and anonymity online, they are based in a privacy friendly location, use industry leading encryption, offer DNS and IP leak protection and have a strict no logs policy. In addition Surfshark has fast servers, built-in kill-switch and ad-blocker, supports anonymous torrenting, works great with major streaming platforms, has apps for major platforms and is easy to use. And to finish off it offers 24/7 customer support, 30-day money back guarantee and GPS spoofing (for Android devices).

<a href="https://nordvpn.com/coupon/deal/?coupon=getnordvpndeal">NordVPN</a>
NordVPN is also great for people who need to secure multiple devices, they support 6 simultaneous devices which is quite enough for people who own a number of devices or have big families.
NordVPN is a very secure VPN with strict no logs policy and industry leading encryption. In addition it has built-in kill-switch, built-in ad-blocker, supports torrenting and works with many streaming platforms such as Netflix, Disney+ and others. NordVPN also has fast servers worldwide, is easy to use, offers 24/7 customer support and 30-day money back guarantee.

<a href="https://www.expressvpn.com/">ExpressVPN</a>
ExpressVPN is another great VPN for multiple connections, it supports 5 devices at the same time. Also it is one of the most popular VPNs in the market which gained users trust for providing 100% security and having fast servers all around the world. In addition ExpressVPN is really easy to use and has apps for major platforms. It also supports anonymous and secure torrenting and helps to bypass all sorts of geographical restrictions online and unlock major streaming platforms such as Netflix.

Source: https://medium.com/@jpowel.2224/best-vpn-for-multiple-devices-540e055e8148
4 ways to swap variable
Tags: python, beginners, codenewbie, tutorial
Published: 2020-04-15 13:03:33

Do you remember the first code you ever wrote? If my calculations are right then it was a `hello, world` program, right? `Hello, world` is now a tradition of programming. Do you know what else is a programming tradition? Swapping two variables. Today, we will see 4 different ways to swap 2 variables.

##1 Using a temporary variable
We store the value of any of the variables(suppose it's `a`) in the temporary variable. Then assign the value of `b` to `a`. At last assign the value of `tmp` to `b`.
```python
a = 50
b = 40
tmp = a
a = b
b = tmp
``` 

***

##2 Without extra variable
This method works for python. I am not sure if the same applies to other languages as well(It should, except C++, C, C#).
```python
a = 50
b = 5
a, b = b, a
```

***

##3 Without extra variable(math)
This method uses simple math to swap two variables. Keep in mind, we are working with math, so only integer, float or double will work(including long).
```python
a = 5
b = 2
a = a*b
b = a//b
a = a//b
```
Debuging mode: 
```bash
>>>a = 5
>>>b = 2
>>>a = a * b ==> 10
>>>b = a / b => 10 / 2 ==> 5
>>>a = a / b => 10 / 5 ==> 2
```
Side note: Instead of multiplication and division you can use addition and subtraction too. And check out for ZERO DIVISION ERROR.

***

##4 Using a list
In this case, we will add the value of `a` and `b` inside a list. And then extract the value in reverse order. Just like this.
```python
a = 5
b = 2
ls = [a, b]
b, a = ls
```
You can also use python tuples.

***

That's it. I hope that helps.
Is coding hard? The straight forward answer.
Tags: beginners, codenewbie, motivation
Published: 2020-04-15 13:02:57

>Is coding hard?

Nope!

>But other people say it's hard.

They are wrong!

>If coding is easy then why don't most people get a job at Google, Netflix, Facebook, Amazon?

Because coding is easy, the problems you solve with it are hard.


*Hope that helps(Tried to write something different*😉*)*
Jessitron & Avdi Pair on Dark and the Square API
Tags: collaborations, videos
Published: 2020-04-18 17:27:28

---
title: Jessitron & Avdi Pair on Dark and the Square API
published: true
date: 2020-04-15 13:00:00 UTC
tags: Collaborations,Videos
canonical_url: https://avdi.codes/jessitron-avdi-pair-on-darklang-and-square-api/
---

This was one of our after-hours sessions so there's a bunch of yelling and cursing and probably some inappropriate variable names.

{% youtube GbX_r3mHXTg %}

You can learn [more about Dark here](https://darklang.com/). Want to see more videos like this?

P.S. [Your support on Patreon](https://www.patreon.com/avdigrimm) makes these streams possible!