teleren/devto huggingface dataset:
How to Map Over a Tree in JavaScript
Tags: javascript, devtip, webdev
Published: 2019-11-12 16:09:23

---
title: How to Map Over a Tree in JavaScript
published: true
description: Learn how to map over a tree in JavaScript
tags: javascript, devtip, webdev
canonical_url: https://stevenmercatante.com/how-to-map-over-a-tree/
---

{% twitter 1194281578509275136 %}

Check out the runnable example below:

{% codesandbox map-over-tree-ye0cz %}
How to watch Apple’s 2019 iPhone event live
Tags: iphone, apple, events, livestreaming
Published: 2019-11-12 15:55:46

New year! New devices! And all new ways of watching the Apple Event!

![](https://cdn-images-1.medium.com/max/1024/1*kYw-JfmWvRJxqmgs9Endag.jpeg)<figcaption>Apple 2019 Special Event</figcaption>

It’s that time of the year again when Apple announces a lot of their new devices for the year. If the rumors are true, this might not be the most exciting of years as a lot of the cool features seem to be pushed off yet another year to 2020. (Touch ID, USB-C, etc). We may be surprised though…

> Don’t forget to watch a special edition of [Breaking the Build](https://breakingthebuild.dev) covering the Apple Event and why you might care about it as a developer! [https://breakingthebuild.dev](http://breakingthebuild.dev/) — September 11, 2019–10 AM PST / 12 PM CST / 1 PM EST / 5 PM GMT

### Ok, How do I watch the event live this year?

> Here are some of your options:

#### YouTube

_This is the first time that Apple will be streaming the event on YouTube via the official Apple YouTube Channel._

{% youtube -rAeqN-Q7x4 %}

#### Office Apple Site

_Watch the event on your Mac (Apple Safari browser) or PC (Microsoft Edge browser)_

[Apple Events - Apple Special Events](https://www.apple.com/apple-events/)

#### Apple TV

_Watch the event on your Apple TV_

[https://apps.apple.com/us/app/apple-events/id1090599922](https://apps.apple.com/us/app/apple-events/id1090599922)

#### Twitter

_Well, technically, you can’t watch it on Twitter but if you view and like this tweet, Apple will send you a reminder of the event before it begins._

{% twitter 1169070157840277506 %}


#### Apple Store

_Yes, some Apple stores will be streaming the event live:_

[Today at Apple - Apple Special Event - Apple](https://www.apple.com/today/collection/apple-special-event-sept-2019/)

#### Post-Event Keynotes on iTunes

Watch the Keynote presentations on iTunes after the event has completed.

[Apple Keynotes](https://itunes.apple.com/us/podcast/apple-keynotes-1080p/id509310064?mt=2)

* * *
Android Navigation Component Issue
Tags: android, kotlin, navigationcomponent
Published: 2019-11-12 15:51:46

I had an issue in the application I am currently working on it followed the following scenario; [Question on stackoverflow](https://stackoverflow.com/q/58739007/3900842) 

There is an activity, let's call it PaymentFlowActivity. This activity has only 3 fragments; shipping, review and payment fragment and it doesn't have a NavHostFragment. 

In the Shipping Fragment, I have more than one state, so I decided to add a NavHostFragment for this fragment to handle back stack for those different states. 

so in my fragment layout file, I did the following

```
<androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/root_view">

        <fragment
            android:id="@+id/shipping_host_nav"
            android:name="androidx.navigation.fragment.NavHostFragment"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:navGraph="@navigation/shipping_nav_graph"
            app:defaultNavHost="true"/>
<androidx.constraintlayout.widget.ConstraintLayout/>
```

And when I try to access the nav controller using findNavController() it throws the following exception
``` java.lang.IllegalStateException:xxxxxxxxxxxxx does not have a NavController set```

when I searched for this exception, I didn't find any useful answers to this use case issue. 

So, I went through the Navigation component code in the SDK and I found the following: when using the findNavController() with a fragment that isn't NavHostFragment or isn't within NavHostFragment this exception will be thrown. 

So we have to find the nav controller by ourselves using the id of the nav host fragment defined in the fragment and the activity as follow 

```
val navController = Navigation.findNavController(activity, R.id.shipping_host_nav)
```

this will get the navController of your NavHostFragment defined in the fragment layout. 

You can use the navController to navigate to the desired destination

```
navController.navigate(R.id.my_destenation) 
```

To make it easier to get the nav controller, I made an extension function for the fragment class that enables accessing the nav controller using only the id. 
Here is a snippet:

```
fun Fragment.getFragmentNavController(@IdRes id: Int) = activity?.let {
        return@let Navigation.findNavController(it, id)
}
``` 

Then in your fragment, you can use this method to navigate to the desired destination. 

```
getFragmentNavController(R.id.shipping_host_nav)
.navigate(R.id.action_new_address_to_addresses)
```
🎉 StickerChart.Party is now Free!
Tags: showdev, productivity, news
Published: 2019-11-12 15:41:35

[StickerChart.Party](stickerchart.party), the popular Slack appreciation plugin, has now dropped it's monthly service charge and is free forever!

Giving praise in a digital world can feel a little underwhelming. Some of us might pine for the days when we were in school and were rewarded with a little gold star 🌟 for our special efforts that would go on a board for all to see. Well, those days are back with [StickerChart.Party](stickerchart.party)!

Once you've added the plugin to one, or all, of your Slack accounts you can give a sticker to anyone by entering a quick chat command.

![Slash command example](https://thepracticaldev.s3.amazonaws.com/i/r0c3nnsnrd061julbml4.png)

Instantly, everyone will know that a sticker was given.

![Slack success response](https://thepracticaldev.s3.amazonaws.com/i/kbnww9n6j0kpsldck3hd.jpg)

And your sticker will be on the board along with all the other stickers given out to other teammates.

![Sticker Chart](https://thepracticaldev.s3.amazonaws.com/i/e4dhpzm76cghj9bs28pq.png)

Do you have a ton of custom emojis you've set up in your Slack group? No problem, [StickerChart.Party](stickerchart.party) supports all emojis that your team is currently using including animated ones!

We've loved having [StickerChart.Party](stickerchart.party) installed on our Slack and have been having so much fun giving stickers for every little thing that comes to mind.

[Give it a try today](stickerchart.party), it's fun and it's free!

Feel free to message me if you have any ideas for features and improvements. I hope you enjoy using it!
Top 5 DEV Comments from the Past Week
Tags: bestofdev
Published: 2019-11-12 15:40:20

---
title: Top 5 DEV Comments from the Past Week
published: true
description: Highlighting some of the best DEV comments from the past week.
tags: bestofdev
cover_image: https://res.cloudinary.com/practicaldev/image/fetch/s--7VrAA2ln--/c_imagga_scale,f_auto,fl_progressive,h_420,q_auto,w_1000/https://thepracticaldev.s3.amazonaws.com/i/qmb5wkoeywj06pd7p8ku.png
---

This is a weekly roundup of awesome DEV comments that you may have missed.  You are welcome and encouraged to boost posts and comments yourself using the **[#bestofdev](/t/bestofdev)** tag.

We start things off with a reply to **[Who still regularly uses jQuery?](https://dev.to/ben/who-still-regularly-uses-jquery-40n)**.  @eddieaich offered a counter-point to the general trend of replies that were providing reasons _not_ to use jQuery:
{% devcomment hil6 %}

In the first of several "Explain" threads this week — @bradtaniguchi offered a great comment in the **[Explain Angular to Me](https://dev.to/ben/explain-angular-to-me-j5m)** thread:
{% devcomment hd1k %}

Moving on to a broader explanation opportunity in **[Explain the Frontend Webdev Ecosystem to Me](https://dev.to/ben/explain-the-frontend-webdev-ecosystem-to-me-5hfd)**, @iamschulz provided a great run-down:
{% devcomment he22 %}

And finally, @thuvvik jumped in to **[Explain Event Bubbling Like I'm Five](https://dev.to/junlow/explain-event-bubbling-like-i-m-five-340o)** with a great reply:
{% devcomment hh2d %}

@nickersf shared some wisdom in **[What Are the Most Important CS Principles to Learn as a New Dev from a Non-Traditional Background?](https://dev.to/torianne02/what-are-the-most-important-cs-principles-to-learn-as-a-new-dev-from-a-non-traditional-background-5029)**:
{% devcomment hf8i %}

See you next week for more great comments ✌
The Journey to Competence
Tags: competencevsconfidence, learning, webdesign
Published: 2019-11-12 15:23:01

What a ride! 
I remember on my first day I read a very helpful article that gave me the forewarning of  the learners journey and the changes in confidence one experiences on their way to competency (described in the image below). 
Before I began designing my own web page, I read this with the breath of gratitude and even a little skepticism that I wouldn’t likely struggle much, after all, my reading comprehension is pretty decent (insert nervous and inappropriate laughter here). 
Boy, was I underestimating my ability to struggle! At first I started out with a mess, which I have to admit is very typical of how I generally begin things. 
I learned a lot along the way, but ultimately decided to begin fresh and give myself a better chance to learn the course work. 
For those of you teaching yourselves code the article describes the curve as beginning with the hand holding honeymoon where you're learning your tools and a basic foundation of knowledge. After this is the second phase, where you move slowly but quite obviously to the cliff of confusion, where you begin to realize things are much more difficult outside of the hand holding honeymoon. Then comes the Desert of Despair that takes you down path after path of working solutions and you are thirsty for solid resources which can lead you down useless rabbit holes. After this is the final and fourth phase, the Upswing of Awesome. The path out of the desert to the relief of a deeper understanding of application development, even if the code is brittle and easily broken.
I am currently still in the hand holding honeymoon phase, but I am very happy I made the choice to start over with my code. I feel I have a much better understanding and more confidence in my ability to move forward on this Adventure in Learning. 

I am always doing that which I cannot do, in order that 
I may learn how to do it. -Picasso

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/zyixenvwrgj368vignid.png)
Day 8 of⚡️ #30DaysOfWebPerf ⚡️: srcset and sizes
Tags: webperf, images, html, webdev
Published: 2019-11-12 14:51:24

{% twitter 1194265458406543368 %}
{% twitter 1194265467780784128 %}
{% twitter 1194265475888353281 %}
{% twitter 1194265484117659648 %}
{% twitter 1194265494326525952 %}
{% twitter 1194265496738320384 %}
How to use componentDidUpdate in React
Tags: react, javascript, frontend
Published: 2019-11-12 14:34:29

---
title: How to use componentDidUpdate in React
published: true
description: Update components based on comparison of previous and current state
tags: reactjs, javascript, frontend
cover_image: https://ferrariwebdevelopment.s3.us-east-2.amazonaws.com/assets/20190930-component-did-update.jpeg
---

## Update components based on comparison of previous and current state

We have seen how the `componentDidMount()` method is called on class components immediately after the component is mounted in the application and rendered.

`componentDidMount()` is part of the React component *lifecycle* methods, methods that get called automatically by the React system at specific points in the life of a component.
Another such methods is `componentDidUpdate()`.

`componentDidUpdate() `is called after `componentDidMount()` and can be useful to perform some action when the state changes.
`componentDidUpdate()` takes as its first two arguments the previous props and the previous state.
Inside the method we can check if a condition is met and perform an action based on it.

For example, in the code below we check if the previous state and the current state are different. If they are, the console log statement will be run.

```js
componentDidUpdate(prevProps, prevState) {
  if (prevState.pokemons !== this.state.pokemons) {
    console.log('pokemons state has changed.')
  }
}
```

### When do we use `componentDidUpdate()`?

An example of when to use `componentDidUpdate()` is when we need to call an external API on condition that the previous state and the current state have changed.

The call to the API would be conditional to the state being changed. If there is no state change, no API is called.

Like mentioned before, to avoid an infinite loop, the API call needs to be inside a conditional statement.
Daily Challenge #115 - Look and Say Sequence
Tags: challenge
Published: 2019-11-12 14:12:44

---
title: Daily Challenge #115 - Look and Say Sequence
published: true
series: Daily Challenge
description: Write a function to complete a look and say sequence.
tags: challenge
---
The look and say sequence is a sequence in which each number is the result of a "look and say" operation on the previous element.

For example, starting with "1": ["1", "11", "21, "1211", "111221", ...]. You can see that the second element describes the first as "1(times number)1", the third is "2(times number)1" describing the second, the fourth is "1(times number)2(and)1(times number)1" and so on.

Your goal is to create a function which takes a starting string (not necessarily the classical "1") and return the `n`th element of the series.

Examples:
`lookAndSaySequence("1", 1)   === "1"
lookAndSaySequence("1", 3)   === "21"
lookAndSaySequence("1", 5)   === "111221"
lookAndSaySequence("22", 10) === "22"
lookAndSaySequence("14", 2)  === "1114"`

Good luck!
***
_This challenge comes from giacomosorbi on CodeWars. Thank you to [CodeWars](<https://codewars.com/>), who has licensed redistribution of this challenge under the [2-Clause BSD License](<https://opensource.org/licenses/BSD-2-Clause>)!_

_Want to propose a challenge idea for a future post?  Email **yo+challenge@dev.to** with your suggestions!_
Understanding Observables (the right way) Part I
Published: 2019-11-12 14:04:24

Let’s build a concept with each other’s before we get into coding
##The Observer Pattern (**core concept**):
The **observer design pattern** is where observable’s concept is coming from, let’s understand it first.

Design patterns itself, are repeatable solutions to commonly occurring problems in software design, so what’s the observer pattern anyways? 
*It defines a one to many dependency relationships between objects so that one object changes state, all of its dependents are notified and updated automatically*.

##Examples in reality:
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/065u4y6ze400os6l1uko.jpg)
  <figcaption>Newsletters company</figcaption>


In order to understand this concept we should apply it in our reality, for example, imagine a newsletter’s company with **customers** that **registering** to get a newsletter per day, this newsletter’s company have a **source** of data that get its information from
, after that, the company converts this data into a headline, a body of a headline and so on...
Once it is done the company sends the converted data (as a newsletter) to the registered customers only, if any change happened in the source of data it notifies (send an update) all the registered customers with these changes.

To make it clearer let’s give another example… almost every one of us at least have one **Google account** so imagine that the data source is your Google account, and the **Google server** is continuously watching the state of all Google accounts, now let’s says that you signed in from different device than usual the google server noticed this change in your account location state then it notify you by a message which says “are you signed in with ‘device name’ at ‘device location’ or not?”… This happened to me a lot when I logged in from different devices and it makes a perfect example for the observer pattern.

##Conclusion:
In the previous examples, the newsletters company and the google server represents an **observable** which:
 **1- send a stream of data to the observers**
 **2- observes any changes in the state of the data source and notify the observers**
Who are the observers you say? They are the customers or account owners who are **subscribed** (registered) to a specific observable.

The way we think about observables and observers opened a new approach to think about programming and that’s called *“Reactive Programming”* and by adding the toolbox of functional programming on top of it, like mapping or filtering, it becomes *“Functional Reactive Programming”* which deals with asynchronous data streams.

Streams is a sequence of data values over time and thinking that everything can be represented as a stream which observable can send to the observers, is the reactive mindset of thinking.


In the next post, we will get into the real stuff with hands-on coding examples, this series aims to introduce you as a beginner into the reactive programming world so stay tuned and happy reading.
Using an Singleton with Observer Pattern to manage State?
Tags: javascript, design, patterns, webcomponents
Published: 2019-11-12 14:03:43

A general question, I created a Singleton which will use an Observer Pattern where the Singleton becomes the Subject. And every Web Component in my app could become an Observer.

What is Pro/Con here? The main issue I found is that with Pub/Sub the Subject & Observer are loose coupled and work over messages. But is it so bad to use the Observer pattern in a Single Page app in a way everything should be together no? 

I wonder what you people think of this? And no I don't want to use Redux or NGRX or any other library. 

Looking forward to your feedback or comments.
How to get through the JavaScript beginner's hump 
Published: 2019-11-12 13:51:13

It's inevitable. You decide to start learning Javascript. You start learning the fundamentals. You know what an object is, what a function is. You can confidently use a variable. You know the theory. But one day, you sit down in front of your computer and try to code something, and nothing clicks. What is a variable again? All of the built in functions that you just learned have flown out of your head.

It's the Javascript hump. The hump is when you feel confident in all the concepts but can't quite figure out how to apply it to your code. There is hope! There's light at the end of the tunnel! You can make it. 

Here's some tips that might help you get over this tough time faster:

1. **Review what you can do with each concept.** Figure out when do you use a loop, when arrays are useful, and what kind of information often hold. It helps to review it through a variety of manners. Try watching YouTube videos. Check out this [Javascript for Beginners course](https://www.youtube.com/watch?v=hdI2bqOjy3c) from Traversy Media, where he goes through all the basic concepts. Make sure to try to type out everything that the instructor does so that you can get used to the syntax of Javascript. 
2. **Write things down.** **If you're like me, you might find it easier to learn by writing things out slowly. I find it useful to write down an entire function or line of code, and annotate every single part of, down to why it's a curly bracket rather than a smooth bracket. You can write down what every variable means in each iteration that it is used, or write out the results of a loop yourself so that you can understand it more thoroughly. 
3. **Codealongs!!** This is a very effective way of getting over the hump. Slowly but surely going through codealongs, and understanding every single piece of code that is used in the project. You can find codealongs on [Udemy.com](http://udemy.com) or even YouTube! There's tons of free content everywhere. Make sure to pick something with a similar comfort level to yours. Once you complete it, try to do it again by yourself, remembering the concepts that you just learned. Personally, I think this is the easiest way to get used to Javascript.
Public, cross-domain accessible APIs?
Tags: watercooler, question, public, api
Published: 2019-11-12 13:38:47

Do you know of any useful **public APIs** with **CORS headers set to allow access from other domains**? I'm curious to know what is out there.

2 useful API's reachable from the browser I know of:
- [Instagram's embed API](https://www.instagram.com/developer/embedding/). Enables you to fetch post embed codes and images
- [Coinmarketcap](https://coinmarketcap.com/) has some accessible endpoints from which you can fetch current crypto standings and rates/changes even though I'm not sure if that's perhaps some kind of misconfiguration on their side


What else is out there?
CSS is not a skill to learn! and Syntax is not designing
Tags: css, design, career, watercooler
Published: 2019-11-12 13:23:09

CSS is not a thing to learn, it's the collection of some concepts you have to consider as a guide and follow blindly. 

**Why So Many People used to say, CSS is hard?**
Because they are considering it as a language, not concepts. For some people, it's like a path to cross between HTML and JS. They are not at all interested in Design because they think that they don't have to handle complex CSS in Javascript. So Listen,
 if you're not interested in CSS then don't list it in your skillset and portfolio. The Mastery of CSS is a huge thing and some of the beginners are listing that their CSS skills are 90% to 100% but they are talking about the Syntax, not CSS. 

Another side is when a newbie of CSS, tries to design Websites but the mind is not generating the design and Inspiration(Oh My God!). it's good but limited. CSS for those people who want to create designs to inspire other people. All the syntax and Framework Guide in front of them. But they are still following the nav => header => sections => aside => footer traditional designs.

 maybe they just learned how to put a border, but they didn't learn where to put it? so it comes with lots of websites surfing and observing the behavior. The syntax is not everything. if you are only the master of syntax, please don't list CSS in your skillset. it hurts All of us(Ui Designer).

If you are a programmer, then focus on programming, just learn syntax. but don't say that you can design websites.
Java Fibers (Project Loom) vs. Kotlin Coroutines...
Tags: discuss, java, kotin
Published: 2019-11-12 12:48:06

Hi all,

I wanted to ask if [Fibers](https://cr.openjdk.java.net/~rpressler/loom/Loom-Proposal.html) will be "only" the pendant to Kotlins Coroutines or Goroutines in Golang... in Java or does it add advantages?

I guess it'll just be the Java implementation, right?

All in all I think Java's future is somehow just adding features, which are already in Kotlin since some time (also with the enhanced switch-statement, more or less smart casts, adding Pattern Matching based on classes, now with the text blocks...). I'm not very enthusiastic, I have to say. I think the Java architects are only trying to catch up a bit with Kotlin, more or less.

Kind regards
Johannes
Top 30 Python Interview Questions 2019
Tags: python, career
Published: 2019-11-12 12:42:10

Here we bring you some top questions that can be asked during the Python interview. If you are preparing for an interview in 2019-2020, then it is a great chance that you might be get selected if you read all these questions and Answers.

Click here:- <a href="https://codersera.com/blog/python-interview-questions-2019/">Question & Answer</a>