teleren/devto huggingface dataset:
Determining if multiple inputs have values with Laravel
Tags: laravel
Published: 2021-12-04 17:15:51

Although it doesn't appear in the docs Laravel has a handy method to determine if the HTTP request contains one or more inputs with values:

```php
if ($request->anyFilled(['name', 'type', 'status']) {
    //
}
```
The `anyFilled` method will return `true` if **any** of the inputs given in the array contain a non-empty value.
Flutter Modular Architecture
Tags: flutter, dart, architecture, mobile
Published: 2021-12-04 17:07:54

If you are working on some big project, you can find that this project is bigger and bigger after some time and your controller, repository or view folders are full of hundred files..

Normal MVC project structure:
![Normal MVC project structure](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0wpx62po0m0tkpejy28u.png)

But with Modular you can split your application into more modules/features by scope and make your software more readable.

Project structure with modular:
![Project structure with modular](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9w0ymbcq4egvqcl3d3x8.png)
 
Here is example of my project structure with modular:
![Project structure with modular](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gv84ghoq2ev4u8gae14o.png)
Where in core folder I have classes, widgets and utils which are shared for every module. And every module is one peace of my project which is very simple and replaceable without any big impact in other modules.

Modular also solve dependency injection and routing between modules which are very nice solved.

Here is example of my main module file:
![Example of my main module file](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tfailw9nhdhtw8a336u9.png)

And my other module files:
![Picking module file](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w1vegay0rgtborp9q9q7.png)![Inventory module file](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dmxjhyku82ykp45ynx3m.png) 

Modular also works with any type of State Manager like Provider, RiverPod, Bloc, Cubit, Triple, MobX,  GetX, etc..

More about Modular you can find here:
https://modular.flutterando.com.br/docs/intro
https://github.com/Flutterando/modular
AWS Re:Invent 2021 #Reaction Final Part
Tags: aws, discuss, news
Published: 2021-12-04 17:05:48

AWS re: Invent 2021 has come to an end. It has been a week of total ecstasy. A week has passed since I published this post at the pre-inaugural midnight madness moment:

{% link aws-builders/aws-reinvent-2021-reaction-5e9c %}

Now, let me tell you a summary of the brightest and most outstanding moments that happened for me during Werner's keynote.

**Keynote with Dr. Werner Vogels**
Besides having had one of the best intros I have ever seen, listening to Werner's keynote was like going back in time, the beginnings of many services such as EC2 among others were remembered, since 2006. If you see the intro in detail, We will see references to the past like that "box" and we see that Werner remembers when he announced Lambda for the first time. Why so much nod to the past?

After the nod to the past about EC2 instances, boom! nod to the future with EC2 M1 Mac Instances, what will come next? kind of InstancesVerse? we won't know yet.

![EC2 M1 Mac Instances](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m53rmr3jmxo6xlas3snl.png)

Other of the best announcements of this keynote is the launch of 30 new AWS Local Zones, including 2 AWS Local Zones in LATAM. This after highlighting how AWS has been working to offer a better user experience with very low latencies thanks to the large number of regions, and not to mention the more than 216 Edge Locations that it now has.

![AWS Local Zones](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4jxv0uzloceg75yaqjvt.png)
 
Our much-loved Amplify Studio comes with a huge upgrade. Now it allows us to create applications in a matter of hour, with a nice UI.

![AWS Amplify Studio](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/njweaih4n7p55hanmv9u.png)

What I liked the most about this new release is its integration with the very powerful design tool [Figma] (figma.com). That is, you have the development of your application without the need to throw code, and with a single click, you export all that UI to Figma for prototyping. What more can you ask? Yes, I am a fan of Figma.

![Amplify Studio and Figma](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xwlh3wk6pdgnfr4oty9l.png)

Following that line "Dev", because now SDK is compatible with runtime like Swift, Kotlin and Rust.

![SDKs](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/212wqp8guquekldkck7c.png)

Sustainability pillar
![Pilar de sostenibilidad](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7lkry9qdfss8qa2a3awj.png)

Goodbye StackOverFlow, Welcome AWS re:Post
![AWS re:Post](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ny6jj5g9jomxbt4jfao1.png)

> You asked for this. Basically, this is your fault.
By Werner Vogels.
![AWS Services](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0vvhnewh00vvf3m4k2vv.png)

If you want to see the complete Keynote, this is the video:
{% youtube 8_Xs8Ik0h1w %}
Deploy a Next.js static app in Clever Cloud
Published: 2021-12-04 16:58:49

