teleren/devto huggingface dataset:
A Flexible Umbraco Embed Provider for url to iframe stuff
Tags: umbraco
Published: 2021-11-18 13:05:05

A feature that I introduced in Umbraco way back in [2012](http://www.nibble.be/?p=196) (damn I'm getting old) is an easy way to embed third party media by simply providing the url. Behind the scenes that takes advantage of the [oembed format](https://oembed.com/) but of course not all sites that offer embeddable content have an api endpoint ... sometimes it's also just going from url to an iframe without extra stuff... but you still want to give editors the easy "url only" way of embedding.

So for a recent project I extended the default Umbraco behaviour with a fresh [Embed Provider](https://our.umbraco.com/Documentation/Extending/Embedded-Media-Provider/index-v8)

```
    public class UrlToIframeEmbedProvider: EmbedProviderBase
    {
        // no ApiEndpoint!
        public override string ApiEndpoint => String.Empty;
        public override string[] UrlSchemeRegex
        {
            get
            {
                var urls = new List<string>();
                var doc = new XmlDocument();
                doc.Load(System.Web.Hosting.HostingEnvironment.MapPath("~/config/UrlToIframeEmbedProvider.xml"));

                if (doc != null)
                {
                    foreach(XmlNode node in doc.SelectNodes("//embed"))
                    {
                        urls.Add(node.Attributes["regex"].Value);
                    }
                }

                return urls.ToArray();
            }

        }

        public override Dictionary<string, string> RequestParams => new Dictionary<string, string>();

        public override string GetMarkup(string url, int maxWidth, int maxHeight)
        {
            var markup = string.Empty;
            var doc = new XmlDocument();
            doc.Load(System.Web.Hosting.HostingEnvironment.MapPath("~/config/UrlToIframeEmbedProvider.xml"));

            if (doc != null)
            {
                foreach (XmlNode node in doc.SelectNodes("//embed"))
                {
                    var m = Regex.Match(url, node.Attributes["regex"].Value, RegexOptions.IgnoreCase);
                    if (m.Success)
                    {
                        markup = node.InnerText;
                        break;
                    }
                }
            }

            if (!string.IsNullOrEmpty(markup))
            {
                return string.Format(markup, url, maxWidth,maxHeight);
            }else
            {
                return markup;
            }
        }
    }
```

You can now simply populate the config file with different url regexes and the embed codes using the string.format placeholders 

{0}: the url
{1}: the width
{2}: the height

```
<?xml version="1.0" encoding="utf-8" ?>
<customEmbeds>
  <embed regex="site\.com/*">
    <![CDATA[<iframe width="{1}" height="{2}" style="width: {1}px; height: {2}px; border: none; overflow: hidden;"
        src="{0}" webkitAllowFullScreen="true" mozallowfullscreen="true" allowFullScreen="true"
        frameborder="0" scrolling="no" allowtransparency="true" ></iframe>  ]]>
  </embed>
</customEmbeds>
```
Extend SvgIcon sizes in React Material UI
Tags: typescript, react, materalui, webdev
Published: 2021-11-18 13:05:03

Using React Material UI you have the opportunity to use any SVG file like an icon. To do so, you just wrap it into the [`SvgIcon`](https://mui.com/components/icons/#svgicon) component.

An example for your `HomeIcon` component might look like this:

```typescript
import React from 'react';
import { SvgIcon, SvgIconProps } from '@mui/material';
import { ReactComponent as HomeSvg } from '../../assets/Icons/Home.svg';

function HomeIcon(props: SvgIconProps) {
  return (
    <SvgIcon component={HomeSvg} viewBox="0 0 24 24" {...props} />
  );
}

export default HomeIcon;
```

<sub>Importing svg files as react components required svgr, otherwise you would need to use the SVG code as children of SvgIcon</sub>

With `SvgIcon` you have the possibility to set the `fontSize` attribute to "small", "inherit", "large" or "medium", but what if we if we would need more of this?

```typescript
<HomeIcon fontSize="small" />
<HomeIcon />
<HomeIcon fontSize="large" />
<HomeIcon sx={{ fontSize: 40 }} />
```

Here is where [component variants](https://mui.com/customization/theme-components/#adding-new-component-variants) come into play.

In our theme we just add a new variant to the MuiSvgIcon component. E.g. we we want an new size called _huge_ we do it like this:

```typescript
components: {
   MuiSvgIcon: {
      variants: [
        {
          props: { fontSize: 'huge' },
          style: {
            fontSize: '5rem',
          },
        },
      ],
    },
}
```

That should already work, but when we are using typescript and setting it, the compiler will complain. 

```typescript
<HomeIcon fontSize="huge" />
```

So we need to extend the interface for the component too:

```typescript
declare module '@mui/material/SvgIcon' {
  interface SvgIconPropsSizeOverrides {
    huge: true;
  }
}
```

Just add the above module declaration e.g. to your `theme.ts`  and that's it.
TYPO3 + WordPress: Case Study of TYPO3 Slider Revolution
Published: 2021-11-18 13:04:17

The most Revolutionary TYPO3 Slider Revolution 3.0 was recently launched at T3Terminal and it’s special! Why?! There’s quite an interesting story behind it! What are these changes and how do they help with the evolution of TYPO3 website development? Stay tuned to read out the fascinating case study!

Every software evolves, which involves using new improvements to make it better. TYPO3 Slider Revolution 3.0 is a major version, and it’s the second time when the UX/UI of the slider changes.

-> Table Of Content 

T3Terminal’s Partnership With Slider Revolution Core (ThemePunch)
What Is TYPO3 Slider Revolution?
WordPress Meets TYPO3 - The Most Intuitive Part!
Why is our TYPO3 Revolution slider so popular?
Our Revolutionary Journey With TYPO3 Slider Revolution
We’re Progressing!

Know everything about the TYPO3 Slider Revolution Extension here, https://t3terminal.com/blog/typo3-slider-revolution/
11 ways to add CSS/JS frontend assets into TYPO3
Published: 2021-11-18 13:02:47

Are you looking for ways to add your frontend assets CSS/JS into TYPO3? As a TYPO3 integrator, developer or administrator, you may be required to add custom or third-party CSS or JavaScripts into TYPO3 Instance. In this blog, you will learn all 11-ways to include internal or external assets into TYPO3.

TYPO3 is one of the flexible and extendible Opensource CMS in the world. For your so simple needs of inserting CSS/JS files or code - You have 11-ways to integrate such frontend assets into TYPO3. The TYPO3 core is robust, which provides many ways to perform such tasks based on your needs. Because, as a TYPO3 integrator or developer, you may face a different situation to insert frontend assets - TYPO3 is extendible enough! Let’s see how.

-> How to add CSS/JS assets into TYPO3? 
TYPO3 Fluid ViewHelper (>= v10.3)
TYPO3 Fluid Assets (>= v8.6)
HeaderData TypoScript (>= v4)
FooterData TypoScript (>= v4)
includeJS TypoScript (>= v4)
jsInline TypoScript (>= v4)
includeCSS TypoScript (>= v4)
cssInline TypoScript (>= v4)
Extbase additionalFooterData (>= v6)
Extbase additionalHeaderData (>= v6)
Extbase AssetCollector (>= v10.3)
Rendering Order of Assets in TYPO3
Wrapping-up!

Check out the whole blog here to know more, https://t3terminal.com/blog/add-css-js-typo3/
What is QA Audit?
Tags: testing, okqa, qa
Published: 2021-11-18 12:51:10

QA audit is a great opportunity to supercharge your product. You get comprehensive testing along with unbiased feedback from an independent team of QA engineers on the product quality.

QA audit includes:
- Deep QA analysis
- Identification of software vulnerabilities
- Recommendations and guidance for product quality improvement.

Interested? Let's discuss and start a new project together.
https://ok-qa.com/
Top signs that you need a QA audit
Tags: testing, qa, okqa
Published: 2021-11-18 12:50:17

=> If you have hold-ups in time-to-market due to hot last-minute bug fixes.
=> If you do not have a clear understanding of the product quality or its bottlenecks.
=> If you want to get independent and unbiased feedback on the developed product quality and its compliance with stated business requirements.
=> If the current QA processes do not allow to scale or keep up with the workload increase.

One of the following situations sounds familiar? Let's see how a comprehensive QA audit can help.

https://ok-qa.com/
Why is it important to run an independent QA?
Tags: testing, qa, okqa
Published: 2021-11-18 12:48:51

- It enhances the quality of the final product with unbiased feedback aimed to meet customers' requirements, needs, and expectations.
- It provides a clear and objective report on critical vulnerabilities, the quality of the developed software, its compliance with expected performance metrics, and business goals.
- It gives you access to the necessary skills and expertise, on-demand QA resources well-versed with the latest tech trends.
- It helps to detect flaws and glitches the team that created the product might have missed.

Get independent and unbiased feedback on your product quality. A comprehensive QA audit is just a message away. https://ok-qa.com/
Build a blog for beginners with React in 3 minutes
Tags: javascript, react, beginners, tutorial
Published: 2021-11-18 12:28:15


 [Strapi](https://www.youtube.com/watch?v=dQw4w9WgXcQ) will be used in this project. It saves our data in a JSON file and return data with JSON throught API. Strapi is a popular open-source used by a lot of developers in 2021. You don't know how to use? Don't anxious, just follow me.
Link : [https://strapi.io/](https://strapi.io/)

# 1. Set up [Strapi](https://www.youtube.com/watch?v=dQw4w9WgXcQ) 

Open termial and paste it:

> npx create-strapi-starter@latest my-strapi-gatsby gatsby-blog

But but, remember to enter "**Quickstart (recommended)**" after that 😲

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cjt1y1gdnije9ha4d3n4.png)

To download, it takes about 1 minute to download. So, you can watch some pornhubs 😂.

# 2. Look through the blog
 
There are two tabs will be opened by the broswer after downloaded. The first tab for back-end where create some posts and the second tab for front-end where display your posts.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ka0oep8r142u39kf4sqm.png)

And Strapi creates some files that consists of two folders like back-end and front-end on Visual Studio Code: 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yl06ydlp2wlsrgqcgka2.png)

# 3. Admin's Database on Strapi
After register, we go to **Articles** and click on **Add new Articles** to write our post. Remarkable of the post is Category and Author's name on the right of the page.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gdclplgz0o926ovpfctw.png)
You can add some photos and the slug will be created by Strapi at the bottom of page.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u3adrzh0s95jtgaspcfk.png)
Go to **http://localhost:8000/articles** and check on API
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ffgkyvs0cz8wwehhmyjj.png)
 
Click on Publish.

# 4. Read our post
Remember to type **npm start** on front-end folder, you will see your posts there.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nn11bd9xb9bfmieel3bz.png)

