teleren/devto huggingface dataset:
Django + Tailwind CSS
Tags: webdev, beginners, programming, django
Published: 2023-05-19 18:52:05

YouTube Tutorial on how to [Configure Django With Tailwind CSS](https://www.youtube.com/watch?v=R6aMEYRLc88)

(1) create a virtual environment and activate it

- creating a virtual environment

```
python -m venv venv
```
- activation in windows
```
.\venv\Scripts\activate
```
- activation in Linux
```
source venv/bin/activate
```
- Install django
```
pip install django
```

(2) create a project

```
django-admin startproject django_project .
```

(3) create an app

```
python manage.py startapp myapp
```

(4) create a folder for our static files

```
mkdir static/css
```

(5) Add the following code in settings.py

```
STATIC_URL = "static/"
STATICFILES_DIRS = [
    BASE_DIR / "static",
]
```

(6) create a folder for all tailwind resources

```
 mkdir resources 
```

- This folder is where we will run node [npm]:

(7) Change directory to resource folder

```
cd resources
```
(8) Run the following commands to initialize npm, install required resources and initialize tailwindcss respectively:

```
npm init -y 
```

```
npm install tailwindcss autoprefixer clean-css-cli
```

```
npx tailwindcss init -p
```

(9) Now we must make some modifications in some file
i.e in:

**package.json**
Replace "scripts" with code below

```
...
"scripts": {
  "build": "tailwind build ../static/css/tailwind.css -o ../static/css/style.css && cleancss -o ../static/css/style.min.css ../static/css/style.css --watch"
},
...
```

**tailwind.config.js**
Replace whole code with the one below:

```
module.exports = {
    future: {
        removeDeprecatedGapUtilities: true,
        purgeLayersByDefault: true,
    },
    purge: {
        enabled: false, //true for production build
        content: [
            '../**/templates/*.html',
            '../**/templates/**/*.html'
        ]
    },
    theme: {
        extend: {},
    },
    variants: {},
    plugins: [],
}
```

(10) We add some input to tailwind, that will be processed to give what we want in static/css/tailwind.css

```
@tailwind base;

@tailwind components;

@tailwind utilities;
```

(11) Now we run the build command we added to the package.json file before

```
npm run build
```

Two files will be generated: 

a)styles.css

b)styles.min.css

(12) Link the style.css file to your django html file's head tag

------------------------------------------------------------------

<center>And that's it basically</center>

