teleren/devto huggingface dataset:
What is the difference between Interfaces vs Types in TypeScript?
Published: 2023-03-28 00:43:11

The difference between types and interfaces in TypeScript used to be more clear, but with the latest versions of TypeScript, they’re becoming more similar.

Interfaces are basically a way to describe data shapes, for example, an object.

Type is a definition of a type of data, for example, a union, primitive, intersection, tuple, or any other type.

some Differences in some topics:

1-Functions:
Both can be used to describe the shape of an object or a function signature. But the syntax differs.

Interface 
interface Point {
  x: number;
  y: number;
}

interface SetPoint {
  (x: number, y: number): void;
}

Type
type Point = {
  x: number;
  y: number;
};

type SetPoint = (x: number, y: number) => void;

2-Declaration merging
Unlike a type alias, an interface can be defined multiple times, and will be treated as a single interface (with members of all declarations being merged).
----------------------------------------------------------------
3-Extends and Implements:
In TypeScript, we can easily extend and implement interfaces. This is not possible with types though.

Interfaces in TypeScript can extend classes, this is a very awesome concept that helps a lot in a more object-oriented way of programming. We can also create classes implementing interfaces.
----------------------------------------------------------------
4-Intersection (&):

Intersection allows us to combine multiple types into a single one type. To create an intersection type, we have to use the (&) keyword,
type Name = {
  name: “string”
};

type Age = {
  age: number
};

type Person = Name & Age;

The nice thing here is that we can create a new intersection type combining two interfaces, for example, but not the other way around. We cannot create an interface combining two types, because it doesn’t work,

interface Name {
  name: “string”
};

interface Age {
  age: number
};

type Person = Name & Age;

5-Union (|):
Union types allow us to create a new type that can have a value of one or a few more types. To create a union type, we have to use the | keyword,

type Man = {
  name: “string”
};

type Woman = {
  name: “string”
};

type Person = Man | Woman;

Similar to intersections, we can create a new union type combining two interfaces, for example, but not the other way around:

interface Man {
  name: "string"
};

interface Woman {
  name: "string"
};

type Person = Man | Woman;
--------------------------------------------------------------
**Summary of Type Aliases vs Interfaces
Your mileage may differ, but wherever possible, I stick to type aliases for their flexibility and simpler syntax. That is, I pick type aliases except I specifically need features from an interface.

For the most part, you can also decide based on your personal preference, but stay consistent with your choice — at least in a single given project.

For completeness, I must add that in performance critical types, interface comparison checks can be faster than type aliases. I’m yet to find this to be an issue.
🌟 How to Create the Best Portfolio Website to Land a Junior Dev Job 🌟
Published: 2023-03-27 23:20:10

Are you a junior developer looking to land your dream job? Your portfolio website can be the key to unlocking new career opportunities! In this post, we'll go through some tips and tricks to help you create an amazing portfolio website that will impress potential employers.

## 🎨 Choose a clean and professional design

Your website design should be simple, clean, and professional. Choose a color palette that is easy on the eyes and use fonts that are easy to read. Remember, the goal is to showcase your work and skills, not to distract with fancy design elements. Here's an example of a clean and simple design:

```css
body {
  background-color: #f7f7f7;
  font-family: "Open Sans", sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: #333;
}
```

## 🚀 Showcase your best work

Your portfolio website should showcase your best work. Include screenshots or demos of projects you've worked on, along with descriptions of your role and contributions. This is your chance to show off your skills and experience, so make sure you're highlighting your best work.

```html
<div class="project">
  <h2>Project Name</h2>
  <img src="project-screenshot.png" alt="Project Screenshot">
  <p>Description of project and your role.</p>
  <a href="project-demo.html">View Demo</a>
</div>
```

## 📈 Highlight your achievements

Don't forget to highlight your achievements! Did you receive any awards or recognition for your work? Have you contributed to any open-source projects? Mentioning these accomplishments on your portfolio website can make you stand out from other candidates.

### Awards and Recognition

- Winner of the 2021 Hackathon
- Recognized as Employee of the Month for Q2 2022

