teleren/devto huggingface dataset:
Update Content for a Custom Block Toolbar Button (Full Site Editing)
Tags: wordpress, gutenberg, fullsiteediting, blocktheme
Published: 2023-01-01 08:52:37

Hello,

I am trying to create a custom button on the Block Toolbar of the Full Site Editor. This button could insert custom content to paragraphs, button text, or headings. But I don’t know how to finish my code. Here is the code:

```
import { registerFormatType } from '@wordpress/rich-text';
import { BlockControls } from '@wordpress/block-editor';
import { ToolbarGroup, ToolbarButton, Button } from '@wordpress/components';

/*
https://developer.wordpress.org/block-editor/reference-guides/components/modal/
*/
import { Modal } from '@wordpress/components';
import { useState } from '@wordpress/element';

const MyCustomButtonIcon = ( props ) => {    

    const [ isOpen, setOpen ] = useState( false );
    const openModal = () => setOpen( true );
    const closeModal = () => setOpen( false );
    


    return (
        <BlockControls>
            <ToolbarGroup>
                <ToolbarButton
                    icon="buddicons-activity"
                    title="Custom Icon"
                    onClick={ openModal }                    
                />
                { isOpen && (
                <Modal title="Search an Icon" onRequestClose={ closeModal }>
                    <Button onClick={'**What should I put here to update the content?**'}>
                        Insert a thing
                    </Button>

                </Modal>
            ) }
            </ToolbarGroup>
        </BlockControls>
    );
};

registerFormatType( 'my-custom-format/my-sample-output', {
    title: 'Custom Icon',
    tagName: 'i',
    className: null,    
    attributes: {
        className: 'class'        
    },
    edit: MyCustomButtonIcon,
} );
```

Hope you could help me on this. What is the function that I need to use to update the content of the block?

Thank you very much.
OAuth2.0 - Overview
Published: 2023-01-01 08:49:51

**Roles Clients and Tokens**

Roles: Client, Authorization Server, Resource Server
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fk3tdh50dz4s0e3vcywk.png)

2 types of clients: Confidential and Public
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jpxycrwi57atc3mrajva.png)

2 token types

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


Identifier Type Token: The resource server needs to further query from auth server's DB about this token, re what user it is. 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iclomegd4retdfs7zz50.png)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mwt5o573tiqyrf22klw3.png)


Self-Contained Token (e.g. JWT)
The coded token be like:

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




Content

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

**OpenID Connect (OIDC)**
OpenID Connect is an additional layer which adds idenity information about the current authenticated user. It makes the authorization server an Identiy Provider.

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



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

Here is a list of extra ID data to the access token:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/naqnaza0j5u25q08cg8z.png)
Setting Up Heroicons with Next.js
Tags: heroicons, webdev, nextjs, beginners
Published: 2023-01-01 07:18:02

## Introduction

Heroicons is a set of customizable, pixel-perfect SVG icons that you can use in your React projects. It is designed to be easy to use and flexible, and it works well with frameworks such as Next.js. In this article, we will go through the process of setting up Heroicons in a Next.js project.

## Instructions

To use Heroicons in your project, you will first need to install it. You can do this using npm or yarn by running the following command in your project's root directory:
```
npm install heroicons
```
or
```
yarn add heroicons
```
Once you have installed Heroicons, you can import it into your project by adding the following line to the top of your JavaScript file:
```
import { Heroicon } from 'heroicons'
```
This will give you access to the `Heroicon` component, which you can use to render Heroicons in your project.

To use the `Heroicon` component, you simply need to pass it the name of the icon that you want to render. For example, to render the "mail" icon, you would use the following code:
```
<Heroicon name="mail" />
```
You can also customize the appearance of the icon by passing props such as `size` and `color`. For example, to render a red, 32x32 pixel version of the "mail" icon, you would use the following code:
```
<Heroicon name="mail" size={32} color="#ff0000" />
```

In addition to the Heroicon component, Heroicons also includes a library of pre-defined icons that you can use in your project. To use an icon from the library, you will need to import it using the following syntax:
```
import { Mail } from 'heroicons/icons'
```
You can then use the imported icon like this:
```
<Mail />
```

## Conclusion

Setting up Heroicons in a Next.js project is a simple process that involves installing the package, importing it into your project, and using the `Heroicon` component to render icons. With Heroicons, you can easily add pixel-perfect SVG icons to your Next.js project, giving it a professional and polished look.
How To Create Login & Registration Form Using HTML CSS & JavaScript Step By Step For Beginners
Tags: html, css, javascript, beginners
Published: 2023-01-01 08:19:30