NOTE: Explanations are in my YouTube Channel, Click Here -> [KwargDevs](https://www.youtube.com/channel/UCdMBvHugZtN_FZ6oh8L5BHA) For My YouTube Channel
AWS Security Hub
Tags: aws, cloud, devops, security
Published: 2023-05-19 18:38:05

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

[2/30] #30DaysOfAWS Today, AWS Security Hub.

**AWS Security Hub** is a comprehensive security service provided by Amazon Web Services (AWS). It acts as a central hub for aggregating, organizing, and prioritizing security findings from various AWS services, third-party security tools, and custom applications. Security Hub simplifies security management and enables users to gain better visibility into their AWS environment.

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

The primary goal of AWS Security Hub is to provide a unified view of security alerts and compliance status across an AWS account or multiple AWS accounts. It collects data from a wide range of sources, including AWS CloudTrail logs, Amazon GuardDuty findings, Amazon Inspector assessments, Amazon Macie data, and third-party partner integrations.

**Here are some key features and benefits of AWS Security Hub**

1.**Aggregated Security Findings**: Security Hub consolidates findings from different sources into a single, centralized dashboard. It helps to identify and prioritize security issues effectively.

2.**Continuous Monitoring**: It continuously monitors your AWS environment and provides real-time alerts and notifications for security events and compliance violations.

3.**Automated Compliance Checks**: Security Hub performs automated security and compliance checks based on industry standards and best practices, such as the Center for Internet Security (CIS) AWS Foundations Benchmark and AWS Security Best Practices.

4.**Insights and Remediation Actions**: It provides actionable insights and recommended remediation actions for identified security issues, helping users to resolve them promptly.

5.**Integration with Third-Party Tools**: Security Hub supports integration with a wide range of third-party security tools, allowing users to extend their security monitoring capabilities.

6.**Standards and Compliance Reporting**: It offers built-in reporting features to generate comprehensive security and compliance reports, simplifying audits and regulatory compliance processes.

By using AWS Security Hub, organizations can enhance their overall security posture, streamline security operations, and proactively identify and mitigate potential security risks in their AWS environments.

Learn More - [URL](https://aws.amazon.com/security-hub/)

Thanks for reading the Article.
AWS S3 Glacier
Tags: aws, cloud, devops, security
Published: 2023-05-19 14:32:33

**Anotações sobre o AWS Glacier para ajudar na preparação das certificações AWS.**

Até o momento as anotações são para as certificações abaixo:

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

- [Link oficial](https://aws.amazon.com/pt/s3/storage-classes/glacier/)

---

##**Anotações gerais**

- Baixo custo
- Similar a IAM policy
- Configure WORM (Write Once Read Many)
- Tem até 24 horas para validar a Policy
- **Lock Policies são imutáveis**
- **Encrypt - SSE**

---
##**Glacier Vault Lock Policies**
[Documentação oficial](https://docs.aws.amazon.com/pt_br/amazonglacier/latest/dev/vault-lock-policy.html)

- Para implementar esse requisito, você pode criar uma política do Vault Lock que negue a usuários permissões para excluir um arquivo até que o arquivo exista por um ano. 
- Você pode testar essa política antes de bloqueá-la. 
- Lock ID
- **Depois de bloquear a política, ela se tornará imutável.**
- `abort-vault-lock` - Interrompe o processo de bloqueio do cofre
- `initiate-vault-lock` - Inicia o processo de bloqueio do cofre

---
##**Bloquear um cofre**
Bloquear um cofre requer duas etapas:

1. Inicie o bloqueio anexando uma política de bloqueio de cofre ao seu cofre, que define o bloqueio para um estado em andamento e retorna um ID de bloqueio. Enquanto estiver no estado em andamento, você tem 24 horas para validar sua política de bloqueio de cofre antes que o ID de bloqueio expire.

2. Use a ID de bloqueio para concluir o processo de bloqueio. Se a política de bloqueio do cofre não funcionar como esperado, você pode anular o bloqueio e reiniciar desde o início. Para obter informações sobre como usar a API do S3 Glacier para bloquear um cofre, consulte Bloquear um cofre usando a API do Amazon S3 Glacier.
How to Get and Evaluate Startup Ideas
Tags: startup, entrepreneurship
Published: 2023-05-19 18:13:27

- Common Problems
    1. Not solving a real problem - Solution In a Search of a Problem (SISP)
    2. Getting stuck on a "tarpit idea" - Widespread problem that seems easier to solve
    3. Not evaluating an idea
    4. Waiting for perfect idea

- Key Questions
    1. Is there a founder/market fit?
        - Ex. [Plangrid](https://en.wikipedia.org/wiki/PlanGrid) (W12) - Construction Productivity Software
        - i.e. Pick a good idea for your team
    2. How big is the market?
        - Good markets for startups
            - Currently big market
            - Rapidly growing
                - Ex. [Coinbase](https://en.wikipedia.org/wiki/Coinbase/) (S12) - Cryptocurrency Exchange Platform
    3. How acute is this problem?
        - Ex. [Brex](https://en.wikipedia.org/wiki/Brex) (W17) - Credit Card for Startup
    4. Do you have competition?
        - Having competition could be counterintuitively good, but if it's an entrenched problem, it'll require new insight
    5. Do you want this?
    6. Did this recently become possible or necessary?
        - Ex. [Checkr](https://checkr.com/) (S14) - Background checks via API
    7. Are there good proxies for this business?
        - Ex. [Rappi](https://en.wikipedia.org/wiki/Rappi) (W16) - Food delivery in Latin America
    8. Is this an idea you would want to work on for years?
    9. Is this a scalable business?
    10. Is this a good idea space?
        - Ex. [Fivetran](https://www.fivetran.com/) (W13) - Tool for data analysis

- Things that make startup ideas seem bad, but actually make them good
    - Hard to get started
        - Ex. [Stripe](https://en.wikipedia.org/wiki/Stripe,_Inc.) (S09) - Credit Card payments through website
    - In boring space
        - Ex. [Gusto](https://en.wikipedia.org/wiki/Gusto_(company)) (W12) - Payroll software
    - Have existing competitors
        - Ex. [Dropbox](https://en.wikipedia.org/wiki/Dropbox) (S07) - Cloud storage

- Setting up for future ideas
    - Become an expert on something valuable
    - Work at a startup
    - Build things you find interesting
        - Ex. Replica

- Recipes for generating startup ideas
    - Start with what your team is especially good at
        - Ex. [Rezi](https://www.rentrezi.com/) (W17) - Apartment Renting
    - Start with a  personally encountered problem
        - Ex. [Vetcove](https://www.vetcove.com/) (W16) - Supplies for Veterinarians
    - Things you wish existed
        - Ex. [Doordash](https://en.wikipedia.org/wiki/DoorDash) (S13) - Food delivery
    - Things changed in the world recently
        - Ex. [Gather Town](https://www.gather.town/) - Digital space for teams
    - New variants of successful companies
        - Ex. [Nuvocargo](https://www.nuvocargo.com/en) (W18) - Cross-border logistics for Mexico ↔ USA
    - Talking to others about problems they face
        - Ex. [AtoB](https://www.atob.com/) (S20) - Fuel Cards for Truck Drivers
    - Big industries that seem broken
    - Find a Co-founder who has an idea
HTML and CSS based View Transitions are coming
Published: 2023-12-19 10:10:10

---
title: HTML and CSS based View Transitions are coming
published: true
date: 2023-05-19 17:47:56 UTC
tags: 
canonical_url: https://nicolas-hoizey.com/articles/2023/05/19/html-and-css-based-view-transitions-are-coming/
---

While same-document View Transitions have now been [available for a while](https://caniuse.com/?search=ViewTransition) in Chromium browsers for Single Page Applications (SPA), they were requiring the use of a JavaScript API. Chrome Canary now allows us to develop and test View Transitions with HTML and CSS only, obviously targeting Multiple Pages Applications (aka Web sites 🤷‍♂️).

## Let's experiment!

After following [Jake Archibald's work](https://developer.chrome.com/docs/web-platform/view-transitions/) for many months now, and sharing [a few links about View Transitions](https://nicolas-hoizey.com/links/?tags=View%20Transitions), I wanted to try them, and decided [my photography site](https://nicolas-hoizey.photo/) would be a good playground.

Here's what I got with just [a `<meta>` tag](https://github.com/nhoizey/nicolas-hoizey.photo/blob/0ebfd123ab203c330dd24dc1abf2f0a068390b4e/src/_layouts/base.njk#L41) and [a few CSS rules](https://github.com/nhoizey/nicolas-hoizey.photo/blob/0ebfd123ab203c330dd24dc1abf2f0a068390b4e/assets/sass/_view-transitions.scss):

[https://youtu.be/Z\_MG97DzNPs](https://youtu.be/Z_MG97DzNPs)

Thanks Dave Rupert for the [very simple View Transitions tutorial](https://nicolas-hoizey.com/links/2023/05/19/getting-started-with-view-transitions-on-multi-page-apps/)!

There are a few improvements required for when we transition from a small and lightweight thumbnail to a very large and heavy photo (still no [JPEG-XL](https://nicolas-hoizey.com/tags/jpeg-xl/)…), so I tried to add a Low Quality Image Placeholder (I usually hate them… 😞) to limit the issue on slow networks. But I guess there should be a better solution if I could keep the thumbnail while the large image loads.

## Ok for Chrome Canary, but elsewhere?

The [documentation for the View Transitions API on MDN](https://developer.mozilla.org/en-US/docs/Web/API/View_Transitions_API) is already available, but focused on SPA.

Noam Rosenthal is currently leading the [creation of a new explainer for "cross-document navigations" (MPA)](https://github.com/WICG/view-transitions/pull/208), a welcome step towards standardisation, and maybe implementation in other browsers.

There are also [a lot of open issues in the CSS Working Group GitHub repository](https://github.com/w3c/csswg-drafts/labels/css-view-transitions-2) with ideas and questions.

Whatever the standardisation and cross-browser implementation status, a really nice thing about View Transitions is that they have been designed as a progressive enhancement, so you can use them right now, even if support is currently low (in terms of browser diversity).

I the mean time, I can only thank Jake Archibald A LOT for this nice improvement of the user experience! 🙏
Default Permission Mechanism
Tags: opengauss
Published: 2023-04-18 07:12:49

A user who creates an object is the owner of this object. By default, Separation of Duties is disabled after database installation. A database system administrator has the same permissions as object owners. After an object is created, only the object owner or system administrator can query, modify, and delete the object, and grant permissions for the object to other users through GRANT by default.

To enable another user to use the object, grant required permissions to the user or the role that contains the user.

openGauss supports the following permissions: SELECT, INSERT, UPDATE, DELETE, TRUNCATE, REFERENCES, CREATE, CONNECT, EXECUTE, USAGE, ALTER, DROP, COMMENT, INDEX, and VACUUM. Permission types are associated with object types. For permission details, see GRANT.

To remove permissions, run REVOKE. Object owners have implicit permissions (such as ALTER, DROP, COMMENT, INDEX, VACUUM, GRANT, and REVOKE) on objects. That is, once becoming the owner of an object, the owner is immediately granted the implicit permissions on the object. Object owners can remove their own common permissions, for example, making tables read-only to themselves or others, except the system administrator.

System catalogs and views are visible to either system administrators or all users. System catalogs and views that require system administrator permissions can be queried only by system administrators. For details, see System Catalogs and System Views.

The database provides the object isolation feature. If this feature is enabled, users can view only the objects (tables, views, columns, and functions) that they have the permission to access. System administrators are not affected by this feature. For details, see ALTER DATABASE.
Java Script - Part I
Tags: javascript, programming, coding, beginners
Published: 2023-05-19 17:45:51

Java Script, Java Script, Java Script everywhere, If you see here it is JS, If you see there will be JS. So what is really JS? In this article we are going to deep dive into what is JS. This is the part 1 of my JS series.

## What is JS.

> JavaScript is a scripting or programming language that allows you to implement complex features on web pages — every time a web page does more than just sit there and display static information for you to look at — displaying timely content updates, interactive maps, animated 2D/3D graphics, scrolling video jukeboxes, etc. — you can bet that JavaScript is probably involved. -MDN

In the MDN, they are mentioning that JS is a scripting language, which is programming language that employs a high-level construct to interpret and execute one command at a time. We are mostly using JS for our day to day life, even now you are using JS. JS is used to update the content of the we dynamically.

## History of JS
JavaScript was invented by Brendan Eich in 1995.

It was developed for Netscape 2, and became the ECMA-262 standard in 1997.

After Netscape handed JavaScript over to ECMA, the Mozilla foundation continued to develop JavaScript for the Firefox browser. Mozilla's latest version was 1.8.5. (Identical to ES5).

Internet Explorer (IE4) was the first browser to support ECMA-262 Edition 1 (ES1).

[History in brief](https://www.w3schools.com/js/js_history.asp)


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

> Fun fact - JS is developed in 10 days 😅


## How JS is working

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

Step 1 - Parser

- In this step we are checking line by line for the syntax errors. It throws a kind of error and stops execution of the code

Step 2 - AST

- Once Parser is completed it's task, it will create a data structure called AST. (it stands for Abstract Syntax Tree)

Step 3 - Converting to Machine Code

- Once the Abstract Syntax Tree is created by the parser, the JavaScript engine converts the JavaScript code into the machine code (or in the language that machine can understand).

Step 4 - Machine code

- When the program written in the JavaScript gets converted in the machine language (or in byte code), the converted code is sent to the system for execution, and finally, that byte code run by the system/engine just like we observe in our first example.


That's end of the today's article. Let's meet next week.
CHEAT SHEET PTBR PHP 8.1
Tags: php, beginners, cheatsheet, braziliandevs
Published: 2023-05-19 17:40:13

```
<?php

// Declarando uma constante
const PI = 3.14159;

// Declarando uma variável
$nome = "João";

// Definindo tipos de retorno de função
function somar(int $a, int $b): int {
    return $a + $b;
}

// Estrutura condicional if-else
if ($idade >= 18) {
    echo "Você é maior de idade.";
} else {
    echo "Você é menor de idade.";
}

// Estrutura de repetição while
$i = 0;
while ($i < 10) {
    echo $i;
    $i++;
}

// Estrutura de repetição for
for ($i = 0; $i < 10; $i++) {
    echo $i;
}

// Função anônima (closure)
$saudacao = function ($nome) {
    echo "Olá, $nome!";
};

// Chamando a função anônima
$saudacao("Maria");

// Classes e objetos
class Pessoa {
    public $nome;
    private $idade;

    public function __construct($nome, $idade) {
        $this->nome = $nome;
        $this->idade = $idade;
    }

    public function getNome() {
        return $this->nome;
    }

    public function getIdade() {
        return $this->idade;
    }
}

// Instanciando um objeto
$pessoa = new Pessoa("João", 25);

// Chamando métodos do objeto
echo $pessoa->getNome();
echo $pessoa->getIdade();

// Tratamento de exceções
try {
    // Código que pode gerar uma exceção
    throw new Exception("Ocorreu um erro.");
} catch (Exception $e) {
    // Tratamento da exceção
    echo "Erro: " . $e->getMessage();
}

// Incluindo um arquivo
include "arquivo.php";

// Usando namespaces
namespace MeuNamespace;

class MinhaClasse {
    // ...
}

// Importando um namespace
use MeuNamespace\MinhaClasse;

// Usando a classe importada
$objeto = new MinhaClasse();

// Expressões regulares
if (preg_match("/[0-9]+/", $texto)) {
    echo "O texto contém números.";
}

// JSON
$dados = '{"nome": "João", "idade": 30}';
$usuario = json_decode($dados);

echo $usuario->nome;
echo $usuario->idade;

// Manipulação de arrays
$frutas = ["maçã", "banana", "laranja"];

// Iterando um array
foreach ($frutas as $fruta) {
    echo $fruta;
}

// Adicionando elemento a um array
$frutas[] = "abacaxi";

// Verificando se uma chave existe em um array
if (isset($frutas[2])) {
    echo "A chave existe.";
}

// Funções de array
$quantidade = count($frutas);
$invertido = array_reverse($frutas);
$filtrado = array_filter($frutas, function ($fruta) {
    return strlen($fruta) > 5;
});
$ordenado = sort($frutas);

// Operadores de comparação
$a = 5;
$b = 10;

if ($a == $b) {
    echo "A é igual a B.";
} elseif ($a > $b) {
    echo "A é maior que B.";
} else {
    echo "A é menor que B.";
}

// Operadores lógicos
$condicao1 = true;
$condicao2 = false;

if ($condicao1 && $condicao2) {
    echo "As duas condições são verdadeiras.";
}

if ($condicao1 || $condicao2) {
    echo "Pelo menos uma condição é verdadeira.";
}

if (!$condicao1) {
    echo "A condição 1 é falsa.";
}

// Manipulação de strings
$texto = "Olá, mundo!";
$tamanho = strlen($texto);
$maiusculo = strtoupper($texto);
$minusculo = strtolower($texto);
$substituido = str_replace("mundo", "amigo", $texto);
$partes = explode(", ", $texto);
$unido = implode("-", $partes);

?>

```
Run scheduled tasks on AWS, GCP or Azure.
Tags: programming, cloud, s3, aws
Published: 2023-05-19 17:36:25

When you want to create a scheduled job in the cloud, you'd probably think it's a really quick setup right? Really, all you should be providing is the frequency, a handler function and we're up and running...

It's always more complicated than this - AWS gives you a thousand-step (slightly exaggerated) guide to getting it setup. If you're the type that loves following 100-step guides to get anything done, then by all means. 

For me, the annoyance factor of having to perform a million steps to just run a bit of code is high. I'm always interested in getting to a path of automation. This is why we've built scheduling as a first-class citizen of the [Nitric framework](https://nitric.io).

Write this code, deploy this code, and the scheduler will do its job. Our local dashboard experience also lets you trigger the schedule offline for greater levels of debugging and testing before you even hit the cloud.

Here's the code, this is just a quick example of how you could clean up bucket space like S3 Storage every 3 days.

```
import { schedule, bucket } from "@nitric/sdk";

const assets = bucket("assets").for("deleting");

// A schedule that cleans up files in a bucket every 3 days
schedule("tidy").every("3 days", async (ctx) => {
  const files = await assets.files();
  await Promise.all(files.forEach(async (file) => await file.delete()));
});

```

You can run this offline or deploy it to the cloud with the [Nitric CLI](https://nitric.io/docs/installation).
React reusable components
Tags: react, javascript, beginners, programming
Published: 2023-05-19 17:22:34


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

When creating components, its better to fully optimize reactjs library for its use ( _re-usability_ ).  
Here are some key concepts to achieve resuability

- **Generalize your components**

    Create components that are loosely coupled from the concept you are trying to achieve. for example when creating a form, its better to create one input component that serves many purposes. i.e


```js
const Input = ({  name, value , onChange, ...rest } ) => {
    return <input 
        name={name}
        onChange={ e => onChange(e)}
        value={value}
        {...rest}
    />
}
```

- **Raise events and don't pass handlers directly.**

    Its better for a component to determine how it deals its data given either via props or state. To maintain and achieve re-usability, its better to avoid passing down handlers but raise events.

With this line of code, ` onChange= {e => onChange(e)}` the consumer of the `Input Component` can pass whatever kind of handler he/she wants therefore giving you more freedom on your code.
Efficient Data Analysis with dbForge Studio for PostgreSQL: A Comprehensive Overview
Tags: postgres, database, dbforge, dbforgestudio
Published: 2023-05-19 17:02:16

dbForge Studio for PostgreSQL is an advanced IDE that can facilitate PostgreSQL data analysis. In this article, we will learn about three interesting features of dbForge Studio for PostgreSQL - https://bigdataanalyticsnews.com/data-analysis-with-dbforge-studio-for-postgresql/

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