teleren/devto huggingface dataset:
Vue, Angular, React Comparison Series: simple state sharing
Tags: react, angular, vue, javascript
Published: 2020-04-29 23:14:55

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

Sharing state between components is one of the most important aspects of UI development. The counter application example below shows how Vue, Angular and React have a few options in implementing state sharing across components. For more complex state management, each of them have a corresponding popular library (NgRx, Redux, Vuex) that I will discuss in a separate posts.

###Counter App
The counter has three components to demonstrate the state sharing:
- The **App** component that shows all count values from different components. **localCount** is defined to give a comparison between a local state (localCount) and a shared state (count).
- **child** component is a child of the main app component
- **sibling** component is the sibling of **child** component
- **count** variable is the state value that is passed either to child (direct inheritance) or sibling(indirect sharing) component

###Vue
In Vue, we can use:
- **props** - **count** property value is passed down from the parent component. Props is a great way to keep components in it's simplest form, the defining aspect of a stateless components - **ChildCount** component
- **EventBus** - basically a Vue instance without DOM attachments. This global event broadcast can be used to share state values to listeners. Overusing this will lead to "event soup"
- With Vue reactivity, we can have a **simple store object** that triggers update when the store object mutated - use with caution: when things get complex, object mutation can lead to bugs and unintended actions.

{% codesandbox vue-shared-state-lxbym %}

###React
In React, we can use:
- **props** - **count** property value is passed down from the parent component. Props is a great way to keep components in it's simplest form, the defining aspect of a stateless components - **ChildCount** component
- **Context** - it defines the count state inside the **CountProvider**. **CountContext.Provider** provides the **count** value to its children. **useContext** hook is then used in children acting as the consumers that need the **count** value: App component and SiblingValue 
{% codesandbox react-shared-state-qpzmo %}

###Angular
- **@Input** is the equivalent of **props** property in Angular
-  **Angular Service** implements the dependency injection pattern to share state across components. By making the service reactive using Observable and Subject, **count** property is available to consume by **SiblingCount** component. The use of **async** is always the best practice in Angular which provides automatic unsubscribe action when the component is destroyed.
{% codesandbox ngular-shared-state-i6b15 %}
Twilio Hackathon - Day 3 Pt 3
Tags: twiliohackathon, twilio
Published: 2020-04-29 22:41:31

[Comment]: The video backend has been started, thanks to Twilio for their great guides on getting users connected and up and running!

#### What I built
An Omegle type product for first and second-degree friends in order to facilitate more spontaneous conversations 

#### Category Submission: 
Covid19 Communications

#### How I built it (what's the stack? did I run into issues or discover something new along the way?)
- Firebase Auth
- Firebase DB
- Twilio Video
- React & Material UI
- Python & Flask for Video API
Do you have a self-hosted blog? If so, what's the URL? If not, why not?
Tags: discuss, career, productivity, blog
Published: 2020-04-29 22:40:22

---
title: Do you have a self-hosted blog? If so, what's the URL? If not, why not?
published: true
description: Do you have a self-hosted blog? If so, what's the URL? If not, why not?
tags: discuss, career, productivity, blog
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/vzlnfysamjodizr8xrdc.jpg
---

Do you have a self-hosted blog? If so, what's the URL? If not, why not?
One weird trick! (To encapsulating your CSS)
Tags: webdev, html, css, beginners
Published: 2020-04-29 22:27:21

Web developers are going to hate me, cause this is an *interesting* solution...

Need to encapsulate the CSS of some HTML5? Well you can use an `<iframe>` to embed your HTML into a page without the rest of the page's CSS affect it using the `srcdoc` property!

Why would you want to do this? Well I'm currently working on including the content of the newsletters we email out on [web.dev](https://web.dev) on the website. However they all have their own custom styling that we don't want the CSS of the site to conflict them.