{% youtube j5jSUIc_VTc %}
Hi Guys, today we want to show how to make Login & Registration Form Using HTML, CSS, JavaScript step by step from scratch.
Please, if you love it, Support us with Like & Subscribe.🙏🙏❤️❤️

[https://shorturl.at/gKWY9](https://shorturl.at/gKWY9)

In the comments, you can say what design you want so that we can prepare the video for you.

If you want to know how the design was done, check here : https://youtu.be/iYB3CLrbgkE
Setup Heroicons with Next.js
Published: 2023-01-01 07:12:54

## Introduction

Heroicons is a set of customizable, pixel-perfect SVG icons that you can use in your React projects. It is designed to be easy to use and flexible, and it works well with frameworks such as Next.js. In this article, we will go through the process of setting up Heroicons in a Next.js project.

## Instructions

To use Heroicons in your project, you will first need to install it. You can do this using npm or yarn by running the following command in your project's root directory:
```
npm install heroicons
```
or
```
yarn add heroicons
```
Once you have installed Heroicons, you can import it into your project by adding the following line to the top of your JavaScript file:
```
import { Heroicon } from 'heroicons'
```
This will give you access to the `Heroicon` component, which you can use to render Heroicons in your project.

To use the `Heroicon` component, you simply need to pass it the name of the icon that you want to render. For example, to render the "mail" icon, you would use the following code:
```
<Heroicon name="mail" />
```
You can also customize the appearance of the icon by passing props such as `size` and `color`. For example, to render a red, 32x32 pixel version of the "mail" icon, you would use the following code:
```
<Heroicon name="mail" size={32} color="#ff0000" />
```

In addition to the Heroicon component, Heroicons also includes a library of pre-defined icons that you can use in your project. To use an icon from the library, you will need to import it using the following syntax:
```
import { Mail } from 'heroicons/icons'
```
You can then use the imported icon like this:
```
<Mail />
```

## Conclusion

Setting up Heroicons in a Next.js project is a simple process that involves installing the package, importing it into your project, and using the `Heroicon` component to render icons. With Heroicons, you can easily add pixel-perfect SVG icons to your Next.js project, giving it a professional and polished look.
How to Optimize Your Website for Mobile Devices
Tags: webdev, javascript, beginners, programming
Published: 2023-01-01 07:33:10

###Best practices for mobile optimization 
When optimizing your website for mobile devices, there are a few key things to keep in mind. First, you want to use a responsive design so that your site can be viewed on any size screen. Second, keep your mobile site simple and easy to navigate. Third, use compressed images to speed up loading times. Lastly, consider using a content delivery network (CDN) to help deliver your content to mobile users.
 following these best practices will help ensure that your website is accessible and userfriendly for all mobile users.
###Importance of mobile optimization 
1. Optimize your images: Images can take longer to load on mobile devices, so make sure they're optimized for the web.
2. Test, test, test: Always test your website on a variety of mobile devices to make sure it looks and works the way you want it to.
Mobile optimization is important because mobile devices are now responsible for over half of all web traffic. A responsive design is the simplest and most effective way to make your site mobile friendly. Be sure to use large, easy to tap buttons, simplify your design, use mobile specific content, and optimize your images. Always test your site on a variety of mobile devices to ensure it looks and works the way you want it to.

### How to make your website more mobile friendly 
As mobile devices become increasingly prevalent, it is important to optimize your website for them. A responsive design will automatically adjust to fit the screen size of the device it is being viewed on, making for a better user experience. Additionally, it is important to keep the design simple and use large, easy to tap buttons for navigation. Images should be used wisely, as large images can take a long time to load on a mobile connection. By following these tips, you can make your website more mobile friendly.

### Common mistakes in mobile optimization
When optimizing a website for mobile devices, it is important to keep a few things in mind. First, simply making a website responsive is often not enough. It is also important to consider performance considerations. Mobile devices have a variety of different screen sizes and resolutions, and it is important to ensure that website content is scaled appropriately. Additionally, it is important to avoid using popups or interstitials that are not mobile friendly. These can frustrate users and cause them to leave a website.
Finally, it is also important to avoid using Flash or other technologies that are not supported on mobile devices. By keeping these things in mind, you can avoid common mistakes and optimize your website for mobile devices.

Star our [Github repo](https://bit.ly/3QFgAUf) and join the discussion in our [Discord channel](https://bit.ly/3HQtlYo) to help us make BLST even better!
Test your API for free now at [BLST](https://www.blstsecurity.com/?promo=blst&domain=https://dev.to/How_to_Optimize_Your_Website_for_Mobile_Devices)!
Content Spotlight: A Keyword Research SEO Company
Tags: seo, content, marketing, branding
Published: 2023-01-01 07:30:45

Content Spotlight is a content marketing and SEO agency focussed on keyword research, content writing, content marketing, link building, [SEO ](https://www.contentspotlight.org)and SEM. Content Spotlight helps online business websites gain visibility and prominence by increasing organic traffic.
Breath - Mental Health App (UX & UI Case Study)
Tags: ux, design, casestudy, mentalhealth
Published: 2023-01-01 07:26:37

**Breath UX & UI Case Study  - An app that helps users deal with mental health issues.**

I believe if you suffer from something suffer appropriately but make something out of it. 
As a result of dealing with mental health issues for the past couple of years, I decided to make something about it. After joining Designerrs | UI UX Design Academy I saw a problem brief called "make a mental health app." 
I immediately jumped into it because if you suffer from something, you should make something that can help others who are suffering from it too.

**Learnings from this project**

The topic of mental health is very sensitive when it comes to user research because most people want to keep things private, but having a proper user research interview question set helped me identify pain points, goals, and motivations.

The most important thing I learned about UX design as a designer was to put myself in the user's shoes so I could solve their problems.

> After receiving constant feedback on designs and iterating based on that feedback, I understand the crucial role feedback plays in the design process.

Live Youtube demo of this project
{% youtube puDgjsLEBfk %}
Portfolio Link:- [Portfolio Link](https://lnkd.in/g-rv7zCy)
Behance Project Link :- [Breath UX & UI Case Study](https://www.behance.net/gallery/160233787/Breath-Mental-Health-App-%28UX-UI-Case-Study%29)
I want to express my sincere gratitude to those who helped me during the process of the project.
Manvi Singhwal , Shahid Ahmed, Shivani Bhardwaj , Tina Lidia , Aakanksha Jaykar , Shireen Bhat , Ishika Dhawan



> This project is very important to me, and your valuable feedback will help me improve as a User Experience designer. Thank you, Krishna.

![GIF](https://media.giphy.com/media/m2WQBH7DhSdgLfnTUi/giphy.gif
)
Similarity and difference between JavaScript Array.forEach() and Array.map()
Tags: javascript, webdev, beginners, programming
Published: 2023-01-01 07:00:04

forEach() and map() methods receives a function as an argument and executes it once for each array element, but forEach() returns undefined and map() returns a new array

**Example:**

const userList =[{
firstName:”John”,
lastName:”Davis”,
age:28,
gender:”Male”
},{
firstName:”Grace”,
lastName:”William”,
age:30,
gender:”Female”
},]

**Use case: - Need to get the first and last names to a string array using the “userList” array of objects.**

**Implementation – 1: using forEach:**
const names = []
userList.forEach((user)=> {
names.push(`${user.lastName}, ${user.firstName}`)
});

Output:
console.log(names)
[“Davis, John”,”William, Grace”]

Implementation – 2: using map:
const names = userList.map((user)=>`${user.lastName}, ${user.firstName}`);

Output:
console.log(names) 
[“Davis, John”,”William, Grace”]

**Conclusion**:
In the above example the object array is transformed to string array, If there is a need to change or transform the data, map would serve the use cases better than forEach as it returns a new array.
What is 5G ?
Tags: 5g, telecom, tutorial, beginners
Published: 2023-01-01 06:05:54

5G is the fifth generation of mobile network technology, designed to provide faster and more reliable wireless communication for mobile devices.

5G networks operate in a higher frequency range than previous generations of mobile networks, allowing for higher data rates and lower latency. This makes 5G particularly well-suited for applications that require high bandwidth or low latency, such as streaming high-definition video, virtual reality, and online gaming.

5G networks also support a greater number of devices per unit area, making them well-suited for dense urban areas with a high number of mobile devices.

In addition to providing faster and more reliable communication for mobile devices, 5G networks also have the potential to enable a wide range of new applications and services, such as connected and autonomous vehicles, smart cities, and the Internet of Things (IoT).

{% embed https://youtu.be/52f4E6ZoIx0 %}

5G networks are still in the early stages of deployment, and are expected to become more widely available in the coming years as more mobile network operators roll out 5G services.
Hi, I'm Alby Abraham
Published: 2023-01-01 05:50:57

I'm a Experienced Content Writer planning to shift to Web Development. I'm trying hard to improve my skills and learn new technologies.

My Introduction to the Dev Community: https://dev.to/albyabraham/comment/23njp

I write articles about technology, cyber security and everything around it. The platform I own for writing articles is [The Last Words](https://thelastwords.wiki/).

Here is some of my writings:

- [5 Best Password Managers to Secure your Credentials](https://thelastwords.wiki/best-password-managers/)
- [10 Risks You Should Know About Artificial Intelligence](https://thelastwords.wiki/risks-of-artificial-intelligence/)
Sorting Lists
Tags: perl, python, theweeklychallenge
Published: 2023-01-01 05:50:20

## Weekly Challenge 197

[Challenge](https://theweeklychallenge.org/blog/perl-weekly-challenge-197/), [My solutions](https://github.com/manwar/perlweeklychallenge-club/tree/master/challenge-197/sgreen)

## Task 1: Move Zero

### Task
You are given a list of integers, `@list`.

Write a script to move all zero, if exists, to the end while maintaining the relative order of non-zero elements.

### My solution

This is probably the most straight forward task on the year! Outside the boiler plate code, my Python solution has only three statements, and only two statements in Perl. Both could be done in a single statement, but this reduces readability for no gain.

I generate a list called `solutions` that has all the non zero numbers from the original list, appended by all the zero numbers. This ensures that order of the non-zero numbers remains in the correct order.

### Examples

```bash
$ ./ch-1.py 1 0 3 0 0 5
1, 3, 5, 0, 0, 0

$ ./ch-1.py 1 6 4
1, 6, 4

$ ./ch-1.py 0 1 0 2 0
1, 2, 0, 0, 0
```

## Task 2: Wiggle Sort

### Task

You are given a list of integers, `@list`.

Write a script to perform Wiggle Sort on the given list. Wiggle sort would be such as `list[0] < list[1] > list[2] < list[3]`….

### My solution

On the other hand, my whiteboard got a bit of a work out in solving this one. It is apparent that not all lists can produce a working solution, `1, 2, 2` being an obvious one.

This is the approach I took in solving the change:

1. `list` is a reserved word in Python, so I chose the value `n`. The Perl solution used `@list`.
1. Sort the list numerical, in reverse order (i.e. `n[0]` is the largest number).
1. Split the list in two, `big_n` and `small_n`. If there is an odd number of elements, `small_n` will have the median number.
1. Use [zip_longest](https://docs.python.org/3/library/itertools.html#itertools.zip_longest) (from Python's itertools) or [mesh](https://metacpan.org/pod/List::Util#mesh) (from Perl's List::Util) to merge the lists together, taking values from `big_n` and `small_n` for each iteration. I also remove the None value (undef in Perl) in the case where there is an odd number of elements.
1. Iterate through the list to check there are not two adjacent values that are equal. Such as case would fail both the greater than and the less that checks. If this occurs, I display an error message.
1. Print the result.

### Examples

```bash
$ ./ch-2.py 1 5 1 1 6 4
1, 6, 1, 5, 1, 4

$ ./ch-2.py 1 3 2 2 3 1
2, 3, 1, 3, 1, 2
```
Introduction to Python: A Powerful and Versatile Programming Language
Published: 2023-01-01 05:00:00

If you're new to programming, or if you're looking to expand your skillset, Python is a great language to learn. It's easy to read and write, it's widely used in a variety of industries, and it has a large and active community of developers. In this post, we'll take a look at what Python is and why it's worth learning.

What is Python?

Python is a high-level, interpreted programming language. It was created in the late 1980s by Guido van Rossum and has since become one of the most popular programming languages in the world. Python is often described as a "batteries included" language, which means that it comes with a large standard library that includes many useful tools and modules for tasks like connecting to web servers, reading and writing files, and working with data.

Why learn Python?

There are many reasons to learn Python. Here are a few:

It's easy to learn: Python has a simple and readable syntax, which makes it a great language for beginners. It also has a large number of resources and tutorials available online, so you can easily find help and guidance as you learn.
It's versatile: Python is used in a wide range of applications, including web development, data analysis, artificial intelligence, and scientific computing. This means that you can use Python to build just about anything, and your skills will be in demand across a variety of industries.
It has a large and active community: Python has a large and active community of developers, which means that there are always new libraries and tools being developed, and you can find help and support from other Python users.
Getting started with Python

If you're ready to get started with Python, there are a few steps you'll need to take:

Install Python: To start using Python, you'll need to install it on your computer. You can download the latest version of Python from the official Python website.
Set up an editor: You'll need a text editor or integrated development environment (IDE) to write your Python code. Some popular options include PyCharm, Visual Studio Code, and IDLE (which comes with Python).
Learn the basics: Once you have Python installed and an editor set up, you can start learning the basics of the language. There are many online tutorials and resources available to help you get started, including the official Python documentation and various online courses.
Conclusion

Python is a powerful and versatile programming language that is easy to learn and widely used in a variety of industries. Whether you're a beginner looking to learn your first programming language or an experienced developer looking to add another skill to your toolkit, Python is a great choice. With its simple syntax, large standard library, and active community, Python is a great language to learn and can open up a world of possibilities for your career.