teleren/devto huggingface dataset:
VSCode PHP CS Fixer
Tags: php, productivity, tutorial
Published: 2023-10-08 23:26:38

### PHP Coding Standards Fixer

The PHP Coding Standards Fixer (PHP CS Fixer) tool fixes your code to follow standards; whether you want to follow PHP coding standards as defined in the PSR-1, PSR-2, etc., or other community driven ones like the Symfony one. You can also define your (team's) style through configuration.

### Requirements

PHP needs to be a minimum version of PHP 7.4.

### Installation

**Globally (Composer)**

To install PHP CS Fixer, install Composer and issue the following command:

```
composer global require friendsofphp/php-cs-fixer
```

**Globally (homebrew)**

```
brew install php-cs-fixer
```

### Update

**Globally (Composer)**

You can update `php-cs-fixer` through this command:

```
./composer.phar global update friendsofphp/php-cs-fixer
```

**Globally (homebrew)**

You can update `php-cs-fixer` through this command:

```
brew upgrade php-cs-fixer
```

### Install extension

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

### Config File

Create the file `.php-cs-fixer.php` inside the `.vscode/` directory and add the content below to the file:

```php
<?php

$config = new PhpCsFixer\Config();

return $config
    ->setRules([
        '@PSR12' => true,
        'new_with_braces' => false,
        'array_indentation' => true,
        'array_syntax' => ['syntax' => 'short'],
        'combine_consecutive_unsets' => true,
        'multiline_whitespace_before_semicolons' => true,
        'single_quote' => true,
        'blank_line_before_statement' => true,
        'braces' => [
            'allow_single_line_closure' => true,
        ],
        'concat_space' => ['spacing' => 'one'],
        'declare_equal_normalize' => true,
        'function_typehint_space' => true,
        'include' => true,
        'lowercase_cast' => true,
        'no_multiline_whitespace_around_double_arrow' => true,
        'no_spaces_around_offset' => true,
        'no_unused_imports' => true,
        'no_whitespace_before_comma_in_array' => true,
        'no_whitespace_in_blank_line' => true,
        'object_operator_without_whitespace' => true,
        'single_blank_line_before_namespace' => true,
        'ternary_operator_spaces' => true,
        'trailing_comma_in_multiline' => true,
        'trim_array_spaces' => true,
        'unary_operator_spaces' => true,
        'binary_operator_spaces' => true,
        'whitespace_after_comma_in_array' => true,
        'single_trait_insert_per_statement' => false,
    ])
    ->setLineEnding("\n");
```

That's it, every time a file is saved the fixer will be executed.

To install PHP-Cs-Fixer on Windows, just follow this tutorial [windows](https://gist.github.com/realrashid/59d0f99ed31103ae44291f3c752240b6).
Quarkus Dev UI
Tags: quarkus, ui, java
Published: 2023-10-08 22:48:23

To see the Quarkus Dev UI, you just have to run your app and go to http://localhost:8080/q/dev-ui


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tdlyy87p6ghr3cmf082g.png)
First Quarkus app
Tags: quarkus
Published: 2023-10-08 22:41:28

This is the first Quarkus app:

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

You can download the code from here:
https://github.com/josesaid/code-with-quarkus

## Getting started
Open your IDE and code this snippet

```
package org.acme;

import jakarta.ws.rs.GET;
import jakarta.ws.rs.Path;
import jakarta.ws.rs.Produces;
import jakarta.ws.rs.core.MediaType;

@Path("/first_app")
public class GreetingResource {

    @GET
    @Produces(MediaType.TEXT_PLAIN)
    @Path("/hello")
    public String hello() {
        return "Hello from RESTEasy Reactive by Said Olano";
    }
}

```

Then run this maven command:

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


Here is the command:

```
./mvnw quarkus:dev
```

This is the result of the execution:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/728ns7z0ecbeq82u6j18.png)
O que é OutSystems e o Low-Code?
Published: 2023-10-08 21:57:54

---
title: O que é OutSystems e o Low-Code?
published: true
description: 
tags: 
# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
# published_at: 2023-10-08 21:43 +0000
---

