teleren/devto huggingface dataset:
Embed social media in Gridsome site with remark plugin
Tags: javascript, node, gridsome
Published: 2020-11-13 02:37:40

---
title: Embed social media in Gridsome site with remark plugin
published: true
date: 2020-11-12 07:08:37 UTC
tags: javascript, nodejs, gridsome
canonical_url: https://phongduong.dev/blog/embed-social-media-in-gridsome-site-with-remark-plugin/
---


When you write your blog, you may want to embed your social media like a tweet, a Facebook post, a Codepen pen, or a Youtube video. They not only make your post more understandable but reduce the needed work especially you write programming tutorials.

But Gridsome's transformer plugin doesn't transform social media links into the embed code. When you paste your link into the Markdown file, it will stay still and be transformed into a paragraph instead of an embed code.

In this tutorial, I will show you how to transform your social media links into the embed code with [gridsome-plugin-remark-embed](https://gridsome.org/plugins/@noxify/gridsome-plugin-remark-embed) plugin. This plugin transforms popular providers embed like Youtube, Facebook, Codepen, Codesanbox, etc...

## Installation

```
yarn add -D @noxify/gridsome-plugin-remark-embed
```

## Set up

In the `plugins` configuration of Remark, you add the embed plugin

```javascript
{
  remark: {
    [
      "@noxify/gridsome-plugin-remark-embed",
      {
        enabledProviders: ["Youtube", "Twitter", "Codepen"],
      },
    ];
  }
}
```

In this configuration, I enable Youtube, Twitter, and Codepen embed providers. I use the provider's default configuration.

## Add the URL

When you add the URL to your Markdown file, make sure it is in a new paragraph. If you place it in the paragraph with text, the plugin can't transform the link.

## Run the site

After setting up and adding the URL, you run your site and check the transformation. Different providers may be transformed in different ways. You can see the provider's configuration and customize it to suit your site.

## References

[Remark embed document](https://webstone.info/documentation/gridsome-plugin-remark-embed)
The Operational Excellence Collection
Tags: aws, sre, tutorial, devops
Published: 2020-11-12 07:05:21



A list of my operational excellence related blog posts.

![](https://cdn-images-1.medium.com/max/1024/0*QbWy2L0A6dAygvW0.jpeg)

### Series on Operational Excellence

It takes three interconnecting elements to operate the technology we build successfully. First, you need to have the **right culture**. Second, you need **great tools**. And third, you need complete **processes.**

[Part 1](https://medium.com/@adhorn/towards-operational-excellence-35ba6298b12f) of the series covers the cultural side of Operational Excellence (OE) and examined Amazon’s culture in the context of its [Leadership Principles](https://www.amazon.jobs/en/principles) (LPs). [Part 2](https://medium.com/@adhorn/towards-operational-excellence-c9fe298e27e7) discusses the role that tools play in achieving OE. [Part 3](https://adhorn.medium.com/towards-operational-excellence-part-3-8b727f06a4b6) covers the final aspect to operational excellence — processes — or what we call mechanisms.

Below is the AWS Summit 2020 recording of my [presentation on this topic](https://speakerdeck.com/adhorn/towards-operational-excellence). For more details, read the blog posts :)

{% youtube uQOwblJjIbE %}

### Part 1 — Customers, Culture, and why you should care.

[Towards Operational Excellence— Part 1](https://medium.com/@adhorn/towards-operational-excellence-35ba6298b12f)

### Part 2 — On the importance of tools

[Towards Operational Excellence — Part 2](https://medium.com/@adhorn/towards-operational-excellence-c9fe298e27e7)

### Part 3 — Mechanisms

[Towards Operational Excellence — Part 3](https://medium.com/@adhorn/towards-operational-excellence-part-3-8b727f06a4b6)

### Incident Postmortem Template

[Incident Postmortem Template](https://adhorn.medium.com/incident-postmortem-template-7b0e0a04f7a8)

### Operational Readiness Review Template

[Operational Readiness Review Template](https://adhorn.medium.com/operational-readiness-review-template-e23a4bfd8d79)
Building a Discord Bot (Basic Setups)
Tags: node, javascript, discord, tutorial
Published: 2020-11-12 06:53:29

Discord bots are a great way to add engagement to the servers. They are also fun to build and share with friends.


I always love to keep the official docs open for quick reference
https://discordjs.guide/
This tutorial from Digital Ocean was very handy while I got started
[Digital Ocean Nodejs Discord Bot - tutorial](https://www.digitalocean.com/community/tutorials/how-to-build-a-discord-bot-with-node-js#step-1-%E2%80%94-setting-up-a-discord-bot)

Before jumping into coding, we first need to set up a discord bot using the [discord's application dashboard](https://discord.com/developers/applications/)

Create an App by clicking the button - New Application

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

Now click on the button - Bot

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

On bot page - click on the button - Add Bot

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

Now we are on the newly added Bot page, here we can see information on our bot, including secrets like Token, which has to be kept a secret. They are never meant to be shared with anyone.

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

Now let's invite the bot to our server, click on the button - OAuth2. On the 0Auth2 page choose scope as bot and bot permissions as Administrator

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

Copy the link and paste it on a new tab in your browser, and select the server in which you want to add your newly born baby bot

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

Then approve the needed permissions for the bot to function on your server of choice and click Authorize

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

Ones Authorized, your bot is all set to bring joy to your Discord Server.

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

For the bot to be functional we need to do some actual coding
In future posts, We will do a walkthrough of building Discord bots

If you got any Discord Bot ideas, comment below
Completed Hacktoberfest 2020
Tags: hacktoberfest
Published: 2020-11-12 06:39:51


Hi i am swapna sahani.I am new here.

I heard about it from one of my friends who is already a part of your DEV community. I found it interesting, so I joined the community and so also participated in Hacktoberfest 2020.

It was a great experience for me. I have been through lots of projects and learned various new things and the basics of Github.
Day 9 of 100 - React Check Entry UI
Tags: react, javascript, html, 100daysofcode
Published: 2020-11-12 06:38:22

Day 9, created on day 12. I've got a couple of projects of catching up to do. That said, this was a fun one. My boss actually recommended this and I'll probably have to do something like this in pure Javascript later this week. 

The idea is that online banking is still pretty far behind the rest of the tech world's UIs. So here we allow the user to type information into a form and see the check generated in real time to better confirm the data before submission.

##The Build
This application has four components: `App`, `Header`, `Form` and `CheckContainer`. Once again the data for this project lives in the main App component's state as does the dataHandler function that stores the input text. That means we need to pass the handler to the Form component through props.

Keeping data in App state ends up working flawlessly here because it allows us to then pass that same data to the CheckComponent to render in the check UI.

##Takeaways
This type of project is a sad reminder that so much of a project's time can be spent perfecting CSS, even for something as plain and unwelcoming as this little application.

That said, React's native JSX made this possible with far fewer lines of code than you would have to use to implement this in vanilla Javascript.

That's it for day 9. Check out the links below:

* [Github repo](https://github.com/jwhubert91/100daysofreact/tree/master/day-9-generate-bank-check)
* [Deployed app](https://100-react-projects-day-9-check-generator.netlify.app/)

Follow me on Twitter! [@jwhubert91](https://twitter.com/jwhubert91)
Xtra-Power :Xp.css automatically takes care of potrait or landscape view... Feel relax.
Tags: beginners, css, showdev, opensource
Published: 2020-11-12 06:37:03

Stop scratching your head for potrait or landscape responsive view. 
xp.css is single css library that turns any app to go responsive form small devices to smart tv. 

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

This means you don't need to learn or use tools for mobile / TV UI development. Your simple html css website automatically fits in all devices. From text size to elements size like button, images, tabs, divs etc start growing and shrinking as per device size.

Draw your UI only and forget all pain of making every elements going responsive.

##Join us
contact us here or on GitHub. We add you as contributor.


## How to use xp.css:
Just download and link it or 
link it by github link: https://raw.githubusercontent.com/Manishfoodtechs/xp/main/xp.css

Here is demo on codepen:
Check with potrait as well as landscape. See how elements changes size. Rotate your mobile phone.
{% codepen https://codepen.io/manishfoodtechs/pen/JjKexar %}

### Version xp.css: 1.0 ( Nov 2020)

##JOIN US:
Join development of xp.css. Pull Request Welcome :)
Urgently needed :) (Mail me on manishfoodtechs@gmail.com)

#Licence
MIT . You are free to use xp.css in personal and commercial projects
{% github Manishfoodtechs/xp %}
DomeCode Blogs are here!
Tags: contributorswanted, django, python, discuss
Published: 2020-11-12 06:32:05

Well, after a long wait, DomeCode Blogs have finally arrived!

A new platform for blogging that's already integrated into a coding platform means TRAFFIC! If you're a budding technical writer, now is the perfect time to get on that train of thoughts that lead you to write the ideal blog post before traffic hits peak on DomeCode blogs.

DomeCode Blogs is more like a better version of Forem, the technology that powers Dev.to except-of-course it is tailored specifically for DomeCode. It will be open-source soon enough and will be re-packaged as a usable Python package ( Django ). People could integrate it to have a blog, a powerful one indeed on their website that allows new bloggers to chip in, hashtags, a high-quality search that costs less, etc.

There are still a lot of things to roll-out down the road for DomeCode, and each component ranging from Blog to Fusion ( https://domecode.com/fusion ) makes up DomeCode a unified platform for developers to access tools and resources efficiently. The fun part, we've made our significant codebase open-source.

More importantly, if you want to start early, apply to become a blogger at DomeCode using https://blog.domecode.com/apply, and I'll personally let you know about the outcome of your application.

If you are excited to work on DomeCode, you can drop a mail at `iwantin@domecode.com` or fill this [form](https://forms.gle/z1LmrwGWbKifdhHg9). 

Github - https://github.com/the-domecode/domecode-opensource
Discord - https://discord.domecode.com
Reddit - https://reddit.com/r/DomeCode

Apply ( Blogger ) - https://blog.domecode.com/apply/

Whatya waiting for? Join the community already!
Study Hack (That Works for Me) 2020
Tags: productivity, learning, hack, tips
Published: 2020-11-12 06:29:44

##**Watch/Listen to tutorials at 2x speed!**

Watching videos, listening to podcasts, and audiobooks at accelerated speeds may not work for everyone. 

However, if you're like me and tend to replay videos because you lose your focus, this may just do the trick. 

Accelerating playback speed helps with retaining the information you're consuming, staying focused, and keeping you engaged. If the speaker naturally speaks fast, slow it down to a speed that works for you.
My First Hacktoberfest
Tags: hacktoberfest
Published: 2020-11-12 06:16:13


### INTRODUCTION
I am Oshi Gupta currently pursuing B-Tech in CS-IT from Symbiosis University Of Applied Sciences and this was my first hacktoberfest 
and I successfully made 6 PRs in this open source festival.

### BACKGROUND
This was my first open source program and I am love doing coding.I know C,C++,java,python,javascript.

### REFLECTIONS
This was my first hacktoberfest and i am looking to make more contributions in next year.
Error handling in react redux with useSelector hook
Published: 2020-11-12 06:11:53

I am using useSelector hook in my UI. But I can not handle the error that is coming form the API. I can see the reducer is getting updated with the error in my redux state. When I am going to show this error in UI, its not showing. The submit button is in the Modal popup.
Like below:

UI ----

const dispatch = useDispatch();

const {error} = useSelector((state) => {
   error: state.error
})

const handleModalSubmit = () => {
    dispatch(myReducerFunction())
    // here I wan to catch the error like which is not working.
    if(error) {
       // this error is showing as null or the previous redux state not the updated one which is coming from the reducer
    }
}
Today I learned :focus-within
Tags: css, frontend, web, todayilearned
Published: 2020-11-12 06:12:42

---
title: Today I learned :focus-within
published: true
date: 2020-11-12 06:06:41 UTC
tags: css,frontend,web,til
canonical_url: https://rajeshdhiman.in/today-i-learned-focus-within/?utm_source=rss&utm_medium=rss&utm_campaign=today-i-learned-focus-within
---


Today I learned that there exists a [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [pseudo-class](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes) called **:focus-within** which we can use to match an element if the element itself or any of its descendants are matched by `:focus`.

It is very helpful in cases when you want to highlight a container which also have few child elements and you want to keep it highlighted even if any of child elements is currently in focus.

for more details and syntax, please check [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-within).


The post [Today I learned :focus-within](https://rajeshdhiman.in/today-i-learned-focus-within/) appeared first on [Rajesh Dhiman](https://rajeshdhiman.in).
varchar(n) - how big should n be?
Tags: help, sql, database
Published: 2020-11-12 05:47:51

I am mostly worried about whether I made it too small, and whether I can resize it.

For some reasons, the ORM requires specifying size, even if the underlying JDBC driver doesn't need to be strict about size (**H2**), or doesn't read size at all (SQLite). I am also planning to use **PostgreSQL** as well.

[According to StackOverflow](https://stackoverflow.com/questions/8295131/best-practices-for-sql-varchar-column-length), maybe even `VARCHAR(2)` poses no restriction in size?

Also, there seems to be no meaning in using `2^n - 1`?
Student Result Publish in Django
Tags: django, python, github, webdev
Published: 2020-11-12 05:39:08

 -  A couple of days ago I developed student result published web application in django.

 - [github link](https://github.com/yogeshnile/SRMS)
You will like this projects!

 - In this project I have used below library.
    - Django==3.1.1
    - django-import-export==2.4.0
    - django-admin-interface==0.14.0

 - In this project you can import student result via file like csv, json, xml and many more 

 - Go and checkout my project [github link](https://github.com/yogeshnile/SRMS)

## ScreenShot :camera_flash:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/x5vjgcj11k8qn95z9y4l.png)
![Alt Text](https://raw.githubusercontent.com/yogeshnile/SRMS/master/Images/2.png)

![Alt Text](https://raw.githubusercontent.com/yogeshnile/SRMS/master/Images/3.png)
![Alt Text](https://raw.githubusercontent.com/yogeshnile/SRMS/master/Images/4.png)
![Alt Text](https://raw.githubusercontent.com/yogeshnile/SRMS/master/Images/5.png)
My Experience on Linux
Tags: linux, discuss, productivity, experience
Published: 2020-11-12 05:30:21

I used windows for the most part of life. I didn't have any single complaint back then when I was using it. But later on I got bored using windows.
I don't know the exact facts, but I think it's mainly due to lack of customization. I decided to give Linux a try. I did some research and fully installed POP OS, which is a distro based on Ubuntu. I had hard time configuring it to my likings. It wasn't easy, coming from Windows and using POP OS as my daily drive.
Since there aren't any limitations, One can adjust almost everything to his preferences. Once get used to it, it was my SAFE ZONE.
Tips to save time writing console.log() in JavaScript 
Tags: javascript
Published: 2020-11-12 05:19:11

console.log() is of great help for debugging Javascript code .
But writing them is time consuming. You can save time by following these two tricks:

1. Enclose variables in curly braces :

     console.log({input}) instead of console.log(“input”,input)
2. Create a global variable and assign console.log() function to it . Use that variable instead of console.log 

Demo for the above two :

https://fullstackdeveloper.guru/2020/11/12/how-to-save-time-typing-console-log-statements-in-javascript/
FREE APIs to use in your projects
Published: 2020-11-12 05:18:16

Some of the free APIs which any developer can use in his /her project: 
__Communication APIs__
➔ Twillio
➔ Yo
➔ SendGrid
➔ Moxtra


__ML APIs__
➔ Tensorflow
➔ IBM Watson
➔ MonkeyLearn
➔ APIai


__Social APIs__
➔ Facebook
➔ Twitter
➔ Reddit
➔ Instagram
➔ Google+

__Geo APIs__
➔ NASA 
➔ Yelp
➔ Google Maps
➔ Google Places
➔ Google Earth
➔ Mapbox

__Music APIs__
➔ Spotify
➔ Echo Nest
➔ Sound Cloud
➔ Google play
iTunes


__Payment APIs__
➔ Paypal
➔ Google Pay
➔ PayU

[Some random API list]
(https://github.com/tanaypratap/teamtanay.jobchallenge.dev/issues/232)


Follow me on Instagram
https://www.instagram.com/p/CFqrvobFlsL/?igshid=j3lhn2qi3og0

Follow on Twitter
https://mobile.twitter.com/_SinghVikas_
React custom table 
Published: 2020-11-12 04:57:20

renderTableHeader() {
      let header = Object.keys(this.state.students[0])
      return header.map((key, index) => {
         return <th key={index}>{key.toUpperCase()}</th>
      })
   }

   render() {
      return (
         <div>
            <h1 id='title'>React Dynamic Table</h1>
            <table id='students'>
               <tbody>
                  <tr>{this.renderTableHeader()}</tr>
                  {this.renderTableData()}
               </tbody>
            </table>
         </div>
      )
   }



I have implemented this table but now , How I will do Pagination and select row data,bind to input text  for editing please help me
What is Cryptography?
Tags: cryptography, education, tutorial, beginners
Published: 2020-11-12 04:55:54

<a href="https://usemynotes.com/what-is-cryptography/">What is cryptography</a>
The word cryptography is derived from the Greek word Krypto meaning "Hidden / Secrets". Cryptography in simple words means "The Art of Protecting Data / Information".

Through this, we can convert our data into Unreadable Secret Codes, which we call Cipher Text. And the data can be read by the same user who has the secret key. That is, decrypt the data by a secret key, the decrypted data is called plain text. There are two processes Encryption and Decryption. It is used to protect data like- Credit / Debit Card Details and other important information. In encryption, data is converted from plain text to ciphertext and decryption encryption causes the reverse process. In this, Cipher Text is converted to plain text.

<h2>Types of Cryptography?</h2>

Cryptography is generally divided into two parts.
1. Symmetric Cryptography
2. Asymmetric Cryptography

<h3>Symmetric Cryptography</h3>
In this, the user has Keys Same in both Encryption and Decryption, meaning that data or information can be Encrypt and Decrypt using the same key.

<h3>Asymmetric Cryptography</h3>
In this, Keys are different in both Encryption and Decryption, meaning that the user uses the public key to encrypt the data and the user uses the private key to decrypt.
SaaS vs IaaS vs PaaS: Choose the Right Framework for Your Business
Tags: cloudcomputing, cloudservicemodels
Published: 2020-11-12 04:50:10

With its concentration on empowering disruptive business technologies and frameworks across many industries , especially telecommunications, healthcare and government, cloud computing became the next quintessential engine of business innovation. Cloud delivery models can unlock access and create future opportunities in certain service providers in new consumer segments, such as smaller firms and emerging economies.

In a better world that offers reliable support for starting or growing a business without massive investments, cloud technologies enable companies to perform their essential functions. There is ample potential for business process optimization and adjustment to changing market conditions through the introduction of various cloud service models. Therefore, organizations can develop a scalable growth plan with the utmost use of capital, limited maintenance efforts, and successful execution of business activities.

Read more on cloud service models: https://thinkpalm.com/blogs/the-three-cloud-service-models-paas-saas-iaas-heres-how-you-can-choose-the-right-one-for-your-business/
What is SEO and how has it evolved over the years?
Tags: seo
Published: 2020-11-12 04:44:27

Many business owners will hear the phrase "search engine optimization" (or SEO) here from friends in the business community or even the competition and may see it as a route to increasing sales, but what is SEO? Alternatively, a business owner may have tried [SEO services](https://www.propelguru.com/search-engine-optimization/) in the past and found that they did not work as well as they hoped or did, but were no longer as effective - this article explains what SEO is and why what a `` new '' SEO works better than ever.

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

I worked on search engine optimization and website market ranking, even before it was called SEO. Here are the changes in SEO since the start of the new millennium and what to look for in the SEO services offered or provided by your SEO agency.

We look back at SEO over the years and explain what SEO is today and how to best use it for our website.

**SEO in 2000**

At the turn of the millennium, the "big" search engines most people used were Lycos and Excite. Of course, at that time, a very small percentage of the British population had access to the Internet and those who did had a slow "dial-up" system.

The websites were one or two pages with basic information to load quickly (in 20 seconds). [SEO practices](https://www.propelguru.com/) at the time were to `` hide '' as many keywords as possible on a page so that the website would be found for those searches without the page appearing spammy to them visitors.
best js/ts and python projects for fun?
Tags: python, javascript, typescript
Published: 2020-11-12 03:57:31

hey im looking for some fun projects for js/ts and python, something thats not a website/webapp (im neck deep in those) and ideally uses both (but im happy to hear ideas that include just one of them) - i just need something to make for fun :) ps im new and not even sure if this is for asking questions but whatever.