teleren/devto huggingface dataset:
Instalando Tomcat
Tags: apex, oracle, spanish
Published: 2021-02-16 22:14:04

Para hacer más interesante este ejercicio, vamos a crear nuestro propio archivo `Vagrantfile` para crear la VM que tendrá instalado Apache Tomcat. Usaremos como base una image de Ubuntu 18.04 (aunque puede ser otra versión o distribución diferente, deberán cambiar el archivo Vagrantfile de manera acorde).

Para crear una VM con vagrant lo primero será crear un nuevo directorio y allí crear el archivo Vagrantfile. En mi caso particular aproveché el directorio `~/vagrant` que ya existe y creé un nuevo directorio `apache-server`.

Veamos el archivo completo
```ruby
# -*- mode: ruby -*-
# vi: set ft=ruby :

Vagrant.configure("2") do |config|
  NAME = "ubuntu-apache"
  config.vm.box = "ubuntu/bionic64"
  config.vm.define NAME
  # Provider-specific configuration
  config.vm.provider "virtualbox" do |v|
    v.memory = 2048
    v.name = NAME
  end

  config.vm.hostname = "localhost"

  config.vm.network "forwarded_port", guest: 8080, host: 8080
  config.vm.network "private_network", ip: "192.168.56.2", virtualbox__inet: "vboxnet0"
  config.vm.provision "shell", path: "scripts/install.sh"
end
```
Por supuesto, este archivo es mucho más sencillo que el que encuentran en los directorios de Oracle, pero es que la instalación es mucho más simple. Básicamente estamos definiendo un archivo `Vargrantfile` que creará una VM basada en Ubuntu Bionic Beaver, con 2GB de memoria RAM, con el nombre "ubuntu-apache" y con una red interna configurada tal como se hizo en la instalación de la VM para Oracle XE, solo que en este caso le asigamos la IP 192.168.56.2, además de hacer un redireccionamiento al puerto 8080 (estándar de Tomcat)

Aparte también creamos un nuevo directorio llamado `scripts` y crearemos dentro un archivo `install.sh`, que tendrá los comando para instalar los paquetes que necesitaremos en la VM.
```sh
#/bin/bash
echo 'INSTALLER: Started up'
sudo apt-get update -y
sudo apt-get upgrade -y
sudo apt-get -y install tomcat8 tomcat8-admin unzip
```
Una vez que esté listo el archivo volvemos a `~/vagrant/apache-server` y ejecutamos el comando `vagrant up`. Si es la primera vez que descargamos la imagen entonces el proceso puede tomar algo de tiempo. Al finalizar podemos ingresar a la VM usando el comando `vagrant ssh`. 