O desenvolvimento de aplicativos por meio de ferramentas low-code tem conquistado um espaço significativo no mercado de desenvolvimento de aplicativos. E a plataforma OutSystems tem se destacado cada vez mais neste meio.

Mas afinal, O que é desenvolvimento low-code? o que é OutSystems?

O desenvolvimento low-code é uma abordagem de desenvolvimento de software que permite a criação de aplicativos com um mínimo de codificação manual. Nessa abordagem, são utilizadas ferramentas e plataformas que oferecem interfaces visuais e componentes pré-fabricados, permitindo que desenvolvedores e até mesmo usuários sem profundo conhecimento em programação criem aplicativos de forma mais rápida e eficiente.

E a plataforma Outsystems é um dos principais exemplos de uma plataforma de desenvolvimento low-code. Ela se destaca no mercado por fornecer uma ampla gama de recursos e facilidades para simplificar o processo de criação de aplicativos, desde o design até a implantação, sem a necessidade de um conhecimento profundo em programação.

A plataforma OutSystems oferece:

Ambiente de Desenvolvimento Visual: Os usuários podem projetar a aparência e o funcionamento de seus aplicativos por meio de uma interface visual intuitiva, eliminando grande parte da codificação manual.

Integração de Dados e Sistemas: A OutSystems facilita a integração com sistemas de dados existentes, bancos de dados, APIs e outras fontes de informações, simplificando o acesso a dados relevantes.

Reutilização de Componentes: Componentes pré-construídos e modelos aceleram o desenvolvimento, permitindo que desenvolvedores aproveitem soluções pré-existentes.

Segurança e Conformidade: A plataforma inclui recursos de segurança robustos e auxilia na conformidade com regulamentações, tornando o desenvolvimento seguro e compatível.

Implantação Simplificada: A implantação de aplicativos é facilitada, permitindo que os aplicativos sejam disponibilizados em várias plataformas, como web e dispositivos móveis, com facilidade.

Monitoramento e Análise: Ferramentas de monitoramento e análise permitem o acompanhamento do desempenho dos aplicativos em tempo real, facilitando a identificação e correção de problemas.

Colaboração Eficiente: A plataforma OutSystems promove a colaboração entre desenvolvedores, designers e outros membros da equipe, simplificando a revisão e aprimoramento contínuo dos aplicativos.

No geral, a plataforma OutSystems é uma solução abrangente para desenvolvimento low-code, permitindo que empresas e desenvolvedores acelerem o processo de criação de aplicativos, reduzam os custos e mantenham um alto padrão de qualidade.
You want to fully utilize power of Stable Diffusion but don’t have a strong computer?
Published: 2023-10-08 21:53:37

Don’t you worry.

With my free Kaggle account notebook you can full utilize Stable Diffusion XL (SDXL), Stable Diffusion 1.5 based models, ControlNet, LoRAs and everything.

Link is here : https://www.patreon.com/posts/run-on-free-like-88714330

The Patreon post is also containing today recorded tutorial video for Patreon supporters.

The notebook has a new video I recorded today for Patreon supporters

It supports SDXL ControlNet models as well

Custom models and LoRAs from CivitAI or Hugging Face as well

For free you can use Kaggle GPUs for 30 hours every week


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


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


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




![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1ksfcx35ir7wc7hvct32.png)
Challenge #31
Published: 2023-10-08 21:51:59

