teleren/devto huggingface dataset:
UIAlertController taking multiple user inputs
Tags: beginners, mobile, swift
Published: 2023-10-30 15:07:00

**What if there is more than one user input?**

Following program will implement an alert that asks the user for username and password. Then log the credentials in the console.

```swift
    @IBAction func alertCalled(_ sender: Any) {
        let alert = UIAlertController(title: "Login", message: "Enter username and password", preferredStyle: .alert)
        
        alert.addTextField() { textField in
            textField.placeholder = "username"
        }
        
        alert.addTextField() { textField in
            textField.placeholder = "password"
            textField.isSecureTextEntry = true
        }
        
        let cancelAction = UIAlertAction(title: "Cancel", style: .cancel)
        let yesAction = UIAlertAction(title: "OK", style: .destructive) { _ in
            let usernameTF = alert.textFields![0] as UITextField
            let passwordTF = alert.textFields![1] as UITextField
            guard let username = usernameTF.text, let password = passwordTF.text  else {
                return
            }
            print("Username: \(username) || Password: \(password)")
        }
        
        alert.addAction(cancelAction)
        alert.addAction(yesAction)
        
        self.present(alert, animated: true)
    }
```

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

![result2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f8ma49smty8irtoz8a4f.png)
Unveiling the Subscript and Superscript Generator Enhancing Text and Formulas
Published: 2023-10-30 15:03:22

