teleren/devto huggingface dataset:
How to integrate a headless CMS into a React app
Published: 2023-12-06 10:03:57

The demand for effective content management is higher than ever before. Traditional CMS often restricts developers in delivering dynamic user experiences. However, with the advent of headless CMS, a new era of content management has emerged. It separates the backend from the frontend, giving developers the flexibility to integrate it into React apps for fast content-driven experiences.

In this article, I will guide you on [how to integrate a headless CMS](https://www.lytecms.com/blog/how-to-integrate-headless-cms-in-react-app) into your React app. We will delve into the details of implementing this powerful combination. Let's dive in and unlock the full potential of headless CMS integration in just five minutes!

## Step 1: Create a Next.js App
To begin, use the create-next-app CLI tool to create a new Next.js project with all the necessary dependencies and configurations:

`npx create-next-app@latest nextjs-cms-app`

## Step 2: Define Models and Content in LyteCMS
In this step, define your data models (blueprints) and create content entries using [LyteCMS](https://www.lytecms.com). Configure the structure of your content, define fields and relationships, and set validation rules. All this information will be stored in the LyteCMS database.


## Step 3: Fetch Data from LyteCMS
To retrieve data from LyteCMS, you need to send a request to LyteCMS to fetch your content.

`fetch("https://www.lytecms.com/api/v1/records?table={your_table_id}")
.then((res) => res.json())
.catch()`

## Step 4: Connect Content with React Components

Use REST APIs or GraphQL to connect your content stored in LyteCMS with the React components in your app. This step involves mapping the content to the frontend, ensuring a seamless user experience.

``async function LandingPage() {
  const cmsData = await fetch("https://www.lytecms.com/api/v1/records?table={table_id}");
  return (
    <>
      <Header title={cmsData.title} />
      <Hero title={cmsData.heroTitle} image={cmsData.heroImage} />
      {/* ...rest of the landing page */}
    </>
  );
}``


## Step 5: Test, Optimize, and Launch
Thoroughly test your application on various devices, optimize it for performance and SEO, and make necessary adjustments for a successful launch. The headless CMS approach offers flexibility and control, and the emerging trend of visual headless CMS further empowers both developers and content creators.


## Simplify Content Management and Boost Productivity with LyteCMS

In less than 5 minutes, you've learned how to integrate a [headless CMS](https://www.lytecms.com/blog/guide-to-headless-cms) into a React app. I highly recommend trying out LyteCMS for simplified content management and increased productivity. With our intuitive table-based interface, real-time editing, and built-in Markdown editor, LyteCMS makes content creation and formatting a breeze. We also offer efficient file and image asset management, hassle-free hosting, and maintenance, ensuring the security and privacy compliance of your data. Give LyteCMS a try today!
Tenant settings with SPFx and PnP JS
Tags: spfx, pnpjs
Published: 2023-12-26 09:33:44

---
title: Tenant settings with SPFx and PnP JS
published: true
date: 2023-12-06 10:00:00 UTC
tags: SPFx,PNPjs
canonical_url: 
---

Tenant settings are a useful way to define settings for an SPFx solution without the need to handle all the settings in the property pane, in this way you also don’t need to configure the web part again if you need to remove it. To achieve this result we’re using PnP JS.

I developed a sample solution with nothing more than a button that opens an URL defined in the tenant settings.

If no setting is defined the button will be disabled:

![](https://iamguidozamcode.files.wordpress.com/2023/10/image-18.png?w=561)

If the URL is defined in the settings the button will be enabled and, once clicked, will open a new tab with the specified URL:

![](https://iamguidozamcode.files.wordpress.com/2023/10/image-20.png?w=542)

### The code

To start with the settings you need to import the PnP JS package, you can install it executing:

```
npm i @pnp/sp --save
```

For this sample I created a SettingsService to handle the operation of reading from the tenant setting, to do so you need to specify the required imports:

```
import { PageContext } from "@microsoft/sp-page-context";
import { spfi, SPFI, SPFx } from "@pnp/sp";
import "@pnp/sp/appcatalog";
```

In the constructor of the SettingsService we get the PageContext and instantiate the needed object to handle the settings:

```
public constructor(serviceScope: ServiceScope) {
 serviceScope.whenFinished(async () => {
  const pageContext: PageContext = serviceScope.consume(
		PageContext.serviceKey
	);
	this._sp = spfi().using(SPFx({ pageContext }));
 });
}
```

Once that you have instantiated the `this._sp` object you can use it to get the tenant settings. In this sample I have an object saved to the tenant setting so I defined a `Load` function that returns the object:

```
private async Load(): Promise<Settings | undefined> {
 const appCatalog = await this._sp.getTenantAppCatalogWeb();

 const settings = await appCatalog.getStorageEntity(this.settingsKey);

 if (settings && settings.Value) {
	return JSON.parse(settings.Value);
 } else {
	return undefined;
 }
}
```

With that you can now read your value!

Now that you know how to read a setting the next step is to set it, to do so you can can do it in SPFx using `this._sp.setStorageEntity` or use PnP PowerShell with the script:

```
# Connect to the admin portal
Connect-PnPOnline -Url "https://{your-domain}-admin.sharepoint.com" -Credentials: (Get-Credential)

# Set the target URL to the tenant property
Set-PnPStorageEntity -Key Sample:Settings -Value '{ "targetUrl": "{your-target-url}"}'
```

NB: the `Key` value provided must be the same used with the `getStorageEntity` method.

You can find the code of the sample [here](https://github.com/GuidoZam/blog-samples/tree/main/web%20parts/TenantSettingsSample).

Hope that helps!
Check Charm
Published: 2023-12-06 09:55:59

At Check Charm, our mission is to provide you with the most valuable and up-to-date content. To support this, we occasionally include affiliate links in our articles, which means we may earn a commission if you purchase through these links. However, this does not influence our recommendations or evaluations. Our editorial content is based on thorough research and guidance from our expert team, independent of our advertising.
gift ideas
[money saving tips](https://www.checkcharm.com/money-saving/jcpenney-savings-tactics-shop-smart-and-save/)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3dkop8l102ra6v85ruhn.png)
Jun88 – Nhà cái Uy Tín hàng đầu Châu Á
Published: 2023-12-06 09:54:02

JUN88 – Điểm đến cá cược trực tuyến uy tín số 1 tại thị trường Việt Nam. Với hơn 17 năm hoạt động và hơn 10 triệu người chơi hàng ngày, JUN88 đã khẳng định vị thế của mình là một trong những nhà cái hàng đầu trên toàn cầu, đặc biệt tại Việt Nam. Từ uy tín đến chất lượng, tính hợp pháp và đảm bảo an toàn, JUN88 cam kết mang đến cho người chơi những trải nghiệm cá cược tuyệt vời nhất!
Website: https://jun88.ag/
Email: grineaysteers70175@gmail.com
Mastering Financial Data Analysis: Merging and Joining in Pandas
Tags: python, programming, pandas, datascience
Published: 2023-12-06 09:52:36

In the realm of financial data analysis, the ability to combine and analyze data from different sources is crucial. Pandas, a powerful data manipulation library in Python, provides robust tools for merging and joining DataFrames. In this guide, we'll explore the process of merging financial datasets using Pandas, using practical examples with historical stock data from Yahoo Finance.

## Step 1: Importing Libraries

```python
import pandas as pd
import yfinance as yf
```

## Step 2: Downloading Additional Financial Data

Let's start by downloading data for another stock, say Microsoft (MSFT).

```python
ticker_msft = "MSFT"
data_msft = yf.download(ticker_msft, start="2020-01-01", end="2023-01-01")
```

## Step 3: Exploring and Cleaning the Additional Data

It's essential to understand and clean the data before merging.

```python
# Display the first few rows of the data
print(data_msft.head())

# Check for missing values
print(data_msft.isnull().sum())

# Drop rows with missing values
data_msft = data_msft.dropna()
```

## Step 4: Merging DataFrames

Now, let's merge the data for Apple (AAPL) and Microsoft (MSFT) into a single DataFrame.

```python
# Merge data for AAPL and MSFT based on the Date index
merged_data = pd.merge(data, data_msft, left_index=True, right_index=True, suffixes=('_AAPL', '_MSFT'))

# Display the merged DataFrame
print(merged_data.head())
```

## Step 5: Analyzing the Merged Data

With the merged DataFrame, various analyses become possible. Let's calculate the percentage change in closing prices for both stocks.

```python
# Calculate the percentage change in closing prices for AAPL and MSFT
merged_data['PctChange_AAPL'] = merged_data['Close_AAPL'].pct_change() * 100
merged_data['PctChange_MSFT'] = merged_data['Close_MSFT'].pct_change() * 100

# Display the result
print(merged_data[['PctChange_AAPL', 'PctChange_MSFT']].head())
```

## Step 6: Visualizing the Merged Data

Visualization is a powerful tool. Let's plot the percentage change in closing prices for both stocks.

```python
import matplotlib.pyplot as plt

# Plotting the percentage change in closing prices for both stocks
plt.figure(figsize=(12, 6))
plt.plot(merged_data.index, merged_data['PctChange_AAPL'], label='AAPL')
plt.plot(merged_data.index, merged_data['PctChange_MSFT'], label='MSFT')
plt.title('Percentage Change in Closing Prices: AAPL vs MSFT')
plt.xlabel('Date')
plt.ylabel('Percentage Change')
plt.legend()
plt.show()
```

This guide demonstrates the seamless process of merging financial datasets and conducting a comparative analysis. You can further customize the merging process based on your specific needs, such as choosing different columns for merging or employing various types of joins. Exploring different financial metrics and visualizations will help you gain deeper insights into market trends across multiple stocks.

Happy coding and analyzing!
Graphic Designing Training
Published: 2023-12-06 09:49:00


Excellence Technology in Chandigarh graphic design services, seamlessly blending creativity with technology. Our skilled team of designers employs the latest tools and techniques to deliver visually stunning and impactful designs. Whether you need compelling branding, eye-catching marketing materials, or engaging digital content, we tailor our designs to meet your unique needs. With a focus on innovation and precision, Excellence Technology is your go-to partner for elevating your visual identity in the digital landscape.
Explain what is higher order function by Pikachu
Tags: javascript, beginners
Published: 2023-12-06 09:45:29

## What is higher order function?
1. function that take in a function as an argument 
2. function that returns a function

-> I'm gonna explain by using 2 in this time

## Super simple Higher order function
This might be simplest example.
function getPikachu() returns a function which invoke console.log()
```javascript
function getPikachu() {
  return function() {
    console.log('10000 volts!')
  }
}
```

Now please guess what is the result of this code?
```javascript
❓
const pikachu = getPikachu()
```

the answer is getting **definition** of function
```javascript
function () {
  console.log('10000 volts!')
}
```

What if we want to get string of '10000 volts!'?
Just invoke this function by adding `()`
```javascript
const pikachu = getPikachu()
pikachu() // '10000 volts!'
```

▼ Difference between `pikachu` and `pikachu()`
- pikachu : just definition
- pikachu() : invoke this definition ⚡⚡⚡⚡⚡⚡⚡⚡⚡

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

## The other way to invoke function
Actually you can invoke function in different way.

```javascript
getPikachu()
```
As you already know, when you execute `getPikachu()`, you get definition of function.
And now How do you invoke function? adding `()` right?
Yeah so if you add () to `getPikachu()`, you can get string `10000 volts!`
```javascript
getPikachu()() // '10000 volts!'
```

It looks a bit weird at first time, but if you think logically with higher other function, it's gonna be so simple.
Check Out These 6 figma Portfolio Websites Design Before Creating Your Own
Tags: programming, webdev, react, beginners
Published: 2023-12-06 09:40:35



## Introduction:

Hey Dev.to community! 👋 Are you thinking about making your own website but not sure where to start? No worries! In this post, I want to show you six fantastic web developers Figma portfolio  designs


## figma
Before we embark on this design-filled journey, let's take a moment to appreciate the power of Figma. This incredible tool has revolutionized the way we design user interfaces, making it easier than ever to create visually appealing and interactive prototypes. With Figma, the possibilities are endless, and these six portfolio websites are a testament to that.

## 1.

## ✅✅https://www.figma.com/community/file/1225758714111104710 ✅✅


![Figma Portfolio Designs 1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xpv368zntgs06q5r1lxr.png)


## 2.
##  ✅✅ https://www.figma.com/community/file/1185122580534161003 ✅✅


![Figma Portfolio Designs 2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y2twzo196uc3y2do61sf.png)

## 3.
## ✅✅  https://www.figma.com/community/file/1203440275430859222 ✅✅


![Figma Portfolio Designs 3](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x9hat22xkvo2h7wg107z.png)


## 4. 
## ✅✅ https://www.figma.com/community/file/1174142802218062054 ✅✅


![Figma Portfolio Designs 4](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dar0m6ini5820oj9040m.png)

## 5.
##  ✅✅ https://www.figma.com/community/file/1209765833530090686 ✅✅

![Figma Portfolio Designs 5](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x6jpwnrfhzwgz2t0u5sm.png)

## 6. 
## ✅✅ https://www.figma.com/community/file/1144519064091466465
✅✅

![Figma Portfolio Designs 6](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4oz8gwmj0ptl1ccd3d2s.png)

 that will make your jaw drop and inspire your own creative endeavors. Remember, your portfolio website is your digital storefront, 

## Conclusion:

So, there you have it, folks! Six Figma portfolio website designs
 before you begin building your web developer portfolio, so make it count. Use Figma to unleash your creativity and showcase your work in a way that truly represents your unique style and design sensibilities. Let the creativity of others inspire and guide you as you create a space that truly represents you.

## Feel free to check out my own portfolio if you're interested!
✅✅ https://sufianmustafa.com/ ✅✅


![Sufian mustafa portfolio website](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i7d7w1j5umyj8hr1nm0j.png)

## It's your turn
Feel free to drop your portfolio link in the comments 💬 below 👇🏽 if you think your portfolio is unique. It's a great opportunity to get feedback not just from me but also from fellow developers. Let's celebrate creativity together! 🤝🤝

Thanks For Reading
Give it a hearty 💖 if u find it useful! Happy coding! 🚀
Goal Management Software | Goals Management Software | 10xWinners
Published: 2023-12-06 09:40:14

Goal Management Software - Are you looking for the best OKR goal setting software? 10xWinners assists you with organizational goal setting for your business/teams to achieve objectives efficiently. Request a demo to learn more about goal management.

https://10xwinners.com/goal-setting-and-goal-management-software/

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eal291t7wnuasqsxk8f9.png)
Analyzing Financial Data with Pandas: A Step-by-Step Guide
Tags: python, progrmming, datascience, pandas
Published: 2023-12-06 09:38:20

In the world of data analysis, Pandas stands out as a powerful tool for working with structured data. If you're interested in diving into financial data and extracting meaningful insights, this guide will walk you through the process of grouping and aggregating data using Pandas, with a practical example using historical stock data from Yahoo Finance.

## Step 1: Install Necessary Libraries

Before we get started, make sure you have Pandas and yfinance installed. If not, you can install them by running:

```bash
pip install pandas yfinance
```

## Step 2: Import Libraries

```python
import pandas as pd
import yfinance as yf
```

## Step 3: Download Financial Data

Let's start by downloading historical stock data for a specific ticker. For this example, we'll use Apple Inc. (AAPL).

```python
ticker = "AAPL"
start_date = "2020-01-01"
end_date = "2023-01-01"

# Download data
data = yf.download(ticker, start=start_date, end=end_date)
```

## Step 4: Explore and Clean the Data

It's crucial to understand and clean your data before diving into analysis.

```python
# Display the first few rows of the data
print(data.head())

# Check for missing values
print(data.isnull().sum())

# Drop rows with missing values
data = data.dropna()
```

## Step 5: Group Data and Perform Aggregations

### Grouping by Date

```python
# Group by date and calculate the average closing price for each day
daily_average = data.groupby(data.index)['Close'].mean()

# Display the result
print(daily_average)
```

### Grouping by Month

```python
# Extract month from the Date index
data['Month'] = data.index.month

# Group by month and calculate the average closing price for each month
monthly_average = data.groupby('Month')['Close'].mean()

# Display the result
print(monthly_average)
```

### Grouping by Multiple Columns

```python
# Extract month and year from the Date index
data['Month'] = data.index.month
data['Year'] = data.index.year

# Group by year and month, calculate the average closing price for each group
monthly_average_by_year = data.groupby(['Year', 'Month'])['Close'].mean()

# Display the result
print(monthly_average_by_year)
```

## Step 6: Advanced Aggregations

You can perform more advanced aggregations using the `agg` function.

```python
# Define a dictionary with column-wise aggregation functions
agg_functions = {'Open': 'mean', 'High': 'max', 'Low': 'min', 'Close': 'mean', 'Volume': 'sum'}

# Group by month and apply the aggregation functions
monthly_aggregated = data.groupby('Month').agg(agg_functions)

# Display the result
print(monthly_aggregated)
```

## Conclusion

Congratulations! You've just learned how to download financial data from Yahoo Finance, clean and explore it, and perform various grouping and aggregation operations using Pandas. These skills are fundamental for anyone looking to analyze and derive insights from financial data.

Feel free to adapt and expand upon these examples based on your specific analysis goals. Happy coding!
Welcome Thread - v254
Tags: welcome
Published: 2023-12-06 09:30:00

---
title: Welcome Thread - v254
published: true
description: Welcome to DEV! A thread of hellos and intros.
tags: welcome
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9gl6twd8r59cvwqlllw7.jpg
published_at: 2023-12-06 09:30
---
![red text box and hand waving hellow](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/axksoqsfppxv2lsfh0s0.gif)
---

1. Leave a comment below to introduce yourself! You can talk about what brought you here, what you're learning, or just a fun fact about yourself.

2. Reply to someone's comment, either with a question or just a hello. 👋 

3. If you are new to coding, want to help beginners in their programming journey, or just want another awesome place to connect with fellow developers, check out the [CodeNewbie Org](https://dev.to/codenewbieteam)!
Understand web Accessibility: why a11y overlays are so bad? (part 5)
Tags: a11y, learning, marketing, developer
Published: 2023-12-06 09:28:32

> No overlay product on the market can cause a website to become fully compliant with any existing accessibility standard and therefore cannot eliminate legal risk.

- 
**They do not correctly adress every error**: accessible coding is key to ensuring that your website is inclusive to all users. For instance, missing alternative texts require a manual review to add meaningfull contents. And, overlays are not changing the source code so far.


- 
**They don't make your website fully compliant**: only capable of detecting around 20-30% of all a11y issues on websites (the easy stuff). A few examples of the issues an a11y overlay cannot fix:
keyboard traps
incorrect heading structure
focus order
unclear hyperlink text
no labels on form fields
identifying decorative images,
etc...


- 
**They can disrupt the UX for disabled users**: people using screen readers will find it disruptive to their user experience if they have to switch to using the overlay assistive technology. Overlays can also bring about new problems for users, by affecting the layout. That's why some disabled users are blocking overlays.


- 
**They can make access to information worse**, like Steve Faulkner said in his article of TPGI or like Haben Girma in a video about accessiBe.


- 
**They have a poor value**: many disabled individuals already have the software that they require to navigate the web and can easily leverage features already built into their browsers and OS.


- 
**A more technical example**, about UserWay: https://adrianroselli.com/2021/09/userway-will-get-you-sued.html