This challenge can be an easy one if you start with the [Optimizing MSVC 2012 x64
](https://challenges.re/31) assembly code example, instead of the [Optimizing MSVC 2010 x86](https://challenges.re/31). The problem with the [Optimizing MSVC 2010 x86](https://challenges.re/31) example, is the use of [FPU Register Stack](https://en.wikibooks.org/wiki/X86_Assembly/Floating_Point#FPU_Register_Stack) which makes kinds of hard to follow the logic. If you want to know more about floating points, I highly recommend you read the chapter from [Reverse Engineering for Beginners](https://beginners.re/), from the same author of the challenge. At the end of the articles, I'll link other sources as well. As always the code can be found in the original [website](https://challenges.re/31).

In case you are kind of lost and don't have an idea of what to consult to learn more about floating points, take a look at the Bibliography.

## Analysis

The code we need to analyze has three float constants, **1.0, 0.001, and 0.5**. These constants are defined in the following lines

```x86asm
__real@3fe0000000000000 DQ 03fe0000000000000r ;; 0.5
__real@3f50624dd2f1a9fc DQ 03f50624dd2f1a9fcr ;; 0.001
__real@3ff0000000000000 DQ 03ff0000000000000r ;; 1.0

```

Apart from this, the logic is straightforward, and not too complicated. Here's the code in C language:

```C
double f(double a)
{
	double cur = 1.0;
	while (cur*cur - a <= 0.001) {
		cur = (a / cur + cur) * 0.5; // same as dividing by 2
	}

	return cur;
}
```

Printing the result of calling this function, you can notice that we will receive basically `a / 2 + 0.5`.


# Bibliography

1. [Chapter Code Patterns, Floating unit](https://beginners.re/) from [beginners.re](beginners.re).
2. [Intel Manual. Volume 1, Chapter 8 Programming with the x87 FPU](https://cdrdv2.intel.com/v1/dl/getContent/671200).

Also, the author of the challenge recommends getting familiar with the [Forth Programming Language](https://www.forth.com/forth/), it is not to get a super pro on this programming language, it's just to get familiar with the way of programming with a stack-based approach. This language plays also an inspiration in the [Fift Programming Language](https://ton.org/fiftbase.pdf) of the [TON Blockchain](https://ton.org).
Trying AI chats - citations
Tags: ai, gpt3
Published: 2023-10-08 21:13:33

I have used chatgpt (OpenAI), and bard.google.com, recently to get some code insights, or help with programming definitions. I guess it is a plus (from bard only), that it includes sometimes, i.e. sources links, they can be really helpful. Chatgpt said about it, hat it takes info from books, etc, without citing them. So I think I will stick to bard for respect to original authors. What do you think about the importance to give credit for GPTs?
Refactoring my Codebase and Squashing Commits
Tags: typescript, opensource, programming, beginners
Published: 2023-10-08 21:12:26

Mastering version control systems and code refactoring techniques is essential and making use of them to enhance my skills in Git and refine my [TypeScript codebase](https://github.com/omalk98/TILvert) was a rather interesting experience.

## 1. Adding Functionality and Enhancing Readability

One of the most important aspects of code refactoring is improving readability and usability. I began by adding new functions to my existing classes, making them more intuitive to use. I worked on enhancing the interfaces of these classes and improved their functionality, making the codebase more user-friendly.

## 2. Optimizing File Deletion with rimraf

Recursively deleting files is a common operation in software development, especially CLI tools. I refactored my code to use the [rimraf](https://github.com/isaacs/rimraf) library to improved the performance of deletion and made the codebase more robust and reliable.

## 3. Removing Redundancy and Unused Code

Unused and redundant code can clutter a codebase, making it harder to maintain and understand. While I was refactoring, I removed any functions or variables that were no longer in use. This helped reduced the complexity of the code and enhance its clarity, making it easier to work with.

## 4. Refactoring Command Line Parsing

I refactored my command line parsing logic into a dedicated class, transforming it into a `Singleton` class. This encapsulated the parsing logic and makes it easier to manage and reuse throughout the codebase. Structuring the code in this way helps keep a more organized and maintainable architecture.

## 5. Mastering Git with Rebase and Amend

I made use of the git rebase command to squash multiple commits into a single collective commit. This technique helped in creating a more concise and meaningful commit history, making it easier to track changes over time.
Utilizing the --amend flag to make changes to my commits when I realize I made a mistake in the message, or changing some code in the commit without needing to change the message with the --no-edit flag was incredibly useful once you get into larger and more advanced changes in your codebase, making sure each commit stays logical and coherent.

Maintaining a codebase for readability, ease of use, and ease of contribution is essential to keeping a live codebase which gets a lot of usage and contribution. The more structured and well maintained the code is, the easier it becomes to add new features and patch existing issues.
VPC open port 3306 (mySQL)
Published: 2023-10-08 19:53:13

If you are having issues to connect to AWS RDS MySQL, test if vpc is enabled for the port 3306 (mysql port) and the port is open:


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

To accomplish this, you need to open the port on the vpc and link your vpc to your RDS MySQL Database instance.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0fhjmymgwnoz5yv263f2.png)
Amazon Virtual Private Cloud (Amazon VPC)
Tags: vpc, aws, privatecloud
Published: 2023-10-08 19:48:28

Amazon Virtual Private Cloud (Amazon VPC) enables you to provision a logically isolated section of the AWS Cloud where you can launch AWS resources in a virtual network that you've defined.

With Amazon Virtual Private Cloud (Amazon VPC), you can launch AWS resources in a logically isolated virtual network that you've defined. This virtual network closely resembles a traditional network that you'd operate in your own data center, with the benefits of using the scalable infrastructure of AWS.

The following diagram shows an example VPC. The VPC has one subnet in each of the Availability Zones in the Region, EC2 instances in each subnet, and an internet gateway to allow communication between the resources in your VPC and the internet.


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


## Features

The following features help you configure a VPC to provide the connectivity that your applications need:

**Virtual private clouds (VPC)**
A VPC is a virtual network that closely resembles a traditional network that you'd operate in your own data center. After you create a VPC, you can add subnets.

**Subnets**
A subnet is a range of IP addresses in your VPC. A subnet must reside in a single Availability Zone. After you add subnets, you can deploy AWS resources in your VPC.

**IP addressing**
You can assign IP addresses, both IPv4 and IPv6, to your VPCs and subnets. You can also bring your public IPv4 and IPv6 GUA addresses to AWS and allocate them to resources in your VPC, such as EC2 instances, NAT gateways, and Network Load Balancers.

**Routing**
Use route tables to determine where network traffic from your subnet or gateway is directed.

**Gateways and endpoints**
A gateway connects your VPC to another network. For example, use an internet gateway to connect your VPC to the internet. Use a VPC endpoint to connect to AWS services privately, without the use of an internet gateway or NAT device.

**Peering connections**
Use a VPC peering connection to route traffic between the resources in two VPCs.

**Traffic Mirroring**
Copy network traffic from network interfaces and send it to security and monitoring appliances for deep packet inspection.

**Transit gateways**
Use a transit gateway, which acts as a central hub, to route traffic between your VPCs, VPN connections, and AWS Direct Connect connections.

**VPC Flow Logs**
A flow log captures information about the IP traffic going to and from network interfaces in your VPC.

**VPN connections**
Connect your VPCs to your on-premises networks using AWS Virtual Private Network (AWS VPN).
The Power of CSS Resets and Embracing the Modern Approach
Tags: webdev, frontend, css
Published: 2023-10-08 19:43:21

Hello fellow Frontend enthusiasts! Let me dive into a topic I'm passionate about: CSS resets. If you've ever faced styling inconsistencies across different browsers (who hasn't?), you know the importance of a good CSS reset. In this article, I'll shed some light on the advantages of using a CSS reset and introduce you to what I believe is a gem in this domain: "A Modern CSS Reset" by Andy Bell.

## Why Use a CSS Reset?

1. **Uniformity Across Browsers:** Different browsers have different default styling. A CSS reset brings all browsers to a common starting point, reducing discrepancies.

2. **Predictability:** With a reset in place, developers can be confident that the styles they define won't clash with browser defaults.

3. **Clean Slate:** A CSS reset provides a clean slate, making it easier to implement and maintain consistent designs.

## What is 'A Modern CSS Reset'?

In the dynamic world of web design and development, what was effective yesterday might not be the best solution today. Enter "A Modern CSS Reset." As the web evolves, so do our tools, and this modern reset offers an updated approach to resetting styles. It doesn't just nullify styles but sets a few sensible defaults to help developers kickstart their projects.

## Why I'm Loving Andy Bell's Modern CSS Reset

I stumbled upon [Andy Bell's Modern CSS Reset](https://andy-bell.co.uk/a-more-modern-css-reset/) a while ago, and it felt like a breath of fresh air. Here's why:

1. **Minimalistic:** Andy's approach is succinct. It's not about removing everything but about providing a useful foundation.

2. **Focus on Modern Browsers:** This reset acknowledges the fact that we are mostly developing for modern browsers. It reduces the noise from older, rarely-used styles.

3. **Built for the Current Web:** With features like custom properties and modern layout techniques, this reset is in tune with how we design and develop today.

4. **Personal Touch:** Andy isn't just sharing a tool; he's sharing his approach and reasoning, which resonates with my philosophy of understanding the 'why' behind our tools.

## Other Noteworthy CSS Resets

While Andy Bell's reset is a fantastic tool, there are several others worth mentioning:

1. Eric Meyer’s Reset CSS: Perhaps the most well-known and widely adopted reset, this one is all about creating a level playing field across browsers.

2. Normalize.css: Instead of wiping all styles, Normalize.css fine-tunes default browser styles to create a consistent base.

3. HTML5 Reset: This one is geared towards ensuring that HTML5 elements render consistently across browsers.

## Final Thoughts

Regardless of which reset you choose, the key is to ensure that you're starting your project with a consistent foundation. For me, Andy Bell's Modern CSS Reset strikes the right balance of simplicity and modernity. I encourage you to check it out and see if it fits your workflow. Happy styling!
Container Queries in CSS: The Cool New Kid on the Block
Tags: css, webdev
Published: 2023-10-08 19:30:00

Hey there, web design fans! Have you ever pulled your hair out trying to make a design look great on every screen size? Well, guess what? The web design world is abuzz with something new and exciting, and it's about to make your life a whole lot easier. Say hello to container queries in CSS!

## What's the Big Deal About Container Queries?

Let's break it down. In the past, if you wanted to change how something looked based on the size of the browser window, you'd use media queries. They were like magic wands for making sites look good on any device. But they were more like a one-size-fits-all solution.

Now, container queries have come onto the scene, and they're more like having a tailor-made suit. Instead of looking at the whole browser window, container queries look at the size of the container an element is in. That means you can have more control and flexibility.

## A Quick Peek at How They Work

Here's a super simple example:

```css
.container {
  resize: both;
  overflow: auto;
  contain: layout inline-size;
}

@container (min-width: 500px) {
  .child {
    background: lightblue;
  }
}
```

With this, the inside element gets a fancy light blue background if the container is at least 500px wide. Cool, right? It's all about that `contain` property, making things all nice and tidy.

## Why Should You Care?

### 1. **Rocking the Component-Driven Design**

Imagine building blocks that adapt themselves no matter where you put them on the page. That's what container queries can do. They make building reusable, flexible components a breeze.

### 2. **No More Spaghetti Code**

Say goodbye to messy CSS that’s harder to untangle than a plate of spaghetti. With container queries, everything's more organized, like a neatly packed lunch box.

### 3. **Unleashing Your Inner Designer**

Feel like an artist? Now you can paint even more intricate layouts without having to rely on global viewport sizes. Unleash your creativity and let your designs shine.

## Browser Support: The Not-So-Cool Part

Okay, so here's the kicker: container queries are still pretty new, and not all browsers have gotten on board with them. But trust me, once they see how cool this is, they'll catch up.

## Wrapping It Up

Container queries are like the cool new kid on the block who everyone wants to hang out with. They're all about giving you more control, letting you write cleaner code, and just making everything more fun.

Whether you're a seasoned pro or just getting started with responsive design, give container queries a whirl. They might just become your new best friend in web development.

So what are you waiting for? Dive in and start playing with container queries. Who knows what amazing things you'll create? Happy coding! 🎉
Adding a chat room to any app with one line of code
Tags: opensource, javascript, webdev, news
Published: 2023-10-08 19:19:47

I just added a new feature to Chitchatter that I'm really excited about!

If you haven't seen it before, [Chitchatter](https://chitchatter.im/) is an [open source](https://github.com/jeremyckahn/chitchatter) web app that instantly enables private, anonymous communication between people. Once connected you can easily chat, share audio and video, and transfer files. All communication is encrypted and peer-to-peer.

The feature I just added is **chat room embedding**. Much like a YouTube video, you can now embed a Chitchatter room into any web app. Here's a demo of an embedded Chitchatter room being loaded via CodePen:

{% codepen https://codepen.io/jeremyckahn/pen/BavvPvK %}

To create your own embedded chat room: Go to https://chitchatter.im/, enter a room name (or use the unique default), and click "Get embed code." Copy and paste the presented code snippet into your HTML code and you're done.

That's it! Happy chatting. 🙂