teleren/devto huggingface dataset:
EC2 instance types
Tags: devops, cloud, aws, beginners
Published: 2021-06-17 03:15:24

When we were creating EC2 instances we saw that there are many types of EC2 instances available from which we selected t2.micro .Now we will study some of them so that we can make an educated guess on what type of instance we need.

EC2 has the following type of instances available: 
1. General Purpose
1. Compute Optimized
1. Memory Optimized
1. Accelerated Computing 
1. Storage optimized

Let us look each of these:

## General Purpose 

These instances provide a balance of compute power, memory network. These are general purpose and can be used for a variety of workloads these are good for using as web servers, you can use them as your virtual environments to build, deploy, test and so on. These instances contain the 
* T series
* M series
* MACos 
family of servers.

## Compute Optimized(CPU optimized)

Compute optimized instances are ideal for compute bound applications that need high performance computations for running correctly. These types of instances are used for scientific modelling, gaming servers, media trans coding machine learning etc. These instances contain the 
* C series
family of servers.

## Memory Optimized(RAM optimized)

Memory optimized instances are used to deliver fast performance on large datasets in memory. These types of servers are best used to setup real time database analytics, caches etc. These instances contain the 
* R series
* x series
* U series
* Z series
family of servers.

## Storage Optimized(ROM optimized)

These instances are used when we need to perform many read and writes simultaneously. these provide low latency to IO operations to applications. These are used for setting up databases, data warehousing etc. These instances contain the 
* I series
* D series
* H series
family of servers.

## Accelerated Computing

Accelerated computing instances use hardware accelerators, or co-processors, to perform functions, such as floating point number calculations, graphics processing, or data pattern matching, more efficiently than is possible in software running on CPUs. These are used for machine learning, speech recognition, seismic analysis etc. These instances contain the 
* P series
* G series
* F series
family of servers.

