teleren/devto huggingface dataset:
.NET Conf: Focus on Blazor
Tags: blazor, dotnet, aspnetcore
Published: 2020-02-09 23:40:41

---
title: .NET Conf: Focus on Blazor
published: true
date: 2020-01-15 22:28:21 UTC
tags: Blazor,DotNET,AspNetCore
canonical_url: https://chrissainty.com/net-conf-focus-on-blazor/
---

 ![.NET Conf: Focus on Blazor](https://chrissainty.com/content/images/2020/01/focusonblazor.png)

I was fortunate enough to be asked to speak at the first of a new series of one day virtual conferences, .NET Conf: Focus on Blazor. This event is the first of many focus events being run throughout the year by Microsoft and the .NET Conf team. Each event deep dives on a specific technology with a mix of speakers from Microsoft and the community.

<!--kg-card-begin: image-->

![.NET Conf: Focus on Blazor](https://chrissainty.com/content/images/2020/01/blazor-1.jpg)

<!--kg-card-end: image-->

If you've not heard of [.NET Conf](https://www.dotnetconf.net/) before, it's a free 3 day virtual conference run by Microsoft to celebrate all things .NET. It's a fantastic event which covers a wide range of topics from top speakers, both from Microsoft and from the community.

The idea behind the focus event series is to provide single day virtual conferences, in the same style as .NET Conf, which target a specific technology. These events will be spread out throughout the year, where-as the full .NET Conf event is only held once a year. The other great thing about these events is that they are all recorded and made available via the [Channel 9 site](https://channel9.msdn.com/Events/dotnetConf/Focus-on-Blazor) and [YouTube](https://www.youtube.com/watch?v=fgneZz-4Foc). So if you're unable to tune in and watch live, then you can catch-up at your earliest convenience.

I gave a talk covering routing in Blazor. The talk is divided into two halfs, the first half is all about understanding the various parts which make up routing in Blazor. The second half is spent in Visual Studio running through various demos. There are definitely some deep dive parts, but hopefully it had something for everyone to take away.

There were so many great talks which covered a wide range of Blazor topics such as UX, state management, testing, authorization and authentication, custom component design, the list goes on. All the speakers did an amazing job, I really think the event was a great success and I'm very proud to have been a part of it.

If you didn't get the chance to watch the event live, then don't worry. I've linked the video of the whole event below so you can catch up on all the sessions - Including my talk on routing in Blazor.

<!--kg-card-begin: embed-->

<iframe width="480" height="270" src="https://www.youtube.com/embed/fgneZz-4Foc?feature=oembed" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

<!--kg-card-end: embed-->
Configuring environmental variables for Go with ~/.bash_profile
Tags: go, bash, env
Published: 2020-01-15 21:57:54

---
title: Configuring environmental variables for Go with ~/.bash_profile
published: true
description: A short tutorial for setting environmental variables within the bash_profile and using them variables in Go.
tags: #go #bash #env 
---

<p align="center">
  <img width="30%" height="30%" src="https://i.ibb.co/MSRh67Z/15f267a59b051238a49a523206b9f9a798aca8d3.png"/>  
</p>

Before sharing a project that uses credentials, it is important to show a user how to save their credentials within the [*bash_profile*](https://fileinfo.com/extension/bash_profile). The reasoning for this is security, and it makes variables globally accessible within the architecture. The example is specifically for OSX and Linux.

Open the *~/.bash_profile* using your favorite text editor using Terminal.  

```bash
nano ~/.bash_profile
```

Create a new variable and [export](https://www.computerhope.com/unix/bash/export.htm) it. Save and exit.

```go
export API_KEY="KEY"
export API_SECRET="SECRET"
```

Reload the variables using [source](https://linuxize.com/post/bash-source-command/).

```bash
source ~/.bash_profile
```

Create a new Go program and name it *main.js*. Add the [fmt](https://golang.org/pkg/fmt/) and [os](https://golang.org/pkg/os/) libraries.

```go 
package main

import(
  "fmt"
  "os"
)

func main(){
	// ... code here
}
```

Use the [os](https://golang.org/pkg/os/) library's [*Getenv*](https://golang.org/pkg/os/#Getenv) function to retrieve the environmental variable and print them out. 

```go
APIkey := os.Getenv("API_KEY")
APIsecret := os.Getenv("API_SECRET")
```

Print out the *APIkey* and *APIsecret* using [fmt](https://golang.org/pkg/fmt/). 

```go
fmt.Println(APIkey, APIsecret)
```
Largest Culture Driven Job board "HowsItLike"
Tags: career, remote, jobs, hiring
Published: 2020-01-15 21:55:09

Hi All! Happy New Year!!

We built 'How's It Like' to help people find jobs through culture and work environment. Our mission is to share how's it like to work at a company even before you apply to one of the roles. 

We are looking forward to be the largest and finest culture fit job board!

Hope this adds some value in your job search process. Looking for your valuable feedback!

fyi - We are focusing on Developer jobs
Mapping Objects in React
Tags: react, javascript, beginners, vwc
Published: 2020-01-15 21:47:49

I am a student with [Vets Who Code](https://vetswhocode.io/). VWC is a veteran-led and operated non-profit that focuses on training veterans, like me, in web development and software engineering principles, free of charge with the focus on starting careers as JavaScript developers. 

The past couple of weeks we have been learning React. One of the first things we learned was how to map an array into a list (`<li>Something here</li>`) using the example on the [React docs website](https://reactjs.org/docs/lists-and-keys.html). The example they use is:

    const numbers = [1, 2, 3, 4, 5];
        const listItems = numbers.map((number) =>
          <li>{number}</li>
        );
Pretty simple, but if you wanted to use `BrowserRouter` found in [React Router API](https://reacttraining.com/react-router/web/guides/quick-start) to map a navigation bar it's not so straightforward. The long way to do it is type it all out, like this:

```javascript
    const NavBar = props => {
	    return  (
		    <Router>
			    <ul className="nav">
				    <li>
					    <Link to="About">About</Link>
				    </li>
				</ul>
				 <ul className="nav">
				    <li>
					    <Link to="About">About</Link>
				    </li>
				</ul>
				...and so on
            </Router>
```

What I wanted to do was combine the example on the React website and do it in the `<Router>`. I thought, why not put the path and the page in an object and then iterate through them?
Here is what I came up with:

#### NavBar component

```javascript
const  NavBar = props =>  {
	const  links = props.links;
	const  items = Object.entries(links).map(([key, value])  =>  {
	return  (
		<li key={key.id}>
			<Link  to={value}>{key}</Link>
		</li>
	);
});
return  (
<Router>
	<ul className="nav">{items}</ul>
</Router>
```
#### App Component

```javascript
const links = {
  Home: "./",
  Resume: "./resume",
  Projects: "./projects",
  About: "./about",
  Contact: "./contacts"
};
function App() {
  return (
    <div className="App">
      <Header />
        <NavBar links={links} />
      <Button />
    </div>
  );
}
export default App;
```

I am amazed at how powerful React is and what can be done with it. While I am only still hitting the wavetops, I can see why it is one of the [most popular libraries](https://www.npmjs.com/browse/depended) in JavaScript. 

Any comments? Let's start a discussion below.

*Hey while you're here, Vets Who Code could sure use your help. Since 2014 they have been successfully training veterans in web development. A donation will be used to teach veterans how to program in javascript and help them get jobs in our amazing software engineering industry for free. To date they have exclusively helped over 150 veterans find careers as engineers at zero cost to veterans and spouses! You can donate here: https://vetswhocode.io/donate*
Is the JAMstack really better for SEO?
Tags: jamstack, jamuary
Published: 2020-01-15 20:28:15

A common argument in favor of the JAMstack is that serving sites statically via a CDN is better for SEO. Compared to their dynamic counterparts, static assets excel when it comes to SEO chiefly because of performance. A faster load time means better SEO since search engines prioritize load times when indexing a site. Even so, relying on the nature of static content (to load fast) alone is insufficient for a healthy SEO strategy. It fails to account and optimize for other metrics like mobile traffic, and how your site performs within the Search Engine Results Page (SERP). Because JAMstack sites favor pre-rendering over server side rendering, structuring content to meet SEO goals is in fact a small, albeit intentional task. 

To start, sites can make the most of “search engine presence” by building sitemaps so the bots can effectively crawl for content. Sitemaps are trivial to build when working with static sites since the content is already accessible and ready for organizing. Moreover, because many static sites are built with static site generators that have site map functionality either built in or available via a plugin, creating site maps is fairly trivial. Structured data is an added factor for good SEO that is made accessible with the JAMstack. Search engines prioritize content based on its relevance to a search term. [JSON-LD is a schema that many search engines use to disambiguate and establish facts around entities](https://moz.com/blog/json-ld-for-beginners). This directly correlates to a more organized web that search engines can easily parse. In the realm of static sites, adding JSON-LD is pretty straightforward. Instead of having to embellish your server rendered content specifically for the bots, JSON-LD can be added in in the build step itself. By running a simple script that injects the necessary data directly into your HTML, you’ll be up and running with structured content without having to separately create content for human eyes and bots. When it comes to optimizing your content, the JAMstack architecture sets your site up perfectly to hit your SEO goals. Actually reaching those goals however may take a bit of leg work. For more practical tips and tricks on building SEO friendly JAMstack sites, [check out this article.]( https://www.netlify.com/blog/2016/06/17/five-seo-rules-for-your-jamstack-site/?utm_source=devto&utm_medium=seotips-div&utm_campaign=devex)
JavaScript Series – What is JavaScript? – Part 1
Tags: javascript, codenewbie, beginners, webdev
Published: 2020-01-15 21:24:46

I am starting a new mini series on JavaScript. I’m starting it from zero. Anyone can start learning from here. My goal is helping others while learning! I know about JavaScript and I’m working on a MERN tech stack. But I think it is not a bad idea to revise the JavaScript from scratch and helping others in this time. If you have any questions, shoot on the comment session or you can directly ask me in my social media. Social media links are in the last part of today’s lesson! Let’s learn JavaScript together.

So what is JavaScript ?

Ans : A programming language!

I’m funny right ?! Sorry about my joke!

JavaScript, often abbreviated as JS, is a high-level, just-in-time compiled, multi-paradigm programming language that conforms to the ECMAScript specification. JavaScript has curly-bracket syntax, dynamic typing, prototype-based object-orientation, and first-class functions. (Wiki)

So mainly JavaScript is a programming language which helps us to make many things! But mostly we knew it for web development.

Ever select anything from drop down menu ? That one made by JavaScript. JavaScript changed the whole things of web interactions.

You can use JavaScript in everywhere now. Like – Web, mobile app, desktop app, robotics, machine learning etc sector.

JavaScript has the most job in the world, so you can learn it for a better career!

Some learning resources –
- https://developer.mozilla.org/en-US/docs/Web/JavaScript
- https://www.w3schools.com/js/
- https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/basic-javascript/

This is all for the first day! Just dig down the links and learn a little about JavaScript! We’ll learn about JavaScript types tomorrow!


You can see the graphical version here
{% instagram B7WrfR3AzXn %}

Originally it published on [nerdjfpbblog](https://blog.nerdjfpb.com/javascript-part-1/). You can connect with me in [twitter](https://twitter.com/nerdjfpb) or [linkedin](https://www.linkedin.com/in/nerdjfpb/) !
Kenapa Ingin Belajar Coding?
Published: 2020-01-15 21:00:41

*Artikel ini merupakan bagian dari modul Pengenalan Coding di Kelas Newbie Komunitas Coding Mum Indonesia 2020*

Dalam bukunya 7 Kebiasaan Orang yang Sangat Efektif, Stephen R. Covey menegaskan bahwa untuk menjadi sukses, Anda harus "mulai dengan akhir dalam pikiran."

Pertimbangkan alasan Anda sendiri untuk masuk ke pengkodean ... Untuk apa tujuan Anda?

Apa tujuan utama Anda?

Apakah Anda mencari hobi yang menyenangkan, perubahan karier, pekerjaan yang fleksibel di mana Anda bisa lebih dekat dengan keluarga Anda?

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/g148xxkjwgvuwo3te0p0.png)

Seluruh usaha belajar Anda harus dipusatkan untuk mencapai impian yang satu ini.

Anda bahkan dapat mencoba menuliskan tujuan Anda, dan meletakkannya di suatu tempat di mana Anda akan melihatnya setiap hari, seperti cermin kamar mandi Anda atau di sebelah komputer Anda.

Ingatlah tujuan Anda, dan biarkan itu menentukan keputusan apa yang Anda buat: bahasa apa yang harus dipelajari, bahkan bagaimana Anda memilih untuk belajar.

Dengan itu, mari kita mulai dengan dasar-dasarnya!

Referensi:
https://coder-coder.com/learn-web-development/
https://www.instagram.com/p/BhkX5uWnnuP/?taken-by=girlknowstech
3rd party libraries, are they a risk?
Tags: security, watercooler, discuss
Published: 2020-01-15 20:52:06

I've always heard that using 3rd party libraries is a risk for the security of an **enterprise application**. 

> Third party libraries represent one of biggest, and possibly most overlooked, threats to enterprise security. That’s because open source components are regularly used by enterprise application developers to speed development and avoid “re-inventing the wheel”. Third party code makes up between **30** percent and **90%** of typical applications...
> 
> Quote from [Third Party Libraries: the Swiss Cheese of App Security
](https://www.infosecurity-magazine.com/opinions/third-party-libraries-the-swiss/)

I've always wondered if this is also the case for web development, as a lot of 3rd party dependencies are used all over the place. 

And stuff like what happened with [eslint-scope](https://www.theregister.co.uk/2018/07/12/npm_eslint/)...

**What do you think?** Should we be considering more what libraries and 3rd party software we use?
CIS Class
Tags: morecode, iloveit
Published: 2020-01-15 20:13:27

<!DOCTYPE html> 

<html> 

<head> 

<title>My Site</title> 

</head> 

  <h1>Movie Releases by Year</h1> 

<body> 

    <table border="1"

      <tr> 

        <th><strong><h3>Year</h3></strong>           </th><th><strong><h3>Titles</h3></strong></th> 

      </tr> 

      <tr> 

        <td>2019</td> 

        <td> 

          <ul type=“disc”> 

<li>The Wandering Earth</li> 

<li>Pokemon Detective Pikachu</li> 

  <li>The Lion King</li> 

            <li>Godzilla: King of the Monsters</li> 

            <li>Fast & Furious Presents: Hobbs & Shaw</li> 

            <li><em><strong>Avengers:End Game</strong></em></li> 

</ul> 

 

        </td> 

      </tr> 
  <td>2018</td> 

        <td> 

          <ul type=“disc”> 

<li>Fantastic Beast:The Crimes of Grindelwald</li> 

<li>The Grinch</li> 

  <li>Jurassic World: Fallen Kingdom</li> 

            <li>Ralph Breaks the Internet</li> 

            <li><strong><u>Ready Player One</u></strong></li> 

            <li>Venom</li> 

</ul> 

 

        </td> 
  <tr> <td>2017</td> 

        <td> 

          <ul type=“disc”> 

            <li><em><strong><u>Pirates of the Caribbean: Dead Men Tell No Tales</u></strong></em></li> 

<li>It</li> 

  <li>The Boss Baby</li> 

            <li>Beauty and the Beast</li> 
   
            <li>John Wick: Chapter 2</li> 

            <li>Thor: Ragnarok</li> 

</ul> 

 

        </td> </tr>
    </table> 

</body> 

</html> 

Work in progress
cloudinary api with glitch or zeit apikey secrets
Published: 2020-01-15 19:38:44

to use an api like the [cloudinary](cloudinary.com/invites/lpov9zyyucivvxsnalc5/ewvwdmx8c1msv9xxpk5e) image manipulation api you often api keys and secrets such as
```
API Name: XXXXXXXX
API Key: XXXXXXXX
API Secret: XXXXXXXX
```

in [glitch](glitch.com) you simply add them to a `.env` file
```
MY_CLOUDINARY_APINAME=myname
MY_CLOUDINARY_APIKEY=1234
MY_CLOUDINARY_APISECRET=5678
```

you can then access them in your node code using 
```
myname = process.env.MY_CLOUDINARY_APINAME
mykey = process.env.MY_CLOUDINARY_APIKEY
mysecret = process.env.MY_CLOUDINARY_APISECRET
```

and so all dev/local/production envs use the same values

[zeit](zeit.co) also reads secrets from the `.env` file when developing locally but for remote devlopment or production zeit uses separate secrets that even you cant see

in [zeit now](zeit.co) use 
```
$ npm -g install express
$ npm -g install now
$ npm -g install cloudinary
```

then
```
$ now secrets add my_cloudinary_apiname "myname"
$ now secrets add my_cloudinary_apikey "1234"
$ now secrets add my_cloudinary_apisecret "1234"
```

to see which secrets you have set use
```
$ now secrets ls
```

then to expose during the production build process you need to create a `now.json` with
```
{
  "build": {
    "env": {
      "MYNAME": "@my_cloudinary_apiname",
      "MYAPI": "@my_cloudinary_apikey",
      "MYSECRET": "@my_cloudinary_apisecret"
    }
  }
}
```

and to expose them to the production run process you need to add
```
{
    "env": {
      "MYNAME": "@my_cloudinary_apiname",
      "MYAPI": "@my_cloudinary_apikey",
      "MYSECRET": "@my_cloudinary_apisecret"
    }
}
```

you can still access them in your node code using 
```
myname = process.env.MY_CLOUDINARY_APINAME
mykey = process.env.MY_CLOUDINARY_APIKEY
mysecret = process.env.MY_CLOUDINARY_APISECRET
```

to run your node zeit project locally 
```
$ NODE_PATH=/usr/local/lib/node_modules GLITCH=1 node index.js
```

{% github osde8info/zeit-now-express2 %}

node refs
[node](https://nodejs.org/api/modules.html#modules_loading_from_the_global_folders)

zeit refs
[zeit cli](https://zeit.co/download
https://zeit.co/docs/v2/serverless-functions/env-and-secrets/#during-local-development)
[zeit build env](https://zeit.co/docs/v2/build-step/#using-environment-variables-and-secrets)
[zeit run env](https://zeit.co/docs/v2/serverless-functions/env-and-secrets/)

cloudinary refs
[cloudinary node integration](https://cloudinary.com/documentation/node_integration)
CIS class
Tags: firstwebpage
Published: 2020-01-15 19:19:01

	<!DOCTYPE html>
<html>
	<head>
		<title>My Site</title>
	</head>
	<body> <p> <strong>Welcome to Southwest University!!!<strong><p>
    <p><strong>If you are already a student, go ahead and click on this <a href=" https://sulearning.southwestuniversity.edu/"> link</a> to access SU Learning.<br>
      Otherwise, click the image below to enroll!<br>
      <a target = "blank"href="https://southwestuniversity.edu/"><img src="https://www.nicepng.com/png/detail/242-2426948_2018-corporate-partners-southwest-university-clinical-paso-tx.png" alt=”SU banner."></a>	</body>
</html>


Im getting it yall! codepen is awesome lol
Ask Dev: What tools do you use for designing and planning software?
Tags: discuss, help
Published: 2020-01-15 18:56:55

What do you do when you start planning a new project or a major new feature? Do you simply start coding or do you draft some design documents (Class Diagrams, Database Designs, Use Case Diagrams, Component Diagrams etc.)?

I usually start with class diagrams to try and understand my resources and their relations. Then I'll move on to flowcharts of uses cases.I'll admit that this isn't very comprehensive, but I'm never sure what to do when planning. I do all this using google draw, which feels horribly inefficient and cumbersome. 

So my questions for the software engineers of dev.to is this: 

> What best practices do you recommend when planning new software?

> What tools do you use for designing and planing software?
Class Discussion
Published: 2020-01-15 19:11:52

1.	Write code to mark the text Gourmet Thai Cooking as a heading with the second level of importance.
<h1>Heading</h1>
<h2>Gourmet Thai Cooking</h2>
2.	What is the div element and why will you often encounter it in pre-HTML5 code?
A div element defines a division or section in an HTML document and it is also a block level element
3.	What element would you use to indicate a change of topic within a section?
Either the tr or the hr element
4.	Write the code to mark the text Daily Special as emphasized text.
<em>Daily Special</em>
5.	Write code to mark the text H2SO4 with subscripts.
H<sub>2</sub>SO<sub>4</sub>

6.	Write the code to link the web page to the CSS file mystyles.css.
<a href=” mystyles.css</a>
7.	Write the expression to insert the em dash into a web page using the character code 8212.

8.	Write the code to insert an inline image using the source file awlogo.png and the alternate text Art World

<img src=”awlogo.png”alt”Art World”>
Do you know what 📦 Autoboxing in JS is?
Tags: javascript, beginners, webdev, tutorial
Published: 2020-01-15 19:09:45

Let's start with the question of **"What are primitive types, and how are they defined?"**.

Primitive types don't have methods or properties on them.

Let's see some primitive types in JS. Let's try a number and a string.

```js
const name = "Doggo"
const age = 7

console.log(typeof name) // string
console.log(typeof age) // number
```

**name** has the primitive type string, **age** is a number. Both of these primitive types should not have any properties or methods on them. Let's check that:

```js
console.log(name.length) // 5
console.log(age.toString()) // "7"
```

Why does this work and not throw an error? It looks like both of the primitive types are actually objects! But they're not! They just behave like objects because of **autoboxing**. Whenever we try to access a method or property on a primitive, that primitive is wrapped into an object. That's called autoboxing. Autoboxing will connect the primitive to the related built-in prototype object. In our case that's [String.prototype](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String) and [Number.prototype](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number). This gives us access to the prototype methods and properties.


This, for example, is the number prototype:

![Number prototype](https://thepracticaldev.s3.amazonaws.com/i/17mm7vxn69lp8eibe6sp.png)

---

Want to get better at Web Development?
[🚀🚀🚀subscribe to the Tutorial Tuesday ✉️newsletter](https://codesnacks.net/subscribe/)