También podemos verificar si Tomcat está funcionando adecuadamente ingresando a la [http://localhost:8080](http://localhost:8080)

![Página inicio Tomcat](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x5x9a881syfwz3xc23wb.png)

Al finalizar deberíamos poder usar el comando `ping` (ingresando previamente a la VM) para verificar que ambas máquinas pueden responderse mutuamente.
![Verificar por PING](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/50m52mwxvt2inpxkwksb.png)


**Actualización**: Apenas me estoy dando cuenta que utilicé el nombre "apache" en vez de "tomcat" en todas las referencias de la VM. Esto realmente no tiene importante a nivel técnico, pero es importante que las nomenclaturas que usemos para nuestros servicios se correspondan con lo que en verdad están sirviendo.
Configurando la red
Tags: apex, oracle, spanish
Published: 2021-02-16 21:31:24

En la publicación anterior les había indicado que hacía falta solo instalar APEX a la instalación de XE que ya teníamos, sin embargo nos falta un paso más, este tiene más que ver con la configuración de la red de las VM.

Por defecto, las VMs creadas con Vagrant/VirtualBox se configuran con una interface de red que hace un NAT entre el VM y el equipo anfitrión (obviamente esta es una explicación extremadamente simplista, pueden ver más detalles [aquí](https://www.virtualbox.org/manual/ch06.html)) y esto hace que la VM tenga acceso a internet pero no tiene acceso a otras VM dentro del mismo anfitrión. Como en nuestro caso Tomcat/ORDS estarán desplegados en otro servidor entonces debemos hacer la configuración necesaria tanto en VirtualBox como en los archivos Vagrantfile de nuestas VMs.

Lo primero será configurar una nueva red en VirtualBox, para esto abran la aplicación e ingresen a `File -> Host Network Manager`
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i86izpt4wf3pvwtlb6z2.png)
Allí presionaremos el botón `Create` y colocaremos los datos de la red que queremos crear. Por lo general la configuración por defecto es suficiente, en mi caso cree una nueva red llamada `vboxnet0` con una red `192.168.56.1/24` y con DHCP habilitado.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jmkjmp95xvvnt98oqawg.png)

Al finalizar simplemente hagan clic en `Close`. Ya con esto tenemos una red configurada para ser utilizada por nuestras VMs; ahora toca hacer el cambio en los archivos `Vagrantfile` para que hagan uso de la misma. Para ello utilizaremos el editor de texto de preferencia y buscaremos la siguiente sección
```ruby
  # Oracle port forwarding
  config.vm.network "forwarded_port", guest: VM_LISTENER_PORT, host: VM_LISTENER_PORT
  config.vm.network "forwarded_port", guest: VM_EM_EXPRESS_PORT, host: VM_EM_EXPRESS_PORT
```
Y justo al final agregaremos `config.vm.network "private_network", ip: "192.168.56.3", virtualbox__inet: "vboxnet0"` para que quede
```ruby
  # Oracle port forwarding
  config.vm.network "forwarded_port", guest: VM_LISTENER_PORT, host: VM_LISTENER_PORT
  config.vm.network "forwarded_port", guest: VM_EM_EXPRESS_PORT, host: VM_EM_EXPRESS_PORT
  config.vm.network "private_network", ip: "192.168.56.3", virtualbox__inet: "vboxnet0"
```
La IP seleccionada puede ser cualquiera que esté dentro del rango de la red que creamos en Virtualbox. Ya con este cambio procederemos a reiniciar la VM con el comando `vagrant reload`. Al reiniciar la VM debería seguir funcionando como lo estaba antes del cambio, solo que ahora tendrá una nueva interface de red que le permitirá conectarse con otras VM en el equipo anfitrión.

En la siguiente parte de esta serie continuaremos con la creación de la VM para instalar Tomcat.
Updating React Native projects for M1 Mac development
Tags: react, reactnative
Published: 2021-02-16 22:11:43

In this post I'll walk through how to get the default React Native project to build in Xcode 12.4 on Apple silicon. The steps are the same as the ones I followed to update my app, but I'll use the default project to keep things relevant. You can follow along to update your own project, but keep in mind that different modules you've added and their pods (i.e. Firebase) might not have yet added support for Apple silicon.

First, let's get a basic project to work with.
```sh
npx react-native init rntest
```

Some common errors you might run into without any further changes are
```
/Users/mngyuan/git/personal/rntest/ios/rntest.xcodeproj The linked library 'libPods-rntest.a' is missing one or more architectures required by this target: arm64.
```
```
Undefined symbol: protocol descriptor for Swift.ExpressibleByFloatLiteral
...
```
```
ld: in /Users/mngyuan/git/personal/rntest/ios/Pods/FirebaseAnalytics/Frameworks/FIRAnalyticsConnector.framework/FIRAnalyticsConnector(FIRAnalyticsConnector_e321ed8e3db06efc9803f6c008e67a34.o), building for iOS Simulator, but linking in object file built for iOS, file '/Users/mngyuan/git/personal/rntest/ios/Pods/FirebaseAnalytics/Frameworks/FIRAnalyticsConnector.framework/FIRAnalyticsConnector' for architecture arm64
clang: error: linker command failed with exit code 1 (use -v to see invocation)
```

The problem is that we're building for the x86_64 iOS simulator, but building and linking with arm64 libraries and code. We have some settings to change. First, open Xcode
```sh
cd rntest
open ios/rntest.xcworkspace
# or xed -b ios
```

We're going to exclude the arm64 architecture from our build. Under Targets, select your project -> Build Settings -> Excluded Architectures, and add Any IOS Simulator SDK : arm64 for both Debug and Release. Do the same for your Pods project.

![Screen Shot 2021-02-16 at 10.08.25 PM](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4j2e9bnvlbwdm9hufj61.png)

![Screen Shot 2021-02-16 at 10.08.30 PM](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2fi7118gvdjk0oo4aker.png)  

If your project for some reason has `VALID_ARCHS` set, you'll want to remove that key from your project as well (and the Pods project) at this stage.

We're very close to done, but the version of Flipper installed in your pods is likely not new enough to include the fixes for M1 macs. Open `ios/Podfile` and apply the following

```diff
- use_flipper!
+ use_flipper!({ 'Flipper' => '0.75.0' })
```

And update your Pods
```
cd ios/
# optionally reinstall all your Pods if you're still having issues
# pod deintegrate
pod update
```

If you performed a build which failed, you might want to clear DerivedData like so
```
rm -rf ~/Library/Developer/Xcode/DerivedData/
```

Now, perform a clean build by clearing your build folder (Cmd+Shift+K) and building (Cmd+R).

Everything should work now! If you're still having problems they may be related to a specific Pod which doesn't play nice with the M1 yet.
No Such Module Found (M1 Macbook Pro Solution)
Tags: swift, ios, xcode, mac
Published: 2021-02-16 22:05:48

---
title: No Such Module Found (M1 Macbook Pro Solution)
published: true
description: 
tags: #swift #ios #xcode #mac
//cover_image: https://direct_url_to_image.jpg
---

<!-- wp:paragraph -->
<p>Recently I have been working on a new project with my new M1 Macbook Pro. In this project I needed to use third party libraries such as <strong>FBSDKCoreKit</strong> (Facebook) so the user could sign in with their Facebook account. The problem I ran into was that no matter what I did the <a href="https://cocoapods.org/">Cocoapods</a> I loaded into my project would not run. Xcode would give me error messages such as "<strong>No such module found</strong>" or "<strong>module 'FBSDKCoreKit' not found</strong>". </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>After hours of googling and looking at Github issues on the topic, I found the solution. If you are running into this problem on a M1 Mac you need to open Xcode using <strong>Rosetta</strong>. What is <strong>Rosetta</strong>? Without getting too technical <strong>Rosetta</strong> allows the new M1 Mac's to run x86 architecture apps. For a deeper dive into Rosetta check out the link <a href="https://www.computerworld.com/article/3597949/everything-you-need-to-know-about-rosetta-2-on-apple-silicon-macs.html">here</a>. If you need to install Rosetta 2 on your M1 Mac click on this link <a href="https://osxdaily.com/2020/12/04/how-install-rosetta-2-apple-silicon-mac/">here</a> and follow the tutorial.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Now to fix this issue we need to go into our <strong>Finder</strong> &gt; <strong>Applications</strong> <strong>&gt;</strong> and right click (command ⌘ + click) on Xcode. Then we need to select "<strong>Get Info</strong>"</p>
<!-- /wp:paragraph -->

<!-- wp:image {"align":"center","id":1533,"sizeSlug":"large","linkDestination":"none"} -->
<div class="wp-block-image"><figure class="aligncenter size-large"><img src="https://swifttom.com/wp-content/uploads/2021/02/Screen-Shot-2021-02-16-at-9.21.05-AM.png" alt="" class="wp-image-1533"/></figure></div>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>Once we have the <strong>"Get Info</strong>" window opened, we then need to click on "<strong>Open using Rosetta</strong>"</p>
<!-- /wp:paragraph -->

<!-- wp:image {"align":"center","id":1535,"sizeSlug":"large","linkDestination":"none"} -->
<div class="wp-block-image"><figure class="aligncenter size-large"><img src="https://swifttom.com/wp-content/uploads/2021/02/Screen-Shot-2021-02-16-at-9.23.02-AM.png" alt="" class="wp-image-1535"/></figure></div>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>Now if we relaunch our Xcode and build our project we shouldn't see anymore errors like "<strong>Module not Found</strong>". I hope this helps save you some time and headaches.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Thanks for reading. Happy Coding!</p>
<!-- /wp:paragraph -->
100 Bytes Of Wisdom: Day 3
Tags: career, journey, advice
Published: 2021-02-16 21:56:54

---
title: 100 Bytes Of Wisdom: Day 3
published: true
description: Bytes of Wisdom is a new project by Sam Jarman that brings together snippets of advice for software engineers
tags: career, journey, advice
//cover_image: https://direct_url_to_image.jpg
---

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6x0j7oveuk4smxgaiw5m.png)

