teleren/devto huggingface dataset:
Pensamiento 1: Proyecto 2
Published: 2021-10-12 17:00:53

No he escrito nada sobre el proyecto 2, más que el progreso ha sido lento, debido a que el semestre se está acumulando.

Como problema general, creo que utilizar un Listener para esta parte dificulta mucho el proceso de construcción de reglas. Cuando se necesita un acceso "secuencial" para algunas, el proceso se ve dificultado. Por ejemplo para la producción B1||B2, primero se genera el código de B1, luego un label, y luego el código de B2, pero con un Visitor es algo difícil de implementar ya que primero saldran los nodos de B1 y B2 de ser visitados, no se puede hacer algo como: primero sale B1, luego se imprime la label, luego sale B2.
Test for Forem issue #10335
Published: 2021-10-12 16:27:08

```
console.log("Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum
```
IBM Hacktoberfest Workshops!
Published: 2021-10-12 16:13:44

#Welcome back to Tutorial Tuesday!

In honor of my absolute FAVORITE time of year, **Hacktoberfest**, this week I'll share with you a list of my personal Hacktoberfest Workshops that I'll be running this month. My goal is to get you comfortable with Open Source.
**I hope to see you all there! Happy Hacking!**


###[[HACKTOBERFEST] IBM Code Engine 101 & 201 Workshops](https://www.crowdcast.io/e/ibm-code-engine) 
(TOMORROW & THURS)
**10/13 & 10/14 @ 2pm PT / 4pm CT / 5pm ET**
[**Register Here**](https://www.crowdcast.io/e/ibm-code-engine)
![IBM Code Engine 101 & 201 Crowdcast Event](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dkahpp1qfnvnnsp2bt4w.png)

&nbsp; 

###[[HACKTOBERFEST] Enable Flawless Logistics with IBM Code Engine x SiB Solutions](https://www.crowdcast.io/e/ibm-ce-sib) 
(NEXT WEEK)
**10/20 & 10/21 @ 9am PT / 11am CT / 12pm ET**
[**Register Here**](https://www.crowdcast.io/e/ibm-ce-sib)
![IBM x SiB Solutions Code Engine Crowdcast Event](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h39k52aqocruwjsaljqi.png)

&nbsp; 

###[[HACKTOBERFEST] Add Google/Facebook OAuth to a React App & Deploy to OpenShift](https://www.crowdcast.io/e/appid-openshift)
**10/27@ 3:30pm PT / 5:30pm CT / 6:30pm ET**
[**Register Here**](https://www.crowdcast.io/e/appid-openshift)
![React App w Google/Facebook OAuth on OpenShift Crowdcast Event](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7h5wigj6pgs9u4jmhi9g.png)

&nbsp; 

##NOW GET OUT THERE AND HACK TOGETHER SOMETHING AMAZING!

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/18jfnp4tbjwyygexin2z.gif)

**Connect w Me!**
https://linktr.ee/jritten
JavaScript Game Dev | Sprite Animations with Keyboard Input and a Halloween Theme

Tags: gamedev, tutorial, javascript
Published: 2021-10-12 16:03:45

In this exciting tutorial we're going to learn how to animate using a series of images on a html canvas for a game. The code that we will write is going to be super clean and well architected. No Game development frameworks were used in this tutorial!

Our player will have the following animations: idle, walk, run, jump and a death animation.

{% youtube yTlmOpW6kOc %}
Testes com Jest e RTL no React
Tags: javascript, react, test
Published: 2021-10-12 16:02:40

Tipos de teste:

* End to End (E2E)
* Integration (Integração)
* Unit (Unitários)

Vamos começar falando sobre as diferenças entre eles e quando usar um ou outro.

##End to End (E2E)

É um teste que busca fazer uma simulação do comportamento dos usuários dentro da sua aplicação, e dessa forma, testando se a aplicação está funciando de acordo com o esperado.

##Integration

É quando testamos duas ou mais unidades do nosso código para saber se elas estão, em conjunto, funcionando como deveriam.

##Unit

É o teste que realizamos de um componente no React.

**Resumindo:**

No fim das contas, as distinções entre os tipos de teste não importam. Você deve se preocupar em garantir que quando entrega o seu código ele satisfaça os requisitos do negócio e gere valor para a empresa.

_______


**Quando testes são necessários?**

Novamente, isso vai variar de empresa para empresa. Em Startups, por exemplo, muitas vezes a velocidade é mais importante que a confiabilidade de uma parte do seu código.

Uma boa regra geral é - se pergunte o seguinte: "Se esse bug acontecer isso é muito ruim para a empresa?"

*Exemplo*: Usuários não conseguem se registrar no seu site. > Super prejudicial > Deve ser testado.

*Exemplo 2*: Usuários não conseguem trocar a foto de perfil. > Não é tão prejudicial > Menor prioridade de teste (Varia para cada empresa e modelo de negócio).


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

Obs: Tome cuidado para não testar detalhes de implementação que ficam muito acoplados ao código, dessa forma, quando você refatorar seu código tudo irá quebrar e será uma dor de cabeça enorme para você!
Bootstrap a cloud-native Laravel application with Jetstream support
Tags: laravel, laraboot
Published: 2021-10-12 16:00:58

---
title: Bootstrap a cloud-native Laravel application with Jetstream support
published: true
description: Using laraboot
tags: laravel, laraboot
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c9295otjqrw5oo22kto5.png
---

## Preface

Laravel Jetstream is a starter kit for Laravel and provides a starting point for a Laravel application. Jetstream provides the implementation for the application's login, registration, email verification, two-factor authentication, session management, API via Laravel Sanctum, and optional team management features.

Although Laravel Jetstream requires NodeJS and PHP >= 8.0. On this occasion, we will bootstrap a Laravel application with Jetstream support using only laraboot CLI. 


## Install 
We're going to need [laraboot](https://www.npmjs.com/package/@laraboot-io/cli) . Being an NPM CLI tool we're going to have to install it globally by running the `npm` install command.

```
npm i -g @laraboot-io/cli
```

## Create a project

```bash
laraboot new app --php-version=8.0.* && cd app
```


## Include required build tasks
Jetstream support is provided by the task `@core/laravel-starterkit-buildpack`. Let's add it to the mix and also add Paketo's NodeJs buildpack which take care of running all the `npm` command for us during the buildtime.

```shell
laraboot task add @core/laravel-starterkit-buildpack \
--format=file -vvv
```

```shell
laraboot task add nodejs \ 
--imageUri=gcr.io/paketo-buildpacks/nodejs \
--format=external \
--prepend \
-vvv
```

## Configure
Buildtask configurations occur through the buildpack.yml file, should be already there in your project's root if the project was bootstrapped by laraboot. In case the file is not there we have to create it manually.

The following is the configuration we will use. We had disabled Breeze and enabled Jetstream.

```yaml
# buildpack.yml
# Enable Jetstream teams with livewire
laravel-starterkit:
  # Jetstream configuration
  jetstream:
    enabled: true
    teams: true
    stack: livewire
  # Breeze configuration
  breeze:
    enabled: false
    stack: inertia

```

More information about the configuration of this task can be found [here](https://laraboot.io/buildtask/core/laravel-starterkit-buildpack)


## Build
Build our custom Laravel application couldn't be easier than run the following command.

```shell
laraboot build -vvv
```


## Run 
After the build process is complete we end up with an OCI image called `app` which you can either run locally or deploy to the cloud using your favorite cloud provider.

```
laraboot run --port=9000
```

## Source code
Absolutely? check it out at this  [repo](https://github.com/oscarnevarezleal/laraboot-jetstream-demo/tree/main)
What is Whatsapp GB, and How Does It Work?

Tags: beginners, react, whatsapp
Published: 2021-10-12 11:03:33

<a href="https://apksim.com/apps/entertainment/whatsapp-gb.html">Whatsapp GB</a> is an alternative app to the standard version of Whatsapp, a more advanced version than standard Whatsapp, and continues to be developed with new features every day.

Using GB Whatsapp

The appearance of Whatsapp GB is similar to the standard Whatsapp, but when we click on the three dots (menu options) in the upper right corner, the GB Settings menu is displayed.

Now, let's start digging into the settings of these menu options from top to bottom a bit so we can understand the actual GB difference from the standard version.

The entire list of app settings consists of eleven number tabs and many other subtabs, such as Download and Theme Update.

When we click on the theme store tab, we are faced with enough themes for all tastes, aligned from new to old.

The only thing users need to do is apply the theme by clicking 'Apply' the theme they like. The theme settings will be activated automatically, but it is recommended to restart the application for the program to work properly.

1. Conversation Screen
This screen consists of four tabs, each consisting of four sub-tabs

1.1 Header
1.2 Chat
1.3 Translucent mode
1.4 Photos

2. Home Screen / Chat
The second section of the main configuration consists of seven titles and each title consists of multiple subtitles. I will refer only to some of these specific settings in your section to keep this article concise

2.5.1 When activated, a short message about the "toast" is displayed silently on the screen when the people we talk to are online.

2.5.2 Allows you to choose a warning tone for each toast message in the numbered configuration. My personal opinion is that do not select a warning tone for the "toast" as it can be annoying

2.5.3 If toast is enabled, we can choose the location of the message on the screen. Here we can choose a toast message at the top, middle or bottom of the screen.

2.5.4 Lets you choose how long the gift message stays on the screen.

2.5.7, A message about this appears on the screen for a short period of time when the people we talk to change the profile picture

3. Media sharing
3.1 The Upload Size Limit (video) will allow upload size expenses of up to 50 MB.

3.2 Image Quality mode allows us to send and receive better quality images compared to normal Whatsapp, as the regular app restricts the quality of images to decrease the quality of transmitted messages and limit data transfer.

3.3 Upload size limit (audio) This option allows you to increase the limit of sharing audio files by up to 100 MB.

3.6 The video limit for status is one of the most important options; because while Whatsapp limits status videos for up to 30 seconds, this option allows us to publish status videos for up to 7 minutes when selected.
How To Enable Real-Time Merge Conflict Detection in PhpStorm
Tags: programming, webdev, php, git
Published: 2021-10-12 15:38:05

Ah, the dreaded *resolve conflicts* popup. You've finished crafting the perfect code, just a quick merge in of master (ahem, *main*) before you submit your PR, and then... 💥

![img-1-scaled.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1631105453895/YWXZ2S8AY.png)


If only there was an early warning system for merge conflicts so you could be better prepared or even avoid the conflicts in the first place I hear you say? Well if you are a PhpStorm user today is your lucky day!

Firstly, you'll need to install and set up [GitLive](https://plugins.jetbrains.com/plugin/11955-gitlive). Then if you right click the gutter on PhpStorm, you will see the option to “Show Other's Changes”.

![img-2-scaled.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1631105494603/8m0GvqeVw.png)


It will be disabled if the file open in the editor is not from git or there are no other changes to it from contributors working on other branches (aka you are safe from conflicts). If it's enabled there will be one or more change indicators in the gutter of the editor.

![img-3.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1634047012377/_7D2aL44K.png)



These will show you where your teammates have made changes compared to your version of the file and even update in real-time as you and your teammates are editing.

![key indicators-dark.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1631105477371/nVpMNFsi2.png)

If you've made a conflicting change you will see the bright red conflict indicator. These conflicts can be uncommitted local changes you have not pushed yet or existing changes on your branch that conflict with your teammates’ changes.

Click your teammate’s icon in the gutter to see the diff between your version and theirs, the branch the offending changes are from, and the issue connected to that branch if there is one.

![img-5.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1634047122136/lAc75r6N_.png)



From this popup you can also cherry-pick your teammate’s change directly from their local version of the file. For simple conflicts this can be a quick way to resolve them as identical changes on different branches will merge cleanly.

Unfortunately, it's not always possible to resolve a conflict straight away but with the early warning, you'll be better prepared, avoiding any nasty surprises at merge time!

Check out [this blog post](https://blog.git.live/gitlive-11.0-Real-time-merge-conflict-detection) or the [GitLive docs](https://docs.git.live/docs/mergeconflicts/) if you want to learn more.
How to print "Hello, World!"💻
Tags: python
Published: 2021-10-12 15:02:17

Printing "Hello, World!" is a kind of ritual that start the journey every programmer.

According to Wikipedia:
A "Hello, World!" program generally is a computer program that outputs or displays the message "Hello, World!". Such a program is very simple in most programming languages, and is often used to illustrate the basic syntax of a programming language. It is often the first program written by people learning to code.

In this post I will show you how to print `"Hello, World!"` in <href="https://python.org/">Python</a>

<small><small>This is first post and I am scared</small></small>


#Step 1: Download and Install Python 
[skip this step if you have already installed it]

Just head to https://python.org/download/ and download the install the program supported by your os, i.e. .msi for windows and .dmg for mac 

In the windows you have to tick the check box saying Add Python3.xx to path

![An image showing to check the box add to path in windows installer](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nyrn71vwy39tme34y8a4.jpg)

For Linux you have to open an application named terminal and type the following command, make sure you are connected to internet and have `sudo` privilege.
 
Command to install python on Linux
```bash
sudo apt-get install python3.8
```

#Step 2: Writing the program
Open a suitable text editor of your choice and type the following code and save it in `.py` extension
```python
print("Hello, World!")
```
Here we are printing the "Hello, World!" with `print` function.
It is a built-in function in python which helps to print thing in the console window

If you wish you can skip this section

The `print` function have the following arguments

`print(value, ..., sep=' ', end='\n', file=sys.stdout, flush=False)`


Prints the values to a stream, or to sys.stdout by default.
Optional keyword arguments:
file:  a file-like object (stream); defaults to the current sys.stdout.
sep:   string inserted between values, default a space.
end:   string appended after the last value, default a newline.
flush: whether to forcibly flush the stream.


#Step 3: Running the program

In windows, open the folder in where is your program is located and press `shift + right click` to open the context menu and select the `Open with powershell` option

In Linux/Unix, open the folder in where is your program is located and press `right click` to open the context menu and select the `Open in Terminal` option

Now in the terminal type the following command

For Windows
```
python app.py
```
For Linux/Mac
```
python3 app.py
```
The following thing will be print
```
Hello, World!
```

<hr>

So that was a simple tutorial on how to print "Hello, World!" in Python.
Well then see you all next time.


Peace ✌
Krita - A great Photoshop alternative
Published: 2021-10-12 14:38:55

Today, we won't talk about a tool about devops or backend dev. It's a **drawing tool**.

---

## Why talking about Krita?

First, because it's a really cool tool! That I liked at first sight.

Second, it's an opensource project! So if you like this project, have an idea or want to help them to improve it, you can!

Then, it's a complete tool. You can do drawing, painting, edit images... and do other things like animation!

I'm not at all a pro in this domain, so I will let you check all the possibilities allowed by this tool!

---

Also, I want to give a huge shout-out to the team and the community behind, because it's a great tool, with a beautiful interface and a great UX. 

![Krita Example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3wa4w854xij1i4c7oc16.png)

It's a great free alternative to Photoshop and can help a lot of people! *(And maybe avoid some searches or downloads in some darker areas of the web 😉)*

---

## Links
- Website : https://krita.org/en/

---

I hope it will help you! 🍺
Start with React Native: Build an Expo Application
Tags: reactnative, application, app, reactapp
Published: 2021-10-12 14:18:56

Let me invite you to our Front End Developer's article.

Patryk will show you the basic steps for React Native. You will get a detailed explanation on how to instal the first app in React Native and add plugins with code examples. In other words - you will get a decent dose of concrete React Native lifehacks about React Native for beginners. 

Enjoy, you can read the article at [Frontend House](https://frontendhouse.com/blog/start-with-react-native-build-an-expo-application)
Best Django Books
Tags: django, books, beginners
Published: 2021-10-12 14:15:39

Django is the most famous Python web framework. Among all the python frameworks, it has the largest number of stars on GitHub. Django permits python designers to compose backend rationale and make a dynamic and secure web application. 

It deals with the Don't Repeat Yourself (DRY) rule and diminishes dependence on the idea of wasting time. Django upholds the saying "For what reason to compose code without any preparation that has as of now been composed," and to back this assertion, Django accompanies batteries included.

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

[Best Django Books](https://www.techgeekbuzz.com/best-django-books/)

1. Django for Beginners: Built websites with Python & Django - [Buy](https://www.amazon.in/Django-Beginners-Build-Websites-Python/dp/1735467200/)
2. Django for APIs: Build websites with Python & Django - [Buy](https://www.amazon.in/Django-APIs-Build-web-Python-ebook/dp/B08FMVYVFR/)
3. Django for Professionals: Production websites with Python & Django - [Buy](https://www.amazon.in/Django-Professionals-Production-websites-Python-ebook/dp/B08FNLQHGN/)
4. Mastering Django - [Buy](https://www.amazon.in/Mastering-Django-Nigel-George/dp/0648884414/)
5. Two Scoops of Django 1.11: Best Practices for the Django Web Framework - [Buy](https://www.amazon.in/Two-Scoops-Django-1-11-Practices/dp/0692915729/)
6. Lightweight Django - [Buy](https://www.amazon.in/Lightweight-Django-Julia-Elman/dp/149194594X)
7. Django Unleashed - [Buy](https://www.amazon.in/Django-Unleashed-Developers-Library-Pinkham/dp/0321985079)
8. Django 3 By Example: Build powerful and reliable Python web applications from scratch, 3rd Edition - [Buy](https://www.amazon.in/Django-Example-powerful-reliable-applications-dp-1838981950/dp/1838981950/)
9. Django Design Patterns and Best Practices – Second Edition: Industry-standard web development techniques and solutions using
10. The Definitive Guide to Django: Web Development Done Right - [Buy](https://www.amazon.in/dp/1788831349)

## Conclusion:

As referenced in the presentation, Django documentation is the best asset to get familiar with the Python framework. Nonetheless, the Django books we have referenced here can be your best resources in learning Django. 

Django is a tremendous framework, and learning it, is a ceaseless cycle. Each update brings a new thing to the table that improves Django. In any case, it doesn't influence the center design of Django.
Hacktoberfest ASCII Art
Tags: hacktoberfest, python, opensource, github
Published: 2021-10-12 14:04:18

ASCII art is intriguing and wonderful, yet feels sophisticated to create, especially by writing code. But it's not. 

Here is an open-source ASCII Art Generator project written in Python3 that can help you in understanding ASCII Art. You can find it at: https://github.com/adrinorosario/ASCII_Art . Do contribute to it if you find it helpful and star it on GitHub.

ASCII art or keyboard art is a copy-pasteable digital age art form. It's about making text pictures with text symbols. Basically, the computer identifies each pixel in an image or images and then fills them with a character (example- $), based on various factors like density of pixels, color, etc.
Adding syntax highlighting to a Rails app with PrismJs
Tags: rails, javascript, webdev
Published: 2021-10-12 13:46:27

If you are running a technical blog, it is very likely that you want to share some code-snippets. Syntax highlighting is nearly a must in order to make any shared code readable for your audience. There are different solutions to integrate syntax highlighting into a Rails application - I'll quickly show how I integrated [Prism](https://prismjs.com/) into this blog.

The first step to get syntax highlighting for your code snippets is to use the correct HTML tags. It is generally advised to add your snippets in a `<pre><code>...</code></pre>block`.

Next we will add code highlighting with the javascript library Prism. There are other options (like [highlightjs](https://highlightjs.org/)), but Prism was the fastest to get running on this Rails blog app.

First we add Prism via yarn package manager: `yarn add prismjs`.

Then we add the plugin to our `babel.config.js` and define the languages we want to import:
```javascript
  plugins: [
    ["prismjs", {
      "languages": [ "css", "ruby"]
    }],
```  
You can find a list of [supported languages](https://prismjs.com/#supported-languages) on the Prism website.

Finally, in order to load the script after page load, we update our `application.js`:

```javascript
  import Prism from 'prismjs'

  document.addEventListener("turbo:load", function() {
       Prism.highlightAll();
  });
```
  
If your app runs `turbolinks` instead of turbo, you need to change the `"turbo:load"` to `"turbolinks:load"`.

This should be enough to get the basic syntax highlighting working! You can now customize your integration:

You can **add custom styling** by simply overriding the theme styling in your css files, e.g. to change the background color:

```css
  :not(pre) > code[class*="language-"],
  pre[class*="language-"] {
      background: #334155 !important;
  }
```
You can **add custom themes** via the prism-themes repository. Add the plugin via `yarn add prism-themes` and import the corresponding theme in your `application.scss` with `@import "prism-themes/themes/prism-dracula.css";`. This blog uses a slightly customizes version of the `dracula` theme.