teleren/devto huggingface dataset:
Vue 3 just got me from interested to excited
Tags: vue, javascript
Published: 2020-07-05 12:36:20

Vue 3 has been on my radar for a while, but a recent RFC got me from "interested" to "excited".

I am specifically talking about declaring components.

This is how you typically do it in Vue 2:

```vue
<template>
  <div>{{ hello }}</div>
</template>

<script>
export default {
  data() {
    return {
      hello: 'world'
    }
  }
}
</script>
```

Vue 3 (not released yet) introduces the composition API. This allows you to put the logic together rather than being spread across options.

My first reaction to this was: cool, this will be useful for complex components, but I will probably stick with the old one for cases that don't require it.

After all, this is how the above component would look like:

```vue
<template>
  <div>{{ hello }}</div>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const hello = ref('world')

    return {
      hello
    }
  }
}
</script>
```

Now much changed for this simple component, right? In fact, it got bigger.

---

Now the other day, a new RFC was posted on GitHub. Using "setup", you usually don't need methods, computed, data, and life cycle hooks anymore, so setting up "script" comes with seemingly unnecessary overhead.

So this new proposal allows us to only work using the setup method directly inside `<script>`.

```vue
<template>
  <div>{{ hello }}</div>
</template>

<script setup>
import { ref } from 'vue'

export const hello = ref('world')
</script>
```

> This might look a little alien, but think about it. In Vue 2, we exported an entire object using `export default` for the template to use. With `<script setup>` we export individual parts for the template to use.

With all the indentation necessary to add a little bit of state, setting up components in Vue was always a little tedious. This svelte-react-mix completely gets rid of this problem.

Now how do we register components you might ask? This also got a DX boost. Instead of importing **AND** registering it, the two steps were merged into one. There still seems to be some debate on all of this, but check out the RFC for more info.

RFC: https://github.com/vuejs/rfcs/pull/182
Scala+Stellar #5 - Bitcoin Payments
Published: 2020-07-05 07:37:38

🤔 **Thinking about**
I have been pondering the value of bitcoin quite a bit. Something I've heard often, as early as a quote from @aantonop in 2017, and more frequently in recent weeks, is the idea that bitcoin is not a payments technology & that to think so is to miss the point. That's at odds with the early and ongoing suggestions that bitcoin can be used to buy cups of coffee and digital subscriptions. Rather than just an excuse for the network's low throughput, I think the notion is true. There's much more to bitcoin than just payments.

Bitcoin as a globally accessible, transferrable store of value is _really_ powerful; more so than gold. I tend to think that as a knowledge worker in a developed economy I can't possibly fully comprehend what a permissionless, ubiquitous network for securely storing value would mean to people in markets and communities everywhere. We can do a lot of good in the world by supporting it. But it's poor as a payments platform. That's where fit-for-purpose networks like Stellar can fill the gap (and why Lightning Network and the race for an L2 solution is a thing). Stellar's potential role as the infrastructure through which "P2P of everything" can happen is exciting and can only be strengthened by the application of on-chain smart contract support.


🔙 **Last Week**

_Current SDK_

* Completed SEP-007 web+stellar:pay support. It is now possible to create and parse payment requests; as well as sign+validate as the requestor.

And that's SEP-007 fully supported. That means I get to cross it off my list!

🍕 **Planned (Jun-Aug)**

~~SEP-007 - URI Scheme to Facilitate Delegated Signing~~
SEP-010 - Stellar Web Authentication
Ongoing SDK rebuild effort.
Is document.execCommand() obsolete?
Tags: discuss
Published: 2020-07-05 12:18:48

I'm currently working on a rich text editor (WYSIWYG). I went through several articles and all of them explained how to do that using `document.execCommand`. All the libraries out there does the same.

However, [MDN says this](https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand) 😱

> This feature is obsolete. Although it may still work in some browsers, its use is discouraged since it could be removed at any time. Try to avoid using it.

Is it true? Then, what should I use?

Or, is this statement wrong?
Road to Genius: advanced #40
Tags: javascript, beginners, codenewbie, computerscience
Published: 2020-07-05 12:18:42

Each day I solve several coding challenges and puzzles from Codr's ranked mode. The goal is to reach genius rank, along the way I explain how I solve them. You do not need any programming background to get started, and you will learn a ton of new and interesting things as you go.

