teleren/devto huggingface dataset:
Kentico Rocks Episode #034 - How Easy Is It for a Beginner to Build a GatsbyJS / Kentico Kontent Site?
Tags: gatsby, kenticokontent
Published: 2020-07-06 13:16:32

---
title: Kentico Rocks Episode #034 - How Easy Is It for a Beginner to Build a GatsbyJS / Kentico Kontent Site?
published: true
date: 2020-07-05 15:55:45 UTC
tags: gatsbyjs, kenticokontent
canonical_url: https://www.mcbeev.com/Blog/July-2020/Kentico-Rocks-Podcast-Episode-34
---

### Introduction

In this episode of **Kentico Rocks** , Adam Amran, Product Designer at [Kentico Kontent](https://kontent.ai/?utm_source=kenticorocks34&utm_medium=mvp_27116&utm_campaign=extended_trial), joins host Brian McKeiver. They talk about Adam's experience with creating a **GatsbyJS** site backed by the **Kentico Kontent Headless CMS** as a new programmer. Adam and Brian go into the story of how Adam needed to create a new website for a side project he was working on, [Untools.co](http://untools.co).

Being a Designer by trade, Adam wasn’t quite sure where to start as he only had basic programming knowledge of HTML, CSS, and JavaScript. After forming the new idea for the project, creating his content model in Kontent, and settling on GatsbyJS as the right solution, the new site came together quickly and is now blazing fast.

Listen to the episode to find out what pitfalls happened along the way, and why Adam us now very happy with the result.

### Watch Now

{% youtube 98dD23RjkZY%}

### In This Episode

Brian McKeiver and Adam Amran discuss the following topics in Kentico Rocks podcast episode #34:

*   Kentico Kontent as a headless cms
*   Getting started building a GatsbyJS site from scratch
*   Why WebFlow was not the answer for Designers looking to build a dynamic site
*   How Easy is it get started with Kontent and GatsbyJS as a beginner
*   Adam's one thing he would do differently knowing what he knows now (hint: React basics)
*   A little bit about Adam's side project at UnTools.co

Related Links to this episode:

*   [Kentico Kontent as a Headless CMS](https://kontent.ai/?utm_source=kenticorocks34&utm_medium=mvp_27116&utm_campaign=extended_trial)
*   [GatsbyJS.org](https://www.gatsbyjs.org/)
*   [Kentico Kontent GatsbyJS Starter Template](https://github.com/Kentico/gatsby-starter-kontent)
*   [Kentico Kontent Source Plugin for GatsbyJS](https://www.gatsbyjs.org/docs/sourcing-from-kentico-kontent/)
*   [UnTools.co](https://untools.co)



You can also listen to the previous episode of Kentico Rocks where I talk about [The .NET Core Future of Kentico Xperience 13 with Sean Wright](https://www.mcbeev.com/Blog/June-2020/Kentico-Rocks-33-Net-Core-Xperience-Beta-3).
Introducing Elm Antd
Tags: elm, functional, opensource, showdev
Published: 2020-07-05 15:43:13

---
title: Introducing Elm Antd
published: true
description: Introducing an implementation of Ant Design in Elm + opportunity to contribute to your first open source project
tags: elm, fp, opensource, showdev
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/0nzbewjfm6mii5pylchg.png
---

Hey friends,

I'd like to share a project I've been working on that is finally in a presentable state (but still in its infancy)!

The project is called [Elm Ant Design](https://elm-antd.netlify.app/).

The repo can be found [here](github.com/supermacro/elm-antd).

I built Elm Ant Design in such a way that **it encourages contributions from all developers, even those who don't yet know Elm!**

### Project Goals

- Attain 100% feature parity with React's implementation of Ant Design (which can be found [here](https://ant.design/components/overview/))
- Create a space that allows developers of all skill levels to be able to easily contribute to an open source project
  - You'll see in various parts of the documentation that I make reference to contributing to the project
  - I've also created a large list of "good first issue"s and "help wanted" tags on github ([link](https://github.com/supermacro/elm-antd/issues))

### Don't Know Elm? No Problem!

Elm is a tiny language compared to JavaScript. To learn 80% of Elm takes **a lot** less time than learning 80% of JS.

Secondly, there is a small portion of the code that is written in JS:

- Webpack configuration is in JS
- Visual tests using Cypress and Percy are written entirely in JS as well

So you can contribute to Elm Ant Design without even knowing Elm!

#### "But Elm is not a very popular language, why would I want to learn Elm?"

Elm will make you a better _____ developer. Whether your main language is Python, Java, C#, JavaScript. The fact that Elm is a pure functional language means that you're forced to think in a different way about your programs. And this new mental model will help you write more predictable code in your main language - I guarantee this (I have experienced this effect first hand with my job, as I'm primarily a JS & TypeScript developer).

I would appreciate any and all feedback!
Resources for Learning MERN Stack
Tags: discuss
Published: 2020-07-05 15:19:08

Can anyone share some resources to learn MERN stack? I started reading book: [Pro MERN Stack](https://www.apress.com/gp/book/9781484243909), but it seems that its little bit hard for me.

So I was actually looking for some resources about how can I build a full MERN stack app.
Neumorphic Calculator
Tags: neumorphism, javascript, css, html
Published: 2020-07-05 15:17:05

## What is Neomorphism Neumorphism?

Neomorphism/Neumorphism is a relatively new trend which is starting to take hold in the world of UI design, it tries to merge some of the concepts of flat design and the somewhat older UI concept of Skeuomorphism.

> Skeuomorphism is a term most often used in graphical user interface design to describe interface objects that mimic their real-world counterparts in how they appear and/or how the user can interact with them

> Neumorphism is a visual style that blends techniques from skeuomorphism, realism, and flat design, to create a more modern-feeling take on the older concept. Essentially, it's a new, minimal way to design with a soft, extruded plastic look.

## What I wanted to do

I was looking to create some sort of UI using the concepts of this trend, and so thought I'd go for a relatively simple thing of a Calculator.

I wanted the buttons to feel realistic in some way, and to that end I looked for some recommendations online, and a often recommend tool was https://neumorphism.io as it gives a nice system for designing neumorphic ui elements.

I designed it so that in the untouched state, they had a extruded look to them, akin to physical buttons, upon hover, they would go somewhat flat, and on press they would have a look that they had been pressed inwards.

**Inactive State**
![Inactive State](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wm0ol9yr4ks60orrcidz.jpg)

**Active State**
![Active State on "8" button](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8lni3unpt5dhpa3z2h0y.jpg) *(the "8" button is clicked)*

## In review

I actually spent way too long trying to come up with a custom math evaluation function, as I started adding that functionality later in the day, and somehow entirely forgotten about the far simpler option of using `eval`, especially as I didn't have to worry about invalid inputs crashing the app (as the inputs were restricted by myself). 

## The final product

https://codepen.io/GeorgeWL/full/yLeXxpM
what is WebRTC ??
Tags: javascript, webdev, angular, news
Published: 2020-07-05 15:16:43

WebRTC, you can add real-time communication capabilities to your application that works on top of an open standard. 
* It supports video, voice, and generic data to be sent between peers, allowing developers to build powerful voice- and video-communication solutions.

* The technology is available on all modern browsers as well as on native clients for all major platforms.

* The technologies behind WebRTC are implemented as an open web standard and available as regular JavaScript APIs in all major browsers. For native clients, like Android and iOS applications, a library is available that provides the same functionality. 

##What can WebRTC do?
There are many different use-cases for WebRTC, from basic web apps that uses the camera or microphone, to more advanced video-calling applications and screen sharing.

**samples**
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/824uhqesh7mhfggaaxqa.PNG)
for videocall

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/tvji0tqi993pvx1hta9z.PNG)
How does your blog look in plain text 🤔
Tags: webdev, bash, discuss
Published: 2020-07-05 15:12:23

---
title: How does your blog look in plain text 🤔
published: true
description: Is it usable?
tags: webdev, bash, discuss
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/gzyft82q8bi4d18lnau0.png
---

I was recently logged into a remote server and needed to look up one of my blog posts.  Feeling a bit lazy I just `w3m https://waylonwalker.com`. And to my surprise the homepage didn't look half bad, but the posts themself, actually look great.  I love the terminal but am far from doing everything from the terminal.  This may be a new way for me to peruse my own blogs.


## My Homepage

![Home Page](https://dev-to-uploads.s3.amazonaws.com/i/gzyft82q8bi4d18lnau0.png)

## Post

![Post from my blog](https://dev-to-uploads.s3.amazonaws.com/i/304gip0lb3cnsdlek6i4.png)
Use a 'Base Font Size'
Tags: css, design
Published: 2020-07-05 15:10:51

# ...for 'Responsive Font Sizing'

A technique that I have been using to help with Responsive Web Design (RWD) - fancy words meaning that our website resizes and scales 'nicely' based on the width of our screens, etc. -is to simply apply `font-size: 10px` (or really any number, but 10px or 20px is easier for the math) to the `body` tag.

Then, all of the fonts get appropriately sized with `em`. You see, `em` units scale up directly from the first ancestor (e.g. parent, grandparent, etc.) that has an established font size. So, if we set that as `10px`, then `1em` = `10px`, `2em` = `20px`, etc.

```css
body {
  font-size: 10px;
}

h1 {
  font-size: 3.052 em;
}
```

Our `h1` will have a size of: `30.52px`. If you're wondering about this 'weird' number, I will mention later in the post.

## Why Not Just Use `px` to Specify the Font Size?

Great ❓, and a common one from my students.

The reason why is that typically folks hold ☎️s or tablets closer to their faces and we don't need the lettering to be as big.

But, on desktop views 🖥️, folks are sitting a bit further back and may need to squint to see the lettering properly.

If we were to use `px`, then we would have to manually update each and every `font-size` to be increased size.

Instead, by using `em`s, we can just increase our 'base' `font-size` and each and every other `font-size` is appropriately increased.

For example, assuming that our 'base styles - that is, styles for 'mobile' ☎️ are established as above 👆🏽, we can use a `@media` to easily scale up.

```css
@media screen and (min-width: 1024px) {
  body {
    font-size: 16px;
  }
}
```
Now, without any additional work, all of the `font-sizes` are scaled up by 60%. Or, if you don't like that math, think if it was set as: `font-size: 20px`. If the original was `10px`, it means now all things are doubled.

## Type Scaling

Why this 'weird' number 👆🏽? `font-size: 3.052 em;`

TBH, not 💯 sure, but apparently there are some 'design rules' regarding what makes 'font-size scaling' and 'typography' look 'good' on sites. To this end, I use [Type Scale](https://type-scale.com/) to get recommendations for how the type should be...scaled. 

You simply put in your font (if using Google Fonts) and our base font size and play with scaling.

![Screenshot from Type Scale](https://dev-to-uploads.s3.amazonaws.com/i/vum8fujbgq2ureavtzwh.png)

_It actually generates CSS for you, but I **don't** use that - there is some other 'weird stuff' added._

---

For some additional perspective, you can kindly listen 👂🏽 to this [episode on CSS Units from Syntax.fm.](https://syntax.fm/show/107/hasty-treat-css-units)
[Tutorial Git] Copiando um repositório existente (git clone)
Tags: git, clone, fetch, womakerscode
Published: 2020-07-05 15:08:46

Vá até o diretório na sua máquina em que você deseja colocar o repositório e digite no terminal:

```
$ git clone url_do_repositorio_que_deseja_copiar
```

- **$** indica que você deve usar o **usuário comum** para fazer essa operação.

Caso deseje copiar, além do branch padrão, algum outro branch do repositório, digite:

```
$ git fetch origin nome_do_branch_remoto:nome_que_deseja_dar_para_o_branch_local
```

Para pegar o link, vá até o repositório remoto desejado e na parte direita clique no botão **clone or download**, como mostrado na imagem abaixo.

![clone or download](https://dev-to-uploads.s3.amazonaws.com/i/12n567tln5255b4ayn91.png)
what is jwt
Tags: javascript, startup, showdev, angular
Published: 2020-07-05 14:36:22

A JSON Web Token (JWT) is an open standard (RFC 7519) that defines a compact and self-contained way for securely transmitting information between parties as a JSON object. This information can be verified and trusted because it is digitally signed. JWTs can be signed using a secret or a public/private key pair.

##What Is the JSON Web Token Structure?
  * Header
  * Payload
  * Signature
##Header
The header typically consists of two parts: the type of token, which is JWT, and the hashing algorithm that is used, such as HMAC SHA256 or RSA.

For example:
{
  "alg": "HS256",
  "typ": "JWT"
}
Then, this JSON is ** Base64Url-encoded** to form the first part of the JWT.

##Payload
The second part of the token is the payload, which contains the claims. Claims are statements about an entity.

* **Registered claims**: These are a set of predefined claims which are not mandatory but recommended, to provide a set of useful, interoperable claims.

* **Public claims**: These can be defined at will by those using JWTs. But to avoid collisions they should be defined

* **Private claims**: These are the custom claims created to share information between parties that agree on using them and are neither registered or public claims.

An example payload is shown below:
{
  "sub": "1234567890",
  "name": "test User",
  "admin": true
}
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/46ta0nl71wayda5p1vjx.PNG)
##Signature
To create the signature part, you have to take the encoded header, the encoded payload, a secret, the algorithm specified in the header, and sign that.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/yp3gsse61tbbbuq1enpe.PNG)

**HMACSHA256(
  base64UrlEncode(header) + "." +
  base64UrlEncode(payload),
  secret)**
A Beginners guide to Data Science: How I started with Data Science, Kaggle and Machine Learning...Solutions, Tips and much more
Tags: datascience, ai, machinelearning, kaggle
Published: 2020-07-05 14:36:13

This is the starting post of a series I am writing that is meant to help people get started with Data Science. I am not a highly experienced person in Data Science yet, but I keep learning everyday and I am gonna keep publishing content to help people get started with Data Science as getting started seems like the toughest job.
 
Sometimes I may be automatically publishing my work done at Kaggle or any website directly through a web page parser I wrote with Python, Selenium and Beautiful Soup, so pardon me for any markdown errors. I hope to write a parser one day that will learn from its mistakes and create a perfect medium or dev.to post. But that still has a long way to go haha :)

The upcoming series is meant to help newbies with Data Science, get through Kaggle Courses, where I discuss the solutions of courses, contests and much more here or in upcoming posts.

Pardon me for my mistakes if any, since I am new to publishing written content but I hope to create high quality work as I always believe in highest standards of work.

Please follow me if you like my content or feel free to reach out to me regarding any comments/feedback. I always value comments from anyone irrespective of your experience, as I believe all humans are equal. Lets all grow as humans and create a better world :)
Learning things is like meeting a new person
Tags: learning
Published: 2020-07-05 14:28:20

# Recently a thought crossed my mind, on how learning new things is like meeting a new person.

For the last couple of days, I've been reading about design patterns in C#. I've red through a couple of articles, listened to a few podcasts and watched some videos.

I really felt like I understood the idea and I knew about them quite a lot, but I came to a conclusion that unless I apply and use those patterns in real life scenarios, I won't really know on when It's best to use and how they will affect the structure and behaviour of my code. Whether they will make the code simpler to understand and edit, or whether they will overcomplicate the code and actually make it harder to work with. I didn't know how these patterns will behave in certain situations.

I thought about this as about meeting a new person or someone that you know a lot about, but have never met them in real life. Sometimes you may read a lot about someone, or read a lot of opinions about a person, which influence on how you think that person will be, behave or act in some situations. But only after you meet the person in real life and spend some time with them, you begin to know them, understand and learn on how they will actually behave and what their strong sides are and how to utilise them. 

I feel it's similar with learning new things and I try to get a hands-on exeprience and implement them myself when reading about concepts, patterns or ideas about writing code.

What are your thoughts on this?
Flattening Arrays In Javascript
Tags: javascript, typescript, computerscience, codequality
Published: 2020-07-05 14:17:21

It was always complicated to flatten an array in #JavaScript. Not anymore! ES2019 introduced a new method that flattens arrays.

The Main purpose of Flattening Arrays is to convert multi dimensional array to single dimensional array.(2d or 3D to 1D array)


The flat() method is an inbuilt array method that flattens a given array into a newly created one-dimensional array. It concatenates all the elements of the given multidimensional array, and flats upto the specified depth. We can specify the depth limit to where we need to flatten the array. By default, the depth limit is 1.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/vi3ho67rzii28vjpgtul.PNG)
**older Ways of flatting an array**

var arrays = [["$6"], ["$12"], ["$25"], ["$25"], ["$18"], ["$22"], ["$10"], ["$0"], ["$15"],["$3"], ["$75"], ["$5"], ["$100"], ["$7"], ["$3"], ["$75"], ["$5"]];

It can be best done by javascript **reduce** function.

arrays = arrays.reduce(function(a, b){
     return a.concat(b);
}, []);

**Or, with ES2015:**

arrays = arrays.reduce((a, b) => a.concat(b), []);

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

latest way of doing(2019)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/wxyghflqsk5veh32bxqz.PNG)

const arr1 = [1, 2, [3, 4]];
arr1.flat(); 
// [1, 2, 3, 4]

const arr2 = [1, 2, [3, 4, [5, 6]]];
arr2.flat();
// [1, 2, 3, 4, [5, 6]]

// Flatten 2 levels deep
const arr3 = [2, 2, 5, [5, [5, [6]], 7]];
arr3.flat(2);
// [2, 2, 5, 5, 5, [6], 7];

// Flatten all levels
const arr4 = [2, 2, 5, [5, [5, [6]], 7]];
arr4.flat(Infinity);
// [2, 2, 5, 5, 5, 6, 7];

Thanks !!Happy coding
Securing firebase config keys while deploying angular application on gh-pages pages via GitHub actions
Tags: angular, firebase, github, actions
Published: 2020-07-05 14:16:57

Am using firebase with Angular, as usual, firebase has provided config keys for the project. The problem is I do not want to commit my keys to GitHub but I need these keys to be available since the application is deployed to GitHub pages via GitHub actions. If I include these keys in gitignore these keys will not get commited and my application will simply not work on gh-pages, I have created job through GitHub actions to build and deploy application to gh-pages on every push on master branch. 
The questions are :-
1. Is it safe to expose the config keys (api key, database url, appid etc) to GitHub.
2. What is the method to deploy application to gh-pages but at the same time not exposing config keys through commits.
3. Can we use GitHub secrets for this situation, if yes then how ?
Flattening Arrays In Javascript
Tags: javascript, typescript
Published: 2020-07-05 14:13:13

It was always complicated to flatten an array in #JavaScript. Not anymore! ES2019 introduced a new method that flattens arrays.

The Main purpose of Flattening Arrays is to convert multi dimensional array to single dimensional array.(2d or 3D to 1D array)


The flat() method is an inbuilt array method that flattens a given array into a newly created one-dimensional array. It concatenates all the elements of the given multidimensional array, and flats upto the specified depth. We can specify the depth limit to where we need to flatten the array. By default, the depth limit is 1.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/vi3ho67rzii28vjpgtul.PNG)
**older Ways of flatting an array**

var arrays = [["$6"], ["$12"], ["$25"], ["$25"], ["$18"], ["$22"], ["$10"], ["$0"], ["$15"],["$3"], ["$75"], ["$5"], ["$100"], ["$7"], ["$3"], ["$75"], ["$5"]];
![es]()
It can be best done by javascript **reduce** function.

arrays = arrays.reduce(function(a, b){
     return a.concat(b);
}, []);

**Or, with ES2015:**

arrays = arrays.reduce((a, b) => a.concat(b), []);

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

latest way of doing(2019)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/wxyghflqsk5veh32bxqz.PNG)

const arr1 = [1, 2, [3, 4]];
arr1.flat(); 
// [1, 2, 3, 4]

const arr2 = [1, 2, [3, 4, [5, 6]]];
arr2.flat();
// [1, 2, 3, 4, [5, 6]]

// Flatten 2 levels deep
const arr3 = [2, 2, 5, [5, [5, [6]], 7]];
arr3.flat(2);
// [2, 2, 5, 5, 5, [6], 7];

// Flatten all levels
const arr4 = [2, 2, 5, [5, [5, [6]], 7]];
arr4.flat(Infinity);
// [2, 2, 5, 5, 5, 6, 7];

Thanks !!Happy coding