teleren/devto huggingface dataset:
Quick minimal contact form creation in React App
Published: 2020-12-06 00:41:48

In my last 3 projects, I've needed to add a contact form. So I decided to write up a simple and speedy base layout for a form that can be customized easily. 

 First our JSX which consists of our main `<div>`, a header, and a few `<input>` tags:

```
<div className='contact'>
  <h2 className='contactus'>Contact Us</h2>
    <input type="text" id="name" name="name" 
     placeholder="Name"/>
    <input type="text" id="email" name="email" 
     placeholder="Email"/>
    <textarea id="subject" name="subject" placeholder="Tell us 
     about you!" />
    <input type="submit" value="Send"/>
</div>
```

Next, in our CSS file we will add some styling to the main `<div>`, our text input, and our submit input or button:

```
.contact {
  margin-top: 50px;
  margin-left: 400px;
  width: 500px;
  height: auto;
  padding: 10px;
  border: 8px solid transparent;
}

input[type=text], select, textarea {
  width: 90%; 
  padding: 12px; 
  border: 1px solid #262626; 
  box-sizing: border-box;
  margin-top: 5px; 
  margin-bottom: 5px; 
  resize: vertical; 
  font-size: medium;
  background-color: transparent;
}

input[type=submit] {
  background-color: transparent;
  border: none; 
  color: #262626;
  width: 100px;
  padding: 4px;
  cursor: pointer;
  font-size: medium;
  margin-left: 35%;
}

input[type=submit]:hover {
  color: #262626;
  transform: scale(1.2);
  transition: 500ms;
  border: 1px solid #262626;
}
```
Result:

