teleren/devto huggingface dataset:
Which type to use for rest parameter in a function in TypeScript?
Tags: typescript
Published: 2022-01-05 00:00:00

---
  title: Which type to use for rest parameter in a function in TypeScript?
  published: true
  tags: TypeScript
  date: Wed Jan 05 2022 05:30:00 GMT+0530 (India Standard Time)
  canonical_url: https://melvingeorge.me/blog/which-type-to-use-for-rest-parameter-functions-typescript
  cover_image: https://melvingeorge.me/_next/static/images/main-ee6172e55848be2b0acd5f0adf68f8be.jpg
  ---
  [Originally posted here!](https://melvingeorge.me/blog/which-type-to-use-for-rest-parameter-functions-typescript)
  
Rest parameter is written after all the other parameters in a function and uses the `...` (three-dot syntax) syntax. The rest parameter is an array and should have an associated type associated with the array in Typescript.

### TL;DR

```ts
// Function that says greeting to all the peoples
function sayGreetingToPeoples(greeting: string, ...peoples: string[]) {
  peoples.forEach((people) => {
    console.log(`${greeting} ${people}`);
  });
}

// call the function
sayGreetingToPeoples("Hi, ", "Roy", "John", "Lily");

/*
OUTPUT
------

Hi,  Roy 
Hi,  John 
Hi,  Lily 
*/
```

For example, let's say we have a function called `sayGreetingToPeoples`, where the first parameter is the greeting to say to the people and the second parameter is a rest parameter and is considered as the names of the people that need to be greeted.

It can be done like this,

```ts
// says greeting to all the peoples
function sayGreetingToPeoples(greeting, ...peoples) {
  // cool code here
}
```

Now let's assign the type of `string` to the `greeting` parameter and the type of `string[]` to the `peoples` rest parameter.

The `peoples` parameter is a rest parameter and will always be an `array` type and since we need it to be a `string array` we are using the `string[]` syntax.

It can be done like this,

```ts
// says greeting to all the peoples
function sayGreetingToPeoples(greeting: string, ...peoples: string[]) {
  // cool code here
}
```

Let's write the logic for the function inside the function body to greet all the people using a loop.

It can be done like this,

```ts
// says greeting to all the peoples
function sayGreetingToPeoples(greeting: string, ...peoples: string[]) {
  peoples.forEach((people) => {
    console.log(`${greeting} ${people}`);
  });
}
```

Lastly, let's call the `sayGreetingToPeoples` function like this,

```ts
// says greeting to all the peoples
function sayGreetingToPeoples(greeting: string, ...peoples: string[]) {
  peoples.forEach((people) => {
    console.log(`${greeting} ${people}`);
  });
}

// call the function
sayGreetingToPeoples("Hi, ", "Roy", "John", "Lily");

/*
OUTPUT
------

Hi,  Roy 
Hi,  John 
Hi,  Lily 
*/
```

See the above code live in [codesandbox](https://codesandbox.io/s/which-type-to-use-for-rest-parameters-functions-typescript-8w0v1?file=/src/index.ts).

That's all 😃!

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

---
TODO: Add an intriguing title
Tags: codecomments, codestyle, projectmanagement, issuetracking
Published: 2022-02-17 01:03:42

---
title: TODO: Add an intriguing title
published: true
date: 2022-01-05 00:00:00 UTC
tags: codecomments,codestyle,projectmanagement,issuetracking
canonical_url: https://jhall.io/archive/2022/01/05/todo-add-an-intriguing-title/
---

TODO comments.

Ya love ‘em or ya hate ‘em.

But why are they there?

I think there are broadly two categories of TODO comments:

1. Something that needs to be investigated
2. Something you know should be done differently, but you don’t want to take the time right now
3. Ideas for future improvement

The TODO comment stands in as a little bookmark saying “Get back to me and make this decision or do this refactor some day!”

The trouble is… they almost never actually happen. Don’t believe me? Try this little trick on any code base with TODO comments, which will show you the last modified date of every TODO comment in your code base.

```
git grep -n TODO | while IFS=: read i j k; do git blame -L $j,$j $i | cat; done

```

If you actively use TODO comments, _and_ you have zero TODOs, or the oldest is not more than a couple weeks old, I want to hear your secret!

So here’s my challenge to you:

**Stop creating TODO comments!**

Instead, do one of three things:

1. Investigate or fix the thing _right now_. If it’s important, this is the best option.
2. Simply don’t do the thing. If it’s not important, this is the best option.
3. In the truly exceptional cases where something is important, but cannot be done immediately, track it in your issue tracker, not in a TODO comment. That is, after all, what an issue tracker _is for_, right?

* * *
_If you enjoyed this message, [subscribe](https://jhall.io/daily) to <u>The Daily Commit</u> to get future messages to your inbox._
Top 7 Featured DEV Posts from the Past Week
Tags: top7
Published: 2022-01-04 23:31:16

---
title: Top 7 Featured DEV Posts from the Past Week
published: true
description: A round up of the most-read and most-loved contributions from the community this past week.
tags: icymi
cover_image: https://thepracticaldev.s3.amazonaws.com/i/sfwcvweirpf2qka2lg2b.png
---
_Every Tuesday we round up the previous week's top posts based on traffic, engagement, and a hint of editorial curation. The typical week starts on Monday and ends on Sunday, but don't worry, we take into account posts that are published later in the week._  

## The good, bad, and ugly of 7 interview processes

@anabella took on 5-6 interviews per WEEK for 7 different roles in December 2021. They don't necessarily recommend doing the same but they have a ton of helpful takeaways from the experience. 

{% link https://dev.to/anabella/7-front-end-interview-processes-i-did-in-december-2021-5484 %}

## Implementing developer habit trackers

@colocodes shares some thoughts on how you can level up as a dev by tracking your progress. 

{% link https://dev.to/colocodes/measuring-your-progress-in-web-development-why-is-it-important-and-how-to-do-it-55hj %}

## Breaking down JS higher order functions

@atapas has a clear and helpful explanation of higher order functions in JavaScript. Look no further!

{% link https://dev.to/atapas/higher-order-functionshof-in-javascript-explain-like-im-five-402f %}

## WebDev YouTube goals and challenges

@chaoocharles, thanks for giving us some insight into your journey with YouTube in 2021!

{% link https://dev.to/chaoocharles/my-tough-youtube-journey-as-a-web-developer-will-i-quit-youtube-in-2022-2el0 %}

## Etching a growth curve in writing

@balapriya spent a great deal of 2021 working on an admirable goal: writing about tech more. Congrats on truly knocking this out of the park in a way that's inspiring to the rest of us, Bala!

{% link https://dev.to/balapriya/a-2021-reflection-journal-my-tech-writing-journey-learning-and-more-36dg %}

## What exactly is hypescript?

@fromaline can tell you!

{% link https://dev.to/fromaline/hyperscript-the-hidden-language-of-react-3d1f %}


## Breaking down Transmission Control Protocol and Internet Protocol (TCP/IP)

@braide examines the layers of TCP/IP in an accessible way. Great read!

{% link https://dev.to/braide/tcpip-overview-58hg %}




_That's it for our weekly wrap up! Keep an eye on dev.to this week for daily content and discussions...and if you miss anything, we'll be sure to recap it next Tuesday!_
#6 - Incrementer CodeWars Kata (7 kyu)
Tags: javascript, webdev, 100daysofcode, tutorial
Published: 2022-01-04 19:57:54

**Instructions:**

<u>Task</u>
Given an input of an array of digits, return the array with each digit incremented by its position in the array: the first digit will be incremented by 1, the second digit by 2, etc. Make sure to start counting your positions from 1 ( and not 0 ).

Your result can only contain single digit numbers, so if adding a digit with its position gives you a multiple-digit number, only the last digit of the number should be returned.

<u>Notes:</u>
return an empty array if your array is empty
arrays will only contain numbers so don't worry about checking that

<u>Examples:</u>

> [1, 2, 3]  -->  [2, 4, 6]   #  [1+1, 2+2, 3+3]
> [4, 6, 9, 1, 3]  -->  [5, 8, 2, 5, 8]  #  [4+1, 6+2, 9+3, 1+4, 3+5]
>                                        #  9+3 = 12  -->  2


**My solution:**

```javascript
function incrementer(nums) { 
  if(nums == []) return[]
  return nums.map((n,i)=> (i + n + 1)%10)
}

```

**Explanation**
I started with a conditional, if the array is empty it'll return an empty array, if not it'll return the result, for the result I mapped the nums input, taking each number and its index as parameters, then I summed the index + number + 1, I summed one because I have to start counting the postions from 1, so every index needs to be summed one, then to that result I used the % operator so it returns only the remainder of the division and I can get only the second digit of the result because it is divided by 10

Comment how would you solve this kata and why? 👇🤔

[My Github](https://github.com/Cesardlr)
[My twitter](https://twitter.com/cesar__dlr)
[Solve this Kata](https://www.codewars.com/kata/590e03aef55cab099a0002e8)
Day 502 : Practice
Tags: hiphop, code, coding, lifelongdev
Published: 2022-01-04 22:50:58

_liner notes_:
- Professional : Today flew by quick! Got to help out a couple of coworkers. Sat in a meeting for a project where I may get to make some more Web Components. Spent the rest of the day working on a workshop I'll be giving tomorrow. Making sure the demo applications still work and that any copies made function as expected. I also created the slides I'll be using from the outline I put together yesterday. That included getting the images I want to use as well. Pretty full day.

- Personal : Last night I worked on the livestream page for the client side application. I tried a new layout idea where if the page is viewed on a mobile device, the video will float on top, so people can still watch the video even if they have to scroll for the chat or something else. I think it came out pretty cool, but we'll see how it is in practice.

![Overhead view of the Big Sur, CA, USA coastline with green covered cliffs dart out into the ocean and little islands to the side with the waves crashing on the shore.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s9v8fb9qquvewkik3tgf.jpg)

Doing research for my workshop, I think I may have come up with a way to get something working that I've been planning on add to my current side project. Excited to give it a try. Not sure how late I can stay up working on it because I have to get up early for my workshop. We'll see! Wish me luck.

Have a great night!

peace piece
Dwane / conshus
https://dwane.io / https://HIPHOPandCODE.com
{% youtube gu_ZF7Hrzcw %}
The CodeNewbie Challenge Is Returning for 2022 with Exciting New Updates
Tags: codenewbie, announcements, beginners
Published: 2022-01-04 22:21:22

---
title: The CodeNewbie Challenge Is Returning for 2022 with Exciting New Updates
published: true
description: 
tags: codenewbie, announcements, beginners
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9rs81ug2k1chea2txhfh.png
---

## CodeNewbie Challenge 2022 begins on January 31st. [Register for Cohort 1](https://community.codenewbie.org/cnc2022) by January 30th.

---

In early 2020, DEV acquired an incredible, supportive community for early-career software developers and people learning to code called CodeNewbie. 

Since then, we've embarked on many exciting adventures together including two entirely virtual CodeLand conferences and the creation of [CodeNewbie Community](https://community.codenewbie.org): the official home of CodeNewbie built on Forem.

In 2021, we relaunched the **CodeNewbie Challenge** together. This collection of email-based challenges including ("Start Coding", "Code More", "Write More", and "Get a Job") existed long before DEV and CodeNewbie joined forces, but together, we updated it and added in additional support options and a central hub on CodeNewbie Community. Those who participated benefitted from structure, public accountability, inspiration, and ample learning opportunities to reach their goals.

### <mark> We're thrilled to share that we're updating the [CodeNewbie Challenge for 2022](https://community.codenewbie.org/cnc2022) (#CNC2022).<mark>

_**#CNC2022 returns on January 31st. This time, we're making a few changes, including:**_

- A [pre-registration](https://community.codenewbie.org/cnc2022), cohort-based model that allows you to stay in tighter communication with others participating in your chosen challenge
- Updated resources
- A brand new "Learn in Public" challenge that will give you the guidance you need to turn your technical learning journey into a tool for others

If you want to make a change in your career or coding journey, we highly encourage you to [sign up](https://community.codenewbie.org/cnc2022) for Cohort 1 of #CNC2022. 

Learn more, pick your challenge, and sign up for Cohort 1 [here](https://community.codenewbie.org/cnc2022) by January 30th. The challenge officially kicks off on January 31st, 2022. 

---

Cheers to starting to code, coding more, writing more, getting a job, and learning in public with the CodeNewbie Challenge in 2022 ⭐️
Welcome to my website
Tags: webdev, career, programming, motivation
Published: 2022-01-04 21:36:05

I did it!!! My website is live and I'm happy to share it with you all!
I hosted it on [Vercel](https://vercel.com) and you can reach it at the following URL:

[williamiommi.me](https://williamiommi.me)

I consider it other than a personal side project, a place where to share who am I and my beautiful pictures too 😂 😇.
I’m happy with the current status and it is definitely a version 1.0 but I’m already thinking of adding some extra sections soon.

The design is simple and minimal. I’m not a designer, but it was fun using Figma during the design process.

---

## The Stack 

Let's talk about what we have under the hood...

I used [Next.js](https://nextjs.org/) (w/ Typescript) as React framework. I like this product and I thought it was the right place to put my current knowledge into practice. Except for the gallery page, which is Server Side Rendered, all the other pages are statically generated and one of them has Incremental Static Regeneration too.

For styling, I used [Tailwind CSS](https://tailwindcss.com/), and well...it's amazing. I know, this topic could open a discussion about pros and cons but with my personal experience (a.k.a. my 2 cents) and If I see this tool applied in my daily job, I think the pros are greater than the cons.

Apart from these 2 'pillars', for animations I'm using [Framer Motion](https://www.framer.com/motion/), [Lodash](https://lodash.com/) for some utility methods and [react-masonry-css](https://github.com/paulcollett/react-masonry-css#readme) for the gallery grid.

---

### Special mentions

The writing page uses the [api](https://developers.forem.com/api/) provided by dev.to to retrieve all my posts. This is the page that uses Incremental Static Regeneration.

I host my pictures on Google Photos at the moment and the gallery pages are Server Side Rendered.
In the beginning, also these pages were statically generated and optimized with the Image optimization provided by Next. But I had some ‘data usage’ issues with Vercel because of my basic plan, so I removed the Image optimization and switch to SSR because of another issue related to Google Photos. They cache the URLs of every image for 1 hour and then the URL change, so I always need a fresh version of the image.
The cons, of course, is that I have to give up on a fast page load.

Last but (definitely) not least, a special thanks 🙏🏻 to [Lee Robinson](https://twitter.com/leeerob) [Spotify's Snippet](https://leerob.io/snippets/spotify) that I used in the footer with a custom UI. The snippet shows your current song playing on Spotify...Thanks, Lee 😃

---

## What Next?

As mentioned before, I would like to add a few extra sections but apart from that, the idea is to move all the copy to a CMS, improve performance on the gallery section and add also the Italian language, which is my native language 😃.


That's all folks! Thanks for reading!

Ciao / See ya 🤙
DiTalks Ep.2 Lead software engineer on 5 common misconceptions for MVP software development
Published: 2022-01-04 21:28:04

---
title: DiTalks Ep.2 Lead software engineer on 5 common misconceptions for MVP software development
published: true
description: 
tags: 
//cover_image: https://direct_url_to_image.jpg
---

{% youtube UrWG7EAQqvY %}
[week1] Days 2 - Regex !
Published: 2022-01-04 21:07:14

Regular expressions, often shortened to "regex" or "regexp", are patterns that help programmers match, search, and replace text. And in my dev journey I never feel like I need to learn regex, because it seemed so difficult to learn.But on my ride to complete the freeCodeCamp course i need to take this [regex lessons on freeCodeCamp] (https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/#regular-expressions).

---

![Garabato Kid meme](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8ewtm9p6yzxaj5ceq0xu.jpg)

[Garabato Kid
](https://twitter.com/garabatokid/status/1149596346514411521?lang=fr)

---

## My daily code
I have done 13 of the 33 exercise, i have learned the basics of regex and find some ressources to test and getting more info on how to use it . 

## What did i learn ? 
The basic format of a regex is like this : 
`/ expression / flags, i.e /[A-Z]+/g `
You can group your expression by using parentheses `()`, or you can combine them by using logical OR `|`, it's possible to affect the search by using flags

In javascript you have multiple ways to use regex the first one is .test()
```javascript 
let testStr = "freeCodeCamp";
let testRegex = /Code/;
testRegex.test(testStr); // true
```
The second way is to find a matching string with 
.match()
```javascript 
const paragraph = 'The quick brown fox jumps over the lazy dog. It barked.';
const regex = /[A-Z]/g;
const found = paragraph.match(regex); //Array ["T", "I"]
```

Common Regex symbol or flag

| Symbol            | Meaning                                                                |
| ----------------- | ------------------------------------------------------------------ |
| i flag            |the search is case-insensitive|
| g flag            |the search looks for all matches|
| *	            |Match 0 or more characters|
| +	            |Match 1 or more characters|
| [abc]	|Any of a,b or c|
| [^abc]	|not a,b or c|
| [a-z]	        |Any letter from a to z|
| [a-c2-8]	        |Any letter or number from a to z or from 2 to 8 |


## Usefull Ressources 
- [regexr](https://regexr.com/)
- [regex101](https://regex101.com/) really similar to regexr
- [MDN Docs](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions) 
- [Regular Expressions (RegEx) in 100 Seconds](https://www.youtube.com/watch?v=sXQxhojSdZM&ab_channel=Fireship) and there [cheatsheet](https://fireship.io/lessons/regex-cheat-sheet-js/) 
- [iHateRegex](https://iHateRegex.io) you can find a article on [dev.to](https://dev.to/geongeorge/i-hated-regex-so-much-that-i-made-ihateregex-io-1ih4) about it 

Thank you for reading this post, hope you loved it 😀

PS:

- if you see any spelling or grammar mistakes, can you notify me (I am still improving my English) ? thank you !
- if you have any tips for improving my post feel free to comment on the post
What is your favorite web dev text editor, and why?
Published: 2022-01-04 21:04:11

It is fast. I've got to see you using Sublime or Atom with the same speed and precision.

Navigate to arbitrary file. Fraction of a second
Navigate to arbitrary line. Fraction of a second.
Find a function(or where it is called). Second to two. (Ctags)
Actually, when I an trying to restore my flow of mind(context of a system, I am working on), I navigate very fast between files. To an outsider it might look like this. My monitor is constantly flickering, and I am hitting keyboard like some crazy hacker from a hollywood movie. When, actually, I am using keybindings to jump between files lines and functions to remember what is doing what.
It is here forever. Sublime will pass, as will Atom, or Light Table, or yet another editor. 

It is Open Source.[how to reheat crab rangoons](https://fungrills.com/how-to-reheat-crab-rangoon/)

Yes, Emacs keybindings exist almost everywhere. Some of them quite good, some are not so.

The thing with Emacs is that you are in control of your system. You can write function and modify your editor behaviour just in place. Moreover, it contains amazing help system, that pretty much, describes everything without need to use Google.

If you will follow my advise. Please, I beg you, switch Caps and Control. It is first thing to do when you are starting with Emacs.
Phoenix LiveView Tailwind CSS Modal
Tags: tailwindcss, liveview
Published: 2022-01-04 20:59:45

It took me a while to figure out how to style a modal window with Tailwind CSS (had to Google how to center a div), so want to share what I've got for anyone who will be searching for LiveView Tailwind CSS Modal styles.
```elixir
def modal(assigns) do
    assigns = assign_new(assigns, :return_to, fn -> nil end)

    ~H"""
    <div id="modal" class="overflow-y-auto fixed inset-0 z-10 pt-6 phx-modal" phx-remove={hide_modal()}>
      <div class="flex justify-center items-end px-4 pt-4 pb-20 text-center sm:block sm:p-0">
        <div class="fixed inset-0 transition-opacity" aria-hidden="true">
          <div class="absolute inset-0 bg-gray-200 opacity-75"></div>
        </div>

        <div id="modal-content" class="inline-block overflow-hidden px-4 pt-5 pb-4 text-left align-bottom bg-white rounded-lg shadow-xl transition-all transform phx-modal-content sm:my-8 sm:align-middle sm:max-w-lg sm:w-full sm:p-6" role="dialog" aria-modal="true" aria-labelledby="modal-headline"
            phx-click-away={JS.dispatch("click", to: "#modal-close")}
            phx-window-keydown={JS.dispatch("click", to: "#modal-close")}
            phx-key="escape">
          <div class="relative">
            <%= if @return_to do %>
              <%= live_patch "✖",
                id: "modal-close",
                to: @return_to,
                phx_click: hide_modal(),
                class: "inline-flex absolute right-0 text-gray-400 bg-white rounded-md phx-modal-close hover:text-gray-500 focus:outline-none"
                %>
            <% else %>
             <a id="close" href="#" class="inline-flex absolute right-0 text-gray-400 bg-white rounded-md phx-modal-close hover:text-gray-500 focus:outline-none" phx-click={hide_modal()}>✖</a>
            <% end %>
          </div>
          <%= render_slot(@inner_block) %>
        </div>
      </div>
    </div>
    """
  end
```

And this is how it looks now.
![Modal example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kvey1cmdt0hhif1wue39.png) 

**Tested with:** phoenix_live_view: 0.17.5, tailwindcss: 3.0.2.