teleren/devto huggingface dataset:
For embeds, does DEV use Open Graph tags? And what is the minimum set of OG tags required by DEV for an embed to work?
Tags: meta, help
Published: 2022-07-22 16:34:00

__UPDATE__ For the answer to the question posed in this post, please see the following post:

{% link https://dev.to/cicirello/how-to-enable-dev-post-embeds-for-pages-from-your-website-2dp8 %}

__ORIGINAL POST STARTS HERE__

My two part question is the title of the post. But here is a bit more context. 

I'm assuming DEV uses Open Graph tags for processing embeds of websites. As an experiment, I tried to embed a page that did not have open graph tags, with the following `{% embed https://url/to/page/without/open/graph/tags %}` and the behavior was reasonable for such a page (e.g., a link to the page with the URL as the text of the link and nothing else). You can't really do much else if you aren't given the relevant data.

When trying the same with a page that has `og:url`, `og:title`, `og:image`, `og:image:width`, and `og:image:height`, DEV.to's preview in the editor results in the error: `Liquid error: internal`. Here's a specific example in markdown:

```markdown
{% embed https://www.cicirello.org/ %}
```

And here is with what the above produces (__UPDATE__: Works now by adding the `og:description` property):

{% embed https://www.cicirello.org %} 

__Am I correct that Open Graph tags are used when processing embeds in a DEV.to post? And if so, what is the minimum set that are required for an embed to work correctly?__

I'm guessing that my error might be the lack of `og:type` because that is the only one of the four that the [Open Graph protocol](https://ogp.me/) lists as required (`og:title`, `og:type`, `og:image`, `og:url`) that I don't currently have. But further down in the Open Graph protocol, it says "Any non-marked up webpage should be treated as og:type website." I was (probably incorrectly) assuming that leaving `og:type` out implies `website` for the type, which is why I left it out. That appears to be the behavior on other sites that use OG tags (e.g., LinkedIn), `website` assumed if tag not present.

But another possibility is my lack of `og:description`, which seems to be commonly used, but not listed among the required tags in the protocol.

Anyway, which tags does DEV require for embeds to work?
HOWTO: Injecting UI into Website with Browser Extension
Tags: extension, chrome, typescript, plasmo
Published: 2022-07-22 16:17:00

## TL,DR:

```bash
pnpm create plasmo inject-ui
cd inject-ui
touch content.tsx
```

`content.tsx`
```tsx
const Overlay = () => (<h1>HELLO WORLD</h1>)
export default Overlay
```

```
pnpm dev
```

Load the extension in Chrome, refresh and you should see `HELLO WORLD` injected into the top of the webpage.

--- 

## Explanations

Browser extensions can inject DOM elements into a website using a content script. However, the injected element might inherit the website's style without proper encapsulation. This is often undesirable for any site-agnostic browser extension.

There are 3 solutions to the problem above:

### A. Render the element with a style tag that does [css unset](https://developer.mozilla.org/en-US/docs/Web/CSS/unset).

`A` is often seen employed by ad. It works well for self-contained, simple components that render images. However, it is very hard to leverage a design system that has inherited styling, since the unset cascades down. Unless you have a dedicated style injection scheme, it is very difficult to use and the extra style tag makes the code not very clean.

### B. Render the element inside [an iframe](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe).

`B` isolates the element well and is the go-to technique of many old browser extensions. However, the iframe container can be hard to work with when trying to blend the injected component seamlessly into the website. Iframe's elements are nested inside an inner document within its frame, with its own head and body. This makes it tricky to style and control elements inside the iframe, as well as align them with the elements of the website.

### C. Render the element inside a [Shadow DOM](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM).

`C` is the best technique for web extension. Introduced as the key part of the web component API, the idea is that the shadow DOM is a separate DOM attached to the underlying main DOM. Nothing inside it can affect the main world. The Plasmo framework uses this technique behind the scene to enable seamless injection of React component into any webpage. We call this feature "content script UI."
Using Larapex Chart on your Laravel application
Tags: laravel, chart, php, beginners
Published: 2022-07-22 16:01:16

## What is Larapex Chart ?

Larapex chart is a library to add beautiful charts for blade. It’s a laravel wrapper of Apex chart library. Larapex chart allow you to generate chart writting with php.

## How to use it ?

To use it add Larapex chart with composer to your project

```bash
composer require arielmejiadev/larapex-charts
```

Then publish config file with this command 

```bash
php artisan vendor:publish --tag=larapex-charts-config
```

with this, the setup is done ! And you can start to use Larapex Chart ! 🙂

## Chart example

To create chart use this command :

```bash
php artisan make:chart MonthlyUsersChart
```

Then select a chart type :

```bash
- [x] Pie Chart
- [ ] Donut Chart
- [ ] Radial Bar Chart
- [ ] Polar Area Chart
- [ ] Line Chart
- [ ] Area Chart
- [ ] Bar Chart
- [ ] Horizontal Bar Chart
- [ ] HeatMap Chart
- [ ] Radar Chart
```

Now you have a new file with the chart in `app/Charts/MonthlyUsersChart.php`

```php
<?php

namespace App\Charts;

use ArielMejiaDev\LarapexCharts\LarapexChart;

class MonthlyUsersChart
{
    protected $chart;

    public function __construct(LarapexChart $chart)
    {
        $this->chart = $chart;
    } 
   
    public function build()
    {
        return $this->chart->pieChart()
            ->setTitle('Top 3 scorers of the team.')
            ->setSubtitle('Season 2021.')
            ->addData([40, 50, 30])
            ->setLabels(['Player 7', 'Player 10', 'Player 9']);
    }
}
```

now in your controller you inject the chart object :

```php
public function index(MonthlyUsersChart $chart)
{
    return view('users.index', ['chart' => $chart->build()]);
}
```

And to finish add `$chart->container()`, `$chart->cdn()` and `$chart->script()` methods in the view to render a chart

```html
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Chart Sample</title>
    <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
</head>
<body class="h-screen bg-gray-100">

<div class="container px-4 mx-auto">

    <div class="p-6 m-20 bg-white rounded shadow">
        {!! $chart->container() !!}
    </div>

</div>

<script src="{{ $chart->cdn() }}"></script>

{{ $chart->script() }}
</body>
</html>
```

You can retrieve other charts in the documentation : 

[Larapex Charts](https://larapex-charts.netlify.app/)
Basic LandingPage Template
Tags: codepen, landingpage, html, css
Published: 2022-07-22 15:57:00

{% codepen https://codepen.io/eagocela/pen/bGvRWOO %}

This is the first project I did from TheOdinProject website. I will probably refactor my code to make it prettier some time in the future.

I really enjoyed doing this because this is actually the first project that made me fully understand flexbox (kinda.lol)

[GitHub Source Code](https://github.com/eagocela/TOP_repos/tree/main/landing-page)
[Live Demo](https://eagocela.github.io/TOP_repos/landing-page/index.html)
Micro frontend - update
Published: 2022-07-22 15:39:42

Hello, there

Again, I missed on my promise.. Sorry for that. We have exciting things coming, trust me on this. I am deep into implementation and feaguring out how I could take this to you guys. We are making amazing progress on #microfrontends;and could not wait to take it to you. I am promising article dropping this Monday, please watch out. Thank you for the patience
Payment using Web3 wallets
Tags: 0xprocessing, web3, cryptoprocessing, wallet
Published: 2022-07-22 15:25:00


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9n0mp533z7nrvazug85x.jpg)

The Internet of a “new format”, Web3, was discussed several years ago. Its concept is not fully formed now — it is assumed that the people in the network will be much more rights and opportunities, and the interaction between business, people and the World Wide Web will be very different from the current one.

It is impossible to assume today what exactly this concept will look like. However, the field of cryptocurrency is one of the few where Web3 is being implemented in full force. Cryptoprocessing 0Xprocessing offers people today to use wallets of the new format for personal or commercial use. This makes it possible to appreciate the following advantages:

**Security and preservation of personal data.**
Blockchain has no technological equivalent. Here it is impossible to delete data or correct information about the conducted transactions, and a person has an inviolable right to anonymity.

**Storage of funds without the help of third parties.**
Decentralized economy allows getting rid of banks and other commercial structures. The owner of the wallet is solely responsible for its use.

**Reduced risks of hacking and system failures.**
Social networks are full of stories about how a non-functioning bank app left a person without money in an unfamiliar country or foreign city. There are even more posts about hacks due to data breaches. There are far fewer such cases in blockchain — there is no single point of “control” that could be used to “shut down” exchanges and wallets. Decentralized technology also helps protect against cybercriminals — they would have to shut down the entire network to steal funds.

**Unlimited access.**
Transactions are not affected by citizenship, income, or current location. This information may not be disclosed at all — these are the laws of the crypto market.

0Xprocessing is the only cryptoprocessing that has created a system to connect Web3 wallets to pay bills. Moreover, it supports an exclusive recurring payment service. Thanks to it, a user can sign up to debit a predetermined amount under a special smart contract provided by the company.

This is a convenience exclusive to the market. Learn more on the company’s website: https://0xprocessing.com/
Function.memo and Object.pick / omit at Stage 1 This Week
Tags: javascript
Published: 2022-07-22 15:35:43

---
title: Function.memo and Object.pick / omit at Stage 1 This Week
published: true
description: 
tags: javascript
# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
---

2 ECMAScript proposals made it to Stage 1 this week:
- [Function.memo](https://github.com/tc39/proposal-function-memo)
- [Object.pick / Object.omit](https://github.com/tc39/proposal-object-pick-or-omit)

If you're familiar with [Lodash's memoize](https://lodash.com/docs/4.17.15#memoize), it allows you cache a function call's return value so if you call it multiple times, it only has to _actually_ run 1 time. Simplifies simple caching. They've added some more powerful caching options to the spec, but early days.

Object.pick / omit are simple lens functions (e.g. Lodash [get](https://lodash.com/docs/4.17.15#get)/[omit](https://lodash.com/docs/4.17.15#omit)), but having built into a language who mainly deals with Objects is super powerful, especially for Functional Programmers using it with Promises or [pipeline operators](https://github.com/tc39/proposal-pipeline-operator).
Amazon Elastic Compute Cloud (Amazon EC2)
Published: 2022-07-22 15:28:00

Amazon EC2 provides scalable computing capacity in the Amazon Web Services (AWS) Cloud, it eliminates your need to invest in hardware upfront, so you can develop and deploy applications faster, launch as many virtual servers as you need, and configure security, networking, and manage storage.

Here are some of the features of amazon ec2

1. Virtual computing environments, known as instances.

2. Preconfigured templates for your instances, known as Amazon Machine Images (AMIs), that package the bits you need for your server.

3. Various configurations of CPU, memory, storage, and networking

4. capacity for your instances, known as instance types
Secure login information for your instances using key pairs (AWS stores the public key, and you store the private key in a secure place)

5. Storage volumes for temporary #data that's deleted when you stop, hibernate, or terminate your instance, known as instance store volumes

Let create an ec2 instance

login into your aws account (if you don't have aws account, create one on aws.amazon..com)

On the search bar, type ec2 and click on it OR open the Amazon EC2 console at https://lnkd.in/eyujaSnC

From the EC2 console dashboard,

choose Launch instance,

Under Name and tags, for Name, enter a descriptive name for your instance.

Under Application and OS Images (Amazon Machine Image), do the following:
Choose Quick Start, and then choose Amazon Linux. This is the operating system (OS) for your instance.

1. Amazon Machine Image (AMI), select an HVM version of Amazon Linux

2. Notice that these AMIs are marked Free tier eligible. (An Amazon Machine Image (AMI) is a basic configuration that serves as a template for your instance.)

Under Instance type, from the Instance type list, you can select the hardware configuration for your instance.
Choose the t2.micro instance type, which is selected by default. The t2.micro instance type is eligible for the free tier.
In Regions where t2.micro is unavailable, you can use a t3.micro instance under the free tier.

Under Key pair (login), for Key pair name, choose the key pair that you created when getting set up.

Next to Network settings, choose Edit. For Security group name, you'll see that the wizard created and selected a security group for you.

Choose Select existing security group.
From Common security groups, choose your security group from the list of existing security groups.

Keep the default selections for the other configuration settings for your instance.

Review a summary of your instance configuration in the Summary panel, and when you're ready, choose Launch instance.

A confirmation page lets you know that your instance is launching. Choose View all instances to close the confirmation page and return to the console.

On the Instances screen, you can view the status of the launch.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v2lid75xi5tywuezrh4c.png)
Has Lazy loading de tus imágenes simple y rápido
Published: 2022-07-22 15:08:00


Lazy loading ha sido un término que ha estado en nuestros oídos por al menos unos 15 años, durante este tiempo han existido muchas técnicas para implementar la "carga lenta" de contenido en tu sitio web, pero siempre haciendo uso de diferentes trucos con Javascript.



Es decir, para evitar que el navegador cargue todas las imágenes de sitio inmediatamente y hacerlo "bajo demanda" cuando el usuario realmente necesite verlas (como al hacer scroll), necesitas agregar Javascript al mix (por ejemplo usando [IntersectionObserver](https://developer.mozilla.org/es/docs/Web/API/Intersection_Observer_API)).



Pero eso cambió: Ahora simplemente debes agregar el atributo `loading="lazy"` para lograrlo.



## ¿Cómo usar lazy loading en tus imágenes?

La estructura HTML es simple



```html

<img

    src="https://images.unsplash.com/photo-1589432249902-15ab45101111?auto=format&fit=crop&w=1178&q=80"

    loading="lazy"

    onload="alert('Imagen cargada!');"

/>

```

Listo, tus imágenes cargaran de forma "lazy" cuando sea necesario.



El atributo `loading` puede recibir diferentes valores:

* `auto` - El valor por defecto que utilza lo que el navegador decida.
* `lazy` - Carga la imagen caundo se vuelve visible basado en el scroll.
* `eager` - Carga la imagen inmediatamente.



El atributo `onload` es parte de la API, permite ejecutar una función `callback` cuando la imagen es finalmente cargada.



## ¿Cuál es el soporte de navegadores?

Cómo siempre, esto es algo a tener en cuenta ya que no todos los navegadores pueden soportar nuevos atributos, la situación actual es la de la siguiente imágen

![Tabla que muestra el soporte de navegadores para el atributo loading](https://cdn.sanity.io/images/cyypawp1/production/9c7bcf7e46f4283f3347949b79c62ef6bf52f9cb-1475x699.png)

![Footer Social Card.jpg](https://cdn.hashnode.com/res/hashnode/image/upload/v1615457338201/5yOtr5SdF.jpeg)
✉️ [Únete a Micro-bytes](https://microbytes.matiashernandez.dev)         🐦 Sígueme en [Twitter](https://twitter.com/matiasfha)           ❤️ [Apoya mi trabajo](https://buymeacoffee.com/matiasfha)
Let's create a next.js app with bun
Tags: bunjs, nextjs, react, javascript
Published: 2022-07-22 14:48:31

## Thank you for all the support you shown in [react](https://dev.to/ashirbadgudu/create-a-react-app-with-bun-125o) post, let's see how we can create a `next.js` app with bun

---

### Install `bun`

First run the following command to check `bun` is installed or not

```sh
bun -v
```

If you don't have `bun` installed then run the following command to install `bun`

```sh
curl https://bun.sh/install | bash
```

### Create a next app

Now run the following command to create a next app

```sh
bun create next [your-app-name]
```

It will create a new directory with the name of your app. To start the app run the following command

```sh
cd your-app-name
bun dev
```

### Build production bundle for next app

We have to update `next.js` version before we build our next app

```sh
bun a next@latest
```

Here we update to the latest version of `next` for avoiding any kind of build issue

### Adding `scripts` to your package.json

We can add the following scripts to our package.json file

```json
{
  "scripts": {
    "start": "next start",
    "build": "next build"
  }
}
```

And we can run the following command to build the production bundle

```sh
bun run build
```

To run the production build you can fire following command

```sh
bun start
```

### [Get Full Source Code In GitHub](https://github.com/AshirbadGudu/bun-nextjs-app)
Instruction to install pygraphviz package in Pycharm in MacOs
Tags: python, pycharm, macos
Published: 2022-07-22 14:47:00

Since I spend a lot of time to solve this problem, so make a rocord for future reuse.

## Environment
- Mao os 12.4
- Macbook air(M1,2020)
- PyCharm 2022.1.4 (Community Edition)
	- Runtime version: 11.0.15+10-b2043.56 aarch64
- graphviz: stable 5.0.0
- pygraphviz: 1.9

## Problem
- The problem is encounter after install `graphviz`
	- as to install pygraphviz you need
		-  Python (version 3.8, 3.9, or 3.10)
		-   [Graphviz](https://www.graphviz.org/) (version 2.42 or later)
		-   C/C++ Compiler
- if you use normal command `pip install graphviz` to install `graphviz` first
	- then use `pip install pygraphviz`  to install `pygraphviz`
	- you would encounter a fatal error
```shell
fatal error: 'graphviz/cgraph.h' file not found
```
- the file cgraph.h cannot be found
- even you may find the file in graphviz package file

### Why this problem happen
- the installation wizard of pygraphviz cannot find cgraph.h in his default searching path
- So, you need to provide searching path when install pygraphviz

## Solution that work for me
### Step 1. use Homebrew to `graphviz` package first
- Install [Homebrew](https://brew.sh) from its official website
- type following command in Pycharm terminal
```bash
brew install graphviz
```
- it takes a long time to install
	- then you should be able to find graphviz file in the following path :(/opt/homebrew/Cellar/graphviz)

#### Some explanation
- Homebrew is a kind of package manager for MacOS (or Linux)
- and all package installed via Homebrew is stored its Homebrew file which is under an opt file
- the opt file is a directory for installing unbundled packages
- i.e. Homebrew in this case help you to install graphviz and provide an searching path for further installation for pygraphviz

### Step 2.  Provide searching path when install pygraphviz
- type following command in Pycharm terminal
```bash
pip3 install --global-option=build_ext --global-option="-I$(brew --prefix graphviz)/include" --global-option="-L$(brew --prefix graphviz)/lib" pygraphviz
```
- pip3 is just to make sure package is install for python 3
- the `-I` and `-L` flags tell the linker where to look for the required Graphviz libraries at build time and run time
- --prefix will let you specific where the directory to go for

## Credit
- [pygraphviz homepage](https://pygraphviz.github.io/documentation/stable/install.html)
- [pygraphviz github](https://github.com/pygraphviz/pygraphviz/issues/155#issuecomment-760190449)
Executing a webMethods.io Integration workflow through a custom API endpoint
Tags: webmethods, webmethodscloud, webmethodsintegration
Published: 2022-08-08 10:37:26

---
title: Executing a webMethods.io Integration workflow through a custom API endpoint
published: true
date: 2022-07-22 14:44:17 UTC
tags: webMethods, webMethodsCloud, webMethodsIntegration
canonical_url: https://tech.forums.softwareag.com/t/executing-a-webmethods-io-integration-workflow-through-a-custom-api-endpoint/259386
---

## Overview

This [webMethods.io Integration](https://www.softwareag.cloud/site/product/webmethods-io-integration.html#/) workflow example is triggered through an API request from an external service.

Using the data we receive from the external service, we send an API request to our Discourse community platform to delete a user who is no longer active, and this way we keep our database clean.

> **Note** : Currently, there is no [webMethods.io connector](https://docs.webmethods.io/integration/connectors/connector/) for Discourse. For workflows which work together with Discourse, we are using their great [API](https://docs.discourse.org/). This means that the below example will work with any application (not just Discourse) that has an API you can access.

**Check out the Steps and Learn to build an API using the REST API feature and execute the workflow in the [Original post](https://tech.forums.softwareag.com/t/executing-a-webmethods-io-integration-workflow-through-a-custom-api-endpoint/259386) in the Software AG Tech Community.**