## 💼 Include your resume and contact information

Make sure to include your resume and contact information on your portfolio website. This makes it easy for potential employers to get in touch with you. You can also include links to your LinkedIn profile, GitHub repository, or other social media profiles.

```html
<div class="contact">
  <h2>Contact Me</h2>
  <p>Email: yourname@email.com</p>
  <p>Phone: 123-456-7890</p>
  <a href="resume.pdf">View Resume</a>
</div>
```

## 🤝 Conclusion

Your portfolio website is a reflection of your skills and experience as a junior developer. By following these tips and tricks, you can create an impressive website that will help you land your dream job. Remember, keep it simple, showcase your best work, highlight your achievements, and make it easy for potential employers to get in touch with you. Good luck! 👍
stealing css
Tags: webdev, css, opensource, codenewbie
Published: 2023-03-28 00:36:20

I am a visual person, so the first thing I did was recreate the badge list. This has no functionality, but I was able to import an icon and make it look pretty much exactly like the object we're duplicating. The next step is to add the drop down with a toggle. Originally, I used snipCSS to get a basic idea of how to build the object in the CSS, and I customized it accordingly. Here it is below: 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ivdajqr6pqyp75zy1nq8.PNG)

I know the next step is adding the drop down toggle. There is a lot I can steal from Project 1's card such as the details and summary tags. I just have to think about how I want to layer it in. Whatever container the details and summary tags is in will need to expand with the information hidden. The information will also need to be modifiable through a slot so it can be change to fit the needs of the user. 

Currently, my partner is working on the search bar. I feel like that will be the hardest part. Once everything is sketched out visually, we will need to start working on the more technically sides of things to get the API working and actually make the page have functionality. 

I know this is super short, but the main gist of the past week was laying everything out the way we know how to. 

https://github.com/lizblake/badge-list
{% embed  https://open.spotify.com/track/0zqPcK1dx9BZ3NQv51UBFK?si=86841c6c61d84b3f %}
"ChatGPT" locally for everyone
Tags: webdev, chatgpt, vue, javascript
Published: 2023-03-28 00:35:52

https://github.com/BenHerbst/Dalaix

Hello guys, I saw a very interesting project on GitHub a few days ago ( Dalai ) that uses this language model LLaMA or Alpaca to create a local web server with something a bit like "ChatGPT".

As Dalai needed lot of stuff to set up, python, git, npm, node, ...
I decided to just create a simple installer with Electron.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ks4v1gnl013s4ihus06i.png)


You just fill out a form and press install.
That's all. Dalai gets installed.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4o7md1u2ize9ws1un5wu.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1jkvep95mvssfzhws40q.png)


On top of that, I implemented start menu entries for Starting and Stopping Dalai. Awesome. Even autostart.

I created the whole project with Vue.js, Bootstrap and Electron.
If you like it, please check it out, try it, file issues, and please give me a star on GitHub. 🌟

Thank you guys! ❤

