teleren/devto huggingface dataset:
Panda CSS Conditions
Tags: webdev, css, cssinjs, styling
Published: 2024-04-18 17:40:36

Conditions in Panda allow you to change styles depending on specific states or situations. 

For example, if I want to style an SVG element specifically, I can create a condition in the Panda config file. 

```tsx
import { defineConfig } from '@pandacss/dev'
 
export default defineConfig({
  conditions: {
    extend: {
      icon: "& > svg"
    },
  },
});
```
To use this condition, I prefix it with an underscore.

```tsx
function App() {
  return (
    <div
      className={css({
        _icon: {
          color: '#CDCDCD',
        },
      })}
    >
      Conditions in Panda
    </div>
  );
}
```

This tells Panda only to apply that style when that specific condition is true. 

Learn more about Panda CSS with my crash course ⬇️

{% embed https://youtu.be/QxswjlklkZA?si=Iqiipxu4Rue-0MjY %}.
Firebase Hosting Setup Complete Issue
Tags: firebase, react, deploy, javascript
Published: 2024-04-18 17:35:35

## আপনার ফায়ারবেজ ওয়েবসাইট হোস্ট করার পরে যদি উপরের ইমেজের মতো ইস্যু দেখায় তাহলে নিচের স্টেপগুলো ফলো করেনঃ

১. প্রথমে কিছু ফাইল এবং ফোল্ডার ডিলিট করে দিবেনঃ .firebaserc, .firebase (folder), dist(folder), firebase.json
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/glu1l1f2i69dvzc70v9x.png)

২. এরপরে `firebase init` কমান্ড দিয়ে নিচের স্টেপগুলো ফলো করেনঃ

    1. `Are you ready to proceed? (Y/n)` 👉 Y

    2. `কী-বোর্ডের down-arrow প্রেস করে **(Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys)** এরপরে স্পেস বাটনে ক্লিক করে সিলেক্ট করেন`

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/agjcsvczemcv0laa7f8o.png)
  3. `Use an existing project`: আপনার React এ্যাপের জন্য যে প্রজেক্টটি ফায়ারবেজে বানিয়েছেন সেটা সিলেক্ট করেন

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/db7kdsjtx3dprsktnfr4.png)
  4. `What do you want to use as your public directory?`👉 dist/build

> এখানে আপনি যদি vite  ব্যবহার করেন তাহলে আপনার build ফোল্ডারের নাম হবে dist  আর যদি CRA অথবা yarn  ব্যবহার করেন তাহলে আপনার build  ফোল্ডারের নাম হবে build.

5. `Configure as a single-page app (rewrite all urls to /index.html)?` (y/N) 👉 Y

6. `Set up automatic builds and deploys with GitHub?` (y/N) 👉 N

7. `File build/index.html already exists. Overwrite?`👉 Y

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

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

উপরে কমেন্টগুলো দেওয়ার পর আপনার প্রজেক্টে কয়েকটা ফাইল এবং ফোল্ডার এড হবে এবং আপনার টার্মিনালটা পরের কমান্ড দেওয়ার জন্য রেডি হবে। 

৩। এই পর্যায়ে আপনার প্রজেক্টটা বিল করতে হবে তার জন্য npm run build  দিয়ে Enter key প্রেস করেন।

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

৪। সর্বশেষে ফায়ারবেজে ডিপ্লয় করার জন্য `firebase deploy` কমান্ড দিয়ে Enter প্রেস করেন।

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

ডেপ্লয় শেষ হয়ে গেলে আপনাকে দুইটা লিংক প্রোভাইড করা হবে তার মধ্যে থেকে Hosting URL লিংকটা ওপেন করে চেক করেন। 

যদি দেখেন একই দেখাচ্ছে তাহলে `CTRL + SHIFT + R` প্রেস করে আপনার  ব্রাউজারের ট্যাব টাকে একটা হার্ড রিলোড দেন। সাধারণত উপরের প্রসেসটা ফলো করলে ফিক্স হয়ে যাবে। তবে মাঝেমধ্যে দুই থেকে পাঁচ মিনিটের মতো সময় নিতে পারে। এক্ষেত্রে দুই থেকে পাঁচ মিনিট অপেক্ষা করেন এর পরে আবার চেক করেন। 

---------------------------- The End -----------------------------
Ideas de recaudación de fondos más rentables para escuelas
Published: 2024-04-18 17:34:29

