teleren/devto huggingface dataset:
How to Destroy your Terraform Infrastructure
Published: 2022-09-20 14:37:09

Working on a project recently I was faced with the problem of how best to destroy terraform infrastructure. There are a few ways to do it, and the best way depends on what you are actually trying to do. 

Note: there are many providers that you can use with Terraform but I’ll be using AWS for these examples. The logic is the same whatever provider you are using.

## Remove configuration
One way is to simply remove the resources from the configuration (this could be blocks of code, files, or directories). Then run `terraform apply`. The Terraform language is declarative, meaning that it defines the end goal rather than the steps needed to get there. So when you apply the changes it will see that the configuration is gone and will delete the corresponding instances from AWS (or whichever provider you are using). This is best for removing only part of your terraform project.

## Terraform destroy
If you want to [destroy](https://www.terraform.io/cli/commands/destroy#command-destroy) the whole project then use `terraform destroy`. Run it in the root directory then delete the project.

Heads up - you might be tempted to just delete the project without doing `terraform destroy` first (like the method above but for the entire project). However if you do this, Terraform won’t be able to tell AWS you’ve deleted that config so the infrastructure won’t be torn down. You would have to go to the AWS console and remove the instances manually, defeating the point of having Infrastructure as Code.

## Destroy with a target
If you want to use the destroy command to tear down only _part_ of your infrastructure, then use a [target](https://learn.hashicorp.com/tutorials/terraform/resource-targeting?in=terraform/state#destroy-your-infrastructure): 

```
terraform destroy -target="aws_instance.example[0]"
```

The advantage here is that it’s easy to bring the resources back (just do `terraform apply` again). However to remove it permanently remember to delete the related config from the code! Otherwise, the next time you `terraform apply` the resources will be recreated.

## Replacing an instance
You _could_ even use this method of destroying and applying again to replace an instance (for example if the hardware is degraded).

However the recommended way to do this is by using the `-replace` option with `terraform apply`.

```
terraform apply -replace="aws_instance.example[0]"
```

I hope you found this explanation helpful, feel free to leave a comment below!
Consume Hidalgo
Published: 2022-09-20 14:20:55


# Consume Hidalgo 

> Es una plataforma para apoyar a la sociedad hidalguense, ante las dificultades económicas y de acceso a mercados que se han generado por la COVID-19, al día de hoy cuenta con 2,564 participantes inscritos de los cuales 1,878 son negocios comerciales y 686 prestadores 71 municipios del estado de Hidalgo.  
	
**[Consume Hidalgo](https://consume.hidalgo.gob.mx/)**

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ttwhn7ds2cy6g3fj496r.PNG)
How to block Screenshots in your flutter app
Tags: flutter, dart, mobile
Published: 2022-09-20 14:12:27

when building highly secured apps, it can be essential to stop the user from taking screenshots, while this is quite straightforward on Android, it gets a little bit tricky on the iOS part. I remember facing this challenge some months ago and I scanned through a couple of StackOverflow answers for hours, I was at the point of getting frustrated when I stumbled on one that was the solution for the iOS part:

**For Android:**
1. inside your mainActivity.(java/tk), import the following:

```
import io.flutter.embedding.android.FlutterFragmentActivity
import io.flutter.embedding.engine.FlutterEngine
import io.flutter.plugins.GeneratedPluginRegistrant
import android.view.WindowManager.LayoutParams
```

2. and you replace the content with:

```
class MainActivity: FlutterFragmentActivity() {
    override fun configureFlutterEngine(flutterEngine: FlutterEngine) {
        window.addFlags(LayoutParams.FLAG_SECURE)
        GeneratedPluginRegistrant.registerWith(flutterEngine)
    }
}
```

this does it for Android.


**For iOS:**

1. in your AppDelegate.swift you should create a window extension just like below:

```
  extension UIWindow {
  func makeSecure() {
      let field = UITextField()
        let view = UIView(frame: CGRect(x: 0, y: 0, width: field.frame.self.width, height: field.frame.self.height))
        field.isSecureTextEntry = true
        self.addSubview(field)
        self.layer.superlayer?.addSublayer(field.layer)
        field.layer.sublayers?.last!.addSublayer(self.layer)
        field.leftView = view
        field.leftViewMode = .always
    }
  }
```
then call the new window extension in your application function:

```
self.window.makeSecure()
```

your AppDelegate.swift should look like this:

```
import UIKit
import Flutter

@UIApplicationMain
@objc class AppDelegate: FlutterAppDelegate {
  override func application(
    _ application: UIApplication,
    didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
  ) -> Bool {
    self.window.makeSecure()
    GeneratedPluginRegistrant.register(with: self)
    return super.application(application, didFinishLaunchingWithOptions: launchOptions)
  }
}

  extension UIWindow {
  func makeSecure() {
      let field = UITextField()
      field.isSecureTextEntry = true
      self.addSubview(field)
      field.centerYAnchor.constraint(equalTo: self.centerYAnchor).isActive = true
      field.centerXAnchor.constraint(equalTo: self.centerXAnchor).isActive = true
      self.layer.superlayer?.addSublayer(field.layer)
      field.layer.sublayers?.first?.addSublayer(self.layer)
    }
  }
```


Source: [stackoverflow answer](https://stackoverflow.com/a/71108973/11948079)

thank you for reading, I hope this was helpful.
How to succeed in project management in a web agency?
Tags: beginners, project
Published: 2022-09-20 13:57:45

If you work in a web agency, project management is probably one of your most important responsibilities. I work as a project manager in a [web agency in Montpellier](https://osmova.com/) in the south of France.It can be difficult to manage a project successfully, especially when several people are involved. In this blog post, we are going to discuss some tips that will help you manage your projects more efficiently. We'll also provide you with some resources you can use to improve your skills in this area.

The first thing to remember when managing a project is that communication is key. You must be able to communicate effectively with your team members, customers and other stakeholders. Make sure everyone involved in the project knows their roles and responsibilities. Keep them updated on the progress of the project and make sure they understand your goals.


It is also important to establish a clear process for the project. This will help you track the progress of the project and identify any potential issues. Make sure you have a detailed plan of what needs to be done and when it needs to be done. Delegate tasks to your team members and make sure they understand their deadlines.


Finally, don't forget to document everything. This will help you track the project and ensure it is completed on time and on budget. Be sure to create a project management plan that includes all project information. Keep this plan up to date and share it with your team members.


By following these tips, you will be well on your way to successfully managing your web agency projects!
LinkedIn Adobe Illustrator Skill Assessment Answers
Tags: linkedin, illustrator, beginners, design
Published: 2022-09-20 13:56:17


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



LinkedIn Adobe Illustrator Assessment Answers 2022: Adobe Illustrator Skill Badge: Adobe Illustrator LinkedIn Test Answers: In this post you will get all the correct answers of [LinkedIn Adobe Illustrator quiz answers](https://www.rbtechtips.com/linkedin-adobe-illustrator-assessment-answers/) given by the experts. Get All LinkedIn Assessment Answers.
Setup jQuery on Vite
Tags: vite
Published: 2022-09-20 13:51:47

[Overview](https://dev.to/chmich/setup-vite-svelte-inertia-stimulus-bootstrap-foundation-on-rails-7-overview-1bk1)

**Prerequisites**

[Vite](https://dev.to/chmich/setup-vite-on-rails-7-f1i)

**Setup**

```
$ npm i @rollup/plugin-inject --save-dev
$ npm i jquery
```

`vite.config.js`

add the lines with the «+».

```
  import { defineConfig } from 'vite'
  import RubyPlugin from 'vite-plugin-ruby'
+ import inject from "@rollup/plugin-inject";

  export default defineConfig({
    plugins: [
+       inject({   // => that should be first under plugins array
+         $: 'jquery',
+         jQuery: 'jquery',
+       }),
      RubyPlugin(),
    ],
  })
```

Restart the Server

`frontend/entrypoints/application.js`

```
import $ from 'jquery';
window.$ = $;
```

Refresh the browser

**Testcode**

`frontend/entrypoints/application.js`

```
window.test_jquery = function() {
    $('#test-jquery').html('jQuery works!')
}
```

`app/views/layout/application.haml`

```
%button#test-jquery{onclick: 'test_jquery()'}
  Test if jQuery is working
```

**=>** Click the Button and you should see: «jQuery works!»

[Overview](https://dev.to/chmich/setup-vite-svelte-inertia-stimulus-bootstrap-foundation-on-rails-7-overview-1bk1)
'elixir' Command
Tags: elixir, programming, linux, opensource
Published: 2022-08-16 23:57:16

## Usage: elixir [options] [.exs file] [data]

General options

- -e "COMMAND" : Evaluates the given command (*)
- -h, --help : Prints this message and exits
- -r "FILE" : Requires the given files/patterns (*)
- -S SCRIPT : Finds and executes the given script in $PATH
- -pr "FILE" : Requires the given files/patterns in parallel (*)
- -pa "PATH" : Prepends the given path to Erlang code path (*)
- -pz "PATH" : Appends the given path to Erlang code path (*)
- -v / --version : Prints Elixir version and exits
- --app APP : Starts the given app and its dependencies (*)
- --erl "SWITCHES" : Switches to be passed down to Erlang (*)
- --eval "COMMAND" : Evaluates the given command, same as -e (*)
- --logger-otp-reports BOOL : Enables or disables OTP reporting
- --logger-sasl-reports BOOL : Enables or disables SASL reporting
- --no-halt : Does not halt the Erlang VM after execution
- --werl : Uses Erlang's Windows shell GUI (Windows only)

Options given after the .exs file or -- are passed down to the executed code.
Options can be passed to the Erlang runtime using $ELIXIR_ERL_OPTIONS or --erl.

Distribution options

The following options are related to node distribution.

- --cookie COOKIE : Sets a cookie for this distributed node
- --hidden : Makes a hidden node
- --name NAME : Makes and assigns a name to the distributed node
- --rpc-eval NODE "COMMAND" : Evaluates the given command on the given remote node (*)
- --sname NAME : Makes and assigns a short name to the distributed node

Release options

The following options are generally used under releases.

- --boot "FILE" : Uses the given FILE.boot to start the system
- --boot-var VAR "VALUE" : Makes $VAR available as VALUE to FILE.boot (*)
- --erl-config "FILE" : Loads configuration in FILE.config written in Erlang (*)
- --pipe-to "PIPEDIR" "LOGDIR" : Starts the Erlang VM as a named PIPEDIR and LOGDIR
- --vm-args "FILE" : Passes the contents in file as arguments to the VM

--pipe-to starts Elixir detached from console (Unix-like only).
It will attempt to create PIPEDIR and LOGDIR if they don't exist.
See run_erl to learn more. To reattach, run: to_erl PIPEDIR.

** Options marked with (*) can be given more than once.
How to Deploy Vue Frontend
Tags: vue, googlecloud
Published: 2022-09-20 13:26:33

This is the part of [Easy Way to Separate Java Backend and Vue Frontend](https://dev.to/zhng1456/easy-way-to-separate-java-backend-and-vue-frontend-3f5n).

## Install Google Cloud Storage Client

```
npm install @google-cloud/storage
```

## Google Cloud Storage Authentication
(1)Open IAM & Admin of Google cloud console

![IAM & Admin](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7wbc8rp9r5tkomuq3uxx.png)
(2)Click **Service Accounts** and create services account
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s9yrck2fgebepazpkccq.png)
Choose the role
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e7wg6guawuuj44suzpkt.png)
(3)Manage keys of new account
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r7g775vh8z2z30zjw297.png)
(4)Create new key and browser will download the json key.
I name the key file "google-secret.json".
Remember add the key file to .gitignore
```
target
.DS_Store
.idea
*.iml
athena.js
athena.css
admin.js
admin.css

.vscode/*
.factorypath
.project
.classpath
*.prefs

node_modules
package-lock.json
dist

google-secret.json
```
## Write Script
```
const {Storage} = require('@google-cloud/storage');

const fileName = 'app';
const bucketName = 'webpack-frontend';
const storage = new Storage({
  keyFilename: './google-secret.json',
  projectId: 'crested-polygon-362000'
});
const projectBucket = storage.bucket(bucketName);

const uploadFiles = target => {
  return projectBucket.upload(`./dist/static/${target}`);
};

const deploy = (fn, arr = []) => {
  if (arr.length === 0) {
    return;
  }
  let ele = arr.shift();
  fn(ele).then(data => {
    console.log(data);
    deploy(fn, arr);
  }).catch(console.log);
};

deploy(uploadFiles, [`js/${fileName}.js`, `css/${fileName}.css`])
```
The script uploads dist/static/js/app.js and dist/static/css/css.js to Google Cloud Storage.
Run the following command to run the script
```
node deploy.js
```
Confirm the logs.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/woslw9aiuw23zg9h1kgc.png)
## Config npm Command
Config the deploy script in package.json
```
  "scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "lint": "eslint --ext .js,.vue src",
    "build": "node build/build.js",
    "deploy": "node deploy.js"
  },
```
Then you can easily deploy vue project.
```
npm run build
npm run deploy
```
How to avoid callbacks using services.
Tags: rails, refactoring, callback, ruby
Published: 2022-09-20 13:23:17


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

Often programmers abuse callbacks, not fully understanding that in the end their code will be confusing and non-obvious. There are several ways to avoid using callbacks. Today I will tell you how to do this using services.

Lets see on a code:

```ruby
class User < ApplicationController
  def create
    @user = User.new(user_params)
    if @user.save
      redirect_to root_path, notice: "User created!"
    else   
      render :new, error: 'Failed to create user!'
    end
  end
end
class User < ApplicationRecord
  before_create :populate_serial_number
  private
  def populate_serial_number
    self.serial_number ||= SecureRandom.uuid
  end
end
```
What is the problem with this code? We get a non-obvious (magical) action. We do not pass any data about the serial number in the parameters, and we do not explicitly set this value anywhere. This happens automatically with a callback.

Let’s implement the same thing but using a service.

```ruby
class CreateUser
  def self.call(params)
    @user = User.new(params)
    
    populate_serial_number(@user)
    # Other actions for the user
    
    user.save!
  end
  def self.populate_serial_number(user)
    user.serial_number ||= SecureRandom.uuid
  end
end
class User < ApplicationRecord
end
class User < ApplicationController
  def create
    @user = CreateUser.call(user_params)
    if @user
      redirect_to root_path, notice: "User created!"
    else   
      render :new, error: 'Failed to create user!'
    end
  end
  def user_params
    ...
  end
end
```
What advantages does this approach give us?

- Suppose we have users can be created from the Admin panel and through the API. Depending on the method of creation, we may have a different set of actions performed with the user. It is very convenient to make two separate services for creating a user. For example: Admin::CreateUser and Api::CreateUser
- Such services are easy to test.
- They are easy to expand.
- The code becomes much clearer and more predictable.
test
Published: 2022-09-20 13:17:48

**ash basjkb kjas****ash basjkb kjas****ash basjkb kjas****ash basjkb kjas****ash basjkb kjas****ash basjkb kjas****ash sbhsbcjasbjasbjkbasjkabsjkbasjkbsabasjkb kjas****ash basjkb kjas****ash basjkb kjas****ash basjkb kjas****ash basjkb kjas****ash basjkb kjas****ash basjkb kjas****ash basjkb kjas****ash basjkb kjas****ash basjkb kjas****ash basjkb kjas****ash basjkb kjas****ash basjkb kjas****ash basjkb kjas****ash basjkb kjas****ash basjkb kjas****ash basjkb kjas****ash basjkb kjas****ash basjkb kjas****ash basjkb kjas****ash basjkb kjas****ash basjkb kjas****ash basjkb kjas****ash basjkb kjas****ash basjkb kjas****ash basjkb kjas****ash basjkb kjas****ash basjkb kjas****ash basjkb kjas****ash basjkb kjas****ash basjkb kjas****ash basjkb kjas****ash basjkb kjas****ash basjkb kjas****ash basjkb kjas****ash basjkb kjas****ash basjkb kjas****ash basjkb kjas****ash basjkb kjas****ash basjkb kjas****ash basjkb kjas****ash basjkb kjas****ash basjkb kjas****ash basjkb kjas****ash basjkb kjas****ash basjkb kjas****ash basjkb kjas****ash basjkb kjas****ash basjkb kjas****ash basjkb kjas****ash basjkb kjas****ash basjkb kjas****ash basjkb kjas****ash basjkb kjas****ash basjkb kjas****ash basjkb kjas****ash basjkb kjas****ash basjkb kjas****ash basjkb kjas****ash basjkb kjas****ash basjkb kjas****ash basjkb kjas****ash basjkb kjas****ash basjkb kjas****ash basjkb kjas****ash basjkb kjas****ash basjkb kjas****ash basjkb kjas****ash basjkb kjas****ash basjkb kjas****ash basjkb kjas****ash basjkb kjas****ash basjkb kjas****ash basjkb kjas****ash basjkb kjas****ash basjkb kjas****ash basjkb kjas****ash basjkb kjas****ash basjkb kjas****ash basjkb kjas****ash basjkb kjas****ash basjkb kjas****ash basjkb kjas****as]
test
Published: 2022-09-20 13:16:25

**ash basjkb kjas****ash basjkb kjas****ash basjkb kjas****ash basjkb kjas****ash basjkb kjas****ash basjkb kjas****ash sbhsbcjasbjasbjkbasjkabsjkbasjkbsabasjkb kjas****ash basjkb kjas****ash basjkb kjas****ash basjkb kjas****ash basjkb kjas****ash basjkb kjas****ash basjkb kjas****ash basjkb kjas****ash basjkb kjas****ash basjkb kjas****ash basjkb kjas****ash basjkb kjas****ash basjkb kjas****ash basjkb kjas****ash basjkb kjas****ash basjkb kjas****ash basjkb kjas****ash basjkb kjas****ash basjkb kjas****ash basjkb kjas****ash basjkb kjas****ash basjkb kjas****ash basjkb kjas****ash basjkb kjas****ash basjkb kjas****ash basjkb kjas****ash basjkb kjas****ash basjkb kjas****ash basjkb kjas****ash basjkb kjas****ash basjkb kjas****ash basjkb kjas****ash basjkb kjas****ash basjkb kjas****ash basjkb kjas****ash basjkb kjas****ash basjkb kjas****ash basjkb kjas****ash basjkb kjas****ash basjkb kjas****ash basjkb kjas****ash basjkb kjas****ash basjkb kjas****ash basjkb kjas****ash basjkb kjas****ash basjkb kjas****ash basjkb kjas****ash basjkb kjas****ash basjkb kjas****ash basjkb kjas****ash basjkb kjas****ash basjkb kjas****ash basjkb kjas****ash basjkb kjas****ash basjkb kjas****ash basjkb kjas****ash basjkb kjas****ash basjkb kjas****ash basjkb kjas****ash basjkb kjas****ash basjkb kjas****ash basjkb kjas****ash basjkb kjas****ash basjkb kjas****ash basjkb kjas****ash basjkb kjas****ash basjkb kjas****ash basjkb kjas****ash basjkb kjas****ash basjkb kjas****ash basjkb kjas****ash basjkb kjas****ash basjkb kjas****ash basjkb kjas****ash basjkb kjas****ash basjkb kjas****ash basjkb kjas****ash basjkb kjas****ash basjkb kjas****ash basjkb kjas****ash basjkb kjas****ash basjkb kjas****ash basjkb kjas****ash basjkb kjas****ash basjkb kjas****ash basjkb kjas****ash basjkb kjas****ash basjkb kjas****ash basjkb kjas****ash basjkb kjas****ash basjkb kjas****ash basjkb kjas****ash basjkb kjas****ash basjkb kjas****ash basjkb kjas****ash basjkb kjas****ash basjkb kjas****ash basjkb kjas****ash basjkb kjas****ash basjkb kjas****ash basjkb kjas****ash basjkb kjas****ash basjkb kjas****ash basjkb kjas****ash basjkb kjas****ash basjkb kjas****ash basjkb kjas****ash basjkb kjas****ash basjkb kjas****ash basjkb kjas****ash basjkb kjas**
useState in React
Tags: beginners, programming, react, tutorial
Published: 2022-09-07 04:51:42

## What is a State?

The state is an instance of React Component Class can be defined as an object of a set of observable properties that control the behavior of the component. In other words, the State of a component is an object that holds some information that may change over the lifetime of the component. For example, let us think of the clock that we created in this article, we were calling the render() method every second explicitly, but React provides a better way to achieve the same result and that is by using State, storing the value of time as a member of the component’s state.

**useState is a React Hook that lets you add a state variable to your component.**

## How to import useState?

![](https://cdn-images-1.medium.com/max/2000/0*nvpNK7pN3Rn7A6r7.png)

To add a state variable, import useState from React at the top of the file.

## Adding State to a component

We use the following convention to name the state variables:
***const[something, setSomething] = useState(initial state)***

![](https://cdn-images-1.medium.com/max/2000/0*MgWoWchr3ST_2BSj.png)

This is referred to as **array destructuring**.
Here :

 1. Count represents the **current state of the state variable**. It initially takes the initial state that is provided in the useState.

 2. **setCount** represents the function that changes the state.

The following code gives an example of how the set function works. We call the state function and update it with the next state.

![](https://cdn-images-1.medium.com/max/2000/0*sy-aGI2jSQwi0zOT.png)

Here, the initial state of the count was zero. By creating a function **“incrementing”** we update the state of the state variable and set the count as count+1.

## Rendering a State:

A change in state triggers a render. Rendering takes place in the following ways:

 1. Reacts calls the component

 2. In the initial render, React calls the root component.

 3. After the initial render, for the subsequent renders, React calls the function component that resulted in a state change/update which triggered the render.

The same happens in the **decrementing** function.

![](https://cdn-images-1.medium.com/max/2000/0*IQqaoqOtxHZH111I.png)

Everytime the button named decrement will be clicked, **the counter will decrease by 1.**

![](https://cdn-images-1.medium.com/max/2000/0*hf-OivFdXL3ORJW8.png)

Lastly in the return, we create **two buttons** and associate the **onClick event handler** with the state functions.

## Output

![](https://cdn-images-1.medium.com/max/2000/0*b6bmAMuT0ExdDwWH.png)

![](https://cdn-images-1.medium.com/max/2000/0*j-D6vcvpZC1W_aJW.png)

The link to the entire code is given below. Check it out!
[https://codesandbox.io/s/counter-state-wkote0](https://codesandbox.io/s/counter-state-wkote0)