This is actually my first Electron project, while I did Vue.js already in past like at my personal homepage [https://www.benherbst.de/](https://www.benherbst.de/)

Electron was a great experience, and I am going to improve the app and add support for Linux and OS X too. Also add dark mode and a whole management console. Expect great new features!

I am currently 14 years old, you can check out my other GitHub projects too: https://github.com/BenHerbst/

Happy Hacking and have a good day!
Bye bye create-react-app, Hello Next.js and Vite!
Tags: react, beginners, codenewbie, nextjs
Published: 2023-03-28 00:09:11

As we should all know by now (all that work with React), on March 17th, the React team launched their new website with documentation. I received the news the same day but, like many other people (I suppose), I didn't pay much attention to it.

The next day, I was practicing with a friend how to initialize a React project for an event we had the following week. Usually, I needed to repeat the process two or three times until I got it right with GitHub and everything. A reminder that I am pretty new to React is in order. Usually, I used create-react-app by recommendation of the coaches who guided me during the Laboratoria boot camp. On my first try, I got an install error, so I decided to search for how to solve it. I ended up on the create-react-app GitHub page where I saw the same issue published a week before by another user. So, I decided to post inside the same issue that I had the same error that day. To my surprise, the kind user responded to me and informed me that create-react-app was no longer recommended by the new documentation launched the day before, which I didn't read! He gave me some options, but of course, I needed to see for myself.

As it was Friday afternoon by this point, I just complained a little (for the pleasure of it mainly) and decided to get to work and learn the newly recommended options to substitute create-react-app.

On Monday, I put myself to work. I chose to learn two methods to create a new React project: Next.js and Vite. As it happened, Vite was incredibly fast and easy to use, and I got it running on my first try. Then, I took a look at Next.js and LOVED IT! It is so organized and structured and is not difficult to grasp. So, I am hands-on learning Next.js. As for the event, we used Vite, and everything went smoothly.

Moral lesson: Read the documentation of the technologies you are using frequently. And if you know that there is a new one, even more so!
🎒 Bringing Back Gitk on macOS
Tags: unix
Published: 2023-04-22 19:28:07

---
title: 🎒 Bringing Back Gitk on macOS
published: true
date: 2023-03-28 00:00:00 UTC
tags: Unix
canonical_url: https://bstefanski.com/gitk-on-macos
---

In today's blog post, let's talk about Git GUIs! As someone who has always stuck to the command line and git aliases for Git adventures, it may be surprising to find out there's an instance where even I can't resist the charm of a good ol' GUI! And that's when casually browsing the Git tree to check out the changes made and where they've been sprinkled.

In the past, the built-in Git tool called gitk was used for this purpose. But it seems like in the latest versions of macOS, it's not included by default, so a little extra effort is needed to get it back.

To bring `gitk` back into action, just run the following commands:

```

brew update 

brew install git

brew install git-gui

```

And voilà! The `gitk` command should be up and running, ready to help navigate that Git tree with ease.
TS: Next Level Index Signatures Inside Interfaces and Types
Tags: javascript, webdev, typescript
Published: 2023-03-27 23:36:07

With Typescript we can make our interfaces flexible as to what kind of properties it will accept. Why would this be helpful you may ask, well there are various situations where we need to define the TS compiler to more open to other properties besides the ones defined in the interface. These would include but not limited to:

- The interface will have more properties than is reasonable to define.
- We intend to access the properties dynamically via bracket notation `myObj[value]`.

So lets take a look how this can be done

```ts
interface Pet {
  // allows any property value of type string
  // what if we want more control over possible properties
  [key: string]: string
}

const myPet: Pet = {
  // all valid values
  // what if we have a general rule about our props naming convention?
  foo: 'foo',
  bar: 'bar',
  kbgyb: '??'
}
```

This approach maybe a bit too flexible and we have a pattern our properties will look

```ts
interface Pet {
  // by adding the prefix 'content-' we can lock down part of the props name
  [key: `content-${string}`]: string
}

const myPet: Pet = {
  'content-type': 'foo', // valid property name
  two: 'bar' // invalid property name as it is not prefixed with 'content-'
}
```

Let us take this another step further and define the different values our interface / type can accept.

```ts
type StringProps = 'type' | 'name' | 'breed';
type StringPet { [key in StringProps]: string }

// same as this 
interface StringPet {
  type: string;
  name: string;
  breed: string;
}

const myPet: Pet = {
  type: 'foo', // valid property name
  two: 'bar' // invalid property name
}
```

By making use of `StringProps` we can reduce the interface from 5 lines of code to 2 also without having to write `string` 3 times as well. This approach can be expanded even further:

```ts
type StringProps = 'type' | 'name' | 'breed' | 'eyeColor';
type StringPet { [key in StringProps]: string }

type IntProps = 'age' | 'weight' | 'legs';
type IntPet { [key in IntProps]: number }

type BoolProps = 'wings' | 'claws' | 'fur';
type BoolPet { [key in BoolProps]: boolean }

// here we intersect two types together into one
// note: types are intersected, not extended like interfaces are
type WholePet = IntPet & StringPet & BoolPet;

// WholePet in the more verbose view looks like this
interface WholePet {
  type: string;
  name: string;
  breed: string;
  eyeColor: string;
  age: number;
  weight: number;
  legs: number;
  wings: boolean;
  claws: boolean;
  fur: boolean;
}
```

The above approach not only brings control over index signature, but can also be used to make our interfaces and types much more scalable. We are not forced to repeat ourselves with primitive types like `string`, `number`, or `boolean`. 

If we want to change the primitive type for one of our properties, we simply move it to appropriate Prop type like from `IntProps` to `StringProps`.

Thanks for reading!
Observer Design Pattern using Javascript
Tags: javascript, designpatterns, programming
Published: 2023-03-27 23:27:29

Design patterns are used to solve the specific problems in the software. Today we will be discussed about **Observer Pattern** in javascript.

**Observer pattern** is a software design pattern in which an object, called subject, maintains a list of its dependencies called observers and notify them automatically of any state changes.

For Example, In react if state changes then components will re-render accordingly. this process is similar to observer pattern functionality.

Below is the sample program for observer pattern.

```

function Subject(){
  this.obeservers=[];
}

Subject.prototype={
  add:function(fn){
    this.obeservers.push(fn)
  },
  remove:function(fn){
    this.obeservers=this.obeservers.filter(fun=>f!=fn)
  },
  notify:function(){
    this.obeservers.forEach(fun=>{
      fun.call()
    })
  }
}
function observer1(){
  console.log("in the observer1")
}
function observer2(){
  console.log("in the observer2")
}
const subject=new Subject();
subject.add(observer1);
subject.add(observer2);
subject.notify() // It will loop through all the observers.
```
In the above example, we have created the Subject constructor function. And it has observers list property, add, delete and notify methods.

**Observers**: It will have no.of observers.
**Add**: It will add observers(functions) to that list.
**Remove**: this method will remove the function from the list based on its argument.
**Notify**: this will notify all the observers in the list.

> Comments and suggestions are always welcome.
Predicting time series data with Forecast
Tags: aws, cloud, awscommunity, 100daysofcloud
Published: 2023-03-27 23:22:55

[86/100] #100DaysOfCloud Today, I predicted future power consumption based on time series data uploaded to S3 in form of csv file using Forecast.

Amazon Forecast is a time-series forecasting service based on machine learning (ML) and built for business metrics analysis.

<u>Use cases:</u>
- Retail and inventory forecasting
 - Reduce waste, increase inventory turns, and improve in-stock availability by forecasting product demand at specific probability levels
- Workforce planning
 - Forecast workforce staffing at 15-minute increments to optimize for high and low demand periods
- Travel demand forecasting
 - Forecast foot traffic, visitor counts, and channel demand to more efficiently manage operating costs

You can try do it by yourself by following the steps from the link below: [GitHub](https://github.com/aaditunni/100DaysOfCloud/blob/main/Journey/086/Readme.md)
What is the profile Creation Site list in SEO
Tags: seo, seosmartkey, forum
Published: 2023-03-27 23:19:16

forum Submission  is a techinque used in search engine optimization (SEO) where a[website]http://www.izmirdee.net/) owner or SEO professionnal submits their website orwebpage to online forums in order to increase visibility and generate baclinks to their site.
This Isn't Your Average Post
Published: 2023-03-27 23:07:19

I wanted to take time out and write a post about my experience so far.

First, name is Mike and I'm a fairly recently retired US Army Special Forces Operator with a highly specialized counter terrorism unit, and Army Ranger. I was in 23 years, went in when I was 18 etc. 

I've been all over the world multiple times in every hostile country you can imagine. I have 17 deployments to Afghanistan and Iraq. So needless to say, most of my adult life has been in combat. 

But when we would be at our FOB(Forward Operating Base) in between missions, I would watch YouTube videos and I seen one that was talking about being a Self-Taught Software Engineer. Well, needless to say, it struck my curiosity.

Now, most guys like me are these Alpha male extrovert types, and we usually go work for some government org that doesn't really exist. Not me, 23 years of fighting is enough and my wife and kids needs me more than the government.

I retired 2 years ago as a Sergeant Major, in one of the most brutal units known to man.

I continued learning this new way of life,everyday I study, I write code, I've learned multiple languages and have done a ton of projects,most of them way below average but I'm trying. 

TypeScript and React are what I'm learning now. 

I just like learning this stuff. Do I want to get a job at some startup or big tech company? Hell no, for one, I'm probably old enough to be a lot of y'all's Dad and I'm not gonna take a job from someone. I don't need to work anymore, but being a freelancer seems more my style

Anyways, forgive my crappy writing but I wanted to let everyone here know, I've learned a ton of invaluable knowledge from these posts, and everyone's input. 

Thanks to all you guys here 

Mike
Smart-Lock
Tags: magangsrdkomatik2023
Published: 2023-02-15 05:26:12

Pada liburan semester kemarin, saya kembali ke Jogja, setelah beberapa minggu melepaskan penat dan melupakan tanggung jawab sebagai mahasiswa, menggunakan bis yang berangkat Pk 12.30 WITA dan tiba di Jogja Pk 02.00 WIB. Ketika sedang menyebrang di Pelabuhan Gilimanuk, saya teringat kunci kos yang masih tertinggal di rumah, sehingga saya meminta orang tua saya untuk mengirimkannya ke kos saya di Jogja. Namun, pengiriman tersebut baru akan tiba setelah beberapa hari, yang dimana terlalu lama karena sebagian besar perlengkapan saya ada di kamar kos. Setelah tiba di Jogja, saya beruntung karena penjaga kos masih terjaga dan ia mempunyai kunci cadangan untuk kamar saya.

Kejadian ketinggalan kunci tersebut juga pernah saya alami sebelumnya, dimana saya menunggu ojek online kurang lebih selama 45 menit untuk mengantarkan kunci saya yang tertinggal di rumah teman. Kejadian-kejadian seperti itu mungkin pernah terjadi pada orang lain juga. Kunci fisik memang memiliki beberapa kekurangan, seperti rentan hilang, tertinggal, ataupun kemalingan. Dengan banyaknya kekurangan tersebut, ada baiknya kita mulai beralih ke smart-lock.

Cara kerja smart-lock ini adalah dengan menggenerasi qr code setelah kita memasukan username dan password pada websitenya, namun tentu saja kita harus mendaftar username dan password terlebih dahulu. Lalu, qr code tersebut akan discan agar dapat membuka pintu. Website tersebut juga dapat mencatat data waktu ketika orang tersebut membuka pintu, dimana cukup berguna untuk memantau pergerakan orang-orang di kos, apartemen, atau rumah.

Tujuan utama dari smart-lock ini adalah mengeliminasi semua kekurangan pada kunci fisik yang sudah disebutkan diatas. Manfaat lain yang didapat dari menggunakan smart-lock ini, yaitu:
- Untuk beberapa tempat yang memiliki peraturan ketat, smart-lock ini dapat memantau orang-orang ketika masuk kamar dan kemungkinan kasus kriminal juga akan semakin mudah terungkap dengan data waktu, username, dll. yang didapat.
- Anda dapat mengaksesnya melalui smartphone, tablet, atau laptop.
-  Anda dapat mengizinkan orang tertentu masuk ke kamar anda jika sedang berada di luar, dengan memberikan username dan password anda.

Meskipun memiliki banyak manfaat, smart-lock ini juga memilki beberapa kekurangan, seperti:
- Memerlukan internet untuk dapat mengkases website
- Sulit direalisasikan di kos pada umumnya karena biaya yang mungkin cukup tinggi, lebih cocok untuk kos ekslusif atau apartemen
Alternatives to Heroku?
Tags: heroku, free, alternative, webdev
Published: 2023-03-27 22:21:27

Hi. I'm studying node+express, and I want to deploy a simple app, consisting in 4 APIs. I'm a student from Brasil, so I can't pay for a service like Heroku right now. 
I was checking fly.io, and they said it is free, but when i have the cli in front of me, it says that I must put a credit card to continue... So I can't deploy my app.
Any suggestions on free services like Heroku used to be? 
I'm using mariadb as my db (4 tables and are small, just for testing) and express.