Subscripts and superscripts are versatile typographical elements used to enhance text and mathematical expressions. Whether you need to denote chemical compounds, mathematical equations, footnotes, or simply wish to add creative flair to your documents, the [subscript and superscript generator](https://insta-fonts.com/superscript-text-generator) can be a valuable tool. In this article, we'll explore the significance of subscripts and superscripts and how a generator can simplify the process of creating them.

Understanding Subscripts and Superscripts

Subscripts and superscripts are smaller characters or symbols that appear slightly below (subscript) or above (superscript) the regular text baseline. They serve several purposes:

1. Mathematical Expressions: In mathematics, superscripts are used for exponents, while subscripts denote indices or lower-positioned variables in equations. For example, in "x²," the "²" is a superscript, and in "H₂O," the "₂" is a subscript.
LeetCode - Solution for 2625. Flatten Deeply Nested Array
Tags: leetcode, javascript, webdev
Published: 2023-10-30 15:02:24

My first attempt at using recursion. The idea is to keep decreasing `n` until 0 or less than 0. And during each iteration, each element in the array `arr` is checked, if the element is an array, then all elements of the array element are pushed into the array `newArr`, otherwise only push the element (which is a `number`) into the array `newArr`.
```
var flat = function (arr, n) {
    const flatArr = (arr, n) => {
        if(n <= 0) return arr;
        const newArr = [];
        for(let el of arr){
            if(Array.isArray(el)) newArr.push(...el);
            else newArr.push(el);
        }
        return flatArr(newArr, n-1)
    }
    return flatArr(arr, n);
};
```

The above solution passes 3 default test cases, but when the number `n` of test cases is very large (i.e. 1000), a Runtime Error occurs.

arr:
```
[[2],[1],[1],[0],[1],[0],[0],[0],[1],[2],[3],[3],[2],[4],[0],[3],[1],[4],[1],[3],[3],[3],[4],[4],[4],[0],[1],[2],[4],[1],[2],[3],[1],[1],[3],[0],[4],[4], ...
```

n:
```
1000
```

Therefore, I added a new flag `hasMoreSubArr` to check if any element currently in arr is an array instead of a number. When the current array `arr` is a one-dimensional array, the function `flatArr` will return the latest processed array `newArr` instead of continuing the recursion.
```
var flat = function (arr, n) {
    const flatArr = (arr, n) => {
        if(n <= 0) return arr;
        const newArr = [];
        let hasMoreSubArr = false;
        for(let el of arr){
            if(Array.isArray(el)) {
                hasMoreSubArr = true;
                newArr.push(...el);
            }
            else newArr.push(el);
        }
        if(hasMoreSubArr) return flatArr(newArr, n-1);
        else return newArr;
    }
    return flatArr(arr, n);
};
```
How to use UIAlertController in Xcode
Tags: swift, mobile, beginners
Published: 2023-10-30 14:48:38

IOS provides two constant values:
- `.alert`
- `.actionSheet`
![two constant values](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x01s9424yjg8by20cipv.png)

**.alert**
```swift
    @IBAction func alertCalled(_ sender: Any) {
        let alert = UIAlertController(title: "Delete Message", message: "Are you sure you want to delete this message?", preferredStyle: .alert)
        
        // two buttons
        let cancelAction = UIAlertAction(title: "No", style: .cancel)
        let yesAction = UIAlertAction(title: "Yes", style: .destructive) { _ in
            print("message deleted!")
        }
        
        // add action to the alert
        alert.addAction(yesAction)
        alert.addAction(cancelAction)
        
        self.present(alert, animated: true)
    }
```
![alert image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k7c61bybl8tzj58im2ut.png)

**.actionSheet**
```swift
    @IBAction func alertCalled(_ sender: Any) {
        let alert = UIAlertController(title: "Delete Message!", message: "Are you sure you want to delete this message?", preferredStyle: .actionSheet)
        
        // two buttons
        let cancelAction = UIAlertAction(title: "No", style: .cancel)
        let yesAction = UIAlertAction(title: "Yes", style: .destructive) { _ in
            print("message deleted!")
        }
        
        // add action to the alert
        alert.addAction(yesAction)
        alert.addAction(cancelAction)
        
        self.present(alert, animated: true)
    }
```
![actionSheet](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cbqdg61tttia0g8q2m71.png)

**AlertControllers accepting user input**
_NOTE: you CANNOT use `.actionSheet` with `addTextField()` method_

```swift
    @IBAction func alertWithTextFieldCalled(_ sender: Any) {
        let alert = UIAlertController(title: "Hello", message: "What is your name?", preferredStyle: .alert)
        
        alert.addTextField() { textField in
            textField.placeholder = "Enter your name"
        }
        
        // two buttons
        let cancelAction = UIAlertAction(title: "No", style: .cancel)
        let yesAction = UIAlertAction(title: "Yes", style: .destructive) { _ in
            let textField = alert.textFields![0] as UITextField
            guard let name = textField.text else {
                return
            }
            print("Hello \(name)")
        }
        
        // add action to the alert
        alert.addAction(yesAction)
        alert.addAction(cancelAction)
        
        self.present(alert, animated: true)
    }
```
![user input](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m0pkn2qidq1a7t2dymh2.png)

![result](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w10s6prt7kfw2s8e4474.png)
React js component for text outline animation
Tags: freecodez, react, html, blog
Published: 2023-10-30 14:57:20

Hey there, You are most welcome to this article. I hope you will enjoy this article. If you like this article then please share this article with your friends and colleagues. If you have any questions or suggestions regarding this article then please comment down below.

**React js component for text outline animation**

![React js component for text outline animation](https://res.cloudinary.com/freecodez/image/upload/v1698677814/images/ggaa1xsxitarjgbl0x31.webp)

For full source code visit : [https://freecodez.com/post/sj674si](https://freecodez.com/post/sj674si)


```
// https://freecodez.com
const Hello = (props) => {
	return (
		<div class="container">
			<svg width="100%" height="120"><text x="0" y="100">{props.txt}</text></svg>
		</div>
	);
};

```

Source Code : [https://freecodez.com/post/sj674si](https://freecodez.com/post/sj674si)

For more such articles visit : [https://freecodez.com](https://freecodez.com/all)
What are your goals for the week of October 30?
Tags: discuss, hacktoberfest23
Published: 2023-10-30 14:48:31

## What are your goals for this week? Any final HacktoberFest goals among them?

- What are you building? 
- What will be a good result by week's end?
- Are you attending any events this week? 
  * Any suggestions of events to attend?
- Did you meet your goals last week?

### Last Week's Goals

- [:white_check_mark:] Continue Job Search.
- [:white_check_mark:] Blog.
- [:white_check_mark:] HacktoberFest
  *  Met the 4 PR requirement. Submitted a fifth it's in review. 
  * Pausing on this for Interview prep.
- [:white_check_mark:] Code Challenges For Interview Prep
- [:white_check_mark:] Some kind of CSS Halloween art. Started one but not happy with it.
- Project work
- Events
  * [:white_check_mark:] Attend Virtual Coffee(VC)Thursday
  * [:x:] VC CSS Battle Friday Personal conflict.
- [:white_check_mark:]Run a weekly Slack thread similar to this post. 
- [:x:] Build LEGO Sets. just some minis. 
- [:white_check_mark:] Road Trip this weekend. 

### This Week's Goals

- Continue Job Search.
- Blog.
- Code Challenges For Interview Prep
- Expand on CSS Halloween art.
- Project work
- Events
  * Attend Virtual Coffee(VC)Thursday
  * VC CSS Battle Friday
- Run a weekly Slack thread similar to this post. 
- Build LEGO Sets.
- Work on pictures from weekend.



### Your Goals for the week


You've read my goals so I'll throw the questions back to you.


- What are you building? 
- What will be a good result by week's end?
- Are you attending any events this week? 
  * Any suggestions of events to attend?
- Did you meet your goals last week?
- How are you doing on HacktoberFest?



```html
-$JarvisScript git push
```
A CRUD ExpressJS example, with React and Vue example usage
Tags: javascript, tutorial, react, beginners
Published: 2023-10-30 14:47:52

This post might be "just another ExpressJS example", but I hope it will be useful enough for the beginner to know how to  create a RESTful API in ExpressJS. I am not only providing a basic project example with awful structure.

I create the repository to give you the example ExpressJS and the usage of the API in ReactJS. 

Here, you will learn by the project example.

I have structured the project using a simple Model-Service-Controller pattern. It's simple pattern but powerful enough to get started and working on your client project right away.

## What you can learn
- CRUD
- User authentication
- File upload
- How to use it in ReactJS
- How to use it in VueJS (Soon)
- Sequelize

Here is the repository, dont forget to share and star it.

https://github.com/burhanahmeed/nodejs-react-vue-project-starter

I will update the repo along the way.

😬 I am not writing another CRUD tutorial, you can see the repo and learn from it.
An Introductory Guide To Web Application Firewall
Tags: webdev, security, cybersecurity, learning
Published: 2023-10-30 14:32:37

Similar to Dr. Stephen Strange's powerful Shields of Seraphim, **Web Application Firewalls (WAFs)** act as a protective barrier between web applications and online threats. This article explores how WAFs function, their evolution, advantages, and future prospects in safeguarding businesses from the perils of the internet.

While most of us can't be as formidable as Dr. Strange, we can still deploy our version of protective barriers with Web Application Firewalls (WAFs). WAFs, akin to Dr. Strange's Shields  are tailored firewalls designed for web applications. Positioned in front of these applications, they scrutinize **bidirectional web traffic over HTTPS**, shielding against cyber threats. This article delves into what WAFs are, their functionality, significance for businesses, and how they're more akin to Dr. Strange's powers than one might realize. If your IT woes are supernatural, Dr. Strange is your guy; for the digital realm, it's WAFs.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3aumhiolx5ie96uw4s4m.gif) [Source](https://qph.cf2.quoracdn.net/main-qimg-a3cd324af91312c47c4fb25855d32bbc)

**Understanding Web Application Firewalls (WAFs)**

Web Application Firewalls (WAFs) serve as the virtual equivalent of Dr. Strange's fire-walls, safeguarding web applications by monitoring and filtering HTTP traffic between the application and the Internet. They effectively shield enterprise infrastructures from a range of malicious threats, including cross-site forgery, cross-site scripting, and SQL injection. WAFs have evolved over time and come in various forms, including network-based, host-based, and cloud-based, tailored to specific business needs. This article explores the history and development of WAF technology.

Click [here ](https://www.techdogs.com/td-articles/curtain-raisers/an-introductory-guide-to-web-application-firewall)to read **Why Do Businesses Need Web Application Firewalls** and the **Future Outlook for Web Application Firewalls.**
How to use UIPickerView with Swift
Tags: swift, beginners, mobile
Published: 2023-10-30 14:31:12

**DataSource**
- Access to Data
- How many columns do I have? 
`func numberOfComponents(in pickerView: UIPickerView) -> Int { return .. }`
- How many rows in a column? 
`func pickerView(_ pickerView: UIPickerView, numberOfRowsInComponent component: Int) -> Int{ 
return countries.count }`

**Delegate**
- response to User Event
- Title for each row? 
`func pickerView(_ pickerView: UIPickerView, titleForRow row: Int, forComponent component: Int) -> String? { return countries[row] }`
- What happens if the row is selected? 
`func pickerView(_ pickerView: UIPickerView, didSelectRow row: Int, inComponent component: Int) { countryLabel.text = countries[row] }`

**Link the `DataSource` and `Delegate` outlets of the PickerView to the ViewController**
_Firstly, conform to the UIPickerViewDataSource and UIPickerViewDelegate protocols to implement PickerView_

Option 1.In code
```swift
class ViewController: UIViewController, UIPickerViewDataSource, UIPickerViewDelegate {
    @IBOutlet weak var countryPicker: UIPickerView!
    @IBOutlet weak var countryLabel: UILabel!
    // Data for Picker
    var countries = ["Canada", "South Korea", "US", "UK", "China"]

    override func viewDidLoad() {
        super.viewDidLoad()

        countryPicker.dataSource = self
        countryPicker.delegate = self
    }
...
```

Option 2.Select UIPickerView > connection inspector > connect both dataSource and delegate to the view controller
![second option](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1hmujw91uc165qx7ccx4.png)

**What if I want to use 2 pickers on the same ViewController?**
--> set approriate `tag value` to picker and use that to differentiate

Look out for the tag!
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pc9ed1a2dw444zq8ps8d.png)

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

**How to access the selected value on a button click**
-> Use `.selectedRow(inComponent: #)`
```shell
    @IBAction func showPickerData(_ sender: Any) {
        let countryIndex = countryPicker.selectedRow(inComponent: 0)
        print("selected country: \(countries[countryIndex])")
    }
```
My Hacktoberfest Journey: Navigating Challenges and Embracing Growth
Tags: hack23contributor, beginners, hacktoberfest, hacktoberfest23
Published: 2023-10-30 14:30:46

<!-- ✨This template is only meant to get your ideas going, so please feel free to write your own title, structure, and words! ✨ -->

### Intro
<!-- Share a bit about yourself as a contributor. Is this your first Hacktoberfest, or have you contributed to others? Feel free to embed your GitHub account by using {% embed LINK %} -->
Hey there! I'm Ashish, a proud contributor to Hacktoberfest 2023. This marked my debut in both Hacktoberfest and the world of open-source contributions. The journey has been nothing short of amazing. Stay tuned for the exciting story!
[GITHUB](https://github.com/ashish-nagmoti)

### Highs and Lows
<!-- What were some of your biggest accomplishments or light-bulb moments this month? Did any problems come up that seemed impossible to fix? How did you adapt in those cases?  -->
Starting from the beginning, I signed up for Hacktoberfest and grasped the basics of Git and GitHub by October 8th. 

My initial contributions in early October were on some less meaningful repositories, but I soon realized their futility. So, I shifted my focus towards genuine contributions.

Venturing into repositories with complex C/C++ codebases proved challenging. I resorted to contributing to **documentation** in one repository, and to my amazement, it got **merged** - a pleasant surprise!

With an aspiring developer's mindset, I persevered, attempting contributions in various repositories. While some were rejected, others turned out to be inactive.

As the event neared its end, I stumbled upon a movie website repository written in **HTML and CSS**. I made multiple contributions, and **two were successfully merged**, making me the happiest person on the planet.

However, the repository presented complex issues I couldn't resolve. So, I came up with a unique idea. I uploaded an app I had developed in Dart the previous year on GitHub and made a contribution, which I naturally **merged myself**. 

Despite some setbacks, I didn't achieve anything particularly unique. Nonetheless, 
> I'm content with the little I was able to accomplish.

### Growth
<!-- What was your skillset before Hacktoberfest 2023 and how did it improve? Have your learning or career goals changed since working on these new projects? -->
I've come a long way from knowing the languages to understanding their practical use in development. Learning CLI and Git was a game-changer. The vast world of open source is thrilling! Ready to contribute and participate in more events.
Odoo : figure out the error
Tags: odoo
Published: 2023-10-30 14:17:44

Odoo errors are not that much verbose and self explanatory for a normal developer but if you understand how to figure the errors, easier to fix the issue. 

For example, I run a new Odoo server with a backup a database and when click project, I got this error 

`odoo.exceptions.CacheMiss: 'project.task(6689,).stage_last_changed'`

We can understand that stage_last_changed is a field in the model project.task and it i missing. This could be fixed by upgrading the corresponding module. But how do we know which module ? Well, one way to find it is that just search 'stage_last_changed' in the source code with your IDE and it will show you which module the code is mentioned. Once you found the module, then upgrade that module using Odoo UI. 

Restart the Odoo and access the page which triggered the error last time, the error should be fixed now
How to make a PDF Builder in React?
Published: 2023-10-30 14:08:01

Creating a PDF builder using React involves integrating a PDF generation library with your React application. In this example, we'll use `pdfmake`, a popular client-side library for generating PDFs. Here's a step-by-step guide:

### 1. Set up a new React project (if you don’t already have one):

```bash
npx create-react-app pdf-builder-react
cd pdf-builder-react
```

### 2. Install the necessary dependencies:

```bash
npm install pdfmake
```

### 3. Create a simple PDF Builder component:

In `src/components/PdfBuilder.js`:

```jsx
import React, { useRef } from 'react';
import pdfMake from 'pdfmake/build/pdfmake';
import pdfFonts from 'pdfmake/build/vfs_fonts';

pdfMake.vfs = pdfFonts.pdfMake.vfs;

function PdfBuilder() {
 const contentRef = useRef(null);

 const generatePdf = () => {
   const content = contentRef.current.value;

   const documentDefinition = {
     content: content,
   };

   pdfMake.createPdf(documentDefinition).download('GeneratedPDF.pdf');
 };

 return (
   <div>
     <textarea ref={contentRef} placeholder="Enter content for PDF..." rows="10" cols="50"></textarea>
     <br />
     <button onClick={generatePdf}>Generate PDF</button>
   </div>
 );
}

export default PdfBuilder;
```

### 4. Integrate the PDF Builder component in your main App:

In `src/App.js`:

```jsx
import React from 'react';
import './App.css';
import PdfBuilder from './components/PdfBuilder';

function App() {
 return (
   <div className="App">
     <h1>PDF Builder with React</h1>
     <PdfBuilder />
   </div>
 );
}

export default App;
```

### 5. Run the project:

```bash
npm start
```

Now, you should see a textarea where you can input content and a button to generate a PDF. When you click the button, a PDF will be downloaded with the content from the textarea.

This is a basic implementation. You can expand upon this by adding styling, images, tables, etc. to your PDF using the capabilities provided by `pdfmake`. Check the pdfmake documentation for more details on the features and customization it offers.
How to Become an Expert React.js Developer?
Published: 2023-10-30 14:05:57

Becoming an expert React.js developer requires an understanding of various core concepts, related tools, and best practices. Here's a concise list to guide your learning journey:

1. JS Fundamentals: Before diving into React, ensure you have a solid grasp of JavaScript, including ES6+ features.

2. React Basics:
- JSX: A syntax extension for JavaScript.
- Components: Both functional and class components (though functional components with hooks are now more common).
- Props & State: Passing data to components and managing internal data.
- Component Lifecycle: Understanding when and how components render, update, and unmount.

3. React Hooks: Introduced in React 16.8, they allow you to use state and other React features without writing a class.
- useState, useEffect, useContext, useReducer, etc.

4. Advanced Patterns:
- Higher Order Components
- Render Props
- Context API for state management
- Compound Components

5. Routing:
- React Router: Navigate between different parts of your application.

6. State Management:
- Redux: An external state management library.
- Local Component State vs Global State: When and where to use each.

7. Effects and Side Effects:
- Handling side effects with `useEffect`
- Managing async operations (fetching data, etc.)

8. Performance:
- React's Virtual DOM and Reconciliation Algorithm
- PureComponent and memo: For optimizing component renders.
- Profiling and optimizing React applications with React DevTools.
- Lazy loading with `React.lazy()` and `Suspense`.

9. Testing:
- Jest: A testing framework for JavaScript.
- React Testing Library: A library for testing React components.
- Mocking and simulating user interactions.

10. Styling:
- CSS-in-JS libraries like styled-components or emotion.
- Traditional CSS and SCSS.
- CSS Modules.

11. Tools & Ecosystem:
- Create React App (CRA): A bootstrapping tool for React projects.
- Webpack & Babel: Understand the basics, as they power many React projects.
- ESLint & Prettier: For code linting and formatting.

12. Server-Side Rendering (SSR):
- Next.js: A popular framework for SSR with React.
- Handling SEO and performance benefits with SSR.

13. Advanced Ecosystem:
- GraphQL with tools like Apollo Client.
- Static site generation with Gatsby.

14. Best Practices:
- Prop Types and/or TypeScript for type-checking.
- Code splitting and bundling optimizations.
- Accessibility (a11y) in React.
- Internationalization and localization.

15. Stay Updated: React evolves over time. Regularly follow the React official blog, attend conferences, and participate in the community to stay informed.

Remember, mastery takes time. Deeply understand each concept before moving to the next, and practice by building projects. Regular hands-on coding will solidify your knowledge and make you a true React.js expert.