An `<iframe>` would allow us to encapsulate the styling so that there is no conflict, but it would be gross to point the `<iframe>` to another URL on the site as we would need another network request in order to render the page (and a search engine could crawl the embedded URL, which we wouldn't want to surface). So the easy solution was to use `srcdoc` to dump the HTML of a newsletter into the `<iframe>` without requiring another network request, or for another page to exist somewhere!

{% stackblitz iframe-css-encapsulation file=index.html %}

---

To keep up with everything I’m doing, follow me on [Twitter](https://twitter.com/MichaelSolati). If you’re thinking, _“Show me the code!”_ you can find me on [GitHub](https://github.com/MichaelSolati).
What’s your alternative solution? Challenge #30
Tags: challenge, javascript, codenewbie, learntocode
Published: 2020-04-29 22:25:48

# About this series

This is series of daily JavaScript coding challenges... for both beginners and advanced users.

Each day I’m gone present you a very simple coding challenge, together with the solution. The solution is intentionally written in a didactic way using classic JavaScript syntax in order to be accessible to coders of all levels.

Solutions are designed with increase level of complexity.

## Today’s coding challenge

```
Create a function that will receive an array of numbers as argument and will return a new array with distinct elements

```

(This is the same challenge as yesterday, but with a different solution. Scroll down for solution)

## Code newbies

If you are a code newbie, try to work on the solution on your own. After you finish it, or if you need help, please consult the provided solution.

## Advanced developers

Please provide alternative solutions in the comments below. 

You can solve it using functional concepts or solve it using a different algorithm... or just solve it using the latest ES innovations.

By providing a new solution you can show code newbies different ways to solve the same problem.

## Solution

```javascript
// Solution for challenge27b

var ar = getDistinctElements([1, 2, 3, 6, -1, 2, 9, 7, 10, -1, 100]);
println(ar);

function getDistinctElements(ar)
{
    var ar2 = [];
    
    var lastIndex = ar.length - 1;
    
    for(let i = 0; i <= lastIndex; i++)
    {
        if (!isInArray(ar[i], ar, i + 1, lastIndex))
        {
            ar2.push(ar[i]);
        }
    }
    
    return ar2;
}

function isInArray(n, ar, fromIndex, toIndex)
{
    for(var i = fromIndex; i <= toIndex; i++)
    {
        if (ar[i] === n)
            return true;
    }
    
    return false;
}

```


To quickly verify this solution, copy the code above in this coding [editor](https://codeguppy.com/code.html) and press "Run".

> Note: The solution was originally designed for [codeguppy.com](https://codeguppy.com) environment, and therefore is making use of `println`. This is the almost equivalent of `console.log` in other environments. Please feel free to use your preferred coding playground / environment when implementing your solution.
What is your most unbelievable software-bug story?
Tags: programming, bugs
Published: 2020-04-29 22:25:05

Every once in a while, every programmer discovers weird bugs in the software he uses or creates. Compilers that seem to randomly pass or fail without changing code. CSS layouts that work flawlessly, but not after restarting the browser once. You know these issues no one can explain.

Andreas Zwinkau [compiled a great list](http://beza1e1.tuxen.de/lore/index.html) of some really weird bug stories, both software and engineering related.
I really like the one about Crash Bandicoot, which randomly corrupted the saves of the Playstation memory card. Turned out that the baud rate controller on the consoles' mainboard interfered with the timer crystal. Fiddling with the controller while the game saves has led to dropped bits which caused the data corruption. Setting the tick rate from 1000 Hz to 100 Hz before saving a game solved the issue. Can you imagine finding out, that this software bug you are hunting for weeks is actually caused _by the mainboard layout_?

So, what is that one bug story you can tell, that no one would believe if it wouldn't actually be true?
Update/Publish Styles on GeoServer from Javascript using REST
Tags: javascript, geoserver, gis, style
Published: 2020-04-29 22:11:34

Hi there!
Do you want to publish or update some styles on [GeoServer](http://geoserver.org/), that's easy, check out the [official documentation](https://docs.geoserver.org/latest/en/user/rest/styles.html) for that. After you read it and can't use it in your javascript code, come here, this post will help you.

I'll skip the unnecessary chat about various situations you might need this and get right to it.
I'm using `axios` to handle my connections (because I like it :D), but you can do it with other libraries or even with vanilla JS.


## Update an existing style (using PUT)
*    First prepare the `StyleContent` which is the content of the style file as if you normally would upload it through geoserver interface.
*    Make sure you have the right access, I'm using default username and password for geoserver `admin` and `geoserver` for this.
```
const geoserverURL = 'http://{GEOSERVER_HOST}/geoserver/rest/workspaces/{WORKSPACE}/styles/{STYLE_NAME}'
axios({
    method: 'put',
    url: geoserverURL,
    data: StyleContent,
    auth: {
        username: 'admin',
        password: 'geoserver'
    },
    headers: {'Content-Type': 'application/vnd.ogc.se+xml'}
}).then((response) => {}, (error) => {console.log(error);});
```

## Publish a new style
Guess what happens if you change the method from `put` to `post` from the previous code? That's correct! you publish a new style to geoserver.
Day 127 : Views
Tags: hiphop, code, coding, lifelongdev
Published: 2020-04-29 21:50:57

_liner notes_:
- Professional : Got up early to attend the first talk prep session of the day. We went over some details for the upcoming Vonage Developer Day. You can register for it here: https://www.eventbrite.com/e/vonage-developer-day-tickets-102886113134. Had a meeting with my team to do a Retrospective. Attended another talk prep session. Did another internal testing of a tutorial with a team member in a different part of the company. Oh, and I finished up applying some feedback for a demo I'm working on with another team and submitted it for them to give it some views. Getting some really good feedback on it. For the rest of the day, I worked on creating a sample CLI application using Ink which uses React. 

- Personal : Last night, just did some coding and watched some YouTube. Kept it pretty chill.

![View of a lagoon opening into the ocean in Willemstad, Curaçao with some beach huts surrounding it.](https://dev-to-uploads.s3.amazonaws.com/i/h4syh3zpkevgjtl3k53o.png)

Going to keep working the Ink CLI sample app for a little longer. I'll also check out some tracks for this week's radio show before going to bed.

Have a great night!

peace piece
Dwane / conshus
https://dwane.io / https://HIPHOPandCODE.com
{% youtube Od8LTTBY5E4 %}
I just created a Google Earth Game with React, JSON and MaterializeCSS
Tags: react, json, googleearth, materializecss
Published: 2020-04-29 21:22:32

How many images are you able to match?

I took a JSON with info from different Google Earth aerial photos. So, this JSON is an Array of objects, each one has:
- id
- Country
- Region
- image
- lat/lan

Then I load a random item, make an array with three more countries from a set and make the quiz. 

You can see the project running at Netlify: https://googleearthquiz.netlify.app

For the code, it is in Github: https://github.com/fernandocomet/googleearthgame/

I Built it with #React mainly playing with props and State
Twilio Example for City Hall to Send MMS to help COVID19 #twiliohackathon
Tags: twiliohackathon
Published: 2020-04-29 21:03:22

[Comment]: Twilio Example for City Hall to Send MMS to help COVID19 This is a GitHub template for creating other Twilio sample


## What I built
#### Category Submission: COVID-19 Communications

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/tb4n31198dxbi26paehu.PNG)


## Demo Link
 ![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/1v08sn3axt6ylonodxlg.PNG)

## Link to Code
https://github.com/TulioLunaWFP/twilio


## How I built it 
Twilio Example for City Hall to Send MMS to help COVID19 This is a GitHub template for creating other Twilio sample

## Additional Resources/Info
This application is going to help any City Hall in order to send MMS to all the citizens that they have in one database. 1st when the City Hall register one citizen automatically send one MMS to welcome message 2nd in addition the City Hall can send one MMS to all the citizens that hey have in the database in order to send information about COVID19, quarantine, or other importat information

# #twiliohackathon
# #php
# #html
# #javascript
# #tsql
I replicated youtube design using tailwind CSS
Tags: webdev, react, javascript, css
Published: 2020-04-29 20:45:11

TLDR;
Github repo [Link](https://github.com/Rohithgilla12/react-yt-tailwind)
Live [https://youtube-tailwind.netlify.app](https://youtube-tailwind.netlify.app)
*GIF*
![Youtube](https://dev-to-uploads.s3.amazonaws.com/i/trfnfrlheq5jzamui20a.gif)

*Image*
![YouTube](https://dev-to-uploads.s3.amazonaws.com/i/1px6on7uofb8qvsecxb8.png)

We will be cruising through the following topics
- What the heck is tailwind?
- What did I build?
- How should I set up, design using tailwind!

## What the heck is tailwind?
Tailwind CSS is a highly customizable, low-level CSS framework that gives you all of the building blocks you need to build bespoke designs without any annoying opinionated styles you have to fight to override. I have taken this definition from [here](https://tailwindcss.com/).

The documentation is really beautiful, I personally finished reading documentation.

## What did I build?
Once I completed scanning the docs, the best way to check oneself is to do some project. So I decided to replicate [YouTube](https://youtube.com/). It was decent enough, took some time initially later cruised well.

The overall time consumed was (calculated using wakatime) 
![Time](https://dev-to-uploads.s3.amazonaws.com/i/fjs2d7yqmbmahbrxf17l.png)

- Step 1
_Layout_
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/xi20022myunt1mn8rx9k.png)
- Step 2
_Top Nav_
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/guq65w5yywt2h7lrg9qd.png)
- Step 3
_Side Nav_
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/7z7an6wx6vmkw78zexhu.png)
- Step 4
`Et Voila!`
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/hkvxd6wsr4tq0v3iaji6.png)

## How should I set up, design using tailwind!
Stay tuned coming up in future posts.

Peace ✌🏻,
Rohith Gilla.

P.S: I am planning to replicate a few other websites too if you have any suggestions please comment.
CovidHelpBot Twillio Hackathon Submission
Tags: twiliohackathon
Published: 2020-04-29 20:27:11

[Comment]: # (All of this is placeholder text. Use this format or any other format of your choosing to best describe your project.)

[Reminder]: # (Make sure you've submitted the Twilio CodeExchange agreement: https://ahoy.twilio.com/code-exchange-community)

[Important]: # (By making a submission, you agree to the competition's terms: https://www.twilio.com/legal/twilio-dev-hackathon-terms)


## What I built
I built a chatbot that Helps in relieving the stress of health workers by helping people know their present covid-19 status and advises them on what to do based on their answers. It provides people with live updates of the virus across over 100+ countries, and also enlightens people on the most common FAQ's and myths around the covid-19 virus.

## Demo Link
 It is a chat based bot integrated with whatsapp and programmable chat

## Link to Code
Everything was done on the Twiliio console.

## How I built it (what's the stack? did I run into issues or discover something new along the way?)
####How i built it
I built a chatbot with nodejs, using Twilio autopilot and Twillio functions,
I also integrated it with whatsapp and programmable chat.
![Whatsapp Simulation](https://twiliohackathon.s3.amazonaws.com/twiliohack1.jpg)
![ mssg Simulation](https://twiliohackathon.s3.amazonaws.com/twiliohack2.jpg)
####Stack
The project was fully built on nodejs.

###Issues
* Ran into some issues with the autopilot simulator, I the autopilot simulator was not adding line breaks in the output even when i added it in the code.
![code](https://twiliohackathon.s3.amazonaws.com/twiliohack3.PNG)
![simulator](https://twiliohackathon.s3.amazonaws.com/twiliohack4.PNG)
* Could not add images to my with my text, throws an error
![simulator](https://twiliohackathon.s3.amazonaws.com/twiliohack6.PNG)

## Additional Resources/Info
![image](https://twiliohackathon.s3.amazonaws.com/twiliohack8.PNG)
![image](https://twiliohackathon.s3.amazonaws.com/twiliohack7.jpg)
What is your top tool that most devs would be surprised you use regularly?
Tags: discuss
Published: 2020-04-29 20:23:39

---
title: What is your top tool that most devs would be surprised you use regularly?
published: true
description: 
tags: discuss
---

DEV is in the process of launching a podcast and we'd love for you to be involved! We're recording the episodes in advance, and this week we'd like to know:

What is your top tool that most devs would be surprised you use regularly?

If you'd like to participate, please:

- Call our Google Voice at at +1 (929)500-1513 and leave a message 📞
- Send a voice memo to pod@dev.to 🎙
- OR, if you don't want your voice recorded...just leave a comment here and we'll read your response aloud for you 🗣

![tools-stop-motion](https://media.giphy.com/media/3oKIPqsXYcdjcBcXL2/giphy.gif)

Thank you!
We just want people to keep in touch
Tags: startup, motivation, management, workingfromhome
Published: 2020-04-29 20:23:11

Several weekends of confinement have helped us to shape and implement one of those projects we had in our personal backlog.

Because of the distance we are from each other, our friendship has relied heavily on phone calls and video calls. Some time ago, we started calling them, “remote coffees”.

> Hey man, when are we having our next remote coffee?

We met at the University, we spent about two years working for the same company and we have kept in touch during these years thanks to our “remotte coffees” and also due to the many concerns about technology and productivity we have in common. “This conversation should have been recorded!”. We are sure this same thought came to you after some either formal or informal conversation you had. The challenge was simply to place a product live with as much free time as this quarantine allows, and here it is. We are not launching a super business, nor did we intend to, we both are fully dedicated to something else. We just wanted to launch this MPV and share it with friends and contacts. We do have a lot more functionalities and ideas to put on it but, if you want to try it, those ideas will be much better by taking into account your honest feedback.

Let’s see what we can build together.

Sign up and enjoy nice talks with whoever you like: family, friends or business: www.remottecoffee.com
Another Way to Create Docker Images
Tags: docker, azure
Published: 2020-04-29 20:20:40

Found this out and thought it was rather interesting. The #azcli has a command to build Docker images.

`az acr build`

 It allows you to build a docker image right on the AZ CLI. 

https://docs.microsoft.com/en-us/cli/azure/acr?view=azure-cli-latest#az-acr-build
Next Permutation
Tags: javascript
Published: 2020-04-29 20:01:15

Today's [Leetcode](https://leetcode.com/problems/next-permutation/) problem is quite interesting and, personally, I found the in-line array mutation tricky to get right. 

We are asked to return the next highest number possible with a given array, falling back to sorting it by ascending order if the source value is the highest possible for that set of numbers.

Sound like a couple of loops to me!

```js
var nextPermutation = function(nums) {
  for (let i = nums.length; i > 0; i--) {
    if (nums[i - 1] < nums[i]) {
      let nextHigherIdx = Infinity;
      for (let j = i; j < nums.length; j++) {
        if (nums[j] > nums[i - 1] && nums[j] <= (nums[nextHigherIdx] || Infinity)) {
          nextHigherIdx = j;
        }
      }
      //replacement must be in-place and use only constant extra memory
      [nums[i - 1], nums[nextHigherIdx]] = [nums[nextHigherIdx], nums[i - 1]];      
      nums.splice(i, nums.length - i, ...nums.splice(i).reverse());
      return;
    }
  }
  //sorted in ascending order as fallback
  nums.sort((a, b) => a - b);
};
```
//Runtime: 52 ms, faster than 99.41% of JavaScript online submissions
//Memory Usage: 35 MB, less than 33.33% of JavaScript online submissions
How to write an AWS IAM Policy to set Service Limits
Published: 2020-04-29 19:52:15

I am new to writing AWS IAM Policies but am asked to write a policy to set  a quota limit to 40 for an AWS resource. I am not getting a handle on this so could someone please help and point out what I might be missing or what I need to correct or add?
Not sure what needs to be provisioned as a variable for All Regions, Accounts, and QuotaCode

{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Sid": "TestingServiceLimits",
      "Effect": "Allow",
      "Action": [
        "servicequotas:RequestServiceQuotaIncrease"
        ],
        "Resource": "arn:aws:servicequotas:<All Regions>:<All Accounts>:vpc/*"
      },
        "QuotaName": "Rules per Network ACL",
        "Adjustable": true,
        "QuotaArn": "arn:aws:servicequotas:<Region>:<AccountID>:vpc/<Variable here - same as QuotaCode below>"
        "Value": 40.0,
        "ServiceName": "Amazon Virtual Private Cloud - VPC",
        "GlobalQuota": false,
        "ServiceCode": "vpc",
        "QuotaCode": "<Variable here?>"
        "Unit": "None"
    ]
}