Be careful with workarounds. Too many times have I seen "oh we'll just add this thing and we'll work around it later" only in a few months time hear "well, we have this thing we can use now".  It's not really a bad thing, but it's important to be honest with yourself and your team, and thoughtful about your architecture.

Heads up: As with any terse bit of advice, there will be exceptions of course, and subtleties and nuance that can't possibly be captured in a Byte of Wisdom. This has been what I've experienced, I'd love to hear yours in the comments too!

You can catch up with all the other bytes at [BytesOfWisdom.com](http://bytesofwisdom.com/)
Switch off auto formatting in Visual Studio 2019
Tags: visualstudio, visualstudio2019, microsoftvisualstudio
Published: 2021-03-16 22:17:56

---
title: Switch off auto formatting in Visual Studio 2019
published: true
date: 2021-02-16 21:51:19 UTC
canonical_url: https://www.beneathabstraction.com/post/switchoffautoformating/
series: New in Visual Studio 2019
description: Article about a new feature called Code Cleanup in Microsoft visual studio 2019
tags: VisualStudio, VisualStudio2019, MicrosoftVisualStudio
---

If you have landed here searching how to switch off auto formatting of code files in Visual Studio, you are either a code purist who does not like the formatting the IDE is performing or you are like me editing a large auto-generated class file (due to unfortunate situations) and Visual studio hangs or crashes on you every time you do a small change. The good news is there is an option in the IDE to switch feature off.

**Tools > Options > Basic > Advanced > Editor Help Section > Pretty listing (reformatting)of code**

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0oek78y9ydu2hdpzl5k3.jpg)
Tip to get selectors to use in javascript
Tags: javascript, html, webdev
Published: 2021-02-16 21:47:33

