teleren/devto huggingface dataset:
Kentico Rocks Episode #035 - Examining Web Spotlight for Kentico Kontent
Tags: headless, dotnetcore, kenticokontent, jamstack
Published: 2020-09-23 16:51:39

---
title: Kentico Rocks Episode #035 - Examining Web Spotlight for Kentico Kontent
published: true
date: 2020-09-23 11:35:01 UTC
tags: headless, dotnetcore, kenticokontent, jamstack
canonical_url: https://www.mcbeev.com/Blog/September-2020/Kentico-Rocks-Podcast-Episode-35
---

### Introduction

In this episode of **Kentico Rocks** , **Brian McKeiver** is joined by fellow Kentico Kontent MVP **Andy Thompson**. Andy and Brian discuss the newly released [Web Spotlight feature](https://webspotlight.kontent.ai/) for [Kentico Kontent](https://kontent.ai/?utm_source=kenticorocks35&utm_medium=mvp_27116&utm_campaign=extended_trial).

According to Andy, Web Spotlight addresses the elephant in the room when it comes to utilizing a Headless CMS, which is, how can we expect our content teams to develop a website without a head to look at it with?

Check out the latest episode of Kentico Rocks to find out what developers need to know about implementing Web Spotlight, how to implement it in a .Net Core MVC project, and how it possibly changes your content model requirements. Brian and Andy both agree that ultimately, when implemented correctly, Web Spotlight by Kontent can take your Headless CMS site editing experience to the next level.

### Watch Now

{% youtube vENFZ46FtD4%}

### In This Episode

Brian McKeiver and Andy Thompson discuss the following topics in Kentico Rocks podcast episode #35:

*   What Web Spotlight is for Kentico Kontent
*   What developers need to know about getting started with Web Spotlight
*   A few pitfalls to watch out for
*   How to integrate a .Net Core MVC site with the new Smart Link SDK
*   A review of Andy's blog post and his custom tag helper for MVC Core

Related Links to this episode:

*   [Kentico Kontent as a Headless CMS](https://kontent.ai/?utm_source=kenticorocks35&utm_medium=mvp_27116&utm_campaign=extended_trial)
*   [Web Spotlight for Kontent](https://www.gatsbyjs.org/)
*   [Andy Thompson's MVP blog](https://www.luminary.com/blog?author=Andy%20Thompson)
*   [Andy's blog post on Web Spotlight](https://www.luminary.com/blog/web-spotlight-visual-page-editing-headless-kontent)


You can also listen to the previous episode of Kentico Rocks where I interview Adam about [getting started with Kentico Kontent and GatsbyJS](/Blog/July-2020/Kentico-Rocks-34). Or you can check out all of my [Kentico Rocks podcasts here](https://www.mcbeev.com/kenticorocks).
Five Cool Ways to Iterate over JavaScript String 
Tags: javascript, string
Published: 2020-09-23 11:18:31

First 

Using Array.from() method 


```
let hello =  "World"

// first

Array.from(hello).map(i => console.log(i))

```

second

using for ...of loop 


```
// second

for (let char of hello){
  console.log(char)
} 
```

third

using built in split() method in String()


```
// third

hello.split("").forEach(i => console.log(i))

```

fourth 

ancient for loop

```
// fourth

for (let i = 0; i < hello.length ; i++) {
  console.log(hello[i])
}
```
//  five 

using fancy generator function and for ... loop  

```
//  five advance 

function* iter(str) {
    let i = 0
    while(i < str.length) {
       yield str[i];
       i++
    }
}

for (let char of iter(hello)){
  console.log(char)
} 
```

Let Me Know Others . Thanks
Frames in tkinter
Tags: python, frames, tkinter
Published: 2020-09-23 11:16:28

```
from tkinter import *

class Frames:

	def makeFrame(self):
		root = Tk(className="X Name")
		root.title("X title")
		root.geometry("900x900")
		root.resizable(0,0)


		def raise_frame(frame):
			frame.tkraise()

		frame1 = Frame(root, width=600)
		frame2 = Frame(root)

		for frame in (frame1,frame2):
			frame.grid(row=0, column=0, padx=50, pady=200, sticky='news')


		Label(frame1, text='Welcome to tkinter Frames',font=("Courier",40)).pack()
		Button(frame1, text="Frame 2", width=10,height=2, font=("Courier", 30), command=lambda:raise_frame(frame2)).pack(pady=10)

		Label(frame2, text='Frame 2', font=("Courier",40)).pack()
		Button(frame2, text="Frame 1",width=10,height=2, font=("Courier", 30), command=lambda:raise_frame(frame1)).pack(pady=10)

		raise_frame(frame1)
		root.mainloop()

frame = Frames().makeFrame()

```
## like to support & share to help <3
BFE.dev #23. create a sum()
Tags: javascript
Published: 2020-09-23 11:13:58

> https://bfe.dev is like a LeetCode for FrontEnd developers. I’m using it to practice my skills.

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

This article is about the coding problem [BFE.dev#23. create a sum()](https://bigfrontend.dev/problem/create-a-sum)

## problem

Create a `sum()`, which makes following possible

```js
const sum1 = sum(1)
sum1(2) == 3 // true
sum1(3) == 4 // true
sum(1)(2)(3) == 6 // true
sum(5)(-1)(2) == 6 
```

## analysis

From above requirements, obviously 

1. `sum()` should return a function, which takes in one new argument
2. `sum()` sums up all the arguments passed, and repeat 1
3. A function could equal to a number with `==` not `===`, by type coercion, we could use `valueOf` or `toString` to accomplish.

## Let's code

First we handle the function returning part. Above 1 and 2 tells us that we need to accumulate the arguments, which could be treated as the second argument

```js
function sum(num, currentSum = 0) {
  const newCurrentSum = num + currentSum
  
  const func = function(arg) {
    return sum(arg, num + currentSum)
  }

  return func
}

```

At last, let's define the `valueOf`.

```js
function sum(num, currentSum = 0) {
  const newCurrentSum = num + currentSum
  
  const func = function(arg) {
    return sum(arg, num + currentSum)
  }
  
  func.valueOf = () => newCurrentSum
  // below also works
  // func.toString = () => newCurrentSum.toString()
  
  return func
}
```

## OK, passed

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

Interested to try by yourself? Have a try at BFE.dev https://bigfrontend.dev/problem/create-a-sum
My First open-source Project: Building AmazonPay Gem
Tags: amazonpay, ruby, gem, amazon
Published: 2020-09-23 11:05:57

# Introduction
Recently at my workplace, I was assigned the task to implement the new Amazon Pay checkout v2 in our e-commerce application. A little bit of context, we currently use Ruby on Rails on the backend and use React for our frontend. We combine the application with a mix of server-side rendering and Single Page Application.

# Amazon Payment Flow

![amazon.png](https://dev-to-uploads.s3.amazonaws.com/i/3c6kjt4cbebv5gyf8k7q.png)
 
For an e-commerce site using Amazon Pay Checkout v2, the following is the checkout and payment flow:


- Prepare the Payload
- Send the payload to the server and get a signature by signing the payload
- Send the signature and the string version of the payload to your frontend application
- Use the payload and the signature to render an Amazon Pay button
- A user clicks on the rendered Amazon Pay button
- S/He is taken to the Amazon website where the person logs in
- S/He  payment method and shipping address if that is required
- Amazon returns to a review URL supplied by the user along with a URL parameter that contains the unique session ID
- Send the session ID to the server 
- Retrieve details of the session using the session ID
- Update the checkout session if necessary
- Return the checkout session data to your frontend and display a review page where the user has the option of changing payment method and ship address
- Attached the amazon pay redirect URL returned from the session to a checkout button
- User presses the checkout button and is taken back to amazon website where the payment is processed
- Amazon calls the user return result URL with the same amazon checkout session parameter
- Send the session ID to the server and then call the SDK complete session method that allows amazon to complete the payment
- Display customary thank you page.

# The problem
Amazon currently offers SDKs for PHP, .NET, Java and Node.js. For those of us that implemented our server in Ruby, we are up the creek without a paddle. You would have to go through a relatively complicated process to get every request authenticated.

To make it easy for everyone to use AmazonPay in their Ruby application, I have created the Amazon Pay Ruby SDK. This makes it as easy to implement Amazon Pay in ruby as it currently is in Node.js, or PHP, or .Net.

The SDK is mostly based off of the node.js SDK so it is as safe and secure as the Nodejs SDK is. 

# Links
The SDK is currently published in the RubyGem repository at [Amazon Pay Ruby Gem](https://rubygems.org/gems/amazon_pay_sdk_ruby).

The codebase is at  [AmazonPay Ruby SDK](https://github.com/bytenaija/amazon-pay-sdk-ruby).

# Maintenace
I will try to ensure this Gem keeps in concert with any Amazon changes to the Nodejs SDK within at least a week.

I, however, welcome contributions and help maintaining the project.

# Conclusion
I hope this gem serves the community as well as every open source project have ever used served me.
Building optimized binaries with Rust
Tags: archlinux, bash, rust
Published: 2020-09-23 11:05:08

We can enable architecture-specific optimizations when we compile Rust apps directly in the target CPU, and check some configuration values in our `PKGBUILD`.

With this optimizations, we could increase the performance of our rust apps [up to 2x times](https://vfoley.xyz/rust-compilation-tip/).

## Checking the native optimizations

We can check the default optimizations for the current CPU architecture:

```bash
$ rustc --print cfg
debug_assertions
target_arch="x86_64"
target_endian="little"
target_env="gnu"
target_family="unix"
target_feature="fxsr"
target_feature="sse"
target_feature="sse2"
target_os="linux"
target_pointer_width="64"
target_vendor="unknown"
unix
```

We can count only 3 `target_feature` values.

🧠 SSE is an instruction set for the x86 architecture created by Intel in 1999. 👀

We can see the available optimizations for our CPU using:

```bash
rustc -C target-cpu=native --print cfg
```

I can count the number of features (`target_feature`) that my CPU supports by using:

```bash
$ rustc -C target-cpu=native --print cfg | grep target_feature | wc -l
22
```

There are 19 additional optimizations than the default profile for my CPU architecture.

## How to compile with native optimizations

The default scenario is to build in release mode using:

```bash
cargo build --release
```

To apply the native optimizations, you can use:

```bash
cargo rustc --release -- -C target-cpu=native
```

Or, with an environment variable:

```bash
RUSTFLAGS="-C target-cpu=native" cargo build --release
```

💡 Remember: the environment variable this will apply the native compilation to all dependencies and not just the top crate.

## Using makepkg with native optimizations

To apply these architecture-specific optimizations in Arch Linux you should edit the `/etc/makepkg.conf` adding `-C target-cpu=native` to the `RUSTFLAGS` variable.

💡 Note: If you want to distribute your package in different architectures remember to check the compatibility.

## Finding your best optimization

Maybe `target-cpu=native` is not good enough for your needs. You can check the available options for your CPU using:

```bash
$ rustc --print target-cpus
```

Then, you could test different options for your CPU architecture. Good luck!
Quiz from HTML
Tags: beginners, html, webdev
Published: 2020-09-23 10:56:02

---
title: Quiz from HTML
published: true
description:
tags: #beginners #HTML5 #HTML #WEBDEV
//cover_image: https://direct_url_to_image.jpg
---
I prepared short a quiz from HTML5. If you want I'll invite resolving 💪💪💪

http://www.academyfrontend.com/check-your-knowledge-from-html5/
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/y4f7onfim9tvthrga1un.jpg)
Where do you get GIFs from?
Tags: webdev, discuss
Published: 2020-09-23 09:43:59

---
title: Where do you get GIFs from?
published: true
description: 
tags: webdev, discuss
cover_image: https://content.fortune.com/wp-content/uploads/2016/02/giphy-3.gif
---
Often times static images or emojis just can't do justice to express particular emotion, that's where GIFs might come in handy.

[GIPPHY.com](https://giphy.com/) has been my favorite.
What's your go-to source to get GIFs?
LinkedIn: Is it useful for DEVs in 2020?
Tags: webdev, discuss, career, beginners
Published: 2020-09-23 10:55:29

---
title: LinkedIn: Is it useful for DEVs in 2020?
published: true
description: 
tags: webdev, discuss, career, beginners
cover_image: https://teranews.net/wp-content/uploads/2020/01/linkedin-social-network-for-business-4.jpg
---
Devs who use LinkedIn, could you please share your experience on using the platform? Do you find job opportunities there, have you found some useful contacts there, etc?
Overall, is it worth to create and spend time on developing a complete profile there or you believe personal portfolio could be enough?
The Fast and the Firnis
Tags: allgemein, delfterschule, fastandfurious, janvermeer
Published: 2020-09-24 12:02:31

---
title: The Fast and the Firnis
published: true
date: 2020-09-23 10:47:13 UTC
tags: Allgemein,delfterschule,fastandfurious,janvermeer
canonical_url: https://drikkes.com/?p=14612
---

![](https://i.imgur.com/2yZbZe0.png)

[Siehe](https://www.youtube-nocookie.com/embed/iCvIIqcWbjs) auch: The [Art](https://www.kettererkunst.de/lexikon/delfter-schule.php) of [Racing](https://www.imdb.com/title/tt0463985/?ref_=fn_al_tt_6).

Oder wie Heinz-Harald Frentzen sagen würde: „[It runs like oil on my soul.](https://www.glonaabot.de/einschlagige-artikel/formel-1-unvergesslich-heinz-harald-frentzen-fahrt-michael-schumacher-davon)“

![](https://i.imgur.com/r0i6d0F.png)

([mehr](https://imgur.com/gallery/HAHqGS3))
State vs Props in React
Tags: webdev, javascript, react, typescript
Published: 2020-09-23 10:17:01


In two the article previous, we have setup project "React" and create component in react, todo we need setup "State and Props in React"

{% youtube TcfzpbNl9JA %}

Please do like it and [Subscribe](https://www.youtube.com/channel/UCBOZRctXJSg9YNLyddedASg?sub_confirmation=1) to my channel for more videos.
The article: [State vs Props in React](https://hoanguyenit.com/state-vs-props-in-react.html)
Let's Build a Mobile Game App! (for those with zero iOS/Android experience) - Video
Published: 2020-09-23 10:16:48

Today I teach you how to build your very first mobile-app! This video is PERFECT for those with zero mobile development experience. In this video, we will be using Expo.io (http://bit.ly/expo-link)  to help us build a simple game of whack-a-mole using react-native. We will also be using react hooks and redux state management.

By the end of this video, you will have learned how to:
- use your mobile phone to run your app (iOS and Android)
- set up an iOS simulator on your computer to run your app
- set up an Android Simulator on your computer to run your app

Here is the documentation I discuss in my video:
- Expo: http://bit.ly/expo-link
- Node: https://nodejs.org/en/
- Homebrew: https://brew.sh/
- XCode: https://apps.apple.com/gb/app/xcode/i...

Thanks for watching, if you would like to see more videos like this please do Like and Subscribe so I know to create more.

Twitter: https://twitter.com/ania_kubow
YouTube: https://youtube.com/aniakubow
Instagram: https://instagram.com/aniakubow

{% youtube yrSFLZ_b0Aw %}
Simple games with Angular
Tags: tetris, angular, learning, opensource
Published: 2020-09-23 10:13:37

---
title: Simple games with Angular
published: true
description: 
tags: tetris, angular, learning, opensource
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/yn52044cyzztnb7rmtg5.png
---

At my current work, I'm in transition from purely BE developer to a full-stack. It's hard and boring to gain understanding on new technology and new frameworks by just reading books and watching tutorials, so after getting a bare minimum of understanding of Angular, I've decided to implement something real — not too complicated, but fun to implement and forcing to cover some interesting topics of framework.

What is fun, you'll ask? Computer games, of course! And Angular, as a tool which helps to manage visual things easily, fits this area nicely.

As for now, I've implemented a [15 puzzle](https://en.wikipedia.org/wiki/15_puzzle):

* [source code](https://bitbucket.org/ProDG/angular-15/src/master/)
* [deployed game](https://15.playground.pp.ua/)

...and famous [Tetris](https://en.wikipedia.org/wiki/Tetris):

* [source code](https://bitbucket.org/ProDG/angular-tetris/src/master/)
* [deployed game](http://tetris.playground.pp.ua/)

I didn't decide about the next game which I'll implement in these series, but I guess it will be something utilizing Angular routing and realtime communication with server via websocket. Suggestions are welcomed! :) The same, as pull-requests to the existing games repositories.
Create Component in React
Tags: webdev, react, javascript, typescript
Published: 2020-09-23 10:08:39

The article previous, I have create project ["Getting Started with React"](https://dev.to/skipperhoa/getting-started-with-react-58p6), you can see again
Today, we continue create component in React. 
{% youtube 4m2-oUXdWuQ %}
The Article : [Create Component in React](https://hoanguyenit.com/create-component-in-react.html)
Please do like it and [Subscribe]
(https://www.youtube.com/channel/UCBOZRctXJSg9YNLyddedASg?sub_confirmation=1) to my channel for more videos.
Albert Einstein- Tribut Page
Tags: codepen
Published: 2020-09-23 10:06:40

Hello everyone,
I'm beginner in front ent development and started to learn about this two months ago. I'm journalist and want to change my profession. I never worked before like developer. All what I know is basic computer skills. Now, after two months I learned and still learn HTML and CSS. This is my first webpage I want to share with you: https://codepen.io/esmer_dragunic/full/WNwLKWq
On this page I have worked about two hours.
Please tell me your suggestion and tips for future work. 
Thanks a lot!
What OS do you use for development?
Tags: webdev, discuss, productivity, os
Published: 2020-09-23 10:06:11

---
title: What OS do you use for development?
published: true
description: 
tags: webdev, discuss, productivity, os
cover_image: https://www.omegaweb.com/wp-content/uploads/2012/09/linux-mac-windows-600x224.jpg
---
Do you mainly develop on single OS or multiple OS on separate machines?

If you work with multiple OS on a single machine, do you prefer to use dual boot or virtualization tech like VirtualBox, WSL, etc?
How to learn 4 technologies at a time?
Tags: gatsby, react, graphql, javascript
Published: 2020-09-23 10:04:29


#### Make a personal Portfolio website with Gatsby using Material UI.

You will learn [ Gatsby, React, Material UI, GraphQL ] and yeah you can build your contact form with **Formik** to learn 1 more.

Happy learning 😀😀

&nbsp;
&nbsp;
&nbsp;
&nbsp;




github starter code: [gatsby-dev-portfolio](https://github.com/Rajesh-Royal/gatsby-developer-portfolio)

Live: [gatsby-dev-portfolio](https://rajeshroyal-gatsby.netlify.app/)
Quora app clone using Android Studio and Firebase
Tags: android, java, firebase, tutorial
Published: 2020-09-23 10:02:07

Check out this ongoing series on how to make an app like quora, using android studio and firebase
https://www.youtube.com/watch?v=1n0vimrOO6w&list=PLlkSO32XQLGpsyR9SEwb8srbK3qnx1Y4W
Getting Started with React
Tags: react, javascript, webdev, typescript
Published: 2020-09-23 10:01:12

Today, I'm do a simple example with React, I create a project basic after then we run project see it, you can see in video the following below or the article :
[Geting Started with React](https://hoanguyenit.com/getting-started-with-react.html)

{% youtube gkvA1csQ1xA %}
Please do like it and [Subscribe](https://www.youtube.com/channel/UCBOZRctXJSg9YNLyddedASg?sub_confirmation=1) to my channel for more videos.
A Practical Guide to AWS IAM
Tags: aws, security, writing, books
Published: 2020-09-23 09:59:07

Ever felt you didn't really know how to use AWS IAM?
Confused where to start learning?
Wonder no more, because I'm writing the guide for YOU!

In all seriousness, I'm writing the [Practical AWS IAM Guide](https://rowanudell.ck.page/practical-aws-iam-guide-book) because I would've loved to have it 5 years ago. Now that I've learnt about IAM the hard way, I want to save others the trouble and pain.

I'm about 20k words in to the book, and still looking for _practical_ things about IAM to include.

If you have any areas of IAM you'd like explained, please let me know in the comments! I'll be releasing plenty of content for free as part of the process.
Sponsoring an Open Source Perl project - Sponsoring FErki
Tags: perl, opensource, github
Published: 2020-09-23 09:50:35

---
title: Sponsoring an Open Source Perl project - Sponsoring FErki
published: true
description: Financing an Open Source project is not easy.
tags: Perl, OpenSource, GitHub
//cover_image: https://direct_url_to_image.jpg
---


{% youtube MsLwxO301nI %}

[Sponsoring FErki](https://github.com/sponsors/ferki)
How to CSP your Netlify projects
Tags: node, npm, netlify, showdev
Published: 2020-09-23 09:48:37

---
title: How to CSP your Netlify projects
published: true
description: Get Netlify to automagically generate Content-Security-Policy headers for inline scripts and styles!
tags: node, npm, netlify, showdev
---

> TLDR: I made [this Netlify plugin for CSP](https://www.npmjs.com/package/netlify-plugin-csp-generator).  You should give it a try.

---

Have you ever seen the full fury of dev tools spitting blood/`blocked:csp` at you?

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

No? Well you should have.  Because that means you have at least tried to set up a `Content-Security-Policy` on your website before.

Setting up a content security policy is essential for preventing XSS attacks - which is a big deal, because [XSS was responsible for 40% cyber attacks in 2019](https://www.precisesecurity.com/articles/cross-site-scripting-xss-makes-nearly-40-of-all-cyber-attacks-in-2019/).

However, it's not always fun to set up.  If you're using something like [Gridsome](https://gridsome.org/) on [Netlify](http://netlify.com/), you will come across two key issues that you can't solve just by adding a `Content-Security-Policy` key to the headers in your `netlify.toml`.

 1. Gridsome (and Gatsby) inline the initial state, which is a big `<script></script>` block.
 2. Vue uses inline styles for `v-show`, like `style="display:none;"`

Both of these things are blocked by CSP rules, which is good because you don't want random scripts being added into your website or your styles being messed up (someone styling another link as a 'pay now' button for example).

To fix this, you need to generate a cryptographic hash of the inline script, so the browser knows this is okay and hasn't been tampered with.  If you search online, you might find some [bad advice](https://stackoverflow.com/q/17766817/5868894), like using `unsafe-inline`. ([Bad! Bad! saith the buyer](https://www.biblegateway.com/passage/?search=Proverbs+20%3A14&version=DARBY)...)

If you're using Netlify, you can use [this amazing package I made earlier](https://www.npmjs.com/package/netlify-plugin-csp-generator) to generate `sha256` hashes of inline scripts and styles for your `Content-Security-Policy` headers.  Head over to the Github repo, and try it out on your Netlify project.

{% github MarcelloTheArcane/netlify-plugin-csp-generator %}

If you're not using Netlify, you're on your own.  Sorry about that.

---

Want to check your website for XSS vulnerabilities? Just run this in your browser console:

``` js
const script = document.createElement('script')
script.innerHTML = 'alert("hacked!")'
document.body.appendChild(script)
```

![This website is safe from XSS](https://dev-to-uploads.s3.amazonaws.com/i/lq6f4myt9qjr1qqh9lzz.png)

![This website is not safe from XSS](https://dev-to-uploads.s3.amazonaws.com/i/zysainiyk1a5h2dirka1.png)

😱