teleren/devto huggingface dataset:
Azure Fundamentals: Azure Portal
Tags: azure, 100daysofcloud, career, beginners
Published: 2020-06-24 20:43:25

## Azure Portal

The `Azure portal` is one of several management tools used in the Azure ecosystem. It is a web-based, unified console that provides an alternative to command-line tools.

It is available in every datacenter. This makes it designed for resiliency, low access latency, and high availability.

You can manage your Azure subscription with the Azure portal.

Within this tool you can build, manage, and track everything from simple web apps to complex cloud deployments.

The Azure portal's home page houses a menu with 4 main links:

- Create a resource - allows you to create a new entity managed by Azure like a virtual machine or storage accounts.
- Home- redirects you to the portal's main page.
- Dashboard- Your dashboard is a place to manage all the major resources you use on Azure. You can also customize the dashboard.
- All services

![Azure portal homepage and menu](https://dev-to-uploads.s3.amazonaws.com/i/5sbb5ouptf96wc8yatv1.png)

The predefined favorites are the most used resources in the Azure community.

You can customize these favorites to display the resources you and/or your team use most.

You can also view your subscriptions and notifications from the Azure portal homepage.

There are also predefined **favorites** of the most used resources by the Azure community. 

You can customize these favorites to display the resources you and/or your team use most.

You can also view your subscriptions and any notifications from the Azure portal homepage.

From the portal you can navigate to other Azure management tools like [Azure CLI](https://docs.microsoft.com/en-us/cli/azure/?view=azure-cli-latest) and [PowerShell](https://docs.microsoft.com/en-us/powershell/azure/?view=azps-4.3.0).

## Azure Preview Portal

The **Azure preview portal** is a web-based unified console that provides access to new features that are in:

- Preview
- Beta
- Other pre-release

If you want to test preview features you should use [preview.portal.azure.com](http://preview.portal.azure.com/)

If you stable-release and production-ready features you should you use [portal.azure.com](http://portal.azure.com/)

**References:**
[Azure portal documentation](https://docs.microsoft.com/en-us/azure/azure-portal/)

This is one of the topics covered in the **Exam AZ-900:** Microsoft Azure Fundamentals. To learn more about the management tools and other fundamentals needed for the exam, check out ExamPro's newest course [Azure Fundamentals Certification (AZ-900) 2020](https://www.exampro.co/az-900)
What are the challenges to getting a job in tech? If possible, share advice to overcome that challenge!
Tags: discuss, career, beginners, developer
Published: 2020-06-24 19:50:43

---
title: What are the challenges to getting a job in tech? If possible, share advice to overcome that challenge!
published: true
description: Curated answers to a question from the Code Connector community Slack channel
tags: #discuss #career #beginners #developer
---
1. My biggest challenge is me. Mentality, focus, motivation, consistency, belief factor, etc.
Advice: Do not give up.

2. Standing out among other beginners because you all have similar technical skills.
Advice: Be able to tell your story and make friends in the tech community who can vouch for your technical skills.

3. You can overcome the barrier of getting into tech by being okay with "programming adjacent" jobs such as a researcher, data entry, or analyst.

4. The huge challenge is the experience barrier along with transitioning from a non-tech field.

5. The platform(s) used to apply for jobs are different.
Advice: Keep a copy of your resume in different formats.

6. Tracking the progress of all your applications.
Advice: Create a spreadsheet that shows the company, job id, and what stage of the interview you're in.

7. Do not get discouraged in the process.
Advice: You don't just want any job, you want the right job for you. It's okay for the company and yourself to be picky.

Contributors: Corey McCarty, Azhya Knox, Dennis Kennetz, Lawrence Lockhart, Demetria Farewell, Brad Garropy

[Code Connector](https://codeconnector.io/) is a non-profit that's organized tech meetups to help people start their journey into tech. You can join our daily conversations by clicking this link: [Code Connector slack channel](https://bit.ly/2Ywnzqc).
Altere o codigo abaixo para que a frase venha acompanhada de uma imagem
Published: 2020-06-24 20:20:11

import React, {useEffect, useState} from 'react';
import { Text, View, StyleSheet, Button, Image} from 'react-native';
import Constants from 'expo-constants';
import ImagesExample from './image_example.js'


export default function App1() {

  const [msg, setMsg] = useState(null);

  function carregar() {
    fetch("https://allugofrases.herokuapp.com/frases/random")
      .then(resp => resp.json())
      .then(json => setMsg(m => json)); 
      
  
  }

  useEffect(() => {
    carregar();
  },[]);

  

  return (
    <View style={styles.container}>
      <View style={styles.box}>
        <Text style={styles.paragraph}>
          {msg ? msg.frase : 'Sem Mensagem'}
        </Text>
        <Button onPress={carregar} title="clique me"/>
      </View>
    </View>
  );
}


const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
  box: {
    marginHorizontal: 50,
  },
  paragraph: {
    margin: 24,
    fontSize: 18,
    fontWeight: 'bold',
    textAlign: 'center',
  },
});
How to Set up your Serverless Environment and Get Started in Less than 2 Minutes!
Tags: serverless, cloud, programming
Published: 2020-06-24 20:06:41


{% youtube 7d9t3Fy2IDY %}

Do you want to get started with stateful Serverless apps but you think it takes way too long to get set up and going? I’m going to show you how Nimbella enables you to quickly and easily get started building and deploying applications to the cloud.

To begin, you’ll need to go to Nimbella’s [Serverless Cloud App Development Website](https://nimbella.com/) and create an account. You can either use your email and create a password. Or you can sign up using your GitHub account. Once you’re done with that, you can log in and get started.

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

Once you’re logged in, you’ll be directed to a page where you’ll get the Nimbella Command Line Interface (CLI) which you’ll use to deploy your app to the cloud.

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

If you scroll to the bottom of this page, you’ll see download buttons for 3 Nimbella CLI’s, as shown below: One each for Mac, Linux, and Windows.

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

When you click one, you’ll get a .exe file that will help you install that Nimbella CLI.

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

Once you have the .exe running, then:

- Select the components you want to install,
- Select where you want the destination folder to be
- Select the last button to download the CLI.

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

Once that’s done, you’re all set to start launching applications to the Serverless cloud! You can confirm the Nimbella CLI is installed by checking the version of nim.

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

In the next blog, we’re going to go over our example projects and show you how simple it is to deploy and experiment with Nimbella’s current examples of Stateful serverless applications including OCR, Stock Trading, and a Chat application.

Written by Jamie Dawson ([Twitter](https://twitter.com/JamieDawsonCode), [LinkedIn](https://www.linkedin.com/in/jamie-dawson-205351113/))
Website feedback
Tags: webdev, help, feedback
Published: 2020-06-24 19:49:08

---
title: Website feedback
published: true
description: Website feedback
tags: #webdev #help #feedback
//cover_image: https://dev-to-uploads.s3.amazonaws.com/i/prr7a4wqjfvcx3ozjbqg.png
---


Hello everyone,

I am working on a website **"Exploring Race & Racism"** that is a repository of books, movies etc about race. 

I am almost done with the structure of the site, so I am looking for feedback on what I can improve/add to make it better.

Tech: Gatsby/React, Tailwinds css
CMS: Airtable
Deployed: Netlify 
Link: https://equality.netlify.app/

Any feedback will be greatly appreciated.

Cheers! 

Kenny ✌🏽 + ❤️
Counting React Children
Tags: react, webdev, javascript
Published: 2020-06-24 19:29:57

`Children.count()` and `Children.toArray().length` have different outputs. We are going to explore how and why.

Consider a React component:

```javascript
import React, { Children } from "react";

function Wrapper({ children }) {
  const count = Children.count(children);
  const countArray = Children.toArray(children).length;
  return (
    <section>
      <p>
        <pre>Children.count:</pre>
        {count}
      </p>
      <p>
        <pre>Children.toArray:</pre>
        {countArray}
      </p>
      {children}
    </section>
  );
}

export default Wrapper;
```

Now, to render this component we are giving it:

```javascript
<Wrapper>
  <h1>Hello CodeSandbox</h1>
  <h2>Start editing to see some magic happen!</h2>
</Wrapper>
```
Now, both counts listed in the UI would point to 2. What about if we change the Wrapper children to:

```javascript
<Wrapper>
  <h1>Hello CodeSandbox</h1>
  {false && <h2>Start editing to see some magic happen!</h2>}
</Wrapper>
```

Now, `Children.count` will report 2 while `Children.toArray().length` will report 1. 

This is because `Children.count` is counting the number of slots that children has. Whether it be `false`, `null` or `undefined`, it's still a slot and `Children.count` does a good job of counting it. From the docs:

> number of times that a callback passed to `map` or `forEach` would be invoked.

`Children.toArray` on the other hand, converts Children it receives to an opaque structure containing only the elements that JSX can render. That's how it reports that there is only a single child inside `Wrapper`, the other one is conditionally false.

You often see people try to weed out invalid children using this property. For eg. [Chakra UI](https://github.com/chakra-ui/chakra-ui/blob/master/packages/utils/src/react-helpers.ts#L49-L59)

```javascript
/**
 * Gets only the valid children of a component,
 * and ignores any nullish or falsy child.
 *
 * @param children the children
 */
export function getValidChildren(children: React.ReactNode) {
  return React.Children.toArray(children).filter((child) =>
    React.isValidElement(child),
  ) as React.ReactElement[]
}
```

Here's a `Children.count` usage example from [Ant Design](https://github.com/ant-design/ant-design/blob/7212a9746d9f21933fda26cac21f81604da3738b/components/carousel/index.tsx#L52-L56):

```javascript
componentDidUpdate(prevProps: CarouselProps) {
  // If the number of Children (even if something was conditionally rendered) has changed, then go to the first slide.
  if (React.Children.count(this.props.children) !== React.Children.count(prevProps.children)) {
    this.goTo(this.props.initialSlide || 0, false);
  }
}
```

---
I write a once a month newsletter about catching up with the Web and it's ever evolving developer experiences. Feel free to browse the [archives](https://buttondown.email/agney/archive) and of course, [subscribe](https://buttondown.email/agney/)
100 Days of SwiftUI — Day 25
Tags: 100daysofswiftui
Published: 2020-06-24 19:14:56

---
title: 100 Days of SwiftUI — Day 25
published: true
date: 2020-06-24 19:13:59 UTC
tags: 100daysofswiftui
canonical_url: https://zeitschlag.net/100-days-of-swiftui-day-25/
---

This is the first time in ten days that I attended the SwiftUI-course by Paul Hudson. I'm taking a few days off from work right now, but the week before my vacation was pretty stressful and I didn't have the energy in the evenings. So I missed a few days.

But not anymore! I'm back on track, hopefully. I just did the [25th day](https://www.hackingwithswift.com/100/swiftui/25) and it was all about consolidation: There were some recap and I had to apply some things I learned about ten days ago. That was pretty hard, actually, as it feels like that I forgot plenty of things in those ten days I didn't do any SwiftUI.

At the end of the day, there was the [challenge](https://www.hackingwithswift.com/guide/ios-swiftui/2/3/challenge) to build a rather simple version of [Rock paper scissors](https://en.wikipedia.org/wiki/Rock_paper_scissors). Mine looks very basic, but it works:

![](https://zeitschlag.net/content/images/2020/06/Simulator-Screen-Shot---iPhone-SE--2nd-generation----2020-06-24-at-21.02.19.png)

I hope, that I can gain some speed again in the next couple of days and I really appreciated, that Paul gave some hints and reminded me, that:

> This should be a fun exercise

Beginning (again) is hard, I guess. But I did it, at least for today. I'm looking forward to tomorrow, again.
What's the last technical book you read?
Tags: discuss, javascript, watercooler, beginners
Published: 2020-06-24 19:03:03

I'm currently speeding through and enjoying, ["JavaScript Application Design: A Build First Approach"](https://www.amazon.com/JavaScript-Application-Design-Build-Approach/dp/1617291951) by Nicolas Bevacqua. 

The only downside to this fantastic book is that it was written in 2015 and doesn't (so far) use ES6. But it's a comprehensive JavaScript book I wish was recommended more to beginners.

For reference, taking a build first approach means dedicating a good chunk of the book towards:
- understanding and creating build tasks
- truly exploring environment workflows
- building out continuous deployments
- writing modular, easy to test code

This is counter to most intro books that focus on JavaScript syntax and standalone concepts.
What’s New in Angular 10
Tags: angular, javascript, node, typescript
Published: 2020-06-24 18:54:48

Angular 10, a major upgrade to the popular web development framework, has reached the release candidate stage, with six release candidates published as of June 17, 2020. The upgrade to the Google-developed, TypeScript-based framework focuses more on ecosystem improvements than new features.
Angular 10 is set to be smaller than previous versions of Angular. A target date for an Angular 10 production release is still to be determined. Angular 9.0 became generally available on February 6, 2020, followed by Angular 9.1 on March 25, 2020. Angular 8.0 arrived on May 28, 2019.

{% medium https://medium.com/javascript-in-plain-english/whats-new-in-angular-10-20329a734251 %}
What's the difference between the SUB SELECT and LEFT JION SQL query? 
Tags: sql
Published: 2020-06-24 18:54:29

In the following example, every query clause has the same result, so what is the difference between the two clauses of the query in terms of speed in returning data from database? 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/emfi26s1menwwz440wsy.png)
Elixir Meetups and Mentorship
Published: 2020-06-24 18:50:44

---
title: Elixir Meetups and Mentorship
published: true
description: Announcements: Looking to offer mentorship and meetup Webhosting for elixir user groups. 
tags: 
//cover_image: https://direct_url_to_image.jpg
---

First: Hello, I'm Josh Chernoff. 

I'm a backend dev with a current focus on Elixir and LiveView. 
I also at one time helped out with the local elixir user group in Portland Oregon. I'm currently looking for more excuses to make stuff with Elixir and LiveView to satisfy my own drive. I figured why not help out the community while I'm at. So I've devised a small project that I would like to offer to the public in one of two ways. 

1# If you are new to elixir and want to learn but are not sure how to get started, I'm offering some remote paired programming mentorship as I build https://github.com/PDX-Elixir-Group/elixir.group. We can team up over vscode via https://visualstudio.microsoft.com/services/live-share/

2# elixir.group is a simple white label app for hosting free elixir meetups sites that I'm currently developing.
Think http://calagator.org/ or http://meetup.com exclusively for elixir meetups. 

Accounts will be able to signup subdomains like https://[some_group_name].elixir.group etc. The app technically will be small enough that I should be able to host for free without significant cost to me. Basically so long as I can afford a $10 a month server this thing should be able to live on or possibly it gets a free host somewhere 🤷‍♂️ IDK. 

I would like to actively start coding, but I'm holding off to see if anyone wants to join along for the ride. 

If either of these interest you please feel free to reach out  - Josh Chernoff ✌️
Case Statement in Typescript
Tags: typescript, javascript, webdev, functional
Published: 2020-06-24 23:17:31

---
title: Case Statement in Typescript
published: true
date: 2020-06-24 18:33:03 UTC
tags: typescript, javascript, webdev, functional
canonical_url: https://pianomanfrazier.com/post/case-statement-in-typescript/
---

One of my favorite features of functional languages like Elm is pattern matching. Here is an example:

```elm
type State
    = Loading
    | Error
    | Ok

stateToString : State -> String
stateToString state =
    case state of
        Loading ->
            "Loading ..."
        Error ->
            "Something went wrong."
        Ok ->
            "It's all good"
```

I found a simple way to provide an action for every case of a TypeScript enum.

```ts
enum State {
    Loading,
    Error,
    Ok,
}

const STATE_MAP = {
    [State.Loading] : () => "Loading ...",
    [State.Error] : () => "Something went wrong.",
    [State.Ok] : () => "It's all good",
}

function stateToString(state : State) : string {
    return STATE_MAP[state]();
}
```

[Link to TypeScript playground](https://www.typescriptlang.org/play/#code/KYOwrgtgBAygLgQzsKBvAUASADIHsEAmAliAOYA0WAogE4242WYDyA1pQL7roDGuIAZziwAKgEERVAPoBZMQAUoAXjRYA2vCTAAdHkIlSAXSgAuKAAoAlMoB8UAER7iZKNrf2mGxMm216NYzMrWwcYXAhgOAALAygAd1BhOPoybQ91TR82QItrJTt7AEk4AHIBKAQAG0qoUlxcAnSudAAzMBAeOCJ+KCEtEVx4GgNzPuRTWG9gazMhYZcMTBpIsBoQUQlpOXk1MeBDKwBudGa+QVxKnUrcUlGpgaGRzJ0nA0tLQ6A)

Usually TypeScript won't allow bracket notation to access properties of an object. In this case the compiler knows that all cases of `State` are accounted for and can thus be used to index into the object.

Try removing one of the states from `STATE_MAP` and the TypeScript compiler will yell at you.

```txt
Element implicitly has an 'any' type because expression of type 'State' can't be used to index type '{ 0: () => string; 1: () => string; }'.
Property '[State.Ok]' does not exist on type '{ 0: () => string; 1: () => string; }'.
```
Practical Functional Programming in JavaScript - Data Last
Published: 2020-06-24 18:09:38

Welcome back to my series on practical functional programming in JavaScript. This time, I'll elaborate on a core functional programming concept that causes a lot of confusion for newcomers to functional programs: **data last**.

For the most comfortable read, you should have knowledge of [Array.prototype.map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map) and decent programming fundamentals.

Note: I use methods from my functional programming library **rubico** in a couple places to illustrate my points. I link documentation where applicable.

# What is data last?

Data last is a programming convention wherein the data of a procedure is provided as the last parameter. This is in contrast to _data first_, where the data is the first parameter - you are probably more used to seeing this one.

This is data first. Quite literally, the Array (our data) is first.
```javascript
[1, 2, 3, 4, 5].map(number => number * 2) // > [2, 4, 6, 8, 10]
```

This is data last. The Array (our data) is now last.
```javascript
map(number => number * 2)([1, 2, 3, 4, 5]) // > [2, 4, 6, 8, 10]
```

`map` in this case is a [partially applied](https://www.digitalocean.com/community/tutorials/javascript-functional-programming-explained-partial-application-and-currying) function from rubico.

[Documentation for map](https://doc.rubico.land/#map)

# Why does this matter?

Consider the program
```javascript
const double = x => x * 2

const square = x => x * x

const doubleSquare = n => {
  const doubled = double(n)
  const squared = square(doubled)
  return squared
}

doubleSquare(3) // > 36
```

`doubleSquare` here is rather hand-holdy and imperative. However, since data is last for both `double` and `square`, we can rewrite `doubleSquare` using the functional approach in terms of just the two functions.

```javascript
const double = x => x * 2

const square = x => x * x

const doubleSquare = pipe([
  double,
  square,
])

doubleSquare(3) // > 36
```
[Documentation for pipe](https://doc.rubico.land/#pipe)

Look ma, no variables! Data last allows us to write larger programs as compositions of smaller ones. This is a powerful concept for code reuse, and core to the functional programming paradigm. This idea is extensible at any scale; from small scripts to production workloads, anything you can represent with a function falls under this model.

I'll leave you today with a couple excerpts from the [Unix philosophy](https://en.wikipedia.org/wiki/Unix_philosophy):
> Write programs that do one thing and do it well.
> Write programs to work together.

We just discovered a powerful way for programs to work together via a simple convention: data last. Next time, we'll examine how we can consistently write programs that do one thing and do it well. Be on the lookout for _Side Effects and Purity_.

Edit: You can find the rest of the series on rubico's [awesome resources](https://github.com/a-synchronous/rubico#awesome-resources)