[La recaudación de fondos escolares](https://whydonate.com/es/blog/ideas-de-recaudacion-de-fondos-escuelas/) es la piedra angular del progreso educativo, canalizando recursos financieros para fomentar el crecimiento académico desde niveles de preescolar hasta universitarios. Estas iniciativas son indispensables para facilitar actividades extracurriculares y fortalecer recursos escolares esenciales. La eficacia de los eventos de recaudación de fondos varía, con subastas, eventos de gala y colaboraciones corporativas surgiendo como vías lucrativas para generar fondos. Igualmente impactantes son las campañas de donaciones anuales, las recaudaciones de fondos de productos y los eventos comunitarios, junto con becas y fundaciones. Tales iniciativas no solo complementan los presupuestos escolares, sino que también brindan un apoyo vital para becas y ayuda financiera, especialmente en el contexto de las escuelas españolas. Además, los esfuerzos de recaudación de fondos fomentan habilidades de liderazgo y autoconfianza entre los estudiantes, al tiempo que promueven la colaboración y la conciencia social. Al involucrar activamente a los padres, las escuelas pueden aprovechar recursos adicionales para mejorar las instalaciones y programas, asegurando un escenario beneficioso para todas las partes involucradas.

Referencia: https://whydonate.com/es/blog/ideas-de-recaudacion-de-fondos-escuelas/
Will AI be our next gen?
Tags: ai, codenewbie, tooling
Published: 2024-04-18 17:28:21

The concept of AI becoming the "next generation" is a complex and multifaceted topic. While AI technologies have the potential to significantly impact society and shape the future, it's important to understand that AI is a tool created and controlled by humans. Here are some key points to consider:

1. AI as a Tool: AI is a tool designed to augment human capabilities, automate tasks, and provide insights based on data analysis. It's a powerful technology that can enhance various aspects of our lives, but it remains a tool created and controlled by humans.

2. Integration into Society: AI is increasingly integrated into various aspects of society, from healthcare and transportation to finance and entertainment. As AI technologies continue to advance, they will likely become more ubiquitous and influential in shaping the way we live and work.

3. Impact on Jobs: The widespread adoption of AI may lead to shifts in the job market, with certain roles being automated or augmented by AI technologies. However, AI is also expected to create new job opportunities in fields such as AI development, data science, and human-AI interaction design.

Ethical Considerations: The development and deployment of AI raise important ethical considerations related to privacy, bias, accountability, and transparency. It's crucial to address these ethical challenges to ensure that AI technologies are developed and used responsibly.

4. Human-AI Collaboration: Rather than AI replacing humans, the future is likely to involve collaboration between humans and AI systems. Human expertise, creativity, and empathy complement AI's capabilities, leading to more effective problem-solving and decision-making.

5. Societal Impact: AI has the potential to impact society in profound ways, influencing everything from healthcare and education to governance and entertainment. It's important for policymakers, industry leaders, and the public to consider the societal implications of AI and work together to shape its development and deployment.
Best 5 tips to master UI & UX
Tags: uidesign, uxdesign, design, developer
Published: 2024-04-18 17:24:30

1.Understand User Needs and Goals:
- Begin by understanding the needs, goals, and behaviors of your target users. Conduct user research, interviews, and surveys to gather insights into their preferences, pain points, and expectations.
- Create user personas to represent different segments of your audience, helping you empathize with their perspectives and design solutions tailored to their specific needs.


2. Focus on Usability and Accessibility:
- Prioritize usability and accessibility in your designs to ensure a seamless and inclusive user experience for all users, including those with disabilities.
- Follow usability heuristics and accessibility guidelines (e.g., WCAG) to design interfaces that are intuitive, efficient, and easy to navigate.
- Test your designs with real users to identify usability issues and iteratively improve the user experience based on their feedback.

3. Master Design Principles and Techniques:

- Familiarize yourself with fundamental design principles such as typography, color theory, layout, and visual hierarchy. Understand how these principles influence user perception and behavior.
- Learn design tools and techniques commonly used in UI/UX design, such as wireframing, prototyping, and user interface design software (e.g., Sketch, Adobe XD, Figma).
- Stay updated on the latest design trends, best practices, and emerging technologies in the field of UI/UX design through online courses, books, tutorials, and industry events.

4. Iterate and Iterate Again:

- Embrace an iterative design process that involves continuously refining and improving your designs based on user feedback, testing results, and stakeholder input.
- Prototype early and often to explore different design ideas, validate assumptions, and identify potential design flaws before committing to final implementations.
- Iterate rapidly, incorporating feedback from usability testing sessions and design critiques to iterate on your designs and refine them iteratively.

5. Seek Feedback and Collaborate:

- Foster a collaborative and feedback-driven culture by seeking input from colleagues, stakeholders, and end users throughout the design process.
- Participate in design critiques, workshops, and peer reviews to solicit constructive feedback on your designs and gain insights from diverse perspectives.
- Be open to feedback, both positive and constructive criticism, and use it as an opportunity for growth and improvement in your UI/UX design skills.

> By following these tips and consistently practicing UI/UX design principles, you can gradually master the art of creating user-centered, visually appealing, and intuitive interfaces that delight users and drive positive outcomes for businesses and organizations.

_Feel free to share your experience!_
OCI - Restore DB System Backups across OCI Cloud regions is now available.
Tags: cloud, database, restore, oracle
Published: 2024-04-18 17:15:39

[](
      <style>
        .libutton {
          display: flex;
          flex-direction: column;
          justify-content: center;
          padding: 7px;
          text-align: center;
          outline: none;
          text-decoration: none !important;
          color: #ffffff !important;
          width: 200px;
          height: 32px;
          border-radius: 16px;
          background-color: #0A66C2;
          font-family: "SF Pro Text", Helvetica, sans-serif;
        { Abhilash Kumar Bhattaram : </style> <a class="libutton" href="https://www.linkedin.com/comm/mynetwork/discovery-see-all?usecase=PEOPLE_FOLLOWS&followMember=abhilash-kumar-85b92918" target="_blank">Follow on LinkedIn</a>) }


_This is an Informational Blog on the OCI Database Release Notes for Database service on 3-April-2024 , will try to put in a detailed blog on this at a later date_

A few weeks ago I had blogged about creating OCI Custom Backups ( you can refer the blog [here](https://dev.to/abhilash8/oci-oracle-base-database-service-creating-custom-backups-18nd)). I would suggest to have a read on this blog in case you are new to OCI Cloud Custom Backups.

One of key areas that OCI was missing was the ability to restore these backups across regions. **This was one of the key points auditors drill the IT department to support this requirement**. Currently such restores are available with the Cloud Region only.

Oracle has silently put in this feature into the Cloud as seen in the Database Release notes [here](https://docs.oracle.com/en-us/iaas/releasenotes/changes/563b64a5-eacd-4641-969d-02f3ce839208/)

The Complete documentation of the OCI Base Database Service is available for reference [here] (https://docs.oracle.com/en/cloud/paas/base-database/backup-recover/index.html#articletitle)
Navigating the Code of Car Finance
Tags: code, car, finance, webdev
Published: 2024-04-18 17:13:09

In the realm of car finance, where numbers and algorithms drive decisions, coding skills can be a valuable asset. As a developer, understanding the intricacies of financing can empower you to make informed decisions when purchasing a vehicle.

Firstly, coding prowess equips you to analyze financing options effectively. With the ability to create custom spreadsheets or even develop software tools, you can compare loan terms, interest rates, and monthly payments to find the most favorable arrangement for your budget.

Moreover, coding knowledge enables you to delve into the world of financial APIs and automation. By leveraging APIs provided by financial institutions, you can fetch real-time data on interest rates and loan terms, streamlining the research process. Automation scripts can handle repetitive tasks like gathering quotes or tracking expenses, saving you time and effort.

Furthermore, understanding coding concepts like encryption and secure data handling can enhance your security when dealing with online financing platforms. You can develop secure solutions for managing sensitive financial information, mitigating the risk of fraud or data breaches.

In essence, as a developer, your coding skills can be invaluable in navigating the complexities of car finance, empowering you to make informed decisions and streamline the purchasing process.
See More:- https://autofinancedenver.com/
Getting credentials for your Discord Activity
Tags: discord, activity, javascript, programming
Published: 2024-04-18 16:59:43

Discord Activities are awesome! They run inside Discord and can do all sorts of cool things like games, quizzes, and more. But to get started, you need to authenticate your activity with Discord.

This guide will show you how to get your credentials and start building your activity.

## Create a Discord application

To get started, you need to create a new Discord application. This will give you access to the Discord API and allow you to authenticate your activity.

1. Go to the [**Discord Developer Portal**](https://discord.com/developers/applications).
2. Click on "New Application" and give your application a name.
3. Click on "Create" to create your new application.

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

## Click on "OAuth2" in the sidebar

Once you've created your application, click on "OAuth2" in the sidebar. This has all the stuff you need to authenticate your activity.

Here, you can find your "Client ID" and "Client Secret". You'll need these to authenticate your activity with Discord. You may need to click on "Reset Secret" to generate a new secret.

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

Go ahead and copy them to your project!

## That's it!

That's all you need to get your credentials for your Discord Activity. Now you can start building your activity and authenticate it with Discord. Have fun! 🎉

---

## Don't have a project yet?

If you don't have a project yet or want to start fresh, you can use the [**create-robo**](https://roboplay.dev/create-robo) tool to create a new Discord Activity project. It's super easy and comes with everything you need to get started. Check it out!

```bash
npx create-robo my-activity --kit app
```

We also have a tutorial on how to build a Discord Activity in seconds.

➞ [📖 **Tutorial:** Creating a Discord Activity in seconds](https://dev.to/waveplay/how-to-build-a-discord-activity-easily-with-robojs-5bng)

Still have questions? Join our [**Discord server**](https://roboplay.dev/discord) and ask away. We're here to help you build amazing activities with Robo.js! 🚀
How to deploy to an AWS ec2 machine using Github Actions
Published: 2024-04-18 16:59:21

I recently needed to set up an automatic or continuous deployment to a project I was working on and I needed to use Github actions. Being my first time I went online to read up on it a bit and also watched some Youtube videos, however I couldn't understand everything well so I explained my need to chatGPT, it's answer was enough to get me started but I needed to do some important changes on my own before my CI worked.

Here are my steps.

1. Create a Github workflow directory in the root of your project
`./github/workflow`
2. Add a yml file for you workflow
`deploy.yml`
I'm using deploy because the workflow is for deploying my project
3. Now you need to define your workflow in the deploy.yml file
`name: Deploy Website

on:
  push:
    branches:
      - main  # Change this to your main branch name if different

jobs:
  deploy:
    runs-on: ubuntu-latest

    steps:
    - name: Checkout code
      uses: actions/checkout@v2

    - name: SSH into EC2 instance and deploy
      uses: appleboy/ssh-action@master
      with:
        host: ${{ secrets.EC2_HOST }}
        username: ${{ secrets.EC2_USERNAME }}
        key: ${{ secrets.EC2_SSH_KEY }}
        script: |
          cd /path/to/project
          git pull
          sudo pm2 stop app
          sudo yarn build
          sudo pm2 restart app
`
4. Now the easy part is over, lets get into some ssh madness

- Set up ssk key
login to your ec2 instance ssh and run the following commands to generate ssh key pair
`ssh-keygen -t rsa -b 4096 -C "your_email@example.com"`

- you need to get your secret key to add to your github actions. Open the private key file (~/.ssh/id_rsa) with a text editor and copy its contents. Then, go to your GitHub repository and navigate to Settings > Secrets. Click on "New repository secret" and add a new secret with the name EC2_SSH_KEY and paste the contents of the private key file into the value field.

5. Finally, Add Secrets to GitHub Repository: In your GitHub repository, go to Settings > Secrets and add the following secrets:
EC2_HOST: The IP address or domain name of your EC2 instance.
EC2_USERNAME: The username to log in to your EC2 instance.
How to store Data with shared Preference in Flutter
Tags: flutter, dart, design, developers
Published: 2024-04-18 16:59:19

In Flutter, you can use the **shared_preferences** package to store and retrieve data using shared preferences easily. Shared preferences are a simple way to store key-value pairs persistently across user sessions.

1. Add the shared_preferences dependency to your pubspec.yaml file:-

_dependencies:
  flutter:
    sdk: flutter
  shared_preferences: ^2.0.0_

2. Import the shared_preferences package in your Dart file:-

   import 'package:shared_preferences/shared_preferences.dart';

3.Storing Data with Shared Preferences:

Future<void> saveData() async {
  SharedPreferences prefs = await SharedPreferences.getInstance();

  // Storing data
  prefs.setString('username', 'JohnDoe');
  prefs.setInt('age', 30);
  prefs.setBool('isLogged', true);

  print('Data saved to shared preferences.');
}

4.Retrieving Data from Shared Preferences:

Future<void> loadData() async {
  SharedPreferences prefs = await SharedPreferences.getInstance();

  // Retrieving data
  String? username = prefs.getString('username');
  int? age = prefs.getInt('age');
  bool? isLogged = prefs.getBool('isLogged');

  print('Username: $username');
  print('Age: $age');
  print('Logged in: $isLogged');
}


5.Clearing Data from Shared Preferences:

Future<void> clearData() async {
  SharedPreferences prefs = await SharedPreferences.getInstance();

  // Clearing specific data
  prefs.remove('username');

  // Clearing all data
  // prefs.clear();

  print('Data cleared from shared preferences.');
}
Learning AWS Day by Day — Day 40 — Amazon Aurora
Tags: aws, cloud, cloudcomputing, beginners
Published: 2024-04-18 16:54:13

Exploring AWS !!

Day 40:

Amazon Aurora

Overview:
- Amazon Aurora is a proprietary technology from AWS (not open sourced)
- PostgreSQL and MySQL are bot supported as Aurora Database (means your drivers will work as if Aurora was Postgres or MySQL database)
- Aurora is AWS cloud optimized and claims 5X performance improvement as compared to MySQL on RDS, over 3X performance of PostgreSQL on RDS.
- Aurora storage automatically grows with increments of 10GB to 128TB.
- It can’ve 15 replicas while MySQL has 5 and replication is faster.
- Failover in Aurora is instantaneous, its High availability native.
- Aurora costs more than RDS (20% more) but is more efficient.

Aurora High Availability and Read Scaling:
- 6 copies of your data across 3 AZs:
- 4 copies out of 6 needed for writes.
- 3 copies out of 6 needed for reads.
- Self healing with peer to peer replication.
- storage is striped across 100s of volumes.
- One Aurora instance takes writes (master)
- Automated failover for master in less than 30 seconds.
- Master + upto 15 Aurora Read Replicas serve reads.
- Support for cross region replication.

Aurora Database Cluster: — 

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

Features of Aurora:
- Automatic failover
- Back up and recovery
- Isolation and Security
- Industry compliance
- Push-button Scaling
- Automated Patching with zero downtime
- Advanced downtime
- Routine Maintenance
- Backtrack: restore data at any point of time without using backups

Aurora Security:
- Similar to RDS because uses same engine
- Encryption at Rest using KMS
- Automated backups, snapshots and replicas are also encrypted
- Encryption in flight using SSL (same as MySQL and Postgres)
- Possibility to authenticate IAM token
- You are responsible for protecting instance with security groups.
- You can’t SSH.
Cascading Style Sheet (CSS)
Published: 2024-04-18 16:53:05

Cascading Style Sheets is a style sheet language used for the presentation and styling of a document that is written in a markup language such as HTML or XML. CSS is where you add color, fonts, and animation, etc. Basically CSS makes websites more appealing to people. 

1. CSS Cascade:
The cascade is the system for solving problems where multiple CSS rules apply to an HTML element. CSS Cascade takes care of the position and order of appearance, the specificity, the origin and the importance.


2. CSS Selectors:
It is a decoration of elements and other terms that tell the browser which HTML elements should be selected to have the CSS property values inside the rule applied to them.


3. CSS Specificity:
It is the system used by browsers to determine the CSS declaration that is the most relevant to an element, which determines the property value to apply to the element.
How does Fetch works exactly?, and how can I use GET method with parameters?
Tags: react, javascript, css
Published: 2024-04-18 16:38:10

Hi, I am new to React and I am trying to get specific search results based on a city name. I have a variable which is entirely dependent on user's input(city name) and I would like to use this variable as a parameter in my URL. I am sure my syntax is wrong and I tried googling, but I cannot understand anything. Can someone please explain how Fetch API works?, and how can I make a GET request with parameters?. Here's my code-

`const City1= useSelector(state=>state.City); // using Redux
const myrequest= fetch('http://xxxx.xxxx.xxxx.xxxx/xxxx/:?{$City1}',{
method: 'GET',
headers: {'Access-Control-Allow-Origin':'*','Content-Type':'application/json'}
}).then(response => {
if (!response.ok) {
throw new Error('Network response was not ok');
}
return response.json();
})
.then(userData => {
// Process the retrieved user data
console.log('User Data:', userData);
})
.catch(error => {
console.error('Error:', error);
});;
my error-
Failed to load resource: the server responded with a status of 404 (Not Found)
xxxx.js:66 Error: Error: Network response was not ok`