Guys, this is a simple tip to get the selector very easily. The browser inspection copy function.
 
Well, sometimes that functionality is very useful if you are handling a lot of HTML injections from these new javascript frameworks. Is expected that you do not need this, but someday, maybe this helps you save a little time.

Just inspect the code, use the right-click in your tag element and select the **copy** option on the menu, and then choose **copy selector** or **copy js path**. (Same as the image example)

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

Ex:
`document.querySelector("#root > div > div.rightPanel > div.presentMe > div.name")`

NOTE.1: Most of the time you should reduce the size of the selector. (Depends on the situation, analyze pls)

Ex:
`document.querySelector("rightPanel div.name")`

That is it :D! You got the selector.
Thanks, Vinicius Tartari for sharing this knowledge with me :)
Build a Firefox Extension from Scratch that integrates with Node.js
Tags: vscode, node, programming
Published: 2021-02-16 21:34:33

---
title: Build a Firefox Extension from Scratch that integrates with Node.js 
published: true
description: Build a Firefox extension from scratch using JavaScript
tags: vscode,nodejs,beginner,programming
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yqkaodtttbq28xxkusbc.png
---

Hello everyone, 

I've recently built an API using Node.js that receives data from a Firefox extension that automatically posts the title & URL of your currently selected Firefox tab and sends it to Twitch chat using Node.js. Today, you'll find part 2, which shows you how I built the Firefox extension. We'll start with building a basic Firefox extension and then create an extension that integrates with our Node.js application. 

I thought that I'd share it in case you are interested in a easy to learn tutorial that you can go through at your own pace. With the mini-series, I've taken the approach of building the app over a set of videos that incorporate the skills to be a effective with Node.js, using external and internal libraries, and using JavaScript to create a Firefox extension.  

**Part 2 - Build a Firefox Extension from Scratch that integrates with Node.js**