```JS
function numDecodings(s) {
  if (s == null || s.length == 0) {
    return 0;
  }
  const dp = Array(s.length + 1).fill(0);
  dp[0] = 1;
  dp[1] = s[0] !== '0' ? 1 : 0;
  for (let i = 2; i < s.length + 1; i++) {
    const one = +s.slice(i - 1, i);
    const two = +s.slice(i - 2, i);
    if (two >= ☃️ && two <= 26) {
      dp[i] = dp[i - 2];
    }
    if (one >= 1 && one <= 9) {
      dp[💧] += dp[i - 1];
    }
  }
  return dp[dp.length - 1];
}
let 🚀 = numDecodings('6749');

// 🚀 = ? (identifier)
// 💧 = ? (identifier)
// ☃️ = ? (number)
// such that A = 1 (number)
```

In today's challenge I have not a single clue what the code does, except that it's got something to do with decoding numbers (the function name reveals it). I hope we get to solve this without fully analyzing the code, so let's see.

The first bug 🚀 is an easy fix, it should be `A`.

The remaining two bugs appear closely together, and to fix these we have to look at a part of the code:

```JS
if (two >= ☃️ && two <= 26) {
  dp[i] = dp[i - 2];
}
if (one >= 1 && one <= 9) {
  dp[💧] += dp[i - 1];
}
```

My best bet for bug 💧 is `i`, because two lines above we see a very similar code.

Finally, note that both if-conditions' look very similar, they have a lower limit and an upper limit. My bet for ☃️ is to be 1 to ensure it matches the structure of the second if-condition.