![](https://i.imgur.com/PZl4qFO.gif)

From here you can change up the styling to make it look how you want!
Typing the Nuxt head() method
Tags: typescript, vue, nuxt, javascript
Published: 2020-12-07 08:18:55

---
title: Typing the Nuxt head() method
published: true
date: 2020-12-06 00:39:25 UTC
tags: typescript, vue, nuxtjs, javascript
canonical_url: https://jankal.dev/blog/typing-the-nuxt-head-method
---
Using the `head()` method in a typed context can be problematic when working with `fetch()` or `asyncData()` hooks to retrieve data. Let's see the following component:
```html
<script lang="ts">
import Vue from 'vue';
import { MetaInfo } from 'vue-meta';

export default Vue.extend({
  async asyncData() {
    // usually you would fetch data here
    const title = 'Blog';
    
    return {
      title
    };
  },
  head(): MetaInfo {
    return {
      title: this.title // <<--- Property 'title' does not exist on type 'CombinedVueInstance<Vue, unknown, unknown, unknown, Readonly<Record<never, any>>>'.
    }
  }
});
</script>
```
As you see, TypeScript doesn't know about `this.title`. My first approach was converting the component to a class-based component using `vue-property-decorator` like this.
```html
<script lang="ts">
import { Vue, Component } from 'vue-property-decorator';
import { MetaInfo } from 'vue-meta';

@Component({
  async asyncData() {
    // usually you would fetch data here
    const title = 'Blog';

    return {
      title
    };
  }
})
export default class PageComponent extends Vue {
  title!: string;
  
  head(): MetaInfo {
    return {
      title: this.title
    }
  }
}
</script>
```
After this transformation, the type-error is gone, because I told TypeScript about the property via declaring it inside the class. You would expect this to work..., but it doesn't. Nuxt does not call the `head()` method anymore, so no metadata is added. So I had to look further. Fortunately `nuxt-property-decorator` has us covered. Just replacing `vue-property-decorator` with `nuxt-property-decorator` will do the trick. So this is my final component:
```html
<script lang="ts">
import { Vue, Component } from 'nuxt-property-decorator';
import { MetaInfo } from 'vue-meta';

@Component({
  async asyncData() {
    // usually you would fetch data here
    const title = 'Blog';

    return {
      title
    };
  }
})
export default class PageComponent extends Vue {
  title!: string;
  
  head(): MetaInfo {
    return {
      title: this.title
    }
  }
}
</script>
```
Cheers 🥳
OSD600 - Lab 9 The last one!
Published: 2020-12-06 00:26:58

The last lab of OSD600 at Seneca is finally here!  What a ride!  In this [Lab 9](https://github.com/Seneca-CDOT/topics-in-open-source-2020/wiki/lab-9) requires us working on a CI/CD pipeline. I used Node.js for my [Link Checker](https://github.com/strawberries73/OSD600-Journey-on-rocky-trails).  The first step was that I needed to set up an [npm](https://docs.npmjs.com/packages-and-modules/contributing-packages-to-the-registry) before I got started. I implemented my packaging steps and then created the tag. 

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

Once the process was finished, my Link Checker project was [published](https://www.npmjs.com/package/jenn-brokenlink). To be honest, this was simple to set up.  My partner tested mine and I tested his. Surprisingly went well!

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

As we approach the final week of the semester at Seneca, I feel weary and wired! Looking back I feel like it was all worth the struggle.  Part of me feels sad in a way that this is my last.  Several times I had questioned why I was taking Computer Programming and Analysis.  I take great pride in being a highly intelligent individual. This program has truly humbled me in every way.  I've lost count the amount of times I have felt so stupid. Like why can’t I just get it?!  Yes!  I'm here, the final week not just of the semester but also the program. I am truly thankful for the professors I had, for the struggle and for the friends I have made.  Cheers to you all!
The last lab: git tagging, and publishing to npm
Published: 2020-12-06 00:05:26

### git tagging
Git has the ability to tag specific points in a repository’s history as being important. Git tag is essentially a kind of version control. The semantic versioning has a convention to be followed. For more information visit the [site](https://docs.npmjs.com/about-semantic-versioning)

At first, I have zero idea about git tagging. I have used branches name and commit number to track down or retrieve my previous commit. BUT never tagging my commit with version number.

So, I needed to first understand what the tagging is and how to use that. Thankfully we have a great professor who are teaching us about git. 

__Here is the basic instruction you to follow to add a git tag:__

>`git tag -a <version> -m [message]` :  this will add the new tag to your current commit.
>`git tag -d <version>` :  this will drop the tag
>`git tag show` : this will show the lists of the git tag

### v0.9.0
Up until now, the code is not ready to be published. So I decided to call the program at that moment is version 0.9.0. Before making release 1.0.0. I needed to make couple update in the program.

* The first: If your file is not inside the same directory of the program. The file cannot be read. Because the file is just passed by name only without path. So I needed to make sure that regardless where the file is, the program should read the file based on their name only. 

* Update the README.md and changing the program name: Since the npm package should have unique name I needed to come up with a real unique name, for this I decided to add my name to the program name `kimin-url-tester`.

### release 1.0.0
To publish the program. First I needed to sign up the npm website. Once verifying email, we can publish our package. 

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

After success in login, you can hit `npm publish`
Keep in mind! this will only happen after verifying your email. 

You can see your package in your profile
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ky5zsndywa4wft5plepb.PNG)

The test:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ujgog2xaqvbz9a4tw0xc.PNG)
How to get the IP address of a Website in Node.js?
Tags: node
Published: 2020-12-06 00:00:00

---
  title: How to get the IP address of a Website in Node.js?
  published: true
  tags: Nodejs
  date: Sun Dec 06 2020 05:30:00 GMT+0530 (India Standard Time)
  canonical_url: https://melvingeorge.me/blog/get-ip-address-of-website-nodejs
  cover_image: https://melvingeorge.me/_next/static/images/main-bd0464c7b23d84d3cb4c24132dc79a3b.jpg
  ---
  [Originally posted here!](https://melvingeorge.me/blog/get-ip-address-of-website-nodejs)
  
To get the IP address of a website we can use either the `resolve4()` function for `IPv4` addresses or the `resolve6()` function for `IPv6` addresses from the `dns` module in Node.js.

Let's say our website is `google.com`,

```js
// website URL
const url = "google.com";
```

Now let's use the `resolve4()` function from the `dns` module and pass the `url` as the first argument and a callback function as the second argument.

**The callback function should be an error first callback function, in which:**

- **the first parameter is of course an error object**
- **the second parameter is an array of `IPv4` addresses after the resolution**

It can be done like this,

```js
// require dns module
const dns = require("dns");

// website URL
const url = "google.com";

// get the IPv4 address
// using dns.resolve4() function
dns.resolve4(url, (err, addresses) => {
  // if any err
  // log to console
  if (err) {
    console.err(err);
    return;
  }

  // otherwise show the first IPv4 address
  // from the array
  console.log(addresses[0]); // eg: 64.233.191.113
});
```

See this example live in [repl.it](https://repl.it/@melvin2016/get-ip-address-of-website-nodejs).

If you want to get the `Time to live (TTL)` of the request in seconds, you can pass an optional object with `ttl` set to boolean `true` `{ttl: true}` as the second argument to the `resolve4()` function like this,

```js
// require dns module
const dns = require("dns");

// website URL
const url = "google.com";

// get the IPv4 address
// using dns.resolve4() function
// also set ttl to true in object
dns.resolve4(url, { ttl: true }, (err, addresses) => {
  // if any err
  // log to console
  if (err) {
    console.err(err);
    return;
  }

  // otherwise show the first IPv4 address
  // from the array
  // Also, the ttl for the request
  // is shown along with the address
  console.log(addresses[0]); // eg: { 64.233.191.113, ttl: 299}
});
```

If you want an `IPv6` address instead of `IPv4`, you can use the `resolve6()` function instead of the `resolve4()` function and use the same pattern like this,

```js
// require dns module
const dns = require("dns");

// website URL
const url = "google.com";

// get the IPv6 address
// using dns.resolve6() function
dns.resolve6(url, (err, addresses) => {
  // if any err
  // log to console
  if (err) {
    console.err(err);
    return;
  }

  // otherwise show the first IPv6 address
  // from the array
  console.log(addresses[0]); // eg: 2607:f8b0:4001:c03::71
});
```

### Feel free to share if you found this useful 😃.

---
Useful Javascript Array Methods
Tags: javascript
Published: 2020-12-05 23:17:32

If you've worked with JavaScript, you'll know that arrarys are fundamental to your work as a developer and as such it would be helpful to manipulate an array with a few lines of code, rather trying some hack that you don't even understand.

Let's look at some array methods that makes working with arrays easier.

 <b><h1>Slicing An Array</h1></b>

We can slice a part of an array, that is take away some part of an array and then do some manipulations on what we sliced away or what's left of the original array. The syntax is 
```javascript
array.slice(Start, end)
let myArr = [1, 2, 3, 4, 5, 6]
let slicedPart = myArr.slice(0, 3)
console.log(slicedPart)
//prints out [1, 2, 3, 4]
```

start is an integer that specifies where to start from and end is also an integer that specifies where to stop. It is to note that this method changes the original array and returns the sliced part as a new array.

<b><h1>ForEach</b></h1>

This method allows looping through arrays as simple as the alphabets instead of using a for loop, you should use For each. It accepts a callback function which takes a parameter that represents each item in the array. The syntax is 
```javascript
array.forEach((item)=>{
// do something with item
})

let myArr = [1, 2, 3]
myArr.forEach((item)=>{
 console.log(item * 2)
 //prints out 2, 4, 6
})
```

<b><h1>Map</h1></b>

This method allows us to return a new array from an existing array based on a condition, it takes a callback function that accepts an argument which represents each item in the array. It loops through the array and returns each element that passes the test. Although you could also modify each item instead of a test or return a property of the item. Syntax
```javascript

array.map((item)=>{
//do anything with item
//e.g return item.name 
})
var myArr = [{name: 'foo'}, {name : 'bar'}]
let newArrr = myArr.map((item)=> item.name)
console.log(newArrr)
//prints out ['foo', 'bar']
```
This method is useful for retrieving properties of objects stored inside an array.

<b><h1>Find an item</b></h1>

This function is useful for finding something inside an array without having to manually look inside it, it also accepts a callback function that we pass an argument, the argument represents each item in the array. Syntax

```javascript
array.find((item)=> item = //anything)
var myArr = [{name: 'foo'}, {name : 'bar'}]

let obj = myArr.find((obj)=> obj.name == 'foo'
)
console.log(obj) //prints out
//{name: 'foo'}
```

<b><h1>Join</h1></b>

This method is used to join the contents of an array into a string. Syntax

```javascript
let myArr = ['my', 'name', 'is', 'kala']
let myString = myArr.join(",")
console.log(myString)
//prints out
//my name is Kala

```
This method accepts a delimeter that is used to join the elements in the array.

<b><h1>IsArray</h1></b>

This method checks if an object is an array.

```javascript
Array.isArray(obj)
//returns bool, true if an array
//false if not
let myArr = [1,2,3]
Array.isArray(myArr)
//true
```

Thank for reading this should make working with arrays easier for you.
Aprendamos Next.js en Español
Tags: nextjs, spanish, tutorial, aprendamosnextjs
Published: 2020-12-05 23:13:56

👋🏼 Empecé una lista de Youtube donde iré publicando videos sobre cómo usar Next.js

Los 3 primeros videos son sobre:
- ¿Cómo usar `getServerSideProps`?
- ¿Cómo usar `getStaticProos`?
- Usar de `create-next-app` para crear nuestras aplicaciones Next.js

[Playlist en Youtube - Aprendamos Next.js](https://www.youtube.com/playlist?list=PLvB-YEcTlJ3A0nYX74xlAOzBIhaTNm5MR)

¿Qué les gustaría saber sobre Next.js?
Associations in Rails
Tags: rails, ruby, beginners
Published: 2020-12-05 22:51:32

In this blog, I want to take a quick look at a very simple thing we can do to verify our associations have been set up properly at the start of a Rails project using some ActiveRecord magic.

Once you have an idea of what your database table relationships will look like and have them defined in your project, it's a great idea to quickly create some dummy data in the rails console to verify your associations are working how you want them to.

I was building an exercise journal and my relationships were as follows:
```
class Workout < ApplicationRecord
...
has_many :exercises
has_many :users, through: :exercises
...

class User < ApplicationRecord
...
has_many :workouts, through: :exercises
has_many :exercises
...

class Exercise < ApplicationRecord
...
belongs_to :workout
belongs_to :user
...
```
We will be verifying these associations. So we head into the terminal and play in the Rails console `rails c` to create a couple of users:
```
c = User.create(name: "Stan", email: "stan@stan.com", password: "password")
```
`c` is arbitrary here and is used to call the newly created user, if we do this we can confirm that the new user has been assigned a `user_id` of 1, meaning it was successfully saved to the DB. We should be able to see the attributes that were passed in as well (`name`, `email`, `password`). Repeat the process to create a second user which should save with a `user_id` of 2. Great! We’ve got our users. 

Now on to workouts. It’s important to create the users and workouts first, given that our joins table is the `exercises` table. This is because each exercise created will need to be associated with a user and a workout - the `exercises` table will "join" the `users` and `workouts` tables. You can see this in the relationships code snippet provided above.

`c = Workout.create(name: "HIT", notes: "No rest")`
Very similar to the users example. This should save with a `workout_id` of 1. You can confirm this by calling `c` in the terminal. Make one more workout and then it’s time to create some exercises:

`c = Exercise.create(name: "Burpee", user_id: 1, workout_id: 1)`
Above I assigned foreign keys to the exercise object and then checked to see if it saved to the DB by calling `c` in the terminal.
```
c = Exercise.create(name: "Pushup", user_id: 2, workout_id: 1)
c = Exercise.create(name: "Situp", user_id: 1, workout_id: 2)
```
Now we can call `User.all.first.workouts` or `User.all.last.exercises` or `Workout.all.last.exercises` for example.

I hope this helps you get started. It’s important to verify these relationships are working correctly before getting too deep into your project.

Happy coding!
Interview week
Published: 2020-12-05 22:40:21

This next week is going to be hectic. I have 2 interviews this week. I gave my availability for them yesterday and both companies decided to book me for Monday the 7th. I have not ever had a phone screening interview so I have been watching lots of videos to study. I also have written out a bunch of mock questions and am coming up with answers for them right now. My other interview is a tech interview and I am studying the most commonly asked questions during the interview. I did well on my mock interview that I had as part of Flatiron School's Career Prep track. I also landed another coding assessment that is due within 2 weeks from now. I am not going to focus on that until after Monday. Unfortunately, I will not be meeting with my career coach until after Monday but I will be sure to reach out to her and get whatever advice she can offer.
Looking to pivot or cross-over? UX+code+visual+
Published: 2020-12-05 22:21:46

Derek was helping Marco with one of his projects --- and we were doing some design thinking for the company... and - so, he thought... well - I'll record this part (might be of some use) - and then it just kept going.... and is unfolding into a pretty great crash-course type thing.

There's going to be 10? videos.

The series shows how to design and build a product (super high level) - in a lean/agile way - and no wire-frames and all that junk. Just - real-world UX and design and programming and user-testing and iteration. If you like it -- let us know. It seems like everyone out there is _dead_.

Here's the first one:

{% vimeo 486695766 %}

~ Ivy c/o PE
What you need to know about Aurora Serverless v2, so far.
Tags: aws, serverless, rds
Published: 2020-12-07 14:49:15

---
title: What you need to know about Aurora Serverless v2, so far.
published: true
date: 2020-12-05 22:19:32 UTC
tags: AWS,Serverless,RDS
canonical_url: https://theburningmonk.com/2020/12/what-you-need-to-know-about-aurora-serverless-v2-so-far/
---

I’ve gotten a few questions about Aurora Serverless v2 preview, so here is what you need to know about Aurora Serverless v2 during preview.

 

**Q** : Does it replace the existing Aurora Serverless offering?

**A** : No, it lives side-by-side with the existing Aurora Serverless, which will still be available to you as “v1”.

 

**Q** : Aurora Serverless v1 takes a few seconds to scale up, that’s too much for our use case where we get a lot of spikes. Is that the same with v2?

**A** : No, v2 scales up in milliseconds, during preview the max ACU is only 32 though.

 

**Q** : Is the cold start time for Aurora Serverless v2 still a few seconds?

**A** : Yes, unfortunately…

 

**Q** : So if you want to avoid cold starts, what’s the minimum ACU you have to run?

**A** : Minimum ACU with v2 is 0.5.

 

**Q** : Does v2 still scale up in double increments, e.g. 4 ACU -> 8 ACU?

**A** : No, it scales up in increments of 0.5 ACUs, so it’s a much tighter fit for your workload, so you’ll waste less money on over-provisioned ACUs.

 

**Q** : Is there anything I can do with v2 that I can’t do with v1?

**A** : Yes, v2 supports all the Aurora features, including those that v1 is missing, such as global database, IAM auth and Lambda triggers.

 

**Q** : Wait, but it’s twice as much per ACU!

**A** : Yes, but v1 requires a lot of over-provisioning because it doubles ACU each time and takes 15 mins to scale down. v2 scales in 0.5 ACU increments and scales down in < 1 min. AND you get all the Aurora features!

![](https://theburningmonk.com/wp-content/uploads/2020/12/img_5fcc0a50d7c18.png)

 

**Q** : Can you use “provisioned” and “serverless” instances in the same Aurora cluster?

**A** : Yes, you can! It’s pretty cool, right!?

 

**Q** : Is the HTTP Data API supported on v2?

**A** : Not in the preview, I guess it’ll be there when Aurora Serverless v2 becomes GA.

 

**Q** : If using from Lambda, do I need to use RDS Proxy to manage the connections to the cluster? Data API kinda mitigated that for v1.

**A** : Yes, you probably should, at least until Data API is enabled on v2. Like with Aurora Serverless v1, more connections requires more ACUs. So if there’s a spike in traffic and Lambda scales up the number of concurrent executions then you can run into trouble with other maxing out the available connections, or it’ll hurt you economically because you will need much more ACUs because of the number of connections.

Jeremy Daly has written a [nice summary post](https://dev.to/jeremy_daly/aurora-serverless-v2-the-good-the-better-and-the-possibly-amazing-1i1o-temp-slug-2438335) on Aurora Serverless v2 as well, with a nice experiment on its scaling behaviour. Go check it out if you haven’t already.