teleren/devto huggingface dataset:
Kentico Rocks Episode #032 - What's New in .Net, Azure Static Web Apps, and Kontent
Tags: dotnet, azurestaticwebapps, kenticokontent, azure
Published: 2020-06-11 17:34:10

---
title: Kentico Rocks Episode #032 - What's New in .Net, Azure Static Web Apps, and Kontent
published: true
date: 2020-06-11 16:46:44 UTC
tags: dotnet, azurestaticwebapps, kenticokontent, azure
canonical_url: https://www.mcbeev.com/Blog/June-2020/032-Whats-New-in-Net?feed=Brian-McKeiver-s-Personal-Blog
---

### Introduction

In this episode of **Kentico Rocks**, Brian McKeiver discusses what's new in the .Net world post Microsoft Build 2020\. He covers a bit about the Build announcements and how to watch them if you missed it, briefly dives into the new **Azure Static Web Apps** service from Azure, and ends up highlighting what's new in the **Kentico Kontent Delivery SDK** for .Net developers. Existing .Net developers who utilize Kentico Kontent do not want to miss this episode.

Remember, [you can subscribe to the Kentico Rocks podcast on spotify](https://open.spotify.com/show/4LDuqV2NKush3NJqNP4rO6). Click on over to that if you haven't start following Kentico Rocks yet.



### Watch Now

{% youtube n6P9fMxk3cY%}

### In This Episode

Brian McKeiver chats about the following topics in Kentico Rocks podcast episode #32:

*   What's New in .Net post Micosoft Build 2020.
*   Blazor WebAssembly
*   Azure Static Web Apps
*   Routing in Azure Static Web Apps
*   Updates to Kontent Delivery SDK .Net
*   Best Practices for .Net Kontent developers

Related Links to this episode:

*   [.Net News & What's New in .Net for Kontent](/Blog/May-2020/Net-5-News-Kentico-Kontent)
*   [Best Practices for Delivery SDK for .Net](https://github.com/Kentico/kontent-delivery-sdk-net/wiki)
*   [Kontent Delivery .Net SDK Github](https://github.com/Kentico/kontent-delivery-sdk-net)
*   [Azure Static Web Apps tutorial](https://docs.microsoft.com/en-us/azure/static-web-apps/getting-started?tabs=angular)
*   [https://www.symcheck.io](http://symcheck.io/)
*   [Kontent Delivery NuGet package](https://www.nuget.org/packages/Kentico.Kontent.Delivery/)



You can also listen to the previous episode of Kentico Rocks where I talk about [Kentico Kontent Management API review](/Blog/March-2020/Kentico-Rocks-Podcast-Episode-31).
How to add Mapbox to your Nuxt static site
Tags: nuxt, mapbox, webdev, tutorial
Published: 2020-06-11 16:45:17

---
description: Learn how to display a Mapbox map in a Nuxt static app using the official Mapbox GL JS library
---

In this blog post, I'm going to show how to display a Mapbox map in a Nuxt static app using the official Mapbox GL JS library. 

In my experience I wouldn't reach for a Vue plugin. Such plugins often end up introducing an additional layer of complexity. When something doesn't work, you don't know if it's because you used incorrectly the plugin or the underlying Mapbox library and you need to check two documentation.

As for the plugin docs, they are usually either lacking or redirecting to the official Mapbox docs. Plus those plugins tend to be abandoned after awhile.

Finally, as you will see, it's not complicated to work with the Mapbox GL JS library. It's just JavaScript™

## Installing and initializing

1。Install the npm package: `npm install mapbox-gl`
2。Link to the CSS stylesheet in the the head of the page where the map will be used (no need to load the Mapbox CSS globally if it is only used on one page).

```js
head: {
      link: [
        {
          rel: 'stylesheet',
          href: 'https://api.mapbox.com/mapbox-gl-js/v1.10.0/mapbox-gl.css',
        },
      ],
  },
```

3。Import the module in the **mounted hook** of your page or component.

```js
mounted() {
    const mapboxgl = require('mapbox-gl')
})
```

4。Initialize the map with your access token and [the options you want](https://docs.mapbox.com/mapbox-gl-js/api/#map). As for the style, you can either create your own in the amazing [Mapbox Studio](https://www.mapbox.com/mapbox-studio/), use one of the [default styles](https://docs.mapbox.com/api/maps/#mapbox-styles) or choose among the [publicly available styles](https://www.mapbox.com/gallery/).

```js

    const map = new mapboxgl.Map({
      accessToken: 'YOUR_TOKEN',
      container: 'map', // <div id="map"></div>
		  style: 'mapbox://styles/mapbox/streets-v9', // default style
		  center: [-21.9270884, 64.1436456], // starting position as [lng, lat]
		  zoom: 13
   })

```

## Adding markers with popups

Further down in your `mounted hook`, you can add markers with popups.
*Tip: You can use HTML for the content of the popup.*

```js
yourMarkersArray.map((marker) => {
    const LngLat = [marker.location.lng, marker.location.lat]
    const popup = marker.description
    new mapboxgl.Marker()
        .setLngLat(LngLat)
        .setPopup(popup)
        .addTo(map) // Initialized above
})
```

## Real-world example

I made this map for a client: https://www.gemuese-lieferdienst.ch/depots/karte/

The repository is private, but here's a gist with the relevant source code: https://gist.github.com/mornir/9e85e65caba46e55269302e8a134e04e

## Closing words
I hope this post was useful to you. Don't hesisate to reach out in the comments below if something is not clear or if you know a better/simpler approach.

Go make awesome maps now!

*Source of hero image*: https://www.flickr.com/photos/mapbox/23757790495
No Xcode or CLT version detected!
Tags: webdev, reactnative, mobile, npm
Published: 2020-06-11 16:45:16

---
title: No Xcode or CLT version detected!
published: true
description: "gyp: No Xcode or CLT version detected!" As you can see here, I recently got an interesting error that caused all kinds of heartache. Here is the resolution I came up with.
series: React-Native Mobile
tags: WebDev, ReactNative, Mobile, Npm
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/of99ozrbilcagw2iowrx.png
---

> These are notes for myself on an issue I had recently and the resolution that worked for me ...

## The Issue

I recently updated my Mac OS. What I immediately noticed any time I ran either `yarn install` or `npm install`, I got this new error:

```make
gyp: No Xcode or CLT version detected!
gyp ERR! configure error
```

Keep in mind that this wasn't event close to the complete list of errors. The messages ran on and on. The funny thing is I do have these command line tools installed.

The result of `xcode-select --install` starts the re-installation process, but if you get the message below then you (as I did) already have the command line tools installed.

```make
Xcode-select: error: command line tools are already installed, use "Software Update" to install updates
```

## Solution

Reinstall the command-line tools by removing the previously installed version, then reinstall them.

### Get The Location

Get the location of the installed command-line tools by running the command below:

```make
xcode-select --print-path
```

Which gives the results from the command above (here's what I got) ...

```make
/Library/Developer/CommandLineTools
```

### Remove The Tools

Knowing the path to the currently installed command-line tools from the previous step, go ahead and remove them from the system. For the next set of commands, you will need sudo privileges to run successfully.

```make
sudo rm -r -f /Library/Developer/CommandLineTools
```

Provide the root password to remove the command line tools, when prompted. 

### Reinstall The Tools

![Prompt to reinstall command line developer tools](https://dev-to-uploads.s3.amazonaws.com/i/4tw0o3z5remyc5mu62f7.png)

Click on install and follow the rest of the instructions to reinstall command line developer tools.

If for some reasons, you do not get the prompt right after uninstalling your previous command line developer tools, no need to panic. Run the following command to get the prompt.

```make
xcode-select --install
```

![Prompt after running Xcode-select -install](https://dev-to-uploads.s3.amazonaws.com/i/0jjkfdji98y68z8l8k0q.png)

Click on install and then agree to the license to proceed with the installation. Depending on your internet speed it will take some time for the system to complete the download of the command line developer tools. The installation process should proceed immediately after a successful download.

## Conclusion

With the reinstallation of the command line developer tools the `gyp: No Xcode or CLT version detected!` error message should disappear when any yarn or npm command is run from the command line.
Welcome Thread - v77
Tags: welcome
Published: 2020-06-11 16:44:50

---
title: Welcome Thread - v77
published: true
description: Welcome to DEV! A thread of hellos and intros.
tags: welcome
---

![hand shake welcome](https://media.giphy.com/media/mGo8dkPOF6GLm/giphy.gif)

### Welcome to DEV!

1. Leave a comment below to introduce yourself! You can talk about what brought you here, what you're learning, or just a fun fact about yourself.

2. Reply to someone's comment, either with a question or just a hello. 👋 

**Great to have you in the community!**
What tools, courses, apps, site, etc. did you use for your interview prep? 
Tags: discuss
Published: 2020-06-11 16:42:28

I’m at that stage in my job where it’s about time. About time to dust off the ‘ol resume, boot up the portfolio site server, update the LinkedIn and GitHub, and all the other million little things that goes into finding your next engineering job.

However this time is slightly different. I am at a point of experience and skill in my career where I am ready to go for large top name tech companies. Which is a dream of mine. So, I need to be as prepped, trained, and studious as possible to land one of these positions.

What interview prep courses, apps, sites, blogs ...anything, have you used and had great success with?

So far I’m liking leetcode.com.
What is Deno? A 1 minute read
Tags: node, deno, javascript, typescript
Published: 2020-06-11 16:40:58

---
title: What is Deno? A 1 minute read
published: true
description: A 1 minute read post about Deno from the creator of Node.js
tags: nodejs,deno,javascript,typescript
//cover_image: https://direct_url_to_image.jpg
---

A 1 minute read post about Deno, **the new kid in town**. Is Node.js safe? Yes. Will you need to learn something new soon? **Probably**.

[Deno](https://deno.land) is a project (written in Rust) which was created by the original creator of Node.js, Ryan Dahl and has recently gone 1.0 (currently 1.0.5).

It's defined on its website as:

#### A secure runtime for JavaScript and TypeScript

* Read also: [https://kitsonkelly.com/posts/deno-is-a-browser-for-code/](https://kitsonkelly.com/posts/deno-is-a-browser-for-code/) 
* See also: [https://github.com/denolib/awesome-deno](https://github.com/denolib/awesome-deno) 

### Why Deno runtime is secure?

In Deno by default your code can not:

* Access the filesystem
* Access the network
* Access the environment

To allow this, you have to explicitly enable access by providing a flag when executing your code. 

Deno is trying to bring the "disabled by default" nature of the browser, to the server-side. They do this by sandboxing your code mostly like a browser does.

Here is an example.

{% gist https://gist.github.com/napolux/b27556ae0b17c43111190ae2388da4fb %}

If you run this without using the `--allow-net` flag you'll see an error.

So to run this server you need to type `deno run --allow-net server.ts`

### What are the features of Deno's runtime?

In Deno things are quite different from Node.js, in particular:

* **Dependency management** (URLs instead of package.json, still somehow controversial for some people and some alternatives have been proposed)
* **A secure/audited standard library is available**! https://deno.land/std (HTTP, websockets, UUID, DateTime, etc...)
* Unlike Node.js, where once built/compiled you are given a set of files, with a single entry point, **Deno will always give you a single executable binary** (great for portability)
* **Built-In linting and much more is coming in version 1.1!**

### TypeScript by default

In Deno there’s no difference in running JavaScript code or TypeScript code. In Node.js, you have to configure your project to compile TypeScript and while improved, the process is not yet friendly for new users.

**Done, I told you this was fast**.

Check also the [deno.land](https://deno.land) website! [And this 50 minutes crash course about Deno](https://www.youtube.com/watch?v=NHHhiqwcfRM)
Using Base64 encoded image
Tags: webdev
Published: 2020-06-11 16:31:55

The `window.onload` event does not occur until resources are fully loaded. And often images are the biggest part of resources.

The total resource loading time consists of:
* waiting for a server response,
* data loading time,
* byte analysis,
* byte conversion to an object.

Encoding an image in Base64 format converts binary data into ASCII string format. Loosely speaking, we can convert an image to text using this process. This allows us to inline images as text on the page and get rid of the steps: "waiting for a server response" and "data loading time".

I use this technique for `small` images that are used as logos, icons or background images for buttons, panels and etc.

### Downsides of the inline images

* Converting images to base64 results in a 30% increase in size.
* Size of HTML page increases.


### How to convert

The easiest way is to use online converters. For example [base64-image](https://www.base64-image.de)

### How to use

You can set the string as the value of the `src` property or as css `background`.
Over 5,000 followers ! 🤗 🎉
Tags: meta, kubernetes, tutorial
Published: 2020-06-11 16:27:46

Unbelievable! I just saw that I hit 5,000 followers here on Dev.to. I'm so grateful, thanks for that 🙌🏾

**It's amazing to see how my content help you in learning DevOps topics and with that how my community grows both on Youtube and DEV. 🙏**

**► [Subscribe to the channel](https://www.youtube.com/c/techworld_with_nana)**

**I would love to connect with each one of you on my YouTube channel** for the latest videos on Kubernetes, Docker and other DevOps topics.  I *release videos every week*, so do subscribe and hit the bell icon 🔔 to be notified on new videos. I've got tutorials planned on deploying Kubernetes on a cloud platform, YAML, Istio, Terraform and much more...

Many topics actually suggested by you, which I take up happily as I want to create videos helpful for YOU. 🙂

###Much more in the pipeline###
Besides the weekly tutorials, I'm working on an online course and also on a modern DevOps job and community platform 🤘


-----------------
**Like, share and follow me** 😍 for more DevOps content:
- [Twitter](https://twitter.com/Njuchi_)
- [YouTube](https://www.youtube.com/channel/UCdngmbVKX1Tgre699-XLlUA?sub_confirmation=1)
- [Instagram](https://www.instagram.com/techworld_with_nana/)
- [LinkedIn](linkedin.com/in/nana-janashia)
We need to share our rough drafts
Tags: life, career, advice
Published: 2020-06-11 16:14:06

When I was working as a designer at an agency, I always tried to edit my work at least three times before the submission deadline. I think most of my colleagues did the same, except along with the final draft, I also attached the 3-5 rough drafts that came before it. I did this precisely because I wanted to document an accurate developmental map for myself and others. It’s all part of my philosophy in life: showing honesty in work, the natural progression from flawed to decent, from 0 to 100.

My old habit of preserving rough drafts and sharing them with people never stopped after I pivoted into software development. And the reason is simple. I don’t think my generation has seen enough of the rough drafts of others to feel comfortable to get past the imposter syndrome.

When people ask me how I became a "good" developer, I tell them two things: first, that I am still learning and second, that I struggled a lot (I still do) and had put in a lot of hours to get to where I am today. Afterwards, I direct them to my earlier projects and tell them that my developmental map is there. My wish is that other people do the same. Share your early works, so that fewer people would have to make any leap of faith to understand that your lives work in much the same way as theirs; it's just that all of us are in different stages.

Warmly,
DH - your coding buddy
Share your Dev story!
Tags: beginners, javascript, ember, career
Published: 2020-06-11 16:11:11

###Becoming a Developer

As a Junior Developer, the first thing I wanted to do after my studies is to start new projects from scratch and have fun with it! Design, practice and learn more about JavaScript and Ember.js, but also to do something meaningful for me and interesting for people to check out!

So after doing my very first portfolio, I decided to start **Becoming A Developer**. A JavaScript/Ember.js project gathering stories from developers in their early years.

It's a meaningful project for me, for **two reasons**:
- I used to be a *Tech Recruiter* for 3 years, and had 2000+ calls with developers. I was impressed with the diverse background they had! By doing this project, I continue to discover new profiles of developer :heart_eyes:
- I had a lot of doubts before doing a coding bootcamp. So I started to read a lot of 'Junior dev', 'Learning programming', 'Is programming for me?' articles. So by doing this project, I would share a lot of different stories to wanna be dev, or tech curious :smile: :heart:

The website is available here: [Becoming A Developer](https://becoming-a-developer.netlify.app/)

###I want to  share my story!
Awesome :sparkles: Then you can directly go to [this link](https://becoming-a-developer.netlify.app/share), and fill in the form. 

###I want to read stories!
Wonderful :tada: Check out the first posts available [here](https://becoming-a-developer.netlify.app/stories).

###I want to share my feedback!
Thank you :pray: Feel free to add a comment, any feedback will help the beginner I am :smile:
Dependencies in microservices world
Tags: microservices
Published: 2020-06-11 15:48:18

Today we had a brainstorm meeting about how we can eliminate direct dependencies between services in our application. What inputs do we have 

1. 15-20 microservices
2. some of them have cyclic dependencies (service A calls service B and service B calls service A)
3. calls does not create anything, just getting some external data

After some brief discussions we've came up with some solutions

1. We have case when we need to go to external service on each call via middleware and check if user can have an access to app and we can't really eliminate this one. We have a cache on external service , but we've also decided to introduce local cache to even have no network calls
2. We have cases when the validation on one service is dependent on state in another service. In this case, we decided to store local copy of this state in scope of single service. We have all needed infrastructure for integration events so it's just the matter of time. (There's also one good point, I've pulled from this meeting - "<b>if you need to call an external service for querying, there's possibility of a bad solution. and for commands - it's completely fine to call 3-rd party services</b>")
3. And the last one is just removing depedency)) What can be easier that that ? We've check a couple of our scenarios and decided that for some cases we don't even need to call external service at all since it won't affect data integrity. For example, we've queried external service to check if resource is found when we were searching data on grid. Isn't this awesome ?

So, notes are written, time to create some tech stories in jira
MLflowに入門してみる
Tags: mlflow, mlops
Published: 2020-06-09 10:40:16

# MLflowとは

[公式ドキュメントのトップページ](https://www.mlflow.org/docs/latest/index.html)によると以下。

* オープンソースで、機械学習の一連のサイクルを管理するためのソフトウェア。
* MLflowはPython, R, JavaのAPIを持つ他、REST APIやCLIもあるので様々なライブラリや言語と合わせて利用することができる。
* 以下４つの機能を持つ。
  * MLflow tracking
      * 学習に利用するコードやパラメータ、学習の結果を記録することで、過去の学習記録を簡単にトラッキングできるようにする。
  * MLflow Projects
      * コードを再利用可能にする仕組み。
  * MLflow Models
      * 機械学習モデルをパッケージングし、様々なプラットフォームで利用な可能な形式で提供することを可能にする
  * MLflow Model Registry
      * 機械学習モデルを保存するレジストリ。バージョンや学習の情報などを提供する。

# Tutorial
https://www.mlflow.org/docs/latest/tutorials-and-examples/tutorial.html

## このチュートリアルの内容

1. 線形回帰モデルを学習
1. コードをパッケージングし再利用可能な状態にする
1. モデルをHTTPで利用可能な形でデプロイする

## 実践
```
# 環境構築
pipenv install "mlflow[extras]" 
```

### 学習を実行（MLflow Tracking）
以下を写経
https://github.com/mlflow/mlflow/blob/master/examples/sklearn_elasticnet_wine/train.py

```
# 実行
## ハイパーパラメータを適当に変えていくつか作ってみる
$ pipenv run python sklearn_elasticnet_wine_train.py
$ pipenv run python sklearn_elasticnet_wine_train.py 0.6 0.6
$ pipenv run python sklearn_elasticnet_wine_train.py 0.4 0.4

# mlrunsというディレクトリができる
```

### 学習を結果を確認
```
# UIを起動
pipenv run mlflow ui
```

* モデルの作成時刻やハイパーパラメータ、学習結果などを閲覧可能。
* モデルごとの比較が可能

### モデルをパッケージングする（MLflow Projects)
#### 基本的なディレクトリを作る
```
mkdir sklearn_elasticnet_wine
mv sklearn_elasticnet_wine.py sklearn_elasticnet_wine/train.py
```

#### Projectsファイルを作成
こちらに記載のある二つのファイルを作成する。

https://www.mlflow.org/docs/latest/tutorials-and-examples/tutorial.html#packaging-training-code-in-a-conda-environment

※ `conda.yaml`は、UIのモデル詳細にあったのでコピペした

#### 実行
condaは使いたくないので `--no-conda`を利用
```
pipenv run mlflow run sklearn_elasticnet_wine -P alpha=0.42 --no-conda 
```

MLProjectsの実行環境は、`conda`, `Docker`, `System Environment` (今回)の３つを選択可能。

これで、モデル生成に利用したコードと実行環境を別環境でも再現できるようになった。

### モデルをサーブする(MLflow Model)
#### 生成されたモデルアーティファクト
モデル作成のステップで作成された `mlruns/0/ハッシュ値/artifacts/model/`ディレクトリに必要なものが格納されている。

* MLmodel: モデルに関するメタ情報
* model.pkl: 学習済みモデルをシリアライズしたもの

ちなみに、MLProjectsで利用した`conda.yaml`もここに入っている。

#### web APIとしてデプロイ
こちらも、condaを入れたくないので `--no-conda`で動かす
```
pipenv run mlflow models serve -m mlruns/0/2ca121e400654d5898de9f4f9e1fe928/artifacts/model -p 1234 --no-conda 
```

リクエストできた。
```
curl -X POST -H "Content-Type:application/json; format=pandas-split" --data '{"columns":["alcohol", "chlorides", "citric acid", "density", "fixed acidity", "free sulfur dioxide", "pH", "residual sugar", "sulphates", "total sulfur dioxide", "volatile acidity"],"data":[[12.8, 0.029, 0.48, 0.98, 6.2, 29, 3.33, 1.2, 0.39, 75, 0.66]]}' http://127.0.0.1:1234/invocations

[4.479576972663602]
```
Using inline SVGs with Rails
Tags: rails, svg
Published: 2020-06-11 15:45:33

---
title: Using inline SVGs with Rails
published: true
description: How to insert inline svg images into your page
tags: rails, svg
//cover_image: https://direct_url_to_image.jpg
---

Last night I spent about three hours fighting and struggling on how to get insert icons from [zondicons](http://www.zondicons.com/) and add some classes to them. Needless to say just adding an `image_pack_tag` was not doing the trick, as I needed something like this

```html
<svg class="my-classes with-style">
  <path ...>
</svg>
```

...instead of this

```erb
<img src="path/to/icon.svg" class="my-classes" />
```

So I made a helper for this:

```ruby
module ApplicationHelper
  def zondicon(icon_name, options={})
    file = File.read(Rails.root.join('app', 'javascript', 'images', 'zondicons', "#{icon_name}.svg"))
    doc = Nokogiri::HTML::DocumentFragment.parse file
    svg = doc.at_css 'svg'

    options.each {|attr, value| svg[attr.to_s] = value}

    doc.to_html.html_safe
  end
end
```

And now in my views I can do this:

```html
<button class="btn btn-blue">
  <%= zondicon('wrench', class: 'fill-current teal-500') %>
  <span>Configure</span>
</button>
```

There's also a gem called [inline_svg](https://github.com/jamesmartin/inline_svg) for this very purpose, but I decided to go for a simpler approach with no extra dependencies.