# 5. Deploy
You can deploy our project on any service. I recommend to deploy on [Heroku](https://www.youtube.com/watch?v=dQw4w9WgXcQ)

Thanks for reading this post! Follow me to know more about React's tutorial
How do I manage SSH keys stored in the ssh-agent (Portable OpenSSH)?
Tags: git, github, help, openssh
Published: 2021-11-18 12:13:42

• Windows 10 v20H2  • Git v2.33.0.windows.2  • [Portable OpenSSH](https://github.com/PowerShell/openssh-portable)

I'm at my wit's end trying to figure out how to manage SSH keys stored by the ssh-agent. I expect to be able to list the keys and delete all or individual keys as needed. The [Microsoft Docs](https://docs.microsoft.com/en-us/windows-server/administration/openssh/openssh_overview) doesn't give any indication of how to do this, but at least point you to the [OpenSSH Manual](https://www.openssh.com/manual.html). 

However, the **commands do not work**!
I have searched for solutions on the internet, but I couldn't find any. I'll explain the issue in more detail with the following steps:

I Verified that the path for the ssh-agent used by Git is properly configured and associated with Portable OpenSSH in Windows.
```powershell
PS Get-Command ssh | Select-Object Source
```

```powershell
> Source
> ------
> C:\Windows\System32\OpenSSH\ssh.exe
```

1\. Test the SSH connection to confirm that SSH authentication is working.
```powershell
PS ssh -T git@github.com
```

```powershell
> Enter passphrase for key 'C:\Users\Blikoor/.ssh/id_ed25519':
> Hi blikoor! You've successfully authenticated, but GitHub does not provide shell access.
```

2\. To lists the public keys of all identities currently managed by the ssh-agent. I expected a list containing the Ed25519 key(s) stored by the agent.
```powershell
PS ssh-add -L
```

```powershell
> The agent has no identities.
```

3\. To delete a specific or list of identities from the ssh-agent. I expected the agent to remove the private key corresponding to the specified public key.  
```powershell
PS ssh-add -d $env:USERPROFILE\.ssh\id_ed25519.pub
```

```powershell
> Could not remove identity "C:\Users\Blikoor\.ssh\id_ed25519.pub": agent refused operation
```

4\. To delete all identities from the ssh-agent. I expected the agent to remove all the private keys, but even though it seems successful, the SSH authentication test in the next step disproof this assumption. 
```powershell
PS ssh-add -D
```

```powershell
> All identities removed.
```

5\. Test the SSH connection again after deleting all keys. I expected that the test will fail, yet the second test is successful as well.
```powershell
PS ssh -T git@github.com
```

```powershell
> Enter passphrase for key 'C:\Users\Blikoor/.ssh/id_ed25519':
> Hi blikoor! You've successfully authenticated, but GitHub does not provide shell access.
```
LFX mentorship @ Vitess
Tags: linux, cloudnative, database
Published: 2021-11-18 12:10:43

This summer I was fortunate enough to be selected as [linux foundation mentee](mentorship.lfx.linuxfoundation.org/) for [**Vitess**](https://vitess.io/) which is a [CNCF](https://www.cncf.io/) graduated project. 
According to [vitess.io](https://vitess.io/)
> _**Vitess** is a database clustering system for horizontal scaling of MySQL through generalized sharding._

Sharding is the concept of breaking up data into smaller chunks distributed across separate database nodes.

My aim for the summer was to develop an exhaustive test suite for Vitess's compatibility with Django's model layer.

During this period, I was mentored by a team of engineers from [Planetscale](https://planetscale.com/) who are currently maintaining Vitess. I was part of daily stand-up meetings and was in constant touch with my mentors, who guided me through the whole project. Also I got a chance to be part of community-day for Vitess in which contributors and maintainers from all around the world interacted. 

Sadly, due to an unfortunate event I was unable to work for weeks. But my mentors and the admins at CNCF were kind enough to understand my situation and granted me an extension for the program. And with the help of my mentors i was able to complete the project within the extended deadline.

I learnt a lot during this mentorship program and will continue to contribute more to the project in future.
Quick search on multiple columns in a PowerApp view
Tags: powerplatform, dynamics365, powerapps
Published: 2021-11-18 12:04:11

# Scenario
I have an entity called Flower and I'm displaying a view for it in a Model driven app. By default, the quick search on the top right side only side on the Name column 

![Original](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/69w8gej0rkl55d3kk74p.png)
<figure>
  <figcaption>As can be seen, the search will not incorporate results matching secondfield column</figcaption>
</figure>


# Solution

Under the modern view (you can use classic but I found it didn't completely work properly (name wasn't being displayed as an option)), go to the entity -> view and find the Quick Find View

![Quick Find View](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wo8ewr01cjvvdp6oi8gb.png)
 
Under Find By, add the columns you want to be searchable
 
![Find By](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sjqp4g25p955irh6xedb.png)
 

Save and publish

# Result

![Result](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eeyx7bu9ksui3mm6ppqj.png)
 <figure>
  <figcaption>The secondfield column is now also searchable</figcaption>
</figure>
Start building your own integrations with Lokalise Apps 🚀 
Published: 2021-11-18 11:49:12

---
title: Start building your own integrations with Lokalise Apps 🚀 
published: true
description: 
tags: 
//cover_image: https://direct_url_to_image.jpg
---
📢 We’re excited to announce that Lokalise Apps is officially live!

Our vision is to enable developers to build their own integrations with Lokalise and share them with our thousands of users, enhancing the visibility of creators and attracting opportunities to expand their businesses. 💫

A key part of that is ensuring adoption among Lokalise users as we will promote apps built by our partners. 🤝

Interested in building your first app with Lokalise and boosting your workflows? Sign up here: https://bit.ly/3HvRkvb
Simple Remove or Change HTTP Server header in NGINX Plus.
Tags: nginx, linux, security, nginxplus
Published: 2021-11-18 11:40:34

`First written`, I must have remove or change strings value **HTTP Server header** in NGINX. Excellet, The **NGINX Plus** have Core functional (Build-in) **without third-party dynamic module** for solution this case, detial as like below.

**Official Document:** https://nginx.org/en/docs/http/ngx_http_core_module.html#server_tokens

![nginx server_tokens](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nlosvpaj58asdmk2qzo3.png)

**Example Configuration for nginx.conf**
```
http { 
....
#server_tokens off; 
#server_tokens "Microsoft-IIS/8.5"; 
#server_tokens none; 
server_tokens ""; 
...
 } 
```
Noted: Uncomment `server_tokens` lines for each testing case.

**Capture Screen of Testing**
![testing server_tokens](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/30ntkxsk3hcw9evkvy5n.png)
 
Thanks for reading my written, Good luck.
Companies looking for people to hire!
Tags: web3, web3community, blockchain, opensource
Published: 2021-11-18 11:36:30


#### Hey folks 👋 

We launched a new global open source community called [Web3 Community](https://github.com/web3community) in September. And now Web3 Community is a group of **250+** open source and blockchain enthusiasts, learning and growing together.

Some companies are looking for people to hire in our community. You can also grab these opportunities. Join us on our [Discord server](https://discord.gg/TSRwqx4K2v). There will be many more such opportunities in the future.

Web3 Community focuses on Web3, Blockchain, and somewhat related to decentralized applications (Dapp). 

We have gathered content about Blockchain Developer paths and shared it with our [repository](https://github.com/web3community/blockchain-dev-path) to get you started.

Join our growing community and contribute to our open source projects

- [GitHub Organization](https://github.com/web3community/start-here/issues/new?assignees=&labels=github-invitation&template=invitation.yml&title=Please+invite+me+to+the+community)
- [Discord Server](https://discord.gg/TSRwqx4K2v)

![Image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ywsfjvs53xwlkp14a5pw.png)
Day 41 of 100 Days of Code & Scrum: Next.js Contact Form HTML, useState, and Validation
Tags: 100daysofcode, beginners, javascript, programming
Published: 2021-11-18 11:36:14

Good day, everyone!

I'm feeling a lot better today than yesterday, so I managed to get more things done this time. I spent most of my time working on the contact form for my company website. Most of the functional frontend aspects of it are nearly complete, I just need to have it communicate with the AWS serverless backend. After that comes styling the contact form.

Anyway, let's move on to my daily report!

## Yesterday

I didn't have much time to work yesterday from feeling sick. I finished the styling of the portfolio section's skeleton layout.

## Today

Here are the things I learned and worked on today:

### Next.js

- finished most of the HTML of the contact form.
- added state management of each input field using React `useState` hooks.
- put form validation methods and state changes for the required fields on change, blur, and submit events.
- display error messages as needed.

### Scrum

- I did some practice flashcards for Scrum.
- reviewed some of the things I've learned before.

Thank you for reading, and I wish everyone the best!

![Thank You Banner](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x9ayfxxxaz2g2hfcqbsk.png)

### Resources/Recommended Readings

- [Official Next.js tutorial](https://nextjs.org/learn/basics/create-nextjs-app?utm_source=next-site&utm_medium=nav-cta&utm_campaign=next-website)
- [Scrum Master learning pathway | Scrum.org](https://www.scrum.org/pathway/scrum-master)
- [The 2020 Scrum Guide](https://scrumguides.org/scrum-guide.html)
- [Mikhail Lapshin's Scrum Quizzes](https://mlapshin.com/index.php/scrum-quizzes/)

### DISCLAIMER

**This is not a guide**, it is just me sharing my experiences and learnings. This post only expresses my thoughts and opinions (based on my limited knowledge) and is in no way a substitute for actual references. If I ever make a mistake or if you disagree, I would appreciate corrections in the comments!

<hr />

### Other Media

Feel free to reach out to me in other media!

<span><a target="_blank" href="https://www.rammina.com/"><img src="https://res.cloudinary.com/rammina/image/upload/v1638444046/rammina-button-128_x9ginu.png" alt="Rammina Logo" width="128" height="50"/></a></span>

<span><a target="_blank" href="https://twitter.com/RamminaR"><img src="https://res.cloudinary.com/rammina/image/upload/v1636792959/twitter-logo_laoyfu_pdbagm.png" alt="Twitter logo" width="128" height="50"/></a></span>

<span><a target="_blank" href="https://github.com/Rammina"><img src="https://res.cloudinary.com/rammina/image/upload/v1636795051/GitHub-Emblem2_epcp8r.png" alt="Github logo" width="128" height="50"/></a></span>
Console logs with style 😎
Tags: javascript, css, console
Published: 2021-11-18 11:33:00

Hi! How are you?
If you want to do your console log with some styles, you only have to follow this sintax

> console.log('**%c**Hello styled world!'**,'background-color:blue; color: white'**)

Then you will have a console log like this:

![console log with styles](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w1xb3gza3hx1u29l5z37.png)

Have a great day, bye!