These were about all the servers available on EC2 for details visit [EC2](https://aws.amazon.com/ec2/instance-types/) documentation. Next we will study how we can save money if we know how long we will these EC2 instances for.
[Ranting 1/n] Why the developers are not focusing on Accessibility?
Tags: a11y, web, webdev
Published: 2021-06-17 03:00:38

In the tech community, there is low awareness of accessibility. There are many reasons behind this:

1. Most of the online tech resources don't talk about accessibility. kudos to MDN for maintaining the accessibility section.

2. Bootcamps and tutorials doesn't teach accessibility

3. Accessibility is not part of any CS degree.
 
Today I will rant about one of the biggest issues I have seen in the developers: 'Wrong code reviews'.

Whenever I see the code-reviews at work/open-source/boot-camps most of the comments are around:

1. JavaScript syntax

2. Using fancy syntax or tags

Developers just brag about their JS frameworks/libs skills and skip the importance of semantic code.

Developers who are putting JavaScript over semantic code are harming the skills and products they are building.

Senior developers not at all reviewing the code around:

1. Semantic code

2. DRY

3. Where to draw the line between HTML, CSS, and JS

4. SOLID principles


>> Junior or peer developers are not asking the questions to their senior developers at all during code reviews.

_Eg:_ I have seen a code of a Bootcamp dev where the senior developer asked the junior developer to move the whole Navigation to javascript. 

_Reason:_ Sr Dev comment was - you are breaking `DRY` as `nav `code is repeating at every `HTML` page. 

The whole app was HTML pages, not SPA. 

There were no comments on:

1. Tag of `nav` is wrong. It was `div`.

2. The code used for creating navigation was not semantic at all. Instead of `<ul>` it was span.

3. If the code will move to JavaScript how the content will be handled by Screen readers or translations.

4. How the keyboard 'focus' will work if the nav will move to JavaScript.

If the code-review will start pointing out:

1. Correct HTML tags

2. Cost of moving content and View to JavaScript 

3. If Content and View required to be in JavaScript then how the accessibility will be taken care

Everyone in the team will get aware of the accessibility as well as from next time onwards developers will write 'correct' code not just code that 'works'.


As a Jr Developer: Ask questions. Do not just accept the code review. 

As a senior developer: Do the right code review of everything, not just JS. 

### Happy Learning!!

#### Follow me at [twitter](https://twitter.com/hellonehha).

#### I write on accessibility at [a11ytips.dev](http://a11ytips.dev/)
JavaScript Data Structures And Algorithms (Graphs, Part 2)
Tags: algorithms, codenewbie, javascript, datastructures
Published: 2021-07-10 20:11:10

---
title: JavaScript Data Structures And Algorithms (Graphs, Part 2)
published: true
date: 2021-06-17 02:32:08 UTC
tags: algorithms,codenewbie,javascript,datastructures
canonical_url: https://medium.com/codex/javascript-data-structures-and-algorithms-graphs-part-2-533534289b23
---

[![](https://cdn-images-1.medium.com/max/2600/0*f8BDhTtn0UCxSGS1)](https://medium.com/codex/javascript-data-structures-and-algorithms-graphs-part-2-533534289b23?source=rss-be00f566a88f------2)

Hello! This is a continuation of my breakdown of graph data structures. Last time we discussed some of the different graph types that are…

[Continue reading on CodeX »](https://medium.com/codex/javascript-data-structures-and-algorithms-graphs-part-2-533534289b23?source=rss-be00f566a88f------2)
Day 2 of HR
Published: 2021-06-17 02:06:38

There were a few lessons learned in this second day of the program and second day of what's really orientation.

First, this is going to be a long, exhausting process. That sounds like a complaint, but really, it's more of a recognition. Marcus (co-founder and lecturer) describes the program as one of the hardest things you're likely to ever do and I don't take that lightly.

Second -- man there are some really gifted people in this program and I can't wait to share with and learn from them. The more people I meet, the better I feel about being in this place -- to be in this endeavor with like minds is awesome and gratifying. That goes for the staff, too.

Here's another realization. I might have to take a step back from my ambition and just go with the flow. I do not want to burn out. Again, I do not want to burn out. To me, that doesn't mean not making it through, it means not making it through feeling good and being good. I want to feel strong -- to be strong -- from Week 1 through to the end. I got great advice from one of the staff today in a 1-on-1: "Trust the program. They give you what you need, when you need it." It can be hard to let go of the wheel. But I guess when you have the right driver, or in this case the right program, the smartest move is to get out of the way and find your seat.

It's been a good day. A long one! Let's see what tomorrow brings.
#100DaysOfSwift: Day 2
Tags: swift, beginners, ios
Published: 2021-06-17 00:54:46

On day 2 of 100 days of swift, I learned about arrays, sets, tuples, dictionaries, and enum. It will take some getting use to when it comes to remembering the syntax for tuples and dictionaries. What I really liked about today was that Paul explained when you will need to use each one and the differences between them. For example, 

- Arrays store items in the way that you write them in your code and you can read the value by using their numerical positions. Technical term for counting form 0 is "zero-based". It is best to use arrays if order matters and you have duplicates. 

- Sets are in a random order / unordered, the value cannot be read by using numerical positions, and no item can appear twice. It is best to use sets when you want to know if an item exist and you want to find it fast. 

- Tuples are fixed in size. You cannot remove or add any items and you cannot change the type. You can access items by using numerical positions or by using their names. It is best to use tuples when you have a fixed number of types. For example, you have two strings and thats it.

- Dictionaries are interesting. You can use anything to access the values but people commonly use strings. A colon separates the identifier(key) and the value from each other.  

- Enums are also interesting. They are used as a way to define a group of related values. You can also use an associated value on a case as a way to add additional information about that specific case. 

I will revisit this section soon. 

Until tomorrow !
Try React 18 with Vite, Typescript and Vercel
Tags: react, webdev, javascript, tutorial
Published: 2021-06-17 00:45:00

---
title: Try React 18 with Vite, Typescript and Vercel
published: true
description: 
tags: #react #webdev #javascript #tutorial
cover_image: https://i.ibb.co/bzcHGj2/image.png
---

### What's New In React 18?

Please visit [https://nnote.io/s/x4od5/react-18-with-vite-and-vercel](https://nnote.io/s/x4od5/react-18-with-vite-and-vercel) for the latest updates for this article.

The new version of React - React 18 alpha has just come out. From ReactJS.org:

* There are no significant out-of-the-box breaking changes to component behavior. You can upgrade to React 18 with minimal or no changes to your application code, with a level of effort comparable to a typical major React release"

New Improvements:

* React.lazy - new streaming server renderer support.
* Automatic batching.
* New APIs (like startTransition).
* Article: What’s coming in React 18 - https://reactjs.org/blog/2021/06/08/the-plan-for-react-18.html

This tutorial will demonstrate a step-by-step guide to create your project using React 18 alpha, Typescript, Vite and deploy it to Vercel (freemium).

### Create a Vite project

Required tools:

* NodeJS
* Yarn (npm install yarn -g)

Run this command to create your new project:
(Vite is a code generator similar to CRA but it takes < 1s to launch dev mode versus > 45s using CRA)

```
yarn create @vitejs/app my-project --template react-ts
cd my-project
```

Install the latest React 18 alpha version:

```
yarn add react@alpha react-dom@alpha
```

As `@types/react` doesn't understand the new React 18's APIs or types yet, we need to update "tsconfig.json" file: after `"jsx": "react"` add:

```
"types": ["react/next", "react-dom/next"]
```

Then run the new project:

```
yarn dev

vite v2.3.7 dev server running at:
  > Local: http://localhost:3000/
  > Network: use `--host` to expose
  ready in 174ms.
```

And that's it! We have React 18 up and running with Typescript! Ready to rock.
<img src="https://i.ibb.co/bzcHGj2/image.png" height="480">

### Deploy to Vercel

First, we need to build this project:

```
yarn build
```

Then deploy the build (dist) directory to Vercel:

```
cd dist
npx vercel .

...
✅  Deployed to: https://react-18-ts-vite-app.vercel.app [copied to clipboard] [11s]
```

Now, visit the link https://react-18-ts-vite-app.vercel.app, we should have the app up and running there:
<img src="https://i.ibb.co/yV7s6WM/image.png" height="480">

### Links

* Github repository [https://github.com/ngduc/react-18-ts-vite-app](https://github.com/ngduc/react-18-ts-vite-app)
* Please visit [https://nnote.io/s/x4od5/react-18-with-vite-and-vercel](https://nnote.io/s/x4od5/react-18-with-vite-and-vercel) for the latest updates for this article.
Move Zeroes To End
Published: 2021-04-25 15:17:47


**This may or may not be the optimal solution, DO NOT blindly memorize my solutions**

From [Cassidy's](https://twitter.com/cassidoo) weekly [newsletter](https://buttondown.email/cassidoo/archive/531c577f-2e0a-4220-9bba-fd70d8fb482b).

Target audience: Beginners in js (please feedback!)

# This week’s question:
> Given an integer array, move all 0s to the end of it while maintaining the relative order of the non-zeroes. Bonus: do this without making a copy of the array!

## Example:

```
$ moveZeroes([0,2,0,3,8])
$ [2,3,8,0,0]
```

## Filtering zeroes and adding at the end

One of the first solution that comes to mind for this question is to remove the zeroes, and append it to the end of the array.

```js
const moveZeroesNaive = (arr) => {
  let noZeroes = arr.filter((num) => num !== 0);
  return [...noZeroes, ...new Array(arr.length - noZeroes.length).fill(0)];
};
```

This solution works, and there are probably other ways to code this such that we wont make another copy of an array. Filter makes a copy, and spreading also copies by value in js.

## Bubbling
```js
const moveZeroesBubble = (arr) => {
  for (let i = 0; i < arr.length; i++) {
    if (arr[i] === 0) {
      for (let j = i; j < arr.length - 1; j++) {
        arr[j] = arr[j + 1];
        arr[j + 1] = 0;
      }
    }
  }
  return arr;
};

const arr = [0, 2, 0, 3, 8];
moveZeroesBubble(arr);
console.log(arr);
```

This solution is similar to what we expect of bubble sort. Every time we face a zero, we bubble a zero to the end. This has a complexity of `O(n^2)` and takes no extra space.

## Abusing sort

One thing we can try is to make use of tools already available to us. In js, we have an in-place sort, and can rely on the js engine to have a decent sort algorithm, of `O(n log n)` complexity (probably [timsort](https://en.wikipedia.org/wiki/Timsort))

```js
const moveZeroes = (arr) => arr.sort((a, b) => (b === 0 ? -1 : 0));

const arr = [0, 2, 0, 3, 8];
moveZeroes(arr);
console.log(arr);
```

What we can do is to **not** sort according to both values, but put in a comparison result that checks if one of the array is a zero or not! (if we did `a === 0` instead, we get the 0s at the front)
How to create or draw a circle using SVG in HTML?
Tags: html
Published: 2021-06-17 00:00:00

---
  title: How to create or draw a circle using SVG in HTML?
  published: true
  tags: HTML5
  date: Thu Jun 17 2021 05:30:00 GMT+0530 (India Standard Time)
  canonical_url: https://melvingeorge.me/blog/create-circle-svg-html
  cover_image: https://melvingeorge.me/_next/static/images/main-86358102ff73cda0461fdaef6d6cf7ef.jpg
  ---
  [Originally posted here!](https://melvingeorge.me/blog/create-circle-svg-html)
  
To create a circle, you can use the `circle` element inside the `svg` element in HTML.

### TL;DR

```html
<!-- Create circle in SVG -->
<svg>
  <circle cx="30" cy="30" r="30" />
</svg>
```

For example, to make a circle with a `30px` as its radius length, first we can define the `circle` element inside the `svg` element like this,

```html
<!-- Create circle in SVG -->
<svg>
  <circle />
</svg>
```

But this alone wouldn't show anything on the screen since it doesn't know how to draw the circle on the screen. For that we have to set some attributes on the `circle` element like:

- the `cx` attribute, which defines the center of the circle in the `x-axis` or the x-coordinate.
- the `cy` attribute, which defines the center of the circle in the `y-axis` or the y-coordinate.
- the `r` attribute stands for radius, which defines the length of the radius for the circle to draw.

So it may look like this,

```html
<!-- Create circle in SVG -->
<svg>
  <circle cx="30" cy="30" r="30" />
</svg>
```

So in the end, we will have a circle drawn to the screen like this,

![circle svg](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yvo0e93ztsh35irr8wh8.png)

And we have drawn a circle successfully using SVG in HTML. Yay 🎊!

See the above code live in [JSBin](https://jsbin.com/yunugugovi/2/edit?html,output).

That's all 😃!

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

---
Demo Day!
Tags: devjournal, womenintech
Published: 2021-06-16 23:55:19

Last month my fellowship with CodeCollab came to an end. It was a great opportunity to grow as a developer. The fellowship was full of learning.

I collaborated with a diverse team. We all gained experience not only working remotely – quite useful nowadays – but also working in different timezones (9 hours apart).  We used GitHub as our collaboration tool. We used GH to keep track of the code and as a task manager. We had all the tasks, features, and bugs we needed to take care of and we held most of the discussions about them there. 

I learned how to prioritize tasks and manage workloads.
I also learned how to be confident working with the tech stack that I wasn’t familiar with. It was intimidating at first, but then I realized that all the frameworks have something in common. 

I also got to experience the power of testing. It became one of my favorite parts of the development process. I learned how to give empathetic feedback and receive feedback with grace. It was difficult to review someone else’s work at first, but it became easier with more experience. I learned how to take ownership of the App as well. 

We finished our fellowship with Demo Day. It was a great way to show a tech community what we had developed and how much we had learned and grown from the experience. I most appreciated how much you can learn from a team with many different backgrounds and experiences.

Now is to the next adventure!

Cheers! 


Photo by <a href="https://unsplash.com/@ninjason?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Jason Leung</a> on <a href="https://unsplash.com/s/photos/celebration?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>
Managing multiple emails for git across different computers
Tags: git, config
Published: 2023-05-31 01:48:21

---
title: Managing multiple emails for git across different computers
published: true
date: 2021-06-16 23:50:00 UTC
tags: git, config
canonical_url: https://hedy.tilde.cafe/posts/multiple-emails-git/
---

Cross-posted from: https://hedy.tilde.cafe/posts/multiple-emails-git/

—


As someone who code on multiple machines to work on different projects, I like to commit with different emails.

I don’t know how everyone else handle different emails in .gitconfig _and_ track dotfiles in a git repo at the same time, but here’s the solution I’ve come up with.

First, I have a global ~/.gitconfig with the default user email and some other global settings (by global I mean same cross different computers I work on).

```gitconfig
# ~/.gitconfig
[user]
name = Default Name
email = me@default.email
```

Then for each machine I have a ~/.gitconfig-local file which can override some settings just for that machine, such as email, signing key, editor, etc.

```gitconfig
# ~/.gitconfig-local
[user]
email = me@special.email
```

Back in the global ~/.gitconfig, I have this snippet that tells git to also look for configuration in my ~/.gitconfig-local:

```gitconfig
# ~/.gitconfig
[include]
path = ~/.gitconfig-local
```

Here, I can have ~/.gitconfig tracked in my dotfiles repo, but I do not have ~/.gitconfig-local tracked. This way, I can put anything I like specific to a particular machine in the ~/.gitconfig-local, as well as SMTP settings such as password, which you wouldn’t want to end up in a public git repo.

As to setting it up on a new machine, I have a setup script in my dotfiles repo that creates an empty ~/.gitconfig-local. I use this same method with fish configs – global config and a local config, you can have a look at them in my [dotfiles repo](https://github.com/hedyhli/dotfiles).
Dynamic Model Referencing with Mongoose 
Published: 2021-06-16 23:35:53

So, I had a mongoose schema that referenced multiple collections. I wanted a situation where I could populate the schema from these collections depending on the property value in the document. Did I confuse you? Oh, my bad, I'd give you a logical example.
Say we have a comment schema, and a user can comment on a blog post and a product. How can we populate the schema with the blog post comments or product comments programmatically? Well, now you see what I mean, right?.
It appears there is something called refPath. The refPath option is a more sophisticated alternative to ref. If ref is just a string, mongoose will always query the same model to find the populated sub documents. With refPath, you can configure what model Mongoose uses for each doc. It automatically instructs mongoose to look into an 'onModel' property to find the correct model to populate. For example, let's say we have a comment schema like so

```
const commentSchema = new Schema({
  body: { type: String, required: true },
  on: {
    type: Schema.Types.ObjectId,
    required: true,
    refPath: 'onModel'
  },
  onModel: {
    type: String,
    required: true,
    enum: ['BlogPost', 'Product']
  }
});

```
Notice the property 'onModel'?. It defines the name of our models "BlogPost" and "Product" referenced in the schema like so`refpath:'onModel'`.

Now, Let's create our models and add some data

```

// create models
const Product = mongoose.model('Product', new Schema({ name: String }));

const BlogPost = mongoose.model('BlogPost', new Schema({ title: String }));

const Comment = mongoose.model('Comment', commentSchema);

// add data to collections
const book = await Product.create({ name: 'The Count of Monte Cristo' });

const post = await BlogPost.create({ title: 'Top 10 French Novels' });

const commentOnBook = await Comment.create({
  body: 'Great read',
  on: book._id,
  onModel: 'Product'
});

const commentOnPost = await Comment.create({
  body: 'Very informative',
  on: post._id,
  onModel: 'BlogPost'
});


``` 

We can query the comment schema, populate it with the data of a particular model we specified like so

```
const comments = await Comment.find().populate({ path: "BlogPost"})

```
when you log comments, you should see something like this

```
// [ { _id: ....., on: { title: 'Top 10 French Novels' } }]

```
Cool, init? I hope it helps someone out there. Happy coding.