teleren/devto huggingface dataset:
Prototype Pattern
Tags: creational, pattern, designpatterns, java
Published: 2020-09-29 23:45:18

Specify the kind of objects to create using a prototypical instance, and create new objects by copying this prototype.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/c8inme8a4hqlwjtof3qs.gif)

#Participants#
* Prototype: declares an interface for cloning itself
* ConcretePrototype: implements an operation for cloning itself
* Client: creates a new object by asking a prototype to clone itself

#Code#
```java
public class Main {

	public static void main(String[] args) {
		ConcretePrototype1 p1 = new ConcretePrototype1("I");
		ConcretePrototype1 c1 = (ConcretePrototype1) p1.clone();
		System.out.println("Cloned: " + c1.getId());

		ConcretePrototype2 p2 = new ConcretePrototype2("II");
		ConcretePrototype2 c2 = (ConcretePrototype2) p2.clone();
		System.out.println("Cloned: " + c2.getId());
	}
}

public abstract class Prototype {
	private String id;

	public Prototype(String id) {
		this.id = id;
	}

	public String getId() {
		return id;
	}

	public abstract Prototype clone();
}


public class ConcretePrototype1 extends Prototype {

	public ConcretePrototype1(String id) {
		super(id);
	}

	@Override
	public Prototype clone() {
		return new ConcretePrototype1(getId());
	}
}

public class ConcretePrototype2 extends Prototype {

	public ConcretePrototype2(String id) {
		super(id);
	}

	@Override
	public Prototype clone() {
		return new ConcretePrototype2(getId()) ;
	}
}
```

#Output#
```
Cloned: I
Cloned: II

```
{% github https://github.com/eidherjulian61/design-patterns no-readme %}
{% link https://dev.to/eidher/principales-patrones-de-diseno-13ao
 %}
My #100DOC - Day 34
Tags: 100daysofcode, challenge, log
Published: 2020-09-29 23:33:14

### Day 34: September 29, 2020

#### **Today's Progress**: 
1. **[Redesign of my portfolio](https://github.com/pablohs1986/pablohs1986.github.io)** (1h):<br>After trying fullPage.js, I decided to go back, I was not convinced. I continued starting to implement the scrollspy.
    
#### **What I learned**: 
* Make a scrollspy with Bootstrap.
* Rollback is good.

#### **Total time**:
1h.
TLS and SNI snooping 
Tags: security, hacktoberfest, news, cloud
Published: 2020-09-29 23:24:29

Theoretically every web application you visit can be snooped by your ISP OR WORST if it uses TLS1.2 ... 🤗

Enter 
1) TLS 1.3 with encrypted SNI to your rescue
2) tor 
3) custom DNS (cloudflare 1.1.1.1) 

Details : 

“The client adds the SNI extension containing the hostname of the site it’s connecting to to the ClientHello message. It sends the ClientHello to the server during the TLS handshake. Unfortunately the ClientHello message is sent unencrypted, due to the fact that client and server don’t share an encryption key at that point.


TLS 1.3 with Unencrypted SNI
This means that an on-path observer (say, an ISP, coffee shop owner, or a firewall) can intercept the plaintext ClientHello message, and determine which website the client is trying to connect to. That allows the observer to track which sites a user is visiting.”  #Security #cyberdefense #cyberawareness #attacks #webapplicationsecurity #firewall  #networksecurity #network  #DNS #dnssecurity

More info at https://www.google.com/amp/s/blog.cloudflare.com/encrypted-sni/amp/
Refactoring API Calls in Nuxt
Tags: nuxt, vue, javascript, api
Published: 2020-09-29 22:56:41

Today when I wanted to build out the head attributes in Nuxt, I realized that when using asyncData() to pull in API data, you do not have access to **this**. 

That was a problem when I needed to use the data pulled from the API in my head tag, so I went and looked back at the docs some more.