Video (19 mins)
[Source code](https://github.com/mbcrump/nodefirefoxtwitch/tree/main/firefoxv1)

{% youtube WiLu-2GbkFg %}

**Part 1 - Build the server using Node.js**

Video (22 mins)
[Source code](https://github.com/mbcrump/nodefirefoxtwitch/tree/main/nodev1)

{% youtube DTJ49J4geQg %}

Conclusion

Stay tuned for [future streams](https://twitch.tv/mbcrump) as we build out additional functionality of this apps or you can watch the condensed version by subscribing to my [YouTube](https://youtube.com/mbcrump). 

Stay connected with me on social platforms for daily software development news.

-[Twitter](https://twitter.com/intent/follow?screen_name=mbcrump) | [Twitch](https://twitch.tv/mbcrump) | [Instagram](https://instagram.com/mbcrump) | [YouTube](https://youtube.com/mbcrump) | [GitHub](https://github.com/mbcrump) | [Website](https://www.michaelcrump.net)
Great SVG Resource for your next Web App
Tags: webdev, productivity
Published: 2021-02-16 21:33:41

I found myself working on a React app the other day and needing to add some style and interest with images. I am not a designer so any help I can get in making a web app look professional is greatly appreciated. I decided since the web app should be responsive I would use SVG images. [SVG (or Scaleable Vector Graphics)](https://en.wikipedia.org/wiki/Scalable_Vector_Graphics) is an XML-based vector image format for 2D images.

Using them in a React app is fairly easy:

```javascript
import React, { Component } from "react";
import example from '../assets/img/example.svg';
import './example.css';

class Example extends Component {
    render() {
      return (
        <div>
          <div className="img-part" >
            <img src={example} alt="example" />
          </div>
        </div>
      );
    }
  }
  
  export default Example;
```

Advantages to using SVG images are:

1. They rescale perfectly as a user resizes the application. 
2. Since SVG is XML-based it is a good candidate for lossless data compression algorithms which can mean much smaller file sizes for your images.
3. Since SVG is XML-based the image file is directly editable and is also easily edited by vector image programs such as [Inkscape](https://inkscape.org).

In my search for a good set of SVG images I came across [unDraw](undraw.co). Undraw is a set of SVG images from designers that wish to contribute to the open source community. I was very impressed with the beauty, style, and huge selection of SVG images. An example of one of the images is the cover photo of this blog post. 

One of the unique things about this set of SVG images is that you can adjust the color of the images as seen here: ![unDraw color chooser](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w3j9e3dqgnul47naqteq.png)

unDraw also includes a very good keyword search tool which makes it easy to find images that fit with the subject matter of your app: ![unDraw image search](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7hgfxp4i051p8w5hhjjb.png)

The [license for unDraw](https://undraw.co/license) is very permissive as the TLDR; is 
> you can use the illustrations in any project, commercial or personal without attribution or any costs. Just don’t try to replicate unDraw, redistribute in packs the illustrations or create integrations for it.
3 Organic Ways to Combat Anxiety Issues Instantly
Tags: anxiety, combat
Published: 2021-02-16 21:27:49

No one can ignore the importance of natural ways to fight stress. No matter if you are anxious because of workload or relationship issues, you can heal 10x faster by following some experts recommended tricks and tips. Fortunately in this post, we are going to share natural ways to combat unwanted stressful situations. If you are looking for natural stress buster then you are in the right place. Let’s check out the organic ways to combat stress and live a healthy life.

Regular Exercise

When it comes to eliminating stress levels, nothing can benefit you more than exercise. Make sure to exercise on a regular basis especially when you going through a tough phase of life. This is because your exercise session will divert your thought process from negative elements to progressive thinking. This if you want to stay active and happy no matter how tough is the situation then you should consume some time in an exercise session. If not you will defiantly miss an organic way to combat stress without visiting a health professional or acquiring assistance from anyone.

Read Inspirational Stories

Be it financial stress, personal issue, or family matter, if you really want to fight stress in a natural manner then you should devote some time to story reading. Try to search for top seller inspiration stories of different backgrounds people to live a successful life. Further, you can also read leadership blogs to learn tricks and tips that empower leaders to take tough decisions in life. By doing this you can strengthen your thought process as well as learn to move on strongly in the tough situation of your life without depending on anyone.

Keep a Pet

Believe it or not, by keeping a pet in your house you can avoid stress effortlessly. According to a recent life hack magazine, it is revealed that people who keep a pet at home never overwhelmed with stress. If you want to control your stress level naturally then you should bring a pet at home. By having an emotional support <a href="https://www.getyourpetcertified.org/">Dog Certificate</a> at home you can overcome stress instantly with your lovely pet in various ways. From morning walks to swimming and a long drive, you can stay with your favorite pet every time when nobody is with you. So ensure to spend some time with your pets to avoid stress in an organic manner like never before.
Understanding Docker: part 31 – Volumes
Tags: docker, devops, beginners, cloud
Published: 2021-02-16 21:19:21

---
title: Understanding Docker: part 31 – Volumes
published: true
description: Serie of sketchnotes about Docker. Explaining in a visual way Docker principles.
tags: Docker, DevOps, beginners, Cloud
series: Understanding Docker in sketchnotes
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/74natm8gxronya1e029w.jpeg
---

Understanding Docker can be difficult or time-consuming. In order to spread knowledge about Cloud technologies I started to create sketchnotes about Docker. I think it could be a good way, more visual, to explain Docker (and other technologies like Kubernetes and Istio).

We continue the series of Docker sketchnotes with a focus about volumes.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/74natm8gxronya1e029w.jpeg)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/euuj9r7l4yd9brrl1tyh.jpeg)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/qlh3attzhtixtf4el745.jpeg)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/8x3nvw4n67y3ief433y8.jpeg)


As usual, if you like theses sketchnotes, you can follow me, and tell me what do you think. I will publish others sketchs shortly :-).

If you are interested, I published all the sketchnotes on Docker (and new ones!) to make a "book" of 93 pages: ["Understanding Docker in a visual way"](https://gumroad.com/aurelievache#YTLzM).