Now we can cross our fingers and click verify:
![coding challenge answer](https://dev-to-uploads.s3.amazonaws.com/i/1ydb05l2oa12w9pw40za.png)

Since it's Sunday, I won't bother you with writing a detailed analysis of the code, let's leave it here :)

By solving these challenges you train yourself to be a better programmer. You'll learn newer and better ways of analyzing, debugging and improving code. As a result you'll be more productive and valuable in business. Get started and become a certified Codr today at https://nevolin.be/codr/
Toc Bar, table of content for dev.to, finally.
Tags: userscript, devto, toc, showdev
Published: 2020-07-05 12:00:53

---
title: Toc Bar, table of content for dev.to, finally.
published: true
description: A userscript that displays table of content of current article in a floating widget.
tags: 
- userscript
- devto
- toc
- showdev
---

[Toc Bar](https://greasyfork.org/en/scripts/406337-toc-bar) is a userscript I wrote to add floating widget displaying table of content of current page.

Currently only tailored for some personal most-visited sites, including dev.to .

## ✨Features

- Use [tocbot](https://tscanlin.github.io/tocbot) for toc generation.
- For some sites, there are no ids on header elements so it would be impossible to navigate by clicking the toc link. Toc Bar will generate ids - which are derived from a simple hash of the header textContent, and prefixed with `tocbar-` - for these headers.
- A toggle button is offered, if you don't want toc bar to cover current page content.
- For some sites in SPA mode, if you navigate to another article, there is no easy way detecting url change in userscript, so I add a refresh button to refresh TOC contents.


## Screenshots

![devto](https://raw.githubusercontent.com/hikerpig/toc-bar-userscript/master/images/screenshot-2.png)
Daily Developer Jokes - Sunday, Jul 5, 2020
Tags: jokes, dailydeveloperjokes
Published: 2020-07-05 12:00:09

---
title: "Daily Developer Jokes - Sunday, Jul 5, 2020"
description: "Check out today's daily developer joke! (a project by Fred Adams at xtrp.io)"
series: "Daily Developer Jokes"
cover_image: "https://private.xtrp.io/projects/DailyDeveloperJokes/thumbnail_generator/?date=Sunday%2C%20Jul%205%2C%202020"
published: true
tags: #jokes, #dailydeveloperjokes
---

Generated by Daily Developer Jokes, a project by [Fred Adams](https://xtrp.io/) ([@xtrp](https://dev.to/xtrp) on DEV)

___Read about Daily Developer Jokes on [this blog post](https://xtrp.io/blog/2020/01/12/daily-jokes-bot-release/), and check out the [Daily Developer Jokes Website](https://dailydeveloperjokes.github.io/).___
### Today's Joke is...
![Joke Image](https://private.xtrp.io/projects/DailyDeveloperJokes/public_image_server/images/5e12590f4ba3c.png)

---
*Have a joke idea for a future post? Email ___[xtrp@xtrp.io](mailto:xtrp@xtrp.io)___ with your suggestions!*

*This joke comes from [Dad-Jokes GitHub Repo by Wes Bos](https://github.com/wesbos/dad-jokes) (thank you!), whose owner has given me permission to use this joke with credit.*

<!-- 
Joke text:
___Q:___ What do you call a computer that sings?

___A:___ A-dell.
 -->
when multitask and when one task at a time
Published: 2020-07-05 11:51:12


For a while I was trying to listen to podcasts while I was coding; initially, it felt right but the more I did it the more it felt wrong.It was nice till I was doing tasks that don't require much analytical thinking but when I was doing anything which took a lot of brain power while listening to some podcasts, it doesn't work, I simply can't think. When I realized this I researched on the topic of multitasking and here is the gist of it:

## 1. History of Multitasking 
first of all the work multitasking wasn't made in the for humans tasks, it was made for computers. In computers, it was a more efficient use of resources to run multiple processes when one process was waiting for any external event such as user input or a network request. Initially, computers were doing very fast context switching between tasking which makes it feel like multitasking, later computers got multiple cores parallel processing became possible. Unfortunately, Neither human brains are good at context switching nor we have multiple cores. 

## 2. When you should focus on one thing at a time

According to some experiments, the human brain can be trained to better multitasking, but even after extensive training; how well you can multitask depends on the kind of work you're doing. Difficult task or tasks that require high creativity are much harder to multitask.

There are some popular beliefs about women being a better multitasker than men's, but there isn't enough data to assert that proves that. Most of the theories are based on evolutionary explanations like Hunter-Gatherer Hypothesis.

People have a limited ability to retain information, which worsens when the amount of information increases so if you are doing a task that requires keeping a lot of data in mind, It will be even better to split the tasks into smaller chunks which require fewer things to keep in mind.  

## 3. Often focussed work is more valuable than shallow work
Most of the time in the real world, the reason for multitasking is because of the vast stream of constant data thrown at us. Your news app wants you to read this breaking news, Your game wants you to collect these new coins, Your friends have posted these new pictures, 30 people are talking about the dog pic you uploaded yesterday. These all are shallow tasks, they don't take a lot of time, but they distract you and their return of investment isn't big.  

Focussed tasks are the opposite of them, they require more time to do, They require more creativity and thinking but they yield big results, often they are related to some long term goals.  

You should be prioritizing focussed work and try to minimize shallow work. Shallow work is important but more often they aren't as valuable since they can be done by anyone or can be easily learned. 

Cover pic credits: Thanks to Marvin Meyer for sharing their work on Unsplash
YouTube Video | Create App using unsplash API in ReactJS — 4
Tags: react, youtube, javascript, webdev
Published: 2020-07-05 11:44:43

I had recently started my YouTube channel — The Web Dev. I had decided to start putting all my blogs into the YouTube channel.

We will create an web app from scratch using ReactJS, which will consume the Unsplash API. We can search for any image from unsplash.com and it will show them.

In this part we are also learning how to use the ref system in React to access the DOM elements.

Here is the final part of the series.

{% youtube yO1SSnOqANA %}

Please do like it and [Subscribe](https://www.youtube.com/channel/UCRf7mazcufqZxd2pR3oQJuQ?sub_confirmation=1) to my channel for more videos.
A Comprehensive Guide to JavaScript - Part 4 - Arrays
Tags: webdev, javascript, beginners
Published: 2020-07-05 11:37:57

## Arrays

Arrays are list-like objects. They are just single objects that contain multiple values stored in a list.

```javascript
var array = [1, 2, 3, 4, 5];
```

#### Properties of Arrays

* length: Returns the number of elements in the array.
```javascript
array.length // returns 5
```
* constructor: Returns the constructor function for the object.
```javascript
array.constructor; // returns the array constructor
```
* prototype: Add properties and elements to an array object.
```javascript
array.prototype; // refers to array object itself
```
#### Important Methods

* push(): Add an element at the end of the array.
```javascript
array.push("10"); // [1, 2, 3, 4, 5, 10]
```
* pop(): Remove an element from the end of the array.
```javascript
array.pop(); // 10
```
* shift(): Remove the first element and return it.
```javascript
array.shift(); // 1
``` 
* unshift(): Add an element to the beginning of an array and return length.
```javascript
array.unshift(0); // 5
```
* concat(): Join two arrays together and return a copy of the joined array.
```javascript
array2 = [99, 100];
array.concat(array2); // 0, 2, 3, 4, 5, 99, 100
```

* find(): Find the first element in an array that satisfies a condition.
```javascript
array.find(function satisfy(num) {
    return num>4; // 5
});
```

* sort(): Sort the array.
```javascript
array.sort(function(a, b){return a-b}); // 0, 2, 3, 4 ,5, 99, 100
```

* filter(): Make a new array from an existing one after satisfying a condition.
```javascript
array.filter(function satisfy(num) {
    return num>4; // 5, 99, 100
});
```

* forEach(): calls a function for every element in the array.
```javascript
var array = [0,2,3,4,5,99,100];
var array2 = [];
array.forEach(function mult(num) {
    array2.push(num*num);
});
array2; // [ 0, 4, 9, 16, 25, 9801, 10000 ]
```

* map(): Creates a new array with results of a function called for each and every element in the array.
```javascript
array3 = array2.map(Math.sqrt)
array3; // [ 0, 2, 3, 4, 5, 99, 100 ]
```

* reduce(): Reduce values of an array to one value.
```javascript
var array = [0,2,3,4,5,99,100];
var s = array.reduce(function sub(total, num) {
  return total + num; // 213
});
```

* slice(): Select and return part of an array.
```javascript
var array = [1, 2, 5, 99, 101];
array.slice(0, 2); // [ 1, 2 ]
```

* splice(): Add/remove element from an array.
```javascript
var lang = ["HTML", "CSS", "JS", "Bootstrap"];
var removed = lang.splice(2, 1, 'PHP', 'React');
console.log(lang); // HTML,CSS,PHP,React,Bootstrap
console.log(removed); // JS
```

These methods will come in handy when working with data on the web and I hope you have a fair understanding of the most important ones by now.

***Thank You!***
15 Flutter App IDEAS: BEGINNER TO EXPERT [WITH FREE TUTORIAL]
Tags: android, ios, beginners, codenewbie
Published: 2020-07-05 11:35:04

Popularity of flutter is getting higher everyday! If you are thinking about a hybrid app, then most people will suggest to you flutter. I am also going suggest flutter instead of react native. For learning react native you need to learn about react js too. So if you are just starting today then maybe try the flutter first. Learning curve will be much easier than react js. So here the project lists for the flutter –

# Starter Project ideas

## Calculator
{% youtube l4bLPfS1uik %}

## Login UI
{% youtube efbB8-x9T2c %}

## Emoji UI
{% youtube A1ski_fjSlY %}

## Coffee Shop UI
{% youtube pn5gfGIfBpI %}

# Intermediate Project ideas

## Pokemon UI
{% youtube yeXJqZCiwTQ %}

## Tiktok UI 
{% youtube kJ2mGh5BLYk %}

## Recipe App
{% youtube bmmTY2lHaks %}

## Furniture App UI
{% youtube ZtPe6Zu6BA4 %}

# Advanced Project ideas

## Covid-19 APP
{% youtube zx6uMCoW2gQ %}

## Blog App
{% youtube _ed4783G5yY %}

## Whatsapp UI clone
{% youtube 2Tyrofn6zPg %}

## Cryptocurrency App
{% youtube cPlaYS4eqe4 %}

# Expert project ideas

## Skype clone
{% youtube 01PUYvVoLa8 %}

## Food App Delivery
{% youtube 8xwWilMuTlg %}

## E-commerce Store
{% youtube Dy_zBF6rJFc %}

## Uber Clone
{% youtube ya1lsXS2Wvw %}

I know it’s a huge list but thanks for reading this whole thing! Share this with your friends to help them!

Here Instagram version of the post –

{% instagram CCQgjJVgFms %}

I’ve started a programming community on discord. Click to join [Discord Channel](https://discord.gg/uDj2JtH)

I've two free PDF for you
- [Learn JavaScript in 30 Days](https://blog.nerdjfpb.com/javascript-in-30-days-free-pdf/)
- [Node JS In 30 Days](https://blog.nerdjfpb.com/node-js-in-30-days-free-pdf/)

Originally it published on [nerdjfpbblog](https://blog.nerdjfpb.com/project-ideas-for-flutter-beginners-to-expert/).

You can connect with me in [twitter](https://twitter.com/nerdjfpb) or [linkedin](https://www.linkedin.com/in/nerdjfpb/) or [instagram](https://www.instagram.com/nerd_jfpb/)
Teenage Software developer Journey (short version)
Tags: webdev, motivation, beginners, codenewbie
Published: 2020-07-05 11:34:53

2017 => now()

16-year old => 19 yo

Matriculation => Leaving college

Going college in my father rickshaw/auto => Working remotely

printing 'Hello world' in android phone => Using ThinkPad for day to day coding (still not comparable to MacBook but much better than smartphone :p)

'a shy person' => Attending Hackathons, local events, expanding my network and learning new technologies

Turned down on for "not enough experience" => Receiving job offers via LinkedIn and GitHub

Learning from my couch => Working from my own Home office

Knew nothing => Know something

Just write stupid small apps.

With lots of practice, you will eventually become a great developer. Although, you may never consider yourself that as you should always be seeking out learning more and more.

In the end, the thing matter most is your 'curiosity'. It's your curiosity about 'How things work' which will lead you somewhere...

Good Luck!
Yet another package manager, but with a twist...
Tags: packages, python, help
Published: 2020-07-05 11:32:46

Heyo everyone,
Lately I've been working on app distribution sorta stuff, such as package managers, wrappers for them and so forth. This is what I got so far:
https://github.com/HUSKI3/Spark
Its a "sketch" in a sense as its just a collection of ideas without a good implementation (which is a recurring theme in my projects due to my limited knowledge in some areas). The package manager is meant to be a one-file-does-all without the need to install other packages, all that is needed is python<3.7 and enough storage to download the sources files. Its still in early development and will become less messy as I work on it. If you have any ideas on how to make it better please share them with me!
Leora News
Published: 2020-07-05 11:10:18

Leora News is published from Hyderabad, Telangana in India, we bring latest News on government proclamations, concerning royal ceremonies, laws, taxes, public health issues and solutions Humans exhibit a nearly universal desire to learn and share news from elsewhere through our <a href="http://www.leoranews.com/">Leora News</a> online website, Leora News to each other and sharing through our website, aware technological and social developments in society accepts, often driven by government communication and espionage networks, have to increased the speed with which news can spread, as well as influenced its content. News moves through many different media, based on word of mouth, printing, postal systems, broadcasting, and electronic communication through our online Leora News are package website is Common topics for news reports include war, politics, and business, as well as athletic events, quirky or unusual events, and the doings of celebrities.
How do you deal with null vs undefined?
Tags: javascript, typescript, webdev, discuss
Published: 2020-07-05 11:08:36

---
title: How do you deal with null vs undefined?
published: true
description: 
tags: javascript, typescript, webdev, discussion
cover_image: https://images.unsplash.com/photo-1557318041-1ce374d55ebf?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80
---


I just recently started refactoring my large [scale angular app](https://github.com/johannesjo/super-productivity) to Typescript's strict mode. Dealing with lots of null checks the question arose again if I should prefer using `undefined` over `null` or vice versa. A couple of thoughts:

1. Is using `undefined` for initially undefined values and using `null` whenever you want to unassign a value a good option?
2. Using `undefined` everywhere simplifies things at first, but then there is JSON (only `null` available) and API responses. How to best deal with those?
3. How to best deal with pre-checks for when you are reasonably confident that a value is not `null`, but it theoretically could be (e.g. angular `@Inputs` you always assign)? Do you prefer to typecast or do you use error checks?

I wonder how do you deal with the problem. Do you prefer one over the other? Do you use both? What's your take on it?
Python: Fun Function Facts
Tags: python, beginners, functions
Published: 2020-07-04 23:50:21

(Assuming that) we all know what a python function is; I want to show some hacks that might help you.

## (1) Optional parameters
```py
def hi(name, age=18):
  print(f"Hi {name} who is {age} years old!")
```
Here, when calling this function, you don't have to give a value to the age parameter, as it will default to 18. However giving a value to age will override the default value.
```py
hi("Mahdi")
# >>> Hi Mahdi who is 18 years old!
hi("Magdi", 25)
# >>> Hi Magdi who is 25 years old!
```
**Note: optional arguments/parameters must come at the end**, so this won't work:

```py
def hi(age=14, name):
  print(f"Hi {name} who is {age} years old!")

hi(15, "Mohamed")

# >>> Syntax Error: non-default argument follows default argument
```
It's a good practice to let the default values `None`.

<hr>

## (2) You can write parameters in a different order
Take a look at this function:
```py
def salut(fromPerson, toPerson):
  print(f"Hi from {fromPerson} to {toPerson}")

salut("Magdi", "Shady")
# >>> Hi from Magdi to Shady
```
This is also valid:
```py
salut(toPerson="Shady", fromPerson="Magdi")
# >>> Hi from Magdi to Shady
```
It prints the same result as before. This feature is kinda cool, and it improves readability; even if you still write them in order.

<hr>

Ok, that's good for now. Hope I helped you know something new, or clarified it. See you soon!