It looks like the best way to fetch data from an API in Nuxt is [the fetch() hook](https://nuxtjs.org/guides/features/data-fetching#the-fetch-hook)! 

**Makes sense.**

After I refactored, my script tag looks a lot cleaner and page changes are much faster with [the keep-alive attribute](https://nuxtjs.org/guides/features/data-fetching#caching) set on my <Nuxt /> component in the default layout.

This is what the Home page component script tag looks like now:

```javascript
export default {
  data () {
    return{
      home: {},
      posts: [],
      projects: []
    }
  },
  async fetch() {
    this.home = await this.$axios.$get("/home-page")

    this.posts = await this.$axios.$get("/posts?_limit=4")

    this.projects = await this.$axios.$get("/projects?_limit=2")
  },
   head() {
      return {
        title: this.home.title,
        meta: [
          // hid is used as unique identifier. Do not use `vmid` for it as it will not work
          {
            hid: 'description',
            name: 'description',
            content: this.home.meta_description
          }
        ]
      }
    },
    fetchOnServer: true
}

```
What is Node.js and Why You Should Use It
Published: 2020-09-29 22:56:07

Node.js has become a popular tool used in web development. But what is it? What are the benefits to using it? Should you use it? This blog post will answer these questions. Let's begin!

# What is Node.js?

Node.js is a runtime environment that executes JavaScript code on the server-side. (A runtime environment is the infrastructure that supports building and running software applications.) Node.js is built on top of Google’s Chrome V8 JavaScript engine, which is one of the fastest JavaScript engines. To understand the relevance of Node.js and why you should use it, let’s take a look at its history.

# Why was Node.js Created?

Before Node.js was created, JavaScript was designed to run in the browser. However, with the creation of Node.js in 2009, JavaScript could now be run outside of the browser on a server of your choosing, including your local server. With the ability to run JavaScript outside of the browser, Node.js expanded what programmers can do with JavaScript on the server-side. You can interact with the file system by interacting with the files and folders on the server. You can also interact with the database and query data from it. Lastly, you can create a web server for your application, which is mainly what Node.js is currently used for.

# What are the benefits to using Node.js?

Node.js is simple to implement and use if you already know JavaScript, since Node.js is built in JavaScript. This means you’ll be able to build both the frontend and backend of your application. Hello to being a full stack developer!

You’ll also have access to a bunch of JavaScript packages and libraries when you install Node.js. This is because when you install Node.js, you have the option to download  [npm](https://www.npmjs.com/), a package manager for Node.js and JavaScript. 

It’s also an open-source, cross-platform tool; it can be run across multiple operating systems, including Windows, Linux, and MacOS.

Finally, if you’re planning on building a real-time, data-driven application or a dynamic single page application (SPA) that requires high scalability, Node.js is for you!

If you’re still not convinced or have any questions, feel free to comment below!
Stack Overflow Usage Metrics: Analyze your copy/paste activities!
Tags: javascript, python, webdev, productivity
Published: 2020-09-29 22:29:23

---
title: Stack Overflow Usage Metrics: Analyze your copy/paste activities!
published: true
description:
tags: javascript, python, webdev, productivity
cover_image: https://lh3.googleusercontent.com/RbFnF9SKDy7sD6qqJvZsxsw9zoKEHvJA_XrktXhK7PLeeaWi5hY2u63HaxGJVp6pwgMAjeKRgcY=w640-h400-e365-rj-sc0x00ffffff
---
Hi all, the first version of Stack Overflow Usage Metrics (Chrome Extension) was released today!

It automatically collects your Stack Overflow's usage metrics like copy commands or page views and generates daily, monthly and yearly reports.

Check it out: [https://chrome.google.com/webstore/detail/stack-overflow-usage-metr/glkahiafddemnlbbkfcammnfkmebiode](https://chrome.google.com/webstore/detail/stack-overflow-usage-metr/glkahiafddemnlbbkfcammnfkmebiode)

I would really appreciate your feedback and suggestions on how to improve it.

Thanks!
Answering your Frequently Asked Questions about Hacktoberfest
Tags: hacktoberfest, codenewbie, beginners, opensource
Published: 2020-09-29 22:28:46

Even though the DigitalOcean team has done a fantastic job creating a [helpful FAQs page](https://hacktoberfest.digitalocean.com/faq) on the Hacktoberfest website, I have noticed Hacktoberfest newbies asking the following questions repeatedly. Hope this post helps answers some of the additional FAQs and saves the Hacktoberfest maintainers some time:

### What is Hacktoberfest?
A monthlong celebration of open source software brought to you by DigitalOcean, Intel, and DEV. Make four or more **high-quality, meaningful** pull requests to open source projects on GitHub in October to earn a t-shirt or plant a tree. 

### How are my Pull Requests tracked?
After you [log in to the Hacktoberfest website with your GitHub account](https://hacktoberfest.digitalocean.com/), it'll track the Pull Requests you make in the October.

### What repositories can I contribute to?
You can open pull requests for any open source project on GitHub as long as it isn't a spam repository banned by Hacktoberfest community managers (for example: "Add your name" type of repository). For more information, see https://hacktoberfest.digitalocean.com/details

### Can I make a PR to my own repository or a friend's repository?
Yes, but it's encouraged to contribute to other repositories instead

### Do all PRs have to be in the same repo?
No

### Can all 4 PRs be in the same repo?
Yes

### Do the PRs have to be merged to be counted?:
No, your pull requests need not be merged to count, but they must not be marked "invalid" by the project maintainer. More details here: https://hacktoberfest.digitalocean.com/details

### Does the repository need to have issues? 
No

### Do the issues need to be marked as `hacktoberfest`?
No

### Are the issues marked `good-first-issue` beginner-friendly?

Not always. `good-first-issue` can be a confusing label. `good-first-issue` doesn't necessarily mean an easy issue for code newbies; it can mean it's an easy issue *to get started with the codebase for that project.* For example, the [CockroachDB `good-first-issue`](https://github.com/cockroachdb/cockroach/issues?q=is%3Aopen+is%3Aissue+label%3A%22good+first+issue%22) are good issues for Go developers who want to get started with CockroachDB contributions. For new developers, we recommend checking out the [CockroachDB To-Do apps project](https://github.com/cockroachdb/cockroachdb-todo-apps) or [CockroachDB docs project](https://github.com/cockroachdb/docs/issues?q=is%3Aopen+is%3Aissue+label%3Agood-first-issue) instead.

### How do I win a t-shirt?
The first 70,000 folks to make 4 PRs in the month of October will be eligible to get a t-shirt.

### Will you run out of t-shirts?
The Hacktoberfest community managers estimate they won't run out of t-shirts well into the third week of October.

### I am new to coding/new to open source. Where do I find help?
- [Hacktoberfest Discord](https://discord.gg/hacktoberfest)
- [Hacktoberfest mentored events](https://hacktoberfest.digitalocean.com/events)
Introducing Abbreviationist
Tags: go, sideprojects
Published: 2020-09-29 22:19:38

Just a bit of blatant self promotion here. I've been playing with my little CLI tool [abbreviate](https://github.com/dnnrly/abbreviate) and wondering what I could do next. I also need to practice my very new front-end skills so I put together this site to meld the 2 things:

https://abbreviationist.herokuapp.com/

It's not much but after so many years hiding in the backend, putting up a simple site with my own HTML and CSS is a big deal for me.

If you have any comments or feedback then feel free to let me know. :)
pyp - A pip wrapper that writes requirements for you
Tags: python, productivity, showdev, contributorswanted
Published: 2020-09-29 22:17:27

Have you ever installed a package with `pip` in your Python project and realized later that you never added it to your `requirements.txt`? I know I have, which is why I recently created an open source project that I call `pyp` to fix that. It's a thin wrapper around Python's package manager `pip` that writes your `requirements.txt` file for you as you install packages.

To install `pyp` run

```console
$ pip install pyp-manager
```

You can then install a package with

```console
$ pyp install pip-install-test
```

and a `requirements.txt` file will be created in your working directory with `pip-install-test==0.5` on the first line.

Right now, `pyp` only works in Python 3 and it relies on the `pip` command being available.

If you want to contribute, check out the repository at https://github.com/zachtylr21/pyp.

<hr>

<span>Photo by <a href="https://unsplash.com/@_stewart_?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">George Stewart</a> on <a href="https://unsplash.com/s/photos/python-code?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Unsplash</a></span>
Day 227: No Place Like Home
Tags: hiphop, code, coding, lifelongdev
Published: 2020-09-29 22:03:40

_liner notes_:
- Professional : Pretty good day. Got the outline worked out for an upcoming appearance on a live stream show. Going to refine it more as the date gets closer. Just did more research on an upcoming blog post.

- Personal : Did another test run of my side project. Everything worked but for some reason, the stream didn't connect to YouTube. I know it was streaming because I use the stream created from the API on the website and it was working. Spent the rest of the night working on this week's radio show.

![The green cliffs of County Clare, Ireland with the ocean waves crashing down below.](https://dev-to-uploads.s3.amazonaws.com/i/68qrpfjzgdwp1tv37usl.png)

So the battery as at around 83% after running through the night not plugged in. Using just the solar panels, it was fully charged by noon. And it was cloudy for most of the day! Now that I know I can get a full charge, I'll be heading out tomorrow. Although, there's no place like home, I've got some errands to run. Tonight, I'll be editing the recording of the last show and submit it to the station. Do some work on the side project. I want to get the chat room / ask a question sections working. Also, want to go through some more tracks for this week's show. Oh and watch this train wreck or a presidential debate happening tonight.

Have a great night!

peace piece
Dwane / conshus
https://dwane.io / https://HIPHOPandCODE.com
{% youtube beiTw8b-CiQ %}
Adding Country to a User's Profile with Auth0 Rules
Published: 2020-09-29 21:53:48

See how quick it is to add the user's country and time zone to user data using Auth0 Rules. 
[Read more...](https://auth0.com/blog/adding-country-to-a-users-profile-with-auth0-rules/?utm_source=newsletter&utm_medium=sc&utm_campaign=auth0_rules)
2 Minute Intro to GreenSock Animations 
Tags: codenewbie, javascript, webdev, beginners
Published: 2020-09-29 21:46:05

Interested in making animations in Javascript? Follow these tips to get started in 2 minutes: 

Prerequisites: 
*Familiarity with HTML
*Familiarity with Javascript; jQuery also helps!
*No prior experience with GreenSock animations! This tutorial is not a comprehensive training, and is intended to help you get started.
*Optional: CSS

![protestors svg](https://dev-to-uploads.s3.amazonaws.com/i/74e9mfck5yajrt092yzu.png)
**Shout out to [DrawKit](https://www.drawkit.io/product/black-lives-matter-social-movements-illustrations) for the illustration we'll be using today!**


1) Open up a new Pen by forking this starter [Codepen](https://codepen.io/tcgronk/pen/LYNvope). (Click "fork" at the bottom of the page). 


2) GreenSock should already be imported to your Pen, but you'll need to import GreenSock for any future animations. To import, click on the settings icon next to the Javascript tab. Type gsap into the search bar or add: https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js

This allows us to access the GreenSock animations library in our Codepen project. 

3) Each hand and sign in the illustration is already labeled with the class "sign." We'll start our animation by calling for each element with the "sign" class. 

gsap.to(".sign",{**insert animation code here**})

*"gsap" refers to the GreenSock animation library

*Today we'll be using .to() since we want to customize the destination of our animation, but another option would be .fromTo() or .from() 

*Inside the curly brackets, we'll list out any animations that we want to apply to the sign class.

4) We'll start by scaling the signs or making them "grow" larger. We'll also add a stagger property, so that each element with the sign class starts growing 0.75 seconds apart. Copy and paste the following code line into the Javascript tab: 

gsap.to(".sign",{scale: 1.2,stagger: 0.75})

5) We want the movement to look a little bit more realistic.
We'll slow it down and direct the animation to stretch up from the bottom rather than scaling towards us. 

duration: 5, //add a duration of 5 seconds.
transformOrigin: "bottom" //Stretch up from the bottom

6) Lastly, we'll want this animation to loop on repeat: 

yoyo: true, //repeats the animation backwards & forwards
repeat: -1, //loops your code for endless repetition
ease: Bounce.easeInOut //adds a more natural movement



You can see the final code under the JS tab: 
{% codepen https://codepen.io/tcgronk/pen/MWyRRxY default-tab=js,result %}
Accessing Key Vault secrets from an Azure Kubernetes Cluster
Tags: azure, kubernetes, security
Published: 2020-09-29 21:23:16

#### 📺 031 - Neil Peterson 🎙️ Jason Hand

{% youtube XIahaT2tc3Y%}

In this discussion we will talk through and demonstrate a few different ways to access Azure Key Vault secrets from and Azure Kubernetes Service cluster.

### Useful Links

🔗 [Tutorial: Configure and run the Azure Key Vault provider for the Secrets Store CSI driver on Kubernetes](https://docs.microsoft.com/en-us/azure/key-vault/general/key-vault-integrate-kubernetes?WT.mc_id=allaroundazure-blog-nepeters)


#### Docs

🔗 [Azure Kubernetes Service (AKS)](https://docs.microsoft.com/azure/aks/intro-kubernetes?WT.mc_id=allaroundazure-blog-nepeters)

🔗 [Tutorial: Run applications in Azure Kubernetes Service (AKS)](https://docs.microsoft.com/en-us/azure/aks/tutorial-kubernetes-deploy-application?WT.mc_id=allaroundazure-blog-nepeters)

🔗 [Tutorial: Deploy an Azure Kubernetes Service (AKS) cluster](https://docs.microsoft.com/en-us/azure/aks/tutorial-kubernetes-deploy-cluster?WT.mc_id=allaroundazure-blog-nepeters)

🔗 [Kubernetes core concepts for Azure Kubernetes Service (AKS)](https://docs.microsoft.com/en-us/azure/aks/concepts-clusters-workloads?WT.mc_id=allaroundazure-blog-nepeters)

#### Learn

🔗 [Introduction to Kubernetes](https://docs.microsoft.com/en-us/learn/modules/intro-to-kubernetes/?WT.mc_id=allaroundazure-blog-nepeters)

🔗 [Introduction to Kubernetes on Azure](]https://docs.microsoft.com/en-us/learn/paths/intro-to-kubernetes-on-azure/?WT.mc_id=allaroundazure-blog-nepeters)

🔗 [Introduction to Azure Kubernetes Service](https://docs.microsoft.com/en-us/learn/modules/intro-to-azure-kubernetes-service/?WT.mc_id=allaroundazure-blog-nepeters)

🔗 [Azure Kubernetes Service Workshop](https://docs.microsoft.com/en-us/learn/modules/aks-workshop/?WT.mc_id=allaroundazure-blog-nepeters)

#### More
🔗 [Key Vault Configuration](https://docs.microsoft.com/en-us/aspnet/core/security/key-vault-configuration?view=aspnetcore-3.1)

🔗 [AAD Pod Identity](https://github.com/Azure/aad-pod-identity)

🔗 [CSI Storage Driver Support in Azure Kubernetes Service](https://azure.microsoft.com/en-us/updates/public-preview-csi-storage-driver-support-in-azure-kubernetes-service/)


### Learn more about Neil Peterson

🔗 Twitter: [@nepeters](https://twitter.com/nepeters)


### Find Us On

📺 [Twitch](https://www.twitch.tv/microsoftdeveloper)

🔗 [Twitter](https://twitter.com/jasonhand)

☁️
Why your JavaScript object might not be copied by assigning it to a new variable.
Tags: javascript, react
Published: 2020-09-29 21:18:36

So you've imported yourself a JS object have you? You've imported it into a react component. Great. You assign it a new variable via the likes of `var x = importedJsObj`. You change the some of the values in x and hand off the "pure" importedJsObj to another function. Well you're out of luck. It didn't actually copy it. 

I found this out the hard way when I needed to filter a subset of a js object, and hand off the original to different function. 

Alas, we have `lodash` - https://lodash.com/

If you're using react, go ahead and type `npm i --save lodash`

Then, you need to import what you need to use. To solve my specific problem I did `import { deepClone } from 'lodash'` -https://www.digitalocean.com/community/tutorials/js-deep-cloning-javascript-objects#so-how-can-i-copy-an-object-the-right-way

Then instead of just saying `var x = importedJsObj` you say `var x = deepClone(importedJsObj)`

And there you have it. A properly copied js object that won't mutate the original.
flex-basis refers to width/height?
Tags: css, flexbox, layout
Published: 2020-09-29 21:17:42


This week I realized again something about flexbox and flex-basis in particular which I tend to forget while working on
other CSS styles.

It is about the [flex-basis](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-basis) property:

> An absolute `<length>`, a `<percentage>` of the parent flex container's main size property, or the keyword `auto`.

What is referred here as "main size" is the size along the main axis of the flexbox.

Thus, this means flex-basis refers to:

- `width` in case of `flex-direction: row`
- `height` in case of `flex-direction: column` 

My misconception here was that `flex-basis` ALWAYS refers to the `width`.