---
title: Deploy a Next.js static app in Clever Cloud
published: true
description: Clever Cloud is a great hosting provider made in Europe/France, making it really easy to deploy apps. Let's see about a Next.js static app
tags: 
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iosazteqcyy5wiurxo92.jpg

---

> *Note: This post is not sponsored by [Clever Cloud](https://www.clever-cloud.com) by any mean, but it's a service I really like : great UX, great support, and made in Europe*

[Clever Cloud](https://www.clever-cloud.com) is great, nevertheless it took me a small hour to deploy a static NextJS app the first time. But their support was really efficient and we sorted it out really fast ! Just by setting up the correct environment variables.


Context: We're working on a monorepo, meaning that in a single github repository we have many folders such as `api`, `app`, `admin`, `dashboard`, etc. So the NextJS app is located in the `app` folder, that's all we need to know here.

Back in Clever Cloud Console:

1. Create a new application
2. Choose "Create from a Github Repository" and select your repo
3. Step "What kind of application is it ?", select "Static", with a feather 🪶 as an icon
4. Config your instances as you wish (Autoscalability, Horizontal scaling, Vertical scaling), name it as you wish, choose your region and create it
5. Then go to "Environment variables" and setup the variables this way:

```
APP_FOLDER="app"
CC_CACHE_DEPENDENCIES="true"
CC_CGI_IMPLEMENTATION="proxy_fcgi"
CC_NODE_DEV_DEPENDENCIES="install"
CC_PRE_BUILD_HOOK="cd app && npm install --also=dev && npm run build"
CC_WEBROOT="/out"
HOST="0.0.0.0"
NEXT_PUBLIC_ANY_VARIABLES="{variables you defined for your project}"
NODE_ENV="production"
PORT="8080"
```

And that's it !

Clever Cloud moto is

> **Vous développez, nous déployons**
> *You code, we deploy*

Cannot be more true ! 🥸
Request GitHub Actions to be added to the internal marketplace
Tags: actionshackathon21, github, actions
Published: 2021-12-04 16:49:03

In my previous post I showed you how to setup an internal marketplace for GitHub Actions to help you users find actions when you follow the [best practices](https://devopsjournal.io/blog/2021/02/06/GitHub-Actions) and fork all the actions you use (and limit the use to only those forks!).

This post is the follow up on that: now that we have an internal marketplace, how can we give users a process to follow to request actions to be added to it? We started a workflow called [github-actions-requests](https://github.com/rajbos/github-actions-requests) for that!

### My Workflow
We have multiple workflows that do the work, so let's go over the steps in our process:
1. User follows the issue template to request an action to be reviewed for the marketplace.
1. An engineer with a security mindset reviews the source of the action (it's open source, so check the code!) for big issues, like sending out your data into the web for example. If nothing found, the engineer labels the issue with 'security-check'. 
1. The `issue-labeled-as-security-scan.yml` workflow is triggered and runs all the security checks. The results are posted back to the request issue.
1. We fork the action repository and enable dependabot to run it's software composition analysis so we can retrieve any vulnerability alerts. Unfortunately we cannot retrieve information about dependabot's last run or if it is currently running. We have to wait for that.
1. After waiting sometime (can be minutes, can be longer). The engineer labels the issue with 'load-dependabot-alerts'. 
1. The workflow `dependabot-alerts.yml` is triggered and fetches all vulnerability alerts from the forked action. It then posts back the findings into the request issue.
1. After a final check, the label `final-signoff` is used to sign off. The `final-signoff.yml` workflow is triggered and forks the action repository to its final destination: the organization that is used in production for storing all your used actions.

### Workflow view:
The workflow has a couple of parallel jobs that give the UI renderer some issues :sunglasses:
![Screenshot of the workflow execution in the GitHub UI](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a4w3v7me5iuxqo43nybz.png)

If you want to know more, check out this video on it:
<iframe width="1230" height="692" src="https://www.youtube.com/embed/hYvFrlzeU8o" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>


### Submission Category: 
* Maintainer Must-Haves

### Yaml File or Link to Code

We use multiple workflows for this, but it starts with [issue-labeled-as-security-scan](https://github.com/rajbos/github-actions-requests/blob/main/.github/workflows/issue-labeled-as-security-scan.yml) workflow


### Additional Resources / Info
Could not have done this without the help of [Hindrik Bruinsma](https://github.com/readefries)! We have lots of interest from the community in this process, with lots of ideas on how to improve!
Frameworks:The good, the bad and the ugly
Tags: webdev, programming, beginners, productivity
Published: 2021-12-04 16:28:36

**What is a Framework?**
A framework can be described as a  structure for developing software applications. Frameworks act as foundations for software developers to build programs for a specific platform. They may include predefined classes and functions, libraries of bundled code, software modeling and APIs. 

**Common Frameworks**
Some common frameworks are listed below:
- Angular
- React
- Bootstrap
- Flask
- Ruby on Rails

**The Good**
Software developers use frameworks because they streamline the development process which leads to an  increase in efficiency. They make code more readable and reusable. Developers can therefore spend more time on problem-solving and collaboration without compromising the turnaround time of web-applications. 
Frameworks also provide an added layer of security. They do so with built in security features against common attacks and data tampering.

**The Bad**
There is also a downside to using frameworks. Frameworks have predefined classes, functions, libraries and code which are not necessary for all projects. While these unnecessary files can be deleted, it can be time consuming and overwhelming to do so. In some cases it's more efficient not to use a framework.



**The Ugly**
The truth is frameworks are lovely tools. In my opinion, a developer should be proficient in a programming language before attempting to learn a framework. Know the basics before moving on to the fancy stuff!
Frameworks can be combined in a web-application:one framework on the frontend and another on the backend. However, just like everything in web-development, it requires practice. I would recommend that beginners use different repositories for the frontend and the backend because it can be a nightmare keeping up with two different frameworks in one repository.
Setup Neovim on Github Actions
Tags: actionshackathon21, neovim
Published: 2021-12-04 15:36:29

[Instructions]: # (To submit to the GitHub Actions x DEV Hackathon 2021, please fill out all sections.)


### My Workflow
[Note]: # (Please make sure the project links to the appropriate GitHub Actions repository, and includes [an open source license](https://choosealicense.com/) and README.)

I maintain some Neovim plugins and wanted to setup automated tests for those using GitHub Actions. First thing you need for testing Neovim plugin is "neovim" itself.

So I wrote this small GitHub Action with only 30-ish lines of code. It takes a [Neovim release tag](https://github.com/neovim/neovim/releases), downloads the archive and sets it up for you. It works on Linux and macOS.

This would be useful to anybody who maintains Neovim plugins.

### Submission Category: 

[Note]: # (Maintainer Must-Haves, DIY Deployments, Interesting IoT, Phone Friendly, or Wacky Wildcards)

Maintainer Must-Haves

### Yaml File or Link to Code

[Note]: # (Our markdown editor supports pretty embeds. Try this syntax: `{% github link_to_your_repo %}` to share a GitHub repository)

{% github MunifTanjim/setup-neovim-action %}

### Additional Resources / Info

[Note]: # (Be sure to link to any open source projects that are using your workflow!)

[Note]: # (Be sure to include the DEV usernames of your collaborators, if any. )

[Reminder]: # (Submissions are due on December 8th, 2021 (11:59 PM PT or 2 AM ET/6 AM UTC on December 9th.)

If you want to see it in action, check:
- [Workflow Code](https://github.com/MunifTanjim/nui.nvim/blob/2f44cc941cf1a129b6b6069a7489672b24cf0015/.github/workflows/ci.yml#L36-L50)
- [Workflow Runs](https://github.com/MunifTanjim/nui.nvim/actions)
Functional vs Class Component in React.js
Published: 2021-12-04 16:13:53

**Components** are the most important part of React, it let's us to write code in different piece and split in independent states.
It literally is a function which "returns something" like in **JavaScript Functions**. _You write something you get that thing._

**1.Functional Components**

Way to define a functional component which accepts a prop can be :
`function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}`

- Here input can be **props** and output can be **JSX**, very straight forward right??.

- Functional components don't support [State](https://reactjs.org/docs/state-and-lifecycle.html) until React [Hooks](https://reactjs.org/docs/hooks-intro.html) came into existence 

**2.Class Based Components**

With react [ES7 Snippet](https://marketplace.visualstudio.com/items?itemName=dsznajder.es7-react-js-snippets)  installed type _rcc_ it's gonna give react class component :
`class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}`

- In class based function we have to first use render() then return something (whereas in functional components directly return something). A bunch of things can be written under render that comes under state and lifecycle topic, to know refer [here](https://reactjs.org/docs/state-and-lifecycle.html).

That's all from my side, I will write next article continuing Components and how to use them with State and Props which are building blocks to learn and master React.

If there is anything I can add please let me know😊.
What is AWS Security Hub?
Tags: aws, security, cloudcomputing, tutorial
Published: 2021-12-04 16:09:02

## What is AWS [Security Hub](https://www.youtube.com/watch?v=7rtg-N-nSLQ)?
AWS [Security Hub](https://www.youtube.com/watch?v=7rtg-N-nSLQ) provides you with a comprehensive view of your security state in AWS and helps you check your environment against security industry standards and best practices.

[Security Hub](https://www.youtube.com/watch?v=7rtg-N-nSLQ) collects security data from across AWS accounts, services, and supported third-party partner products and helps you analyze your security trends and identify the highest priority security issues.

```
Here is a fully dedicated video on AWS [Security Hub](https://www.youtube.com/watch?v=7rtg-N-nSLQ)👇👇
```
[![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4ub09qxww5udxe059gxs.png)](https://www.youtube.com/watch?v=7rtg-N-nSLQ)
 
 
## Benefits of AWS [Security Hub](https://www.youtube.com/watch?v=7rtg-N-nSLQ)
- Reduced effort to collect and prioritize findings
- Automatic security checks against best practices and standards
- Consolidated view of findings across accounts and providers
- Ability to automate remediation of findings


▬▬▬▬▬▬ WANT TO LEARN MORE? ▬▬▬▬▬▬
Full Terraform tutorial ► [https://bit.ly/2GwK8V2](https://bit.ly/2GwK8V2)
DevOps Tools, like Ansible ► [https://bit.ly/3iASHuP](https://bit.ly/3iASHuP)
Docker Tutorial ► [https://bit.ly/3iAT9Jx](https://bit.ly/3iAT9Jx)
AWS Tutorial ► [https://bit.ly/3iAT9Jx](https://bit.ly/3iAT9Jx)
GCP Tutorial ► [https://bit.ly/3mwh412](https://bit.ly/3mwh412)
Jenkins Tutorials ► [https://bit.ly/3iHnfv4](https://bit.ly/3iHnfv4)
Jenkins Pipeline ► [https://bit.ly/30CJGLB](https://bit.ly/30CJGLB)
Python ► [https://bit.ly/3I7bewU](https://bit.ly/3I7bewU)
Python in just 1 video ► [https://bit.ly/3EeqGVy]
How to upload multiple images to AWS S3 in react-native App - Part 2
Tags: javascript, reactnative, mobile, aws
Published: 2021-12-04 16:04:52

In my previous article, I explained how to get multiple images using `react-native-image-crop-picker` , and in this post, I'll cover how to upload those images to the AWS S3 server.

For that I used `react-native-aws3`, this library has no native dependencies so I preferred it over others libraries.

###Install `react-native-aws3`
Please go through their [website](https://www.npmjs.com/package/react-native-aws3) to install and set IAM's policy as mentioned.

###Upload button and onPress
Now I created a simple button like this
```javascript
<Button
  onPress={onUploadClick}
  title="Upload"
/>
```
as `react-native-aws3` upload a single image to S3 at a time but I have multiple images to upload so I used `Promise.all`.
```javascript
 const uploadButtonClick = () => {
   let promises = [];
   images.map((image, i) => {
     promises.push(uploadImageToS3(image));
   });
 }
```
Here I created an empty array of promises to store each response of the upload call. Next, I am mapping images array to upload calls with a single image and `promises.push` is saving that response in promises array.

###RNS3.put
Next, I defined my `uploadImageToS3` a method like its mentioned in the example of `react-native-aws3`.
```javascript
const uploadImageToS3 = async image => {
  const options = {
    keyPrefix: "uploads/",
    bucket: "your-bucket",
    region: "us-east-1",
    accessKey: "your-access-key",
    secretKey: "your-secret-key",
    successActionStatus: 201
  }
  const file = {
    uri: `${image.path}`,
    name: image.path.substring(image.path.lastIndexOf('/') + 1), //extracting filename from image path
    type: image.mime,
  };

  return new Promise((resolve, reject) => {
    RNS3.put(file, options)
      .then(res => {
        if (res.status === 201) {
          const {postResponse} = res.body;
          resolve({
            src: postResponse.location,
          });
        } else {
          console.log('error uploading to s3', res);
        }
      })
      .catch(err => {
        console.log('error uploading to s3', err);
        reject(err);
      });
  });
};
```
This method is returning the promise of URL/location of the image as an object having value `src`.
Now I combined all promises with `Promise.all` function.
```javascript
Promise.all(promises).then(uploadedImgs => {
  console.log('Yayy, all images are uploaded successfully', uploadedImgs)
});
```
`uploadedImgs` array will look like this
```javascript
[
  {
    src: 'https://<image-url>'
  },
  {
    src: 'https://<image-url>'
  },
]
```
In the above code, I am only displaying console message but I needed this array of images to send to another API call. So you can use this array in your state or send it to the database according to your need.

That's all for today, Thanks for reading!
How to run JavaScript program in visual studio code | VSCode Terminal Not Working
Tags: javascript, programming, html, css
Published: 2021-12-04 15:57:33


In this post, I will show you how to run a javascript program in visual studio code using a code runner vscode extension. You will learn how to use VS Code terminal to run javascript code. To see output of javascript program, you need to install node js file into your computer. 

Learn how to fix node is not recognized visual studio code? and the node is not recognized as an internal or external command in the Visual studio code terminal. Also, the node is not recognized as an internal or external command in visual studio code.

**Video Tutorial:**
{% youtube bEIkw5dG-E4 %}

How to run javascript program in vscode terminal?

How to execute javascript program in visual studio code?

VSCode how to run javascript code and how to run javascript code in vscode?

How to display javascript output in VScode?

How to install node js in visual studio code?

visual studio code how to run javascript?

How to run javascript files in visual studio code terminal?

Node is not recognized as an internal or external command window 10.

How to use code runner in visual studio code?

What is Javascript code execution in a visual studio code terminal?

How to run javascript code in visual studio code using the code runner extension.

#programming #coding #webdevelopment #javascript #htmlcss #visualstudiocode #nodejs #video #100daysofcode
Optimizar wordpress
Published: 2021-12-04 15:51:00

## [Optimizar WordPress para que tu Web cargue más rápido](https://estandar.io/7-sencillos-consejos-de-mantenimiento-en-wordpress-para-mantener-su-sitio-web-rapido-y-optimizado/)


Para optimizar la velocidad de wordpress debes:

Instalar un plugin de seguridad, es recomendable el plugin WP Security Scan (WP Security Scanner).

Configurar el plugin WP Super Cache.

Aquí te dejo una guía paso a paso para saber como configurar WP Super Cache

Si quieres saber un poco más sobre el WP Super Cache, aquí te dejo una guía muy sencilla y bien explicada para configurarlo

Optimizar el plugin Google XML Sitemaps

Con este plugin fácilmente podrás generar una plantilla para poder dar a conocer a google la nueva plantilla, aquí te dejo un manual para hacerlo

Si quieres saber más sobre este plugin, aquí te dejo una guía paso a paso para configurarlo

## [Mejorar la Velocidad de tu Sitio de WordPress en 9 pasos](https://estandar.io/7-sencillos-consejos-de-mantenimiento-en-wordpress-para-mantener-su-sitio-web-rapido-y-optimizado/)

Por último, una vez que tengas la plantilla configurada, genera un XML sitemap, para ello, vuelve a donde está el plugin y selecciona en la opción “Generate Google XML Sitemaps” y pulsa el botón “Generate sitemap”.

Ya tienes tu sitemap listo, ahora solo tienes que ponerlo en tu servidor, y bien, en el caso de wordpress, te dejo un tutorial paso a paso para que tengas más facilidad a la hora de ponerlo en tu servidor.

Aquí te dejo una guía muy completa y bien explicada para configurar el plugin Google XML Sitemaps.

Para saber más sobre el plugin, aquí te dejo una guía paso a paso para saber como configurarlo

Por último, si quieres saber más sobre el plugin, aquí te dejo una guía paso a paso para saber como configurarlo.

Ya tienes tu sitemap listo, ahora solo tienes que ponerlo en tu servidor, y bien, en el caso de wordpress, te dejo un tutorial paso a paso para que tengas más facilidad a la hora de ponerlo en tu servidor.

Si te interesa saber más sobre el plugin, aquí te dejo una guía paso a paso para saber como configurarlo

Si tienes alguna duda, no dudes en dejarla en los comentarios, y si quieres compartir alguna otra guía o tutorial con nosotros no dudes en dejarlo en los comentarios, gracias por leernos.