teleren/devto huggingface dataset:
Sanity Datatable serializer for 11ty sites
Tags: jamstack, webdev, 11ty, eleventy
Published: 2020-09-10 17:50:42

---
title: Sanity Datatable serializer for 11ty sites
published: true
date: 2020-09-10 15:00:00 UTC
tags: jamstack,webdev,11ty,eleventy
canonical_url: https://katiekodes.com/sanity-11ty-datatable-serializer/
---

Playing with the 11ty (Eleventy) code from [Bryan Robinson's `sanity-eleventy-blog` repo](https://github.com/brob/sanity-eleventy-blog) _(from [Sanity's official tutorial on 11ty](https://www.sanity.io/guides/how-to-get-started-with-the-11ty-eleventy-blog-starter))_ and a Sanity project started using the built-in "blog" dataset, I got stuck adding [Fred Jens's `sanity-datatable` Sanity Studio plugin](https://github.com/fredjens/sanity-datatable) to the `body` rich-text editor of Sanity because 11ty threw an error:  "Unknown block type 'table', please specify a serializer for it in the serializers.types prop."

The solution was to edit the object exported from Bryan's `utils/serializers.js` as `module.exports`, adding the following to it:

```javascript
,
    table: ({node}) => `
<table>
  <thead>
    <tr><th scope="col">${node.rows[0].cells.join('</th><th scope="col">')}</th></tr>
  </thead>
  <tbody>
    ${node.rows.slice(1).map(row => '<tr><td>' + row.cells.join('</td><td>') + '</td></tr>').join('\r\n    ')}
  </tbody>
</table>
      `
```

This is because the `datatable` plugin returns data that looks like this:

```json
{
  "_key": "abc123",
  "_type": "table",
  "rows": [
    {
      "_key": "def456",
      "_type": "column",
      "cells": ["Row 1 Cell 1 Value Here", "Row 1 Cell 2 Value Here"]
    },
    {
      "_key": "ghi789",
      "_type": "column",
      "cells": ["Row 2 Cell 1 Value Here", "Row 2 Cell 2 Value Here"]
    },
    {
      "_key": "zyx987",
      "_type": "column",
      "cells": ["Row 3 Cell 1 Value Here", "Row 3 Cell 2 Value Here"]
    }
  ]
}
```

What my JavaScript transforms Sanity's output into is this snippet of _([hopefully accessible](https://www.w3.org/WAI/tutorials/tables/one-header/#table-with-ambiguous-data))_ HTML-formatted text:

```html
<table>
  <thead>
    <tr><th scope="col">Row 1 Cell 1 Value Here</th><th scope="col">Row 1 Cell 2 Value Here</th></tr>
  </thead>
  <tbody>
    <tr><td>Row 2 Cell 1 Value Here</td><td>Row 2 Cell 2 Value Here</td></tr>
    <tr><td>Row 3 Cell 1 Value Here</td><td>Row 3 Cell 2 Value Here</td></tr>
  </tbody>
</table>
```

If you didn't want to treat your first row as a table header, the "serializer" would be a bit shorter:

```javascript
,
    table: ({node}) => `
<table>
  ${node.rows.map(row => '<tr><td>' + row.cells.join('</td><td>') + '</td></tr>').join('\r\n  ')}
</table>
      `
```

I'm sure there're more elegant ways to do this if you actually know modern JavaScript, but I'm proud of myself for getting this working at all without asking a friend, so here stands my code in all its clunkiness.
The Cloud Skills Show Episode 5: Web

Tags: webdev, beginners, video, azure
Published: 2020-09-10 14:58:17

The Cloud Skills Show is a new weekly livestream, brought to you by the folks at Microsoft Developer UK. Each week, we'll feature guests from the UK and around the world to talk about the cloud skills that Developers and IT Professionals can use to develop their career (or to start a career in tech).

In Episode 5 we talked about building for the web. We heard about innovations in Azure Static Web Apps, and about Blazor, an open source framework to create web apps with C#. Plus, we got a quick preview of Microsoft Ignite with Amy Boyd.  

***
>Recording Now Available
{% youtube YI_Mp1g1WRY %}

***

Here are the links and resources from this week's show: 

####[Jay Gordon](www.twitter.com/jaydestro) - Azure Static Web Apps####

|  Resource       | URL  |
| ------------- | -----:|
Deploy a static Hugo site with Azure Static Web App Service and GitHub Actions (YouTube)|https://aka.ms/cs-hugoswa 
AzureFunBytes on Twitter|https://twitter.com/azurefunbytes 
Azure Static Web Apps PREVIEW|https://aka.ms/cs-swa 
Azure Static Web Apps documentation|https://aka.ms/cs-swadocs 
Tutorial: Publish a Hugo site to Azure Static Web Apps Preview|https://aka.ms/cs-swa-tutorial 
Rico Info Code|https://github.com/jaydestro/ricoinfo 
$200 Free Azure!|https://aka.ms/cs-freeazure 

####[Chris Sainty (MVP)](www.twitter.com/chris_sainty) - Blazor####

|  Resource       | URL  |
| ------------- | -----:|
Awesome Blazor|https://github.com/AdrienTorris/awesome-blazor 
Blazor University|https://blazor-university.com/ 
Blazor Gitter|https://gitter.im/aspnet/Blazor 
Blazor - Microsoft Docs|https://aka.ms/cs-blazor 
Blazor & WebAssembly - Microsoft Learn|https://aka.ms/cs-blazorlearn 

####[Amy Boyd](www.twitter.com/amykatenicho) & [Adam Jackson](www.twitter.com/adamj89) - Microsoft Ignite####

|  Resource       | URL  |
| ------------- | -----:|
Register for Microsoft Ignite|https://myignite.microsoft.com
Visit Microsoft Learn|https://aka.ms/cs-learn
Register for AI Edge Show|Link Coming Soon - event 1st October 6pm UK time
Anyone attending Open Up Summit this week?
Tags: discuss
Published: 2020-09-10 14:50:11

---
title: Anyone attending Open Up Summit this week?
published: true
description: 
tags: discuss
//cover_image: https://direct_url_to_image.jpg
---

I met the organizers of [Open Up Summit](https://www.openup.global/?lang=en) a couple months ago and have been really impressed by their commitment and passion for all things open source. 

Usually held in Taiwan, they've turned Open Up into a 24-hour live streamed conferenced this year with talk topics ranging from open data to open gaming to open education (and of course, OSS). I was too slow about submitting a CFP this year, and really wish I was more involved. 

Anyway, this will be a really fun event to attend before diving into Hacktoberfest next month! And if you're thinkinga bout it, use `OpenUP20` for a 20% off discount.
Referencias vs Recomendación
Tags: comunidad, recomendacion
Published: 2020-09-10 14:48:41

---
title: Referencias vs Recomendación
published: true
description: Si no tienes a quien recomendar, ayuda dando referencias
tags: comunidad,recomendacion
//cover_image: https://direct_url_to_image.jpg
---

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

¿Te han preguntado si tienes a alguien que recomendar? Automáticamente recorres una lista de pocas personas, y muy frecuentemente responde, la verdad **no te puedo recomendar a nadie**.

Conoces muchas personas pero no las conoces lo suficiente para recomendarlas.

Sin embargo, aún puedes ayudar, tanto a la persona que busca un servicio, como a una o varias personas que ofrecen el servicio.

# Puedes dar referencias 
 
> <q>No te puedo recomendar a nadie, pero sé que nombreA, nombreB y nombreC, te podrian ayudar. Te puedo pasar sus contactos y hablás con ellos a ver qué te parecen</q>

De esta forma sirves de puente o enlace entre personas que se pueden ayudar mutuamente. Y generas posibles prospectos para los contactos en tu red. 

Ayudas siendo un prefiltro para quien pregunta, pero le dejas la decisión final de elegir a su mejor juicio.

De esta forma puedes ayudar sin esperar nada a cambio.
Replacing IMG alt values with title in js
Tags: wordpress, javascript
Published: 2020-09-10 14:47:43

We recently wanted to clean up some existing Wordpress sites for SEO, and part of that process involved fixing missing or broken IMG tags. 

Here's a quick fix jquery solution for Wordpress you can use to replace IMG titles with the alt tag automatically. This way all your images without alt tags will be populated. 

```
jQuery(document).ready(function(){
	jQuery("img").attr("title", function() {
		 var theValue =  jQuery(this).attr("alt");
		 return theValue;
	});
});
```

In action at
[Printing New York](www.printingnewyork.com/same-day-printing/)
[Luxury Printing](www.luxuryprinting.com/metal-business-cards/)
[Gorilla Printing](gorillaprinting.com/construction-signs/)
[Printing Brooklyn](www.printingbrooklyn.com)
Kubernetes-native Chaos Engineering journey eased with Litmus Tutorials
Tags: kubernetes, litmuschaos, devops, opensource
Published: 2020-09-10 14:36:12

With the rise in the popularity of Chaos Engineering for Kubernetes using LitmusChaos, the broader community needs to learn everything about Litmus from scratch in the meantime to get started with chaos testing their Kubernetes applications.

To help ease this journey for Kubernetes developers & SREs, the Litmus maintainers decided to come up with a series of tutorials that give a detailed explanation to various questions and thoughts one might have before getting started with Litmus. 
In spite of the pre-existing [documentation](https://docs.litmuschaos.io/docs/getstarted/) as well as [insightful blogs](https://dev.to/t/litmuschaos/latest), often users demand or seek a better visual representation and learning experience for any toolset, framework, technology or language. What better than detailed presentations & explanations?

The Litmus tutorials started off in late July with the agenda of briefly explaining various functioning, aspects, components, and experiments related to LitmusChaos. The only goal these tutorials have is to help inculcate the true value of Kubernetes resiliency and reliability through chaos testing among developers & SREs.

Check out [Litmus tutorials on YouTube](https://www.youtube.com/playlist?list=PLmM1fgu30seVGFyNIEyDgAq6KnzgW2p3m) now!

Don't forget to subscribe to the [LitmusChaos YouTube channel](https://www.youtube.com/channel/UCa57PMqmz_j0wnteRa9nCaw) to stay updated with everything happening in the cloud-native Chaos Engineering world with LitmusChaos.

Want an overview of the Litmus Tutorials here? Why not? 

* Introduction to LitmusChaos

{% youtube ep6yxp_23Bk %}

* LitmusChaos Architecture

{% youtube L38gBn8eEHw %}

* Getting Started with Litmus

{% youtube W5hmNbaYPfM %}

* Litmus Components

{% youtube yhWgzN90SME %}

* ChaosHub

{% youtube dan0AXO_soY %}

* Litmus Chaos Workflows

{% youtube xLjTx8lqTuQ %}



Are you an SRE or a Kubernetes enthusiast? Does Chaos Engineering excite you?
Here are some important links to follow:
[Litmus Website](https://litmuschaos.io/)
[Litmus Docs](https://docs.litmuschaos.io/docs/getstarted/)
[Litmus is on Twitter](https://twitter.com/LitmusChaos)

Join our community on [Slack](https://slack.litmuschaos.io/) for detailed discussions & regular updates on Chaos Engineering for Kubernetes.

Check out the [LitmusChaos GitHub repo](https://github.com/litmuschaos/litmus) and do share your feedback.
The 3Gs of CSS3: FlexBox Edition
Tags: css, codenewbie, webdev, productivity
Published: 2020-09-10 14:31:53

_A Collection of **G**uides, **G**ames, and **G**enerators useful for your everyday CSS needs. The idea behind this collection is to help you become a better CSS developer by providing resources to help you understand the concepts and generators that will help you become more efficient._

# **Flexbox**

Flexbox is a powerful layout tool that lets you solve responsive web design problems without needing to use media queries. 

## **G**uide

[CSS Tricks](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) has a complete guide with illustrations that will help you visualize the power of flexbox. You can even buy a poster from them to hang on your wall.

![Flexbox guide Preview](https://dev-to-uploads.s3.amazonaws.com/i/eqp2n36kavc4nl1qbmpf.png)

## **G**ames

Move the froggy to the lilypad with [FlexBox Froggy](http://flexboxfroggy.com/). A very simple kid-like game that will help you understand flexbox.

![FlexBox Froggy screenshot](https://dev-to-uploads.s3.amazonaws.com/i/5997hgelxhgz9z5jwhi7.png)

Kiddy games not your thing? How about a war-like game? With [FlexBox Defense](http://www.flexboxdefense.com/) you have to stop the enemies from getting past your defense using the power of flexbox! 

![Flexbox Defense screenshot](https://dev-to-uploads.s3.amazonaws.com/i/lkgzgslgaqtekwpezvh7.png)

You can kill zombies with [FlexBox Zombies](https://flexboxzombies.com/p/flexbox-zombies). This one follows a storyline so don’t forget that you are actually coding when playing this game. 

![Flexbox Zombies screenshot](https://dev-to-uploads.s3.amazonaws.com/i/rcorgamn4xm3zwjhrwpr.png)

## **G**enerator

Just because you understand a concept doesn’t mean you need to memorize everything. [Flexy Boxes](https://the-echoplex.net/flexyboxes) is an amazing tool to have when solving your layout problems. Add as many items as you need and see in real-time what each property will do to each of them.

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

Alternative: [flexplorer](https://bennettfeely.com/flexplorer/)

## Bonus: VS Code Extension

I was not going to add this, but this extension got better with the last update and it is now more interactive! Check out [CSS Flexbox Cheatsheet](https://marketplace.visualstudio.com/items?itemName=dzhavat.css-flexbox-cheatsheet) VS code extension. If you don’t know how to install this, you can take a look at my previous article on [VS Code Extensions](https://dev.to/santiagocodes/top-10-essential-vs-code-extensions-e37).

![CSS Flexbox Cheatsheet](https://dev-to-uploads.s3.amazonaws.com/i/8duhax3gqksi4q6razyo.gif)

---

If you liked what you read hit that :heart: on the left or wherever it is. If you really liked it don’t forget to share it with the community by hitting that dot-dot-dot icon near the heart. 

:computer: **article.close()**
Openshift Z-patch upgrade in restricted environment without mirroring quay.io
Tags: openshift, devops, docker
Published: 2020-09-10 14:27:29

Since version 4.2 Openshift features a disconnected installation method that permits to setup and upgrade a cluster that is not connected to internet.

This methods implies you prior copy [the artifacts from the release](https://mirror.openshift.com/pub/openshift-v4/clients/ocp/4.3.28/release.txt) you will install into your internal registry and to declare using an `imagecontentsourcepolicy` manifest the mirror so all url from `quay.io` will substitute on-the-fly by your internal.

On the day to day management this is not very convenient because it requires you to monitor and to copy when necessary, or to have a script regularly running and that will copy (even if you'll never use it) the latest release available.

However if you have a reverse-cache (or even a registry with reverse-cache like [JFrog Artifactory](https://jfrog.com/artifactory/) setup for quay.io you can upgrade directly through it without having to mirror.

I assume you already setup for the remote-mirror so the following works
```bash
podman pull repository.mycorp.com:5000/openshift-release-dev/ocp-release@sha256:4841bd519be0d5c533d9b4da2996a6d0d340ae1eddb8a6ea213958c7460dcdb4
```

# Create/Update an imagecontentsourcepolicy to point to your artifactory

```yaml
apiVersion: operator.openshift.io/v1alpha1
kind: ImageContentSourcePolicy
metadata:
  name: artifactory-remote
spec:
  repositoryDigestMirrors:
  - mirrors:
    - repository.mycorp.com:5000/openshift-release-dev
    source: quay.io/openshift-release-dev
```

Now generate a digest of the images from a node that has access to internet.

```bash
#!/bin/bash
# TARGET_VERSION should be in format x.y.z, for example 4.3.28
export OCP_RELEASE_NUMBER=${TARGET_VERSION}
export DIGEST="$(oc adm release info quay.io/openshift-release-dev/ocp-release:${OCP_RELEASE_NUMBER}-x86_64 | sed -n 's/Pull From: .*@//p')"
export SIGNATURE_BASE64=$(curl -s "https://mirror.openshift.com/pub/openshift-v4/signatures/openshift/release/$(echo $DIGEST | cut -d: -f1)=$(echo $DIGEST | cut -d: -f2)/signature-1" | base64 -w0 && echo)
export DIGEST_ALGO=$(echo $DIGEST | cut -d: -f1)
export DIGEST_SIGNATURE=$(echo $DIGEST | cut -d: -f2)
 
cat <<EOF | oc apply -f -
apiVersion: v1
kind: ConfigMap
metadata:
    name: release-image-${OCP_RELEASE_NUMBER}
    namespace: openshift-config-managed
    labels:
       release.openshift.io/verification-signatures: ""
binaryData:
    ${DIGEST_ALGO}-${DIGEST_SIGNATURE}: ${SIGNATURE_BASE64}
EOF
```

Now you are ready to use the upgrade procedure from redhat as if you had mirrored quay.io
WebScrap for profit
Tags: puppeteer, node, discuss
Published: 2020-09-10 14:20:15

I'm planning learn puppetter to make fun projects while extract data from websites that doesn't provide API.

My question is since puppetter is developed by google is it legal to use for commercial use?
Lets see that I want to create a parcel tracking, some couriers doesnt provide API, so I was thinking to use puppetter to extract data from couriers. Not planning to make money, just want to develop the app for my portfolio. 
But what if It gets a lot of users and I want to make money out of It, is It legal?
Same if I want to extract data from sports in realtime  or create a website similar to skyscanner but get their data for cheap flights, probably they have something to block but If they not, is it possible do to it for commercial use?
[extension] daxslab/yii2-coreui
Published: 2020-09-10 14:24:37

---
title: [extension] daxslab/yii2-coreui
published: true
date: 2020-09-10 14:15:04 UTC
tags: 
canonical_url: https://www.yiiframework.com/extension/daxslab/yii2-coreui
---

### Yii2 CoreUI [¶](#yii2-coreui)

1. [Installation](#installation)
2. [Usage](#usage)

[![Latest Stable Version](https://user-content.yiiframework.com/img/UKxc3J1EcJslgo75fB5FYQ/https/poser.pugx.org/daxslab/yii2-coreui/v/stable.svg)](https://packagist.org/packages/daxslab/yii2-coreui)[![Total Downloads](https://user-content.yiiframework.com/img/3AgROT4hKVpfNSffG2LRDg/https/poser.pugx.org/daxslab/yii2-coreui/downloads)](https://packagist.org/packages/daxslab/yii2-coreui)[![Latest Unstable Version](https://user-content.yiiframework.com/img/mWAT-upTixWyjXwSo-ziDA/https/poser.pugx.org/daxslab/yii2-coreui/v/unstable.svg)](https://packagist.org/packages/daxslab/yii2-coreui)[![License](https://user-content.yiiframework.com/img/7ZVykHtQLxE93pfdtyexSw/https/poser.pugx.org/daxslab/yii2-coreui/license.svg)](https://packagist.org/packages/daxslab/yii2-coreui)

Yii2 extension includind the base layout for CoreUI admin dashboard

#### Installation [¶](#installation)

The preferred way to install this extension is through [composer](http://getcomposer.org/download/).

Either run

```
php composer.phar require --prefer-dist daxslab/yii2-coreui "*"

```

or add

```
"daxslab/yii2-coreui": "*"

```

to the require section of your `composer.json` file.

#### Usage [¶](#usage)

Make your module or controller layout to be `@daxslab/coreui/views/layouts/main.php` by modifiying the layout attribute.

Also you can make your `@app/views/layouts/main.php` to look like:

```

<?php $this->beginContent('@daxslab/coreui/views/layouts/main.php') ?>
    <?= $content ?>
<?php $this->endContent() ?>

```

Consider that there a a group of variables at the beginning of `@daxslab/coreui/views/layouts/main.php` that you can setto specify brand icons, menu contents, etc.
[wiki] How to add Open Graph and Twitter Card tags to Yii2 website.
Published: 2020-09-10 14:23:37

---
title: [wiki] How to add Open Graph and Twitter Card tags to Yii2 website.
published: true
date: 2020-09-10 14:15:03 UTC
tags: 
canonical_url: https://glpzzz.dev/2020/09/10/opengraph-twitter-card-yii2-websites.html
---

[OpenGraph](https://ogp.me/) and [Twitter Cards](https://developer.twitter.com/en/docs/twitter-for-websites/cards/overview/abouts-cards) are two metadata sets that allow to describe web pages and make it more understandable for Facebook and Twitter respectively.

There a lot of meta tags to add to a simple webpage, so let's use [TaggedView](https://github.com/daxslab/yii2-taggedview)

This component overrides the `yii\web\View` adding more attributes to it, allowing to set the values on every view. Usually we setup page title with

```
$this->title = $model->title;

```

Now, with **TaggedView** we are able to set:

```
$this->title = $model->title;
$this->description = $model->abstract;
$this->image = $model->image;
$this->keywords = ['foo', 'bar'];

```

And this will generate the proper OpenGraph, Twitter Card and HTML meta description tags for this page.

Also, we can define default values for every tag in the component configuration that will be available for every page and just will be overriden if redefined as in previous example.

```
'components' => [
    //...
    'view' => [
        'class' => 'daxslab\taggedview\View',
        'site_name' => '',
        'author' => '',
        'locale' => '',
        'generator' => '',
        'updated_time' => '',
    ],
    //...
]

```

Some of this properties have default values assigned, like `site_name` that gets `Yii::$app->name` by default.

Result of usage on a website:

```
<title>¿Deseas comprar o vender una casa en Cuba? | HogarEnCuba, para comprar y vender casas en Cuba</title>
<meta name="author" content="Daxslab (https://www.daxslab.com)">
<meta name="description" content="Hay 580 casas...">
<meta name="generator" content="Yii2 PHP Framework (http://www.yiiframework.com)">
<meta name="keywords" content="HogarEnCuba, ...">
<meta name="robots" content="follow">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:description" content="Hay 580 casas...">
<meta name="twitter:image" content="https://www.hogarencuba.com/images/main-identifier_es.png">
<meta name="twitter:site" content="HogarEnCuba">
<meta name="twitter:title" content="¿Deseas comprar o vender una casa en Cuba?">
<meta name="twitter:type" content="website">
<meta name="twitter:url" content="https://www.hogarencuba.com/">
<meta property="og:description" content="Hay 580 casas...">
<meta property="og:image" content="https://www.hogarencuba.com/images/main-identifier_es.png">
<meta property="og:locale" content="es">
<meta property="og:site_name" content="HogarEnCuba">
<meta property="og:title" content="¿Deseas comprar o vender una casa en Cuba?">
<meta property="og:type" content="website">
<meta property="og:updated_time" content="10 sept. 2020 9:43:00">

```
Class Inheritance
Tags: javascript, beginners, codenewbie, webdev
Published: 2020-09-10 14:12:02


This blog post will be a brief introduction to inheritance in classes.

To create an instance of a class, we use the `new` keyword. If we would like to inherit from a base class, then we can use the `extends` keyword.

```javascript
class Person {
    name;
    age;

    constructor(name) {
        this.name = name;
        this.age = 33;
    }
    getName() {
        return this.name;
    }
}

// creating new instance of a class Person
const person = new Person("Parwinder");
console.log(person.getName()); // Parwinder
```

To extend the Person class, let's use `extend`.

```javascript
class Person {
    name;
    age;

    constructor(name) {
        this.name = name;
        this.age = 33;
    }
    getName() {
        return this.name;
    }
}

const person = new Person("Parwinder");
console.log(person.getName()); // Parwinder

class Female extends Person {
    gender;
    constructor(name) {
        super(name);
        this.gender = "Female";
    }
}

const female = new Female("Lauren");

console.log(female.getName()); // Lauren
console.log(female instanceof Female); // true
console.log(female instanceof Person); // true
```

`super` keyword allows us to use the parent class constructor. We can also use `super` to call a method from the parent/base class.

Classes in ES6 support:
* prototypical inheritance,
* `super`
* instance and static methods.