teleren/devto huggingface dataset:
Typescript - Tips & Tricks - Readonly Array
Tags: typescript, webdev
Published: 2021-03-10 07:21:31

```ts
function sortAndReverse(list: number[]): number[] {
  return list.sort().reverse();
}

const list = [1, 4, 5, 2];
sortAndReverse(list);
console.log(list);
```
What's the result of the final console log?
1. [ 1, 4, 5, 2 ]
2. [ 5, 4, 2, 1 ]
3. [ 2, 5, 4, 1 ]

Unfortunately, the correct answer is the second one.
![Unfortunately](https://media.giphy.com/media/XHwN2ViWQR6vmBoRdd/source.gif)

In this stupid example, you can see how some array methods can have some side effects. The sort and the reverse methods return a new array with the result but also they change the initial array.
Typescript can help us to prevent these side effects using read-only arrays.
The read-only arrays identify the methods that modify the initial array and raise an error when you call these methods.
But now, how can you use the read-only array? It's easy guys, you need to indicate the readonly modifier before the type of your array.
So, the previous example can change in this way
```ts
function sortAndReverse(list: readonly number[]): number[] {
  return list.slice().sort().reverse();
}

const list = [1, 4, 5, 2];
sortAndReverse(list);
console.log(list);
```
In this case, the _sortAndReverse_ method returns as result "[ 5, 4, 2, 1 ]" like in the first example, but more important is that the final console log returns "[ 1, 4, 5, 2 ]", the initial value of the "list" array.
If in this case, you try to remove the "slice" method, you can see how typescript indicates an error (Property 'sort' does not exist on type 'readonly number[]'), and it helps you to prevent strange side effects.

It's all for today!
Bye Bye Guys!
Creating segment tabs in Ionic
Tags: ionic, ios, android
Published: 2021-03-10 07:20:38

Segments, we see them everywhere. For example, the Twitter app Notification tab has two segments (All/Mentions).

Today I'll be showing you how you can create this in your Ionic app.

It will look like this:

![Ionic segmented tabs](https://cdn.hashnode.com/res/hashnode/image/upload/v1614928598904/fqglLbNjx.gif)

## Adding the segment tabs to an Ionic app

Let's start from out [Ionic starter](https://daily-dev-tips.com/posts/our-first-ionic-app/) again. You can find the code on [GitHub](https://github.com/rebelchris/ionic-app).

We will add the segment on the `tab1.page.html`.

```html
<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title> Tab 1 </ion-title>
  </ion-toolbar>
  <ion-toolbar>
    <ion-segment [(ngModel)]="type">
      <ion-segment-button value="all">
        <ion-label>All</ion-label>
      </ion-segment-button>
      <ion-segment-button value="mentions">
        <ion-label>Mentions</ion-label>
      </ion-segment-button>
    </ion-segment>
  </ion-toolbar>
</ion-header>
```

In our header, we add a second toolbar. The second toolbar will show up below the title page and include two segments.
These segments are linked to the ngModel (type), with which we'll show the correct content.

For now, we get the following result:

![Ionic segment tabs](https://cdn.hashnode.com/res/hashnode/image/upload/v1614928021736/vvMjPI2Jj.gif)

That's pretty cool, but it doesn't do anything yet.
Let's open up the `tab1.page.ts` and add some technical functionality.

```js
export class Tab1Page {
  type: string = 'all';
}
```

We set the `type` variable to "all" initially, with switching between the segments, the `type` variable will be changed.

Now we can head back to our `tab1.page.html` and add some content sections.

```html
<ion-content [fullscreen]="true">
  <ng-container [ngSwitch]="type">
    <ion-list *ngSwitchCase="'all'">
      <ion-item>Nathan liked your message</ion-item>
      <ion-item>Hashnode retweeted yuor article</ion-item>
      <ion-item>Marcus liked a message you're mentioned in</ion-item>
    </ion-list>
    <ion-list *ngSwitchCase="'mentions'">
      <ion-item>Paul mentioned you in this article</ion-item>
      <ion-item>Adrian mentioned you in a comment</ion-item>
    </ion-list>
  </ng-container>
</ion-content>
```

This will switch the type, making use of a container. The container is not rendered, so ideal for making switch cases like this.

Inside we have two ion-lists that show the respective items.
And that's it. We now have a segmented page which is super useful to show large datasets.

You can find today's code on [GitHub](https://github.com/rebelchris/ionic-app/tree/segments).

### Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on [Facebook](https://www.facebook.com/DailyDevTipsBlog) or [Twitter](https://twitter.com/DailyDevTips1)
Deconstructing a Bitcoin Transaction
Tags: blockchain, cryptocurrency, money, bitcoin
Published: 2021-03-10 13:35:34

---
title: Deconstructing a Bitcoin Transaction
published: true
date: 2021-03-10 07:20:26 UTC
tags: blockchain,cryptocurrency,money,bitcoin
canonical_url: https://medium.com/coinmonks/deconstructing-a-bitcoin-transaction-828f648715ac
---

[![](https://cdn-images-1.medium.com/max/2600/0*02JGBLKm8svcOUQ-)](https://medium.com/coinmonks/deconstructing-a-bitcoin-transaction-828f648715ac?source=rss----721b17443fd5---4)

Understanding transactions is key to understanding bitcoin

[Continue reading on Coinmonks »](https://medium.com/coinmonks/deconstructing-a-bitcoin-transaction-828f648715ac?source=rss----721b17443fd5---4)
You don't know JS: Summary - Chapter 1 and Chapter 2 (this and Prototype)
Tags: javascript, frontend, webdev, functional
Published: 2021-03-10 07:19:00

1. The best approach to avoid the use of anonymous functions altogether requires a self-reference, and instead uses a named function. 

2. using call(..), we ensure the "this" points at the function object itself.

3. Internally scope is like an object with properties for each of the available identifiers. but the scope "object" is not accessible to javascript code. It's an inner part of the engine's implementation.

4. "this" is not an author time-binding but a run time-binding.

5. When a function is executed, a context is created known as execution context.

6. "this" is a binding made for each function invocation, based entirely on its call-site.

7. Boxing - If you pass a simple primitive value (boolean, num, or string) as "this" binding, the primitive value is wrapped in its object form.

8. A constructor in JavaScript is just a regular function that happens to be called with a new operator.

9. Four rules of determining "this"
• If the function is called with "new", then it's a new binding.
• function called withcall or apply and encoded in hard binding, then it is an explicit binding.
• function with a context object will fall under the implicit binding category
• Otherwise, default binding.

10. Arrow functions do not use these rules, these are the functions that use the "fat-arrow" operator "=>". The lexical binding of an arrow function can not be overridden.

11. If you pass null or undefined as a parameter to call or apply or bind, then those values are ignored, and instead default binding rule applies. This is only done when you want to spread an array to be passed as arguments to functions. Though this can cause side effects, hence we use a DMZ(demilitarized zone) object, which is represented by ø (phi) stating the null, but in a better way.

~~~
$ var ø = Object.create(null)
$ foo.apply(ø, [2,3])
~~~

--------------------------------------------------------------
If you want similar content, then visit https://iaminnovativecoder.com

Follow me on : 
YouTube - https://youtube.com/InnovativeCoder
Instagram - https://instagram.com/innovative_coder
TIL Godot Node Stylin'
Tags: todayilearned, gamedev, godot
Published: 2021-03-10 06:22:04

2021-03-09

*Did you know...Godot works in the [browser](https://godotengine.org/editor/latest/godot.tools.html)!*

So I'm working with Graphs in Godot and a default GraphNode looks like this.
![Displays the look of a Default Node in the GraphEdit control](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5kbhz68e17tq6an2mq1f.png)
I'm not a fan of this default visual but fortunately it can be customized directly in the GraphNode itself.
![Displays the Custom feature and options](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1w56uom5nsykdkeoazxa.png)
With some creative edits, it's possible to make something unique for one's own projects. Here, I added a StyleBoxFlat to the Frame and changed the color, border radius and shadow values. I also made the Title font color transparent. 
![My Customized Result](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/adl4xr1buusf9j4wrj43.png)
I imagine a better way to customize GraphNodes involves Themes but I'm yet to learn this feature. Of course, the day I learn it, there will be a TIL entry :)
Code Newbie CSS Art pt.3
Tags: css, html, beginners, 100daysofcode
Published: 2021-03-10 04:23:25

It's been soooo long! Happy New Year and I hope you all are staying safe! My goal is to bring you more CSS Art tutorials and other blog posts this year, on a regular schedule. 

![Buck Tooth Smiley Face](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lxvxyqm8ei6hfx5i1d3z.jpeg)

## 2) HTML
```
<div class="head">
  <div class="l-eye"></div>
  <div class="r-eye"></div>
  <div class="mouth">
    <div class="l-teeth"></div>
    <div class="r-teeth"></div>
  </div>
</div>
```

## 3) CSS
```
.head {
  background-color: yellow;
  width: 500px;
  height: 500px;
  position: relative;
  border-radius: 50%;
  left: 25%;
  top: 80px;
}

.l-eye {
  position: absolute;
  background-color: black;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  top: 100px;
  left: 20%;
}

.r-eye {
  position: absolute;
  background-color: black;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  top: 100px;
  right: 20%;
}

.mouth {
  position: absolute;
  background-color: black;
  width: 200px;
  height: 100px;
  top: 300px;
  left: 30%;
  border-bottom-left-radius: 50%;
  border-bottom-right-radius: 50%;
}

.l-teeth {
  position: absolute;
  background-color: white;
  width: 40px;
  height: 30px;
  left: 29%;
}

.r-teeth {
  position: absolute;
  background-color: white;
  width: 40px;
  height: 30px;
  right: 29%;
}
```

#### Live view of the code and image [here](https://codepen.io/wanderingdev/pen/poNQpVp)

I hope you like this silly little face. It's been a while since I created any CSS Art so it's pretty simple, but I like him. The next few images will be even better! I want to build up to creating single-div CSS images. Please share resources and links to your own CSS art.

In my previous post, I share lots of resources for getting started in CSS art check it out [here](https://dev.to/smonetc/code-newbie-css-art-10bl)!
Makerwork 007 has an interview with Antonio of theLIFEBOARD a life habit planner
Tags: python, tracker, makerwork
Published: 2021-03-13 07:38:11

---
title: Makerwork 007 has an interview with Antonio of theLIFEBOARD a life habit planner
published: true
date: 2021-03-10 04:00:06 UTC
tags: vue,python,tracker,makerwork
canonical_url: https://makerwork.netlify.app/posts/makerwork007/
series: Makerwork
---

Hey Makers! 👋 

Welcome to **Digest 007** of the newsletter. Our featured maker, Antonio, started with an idea to build a new year resolutions web app to scratch his own itch. 🏆 

For many of us, nine months spent quarantining at home has completely erased the elaborate routines and habits we had carefully constructed in the pre pandemic. So it’s unsurprising that as we turn to 2021, many people are seeking ways to develop new habits and bring some structure and routine back into their largely confined lives.

A new survey from CIT Bank found that 43 percent of Americans are setting new year resolutions for 2021, compared with 35 percent who did the same for 2020. Resolutions focused on habits such as exercise and self-care are especially popular.

While we all start a new year with good intentions that we’ll reach our goals, however, few of us stick to these resolutions past January. A study by the University of Scranton found that just 40 percent of resolution makers are still keeping their resolutions six months in.

That’s where habit tracking apps want to help you. Unlike logging apps, habit formation apps are a slightly different breed. They’re aspirational. Habit apps are less about distilling your life into a series of data points and more about becoming your ideal self.

A habit tracker can make goals feel more attainable, boosts your confidence, keeps you focused and helps you stay motivated. theLifeBoard app does all these and more by following a simple methodology: plan, execute, analyze, improve, repeat.

After all who can give a better testimonial of **theLifeboard** app than the author himself. Antonio has been following this methodology for almost four years now with great results. ⭐️

If you like to know about the maker, I interviewed Antonio of **theLifeboard** in this week's roundup of makers for makers. This week's issue also includes **BeeWare** a python suite to write once and deploy everywhere, and an open source powerful yet simple to use screenshot software **Flameshot**.

[SUBSCRIBE FREE](https://makerwork.substack.com)

*The Makerwork newsletter includes interviews with makers featured in the email sharing their insights about open-source, their product, blog and work.*
Nevertheless, I Coded in 2021 and Moms can be anything they want to be!
Tags: wecoded, womenintech, choosetochallenge
Published: 2021-03-10 03:47:43

## Journey

For the past three years, I've been a stay-at-home mom.
Now I'm hoping to get back to full-time work soon.

"Parenting is taught enough🥺"
![Parenting is taught](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u8422y7m5f7xm5xw1j5h.JPG)


Before my daughter was born, I was doing  HTML/CSS UI development.
Now I'm struggling to keep up with a mordren front-end frameworks.

In 2020, I took the ES6 and React.js course done by Wes Bos. (Thanks! you taught me how much fun coding can be.)

I've started applying for jobs, but I didn't get any good responses...

In 2021, I started taking Vue.js and Typescript courses for more opportunities, since somehow many companies in Japan are using Vue.

In March 2021, currently I am at a one-month-trial contract at a company as a front end developer.🎊🎊🎊


## My most recent achievement was…
I Joined in the [chingu.io](https://chingu.io/) Team Development Challenge.

https://worldwide-weather.netlify.app/

>With this weather app you can get the weather forecast for the whole week for any city in the world. Simply search for the city you want to get the forecast for and it will display the forecast for today in detail and a summary for the rest of the week.



## My next goal

I'm facing impostor syndrome. I kept thinking that "this job is too difficult for me."
my next goal is to overcome the fear and show myself.
so I need to keep learning to keep me healthy minded😳🙌
JavaScript Closure 🎆
Tags: javascript, closure
Published: 2021-03-10 02:56:56

Hey mates on the internet  (●'◡'●)

Now, it’s time to talk about closures.

### What is Closure?
A closure is a function that has access to its outer function scope even after the outer function has returned. This means a closure can remember and access variables and arguments of its outer function even after the function has finished.

Before we dive into closures, let’s first understand the lexical scope.
***

### What is a Lexical Scope?
A lexical scope or static scope in JavaScript refers to the accessibility of the variables, functions, and objects based on their physical location in the source code. For example:

````javascript
let a = 'global';
  function outer() {
    let b = 'outer';
    function inner() {
      let c = 'inner'
      console.log(c);   // prints 'inner'
      console.log(b);   // prints 'outer'
      console.log(a);   // prints 'global'
    }
    console.log(a);     // prints 'global'
    console.log(b);     // prints 'outer'
    inner();
  }
outer();
console.log(a);         // prints 'global'
```

Here the `inner` function can access the variables defined in its own scope, the `outer` function’s scope, and the `global` scope. And the `outer` function can access the variable defined in its own scope and the `global` scope.

So a scope chain of the above code would be like this:
````javascript
Global {
  outer {
    inner
  }
}
```

Notice that `inner` function is surrounded by the `lexical scope` of `outer function` which is, in turn, surrounded by the `global scope`. `That’s why the inner function can access the variables defined in outer function and the global scope.`

#### Quiz — Test Your Knowledge

What would the below code print out?


````javascript
var name = 'John'

function greet (name) {  
  return (function () {
    console.log('Hello ' + name)
  })
}

var sayHello = greet(name)

name = 'Sam'

sayHello()
```

The answer is Hello John.

Yes, even though we altered the value of name to 'Sam' before we invoked sayHello. It’s as if, the value of name was captured before it was reassigned to 'Sam'.

Yes, even though we altered the value of name to 'Sam' before we invoked sayHello. It’s as if, the value of name was captured before it was reassigned to 'Sam'.

That is exactly what happened — this is closure in action.
The PWA Link Network connect PWA
Tags: pwa, community, network
Published: 2021-03-10 02:40:22

Let's scale together! Under that Slogan started the [PWA Link Network](https://pwa.ninja/pwa-link-network) in this week. The PWA Link Network project founded from 🐱‍👤 PWAninja, have a solution to share the Traffic from PWA to PWA.

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

The visitors from Websites in the PWA Format mostly like it to use services in the PWA Format. That kind of people look around to found new PWA all the time. We can help them now with the PWA Slider Widget, from the PWA Link Network and fix two problems. Help PWA owners to find new clients and help People to found easy new PWA Solutions.

The PWA Slider Widget is flexible, with transparent background and comes in design from 50x50 to 500x500. The PWA Slider Widget shows only the Icons from participate PWA. Should the PWA Link Network grow, After 100 entries we want implement filtered PWA Slider Widgets on language on market basis. You can look the Embed PWA Slider Widget on the PWAninja project website.

It's not so easy to gain the Traffic for an New PWA project, the PWA Link Network want fix that problem now.

# It's easy to contribute: 

1. Submit your PWA (URL and Logo)
2. Embed the PWA Slider Widget on your PWA
3. Waiting of new visitors

## PWA Services from PWAninja

1. [PWA Directory](https://pwa.ninja/directory) (Submit your PWA for Free)
2. [PWA Wall](https://pwa.ninja/pwa-wall) (Tweet Wall with PWA News)
3. PWA Chat (to connect PWA owners)
4. Big PWA Link List
5. PWA Material (Designs for Icons and more)
6. [PWA Link Network](https://pwa.ninja/pwa-link-network) (NEW)

The PWA Link Network is a free service. 

Everyone can use and Embed the PWA Slider. We look around for Blog partner, they Embed the PWA Slider Widget. All Blog partner get an entry on the project website.

More information on [PWA.ninja](https://pwa.ninja/) / [🐱‍👤.ga](https://xn--5o8hgd.ga)
Fail Before Starting
Tags: productivity, discuss, todayilearned
Published: 2021-03-10 01:50:01

The title above looks familiar to us, and I think the more appropriate language is "_First Impressions_" or "_How to Get First Impressions_".

Ok, here will discuss how to work in a team with a predetermined time-line and don't waste a lot of time.

I am a freelance programmer who has worked for more than 6 years. Here I want to share experiences from collaboration with a team.

Many beginner programmers combined with senior programmers feel proud and happy to have this opportunity, because they can learn directly and understand what they are facing and will be resolved together with more experienced people.

Of course we all learn from experience, whether it's personal experience or the experience of others, right?

However, many of us sometimes forget our responsibilities at work. In the professional world, what we do cannot be carried out on our own and we pride ourselves or even the skills we have when we are in a TEAM.

The fatal mistakes that often occur among novice programmers who join senior programmers are:

## Show off your skills

Ok ... this is interesting, anyone with expertise feels like being recognized. And sometimes not only acknowledged but expect more. For beginners who like to follow technology trends and "MAGIC" in the IT world, don't be proud of joining the seniors. They don't see what they know, but they want to see what you can do to solve a problem quickly and time-efficiently and not add too much burden.

## Senior Syndrome

This often happens among beginners when they join seniors, they feel equal and understand how big work can be done. But they forget the word "_cooperation_" and this becomes a disease for them.

## Read the Briefing Carefully!

With good intentions, beginners want to contribute to their team, but be careful when making contributions or suggestions to a discussion forum, pay attention to the briefings carefully. Don't let what you say on the forum look stupid. If indeed you don't understand the briefing, listen and pay attention carefully.

Anyone want to add? _FYI_ I am writing this in half anger, so maybe what I am writing is not very detailed, because I want to convey it in kind and polite words.